john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Switching to @Radium decorator

Browse Source
This commit is contained in:
John Lyon-Smith
2018-03-22 15:27:12 -07:00
parent 06ae76047e
commit 1b35ac8b22
32 changed files with 115 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/ui/Anime.js
View File

@@ -2,7 +2,7 @@ import React from 'react'
import anime from 'animejs'
import PropTypes from 'prop-types'
export default class Anime extends React.Component {
export class Anime extends React.Component {
static propTypes = {
as: PropTypes.string,
children: PropTypes.node,

8
website/src/ui/BoundButton.js
View File

@@ -1,9 +1,9 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Button } from 'ui'
import { reactAutoBind } from 'auto-bind2'
import autobind from 'autobind-decorator'
export default class BoundButton extends React.Component {
export class BoundButton extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired,
text: PropTypes.string,
@@ -15,14 +15,12 @@ export default class BoundButton extends React.Component {
constructor(props) {
super(props)
reactAutoBind(this)
let { name, binder } = this.props
binder.addListener(name, this.updateValue)
this.state = binder.getFieldState(name)
}
@autobind
updateValue(e) {
this.setState(e.state)
}

6
website/src/ui/BoundCheckbox.js
View File

@@ -1,10 +1,10 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Checkbox } from 'ui'
import { reactAutoBind } from 'auto-bind2'
import autobind from 'autobind-decorator'
import { fontInfo } from 'ui/style'
export default class BoundCheckbox extends React.Component {
export class BoundCheckbox extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired,
label: PropTypes.string,
@@ -13,10 +13,10 @@ export default class BoundCheckbox extends React.Component {
constructor(props) {
super(props)
reactAutoBind(this)
this.state = props.binder.getFieldState(props.name)
}
@autobind
handleChange(e, data) {
const { binder, name } = this.props
const state = binder.getFieldState(name)

2
website/src/ui/BoundEmailIcon.js
View File

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
import { Text, Icon } from 'ui'
import { sizeInfo } from 'ui/style'
export default class BoundEmailIcon extends React.Component {
export class BoundEmailIcon extends React.Component {
static propTypes = {
name: PropTypes.string,
binder: PropTypes.object,

6
website/src/ui/BoundInput.js
View File

@@ -1,9 +1,9 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Input, Text } from 'ui'
import { reactAutoBind } from 'auto-bind2'
import autobind from 'autobind-decorator'
export default class BoundInput extends React.Component {
export class BoundInput extends React.Component {
static propTypes = {
name: PropTypes.string.isRequired,
message: PropTypes.string,
@@ -15,10 +15,10 @@ export default class BoundInput extends React.Component {
constructor(props) {
super(props)
reactAutoBind(this)
this.state = props.binder.getFieldState(props.name)
}
@autobind
handleChange(e) {
const { binder, name } = this.props
const state = binder.getFieldState(name)

5
website/src/ui/Box.js
View File

@@ -2,7 +2,8 @@ import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
class Box extends Component {
@Radium
export class Box extends Component {
static propTypes = {
borderTop: PropTypes.object,
borderBottom: PropTypes.object,
@@ -53,5 +54,3 @@ class Box extends Component {
)
}
}
export default Radium(Box)

5
website/src/ui/Button.js
View File

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { fontInfo, colorInfo, sizeInfo } from './style'
class Button extends Component {
@Radium
export class Button extends Component {
static propTypes = {
text: PropTypes.node,
visible: PropTypes.bool,
@@ -54,5 +55,3 @@ class Button extends Component {
)
}
}
export default Radium(Button)

13
website/src/ui/Checkbox.js
View File

@@ -1,10 +1,11 @@
import Radium from 'radium'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { reactAutoBind } from 'auto-bind2'
import autobind from 'autobind-decorator'
import { colorInfo, sizeInfo } from './style'
class Checkbox extends Component {
@Radium
export class Checkbox extends Component {
static propTypes = {
value: PropTypes.bool,
disabled: PropTypes.bool,
@@ -62,7 +63,6 @@ class Checkbox extends Component {
constructor(props) {
super(props)
reactAutoBind(this)
this.state = {
checked: props.value
}
@@ -74,7 +74,8 @@ class Checkbox extends Component {
}
}
onClick(e) {
@autobind
handleClick(e) {
const checked = !this.state.checked
this.setState({ checked })
@@ -90,12 +91,10 @@ class Checkbox extends Component {
return (
<div style={[Checkbox.style.checkbox, disabled ? Checkbox.style.checkboxDisabled : !checked ? Checkbox.style.checkboxUnchecked : null]}
onClick={disabled ? null : this.onClick}>
onClick={disabled ? null : this.handleClick}>
<input id={id} type='checkbox' style={Checkbox.style.input} disabled={disabled} />
<div style={[Checkbox.style.checkmark, !checked && Checkbox.style.checkmarkUnchecked]} />
</div>
)
}
}
export default Radium(Checkbox)

5
website/src/ui/Column.js
View File

@@ -2,7 +2,8 @@ import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Column extends Component {
@Radium
export class Column extends Component {
static propTypes = {
children: PropTypes.node,
minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
@@ -41,5 +42,3 @@ Column.Item = Radium(class StackLayoutItem extends Component {
)
}
})
export default Radium(Column)

13
website/src/ui/Dimmer.js
View File

@@ -1,8 +1,8 @@
import React, { Component } from 'react'
import Radium from 'radium'
import PropTypes from 'prop-types'
import { reactAutoBind } from 'auto-bind2'
@Radium
export class Dimmer extends Component {
static propTypes = {
active: PropTypes.bool.isRequired,
@@ -27,22 +27,15 @@ export class Dimmer extends Component {
}
}
constructor(props) {
super(props)
reactAutoBind(this)
}
preventPropagation(e) {
handleClick(e) {
e.stopPropagation()
}
render() {
return this.props.active ? (
<div style={Dimmer.style.div} onClick={this.preventPropagation}>
<div style={Dimmer.style.div} onClick={this.handleClick}>
{this.props.children}
</div>
) : null
}
}
export default Radium(Dimmer)

5
website/src/ui/HeaderText.js
View File

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { sizeInfo, fontInfo } from 'ui/style'
class HeaderText extends Component {
@Radium
export class HeaderText extends Component {
static propTypes = {
text: PropTypes.string,
}
@@ -31,5 +32,3 @@ class HeaderText extends Component {
)
}
}
export default Radium(HeaderText)

2
website/src/ui/Icon.js
View File

@@ -4,7 +4,7 @@ import { sizeInfo } from './style'
// See https://www.flaticon.com/packs/free-basic-ui-elements
export default class Icon extends Component {
export class Icon extends Component {
static propTypes = {
name: PropTypes.string.isRequired,
size: PropTypes.number,

5
website/src/ui/Image.js
View File

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { sizeInfo } from './style'
class Image extends Component {
@Radium
export class Image extends Component {
static propTypes = {
source: PropTypes.string,
width: PropTypes.number,
@@ -23,5 +24,3 @@ class Image extends Component {
)
}
}
export default Radium(Image)

5
website/src/ui/Input.js
View File

@@ -5,7 +5,8 @@ import { colorInfo, sizeInfo, fontInfo } from 'ui/style'
// See https://stackoverflow.com/a/6891562/576235 for why we wrap the <input /> element
class Input extends Component {
@Radium
export class Input extends Component {
static propTypes = {
password: PropTypes.bool,
placeholder: PropTypes.string,
@@ -58,5 +59,3 @@ class Input extends Component {
)
}
}
export default Radium(Input)

5
website/src/ui/Link.js
View File

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { fontInfo } from './style'
class Link extends Component {
@Radium
export class Link extends Component {
static propTypes = {
to: PropTypes.string,
size: PropTypes.string,
@@ -26,5 +27,3 @@ class Link extends Component {
)
}
}
export default Radium(Link)

5
website/src/ui/List.js
View File

@@ -4,7 +4,8 @@ import React, { Component } from 'react'
import { Box, Icon } from '.'
import { sizeInfo, colorInfo, fontInfo } from './style'
class List extends Component {
@Radium
export class List extends Component {
static propTypes = {
data: PropTypes.array,
render: PropTypes.func.isRequired,
@@ -91,5 +92,3 @@ List.Text = Radium(class ListText extends Component {
)
}
})
export default Radium(List)

5
website/src/ui/Loader.js
View File

@@ -3,7 +3,8 @@ import Radium from 'radium'
import { colorInfo, sizeInfo } from 'ui/style'
import anime from 'animejs'
class Loader extends React.Component {
@Radium
export class Loader extends React.Component {
render() {
const size = sizeInfo.loaderSize
const spacing = sizeInfo.loaderSpacing
@@ -40,5 +41,3 @@ class Loader extends React.Component {
)
}
}
export default Radium(Loader)

5
website/src/ui/Modal.js
View File

@@ -4,7 +4,8 @@ import Radium from 'radium'
import { Dimmer } from 'ui'
import { colorInfo, sizeInfo } from 'ui/style'
class Modal extends Component {
@Radium
export class Modal extends Component {
static propTypes = {
children: PropTypes.node,
open: PropTypes.bool,
@@ -34,5 +35,3 @@ class Modal extends Component {
)
}
}
export default Radium(Modal)

5
website/src/ui/PanelButton.js
View File

@@ -4,7 +4,8 @@ import React, { Component } from 'react'
import { Icon } from '.'
import { sizeInfo, fontInfo, colorInfo } from 'ui/style'
class PanelButton extends Component {
@Radium
export class PanelButton extends Component {
static propTypes = {
onClick: PropTypes.func,
icon: PropTypes.string.isRequired,
@@ -59,5 +60,3 @@ class PanelButton extends Component {
)
}
}
export default Radium(PanelButton)

5
website/src/ui/Row.js
View File

@@ -2,7 +2,8 @@ import Radium from 'radium'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Row extends Component {
@Radium
export class Row extends Component {
static propTypes = {
children: PropTypes.node,
minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
@@ -41,5 +42,3 @@ Row.Item = Radium(class RowLayoutItem extends Component {
)
}
})
export default Radium(Row)

5
website/src/ui/Text.js
View File

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { fontInfo } from './style'
class Text extends Component {
@Radium
export class Text extends Component {
static propTypes = {
size: PropTypes.oneOf(['small', 'medium', 'large', 'huge']),
color: PropTypes.oneOf(['normal', 'inverse', 'alert', 'dimmed']),
@@ -37,5 +38,3 @@ class Text extends Component {
)
}
}
export default Radium(Text)

42
website/src/ui/index.js
View File

@@ -1,22 +1,22 @@
export { default as Anime } from './Anime'
export { default as Box } from './Box'
export { default as Button } from './Button'
export { Anime } from './Anime'
export { Box } from './Box'
export { Button } from './Button'
export { HeaderButton } from './HeaderButton'
export { default as HeaderText } from './HeaderText'
export { default as PanelButton } from './PanelButton'
export { default as Checkbox } from './Checkbox'
export { default as Input } from './Input'
export { default as Image } from './Image'
export { default as Text } from './Text'
export { default as Link } from './Link'
export { default as Icon } from './Icon'
export { default as List } from './List'
export { default as Modal } from './Modal'
export { default as Dimmer } from './Dimmer'
export { default as Loader } from './Loader'
export { default as Row } from './Row'
export { default as Column } from './Column'
export { default as BoundButton } from './BoundButton'
export { default as BoundCheckbox } from './BoundCheckbox'
export { default as BoundInput } from './BoundInput'
export { default as BoundEmailIcon } from './BoundEmailIcon'
export { HeaderText } from './HeaderText'
export { PanelButton } from './PanelButton'
export { Checkbox } from './Checkbox'
export { Input } from './Input'
export { Image } from './Image'
export { Text } from './Text'
export { Link } from './Link'
export { Icon } from './Icon'
export { List } from './List'
export { Modal } from './Modal'
export { Dimmer } from './Dimmer'
export { Loader } from './Loader'
export { Row } from './Row'
export { Column } from './Column'
export { BoundButton } from './BoundButton'
export { BoundCheckbox } from './BoundCheckbox'
export { BoundInput } from './BoundInput'
export { BoundEmailIcon } from './BoundEmailIcon'