xmengnet/yacd
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

fix(ToggleSwitch): selected option slider left offset

Browse source
This commit is contained in:
Haishan 2019-04-12 22:59:56 +08:00
parent 732367e65c
commit 68a38e7359
2 changed files with 23 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/ToggleSwitch.js
View file

@ -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 (
<div>
@ -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);

40
yarn.lock
View file

@ -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"