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

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

68
lib/components/notifications.tsx
View file

@ -7,93 +7,90 @@ 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">
{this.props.customChildrenBefore} {props.customChildrenBefore}
{this.props.fontShowing && ( {props.fontShowing && (
<Notification <Notification
key="font" key="font"
backgroundColor="rgba(255, 255, 255, .2)" backgroundColor="rgba(255, 255, 255, .2)"
text={`${this.props.fontSize}px`} text={`${props.fontSize}px`}
userDismissable={false} userDismissable={false}
onDismiss={this.props.onDismissFont} onDismiss={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 <a
key="link"
style={{color: '#fff'}} style={{color: '#fff'}}
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.messageURL} href={props.messageURL}
> >
more more
</a>, </a>
') ' )
] </>
: null} ) : null}
</Notification> </Notification>
)} )}
{this.props.updateShowing && ( {props.updateShowing && (
<Notification <Notification
key="update" key="update"
backgroundColor="#18E179" backgroundColor="#18E179"
color="#000" color="#000"
text={`Version ${this.props.updateVersion} ready`} text={`Version ${props.updateVersion} ready`}
onDismiss={this.props.onDismissUpdate} onDismiss={props.onDismissUpdate}
userDismissable userDismissable
> >
Version <b>{this.props.updateVersion}</b> ready. Version <b>{props.updateVersion}</b> ready.
{this.props.updateNote && ` ${this.props.updateNote.trim().replace(/\.$/, '')}`} ( {props.updateNote && ` ${props.updateNote.trim().replace(/\.$/, '')}`} (
<a <a
style={{color: '#000'}} style={{color: '#000'}}
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={`https://github.com/vercel/hyper/releases/tag/${this.props.updateVersion}`} href={`https://github.com/vercel/hyper/releases/tag/${props.updateVersion}`}
> >
notes notes
</a> </a>
).{' '} ).{' '}
{this.props.updateCanInstall ? ( {props.updateCanInstall ? (
<a <a
style={{ style={{
cursor: 'pointer', cursor: 'pointer',
textDecoration: 'underline', textDecoration: 'underline',
fontWeight: 'bold' fontWeight: 'bold'
}} }}
onClick={this.props.onUpdateInstall} onClick={props.onUpdateInstall}
> >
Restart Restart
</a> </a>
@ -109,7 +106,7 @@ export default class Notifications extends React.PureComponent<NotificationsProp
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.updateReleaseUrl!}
> >
Download Download
</a> </a>
@ -117,7 +114,7 @@ export default class Notifications extends React.PureComponent<NotificationsProp
.{' '} .{' '}
</Notification> </Notification>
)} )}
{this.props.customChildren} {props.customChildren}
<style jsx>{` <style jsx>{`
.notifications_view { .notifications_view {
@ -128,5 +125,6 @@ export default class Notifications extends React.PureComponent<NotificationsProp
`}</style> `}</style>
</div> </div>
); );
} };
}
export default Notifications;

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

@ -1,9 +1,8 @@
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>{`
@ -20,5 +19,6 @@ export default class StyleSheet extends React.PureComponent<StyleSheetProps> {
} }
`}</style> `}</style>
); );
} };
}
export default StyleSheet;