Add 's' postfix to Timer field

slavikdenis · Dec 5, 2021 · 1ed4692 · 1ed4692
1 parent 5719017
commit 1ed4692
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/components/settings/SettingTimerField.tsx b/src/components/settings/SettingTimerField.tsx
@@ -35,6 +35,9 @@ const SettingTimerField = ({
   value,
   onChange,
 }: SettingTimerFieldProps) => {
+  const format = (val: number) => `${val}s`;
+  const parse = (val: string) => Number(val.replace('s', ''));
+
   return (
     <FormControl id={fieldId} mb={4}>
       <Flex alignItems="center" justifyContent="space-between">
@@ -60,10 +63,10 @@ const SettingTimerField = ({
 
         <NumberInput
           id={fieldId}
-          value={value}
+          value={format(value)}
           min={5}
           max={90}
-          onChange={(_s, number) => onChange(number)}
+          onChange={(val) => onChange(parse(val))}
           width="85px"
         >
           <NumberInputField />