diff --git a/src/components/Config.js b/src/components/Config.js
index 46c480d..8f6e396 100644
--- a/src/components/Config.js
+++ b/src/components/Config.js
@@ -27,15 +27,15 @@ const propsList = [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
const optionsRule = [
{
label: 'Global',
- value: 'Global',
+ value: 'global',
},
{
label: 'Rule',
- value: 'Rule',
+ value: 'rule',
},
{
label: 'Direct',
- value: 'Direct',
+ value: 'direct',
},
];
@@ -220,7 +220,7 @@ function ConfigImpl({
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 (
-
-
-
- {options.map((o, idx) => {
- const id = `${name}-${o.label}`;
- const className = idx === 0 ? '' : 'border-left';
- return (
-
- );
- })}
-
+
+
+ {options.map((o, idx) => {
+ const id = `${name}-${o.label}`;
+ const className = idx === 0 ? '' : 'border-left';
+ return (
+
+ );
+ })}
);
}
diff --git a/src/components/ToggleSwitch.module.css b/src/components/ToggleSwitch.module.css
index 78a2b41..9103fab 100644
--- a/src/components/ToggleSwitch.module.css
+++ b/src/components/ToggleSwitch.module.css
@@ -5,6 +5,11 @@
background: var(--color-toggle-bg);
display: flex;
position: relative;
+ outline: none;
+
+ &:focus {
+ border-color: var(--color-focus-blue);
+ }
input {
position: absolute;
@@ -13,7 +18,6 @@
}
label {
- flex: 1;
z-index: 2;
display: flex;
align-items: center;