diff --git a/src/scripts/Popover.js b/src/scripts/Popover.js index d7199f672..82455a791 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(); - + const hidden = props.hidden || props.defaultHidden; this.state = { - hidden: props.hidden, + hidden, }; this.documentClick = this.documentClick.bind(this); @@ -43,12 +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); } } - 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, }; diff --git a/src/scripts/Toggle.js b/src/scripts/Toggle.js index efa5070cd..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, 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', () => (