feat(select): add useSelectWithLoading preset (#693)

packages/select/package.json

@@ -23,6 +23,7 @@
         "@alfalab/core-components-form-control": "^6.1.1",
         "@alfalab/core-components-input": "^6.1.3",
         "@alfalab/core-components-popover": "^4.0.0",
+        "@alfalab/core-components-skeleton": "^1.3.6",
         "@alfalab/hooks": "^1.0.0",
         "classnames": "^2.2.6",
         "downshift": "5.4.7",

packages/select/src/Component.stories.mdx

@@ -540,3 +540,49 @@ const groups = [{
         label='preventFlip'
     />
 </Preview>
+
+
+## Пресеты
+
+### Селект со скелетной загрузкой
+
+```tsx live
+const options = [
+    { key: '1', content: 'Neptunium' },
+    { key: '2', content: 'Plutonium' },
+    { key: '3', content: 'Americium' },
+    { key: '4', content: 'Curium' },
+    { key: '5', content: 'Berkelium' },
+    { key: '6', content: 'Californium' },
+    { key: '7', content: 'Einsteinium' },
+];
+
+function Example() {
+    const [loading, setLoading] = React.useState(true);
+
+    const loadingProps = useSelectWithLoading({
+        visibleOptions: 6,
+        loading,
+    });
+
+    const handleOpen = () => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 2000);
+    };
+
+    return (
+        <Select
+            options={options}
+            label='select with loading'
+            size='l'
+            block={true}
+            onOpen={handleOpen}
+            {...loadingProps}
+        />
+    );
+}
+
+render(
+    <Example />
+)
+```

packages/select/src/index.ts

@@ -1,4 +1,5 @@
 export * from './Component';
 export * from './components';
+export * from './presets';
 export * from './typings';
 export * from './utils';

packages/select/src/presets/index.ts

@@ -0,0 +1 @@
+export * from './useSelectWithLoading/hook';

packages/select/src/presets/useSelectWithLoading/hook.tsx

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { Skeleton } from '@alfalab/core-components-skeleton';
+import { Option } from '../../components/option';
+import { BaseSelectProps, OptionShape } from '../../typings';
+
+import styles from './index.module.css';
+
+type useSelectWithLoadingProps = {
+    loading?: boolean;
+    visibleOptions?: BaseSelectProps['visibleOptions'];
+};
+
+export function useSelectWithLoading({
+    loading = false,
+    visibleOptions = 6,
+}: useSelectWithLoadingProps) {
+    const renderOption = useCallback(
+        props => (
+            <Option {...props} Checkmark={null} highlighted={loading ? false : props.highlighted} />
+        ),
+        [loading],
+    );
+
+    const options: OptionShape[] = Array(visibleOptions)
+        .fill(0)
+        .map((_, key) => ({
+            key: `loading-${key}`,
+            disabled: true,
+            content: <Skeleton className={styles.skeleton} visible={true} />,
+        }));
+
+    if (!loading) return null;
+
+    return {
+        Option: renderOption,
+        options,
+    };
+}

packages/select/src/presets/useSelectWithLoading/index.module.css

@@ -0,0 +1,7 @@
+.skeleton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 16px;
+    width: 50%;
+}

packages/select/tsconfig.json

@@ -6,8 +6,13 @@
         "rootDirs": ["src"],
         "baseUrl": ".",
         "paths": {
-            "@alfalab/core-components-*": ["../*/src"],
+            "@alfalab/core-components-*": ["../*/src"]
         }
     },
-    "references": [{ "path": "../form-control" }, { "path": "../popover" }, { "path": "../input" }]
+    "references": [
+        { "path": "../form-control" },
+        { "path": "../input" },
+        { "path": "../popover" },
+        { "path": "../skeleton" }
+    ]
 }