fix(ChipsSelect): add disabled prop (#6640)

VKCOM · Feb 28, 2024 · 1aa0493 · 1aa0493
1 parent 6e38123
commit 1aa0493
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 8 deletions.
diff --git a/packages/vkui/src/components/Chip/Chip.tsx b/packages/vkui/src/components/Chip/Chip.tsx
@@ -19,6 +19,7 @@ export type ChipValue = string | number;
 export interface ChipOption {
   value?: ChipValue;
   label?: string;
+  disabled?: boolean;
   [otherProp: string]: any;
 }
 

diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.stories.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.stories.tsx
@@ -21,7 +21,7 @@ const groups = [
     value: '1',
     label: 'Arctic Monkeys',
   },
-  { value: '2', label: 'Звери' },
+  { value: '2', label: 'Звери', disabled: true },
   { value: '4', label: 'FACE' },
   {
     value: '3',

diff --git a/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx b/packages/vkui/src/components/ChipsSelect/ChipsSelect.tsx
@@ -20,6 +20,32 @@ import { IconButton } from '../IconButton/IconButton';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import styles from './ChipsSelect.module.css';
 
+const findIndexAfter = <O extends ChipOption>(options: O[] = [], startIndex = -1) => {
+  if (startIndex >= options.length - 1) {
+    return -1;
+  }
+  return options.findIndex((option, i) => i > startIndex && !option.disabled);
+};
+
+const findIndexBefore = <O extends ChipOption>(
+  options: O[] = [],
+  endIndex: number = options.length,
+) => {
+  let result = -1;
+  if (endIndex <= 0) {
+    return result;
+  }
+  for (let i = endIndex - 1; i >= 0; i--) {
+    let option = options[i];
+
+    if (!option.disabled) {
+      result = i;
+      break;
+    }
+  }
+  return result;
+};
+
 export interface ChipsSelectProps<Option extends ChipOption>
   extends Omit<ChipsInputProps<Option>, 'after'> {
   popupDirection?: 'top' | 'bottom';
@@ -224,6 +250,12 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
       return;
     }
 
+    const option = filteredOptions[index];
+
+    if (option?.disabled) {
+      return;
+    }
+
     scrollToElement(index);
     setFocusedOptionIndex(index);
   };
@@ -232,9 +264,11 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
     let index = nextIndex === null ? -1 : nextIndex;
 
     if (type === FOCUS_ACTION_NEXT) {
-      index = index + 1;
+      const nextIndex = findIndexAfter(filteredOptions, index);
+      index = nextIndex === -1 ? findIndexAfter(filteredOptions) : nextIndex; // Следующий за index или первый валидный до index
     } else if (type === FOCUS_ACTION_PREV) {
-      index = index - 1;
+      const beforeIndex = findIndexBefore(filteredOptions, index);
+      index = beforeIndex === -1 ? findIndexBefore(filteredOptions) : beforeIndex; // Предшествующий index или последний валидный после index
     }
 
     focusOptionByIndex(index, focusedOptionIndex);
@@ -248,7 +282,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
 
       if (!opened) {
         setOpened(true);
-        setFocusedOptionIndex(0);
+        focusOption(null, FOCUS_ACTION_NEXT);
       } else {
         focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);
       }
@@ -259,7 +293,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
 
       if (!opened) {
         setOpened(true);
-        setFocusedOptionIndex(0);
+        focusOption(null, FOCUS_ACTION_NEXT);
       } else {
         focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);
       }
@@ -424,6 +458,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
                     option,
                     hovered: Boolean(hovered),
                     children: label,
+                    disabled: option.disabled,
                     selected: !!selected,
                     getRootRef: (e) => {
                       if (e) {
@@ -432,6 +467,9 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
                       return undefined;
                     },
                     onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
+                      if (option.disabled) {
+                        return;
+                      }
                       onChangeStart?.(e, option);
 
                       if (!e.defaultPrevented) {

diff --git a/packages/vkui/src/components/ChipsSelect/Readme.md b/packages/vkui/src/components/ChipsSelect/Readme.md
@@ -21,7 +21,7 @@ const groups = [
     label: 'Arctic Monkeys',
     src: getAvatarUrl('audio_arctic_monkeys'),
   },
-  { value: '2', label: 'Звери', src: getAvatarUrl('audio_leto_zveri') },
+  { value: '2', label: 'Звери', disabled: true, src: getAvatarUrl('audio_leto_zveri') },
   { value: '4', label: 'FACE', src: getAvatarUrl('audio_face') },
   {
     value: '3',

diff --git a/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx b/packages/vkui/src/components/CustomSelectOption/CustomSelectOption.tsx
@@ -53,8 +53,8 @@ export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLD
   /**
    * Блокирует весь блок.
    *
-   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select) или [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect), то свойство явно должно выставляться только через структуру `options`.
-   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) не будет знать об актуальном состоянии
+   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.
+   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии
    * опции.
    */
   disabled?: boolean;