@steroidsjs/core 2.3.0-beta.3 → 2.3.0-beta.5

package/src/ui/form/DropDownField/DropDownField.tsx

@@ -0,0 +1,231 @@
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useClickAway, usePrevious, useUpdateEffect} from 'react-use';
+import _isEqual from 'lodash-es/isEqual';
+import {useComponents, useDataProvider, useDataSelect} from '../../../hooks';
+import {IDataProviderConfig} from '../../../hooks/useDataProvider';
+import {IDataSelectConfig} from '../../../hooks/useDataSelect';
+import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../../form/Field/fieldWrapper';
+
+/**
+ * DropDownField
+ * Выпадающий список для выбора одного или нескольких значений
+ */
+export interface IDropDownFieldProps extends IFieldWrapperInputProps,
+    IDataProviderConfig,
+    Omit<IDataSelectConfig, 'items'> {
+
+    /**
+     * Placeholder подсказка
+     * @example Your text...
+     */
+    searchPlaceholder?: string;
+
+    inputProps?: any;
+
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName;
+
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: any,
+
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: any;
+
+    /**
+     * Показать кнопку для сброса выбранного значения
+     * @example true
+     */
+    showReset?: boolean;
+
+    /**
+     * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
+     * Если аттрибут не задан - группировка не производится
+     * @example items
+     */
+    groupAttribute?: string,
+
+    /**
+     * Включает стиль без 'border'
+     * @example true
+     */
+    noBorder?: boolean;
+
+    [key: string]: any;
+}
+
+export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'items'> {
+    errors?: string[],
+    items: Record<string, unknown>[],
+    selectedItems: Record<string, unknown>[],
+    hoveredId: PrimaryKey | any,
+    selectedIds: (PrimaryKey | any)[],
+    forwardedRef: any,
+    searchInputProps: {
+        type: string,
+        name: string,
+        onChange: (value: string) => void,
+        value: string | number,
+        placeholder: string,
+        disabled: boolean,
+        className: CssClassName,
+    },
+    isOpened?: boolean,
+    isLoading?: boolean,
+    onReset: () => void,
+    onItemSelect: (id: PrimaryKey | any) => void,
+    onItemHover: (id: PrimaryKey | any) => void,
+    onItemRemove: (id: PrimaryKey | any) => void,
+    onClose: () => void,
+    placeholder: string,
+    isAutoComplete?: boolean,
+    isSearchAutoFocus?: boolean,
+}
+
+function DropDownField(props: IDropDownFieldProps & IFieldWrapperOutputProps): JSX.Element {
+    const components = useComponents();
+
+    // Query state
+    const [query, setQuery] = useState('');
+
+    const inputSelectedIds = useMemo(
+        () => props.selectedIds || [].concat(props.input.value || []),
+        [props.input.value, props.selectedIds],
+    );
+
+    // Data provider
+    const {items, isLoading, isAutoComplete, sourceItems} = useDataProvider({
+        items: props.items,
+        dataProvider: props.dataProvider,
+        autoComplete: props.autoComplete,
+        autoFetch: props.autoFetch,
+        query,
+        initialSelectedIds: inputSelectedIds,
+    });
+
+    // Data select
+    const {
+        isOpened,
+        setIsOpened,
+        setIsFocused,
+        hoveredId,
+        setHoveredId,
+        selectedIds,
+        setSelectedIds,
+        selectedItems,
+    } = useDataSelect({
+        multiple: props.multiple,
+        selectFirst: props.selectFirst,
+        selectedIds: inputSelectedIds,
+        primaryKey: props.primaryKey,
+        groupAttribute: props.groupAttribute,
+        items,
+        sourceItems,
+        inputValue: props.input.value,
+    });
+
+    const onOpen = useCallback(() => {
+        setQuery('');
+        setIsFocused(true);
+        setIsOpened(true);
+        setHoveredId(null);
+    }, [setHoveredId, setIsFocused, setIsOpened]);
+
+    const onItemHover = useCallback((id) => {
+        setHoveredId(id);
+    }, [setHoveredId]);
+
+    const onItemSelect = useCallback((id) => {
+        setSelectedIds(id);
+    }, [setSelectedIds]);
+
+    const onItemRemove = useCallback((id) => {
+        setSelectedIds(selectedIds.filter(i => i !== id));
+    }, [selectedIds, setSelectedIds]);
+
+    const onReset = useCallback(() => {
+        setSelectedIds([]);
+    }, [setSelectedIds]);
+
+    const onClose = useCallback(() => {
+        setIsFocused(false);
+        setIsOpened(false);
+    }, [setIsFocused, setIsOpened]);
+
+    // Outside click -> close
+    const forwardedRef = useRef(null);
+    if (process.env.PLATFORM !== 'mobile') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useClickAway(forwardedRef, onClose);
+    }
+
+    // Search input props
+    const searchInputProps = useMemo(() => ({
+        type: 'search',
+        placeholder: props.searchPlaceholder || __('Начните вводить символы для поиска...'),
+        onChange: value => setQuery(value),
+        tabIndex: -1,
+    }), [props]);
+
+    // Sync with form
+    const prevSelectedIds = usePrevious(selectedIds);
+    useEffect(() => {
+        if (!_isEqual(prevSelectedIds || [], selectedIds)) {
+            const newValues = props.multiple ? selectedIds : (selectedIds[0] || null);
+            props.input.onChange.call(null, newValues);
+            if (props.onChange) {
+                props.onChange.call(null, newValues);
+            }
+        }
+    }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
+
+    // Reset selected ids on form reset
+    const prevInputValue = usePrevious(props.input.value);
+    useUpdateEffect(() => {
+        // if form reset
+        if (prevInputValue && props.input.value === undefined && selectedIds.length > 0) {
+            onReset();
+        }
+    }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
+
+    return components.ui.renderView(props.view || 'form.DropDownFieldView', {
+        ...props,
+        isAutoComplete,
+        items,
+        hoveredId,
+        selectedIds,
+        forwardedRef,
+        searchInputProps,
+        isOpened,
+        isLoading,
+        onOpen,
+        selectedItems,
+        // TODO onFocus
+        // TODO onBlur
+        onItemHover,
+        onItemSelect,
+        onItemRemove,
+        onReset,
+        onClose,
+    });
+}
+
+DropDownField.defaultProps = {
+    primaryKey: 'id',
+    disabled: false,
+    required: false,
+    className: '',
+    autoComplete: false,
+    showReset: false,
+    multiple: false,
+    isSearchAutoFocus: true,
+};
+
+export default fieldWrapper<IDropDownFieldProps>('DropDownField', DropDownField);

package/src/ui/form/DropDownField/demo/auto-complete.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * Использование свойства самозаполнения.
+ * @order 5
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DropDownField
+            label='Auto Complete'
+            autoComplete
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/basic.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+
+/**
+ * Обычный пример использования DropDownField.
+ * @order 1
+ * @col 6
+ */
+
+export const items = [
+    {
+        id: 1,
+        label: 'First',
+    },
+    {
+        id: 2,
+        label: 'Second',
+    },
+    {
+        id: 3,
+        label: 'Third',
+    },
+    {
+        id: 4,
+        label: 'Fourth',
+    },
+];
+
+export default () => (
+    <>
+        <DropDownField
+            label='Basic'
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/disabled.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * Выключенный или недоступный для использования.
+ * @order 2
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DropDownField
+            label='Disabled'
+            disabled
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/errors.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * Обработка ошибок.
+ * @order 4
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DropDownField
+            label='Errors'
+            errors={['Error 1 text', 'Error 2 text']}
+            layout
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/multiple.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * С возможность множественного выбора.
+ * @order 6
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DropDownField
+            label='Multiple'
+            multiple
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/no-border.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * Без полей и рамок.
+ * @order 7
+ * @col 6
+ */
+
+export default () => (
+    <div
+        style={{width: '100px'}}
+    >
+        <DropDownField
+            label='No border'
+            noBorder
+            selectFirst
+            items={items}
+        />
+    </div>
+);

package/src/ui/form/DropDownField/demo/placeholder.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * С полем для поиска выбора из выпадающего списка.
+ * @order 8
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DropDownField
+            label='Search Placeholder'
+            autoComplete
+            searchPlaceholder='Search...'
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/required.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * Как обязательное поле для заполнения.
+ * @order 3
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DropDownField
+            label='Required'
+            required
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/show-reset.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+/**
+ * С кнопкой для удаления выбора.
+ * @order 9
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <DropDownField
+            label='Show reset'
+            showReset
+            items={items}
+        />
+    </>
+);

package/src/ui/form/DropDownField/demo/size.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import DropDownField from '../DropDownField';
+import {items} from './basic';
+
+const sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large',
+};
+
+/**
+ * По-умлочанию DropDownField имеет 3 заданных размера.
+ * @order 10
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <div className='row mb-4'>
+            {Object.keys(sizes)
+                .map(size => (
+                    <div className='col' key={size}>
+                        <DropDownField
+                            label={size}
+                            size={size}
+                            items={items}
+                        />
+                    </div>
+                ))}
+        </div>
+    </>
+);

package/src/ui/form/DropDownField/index.ts

@@ -0,0 +1,3 @@
+import DropDownField from './DropDownField';
+
+export default DropDownField;

package/src/ui/form/Field/Field.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {useContext, useMemo} from 'react';
+import _isString from 'lodash-es/isString';
+import _isFunction from 'lodash-es/isFunction';
+
+import {useComponents} from '../../../hooks';
+import {FormContext} from '../Form/Form';
+import {IFieldWrapperInputProps} from './fieldWrapper';
+import {Model} from '../../../components/MetaComponent';
+
+/**
+ * Field
+ * Компонент, который рендерит соответствующее поле, исходя из переданной модели и названия аттрибута.
+ * По дефолту будет отрендерен InputField.
+ * Также можно не использовать модель, а передавать компонент поля напрямую через пропсы.
+ */
+export interface IFieldProps extends IFieldWrapperInputProps {
+    /**
+     * Аттрибут (название) поля в форме
+     * @example isVisible
+     */
+    attribute?: any;
+
+    /**
+     * Модель с полями формы
+     * @example {attributes: [{attribute: 'category', field: 'DropDownField'}]}
+     */
+    model?: Model;
+
+    /**
+     * Компонент поля
+     * @example DropDownField
+     */
+    component?: any;
+
+    [key: string]: any,
+}
+
+function Field(props: IFieldProps): JSX.Element {
+    const components = useComponents();
+
+    // Get model
+    const context = useContext(FormContext);
+    const fieldModel = useMemo(() => {
+        const model = props.model || context.model;
+        const result = (components.meta.getModel(model)?.attributes || [])
+            .find(field => field.attribute === props.attribute);
+
+        return result || {};
+    }, [components, props.model, context.model, props.attribute]);
+
+    const component = props.component
+        || fieldModel.searchField
+        || fieldModel.field
+        || 'InputField';
+
+    const ComponentField = _isString(component)
+        ? components.ui.getField(`form.${component}`)
+        : component;
+
+    const componentProps = {
+        ...fieldModel,
+        ...props,
+        ...fieldModel.fieldProps,
+        ...fieldModel.searchFieldProps,
+    };
+
+    // Render
+    return _isFunction(ComponentField)
+        ? ComponentField(componentProps)
+        : <ComponentField {...componentProps} />;
+}
+
+export default React.memo(Field);

package/src/ui/form/Field/demo/basic.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Field from '../Field';
+
+/**
+ * Обычный пример использования Field.
+ * @order 1
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <Field
+            attribute='field'
+            label='Basic'
+        />
+    </>
+);

package/src/ui/form/Field/demo/component.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import Field from '../Field';
+import DateField from '../../DateField';
+
+/**
+ * Field с компонентом.
+ * @order 3
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <Field
+            component={DateField}
+            label='Date'
+        />
+    </>
+);

package/src/ui/form/Field/demo/model.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Field from '../Field';
+
+/**
+ * Field с прокинутой моделью.
+ * @order 2
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <Field
+            attribute='category'
+            model={{
+                attributes: [
+                    {
+                        attribute: 'category',
+                        label: 'Category',
+                        field: 'DropDownField',
+                        fieldProps: {
+                            items: ['items_1', 'items_2', 'items_3'],
+                        },
+                    },
+                ],
+            }}
+        />
+    </>
+);