diff --git a/package-lock.json b/package-lock.json index f12be3bfa..bbfc73d7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10660,7 +10660,6 @@ "resolved": false, "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==", "dev": true, - "optional": true, "requires": { "ignore-walk": "^3.0.1", "npm-bundled": "^1.0.1" diff --git a/packages/Form/Input/switch/src/Switch.js b/packages/Form/Input/switch/src/Switch.js index 3b5d2e9e7..657593e6d 100644 --- a/packages/Form/Input/switch/src/Switch.js +++ b/packages/Form/Input/switch/src/Switch.js @@ -20,41 +20,49 @@ const defaultProps = { }; const SwitchItems = props => { - const { options, value, name, onChange, onBlur, onFocus, disabled, ...otherProps } = props; + const { + options, + value, + name, + onChange, + onBlur, + onFocus, + disabled, + ...otherProps + } = props; return options.map(option => { const isChecked = option.value === value; - return () - }) + return ( + + ); + }); }; -export const getSliderPosition = (value, options, ref) => { - const option = options.find(v => v.value === value); - const emptyResult = { left: 0, width: 0 }; - if (!option || !ref.current) { - return emptyResult; - } - const currentElementResult = ref.current.querySelectorAll(`input[value="${value}"]`); +export const getSliderPosition = (radioName, ref) => { + const currentElementResult = + ref.current && + ref.current.querySelectorAll(`input[name="${radioName}"]:checked`); if (!currentElementResult || currentElementResult.length !== 1) { - return emptyResult; + return { left: 0, width: 0 }; } const currentElement = currentElementResult[0].parentNode; const left = currentElement.offsetLeft; const width = currentElement.clientWidth; return { left, - width + width, }; }; @@ -62,30 +70,56 @@ class Switch extends React.Component { constructor(props) { super(props); this.ref = React.createRef(); + this.state = { + selectedValue: props.value, + sliderStyle: { + display: 'none', + }, + }; } - render() { - const { value, options } = this.props; - const sliderPosition = getSliderPosition(value, options, this.ref); - const sliderStyle = { + componentDidMount() { + this.setState({ + sliderStyle: this.getSliderStyle(), + }); + } + + getSliderStyle() { + const { name } = this.props; + const sliderPosition = getSliderPosition(name, this.ref); + return { width: `${sliderPosition.width}px`, left: `${sliderPosition.left}px`, }; + } + + handleChange(e, onChange) { + this.setState({ + selectedValue: e.currentTarget.value, + sliderStyle: this.getSliderStyle(), + }); + onChange(e); + } + + render() { + const { onChange, ...props } = this.props; + const { selectedValue: value, sliderStyle } = this.state; return (
- + this.handleChange(e, onChange)} + value={value} + />
); } -}; - +} -const EnhancedComponent = withInput( - defaultClassName, - propTypes, - defaultProps -)(Switch); +const EnhancedComponent = withInput(defaultClassName, propTypes, defaultProps)( + Switch +); EnhancedComponent.displayName = 'SwitchInput'; diff --git a/packages/Form/Input/switch/src/SwitchInput.spec.js b/packages/Form/Input/switch/src/SwitchInput.spec.js index 99dc598ae..37f03e123 100644 --- a/packages/Form/Input/switch/src/SwitchInput.spec.js +++ b/packages/Form/Input/switch/src/SwitchInput.spec.js @@ -11,7 +11,6 @@ describe('', () => { id="iddateinput" name="placeImage" options={[]} - values={[]} onChange={() => {}} /> ) diff --git a/packages/Form/Input/switch/src/switch.scss b/packages/Form/Input/switch/src/switch.scss index 25ba360f3..03aa771c9 100644 --- a/packages/Form/Input/switch/src/switch.scss +++ b/packages/Form/Input/switch/src/switch.scss @@ -30,6 +30,7 @@ box-sizing: border-box; z-index: 1; cursor: pointer; + user-select: none; .af-form__label, .af-form__input-radio:checked + .af-form__label, diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 2bbd0efad..c8c99d4c7 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "@axa-fr/react-toolkit-core": "^1.2.8", - "classnames": "^2.2.6", "prop-types": "^15.5.10", - "recompose": "^0.27.1" + "recompose": "^0.27.1", + "classnames": "^2.2.6" }, "license": "MIT", "publishConfig": {