From 20173f0e86f2ad984b2efbf57d78fcbed7391ed3 Mon Sep 17 00:00:00 2001 From: Timothy <1695613+timothyis@users.noreply.github.com> Date: Sat, 17 Mar 2018 12:51:36 +0000 Subject: [PATCH] Migrate styling to styled-jsx (#2761) Fixes #2737 --- lib/base-components.js | 69 -------- lib/components/header.js | 223 ++++++++++++++------------ lib/components/notification.js | 73 ++++----- lib/components/notifications.js | 25 ++- lib/components/split-pane.js | 140 ++++++++--------- lib/components/style-sheet.js | 186 +++++++++++----------- lib/components/tab.js | 271 ++++++++++++++++---------------- lib/components/tabs.js | 105 ++++++------- lib/components/term-group.js | 5 +- lib/components/term.js | 42 +++-- lib/components/terms.js | 71 ++++----- lib/containers/hyper.js | 53 ++++--- lib/utils/plugins.js | 3 +- package.json | 11 +- yarn.lock | 66 ++++---- 15 files changed, 648 insertions(+), 695 deletions(-) delete mode 100644 lib/base-components.js diff --git a/lib/base-components.js b/lib/base-components.js deleted file mode 100644 index 7b7af94d..00000000 --- a/lib/base-components.js +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import {StyleSheet, css} from 'aphrodite-simple'; - -const decorateBaseComponent = Component => { - return class BaseComponent extends Component { - constructor() { - super(); - this.styles_ = this.createStyleSheet(); - this.cssHelper = this.cssHelper.bind(this); - } - - createStyleSheet() { - if (!this.styles) { - return {}; - } - - const styles = this.styles(); - - if (typeof styles !== 'object') { - throw new TypeError('Component `styles` returns a non-object'); - } - - return StyleSheet.create(this.styles()); - } - - // wrap aphrodite's css helper for two reasons: - // - we can give the element an unaltered global classname - // that can be used to introduce global css side effects - // for example, through the configuration, web inspector - // or user agent extensions - // - the user doesn't need to keep track of both `css` - // and `style`, and we make that whole ordeal easier - cssHelper(...args) { - const classes = args - .map(c => { - if (c) { - // we compute the global name from the given - // css class and we prepend the component name - // - // it's important classes never get mangled by - // uglifiers so that we can avoid collisions - const component = this.constructor.name.toString().toLowerCase(); - const globalName = `${component}_${c}`; - return [globalName, css(this.styles_[c])]; - } - return null; - }) - // skip nulls - .filter(v => Boolean(v)) - // flatten - .reduce((a, b) => a.concat(b)); - return classes.length ? classes.join(' ') : null; - } - - render() { - // convert static objects from `babel-plugin-transform-jsx` - // to `React.Element`. - if (!this.template) { - throw new TypeError("Component doesn't define `template`"); - } - - // invoke the template creator passing our css helper - return this.template(this.cssHelper); - } - }; -}; - -export const PureComponent = decorateBaseComponent(React.PureComponent); -export const Component = decorateBaseComponent(React.Component); diff --git a/lib/components/header.js b/lib/components/header.js index 8df41278..6f362982 100644 --- a/lib/components/header.js +++ b/lib/components/header.js @@ -1,13 +1,12 @@ import React from 'react'; -import {PureComponent} from '../base-components'; import {decorate, getTabsProps} from '../utils/plugins'; import Tabs_ from './tabs'; const Tabs = decorate(Tabs_, 'Tabs'); -export default class Header extends PureComponent { +export default class Header extends React.PureComponent { constructor() { super(); this.onChangeIntent = this.onChangeIntent.bind(this); @@ -87,7 +86,7 @@ export default class Header extends PureComponent { }; } - template(css) { + render() { const {isMac} = this.props; const props = getTabsProps(this.props, { tabs: this.props.tabs, @@ -109,30 +108,42 @@ export default class Header extends PureComponent { return (
{!isMac && ( -
1 && 'windowHeaderWithBorder')} style={{borderColor}}> +
1 ? 'header_windowHeaderWithBorder' : ''}`} + style={{borderColor}} + > {hambMenu && ( )} - {title} + {title} {winCtrls && ( -
- +
+ - + - +
@@ -142,95 +153,109 @@ export default class Header extends PureComponent { {this.props.customChildrenBefore} {this.props.customChildren} + +
); } - - styles() { - return { - header: { - position: 'fixed', - top: '1px', - left: '1px', - right: '1px', - zIndex: '100' - }, - - headerRounded: { - borderTopLeftRadius: '4px', - borderTopRightRadius: '4px' - }, - - windowHeader: { - height: '34px', - width: '100%', - position: 'fixed', - top: '1px', - left: '1px', - right: '1px', - WebkitAppRegion: 'drag', - WebkitUserSelect: 'none', - display: 'flex', - justifyContent: 'center', - alignItems: 'center' - }, - - windowHeaderWithBorder: { - borderColor: '#ccc', - borderBottomStyle: 'solid', - borderBottomWidth: '1px' - }, - - appTitle: { - fontSize: '12px' - }, - - shape: { - width: '40px', - height: '34px', - padding: '12px 15px 12px 15px', - WebkitAppRegion: 'no-drag', - color: '#FFFFFF', - opacity: 0.5, - shapeRendering: 'crispEdges', - ':hover': { - opacity: 1 - }, - ':active': { - opacity: 0.3 - } - }, - - hamburgerMenuLeft: { - position: 'fixed', - top: '0', - left: '0' - }, - - hamburgerMenuRight: { - position: 'fixed', - top: '0', - right: '0' - }, - - windowControls: { - display: 'flex', - width: '120px', - height: '34px', - justifyContent: 'space-between', - position: 'fixed', - right: '0' - }, - - windowControlsLeft: {left: '0px'}, - - closeWindowLeft: {order: 1}, - - minimizeWindowLeft: {order: 2}, - - maximizeWindowLeft: {order: 3}, - - closeWindow: {':hover': {color: '#FE354E'}, ':active': {color: '#FE354E'}} - }; - } } diff --git a/lib/components/notification.js b/lib/components/notification.js index bb2c421e..eaa05fc2 100644 --- a/lib/components/notification.js +++ b/lib/components/notification.js @@ -1,7 +1,6 @@ import React from 'react'; -import {PureComponent} from '../base-components'; -export default class Notification extends PureComponent { +export default class Notification extends React.PureComponent { constructor() { super(); this.state = { @@ -63,51 +62,53 @@ export default class Notification extends PureComponent { clearTimeout(this.dismissTimer); } - template(css) { + render() { const {backgroundColor} = this.props; const opacity = this.state.dismissing ? 0 : 1; return ( -
+
{this.props.customChildrenBefore} {this.props.children || this.props.text} {this.props.userDismissable ? ( - + [x] ) : null} {this.props.customChildren} + +
); } - - styles() { - return { - indicator: { - display: 'inline-block', - cursor: 'default', - WebkitUserSelect: 'none', - background: 'rgba(255, 255, 255, .2)', - borderRadius: '2px', - padding: '8px 14px 9px', - marginLeft: '10px', - transition: '150ms opacity ease', - color: '#fff', - fontSize: '11px', - fontFamily: `-apple-system, BlinkMacSystemFont, - "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", - "Droid Sans", "Helvetica Neue", sans-serif` - }, - - dismissLink: { - position: 'relative', - left: '4px', - cursor: 'pointer', - color: '#528D11', - ':hover': { - color: '#2A5100' - } - } - }; - } } diff --git a/lib/components/notifications.js b/lib/components/notifications.js index 13624548..fdea5d97 100644 --- a/lib/components/notifications.js +++ b/lib/components/notifications.js @@ -1,16 +1,15 @@ import React from 'react'; -import {PureComponent} from '../base-components'; import {decorate} from '../utils/plugins'; import Notification_ from './notification'; const Notification = decorate(Notification_, 'Notification'); -export default class Notifications extends PureComponent { - template(css) { +export default class Notifications extends React.PureComponent { + render() { return ( -
+
{this.props.customChildrenBefore} {this.props.fontShowing && ( )} {this.props.customChildren} + +
); } - - styles() { - return { - view: { - position: 'fixed', - bottom: '20px', - right: '20px' - } - }; - } } diff --git a/lib/components/split-pane.js b/lib/components/split-pane.js index b53e5917..706e1443 100644 --- a/lib/components/split-pane.js +++ b/lib/components/split-pane.js @@ -1,9 +1,8 @@ /* eslint-disable quote-props */ import React from 'react'; -import {PureComponent} from '../base-components'; import _ from 'lodash'; -export default class SplitPane extends PureComponent { +export default class SplitPane extends React.PureComponent { constructor(props) { super(props); this.handleDragStart = this.handleDragStart.bind(this); @@ -104,7 +103,7 @@ export default class SplitPane extends PureComponent { } } - template(css) { + render() { const children = this.props.children; const {direction, borderColor} = this.props; const sizeProperty = direction === 'horizontal' ? 'height' : 'flexBasis'; @@ -116,7 +115,7 @@ export default class SplitPane extends PureComponent { sizes = new Array(children.length).fill(1 / children.length); } return ( -
+
{React.Children.map(children, (child, i) => { const style = { // flexBasis doesn't work for the first horizontal pane, height need to be specified @@ -125,7 +124,7 @@ export default class SplitPane extends PureComponent { flexGrow: 0 }; return [ -
+
{child}
, i < children.length - 1 ? ( @@ -134,80 +133,79 @@ export default class SplitPane extends PureComponent { onMouseDown={this.handleDragStart} onDoubleClick={this.handleAutoResize} style={{backgroundColor: borderColor}} - className={css('divider', `divider_${direction}`)} + className={`splitpane_divider splitpane_divider_${direction}`} /> ) : null ]; })} -
+
+ +
); } - styles() { - return { - panes: { - display: 'flex', - flex: 1, - outline: 'none', - position: 'relative', - width: '100%', - height: '100%' - }, - - panes_vertical: { - flexDirection: 'row' - }, - - panes_horizontal: { - flexDirection: 'column' - }, - - pane: { - flex: 1, - outline: 'none', - position: 'relative' - }, - - divider: { - boxSizing: 'border-box', - zIndex: '1', - backgroundClip: 'padding-box', - flexShrink: 0 - }, - - divider_vertical: { - borderLeft: '5px solid rgba(255, 255, 255, 0)', - borderRight: '5px solid rgba(255, 255, 255, 0)', - width: '11px', - margin: '0 -5px', - cursor: 'col-resize' - }, - - divider_horizontal: { - height: '11px', - margin: '-5px 0', - borderTop: '5px solid rgba(255, 255, 255, 0)', - borderBottom: '5px solid rgba(255, 255, 255, 0)', - cursor: 'row-resize', - width: '100%' - }, - - // this shim is used to make sure mousemove events - // trigger in all the draggable area of the screen - // - // this is not the case due to hterm's