summaryrefslogtreecommitdiff
path: root/src/components/ToggleSwitch.js
diff options
context:
space:
mode:
authorHaishan <[email protected]>2020-10-31 18:18:04 +0800
committerHaishan <[email protected]>2020-11-01 17:42:52 +0800
commitff1a39d04e53b428e34d46c55ecd6689189b5443 (patch)
tree94a60abe3d28a1d729b877356bdd38d75ce655a5 /src/components/ToggleSwitch.js
parente62c9165481ef12ee2310dee1c32f890b3fe4b78 (diff)
chore: run ts-migrate
Diffstat (limited to 'src/components/ToggleSwitch.js')
-rw-r--r--src/components/ToggleSwitch.js69
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);