From 68a38e735945edc6878557c8f0c745f8f5f70023 Mon Sep 17 00:00:00 2001 From: Haishan Date: Fri, 12 Apr 2019 22:59:56 +0800 Subject: [PATCH] fix(ToggleSwitch): selected option slider left offset --- src/components/ToggleSwitch.js | 16 ++++++++------ yarn.lock | 40 ++++++++++++---------------------- 2 files changed, 23 insertions(+), 33 deletions(-) diff --git a/src/components/ToggleSwitch.js b/src/components/ToggleSwitch.js index 595979f..59323c4 100644 --- a/src/components/ToggleSwitch.js +++ b/src/components/ToggleSwitch.js @@ -1,10 +1,13 @@ -import React, { useRef } from 'react'; +import React, { useMemo } from 'react'; import PropTypes from 'prop-types'; import s0 from 'c/ToggleSwitch.module.scss'; -function ToggleSwitch2({ options, value, name, onChange }) { - const idxRef = useRef(null); +function ToggleSwitch({ options, value, name, onChange }) { + const idxSelected = useMemo(() => options.map(o => o.value).indexOf(value), [ + options, + value + ]); const w = (100 / options.length).toPrecision(3); return (
@@ -13,11 +16,10 @@ function ToggleSwitch2({ options, value, name, onChange }) { className={s0.slider} style={{ width: w + '%', - left: idxRef.current * w + '%' + left: idxSelected * w + '%' }} /> {options.map((o, idx) => { - if (value === o.value) idxRef.current = idx; const id = `${name}-${o.label}`; let className = idx === 0 ? '' : 'border-left'; return ( @@ -39,11 +41,11 @@ function ToggleSwitch2({ options, value, name, onChange }) { ); } -ToggleSwitch2.propTypes = { +ToggleSwitch.propTypes = { options: PropTypes.array, value: PropTypes.string, name: PropTypes.string, onChange: PropTypes.func }; -export default React.memo(ToggleSwitch2); +export default React.memo(ToggleSwitch); diff --git a/yarn.lock b/yarn.lock index aae9da7..dd7b046 100644 --- a/yarn.lock +++ b/yarn.lock @@ -723,10 +723,10 @@ dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@^7.0.0": - version "7.4.2" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.2.tgz#f5ab6897320f16decd855eed70b705908a313fe8" - integrity sha512-7Bl2rALb7HpvXFL7TETNzKSAeBVCPHELzc0C//9FCxN8nsiueWSJBqaF+2oIJScyILStASR/Cx5WMkXGYTiJFA== +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.5": + version "7.4.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc" + integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA== dependencies: regenerator-runtime "^0.13.2" @@ -737,13 +737,6 @@ dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@^7.1.5": - version "7.4.3" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc" - integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA== - dependencies: - regenerator-runtime "^0.13.2" - "@babel/template@^7.1.0", "@babel/template@^7.2.2", "@babel/template@^7.4.0": version "7.4.0" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.0.tgz#12474e9c077bae585c5d835a95c0b0b790c25c8b" @@ -2931,9 +2924,9 @@ eslint-module-utils@^2.3.0: pkg-dir "^2.0.0" eslint-plugin-flowtype@^3.4.2: - version "3.6.0" - resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.6.0.tgz#375a3d77f5dbd3a0d2c3554fadcd1d0735a6eb2e" - integrity sha512-7wRfgzXteB9jswXreGG64FlOdscV4z4hIW2lS+mC5t1K2QQkUDh7A+95dB4nU7io8zIOq4cRpftF+41xvMCtiA== + version "3.6.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.6.1.tgz#99cfa3a30e8a2c9ea40c507b25ea9a320af4ceae" + integrity sha512-VVuPKb5kgWFhxCkAMpL5wi44AK+4nkxa3XXZVa2PKf00n4INNbdKmZC0tT8qeNTHoDPYMXbqak4tGC9YtIOqGw== dependencies: lodash "^4.17.11" @@ -4976,12 +4969,7 @@ mem@^4.0.0: mimic-fn "^2.0.0" p-is-promise "^2.0.0" -"memoize-one@>=3.1.1 <6": - version "5.0.0" - resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.0.tgz#d55007dffefb8de7546659a1722a5d42e128286e" - integrity sha512-7g0+ejkOaI9w5x6LvQwmj68kUj6rxROywPSCqmclG/HBacmFnZqhVscQ8kovkn9FBCNJmOz6SY42+jnvZzDWdw== - -memoize-one@^5.0.0: +"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0: version "5.0.4" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc" integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA== @@ -6695,9 +6683,9 @@ react-router@5.0.0: tiny-warning "^1.0.0" react-window@^1.5.0: - version "1.7.1" - resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.7.1.tgz#c1db640415b97b85bc0a1c66eb82dadabca39b86" - integrity sha512-y4/Qc98agCtHulpeI5b6K2Hh8J7TeZIfvccBVesfqOFx4CS+TSUpnJl1/ipeXzhfvzPwvVEmaU/VosQ6O5VhTg== + version "1.7.2" + resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.7.2.tgz#2e1528d5b9991e863302bfe74cb52d0ff7082e78" + integrity sha512-GK1gxSeGPLBDSQhPmYhCYrtf5MkGK8rwVjeyPgxZLvLRw0wvyzKZPMc/jfemiGNGfuJyW3kx1z6QR9uK7r2XdA== dependencies: "@babel/runtime" "^7.0.0" memoize-one ">=3.1.1 <6" @@ -8256,9 +8244,9 @@ watchpack@^1.5.0: neo-async "^2.5.0" webpack-bundle-analyzer@^3.0.3: - version "3.2.0" - resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.2.0.tgz#0630d298e88511d036d7c823705d7b852593d5c4" - integrity sha512-F6bwrg5TBb9HsHZCltH1L5F091ELQ+/i67MEH7jWkYRvVp53eONNneGaIXSdOQUiXUyd3RnkITWRfWvSVQGnZQ== + version "3.3.2" + resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.3.2.tgz#3da733a900f515914e729fcebcd4c40dde71fc6f" + integrity sha512-7qvJLPKB4rRWZGjVp5U1KEjwutbDHSKboAl0IfafnrdXMrgC0tOtZbQD6Rw0u4cmpgRN4O02Fc0t8eAT+FgGzA== dependencies: acorn "^6.0.7" acorn-walk "^6.1.1"