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

package/src/ui/content/DropDown/DropDown.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import {useCallback, useRef} from 'react';
+import {useClickAway, useEvent} from 'react-use';
+import {useComponents} from '../../../hooks';
+import TooltipInnerPortal from '../../layout/Tooltip/TooltipPortalInner';
+import useAbsolutePositioning, {
+    IAbsolutePositioningInputProps,
+    IAbsolutePositioningOutputProps,
+} from '../../../hooks/useAbsolutePositioning';
+
+export interface IDropDownProps extends IAbsolutePositioningInputProps {
+    /**
+     * Дополнительный CSS-класс
+     */
+    className?: CssClassName,
+
+    /**
+     * Содержимое DropDown (компонент или jsx-код)
+     * @example () => Component
+     */
+    content?: () => React.ReactNode,
+
+    /**
+     * Переопределение view React компонента для кастомизациии отображения
+     * @example MyCustomView
+     */
+    view?: any,
+
+    /**
+     * В каком случае закрывать DropDown. По-умолчанию - `click-away`
+     * @example click-any
+     */
+    closeMode?: 'click-away' | 'click-any',
+}
+
+export interface IDropDownViewProps extends IDropDownProps, IAbsolutePositioningOutputProps {
+    /**
+     * Рассчет абсолютной позиции
+     */
+    calculatePosition: (componentSize: ClientRect) => void,
+
+    /**
+     * Ссылка на view
+     */
+    forwardedRef: any,
+}
+
+function DropDown(props: IDropDownProps): JSX.Element {
+    const components = useComponents();
+    const {
+        isComponentExist,
+        isComponentVisible,
+        calculateAbsolutePosition,
+        onShow,
+        onHide,
+        position,
+        style,
+    } = useAbsolutePositioning(props);
+    const childRef = useRef(null);
+    const isManualControl = props.visible !== undefined;
+
+    // Outside click -> close
+    const forwardedRef = useRef(null);
+    useClickAway(forwardedRef, (event) => {
+        if (props.closeMode === 'click-away') {
+            if (isManualControl) {
+                if (!childRef.current.contains(event.target) && props.onClose) {
+                    props.onClose();
+                }
+            } else {
+                onHide();
+            }
+        }
+    }, ['mousedown', 'touchstart']);
+
+    // Any click -> close
+    const onAnyClick = useCallback(() => {
+        if (isComponentExist && isComponentVisible && props.closeMode === 'click-any') {
+            onHide();
+        }
+    }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
+    useEvent('mousedown', onAnyClick);
+    useEvent('touchstart', onAnyClick);
+
+    const calculatePosition = useCallback((componentSize) => {
+        calculateAbsolutePosition(position, childRef.current, componentSize);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const DropDownView = components.ui.getView(props.view || 'content.DropDownView');
+    const childrenElement: any = typeof props.children === 'object'
+        ? React.Children.only(props.children)
+        : undefined;
+    const resultProps: any = {
+        ref: childRef,
+    };
+
+    if (!isManualControl) {
+        resultProps.onClick = () => {
+            onShow();
+        };
+    }
+    return (
+        <>
+            {childrenElement
+                ? React.cloneElement(childrenElement, resultProps)
+                : (
+                    <span>
+                        {props.children}
+                    </span>
+                )}
+            {isComponentExist && (
+                // TODO Change Portal to global
+                <TooltipInnerPortal>
+                    <DropDownView
+                        className={props.className}
+                        forwardedRef={forwardedRef}
+                        content={props.content}
+                        position={position}
+                        style={style}
+                        calculatePosition={calculatePosition}
+                        isComponentVisible={isComponentVisible}
+                        onClose={onHide}
+                    />
+                </TooltipInnerPortal>
+            )}
+        </>
+    );
+}
+
+DropDown.defaultProps = {
+    autoPositioning: false,
+    componentDestroyDelay: 300,
+    defaultVisible: false,
+    gap: 15,
+    position: 'bottom',
+    closeMode: 'click-away',
+};
+
+export default DropDown;

package/src/ui/content/DropDown/index.ts

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

package/src/ui/content/index.ts

@@ -0,0 +1,25 @@
+import {Avatar, AvatarGroup} from './Avatar';
+import {Collapse, CollapseItem} from './Collapse';
+import Card from './Card';
+import DropDown from './DropDown';
+import Alert from './Alert';
+
+export {
+    Avatar,
+    AvatarGroup,
+    Collapse,
+    CollapseItem,
+    Alert,
+    Card,
+    DropDown,
+};
+
+export default {
+    Avatar,
+    AvatarGroup,
+    Collapse,
+    CollapseItem,
+    Alert,
+    Card,
+    DropDown,
+};

package/src/ui/crud/Crud/Crud.tsx

@@ -0,0 +1,303 @@
+import * as React from 'react';
+import _get from 'lodash-es/get';
+import _omit from 'lodash-es/omit';
+import {ReactNode, useCallback, useEffect, useMemo} from 'react';
+import {useUpdateEffect} from 'react-use';
+import {IApiRest} from '../../../components/ApiComponent';
+import CrudModal from './CrudModal';
+import {listRefresh} from '../../../actions/list';
+import {closeModal, openModal} from '../../../actions/modal';
+import {goToRoute} from '../../../actions/router';
+import {IComponents} from '../../../providers/ComponentsProvider';
+import useFetch from '../../../hooks/useFetch';
+import CrudContent from './CrudContent';
+import {
+    CRUD_ACTION_INDEX,
+    DEFAULT_PRIMARY_KEY,
+    DEFAULT_QUERY_KEY,
+    normalizeItems,
+    pageControlsMap,
+    routeInfoSelector,
+} from './utils';
+import {useComponents, useSelector} from '../../../hooks';
+import useDispatch from '../../../hooks/useDispatch';
+import {IComponentsHocOutput} from '../../../hoc/components';
+import {IConnectHocOutput} from '../../../hoc/connect';
+import {IFormProps} from '../../form/Form/Form';
+import {IGridProps} from '../../list/Grid/Grid';
+import {IControlItem} from '../../nav/Controls/Controls';
+
+export interface ICrudItem extends Omit<IControlItem, 'visible' | 'confirm' | 'onClick'> {
+    title?: string,
+    actionName?: string,
+    pkRequired?: boolean,
+    mode?: 'page' | 'modal',
+    component?: any,
+    componentProps?: any,
+    controlsInclude?: string[],
+    controlsExclude?: string[],
+    visible?: boolean | ((item: any, crudItem: ICrudItem, isGrid: boolean) => boolean),
+    confirm?: string | ((e: any, props: ICrudClickProps) => any),
+    onClick?: (e: Event | React.MouseEvent, props: ICrudClickProps) => any,
+}
+
+export interface ICrudClickProps {
+    crudId?: string;
+    mode?: 'page' | 'modal',
+    restUrl?: string,
+    restApi?: IApiRest,
+    primaryKey?: 'id' | string,
+    queryKey?: 'id' | string,
+    routeId?: string,
+    routeAction?: string,
+    routeParams?: any,
+    recordId?: PrimaryKey,
+    record?: Record<string, unknown>,
+    components: IComponents,
+    goToAction: (nextAction: string) => any,
+    errorHandler?: (error, dispatch: any) => void,
+}
+
+export interface ICrudProps {
+    crudId?: string;
+    mode?: 'page' | 'modal',
+    restUrl?: string,
+    restApi?: IApiRest,
+    primaryKey?: 'id' | string,
+    queryKey?: 'id' | string,
+    model?: string,
+    searchModel?: string,
+    index?: boolean | ICrudItem,
+    create?: boolean | ICrudItem,
+    update?: boolean | ICrudItem,
+    view?: boolean | ICrudItem,
+    delete?: boolean | ICrudItem,
+    items?: ICrudItem[] | { [key: string]: ICrudItem };
+    grid?: IGridProps | React.ReactNode,
+    form?: IFormProps | React.ReactNode,
+    detail?: any, //TODO IDetailProps,
+    crudView?: CustomView,
+    errorHandler?: (error, dispatch: any) => void,
+    [key: string]: any,
+}
+
+export interface ICrudChildrenProps extends ICrudProps, IConnectHocOutput, IComponentsHocOutput {
+    item?: any,
+    recordId?: PrimaryKey,
+    action?: string,
+    routeId?: string,
+    controlsGetter?: any,
+    restUrl?: string,
+    restApi?: IApiRest,
+    onComplete?: () => void,
+    form?: IFormProps,
+    grid?: IGridProps,
+}
+
+const MODE_PAGE = 'page';
+const MODE_MODAL = 'modal';
+
+export interface ICrudViewProps {
+    className?: CssClassName,
+    controls?: IControlItem[],
+    title?: string,
+    children?: ReactNode,
+}
+
+function Crud(props: ICrudProps): JSX.Element {
+    const components = useComponents();
+    const dispatch = useDispatch();
+
+    const {
+        routeId,
+        routeTitle,
+        routeAction,
+        routeParams,
+        recordId,
+    } = useSelector(state => routeInfoSelector(state, props.queryKey));
+
+    // Normalize items
+    const items = useMemo(
+        () => normalizeItems(props.items, {
+            index: props.index || props.grid,
+            create: props.create || props.form,
+            update: props.update || props.form,
+            view: props.view,
+            delete: props.delete,
+        }),
+        [props.create, props.delete, props.form, props.grid, props.index, props.items, props.update, props.view],
+    );
+
+    // Get crud id and mode
+    const crudId = props.crudId || routeId;
+    const mode = _get(items.find(item => item.actionName === routeAction), 'mode') || props.mode;
+
+    const goToAction = useCallback((nextAction) => {
+        if (nextAction === CRUD_ACTION_INDEX) {
+            dispatch(listRefresh(crudId));
+        }
+        if (routeAction !== nextAction) {
+            if (mode === MODE_MODAL) {
+                dispatch(closeModal(crudId));
+            }
+            dispatch(goToRoute(routeId, {
+                ...routeParams,
+                [props.queryKey]: null,
+                [props.queryKey + 'Action']: null,
+            }));
+        }
+    }, [crudId, dispatch, mode, props.queryKey, routeAction, routeId, routeParams]);
+
+    // Fetch record
+    const {data: record, isLoading} = useFetch(
+        useMemo(
+            () => {
+                if (recordId && props.restUrl) {
+                    return {
+                        method: 'get',
+                        id: crudId + '_' + recordId,
+                        url: props.restUrl + '/' + recordId,
+                    };
+                }
+                if (recordId && props.restApi?.view) {
+                    return {
+                        id: crudId + '_' + recordId,
+                        url: props.restApi.view,
+                        params: {
+                            [props.primaryKey]: recordId,
+                        },
+                    };
+                }
+
+                return null;
+            },
+            [recordId, props.restUrl, props.restApi, props.primaryKey, crudId],
+        ),
+    );
+
+    // Props for click/confirm handlers
+    const clickProps: ICrudClickProps = useMemo(() => ({
+        crudId: props.crudId,
+        mode: props.mode,
+        restUrl: props.restUrl,
+        restApi: props.restApi,
+        primaryKey: props.primaryKey,
+        queryKey: props.queryKey,
+        routeId,
+        routeAction,
+        routeParams,
+        recordId,
+        record,
+        components,
+        goToAction,
+        errorHandler: props.errorHandler,
+    }), [components, goToAction, props.crudId, props.mode, props.primaryKey, props.queryKey,
+        props.restApi, props.restUrl, record, recordId, routeAction, routeId, routeParams]);
+
+    // Handler for convert control item to props for button
+    const itemsToControls = useCallback((localRecord, localRecordId, sourceItems) => (sourceItems || [])
+        .map((crudItem: ICrudItem) => {
+            const button: IControlItem = {
+                ..._omit(crudItem, ['actionName', 'pkRequired', 'component', 'componentProps', 'visible', 'onClick']),
+                confirm: typeof crudItem.confirm === 'string' ? crudItem.confirm : null,
+            };
+            const localClickProps: ICrudClickProps = {
+                ...localRecord,
+                record: localRecord || clickProps.record,
+                recordId: localRecordId || clickProps.recordId,
+            };
+
+            if (crudItem.onClick) {
+                button.onClick = e => {
+                    // Custom confirm
+                    if (typeof crudItem.confirm === 'function') {
+                        const value = crudItem.confirm(e, localClickProps);
+                        if (value === false || !window.confirm(value)) {
+                            e.preventDefault();
+                            return;
+                        }
+                    }
+
+                    crudItem.onClick(e, {...clickProps, ...localClickProps});
+                };
+            } else {
+                button.toRoute = routeId;
+                button.toRouteParams = {
+                    ...routeParams,
+                    [props.queryKey]: crudItem.pkRequired ? localClickProps.recordId : undefined,
+                    [props.queryKey + 'Action']: crudItem.actionName !== CRUD_ACTION_INDEX
+                        ? crudItem.actionName
+                        : undefined,
+                };
+            }
+
+            return button;
+        }), [clickProps, props.queryKey, routeId, routeParams]);
+
+    // Props for CrudContent component
+    const contentProps = useMemo(() => ({
+        crudId,
+        queryKey: props.queryKey,
+        primaryKey: props.primaryKey,
+        model: props.model,
+        restUrl: props.restUrl,
+        restApi: props.restApi,
+        grid: props.grid,
+        form: props.form,
+        goToAction,
+        items,
+        itemsToControls,
+        record,
+        recordId,
+    }), [crudId, props.queryKey, props.primaryKey, props.model, props.restUrl, props.restApi, props.grid,
+        props.form, goToAction, items, itemsToControls, record, recordId]);
+
+    // Open modal on route change
+    useEffect(() => {
+        if (mode === MODE_MODAL && routeAction !== CRUD_ACTION_INDEX) {
+            dispatch(openModal(CrudModal, {
+                modalId: crudId,
+                action: routeAction,
+                ...contentProps,
+            }));
+        }
+    }, [contentProps, crudId, dispatch, mode, routeAction]);
+
+    // Close modal on change mode
+    useUpdateEffect(() => {
+        if (mode !== MODE_MODAL) {
+            dispatch(closeModal(crudId));
+        }
+    }, [crudId, dispatch, mode]);
+
+    // Get page controls
+    const controlsAction = mode === MODE_MODAL ? CRUD_ACTION_INDEX : routeAction;
+    const controls = useMemo(() => itemsToControls(
+        record,
+        recordId,
+        items
+            .filter(crudItem => crudItem.visible !== false)
+            .filter(crudItem => pageControlsMap[controlsAction]
+                ? pageControlsMap[controlsAction].includes(crudItem.actionName)
+                : controlsAction === CRUD_ACTION_INDEX && !crudItem.pkRequired),
+    ), [items, itemsToControls, record, recordId, controlsAction]);
+
+    return components.ui.renderView(props.crudView || 'crud.CrudView', {
+        title: routeTitle,
+        controls,
+        children: (controlsAction === CRUD_ACTION_INDEX || !isLoading) && (
+            <CrudContent
+                {...contentProps}
+                action={controlsAction}
+            />
+        ),
+    });
+}
+
+Crud.defaultProps = {
+    primaryKey: DEFAULT_PRIMARY_KEY,
+    queryKey: DEFAULT_QUERY_KEY,
+    mode: MODE_PAGE,
+};
+
+export default Crud;

package/src/ui/crud/Crud/CrudContent.tsx

@@ -0,0 +1,123 @@
+import * as React from 'react';
+import {useCallback, useMemo} from 'react';
+import {IGridProps} from '../../list/Grid/Grid';
+import {IFormProps} from '../../form/Form/Form';
+import {CRUD_ACTION_CREATE, CRUD_ACTION_INDEX, CRUD_ACTION_UPDATE} from './utils';
+import {showNotification} from '../../../actions/notifications';
+import useDispatch from '../../../hooks/useDispatch';
+import {ICrudItem} from './Crud';
+import Grid from '../../../ui/list/Grid';
+import Form from '../../../ui/form/Form';
+import {IApiRest} from '../../../components/ApiComponent';
+
+export interface ICrudContentProps {
+    crudId?: string,
+    queryKey?: string,
+    primaryKey?: string,
+    model?: string,
+    restUrl?: string,
+    restApi?: IApiRest,
+    items?: ICrudItem[],
+    goToAction?: (nextAction: string) => any,
+    itemsToControls?: any,
+    record?: Record<string, unknown>,
+    recordId?: PrimaryKey,
+    action?: string,
+    grid?: IGridProps | React.ReactNode,
+    form?: IFormProps | React.ReactNode,
+}
+
+export default function CrudContent(props: ICrudContentProps): JSX.Element {
+    const dispatch = useDispatch();
+
+    // Resolve ids
+    const formId = [props.crudId, 'form', props.recordId].filter(Boolean).join('_');
+
+    // Get current crud item
+    const crudItem = props.items.find(item => item.actionName === props.action);
+
+    const controlsGetter = useCallback((record, primaryKey) => props.itemsToControls.call(
+        null,
+        record,
+        record[primaryKey] || null,
+        props.action === CRUD_ACTION_INDEX
+            ? props.items.filter(item => item.visible !== false && item.pkRequired)
+            : [],
+    ), [props.action, props.items, props.itemsToControls]);
+
+    const formInitialValues = useMemo(() => props.action === CRUD_ACTION_UPDATE
+        ? {...props.record, [props.primaryKey]: props.record?.[props.primaryKey] || props.recordId}
+        : undefined,
+    [props.action, props.primaryKey, props.record, props.recordId]);
+
+    const onFormComplete = useCallback(() => {
+        window.scrollTo(0, 0);
+        dispatch(showNotification(__('Запись успешно обновлена.')));
+
+        props.goToAction.call(null, CRUD_ACTION_INDEX);
+    }, [dispatch, props.goToAction]);
+
+    // Render content by action
+    let ItemComponent = crudItem.component;
+    switch (props.action) {
+        case CRUD_ACTION_INDEX:
+            if (!ItemComponent) {
+                ItemComponent = Grid;
+            }
+            return (
+                <ItemComponent // Grid
+                    key={props.crudId}
+                    listId={props.crudId}
+                    action={props.restApi ? props.restApi.index : props.restUrl}
+                    scope={['model', 'permission']}
+                    primaryKey={props.primaryKey}
+                    model={props.model}
+                    //searchModel={props.searchModel}
+                    controls={controlsGetter}
+                    columns={[props.primaryKey]}
+                    pagination={{
+                        loadMore: false,
+                    }}
+                    {...props.grid}
+                />
+            );
+
+        case CRUD_ACTION_CREATE:
+        case CRUD_ACTION_UPDATE:
+            if (!ItemComponent) {
+                ItemComponent = Form;
+            }
+            if (props.action === CRUD_ACTION_UPDATE && (props.restUrl || props.restApi) && !props.record) {
+                return null;
+            }
+            return (
+                <ItemComponent // Form
+                    key={formId}
+                    formId={formId}
+                    action={props.restApi
+                        ? (props.recordId ? props.restApi.update : props.restApi.create)
+                        : [props.restUrl, props.recordId].filter(Boolean).join('/')}
+                    model={props.model}
+                    autoFocus
+                    submitLabel={props.recordId ? __('Сохранить') : __('Добавить')}
+                    layout='horizontal'
+                    onComplete={onFormComplete}
+                    {...props.form}
+                    initialValues={formInitialValues}
+                />
+            );
+
+        default:
+            if (ItemComponent) {
+                return (
+                    <ItemComponent
+                        key={props.crudId + '_' + props.action}
+                        {...props}
+                        {...crudItem.componentProps}
+                    />
+                );
+            }
+
+            return null;
+    }
+}

package/src/ui/crud/Crud/CrudDetail.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {ICrudChildrenProps} from './Crud';
+//import Detail from '../../list/Detail'; TODO
+
+export default function CrudGrid(props: ICrudChildrenProps) {
+    /*return (
+        <Detail
+            item={this.props.item}
+            model={this.props.model}
+            attributes={[this.props.primaryKey]}
+            {...this.props.detail}
+        />
+    );*/
+}

package/src/ui/crud/Crud/CrudModal.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import {useCallback} from 'react';
+import {CRUD_ACTION_INDEX} from '../../../ui/crud/Crud/utils';
+import Modal from '../../modal/Modal';
+import CrudContent, {ICrudContentProps} from './CrudContent';
+
+export default function CrudModal(props: ICrudContentProps): JSX.Element {
+    // Get current item
+    const crudItem = props.items.find(item => item.actionName === props.action);
+
+    // Close handler
+    const onModalClose = useCallback(() => {
+        props.goToAction.call(null, CRUD_ACTION_INDEX);
+    }, [props.goToAction]);
+
+    return (
+        <Modal
+            size='lg'
+            title={crudItem.title || crudItem.label || null}
+            onClose={onModalClose}
+        >
+            <CrudContent {...props} />
+        </Modal>
+    );
+}

package/src/ui/crud/Crud/demo/default.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import Crud from '../Crud';
+
+/**
+ * Default
+ * @order 1
+ * @col 8
+ */
+export default () => (
+    <>
+        <Crud
+            grid={{
+                items: [
+                    {
+                        id: 1,
+                        name: 'Foo',
+                    },
+                    {
+                        id: 2,
+                        name: 'Bar',
+                    },
+                ],
+                columns: [
+                    {
+                        attribute: 'id',
+                        label: __('ИД'),
+                    },
+                    {
+                        attribute: 'name',
+                        label: __('Имя'),
+                    },
+                ],
+            }}
+            form={{
+                fields: [
+                    {
+                        attribute: 'name',
+                        label: __('Имя'),
+                    },
+                ]
+            }}
+            detail={{
+                attributes: [
+                    {
+                        attribute: 'id',
+                        label: __('ИД'),
+                    },
+                    {
+                        attribute: 'name',
+                        label: __('Имя'),
+                    },
+                ]
+            }}
+        />
+    </>
+)

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

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