fix: mode not display correctly due to clash API change

for https://github.com/haishanh/yacd/issues/491

1 files changed, 47 insertions, 29 deletions

diff --git a/src/components/ToggleSwitch.js b/src/components/ToggleSwitch.js
index b71b49d..deca8c8 100644
--- a/src/components/ToggleSwitch.js
+++ b/src/components/ToggleSwitch.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
 import s0 from './ToggleSwitch.module.css';
@@ -8,35 +8,53 @@ function ToggleSwitch({ options, value, name, onChange }) {
     () => options.map((o) => o.value).indexOf(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 (
-    <div>
-      <div className={s0.ToggleSwitch}>
-        <div
-          className={s0.slider}
-          style={{
-            width: w + '%',
-            left: idxSelected * w + '%',
-          }}
-        />
-        {options.map((o, idx) => {
-          const id = `${name}-${o.label}`;
-          const className = idx === 0 ? '' : 'border-left';
-          return (
-            <label htmlFor={id} key={id} className={className}>
-              <input
-                id={id}
-                name={name}
-                type="radio"
-                value={o.value}
-                checked={value === o.value}
-                onChange={onChange}
-              />
-              <div>{o.label}</div>
-            </label>
-          );
-        })}
-      </div>
+    <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>
   );
 }