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

package/src/ui/crud/Crud/utils.ts

@@ -0,0 +1,135 @@
+import _get from 'lodash-es/get';
+import _isEmpty from 'lodash-es/isEmpty';
+import {ICrudItem} from '../../../ui/crud/Crud/Crud';
+import CrudDetail from '../../../ui/crud/Crud/CrudDetail';
+import {getRouteId, getRouteParams, getRouteProp} from '../../../reducers/router';
+import {getOpened} from '../../../reducers/modal';
+
+export const DEFAULT_PRIMARY_KEY = 'id';
+export const DEFAULT_QUERY_KEY = 'id';
+
+export const CRUD_ACTION_INDEX = 'index';
+export const CRUD_ACTION_CREATE = 'create';
+export const CRUD_ACTION_UPDATE = 'update';
+export const CRUD_ACTION_VIEW = 'view';
+export const CRUD_ACTION_DELETE = 'delete';
+
+export const pageControlsMap: Record<string, string[]> = {
+    [CRUD_ACTION_INDEX]: [CRUD_ACTION_CREATE],
+    [CRUD_ACTION_CREATE]: [CRUD_ACTION_INDEX],
+    [CRUD_ACTION_UPDATE]: [CRUD_ACTION_INDEX, CRUD_ACTION_DELETE],
+    [CRUD_ACTION_VIEW]: [CRUD_ACTION_INDEX, CRUD_ACTION_UPDATE, CRUD_ACTION_DELETE],
+};
+
+export const normalizeItems = (sourceItems: ICrudItem[] | { [key: string]: ICrudItem }, fromProps): ICrudItem[] => {
+    // Defaults
+    const defaultItems: ({ [key: string]: ICrudItem }) = {
+        index: {
+            pkRequired: false,
+        },
+        create: {
+            title: __('Добавление'),
+            pkRequired: false,
+        },
+        update: {
+            title: __('Редактирование'),
+            controlsInclude: ['create', 'delete', 'view'],
+        },
+        view: {
+            title: __('Просмотр'),
+            component: CrudDetail,
+            controlsInclude: ['update', 'delete'],
+        },
+        delete: {
+            position: 'right',
+            confirm: (e, props) => __('Удалить запись {id}?', {id: props.recordId}),
+            onClick: async (e, props) => {
+                if (props.restApi) {
+                    await props.restApi.delete(props.components.api, {[props.primaryKey]: props.recordId});
+                    props.goToAction(CRUD_ACTION_INDEX);
+                    return;
+                }
+
+                if (props.restUrl) {
+                    await props.components.http.delete(`${props.restUrl}/${props.recordId}`)
+                        .then(() => props.goToAction(CRUD_ACTION_INDEX))
+                        .catch((error) => {
+                            if (props.errorHandler) {
+                                props.errorHandler(error, props.components.store.dispatch);
+                            } else {
+                                throw error;
+                            }
+                        });
+                    return;
+                }
+
+                throw new Error('Either restApi or restUrl must be set');
+            },
+        },
+    };
+
+    let items: Record<string, ICrudItem> = {};
+    // Array -> Object
+    if (Array.isArray(sourceItems)) {
+        items = sourceItems.reduce((obj, item: ICrudItem) => {
+            obj[item.id] = {
+                ...item,
+            };
+            return obj;
+        }, {});
+    } else if (sourceItems) {
+        items = sourceItems;
+    }
+
+    // Merge with defaults
+    Object.keys(defaultItems).forEach(id => {
+        items[id] = {
+            id,
+            ...defaultItems[id],
+            ...items[id],
+        };
+        if (typeof fromProps[id] === 'object') {
+            items[id] = {...items[id], ...fromProps[id]};
+        }
+        if (typeof fromProps[id] === 'function') {
+            items[id].component = fromProps[id];
+        }
+        if (fromProps[id] === false) {
+            items[id].visible = false;
+        }
+    });
+
+    // Object -> Array + defaults
+    return Object.keys(items).map(id => ({
+        id,
+        actionName: id,
+        pkRequired: true,
+        ...items[id],
+    }));
+};
+
+export const routeInfoSelector = (state, queryKey, mode = null) => {
+    if (!queryKey) {
+        queryKey = DEFAULT_QUERY_KEY;
+    }
+
+    const routeParams = getRouteParams(state);
+    //const isModal = !!props.modalId;
+    //let action = routeAction;
+    //const crudItem = items.find(item => item.actionName === action);
+    /*const mode = crudItem && crudItem.mode || props.mode || DEFAULT_MODE;
+    if (mode === MODE_MODAL && !isModal) {
+        action = CRUD_ACTION_INDEX;
+        recordId = null;
+    }*/
+
+    return {
+        routeId: getRouteId(state),
+        routeTitle: getRouteProp(state, null, 'title') || getRouteProp(state, null, 'label'),
+        routeAction: _get(routeParams, queryKey + 'Action') || _get(routeParams, queryKey) || CRUD_ACTION_INDEX,
+        routeParams,
+        //action,
+        recordId: _get(routeParams, queryKey + 'Action') ? _get(routeParams, queryKey) : null,
+        hasModal: !_isEmpty(getOpened(state)),
+    };
+};

package/src/ui/crud/index.ts

@@ -0,0 +1,37 @@
+import _trimEnd from 'lodash-es/trimEnd';
+
+import Crud from './Crud';
+import {IRouteItem} from '../nav/Router/Router';
+import {ICrudProps} from './Crud/Crud';
+import {DEFAULT_QUERY_KEY} from './Crud/utils';
+
+export interface ICrudGeneratorProps extends ICrudProps {
+    path?: string,
+    label?: string,
+    models?: string | string[],
+    enums?: string | string[],
+    route?: IRouteItem,
+}
+
+export interface ICrudGeneratorRouteProps extends IRouteItem {
+    queryKey?: 'id' | string,
+}
+
+export {Crud};
+
+export const generateCrud = (routeId: string, props: ICrudGeneratorProps) => {
+    const queryKey = props.queryKey || DEFAULT_QUERY_KEY;
+    return {
+        id: routeId,
+        path: _trimEnd(props.path, '/') + `/:${queryKey}?/:${queryKey}Action?`,
+        label: props.label,
+        models: [
+            props.model,
+            props.searchModel,
+        ].filter(Boolean).concat(props.models || []),
+        enums: props.enums,
+        component: Crud,
+        ...props.route,
+        componentProps: props,
+    };
+};

package/src/ui/form/AutoCompleteField/AutoCompleteField.story.js

@@ -0,0 +1,9 @@
+import basic from './demo/basic';
+
+export default {
+    title: 'form.AutoCompleteField',
+};
+
+export {
+    basic,
+};

package/src/ui/form/AutoCompleteField/AutoCompleteField.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {useClickAway} from 'react-use';
+import useComponents from '../../../hooks/useComponents';
+import fieldWrapper, {IFieldWrapperOutputProps} from '../../../ui/form/Field/fieldWrapper';
+import {useDataProvider, useDataSelect} from '../../../hooks';
+import {IDataProviderConfig} from '../../../hooks/useDataProvider';
+import {IDataSelectConfig} from '../../../hooks/useDataSelect';
+import {IInputFieldProps} from '../InputField/InputField';
+
+/**
+ * AutoComplete
+ * Поле ввода текста с подсказками (auto-complete)
+ */
+export interface IAutoCompleteFieldProps extends IInputFieldProps, IDataProviderConfig,
+    Omit<IDataSelectConfig, 'items'> {
+    /**
+     * При фокусировке на поле ввода будет запускаться поиск
+     * @example true
+     */
+    searchOnFocus?: boolean,
+
+    [key: string]: any,
+}
+
+export interface IAutoCompleteFieldViewProps extends Omit<IAutoCompleteFieldProps, 'items'> {
+    items: Record<string, unknown>[],
+    hoveredId: PrimaryKey | any,
+    selectedIds: (PrimaryKey | any)[],
+    forwardedRef: any,
+    inputProps: {
+        type: string,
+        name: string,
+        placeholder?: string;
+        value: string | number,
+        disabled: boolean,
+        onChange: (value: string) => void,
+        onFocus: (e: Event | React.FocusEvent) => void,
+        onBlur: (e: Event | React.FocusEvent) => void,
+        className?: CssClassName
+    },
+    isOpened: boolean,
+    isLoading?: boolean,
+    onItemSelect: (id: PrimaryKey | any) => void,
+    onItemHover: (id: PrimaryKey | any) => void,
+}
+
+function AutoCompleteField(props: IAutoCompleteFieldProps & IFieldWrapperOutputProps): JSX.Element {
+    const components = useComponents();
+
+    // Query state
+    const [query, setQuery] = useState('');
+
+    // Data provider
+    const {
+        items,
+        isLoading,
+    } = useDataProvider({
+        items: props.items,
+        dataProvider: props.dataProvider,
+        autoComplete: props.autoComplete,
+        autoFetch: props.autoFetch,
+        query,
+    });
+
+    // Data select
+    const {
+        isOpened,
+        setIsOpened,
+        setIsFocused,
+        hoveredId,
+        setHoveredId,
+        selectedIds,
+        setSelectedIds,
+    } = useDataSelect({
+        selectedIds: props.selectedIds,
+        primaryKey: props.primaryKey,
+        items,
+        inputValue: props.input.value,
+    });
+
+    const onOpen = useCallback(() => {
+        setQuery('');
+        setIsFocused(true);
+        setIsOpened(true);
+        setHoveredId(null);
+    }, [setHoveredId, setIsFocused, setIsOpened]);
+
+    const onItemSelect = useCallback((id) => {
+        setSelectedIds(id);
+    }, [setSelectedIds]);
+
+    const onItemHover = useCallback((id) => {
+        setHoveredId(id);
+    }, [setHoveredId]);
+
+    const onClose = useCallback(() => {
+        setIsFocused(false);
+        setIsOpened(false);
+    }, [setIsFocused, setIsOpened]);
+
+    // Outside click -> close
+    const forwardedRef = useRef(null);
+    useClickAway(forwardedRef, onClose);
+
+    const onChange = useCallback((value) => {
+        setQuery(value);
+        props.input.onChange.call(null, value);
+    }, [props.input.onChange]);
+
+    // TODO
+    const onFocus = (e) => {
+        props.onOpen();
+        if (props.searchOnFocus) {
+            props.onSearch(props.input.value);
+        }
+        if (props.inputProps && props.inputProps.onFocus) {
+            props.inputProps.onFocus(e);
+        }
+    };
+
+    const onBlur = useCallback((e) => {
+        setTimeout(() => {
+            if (props.isOpened) {
+                onClose();
+            }
+        }, 200);
+        if (props.inputProps && props.inputProps.onBlur) {
+            props.inputProps.onBlur(e);
+        }
+    }, [onClose, props.inputProps, props.isOpened]);
+
+    const inputProps = useMemo(() => ({
+        ...props.inputProps,
+        type: 'text',
+        name: props.input.name,
+        value: props.input.value || '',
+        placeholder: props.placeholder,
+        disabled: props.disabled,
+        onChange,
+        onBlur,
+    }), [onBlur, onChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder]);
+
+    //Sync with form
+    useEffect(() => {
+        props.input.onChange.call(null, selectedIds[0] || null);
+    }, [props.input.onChange, selectedIds]);
+
+    return components.ui.renderView(props.view || 'form.AutoCompleteFieldView', {
+        ...props,
+        inputProps,
+        items,
+        isLoading,
+        hoveredId,
+        selectedIds,
+        onOpen,
+        isOpened,
+        onClose,
+        forwardedRef,
+        onItemHover,
+        onItemSelect,
+    });
+}
+
+AutoCompleteField.defaultProps = {
+    primaryKey: 'label',
+    autoComplete: true,
+    multiple: false,
+    disabled: false,
+    required: false,
+    className: '',
+};
+
+export default fieldWrapper<IAutoCompleteFieldProps>('AutoCompleteField', AutoCompleteField);

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import AutoCompleteField from '../AutoCompleteField';
+
+/**
+ * Простой пример использзования AutoAutoCompleteField с коллекцией элементов вложенных в {props.items} .
+ * @order 1
+ * @col 6
+ */
+
+export const items = [
+    {
+        id: '1',
+        label: 'Moscow',
+    },
+    {
+        id: '2',
+        label: 'Krasnoyarsk',
+    },
+    {
+        id: '3',
+        label: 'Krasnodar',
+    },
+];
+
+export default () => (
+    <>
+        <AutoCompleteField
+            label='Write city'
+            items={items}
+            searchOnFocus
+        />
+    </>
+);

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import AutoCompleteField from '../AutoCompleteField';
+import {items} from './basic';
+
+/**
+ * Выключенный AutoCompleteField также выключает Input.
+ * @order 2
+ * @col 6
+ */
+
+export default () => (
+    <>
+        <AutoCompleteField
+            label='Disabled'
+            disabled
+            items={items}
+        />
+    </>
+);

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

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

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import AutoCompleteField from '../AutoCompleteField';
+import {items} from './basic';
+
+/**
+ * Сообщение внутри AutoCompleteField по контексту использования.
+ * @order 5
+ * @col 6
+ */
+export default () => (
+    <>
+        <AutoCompleteField
+            label='Placeholder'
+            placeholder='Your text...'
+            items={items}
+        />
+    </>
+);

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

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

package/src/ui/form/AutoCompleteField/demo/sizes.tsx

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

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

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

package/src/ui/form/BlankField/BlankField.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import fieldWrapper, {IFieldWrapperInputProps, IFieldWrapperOutputProps} from '../Field/fieldWrapper';
+
+export interface IBlankFieldProps extends IFieldWrapperInputProps {
+    text?: string | React.ReactNode;
+    children?: React.ReactNode;
+}
+
+function BlankField(props: IBlankFieldProps & IFieldWrapperOutputProps): JSX.Element {
+    return <span>{props.text || props.children || props.input?.value}</span>;
+}
+
+export default fieldWrapper<IBlankFieldProps>('BlankField', BlankField);

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {AutoCompleteField, DateTimeField} from '../../../form';
+import BlankField from '../BlankField';
+
+/**
+ * Простой пример использзования BlankField.
+ * @order 1
+ * @col 6
+ */
+
+export const items = [
+    {
+        id: '1',
+        label: 'Moscow',
+    },
+    {
+        id: '2',
+        label: 'Krasnoyarsk',
+    },
+    {
+        id: '3',
+        label: 'Krasnodar',
+    },
+];
+
+export default () => (
+    <>
+        <BlankField text='BlankField text'>
+            <AutoCompleteField items={items} />
+            <DateTimeField />
+        </BlankField>
+    </>
+);

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

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

package/src/ui/form/Button/Button.story.js

@@ -0,0 +1,17 @@
+import block from './demo/block';
+import colors from './demo/colors';
+import disabled from './demo/disabled';
+import link from './demo/link';
+import sizes from './demo/sizes';
+
+export default {
+  title: 'Button',
+};
+
+export {
+    block,
+    colors,
+    disabled,
+    link,
+    sizes,
+}

package/src/ui/form/Button/Button.test.tsx

@@ -0,0 +1,104 @@
+import 'jest-enzyme';
+import React from 'react';
+import {act} from 'react-dom/test-utils';
+import ButtonView from '@steroidsjs/bootstrap/form/Button/ButtonView';
+import {IButtonProps} from './Button';
+import mountWithApp from '../../../../tests/mountWithApp';
+
+const Button = require('./Button').default;
+
+describe('Button tests', () => {
+    it('should render something without props', () => {
+        const wrapper = mountWithApp(Button, {view: ButtonView});
+        expect(wrapper).not.toBeEmptyRender();
+    });
+
+    describe('Static props', () => {
+        const props: IButtonProps = {
+            label: 'Button',
+            // icon: 'foo', TODO: add test 'should render icon'
+            type: 'button',
+            color: 'warning',
+            outline: true,
+            style: {width: '120px'},
+            className: 'test',
+            disabled: true,
+        };
+
+        const wrapper = mountWithApp(Button, {...props, view: ButtonView});
+
+        it('should static props transmitted unchanged', () => {
+            expect(wrapper.find('Button')).toHaveProp(props);
+        });
+        it('should render label', () => {
+            expect(wrapper.find('.ButtonView__label')).toHaveText(props.label);
+        });
+
+        it('should have right type', () => {
+            expect(wrapper.find('button')).toHaveProp('type', props.type);
+        });
+        it('should have right color modifier', () => {
+            expect(wrapper.find('button')).not.toHaveClassName(`ButtonView_color_${props.color}`);
+            expect(wrapper.find('button')).toHaveClassName(`ButtonView_outline_${props.color}`);
+        });
+        it('should have right outline modifier', () => {
+            expect(wrapper.find('button')).toHaveClassName('ButtonView_outline');
+        });
+        it('should have right external className', () => {
+            expect(wrapper.find('button')).toHaveClassName(props.className);
+        });
+        it('should have right external style', () => {
+            expect(wrapper.find('button')).toHaveProp('style', props.style);
+        });
+        it('should be disabled ', () => {
+            expect(wrapper.find('button')).toBeDisabled();
+        });
+    });
+
+    describe('Conditional props', () => {
+        it('should render "a" tag with props tag', () => {
+            const wrapper = mountWithApp(Button, {tag: 'a', view: ButtonView});
+            expect(wrapper.find('a')).toExist();
+        });
+
+        it('should render "a" tag with props url', () => {
+            const wrapper = mountWithApp(Button, {url: 'https://ya.ru', view: ButtonView});
+            expect(wrapper.find('a')).toExist();
+        });
+
+        it('should render "a" tag with props link', () => {
+            const wrapper = mountWithApp(Button, {link: true, view: ButtonView});
+            expect(wrapper.find('a')).toExist();
+        });
+    });
+
+    describe('Actions', () => {
+        const asyncClick = jest.fn(() => new Promise<void>(res => {
+            setTimeout(() => res(), 3000);
+        }));
+
+        const flushPromises = () => new Promise(setImmediate);
+
+        it('should isLoading toggling when onClick return Promise', async () => {
+            const wrapper = mountWithApp(Button, {onClick: asyncClick, view: ButtonView});
+            jest.useFakeTimers();
+
+            expect(wrapper.find('.ButtonView').hasClass('ButtonView_loading')).toBeFalsy();
+
+            wrapper.find('button').simulate('click');
+
+            expect(asyncClick).toBeCalled();
+            expect(asyncClick).toHaveBeenCalledTimes(1);
+            expect(wrapper.find('.ButtonView').hasClass('ButtonView_loading')).toBeTruthy();
+
+            await act(async () => {
+                jest.runAllTimers(); //resolve onClick promise
+                await flushPromises(); //wait until pending promises are resolved
+                jest.runAllTimers(); //skip setTimeout after .then
+                wrapper.update();
+
+                expect(wrapper.find('.ButtonView').hasClass('ButtonView_loading')).toBeFalsy();
+            });
+        });
+    });
+});