quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-16 05:38:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

notifications and style-sheet > function component

Browse source
This commit is contained in:
Labhansh Agrawal 2023-07-16 09:50:55 +05:30
parent 4e82f2b3e5
commit bc3c3935b4
2 changed files with 131 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

224
lib/components/notifications.tsx
View file

@ -7,126 +7,124 @@ import type {NotificationsProps} from '../hyper';
const Notification = decorate(Notification_, 'Notification'); const Notification = decorate(Notification_, 'Notification');
export default class Notifications extends React.PureComponent<NotificationsProps> { const Notifications: React.FC<NotificationsProps> = (props) => {
render() { return (
return ( <div className="notifications_view">
<div className="notifications_view"> {props.customChildrenBefore}
{this.props.customChildrenBefore} {props.fontShowing && (
{this.props.fontShowing && ( <Notification
<Notification key="font"
key="font" backgroundColor="rgba(255, 255, 255, .2)"
backgroundColor="rgba(255, 255, 255, .2)" text={`${props.fontSize}px`}
text={`${this.props.fontSize}px`} userDismissable={false}
userDismissable={false} onDismiss={props.onDismissFont}
onDismiss={this.props.onDismissFont} dismissAfter={1000}
dismissAfter={1000} />
/> )}
)}
{this.props.resizeShowing && ( {props.resizeShowing && (
<Notification <Notification
key="resize" key="resize"
backgroundColor="rgba(255, 255, 255, .2)" backgroundColor="rgba(255, 255, 255, .2)"
text={`${this.props.cols}x${this.props.rows}`} text={`${props.cols}x${props.rows}`}
userDismissable={false} userDismissable={false}
onDismiss={this.props.onDismissResize} onDismiss={props.onDismissResize}
dismissAfter={1000} dismissAfter={1000}
/> />
)} )}
{this.props.messageShowing && ( {props.messageShowing && (
<Notification <Notification
key="message" key="message"
backgroundColor="#FE354E" backgroundColor="#FE354E"
color="#fff" color="#fff"
text={this.props.messageText} text={props.messageText}
onDismiss={this.props.onDismissMessage} onDismiss={props.onDismissMessage}
userDismissable={this.props.messageDismissable} userDismissable={props.messageDismissable}
> >
{this.props.messageURL {props.messageURL ? (
? [ <>
this.props.messageText, {props.messageText} (
' (',
<a
key="link"
style={{color: '#fff'}}
onClick={(ev) => {
void window.require('electron').shell.openExternal(ev.currentTarget.href);
ev.preventDefault();
}}
href={this.props.messageURL}
>
more
</a>,
') '
]
: null}
</Notification>
)}
{this.props.updateShowing && (
<Notification
key="update"
backgroundColor="#18E179"
color="#000"
text={`Version ${this.props.updateVersion} ready`}
onDismiss={this.props.onDismissUpdate}
userDismissable
>
Version <b>{this.props.updateVersion}</b> ready.
{this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} (
<a
style={{color: '#000'}}
onClick={(ev) => {
void window.require('electron').shell.openExternal(ev.currentTarget.href);
ev.preventDefault();
}}
href={`https://github.com/vercel/hyper/releases/tag/${this.props.updateVersion}`}
>
notes
</a>
).{' '}
{this.props.updateCanInstall ? (
<a <a
style={{ style={{color: '#fff'}}
cursor: 'pointer',
textDecoration: 'underline',
fontWeight: 'bold'
}}
onClick={this.props.onUpdateInstall}
>
Restart
</a>
) : (
<a
style={{
color: '#000',
cursor: 'pointer',
textDecoration: 'underline',
fontWeight: 'bold'
}}
onClick={(ev) => { onClick={(ev) => {
void window.require('electron').shell.openExternal(ev.currentTarget.href); void window.require('electron').shell.openExternal(ev.currentTarget.href);
ev.preventDefault(); ev.preventDefault();
}} }}
href={this.props.updateReleaseUrl!} href={props.messageURL}
> >
Download more
</a> </a>
)} )
.{' '} </>
</Notification> ) : null}
)} </Notification>
{this.props.customChildren} )}
<style jsx>{` {props.updateShowing && (
.notifications_view { <Notification
position: fixed; key="update"
bottom: 20px; backgroundColor="#18E179"
right: 20px; color="#000"
} text={`Version ${props.updateVersion} ready`}
`}</style> onDismiss={props.onDismissUpdate}
</div> userDismissable
); >
} Version <b>{props.updateVersion}</b> ready.
} {props.updateNote && ` ${props.updateNote.trim().replace(/\.$/, '')}`} (
<a
style={{color: '#000'}}
onClick={(ev) => {
void window.require('electron').shell.openExternal(ev.currentTarget.href);
ev.preventDefault();
}}
href={`https://github.com/vercel/hyper/releases/tag/${props.updateVersion}`}
>
notes
</a>
).{' '}
{props.updateCanInstall ? (
<a
style={{
cursor: 'pointer',
textDecoration: 'underline',
fontWeight: 'bold'
}}
onClick={props.onUpdateInstall}
>
Restart
</a>
) : (
<a
style={{
color: '#000',
cursor: 'pointer',
textDecoration: 'underline',
fontWeight: 'bold'
}}
onClick={(ev) => {
void window.require('electron').shell.openExternal(ev.currentTarget.href);
ev.preventDefault();
}}
href={props.updateReleaseUrl!}
>
Download
</a>
)}
.{' '}
</Notification>
)}
{props.customChildren}
<style jsx>{`
.notifications_view {
position: fixed;
bottom: 20px;
right: 20px;
}
`}</style>
</div>
);
};
export default Notifications;

40
lib/components/style-sheet.tsx
View file

@ -1,24 +1,24 @@
import React from 'react'; import React from 'react';
import type {StyleSheetProps} from '../hyper'; import type {StyleSheetProps} from '../hyper';
export default class StyleSheet extends React.PureComponent<StyleSheetProps> { const StyleSheet: React.FC<StyleSheetProps> = (props) => {
render() { const {borderColor} = props;
const {borderColor} = this.props;
return ( return (
<style jsx global>{` <style jsx global>{`
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; width: 5px;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px; -webkit-border-radius: 10px;
border-radius: 10px; border-radius: 10px;
background: ${borderColor}; background: ${borderColor};
} }
::-webkit-scrollbar-thumb:window-inactive { ::-webkit-scrollbar-thumb:window-inactive {
background: ${borderColor}; background: ${borderColor};
} }
`}</style> `}</style>
); );
} };
}
export default StyleSheet;