From ab243dc6db13d4d74e0e76f1e7c65074f012220a Mon Sep 17 00:00:00 2001 From: John Lyon-Smith Date: Mon, 26 Feb 2018 09:14:04 -0800 Subject: [PATCH] Everything compiling again --- mobile/.expo/packager-info.json | 2 +- website/config/webpack.config.dev.js | 2 +- website/src/Dialog/ProgressDialog.js | 25 ---------- website/src/Dialog/WaitDialog.js | 62 ++---------------------- website/src/Dialog/index.js | 1 - website/src/Profile/Profile.js | 7 +-- website/src/ui/Dimmer.js | 30 ++++++++++++ website/src/ui/Dimmer.style.js | 17 +++++++ website/src/ui/Loader.js | 72 +++++++++++++--------------- website/src/ui/Modal.js | 5 +- website/src/ui/Modal.style.js | 16 ------- 11 files changed, 91 insertions(+), 148 deletions(-) delete mode 100644 website/src/Dialog/ProgressDialog.js create mode 100644 website/src/ui/Dimmer.style.js diff --git a/mobile/.expo/packager-info.json b/mobile/.expo/packager-info.json index 76e10d9..dca2609 100644 --- a/mobile/.expo/packager-info.json +++ b/mobile/.expo/packager-info.json @@ -1,5 +1,5 @@ { "expoServerPort": 19000, "packagerPort": 19001, - "packagerPid": 44581 + "packagerPid": 76299 } \ No newline at end of file diff --git a/website/config/webpack.config.dev.js b/website/config/webpack.config.dev.js index 364703a..2b3cbef 100644 --- a/website/config/webpack.config.dev.js +++ b/website/config/webpack.config.dev.js @@ -1,4 +1,4 @@ -feslint'use strict'; +'use strict'; const autoprefixer = require('autoprefixer'); const path = require('path'); diff --git a/website/src/Dialog/ProgressDialog.js b/website/src/Dialog/ProgressDialog.js deleted file mode 100644 index 6809f39..0000000 --- a/website/src/Dialog/ProgressDialog.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import { Dimmer, Button, Progress } from '../ui' - -export class ProgressDialog extends React.Component { - static propTypes = { - open: PropTypes.bool.isRequired, - message: PropTypes.string.isRequired, - percent: PropTypes.number.isRequired, - onCancel: PropTypes.func - } - - render() { - return ( - -
- {this.props.message} - - -
- - ) - } -} diff --git a/website/src/Dialog/WaitDialog.js b/website/src/Dialog/WaitDialog.js index 371f1b7..c26a2c8 100644 --- a/website/src/Dialog/WaitDialog.js +++ b/website/src/Dialog/WaitDialog.js @@ -1,70 +1,18 @@ import React from 'react' import PropTypes from 'prop-types' -import { Dimmer, Loader } from '../ui' +import { Dimmer, Loader, Text } from '../ui' export class WaitDialog extends React.Component { static propTypes = { - active: PropTypes.bool.isRequired, message: PropTypes.string.isRequired } render() { return ( -
- {this.props.message}... -
+ + + {this.props.message && {this.props.message}...} + ) } } - -import React from 'react'; -import PropTypes from 'prop-types'; -import { keyframes, css } from 'emotion'; -import { onlyUpdateForKeys } from 'recompose'; - -// This returns an animation -const pulse = keyframes` - 0% {transform: scale(1);opacity: 1} - 45% {transform: scale(0.1);opacity: 0.7} - 80% {transform: scale(1);opacity: 1} -`; - -class Loader extends React.Component { - style = i => css`{ - background-color: ${this.props.color}; - width: ${this.props.size}px; - height: ${this.props.size}px; - margin: ${this.props.margin}; - border-radius: 100%; - display: inline-block; - animation: ${pulse} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08); - animation-fill-mode: both; - }`; - - render() { - return this.props.loading ? -
-
-
-
-
: null; - } -} - -Loader.propTypes = { - loading: PropTypes.bool, - color: PropTypes.string, - size: PropTypes.number, - margin: PropTypes.string -}; - -Loader.defaultProps = { - loading: true, - color: '#000000', - size: 15, - margin: '2px' -}; - -const Component = onlyUpdateForKeys(['loading', 'color', 'size', 'margin'])(Loader); -Component.defaultProps = Loader.defaultProps; -export default Component; diff --git a/website/src/Dialog/index.js b/website/src/Dialog/index.js index 45631b0..b90cf5c 100644 --- a/website/src/Dialog/index.js +++ b/website/src/Dialog/index.js @@ -1,5 +1,4 @@ export { WaitDialog } from './WaitDialog' -export { ProgressDialog } from './ProgressDialog' export { YesNoMessageDialog } from './YesNoMessageDialog' export { MessageDialog } from './MessageDialog' export { ChangePasswordDialog } from './ChangePasswordDialog' diff --git a/website/src/Profile/Profile.js b/website/src/Profile/Profile.js index 4ea7017..d8453f7 100644 --- a/website/src/Profile/Profile.js +++ b/website/src/Profile/Profile.js @@ -1,7 +1,7 @@ import React from 'react' import { ProfileForm } from './ProfileForm' import { Constants, api } from '../helpers' -import { WaitDialog, MessageDialog, ChangePasswordDialog, ProgressDialog, ChangeEmailDialog } from '../Dialog' +import { WaitDialog, MessageDialog, ChangePasswordDialog, ChangeEmailDialog } from '../Dialog' import { autoBind } from 'auto-bind2' export class Profile extends React.Component { @@ -165,11 +165,6 @@ export class Profile extends React.Component { - -
) } diff --git a/website/src/ui/Dimmer.js b/website/src/ui/Dimmer.js index e69de29..b158433 100644 --- a/website/src/ui/Dimmer.js +++ b/website/src/ui/Dimmer.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' +import Radium from 'radium' +import PropTypes from 'prop-types' +import style from './Dimmer.style' +import { reactAutoBind } from 'auto-bind2' + +export class Dimmer extends Component { + static propTypes = { + children: PropTypes.node + } + + constructor(props) { + super(props) + reactAutoBind(this) + } + + preventPropagation(e) { + e.stopPropagation() + } + + render() { + return ( +
+ {this.props.children} +
+ ) + } +} + +export default Radium(Dimmer) diff --git a/website/src/ui/Dimmer.style.js b/website/src/ui/Dimmer.style.js new file mode 100644 index 0000000..bcbf8b3 --- /dev/null +++ b/website/src/ui/Dimmer.style.js @@ -0,0 +1,17 @@ +export default { + dimmer: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + height: '100vh', + width: '100vw', + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + zIndex: 100, + background: 'rgba(25, 25, 30, 0.75)' + } +} diff --git a/website/src/ui/Loader.js b/website/src/ui/Loader.js index 764b15b..a703b51 100644 --- a/website/src/ui/Loader.js +++ b/website/src/ui/Loader.js @@ -1,51 +1,43 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { keyframes, css } from 'emotion'; -import { onlyUpdateForKeys } from 'recompose'; - -// This returns an animation -const pulse = keyframes` - 0% {transform: scale(1);opacity: 1} - 45% {transform: scale(0.1);opacity: 0.7} - 80% {transform: scale(1);opacity: 1} -`; +import React from 'react' +import Radium from 'radium' +import PropTypes from 'prop-types' class Loader extends React.Component { - style = i => css`{ - background-color: ${this.props.color}; - width: ${this.props.size}px; - height: ${this.props.size}px; - margin: ${this.props.margin}; - border-radius: 100%; - display: inline-block; - animation: ${pulse} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08); - animation-fill-mode: both; - }`; + static propTypes = { + color: PropTypes.string, + size: PropTypes.number, + margin: PropTypes.string + } + + static defaultProps = { + color: '#000000', + size: 15, + margin: '2px' + } + + style(i) { + return { + backgroundColor: `${this.props.color}`, + width: `${this.props.size}px`, + height: `${this.props.size}px`, + margin: `${this.props.margin}`, + borderRadius: '100%', + display: 'inline-block', + // 0% {transform: scale(1); opacity: 1} 45% {transform: scale(0.1); opacity: 0.7} 80% {transform: scale(1); opacity: 1} 0.75s ${i * 0.12}s infinite cubic-bezier(.2,.68,.18,1.08) + animation: ``, + animationFillMode: 'both' + } + } render() { - return this.props.loading ? + return (
-
: null; +
+ ) } } -Loader.propTypes = { - loading: PropTypes.bool, - color: PropTypes.string, - size: PropTypes.number, - margin: PropTypes.string -}; - -Loader.defaultProps = { - loading: true, - color: '#000000', - size: 15, - margin: '2px' -}; - -const Component = onlyUpdateForKeys(['loading', 'color', 'size', 'margin'])(Loader); -Component.defaultProps = Loader.defaultProps; -export default Component; +export default Radium(Loader) diff --git a/website/src/ui/Modal.js b/website/src/ui/Modal.js index e281edd..1346719 100644 --- a/website/src/ui/Modal.js +++ b/website/src/ui/Modal.js @@ -2,8 +2,9 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import style from './Modal.style' import { reactAutoBind } from 'auto-bind2' +import Radium from 'radium' -export class Modal extends Component { +class Modal extends Component { static propTypes = { children: PropTypes.node } @@ -27,3 +28,5 @@ export class Modal extends Component { ) } } + +export default Radium(Modal) diff --git a/website/src/ui/Modal.style.js b/website/src/ui/Modal.style.js index 434c2bf..4b632f6 100644 --- a/website/src/ui/Modal.style.js +++ b/website/src/ui/Modal.style.js @@ -1,20 +1,4 @@ export default { - dimmer: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'center', - height: '100vh', - width: '100vw', - position: 'fixed', - top: 0, - left: 0, - right: 0, - bottom: 0, - zIndex: 100, - background: 'rgba(25, 25, 30, 0.75)' - }, - modal: { zIndex: 101, background: '#FFFFFF',