From 68ef59136e5a491366613465495e007de4c7f161 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 6 Feb 2018 11:06:13 +0100 Subject: [PATCH 1/3] Trigger Tabbable also with space --- src/components/base/Box/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/base/Box/index.js b/src/components/base/Box/index.js index 956e6c43..1efadbae 100644 --- a/src/components/base/Box/index.js +++ b/src/components/base/Box/index.js @@ -98,7 +98,7 @@ export class Tabbable extends PureComponent { handleBlur = () => this.setState({ isFocused: false }) handleKeydown = (e: SyntheticKeyboardEvent) => { - if (e.which === 13 && this.state.isFocused && this.props.onClick) { + if ((e.which === 13 || e.which === 32) && this.state.isFocused && this.props.onClick) { this.props.onClick(e) } } From 6f2d4ef7e6cf0312967eb501f7172e31134ea1a9 Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 6 Feb 2018 11:07:04 +0100 Subject: [PATCH 2/3] Refactor CheckBox a bit --- src/components/base/CheckBox/index.js | 67 +++++++++++ src/components/base/CheckBox/stories.js | 11 ++ src/components/base/Checkbox/index.js | 106 ------------------ src/components/base/Checkbox/stories.js | 11 -- .../modals/AddAccount/ImportAccounts.js | 6 +- 5 files changed, 81 insertions(+), 120 deletions(-) create mode 100644 src/components/base/CheckBox/index.js create mode 100644 src/components/base/CheckBox/stories.js delete mode 100644 src/components/base/Checkbox/index.js delete mode 100644 src/components/base/Checkbox/stories.js diff --git a/src/components/base/CheckBox/index.js b/src/components/base/CheckBox/index.js new file mode 100644 index 00000000..5865639d --- /dev/null +++ b/src/components/base/CheckBox/index.js @@ -0,0 +1,67 @@ +// @flow + +import React from 'react' +import noop from 'lodash/noop' +import styled, { keyframes } from 'styled-components' + +import { Tabbable } from 'components/base/Box' +import Icon from 'components/base/Icon' + +const bounce = keyframes` + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.5); + } + 100% { + transform: scale(1); + } +` + +const Base = styled(Tabbable).attrs({ + align: 'center', + justify: 'center', +})` + cursor: pointer; + outline: none; + border-radius: 3px; + border: 1px solid transparent; + background-color: ${p => (p.isChecked ? p.theme.colors.blue : p.theme.colors.white)}; + box-shadow: 0 0 0 ${p => (p.isChecked ? 4 : 1)}px + ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)}; + font-size: 7px; + height: 19px; + width: 19px; + transition: all ease-in 0.1s; + + &:focus { + border-color: ${p => p.theme.colors.mouse}; + } +` + +const IconWrapper = styled(Icon).attrs({ + color: 'white', +})` + animation: ${bounce} ease-in-out 350ms; +` + +type Props = { + isChecked: boolean, + onChange?: Function, +} + +function CheckBox(props: Props) { + const { isChecked, onChange, ...p } = props + return ( + onChange(!isChecked)} {...p}> + {isChecked && } + + ) +} + +CheckBox.defaultProps = { + onChange: noop, +} + +export default CheckBox diff --git a/src/components/base/CheckBox/stories.js b/src/components/base/CheckBox/stories.js new file mode 100644 index 00000000..84e18e24 --- /dev/null +++ b/src/components/base/CheckBox/stories.js @@ -0,0 +1,11 @@ +// @flow + +import React from 'react' +import { storiesOf } from '@storybook/react' +import { boolean } from '@storybook/addon-knobs' + +import CheckBox from 'components/base/CheckBox' + +const stories = storiesOf('CheckBox', module) + +stories.add('basic', () => ) diff --git a/src/components/base/Checkbox/index.js b/src/components/base/Checkbox/index.js deleted file mode 100644 index 33f7c1ef..00000000 --- a/src/components/base/Checkbox/index.js +++ /dev/null @@ -1,106 +0,0 @@ -// @flow - -import React, { PureComponent } from 'react' -import styled, { keyframes } from 'styled-components' - -import Box from 'components/base/Box' -import Icon from 'components/base/Icon' - -const bounce = keyframes` - 0% { - transform: scale(1, 1); - } - - 50% { - transform: scale(1.7, 1.7); - } - - 100% { - transform: scale(1, 1); - } -` - -const Base = styled(Box).attrs({ - align: 'center', - justify: 'center', - relative: true, -})` - background-color: ${p => (p.checked ? p.theme.colors.blue : p.theme.colors.white)}; - box-shadow: 0 0 0 ${p => (p.checked ? 4 : 1)}px - ${p => (p.checked ? p.theme.colors.cream : p.theme.colors.argile)}; - font-size: 7px; - height: 19px; - width: 19px; - transition: all ease-in-out 0.1s; - - input[type='checkbox'] { - bottom: 0; - cursor: pointer; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - z-index: 10; - } -` - -const IconWrapper = styled(Icon).attrs({ - color: 'white', -})` - animation: ${bounce} ease-in-out 0.5s; -` - -type Props = { - checked: boolean, - onChange?: Function, -} - -type State = { - checked: boolean, -} - -class Checkbox extends PureComponent { - static defaultProps = { - checked: false, - } - - state = { - checked: this.props.checked, - } - - componentWillReceiveProps(nextProps: Props) { - this.setState({ - checked: nextProps.checked, - }) - } - - handleChange = (e: SyntheticInputEvent) => { - const { onChange } = this.props - const { checked } = e.target - - this.setState({ - checked, - }) - - if (onChange) { - onChange(checked) - } - } - - render() { - const { checked } = this.state - const { onChange, ...props } = this.props - - return ( - - - {checked && } - - ) - } -} - -export default Checkbox diff --git a/src/components/base/Checkbox/stories.js b/src/components/base/Checkbox/stories.js deleted file mode 100644 index 0841d3e9..00000000 --- a/src/components/base/Checkbox/stories.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -import React from 'react' -import { storiesOf } from '@storybook/react' -import { boolean } from '@storybook/addon-knobs' - -import Checkbox from 'components/base/Checkbox' - -const stories = storiesOf('Checkbox', module) - -stories.add('basic', () => ) diff --git a/src/components/modals/AddAccount/ImportAccounts.js b/src/components/modals/AddAccount/ImportAccounts.js index f6bbc805..6394af0a 100644 --- a/src/components/modals/AddAccount/ImportAccounts.js +++ b/src/components/modals/AddAccount/ImportAccounts.js @@ -9,7 +9,7 @@ import { formatBTC } from 'helpers/format' import Box from 'components/base/Box' import Button from 'components/base/Button' -import Checkbox from 'components/base/Checkbox' +import CheckBox from 'components/base/CheckBox' import Input from 'components/base/Input' type Props = { @@ -86,8 +86,8 @@ class ImportAccounts extends PureComponent { return ( - From cd74b7960b989e3dd35a5675bf55bf0d8ee3278a Mon Sep 17 00:00:00 2001 From: meriadec Date: Tue, 6 Feb 2018 11:38:15 +0100 Subject: [PATCH 3/3] Refactor Radio a bit --- src/components/base/CheckBox/stories.js | 5 +- src/components/base/Radio/index.js | 80 ++++++------------------- src/components/base/Radio/stories.js | 5 +- 3 files changed, 25 insertions(+), 65 deletions(-) diff --git a/src/components/base/CheckBox/stories.js b/src/components/base/CheckBox/stories.js index 84e18e24..1bc61174 100644 --- a/src/components/base/CheckBox/stories.js +++ b/src/components/base/CheckBox/stories.js @@ -3,9 +3,12 @@ import React from 'react' import { storiesOf } from '@storybook/react' import { boolean } from '@storybook/addon-knobs' +import { action } from '@storybook/addon-actions' import CheckBox from 'components/base/CheckBox' const stories = storiesOf('CheckBox', module) -stories.add('basic', () => ) +stories.add('basic', () => ( + +)) diff --git a/src/components/base/Radio/index.js b/src/components/base/Radio/index.js index 04b18404..9c74a08d 100644 --- a/src/components/base/Radio/index.js +++ b/src/components/base/Radio/index.js @@ -1,33 +1,22 @@ // @flow -import React, { PureComponent } from 'react' +import React from 'react' +import noop from 'lodash/noop' import styled from 'styled-components' -import Box from 'components/base/Box' +import { Tabbable } from 'components/base/Box' -const Base = styled(Box).attrs({ - align: 'center', - justify: 'center', - relative: true, -})` - box-shadow: 0 0 0 ${p => (p.checked ? 4 : 1)}px - ${p => (p.checked ? p.theme.colors.cream : p.theme.colors.argile)}; +const Base = styled(Tabbable).attrs({ relative: true })` + outline: none; + box-shadow: 0 0 0 1px ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)}; border-radius: 50%; height: 19px; width: 19px; transition: all ease-in-out 0.1s; - input[type='radio'] { - bottom: 0; - cursor: pointer; - height: 100%; - left: 0; - opacity: 0; - position: absolute; - right: 0; - top: 0; - width: 100%; - z-index: 10; + &:focus { + box-shadow: 0 0 0 ${p => (p.isChecked ? 4 : 2)}px + ${p => (p.isChecked ? p.theme.colors.cream : p.theme.colors.argile)}; } &:before, @@ -45,7 +34,7 @@ const Base = styled(Box).attrs({ &:before { background-color: ${p => p.theme.colors.blue}; ${p => - p.checked && + p.isChecked && ` bottom: 0; left: 0; @@ -57,7 +46,7 @@ const Base = styled(Box).attrs({ &:after { background-color: ${p => p.theme.colors.white}; ${p => - p.checked && + p.isChecked && ` bottom: 7px; left: 7px; @@ -68,52 +57,17 @@ const Base = styled(Box).attrs({ ` type Props = { - checked: boolean, + isChecked: boolean, onChange?: Function, } -type State = { - checked: boolean, +function Radio(props: Props) { + const { isChecked, onChange } = props + return onChange(!isChecked)} /> } -class Radio extends PureComponent { - static defaultProps = { - checked: false, - } - - state = { - checked: this.props.checked, - } - - componentWillReceiveProps(nextProps: Props) { - this.setState({ - checked: nextProps.checked, - }) - } - - handleChange = (e: SyntheticInputEvent) => { - const { onChange } = this.props - const { checked } = e.target - - this.setState({ - checked, - }) - - if (onChange) { - onChange(checked) - } - } - - render() { - const { checked } = this.state - const { onChange, ...props } = this.props - - return ( - - - - ) - } +Radio.defaultProps = { + onChange: noop, } export default Radio diff --git a/src/components/base/Radio/stories.js b/src/components/base/Radio/stories.js index e21dff6e..940314a5 100644 --- a/src/components/base/Radio/stories.js +++ b/src/components/base/Radio/stories.js @@ -2,10 +2,13 @@ import React from 'react' import { storiesOf } from '@storybook/react' +import { action } from '@storybook/addon-actions' import { boolean } from '@storybook/addon-knobs' import Radio from 'components/base/Radio' const stories = storiesOf('Radio', module) -stories.add('basic', () => ) +stories.add('basic', () => ( + +))