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": {