From 39afe6cc298bba14db608d08b117e2ea8f904539 Mon Sep 17 00:00:00 2001 From: Erik Kieckhafer Date: Mon, 2 Oct 2017 13:42:00 -0700 Subject: [PATCH 1/6] cascade inventory policy toggle functionality --- .../ui/client/components/switch/switch.js | 60 +++++++++++++++---- .../default-theme/client/styles/forms.less | 11 ++++ .../product-variant/components/variantForm.js | 54 +++++++++++++---- .../containers/variantFormContainer.js | 44 ++++++++++++++ .../product-variant/server/i18n/en.json | 1 + 5 files changed, 147 insertions(+), 23 deletions(-) diff --git a/imports/plugins/core/ui/client/components/switch/switch.js b/imports/plugins/core/ui/client/components/switch/switch.js index 3f64495d26f..038e6c2cd61 100644 --- a/imports/plugins/core/ui/client/components/switch/switch.js +++ b/imports/plugins/core/ui/client/components/switch/switch.js @@ -10,6 +10,9 @@ class Switch extends Component { static propTypes = { checked: PropTypes.bool, + disabled: PropTypes.bool, + helpText: PropTypes.string, + i18nKeyHelpText: PropTypes.string, i18nKeyLabel: PropTypes.string, i18nKeyOnLabel: PropTypes.string, label: PropTypes.string, @@ -26,6 +29,16 @@ class Switch extends Component { }; } + get isHelpMode() { + // TODO: add functionality to toggle helpMode on / off. + // When on, helpText will always show. + // When off, only validation messages will show. + // For now, all helpText will show, meaning this doesn't affect how the app currently works. + // This is here just to lay the foundation for when we add the toggle. + + return true; + } + handleChange = (event) => { if (this.props.onChange) { const isInputChecked = !this.props.checked; @@ -61,6 +74,27 @@ class Switch extends Component { return null; } + /** + * Render help text or validation message + * @return {ReactNode|null} react node or null + */ + renderHelpText() { + const helpMode = this.isHelpMode; + const helpText = this.props.helpText; + const i18nKey = this.props.i18nKeyHelpText; + + // Show if helpMode is true + if (helpText && helpMode) { + return ( + + + + ); + } + + return null; + } + checkboxRef = (ref) => { this._checkbox = ref; } @@ -68,7 +102,8 @@ class Switch extends Component { render() { const baseClassName = classnames({ rui: true, - switch: true + switch: true, + disabled: this.props.disabled }); const switchControlClassName = classnames({ @@ -77,16 +112,19 @@ class Switch extends Component { }); return ( -