From 967a8621b6f75b030d39fc79b0d1718ca06d83b4 Mon Sep 17 00:00:00 2001 From: Constantine Golub Date: Wed, 6 Sep 2017 09:20:42 +0300 Subject: [PATCH 1/5] add text statuses to toggle --- src/scripts/Toggle.js | 10 +++++++--- stories/ToggleStories.js | 3 +++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/scripts/Toggle.js b/src/scripts/Toggle.js index efa5070cd..0fb9c2c3f 100644 --- a/src/scripts/Toggle.js +++ b/src/scripts/Toggle.js @@ -4,7 +4,7 @@ import classnames from 'classnames'; import FormElement from './FormElement'; export default class Toggle extends Component { - renderToggle({ className, label, ...props }) { + renderToggle({ className, statusOn, statusOff, statusDisabled, disabled, label, ...props }) { const toggleClassNames = classnames(className, 'slds-checkbox--toggle slds-grid'); return ( ); @@ -56,4 +56,8 @@ Toggle.propTypes = { ]), checked: PropTypes.bool, defaultChecked: PropTypes.bool, + disabled: PropTypes.bool, + statusOn: PropTypes.string, + statusOff: PropTypes.string, + statusDisabled: PropTypes.string }; diff --git a/stories/ToggleStories.js b/stories/ToggleStories.js index b1d722499..c2ee263dd 100644 --- a/stories/ToggleStories.js +++ b/stories/ToggleStories.js @@ -12,6 +12,9 @@ storiesOf('Toggle', module) checked={ boolean('checked') } disabled={ boolean('disabled') } onChange={ action('change') } + statusOn={ text('status on', 'Enabled')} + statusOff={ text('status Off', 'Disabled')} + statusDisabled={text('status disabled')} /> )) .addWithInfo('Default', 'Toggle control', () => ( From 9ab6c526ba536dc02f59daab4f219f0541e84707 Mon Sep 17 00:00:00 2001 From: Constantine Golub Date: Wed, 6 Sep 2017 09:27:08 +0300 Subject: [PATCH 2/5] show/hide popover from the outside --- src/scripts/Popover.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/scripts/Popover.js b/src/scripts/Popover.js index d7199f672..d2a970dbd 100644 --- a/src/scripts/Popover.js +++ b/src/scripts/Popover.js @@ -26,7 +26,7 @@ PopoverBody.propTypes = { export default class Popover extends React.Component { constructor(props) { super(); - + let hidden = props.hidden || props.defaultHidden; this.state = { hidden: props.hidden, }; @@ -48,7 +48,11 @@ export default class Popover extends React.Component { document.removeEventListener('click', this.documentClick); } } - + componentWillReceiveProps(nextProps) { + if (nextProps.hidden !== this.state.hidden) { + this.setState({hidden: nextProps.hidden}); + } + } onMouseEnter() { this.isMouseEntered = true; } @@ -126,6 +130,7 @@ const POPOVER_THEMES = ['info', 'success', 'warning', 'error']; Popover.propTypes = { position: PropTypes.oneOf(POPOVER_POSITIONS), hidden: PropTypes.bool, + defaultHidden: PropTypes.bool, theme: PropTypes.oneOf(POPOVER_THEMES), tooltip: PropTypes.bool, children: PropTypes.node, @@ -136,5 +141,5 @@ Popover.propTypes = { }; Popover.defaultProps = { - hidden: true, + defaultHidden: true, }; From f5d7693c270f23648e3961998ba8ccd3a791f124 Mon Sep 17 00:00:00 2001 From: Constantine Golub Date: Wed, 6 Sep 2017 09:31:20 +0300 Subject: [PATCH 3/5] tiny fix for disabled state for toggle --- src/scripts/Toggle.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scripts/Toggle.js b/src/scripts/Toggle.js index 0fb9c2c3f..44cff882e 100644 --- a/src/scripts/Toggle.js +++ b/src/scripts/Toggle.js @@ -20,7 +20,7 @@ export default class Toggle extends Component { aria-live='assertive' > - {statusOn} + {!disabled && statusOn} {disabled === true ? statusDisabled : statusOff} From badea75aa58117659a47f91014241ef12ca71bc9 Mon Sep 17 00:00:00 2001 From: Constantine Golub Date: Wed, 6 Sep 2017 09:52:16 +0300 Subject: [PATCH 4/5] fix travis errors --- src/scripts/Popover.js | 14 +++++++------- src/scripts/Toggle.js | 4 ++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/scripts/Popover.js b/src/scripts/Popover.js index d2a970dbd..dc40781b7 100644 --- a/src/scripts/Popover.js +++ b/src/scripts/Popover.js @@ -26,9 +26,9 @@ PopoverBody.propTypes = { export default class Popover extends React.Component { constructor(props) { super(); - let hidden = props.hidden || props.defaultHidden; + const hidden = props.hidden || props.defaultHidden; this.state = { - hidden: props.hidden, + hidden: hidden, }; this.documentClick = this.documentClick.bind(this); @@ -43,16 +43,16 @@ export default class Popover extends React.Component { document.addEventListener('click', this.documentClick); } } + componentWillReceiveProps(nextProps) { + if (nextProps.hidden !== this.state.hidden) { + this.setState({ hidden: nextProps.hidden }); + } + } componentWillUnmount() { if (this.props.trigger) { document.removeEventListener('click', this.documentClick); } } - componentWillReceiveProps(nextProps) { - if (nextProps.hidden !== this.state.hidden) { - this.setState({hidden: nextProps.hidden}); - } - } onMouseEnter() { this.isMouseEntered = true; } diff --git a/src/scripts/Toggle.js b/src/scripts/Toggle.js index 44cff882e..137c34be8 100644 --- a/src/scripts/Toggle.js +++ b/src/scripts/Toggle.js @@ -4,7 +4,7 @@ import classnames from 'classnames'; import FormElement from './FormElement'; export default class Toggle extends Component { - renderToggle({ className, statusOn, statusOff, statusDisabled, disabled, label, ...props }) { + renderToggle({ className, statusOn, statusOff, statusDisabled, disabled, label, ...props }) { const toggleClassNames = classnames(className, 'slds-checkbox--toggle slds-grid'); return (