diff options
| author | Haishan <[email protected]> | 2020-10-31 18:18:04 +0800 |
|---|---|---|
| committer | Haishan <[email protected]> | 2020-11-01 17:42:52 +0800 |
| commit | ff1a39d04e53b428e34d46c55ecd6689189b5443 (patch) | |
| tree | 94a60abe3d28a1d729b877356bdd38d75ce655a5 /src/components/ToggleSwitch.js | |
| parent | e62c9165481ef12ee2310dee1c32f890b3fe4b78 (diff) | |
chore: run ts-migrate
Diffstat (limited to 'src/components/ToggleSwitch.js')
| -rw-r--r-- | src/components/ToggleSwitch.js | 69 |
1 files changed, 0 insertions, 69 deletions
diff --git a/src/components/ToggleSwitch.js b/src/components/ToggleSwitch.js deleted file mode 100644 index 03af15f..0000000 --- a/src/components/ToggleSwitch.js +++ /dev/null @@ -1,69 +0,0 @@ -import PropTypes from 'prop-types'; -import React, { useCallback, useMemo } from 'react'; - -import s0 from './ToggleSwitch.module.css'; - -function ToggleSwitch({ options, value, name, onChange }) { - const idxSelected = useMemo( - () => options.map((o) => o.value).indexOf(value), - [options, value] - ); - - const getPortionPercentage = useCallback( - (idx) => { - const w = Math.floor(100 / options.length); - if (idx === options.length - 1) { - return 100 - options.length * w + w; - } else if (idx > -1) { - return w; - } - }, - [options] - ); - - const sliderStyle = useMemo(() => { - return { - width: getPortionPercentage(idxSelected) + '%', - left: idxSelected * getPortionPercentage(0) + '%', - }; - }, [idxSelected, getPortionPercentage]); - - return ( - <div className={s0.ToggleSwitch}> - <div className={s0.slider} style={sliderStyle} /> - {options.map((o, idx) => { - const id = `${name}-${o.label}`; - const className = idx === 0 ? '' : 'border-left'; - return ( - <label - htmlFor={id} - key={id} - className={className} - style={{ - width: getPortionPercentage(idx) + '%', - }} - > - <input - id={id} - name={name} - type="radio" - value={o.value} - checked={value === o.value} - onChange={onChange} - /> - <div>{o.label}</div> - </label> - ); - })} - </div> - ); -} - -ToggleSwitch.propTypes = { - options: PropTypes.array, - value: PropTypes.string, - name: PropTypes.string, - onChange: PropTypes.func, -}; - -export default React.memo(ToggleSwitch); |
