feat(select): add empty list placeholder prop (#438)

* feat(select): add empty list placeholder prop * feat(select): fix props * docs(input-autocomplete): fix story * feat(select): fix prop name * feat(select): add missing css
core-ds · Dec 30, 2020 · 75b0c9c · 75b0c9c
1 parent 6d387a8
commit 75b0c9c
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 4 deletions.
diff --git a/packages/select/src/components/base-select/Component.tsx b/packages/select/src/components/base-select/Component.tsx
@@ -47,6 +47,8 @@ export const BaseSelect = forwardRef(
             label,
             placeholder,
             fieldProps = {},
+            optionsListProps = {},
+            optionProps = {},
             valueRenderer,
             onChange,
             onOpen,
@@ -58,6 +60,7 @@ export const BaseSelect = forwardRef(
             Optgroup = () => null,
             Option = () => null,
             updatePopover,
+            showEmptyOptionsList = false,
         }: BaseSelectProps,
         ref,
     ) => {
@@ -231,6 +234,7 @@ export const BaseSelect = forwardRef(
             ({ option, index, ...rest }: { option: OptionShape; index: number }) => (
                 <React.Fragment key={option.key}>
                     {Option({
+                        ...(optionProps as object),
                         ...rest,
                         innerProps: getItemProps({
                             index,
@@ -247,7 +251,7 @@ export const BaseSelect = forwardRef(
                     })}
                 </React.Fragment>
             ),
-            [Option, getItemProps, highlightedIndex, selectedItems, size],
+            [Option, getItemProps, highlightedIndex, optionProps, selectedItems, size],
         );
 
         useEffect(() => {
@@ -281,6 +285,8 @@ export const BaseSelect = forwardRef(
             );
         }, [multiple, selectedItems, disabled, name, handleNativeSelectChange, options, menuProps]);
 
+        const needRenderOptionsList = flatOptions.length > 0 || showEmptyOptionsList;
+
         return (
             <div
                 {...getComboboxProps({
@@ -335,9 +341,10 @@ export const BaseSelect = forwardRef(
                             popperClassName={styles.popover}
                             update={updatePopover}
                         >
-                            {flatOptions.length > 0 && (
+                            {needRenderOptionsList && (
                                 <div className={styles.optionsList}>
                                     <OptionsList
+                                        {...optionsListProps}
                                         flatOptions={flatOptions}
                                         highlightedIndex={highlightedIndex}
                                         open={open}

diff --git a/packages/select/src/components/options-list/Component.tsx b/packages/select/src/components/options-list/Component.tsx
@@ -17,6 +17,7 @@ export const OptionsList = ({
     Option,
     options = [],
     Optgroup = DefaultOptgroup,
+    emptyPlaceholder,
 }: OptionsListProps) => {
     const counter = createCounter();
 
@@ -29,11 +30,19 @@ export const OptionsList = ({
         [Option, counter, size],
     );
 
-    return options.length > 0 ? (
+    if (options.length === 0 && !emptyPlaceholder) {
+        return null;
+    }
+
+    return (
         <div className={cn(styles.optionsList, styles[size])}>
             {options.map(option =>
                 isGroup(option) ? renderGroup(option) : Option({ option, index: counter() }),
             )}
+
+            {emptyPlaceholder && options.length === 0 && (
+                <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>
+            )}
         </div>
-    ) : null;
+    );
 };
diff --git a/packages/select/src/components/options-list/index.module.css b/packages/select/src/components/options-list/index.module.css
@@ -19,3 +19,12 @@
 .l {
     max-height: var(--select-options-list-l-height);
 }
+
+.emptyPlaceholder {
+    padding: var(--gap-m) var(--gap-s);
+    color: var(--select-options-list-empty-placeholder-color);
+}
+
+.l .emptyPlaceholder {
+    padding: var(--gap-xl) var(--gap-m);
+}
diff --git a/packages/select/src/components/virtual-options-list/Component.tsx b/packages/select/src/components/virtual-options-list/Component.tsx
@@ -25,6 +25,7 @@ export const VirtualOptionsList = ({
     options = [],
     overscan = 10,
     Optgroup = DefaultOptgroup,
+    emptyPlaceholder,
 }: VirtualOptionsList) => {
     const parentRef = useRef<HTMLDivElement>(null);
     const prevHighlightedIndex = usePrevious(highlightedIndex) || -1;
@@ -112,6 +113,10 @@ export const VirtualOptionsList = ({
                     );
                 })}
             </div>
+
+            {emptyPlaceholder && options.length === 0 && (
+                <div className={styles.emptyPlaceholder}>{emptyPlaceholder}</div>
+            )}
         </div>
     );
 };
diff --git a/packages/select/src/components/virtual-options-list/index.module.css b/packages/select/src/components/virtual-options-list/index.module.css
@@ -55,3 +55,12 @@
         display: none;
     }
 }
+
+.emptyPlaceholder {
+    padding: var(--gap-m) var(--gap-s);
+    color: var(--select-options-list-empty-placeholder-color);
+}
+
+.l .emptyPlaceholder {
+    padding: var(--gap-xl) var(--gap-m);
+}
diff --git a/packages/select/src/typings.ts b/packages/select/src/typings.ts
@@ -171,6 +171,16 @@ export type BaseSelectProps = {
      */
     fieldProps?: unknown;
 
+    /**
+     * Пропсы, которые будут прокинуты в компонент списка
+     */
+    optionsListProps?: unknown;
+
+    /**
+     * Пропсы, которые будут прокинуты в компонент пункта меню
+     */
+    optionProps?: unknown;
+
     /**
      * Компонент выпадающего меню
      */
@@ -214,6 +224,11 @@ export type BaseSelectProps = {
      * Хранит функцию, с помощью которой можно обновить положение поповера
      */
     updatePopover?: PopoverProps['update'];
+
+    /**
+     * Показывать OptionsList, если он пустой
+     */
+    showEmptyOptionsList?: boolean;
 };
 
 // TODO: использовать InputProps
@@ -343,6 +358,11 @@ export type OptionsListProps = {
      * Компонент группы
      */
     Optgroup?: BaseSelectProps['Optgroup'];
+
+    /**
+     * Будет отображаться, если компонент пустой
+     */
+    emptyPlaceholder?: string;
 };
 
 export type OptgroupProps = {

diff --git a/packages/select/src/vars.css b/packages/select/src/vars.css
@@ -13,6 +13,7 @@
     --select-options-list-s-height: 264px;
     --select-options-list-m-height: 308px;
     --select-options-list-l-height: 396px;
+    --select-options-list-empty-placeholder-color: var(--color-light-text-secondary);
     --select-option-divider-display: none;
     --select-option-divider-background: var(--color-light-border-primary);