@steroidsjs/core 2.3.0-beta.1 → 2.3.0-beta.2

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

@@ -1,140 +0,0 @@
-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

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

package/src/ui/content/index.ts

@@ -1,25 +0,0 @@
-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

@@ -1,303 +0,0 @@
-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

@@ -1,123 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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

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