fix: add select disabled

gravity-ui · Aug 12, 2024 · e28fbe0 · e28fbe0
1 parent 5c27a80
commit e28fbe0
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 29 deletions.
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/TimeRangeSelector.tsx b/src/lib/kit/components/Inputs/TimeRangeSelector/TimeRangeSelector.tsx
@@ -37,7 +37,6 @@ export const TimeRangeSelector: ObjectIndependentInput = (props) => {
                     return spec.enum.map((id) => ({
                         id,
                         value: id,
-                        text: spec.description?.[id] || id,
                         content: spec.viewSpec.selectParams?.meta?.[id] ? (
                             <div key={id}>
                                 <Text>{spec.description?.[id] || id}</Text>
@@ -114,7 +113,6 @@ export const TimeRangeSelector: ObjectIndependentInput = (props) => {
                 name={`${name}.${START_TIME}`}
                 options={startTimeOptions}
                 value={input.value?.[START_TIME]}
-                placeholder={startTimeOptions[0]?.text}
                 handleChange={(value) => parentOnChange(START_TIME, value[0])}
                 props={props}
             />
@@ -123,7 +121,6 @@ export const TimeRangeSelector: ObjectIndependentInput = (props) => {
                 name={`${name}.${END_TIME}`}
                 options={endTimeOptions}
                 value={input.value?.[END_TIME]}
-                placeholder={endTimeOptions[0]?.text}
                 handleChange={(value) => parentOnChange(END_TIME, value[0])}
                 props={props}
             />

diff --git a/...ib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx b/...ib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.tsx
@@ -25,7 +25,6 @@ interface TimeRangeSelectProps {
     name: string;
     options: SelectOption<string>[];
     value?: FieldValue;
-    placeholder?: string;
     handleChange: (value: string[]) => void;
     props: IndependentInputProps<
         FieldObjectValue,
@@ -40,7 +39,6 @@ export const TimeRangeSelect: React.FC<TimeRangeSelectProps> = ({
     spec,
     options,
     value,
-    placeholder,
     props,
     handleChange,
 }) => {
@@ -75,7 +73,7 @@ export const TimeRangeSelect: React.FC<TimeRangeSelectProps> = ({
                 options={options}
                 onUpdate={handleChange}
                 disabled={spec.viewSpec.disabled}
-                placeholder={spec.viewSpec.placeholder || placeholder}
+                placeholder={spec.viewSpec.placeholder}
                 filterPlaceholder={spec.viewSpec.selectParams?.filterPlaceholder}
                 renderOption={renderOption}
                 getOptionHeight={getOptionHeight}

diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/utils.ts b/src/lib/kit/components/Inputs/TimeRangeSelector/utils.ts
diff --git a/src/lib/kit/components/Inputs/TimeRangeSelector/utils.tsx b/src/lib/kit/components/Inputs/TimeRangeSelector/utils.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import {Text} from '@gravity-ui/uikit';
+
+export const filterTimeArray = (
+    times: {id: string; value: string; content: string | JSX.Element; key: string}[],
+    cutoff: string,
+    direction: 'greater' | 'less',
+) => {
+    const isTimeFormat = (value: string) => /^\d{1,2}:\d{2}$/.test(value);
+
+    const compareValues = (a: string, b: string) => {
+        if (isTimeFormat(a) && isTimeFormat(b)) {
+            return direction === 'less' ? a >= b : a <= b;
+        } else {
+            const aNum = parseInt(a, 10);
+            const bNum = parseInt(b, 10);
+
+            return direction === 'less' ? aNum >= bNum : aNum <= bNum;
+        }
+    };
+
+    return times.map((time) => {
+        const disabled = compareValues(time.value, cutoff);
+
+        return {
+            ...time,
+            content: disabled ? <Text color="secondary">{time.content}</Text> : time.content,
+            disabled,
+        };
+    });
+};
+
+export const validateArray = (arr: {value: string}[]) =>
+    arr.every((obj) => /^(\d+|\d{1,2}:\d{1,2})$/.test(obj.value));
diff --git a/src/stories/ObjectTimeRangeSelector.stories.tsx b/src/stories/ObjectTimeRangeSelector.stories.tsx
@@ -45,6 +45,10 @@ const baseSpec: ObjectSpec = {
                 type: 'select',
                 layout: 'row',
                 layoutTitle: 'Start of launch',
+                placeholder: '00:00',
+                selectParams: {
+                    filterPlaceholder: 'Start time',
+                },
             },
         },
         end: {
@@ -78,6 +82,10 @@ const baseSpec: ObjectSpec = {
                 type: 'select',
                 layout: 'row',
                 layoutTitle: 'End of launch',
+                placeholder: '01:00',
+                selectParams: {
+                    filterPlaceholder: 'End time',
+                },
             },
         },
     },