fixup! Add tolerancePicker component and styling

Author: SarahBellaha

ui-core/src/components/inputs/TolerancePicker.tsx

@@ -1,53 +1,72 @@
-import React, { useState, useRef } from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, useRef, useMemo, useEffect } from 'react';
 import Input, { InputProps } from './Input';
 import Modal from '../Modal';
+import cx from 'classnames';
+import { StatusWithMessage } from './StatusMessage';
 
-const TolerancePicker: React.FC<InputProps> = (inputProps) => {
+type ToleranceRange = { label: string; value: number };
+
+export type ToleranceValues = {
+  minusTolerance: number;
+  plusTolerance: number;
+};
+
+export type TolerancePickerProps = Omit<InputProps, 'value'> & {
+  onToleranceChange: (toleranceValues: ToleranceValues) => void;
+  toleranceRanges: ToleranceRange[];
+  toleranceValues?: ToleranceValues;
+};
+
+const TolerancePicker: React.FC<TolerancePickerProps> = ({
+  onToleranceChange,
+  toleranceRanges,
+  toleranceValues: { minusTolerance, plusTolerance } = {
+    minusTolerance: toleranceRanges[0].value,
+    plusTolerance: toleranceRanges[0].value,
+  },
+  ...inputProps
+}) => {
   const [showPicker, setShowPicker] = useState(false);
-  const [minusTolerance, setMinusTolerance] = useState('00');
-  const [plusTolerance, setPlusTolerance] = useState('00');
-  const [inputValue, setInputValue] = useState('');
+  const [inputValue, setInputValue] = useState(
+    `-${toleranceRanges[0].label}/+${toleranceRanges[0].label}`
+  );
+  const [warningStatus, setWarningStatus] = useState<StatusWithMessage | undefined>(undefined);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const handleTimeChange = (newMinusTolerance: string, newPlusTolerance: string) => {
-    setMinusTolerance(newMinusTolerance);
-    setPlusTolerance(newPlusTolerance);
-    const formattedValue = `-${newMinusTolerance}/+${newPlusTolerance}`;
-    setInputValue(formattedValue);
-  };
+  const { minusToleranceIndex, plusToleranceIndex } = useMemo(() => {
+    const minusToleranceIndex = toleranceRanges.findIndex(
+      (range) => range.value === minusTolerance
+    );
+    const plusToleranceIndex = toleranceRanges.findIndex((range) => range.value === plusTolerance);
+    if (minusToleranceIndex < 0 || plusToleranceIndex < 0)
+      setWarningStatus({
+        status: 'warning',
+        message: "One of the values isn't included in the ranges provided.",
+      });
+    return { minusToleranceIndex, plusToleranceIndex };
+  }, [minusTolerance, plusTolerance, toleranceRanges]);
+
+  const getToleranceLabel = (toleranceIndex: number) =>
+    `${toleranceIndex < 0 ? '' : toleranceRanges[toleranceIndex].label}`;
 
-  const TOLERANCE_RANGES = [
-    '00',
-    '05',
-    '10',
-    '15',
-    '20',
-    '25',
-    '30',
-    '35',
-    '40',
-    '45',
-    '1h',
-    '1h15',
-    '1h30',
-    '1h45',
-    '2h',
-    '2h30',
-    '3h00',
-    '3h30',
-    '4h00',
-  ];
+  useEffect(() => {
+    const formattedInputValue = `-${getToleranceLabel(minusToleranceIndex)}/+${getToleranceLabel(plusToleranceIndex)}`;
+    setInputValue(formattedInputValue);
+  }, [minusTolerance, plusTolerance]);
 
   return (
     <div className="tolerance-picker">
       <div>
         <Input
           {...inputProps}
           value={inputValue}
+          // Event not used for now
           onChange={(e) => {
             setInputValue(e.target.value);
             setShowPicker(true);
           }}
+          statusWithMessage={warningStatus}
           readOnly
           onClick={() => setShowPicker(!showPicker)}
           type="text"
@@ -59,33 +78,49 @@ const TolerancePicker: React.FC<InputProps> = (inputProps) => {
         <div className="time-tolerance">
           <div className="time-picker-section">
             <div className="tolerance-grid">
-              {TOLERANCE_RANGES.map((tolerance, index) => (
-                <button
-                  key={tolerance}
-                  className={`minute ${minusTolerance === tolerance ? 'selected' : ''}`}
-                  style={{ gridArea: `a${index + 1}` }}
-                  onClick={() => handleTimeChange(tolerance, plusTolerance)}
-                >
-                  {`-${tolerance}`}
-                </button>
-              ))}
+              {toleranceRanges.map((tolerance, index) => {
+                const { label, value } = tolerance;
+                return (
+                  <button
+                    key={`${label}-${index}`}
+                    className={cx('minute', { selected: minusTolerance === value })}
+                    style={{ gridArea: `a${index + 1}` }}
+                    onClick={() =>
+                      onToleranceChange({
+                        minusTolerance: value,
+                        plusTolerance: toleranceRanges[plusToleranceIndex].value,
+                      })
+                    }
+                  >
+                    {`-${label}`}
+                  </button>
+                );
+              })}
             </div>
           </div>
 
           <div className="divider" />
 
           <div className="time-picker-section">
             <div className="tolerance-grid plus-tolerance">
-              {TOLERANCE_RANGES.map((tolerance, index) => (
-                <button
-                  key={tolerance}
-                  className={`minute ${plusTolerance === tolerance ? 'selected' : ''}`}
-                  style={{ gridArea: `a${index + 1}` }}
-                  onClick={() => handleTimeChange(minusTolerance, tolerance)}
-                >
-                  {`+${tolerance}`}
-                </button>
-              ))}
+              {toleranceRanges.map((tolerance, index) => {
+                const { label, value } = tolerance;
+                return (
+                  <button
+                    key={`${label}-${index}`}
+                    className={cx('minute', { selected: plusTolerance === value })}
+                    style={{ gridArea: `a${index + 1}` }}
+                    onClick={() =>
+                      onToleranceChange({
+                        minusTolerance: toleranceRanges[minusToleranceIndex].value,
+                        plusTolerance: value,
+                      })
+                    }
+                  >
+                    {`+${label}`}
+                  </button>
+                );
+              })}
             </div>
           </div>
         </div>

ui-core/src/index.ts

@@ -17,3 +17,7 @@ export { default as RadioButton, RadioButtonProps } from './components/inputs/Ra
 export { default as RadioGroup, RadioGroupProps } from './components/inputs/RadioGroup';
 export { default as Select, SelectProps } from './components/Select';
 export { default as TimePicker } from './components/inputs/TimePicker';
+export {
+  default as TolerancePicker,
+  type TolerancePickerProps,
+} from './components/inputs/TolerancePicker';

ui-core/src/stories/TolerancePicker.stories.tsx

@@ -1,16 +1,67 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import TolerancePicker from '../components/inputs/TolerancePicker';
+import TolerancePicker, {
+  TolerancePickerProps,
+  ToleranceValues,
+} from '../components/inputs/TolerancePicker';
 
 import '@osrd-project/ui-core/dist/theme.css';
 
+const TolerancePickerStory = (props: TolerancePickerProps) => {
+  const [toleranceValues, setToleranceValues] = useState(props.toleranceValues);
+  const onToleranceChange = ({ minusTolerance, plusTolerance }: ToleranceValues) => {
+    setToleranceValues({ minusTolerance, plusTolerance });
+  };
+
+  const toleranceRanges = [
+    { label: '00', value: 0 },
+    { label: '05', value: 300 },
+    { label: '10', value: 600 },
+    { label: '15', value: 900 },
+    { label: '20', value: 1200 },
+    { label: '25', value: 1500 },
+    { label: '30', value: 1800 },
+    { label: '35', value: 2100 },
+    { label: '40', value: 2400 },
+    { label: '45', value: 2700 },
+    { label: '1h00', value: 3600 },
+    { label: '1h15', value: 4500 },
+    { label: '1h30', value: 5400 },
+    { label: '1h45', value: 6300 },
+    { label: '2h00', value: 7200 },
+    { label: '2h30', value: 9000 },
+    { label: '3h00', value: 10800 },
+    { label: '3h30', value: 12600 },
+    { label: '4h00', value: 14400 },
+  ];
+
+  useEffect(() => {
+    setToleranceValues(props.toleranceValues);
+  }, [props.toleranceValues]);
+
+  return (
+    <TolerancePicker
+      {...props}
+      toleranceValues={toleranceValues}
+      toleranceRanges={toleranceRanges}
+      onToleranceChange={onToleranceChange}
+    />
+  );
+};
+
 const meta: Meta<typeof TolerancePicker> = {
   component: TolerancePicker,
   args: {
     label: 'TolerancePicker',
     id: 'time-picker',
   },
-  title: 'TolerancePicker',
+  argTypes: {
+    toleranceValues: {
+      minusTolerance: 'string',
+      plusTolerance: 'string',
+    },
+  },
+  title: 'core/TolerancePicker',
   tags: ['autodocs'],
   decorators: [
     (Story) => (
@@ -19,6 +70,7 @@ const meta: Meta<typeof TolerancePicker> = {
       </div>
     ),
   ],
+  render: TolerancePickerStory,
 };
 
 export default meta;