fix: mode not display correctly due to clash API change

for https://github.com/haishanh/yacd/issues/491
This commit is contained in:
Haishan 2020-06-07 18:15:07 +08:00
parent 201f6904c2
commit e864feb401
3 changed files with 56 additions and 34 deletions

View file

@ -27,15 +27,15 @@ const propsList = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
const optionsRule = [ const optionsRule = [
{ {
label: 'Global', label: 'Global',
value: 'Global', value: 'global',
}, },
{ {
label: 'Rule', label: 'Rule',
value: 'Rule', value: 'rule',
}, },
{ {
label: 'Direct', label: 'Direct',
value: 'Direct', value: 'direct',
}, },
]; ];
@ -220,7 +220,7 @@ function ConfigImpl({
<ToggleSwitch <ToggleSwitch
options={optionsRule} options={optionsRule}
name="mode" name="mode"
value={configState.mode} value={configState.mode && configState.mode.toLowerCase()}
onChange={handleInputOnChange} onChange={handleInputOnChange}
/> />
</div> </div>

View file

@ -1,4 +1,4 @@
import React, { useMemo } from 'react'; import React, { useMemo, useCallback } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import s0 from './ToggleSwitch.module.css'; import s0 from './ToggleSwitch.module.css';
@ -8,22 +8,41 @@ function ToggleSwitch({ options, value, name, onChange }) {
() => options.map((o) => o.value).indexOf(value), () => options.map((o) => o.value).indexOf(value),
[options, value] [options, value]
); );
const w = (100 / options.length).toPrecision(3);
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 ( return (
<div>
<div className={s0.ToggleSwitch}> <div className={s0.ToggleSwitch}>
<div <div className={s0.slider} style={sliderStyle} />
className={s0.slider}
style={{
width: w + '%',
left: idxSelected * w + '%',
}}
/>
{options.map((o, idx) => { {options.map((o, idx) => {
const id = `${name}-${o.label}`; const id = `${name}-${o.label}`;
const className = idx === 0 ? '' : 'border-left'; const className = idx === 0 ? '' : 'border-left';
return ( return (
<label htmlFor={id} key={id} className={className}> <label
htmlFor={id}
key={id}
className={className}
style={{
width: getPortionPercentage(idx) + '%',
}}
>
<input <input
id={id} id={id}
name={name} name={name}
@ -37,7 +56,6 @@ function ToggleSwitch({ options, value, name, onChange }) {
); );
})} })}
</div> </div>
</div>
); );
} }

View file

@ -5,6 +5,11 @@
background: var(--color-toggle-bg); background: var(--color-toggle-bg);
display: flex; display: flex;
position: relative; position: relative;
outline: none;
&:focus {
border-color: var(--color-focus-blue);
}
input { input {
position: absolute; position: absolute;
@ -13,7 +18,6 @@
} }
label { label {
flex: 1;
z-index: 2; z-index: 2;
display: flex; display: flex;
align-items: center; align-items: center;