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

package/ui/content/Detail/demo/sizes.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var Detail_1 = __importDefault(require("../Detail"));
+var DetailItem_1 = __importDefault(require("../DetailItem"));
+var sizes = {
+    sm: 'Small',
+    md: 'Middle',
+    lg: 'Large'
+};
+/**
+ * Table with different cell's sizes
+ * @order 2
+ * @col 8
+ */
+exports["default"] = (function () { return (React.createElement(React.Fragment, null, Object.keys(sizes).map(function (size) { return (React.createElement("div", { style: { marginBottom: '30px' }, key: size },
+    React.createElement(Detail_1["default"], { title: sizes[size], size: size, responsive: false },
+        React.createElement(DetailItem_1["default"], { label: "Product" }, "Cloud Database"),
+        React.createElement(DetailItem_1["default"], { label: "Billing Mode" }, "Prepaid"),
+        React.createElement(DetailItem_1["default"], { label: "Automatic Renewal" }, "YES"),
+        React.createElement(DetailItem_1["default"], { label: "Order time" }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Usage Time", span: 2 }, "2018-04-24  18:00:00"),
+        React.createElement(DetailItem_1["default"], { label: "Status", span: 3 }, "Running"),
+        React.createElement(DetailItem_1["default"], { label: "Negotaited Amount" }, "$80.00"),
+        React.createElement(DetailItem_1["default"], { label: "Discount" }, "$20.00"),
+        React.createElement(DetailItem_1["default"], { label: "Official Receipts" }, "$60.00"),
+        React.createElement(DetailItem_1["default"], { label: "Config Info" },
+            "Data disk type: MongoDB",
+            React.createElement("br", null),
+            "Database version: 3.4",
+            React.createElement("br", null),
+            "Package: dds.mongo.mid",
+            React.createElement("br", null),
+            "Storage space: 10 GB",
+            React.createElement("br", null),
+            "Replication factor: 3",
+            React.createElement("br", null),
+            "Region: East China 1",
+            React.createElement("br", null))))); }))); });

package/ui/content/Detail/index.d.ts

@@ -0,0 +1,3 @@
+import Detail from './Detail';
+import DetailItem from './DetailItem';
+export { Detail, DetailItem };

package/ui/content/Detail/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.DetailItem = exports.Detail = void 0;
+var Detail_1 = __importDefault(require("./Detail"));
+exports.Detail = Detail_1["default"];
+var DetailItem_1 = __importDefault(require("./DetailItem"));
+exports.DetailItem = DetailItem_1["default"];

package/ui/content/DropDown/DropDown.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { 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;
+}
+declare function DropDown(props: IDropDownProps): JSX.Element;
+declare namespace DropDown {
+    var defaultProps: {
+        autoPositioning: boolean;
+        componentDestroyDelay: number;
+        defaultVisible: boolean;
+        gap: number;
+        position: string;
+        closeMode: string;
+    };
+}
+export default DropDown;

package/ui/content/DropDown/DropDown.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var hooks_1 = require("../../../hooks");
+var TooltipPortalInner_1 = __importDefault(require("../../layout/Tooltip/TooltipPortalInner"));
+var useAbsolutePositioning_1 = __importDefault(require("../../../hooks/useAbsolutePositioning"));
+function DropDown(props) {
+    var components = hooks_1.useComponents();
+    var _a = useAbsolutePositioning_1["default"](props), isComponentExist = _a.isComponentExist, isComponentVisible = _a.isComponentVisible, calculateAbsolutePosition = _a.calculateAbsolutePosition, onShow = _a.onShow, onHide = _a.onHide, position = _a.position, style = _a.style;
+    var childRef = react_1.useRef(null);
+    var isManualControl = props.visible !== undefined;
+    // Outside click -> close
+    var forwardedRef = react_1.useRef(null);
+    react_use_1.useClickAway(forwardedRef, function (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
+    var onAnyClick = react_1.useCallback(function () {
+        if (isComponentExist && isComponentVisible && props.closeMode === 'click-any') {
+            onHide();
+        }
+    }, [isComponentExist, isComponentVisible, onHide, props.closeMode]);
+    react_use_1.useEvent('mousedown', onAnyClick);
+    react_use_1.useEvent('touchstart', onAnyClick);
+    var calculatePosition = react_1.useCallback(function (componentSize) {
+        calculateAbsolutePosition(position, childRef.current, componentSize);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var DropDownView = components.ui.getView(props.view || 'content.DropDownView');
+    var childrenElement = typeof props.children === 'object'
+        ? React.Children.only(props.children)
+        : undefined;
+    var resultProps = {
+        ref: childRef
+    };
+    if (!isManualControl) {
+        resultProps.onClick = function () {
+            onShow();
+        };
+    }
+    return (React.createElement(React.Fragment, null,
+        childrenElement
+            ? React.cloneElement(childrenElement, resultProps)
+            : (React.createElement("span", null, props.children)),
+        isComponentExist && (
+        // TODO Change Portal to global
+        React.createElement(TooltipPortalInner_1["default"], null,
+            React.createElement(DropDownView, { className: props.className, forwardedRef: forwardedRef, content: props.content, position: position, style: style, calculatePosition: calculatePosition, isComponentVisible: isComponentVisible, onClose: onHide })))));
+}
+DropDown.defaultProps = {
+    autoPositioning: false,
+    componentDestroyDelay: 300,
+    defaultVisible: false,
+    gap: 15,
+    position: 'bottom',
+    closeMode: 'click-away'
+};
+exports["default"] = DropDown;

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

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

package/ui/content/DropDown/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var DropDown_1 = __importDefault(require("./DropDown"));
+exports["default"] = DropDown_1["default"];

package/ui/content/index.d.ts

@@ -0,0 +1,16 @@
+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, };
+declare const _default: {
+    Avatar: typeof Avatar;
+    AvatarGroup: typeof AvatarGroup;
+    Collapse: typeof Collapse;
+    CollapseItem: typeof CollapseItem;
+    Alert: typeof Alert;
+    Card: typeof Card;
+    DropDown: typeof DropDown;
+};
+export default _default;

package/ui/content/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.DropDown = exports.Card = exports.Alert = exports.CollapseItem = exports.Collapse = exports.AvatarGroup = exports.Avatar = void 0;
+var Avatar_1 = require("./Avatar");
+exports.Avatar = Avatar_1.Avatar;
+exports.AvatarGroup = Avatar_1.AvatarGroup;
+var Collapse_1 = require("./Collapse");
+exports.Collapse = Collapse_1.Collapse;
+exports.CollapseItem = Collapse_1.CollapseItem;
+var Card_1 = __importDefault(require("./Card"));
+exports.Card = Card_1["default"];
+var DropDown_1 = __importDefault(require("./DropDown"));
+exports.DropDown = DropDown_1["default"];
+var Alert_1 = __importDefault(require("./Alert"));
+exports.Alert = Alert_1["default"];
+exports["default"] = {
+    Avatar: Avatar_1.Avatar,
+    AvatarGroup: Avatar_1.AvatarGroup,
+    Collapse: Collapse_1.Collapse,
+    CollapseItem: Collapse_1.CollapseItem,
+    Alert: Alert_1["default"],
+    Card: Card_1["default"],
+    DropDown: DropDown_1["default"]
+};

package/ui/crud/Crud/Crud.d.ts

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { IApiRest } from '../../../components/ApiComponent';
+import { IComponents } from '../../../providers/ComponentsProvider';
+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: any, 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;
+    crudView?: CustomView;
+    errorHandler?: (error: any, 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;
+}
+export interface ICrudViewProps {
+    className?: CssClassName;
+    controls?: IControlItem[];
+    title?: string;
+    children?: ReactNode;
+}
+declare function Crud(props: ICrudProps): JSX.Element;
+declare namespace Crud {
+    var defaultProps: {
+        primaryKey: string;
+        queryKey: string;
+        mode: string;
+    };
+}
+export default Crud;

package/ui/crud/Crud/Crud.js

@@ -0,0 +1,193 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var get_1 = __importDefault(require("lodash-es/get"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var CrudModal_1 = __importDefault(require("./CrudModal"));
+var list_1 = require("../../../actions/list");
+var modal_1 = require("../../../actions/modal");
+var router_1 = require("../../../actions/router");
+var useFetch_1 = __importDefault(require("../../../hooks/useFetch"));
+var CrudContent_1 = __importDefault(require("./CrudContent"));
+var utils_1 = require("./utils");
+var hooks_1 = require("../../../hooks");
+var useDispatch_1 = __importDefault(require("../../../hooks/useDispatch"));
+var MODE_PAGE = 'page';
+var MODE_MODAL = 'modal';
+function Crud(props) {
+    var components = hooks_1.useComponents();
+    var dispatch = useDispatch_1["default"]();
+    var _a = hooks_1.useSelector(function (state) { return utils_1.routeInfoSelector(state, props.queryKey); }), routeId = _a.routeId, routeTitle = _a.routeTitle, routeAction = _a.routeAction, routeParams = _a.routeParams, recordId = _a.recordId;
+    // Normalize items
+    var items = react_1.useMemo(function () { return utils_1.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
+    var crudId = props.crudId || routeId;
+    var mode = get_1["default"](items.find(function (item) { return item.actionName === routeAction; }), 'mode') || props.mode;
+    var goToAction = react_1.useCallback(function (nextAction) {
+        var _a;
+        if (nextAction === utils_1.CRUD_ACTION_INDEX) {
+            dispatch(list_1.listRefresh(crudId));
+        }
+        if (routeAction !== nextAction) {
+            if (mode === MODE_MODAL) {
+                dispatch(modal_1.closeModal(crudId));
+            }
+            dispatch(router_1.goToRoute(routeId, __assign(__assign({}, routeParams), (_a = {}, _a[props.queryKey] = null, _a[props.queryKey + 'Action'] = null, _a))));
+        }
+    }, [crudId, dispatch, mode, props.queryKey, routeAction, routeId, routeParams]);
+    // Fetch record
+    var _b = useFetch_1["default"](react_1.useMemo(function () {
+        var _a;
+        var _b;
+        if (recordId && props.restUrl) {
+            return {
+                method: 'get',
+                id: crudId + '_' + recordId,
+                url: props.restUrl + '/' + recordId
+            };
+        }
+        if (recordId && ((_b = props.restApi) === null || _b === void 0 ? void 0 : _b.view)) {
+            return {
+                id: crudId + '_' + recordId,
+                url: props.restApi.view,
+                params: (_a = {},
+                    _a[props.primaryKey] = recordId,
+                    _a)
+            };
+        }
+        return null;
+    }, [recordId, props.restUrl, props.restApi, props.primaryKey, crudId])), record = _b.data, isLoading = _b.isLoading;
+    // Props for click/confirm handlers
+    var clickProps = react_1.useMemo(function () { return ({
+        crudId: props.crudId,
+        mode: props.mode,
+        restUrl: props.restUrl,
+        restApi: props.restApi,
+        primaryKey: props.primaryKey,
+        queryKey: props.queryKey,
+        routeId: routeId,
+        routeAction: routeAction,
+        routeParams: routeParams,
+        recordId: recordId,
+        record: record,
+        components: components,
+        goToAction: 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
+    var itemsToControls = react_1.useCallback(function (localRecord, localRecordId, sourceItems) { return (sourceItems || [])
+        .map(function (crudItem) {
+        var _a;
+        var button = __assign(__assign({}, omit_1["default"](crudItem, ['actionName', 'pkRequired', 'component', 'componentProps', 'visible', 'onClick'])), { confirm: typeof crudItem.confirm === 'string' ? crudItem.confirm : null });
+        var localClickProps = __assign(__assign({}, localRecord), { record: localRecord || clickProps.record, recordId: localRecordId || clickProps.recordId });
+        if (crudItem.onClick) {
+            button.onClick = function (e) {
+                // Custom confirm
+                if (typeof crudItem.confirm === 'function') {
+                    var value = crudItem.confirm(e, localClickProps);
+                    if (value === false || !window.confirm(value)) {
+                        e.preventDefault();
+                        return;
+                    }
+                }
+                crudItem.onClick(e, __assign(__assign({}, clickProps), localClickProps));
+            };
+        }
+        else {
+            button.toRoute = routeId;
+            button.toRouteParams = __assign(__assign({}, routeParams), (_a = {}, _a[props.queryKey] = crudItem.pkRequired ? localClickProps.recordId : undefined, _a[props.queryKey + 'Action'] = crudItem.actionName !== utils_1.CRUD_ACTION_INDEX
+                ? crudItem.actionName
+                : undefined, _a));
+        }
+        return button;
+    }); }, [clickProps, props.queryKey, routeId, routeParams]);
+    // Props for CrudContent component
+    var contentProps = react_1.useMemo(function () { return ({
+        crudId: crudId,
+        queryKey: props.queryKey,
+        primaryKey: props.primaryKey,
+        model: props.model,
+        restUrl: props.restUrl,
+        restApi: props.restApi,
+        grid: props.grid,
+        form: props.form,
+        goToAction: goToAction,
+        items: items,
+        itemsToControls: itemsToControls,
+        record: record,
+        recordId: 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
+    react_1.useEffect(function () {
+        if (mode === MODE_MODAL && routeAction !== utils_1.CRUD_ACTION_INDEX) {
+            dispatch(modal_1.openModal(CrudModal_1["default"], __assign({ modalId: crudId, action: routeAction }, contentProps)));
+        }
+    }, [contentProps, crudId, dispatch, mode, routeAction]);
+    // Close modal on change mode
+    react_use_1.useUpdateEffect(function () {
+        if (mode !== MODE_MODAL) {
+            dispatch(modal_1.closeModal(crudId));
+        }
+    }, [crudId, dispatch, mode]);
+    // Get page controls
+    var controlsAction = mode === MODE_MODAL ? utils_1.CRUD_ACTION_INDEX : routeAction;
+    var controls = react_1.useMemo(function () { return itemsToControls(record, recordId, items
+        .filter(function (crudItem) { return crudItem.visible !== false; })
+        .filter(function (crudItem) { return utils_1.pageControlsMap[controlsAction]
+        ? utils_1.pageControlsMap[controlsAction].includes(crudItem.actionName)
+        : controlsAction === utils_1.CRUD_ACTION_INDEX && !crudItem.pkRequired; })); }, [items, itemsToControls, record, recordId, controlsAction]);
+    return components.ui.renderView(props.crudView || 'crud.CrudView', {
+        title: routeTitle,
+        controls: controls,
+        children: (controlsAction === utils_1.CRUD_ACTION_INDEX || !isLoading) && (React.createElement(CrudContent_1["default"], __assign({}, contentProps, { action: controlsAction })))
+    });
+}
+Crud.defaultProps = {
+    primaryKey: utils_1.DEFAULT_PRIMARY_KEY,
+    queryKey: utils_1.DEFAULT_QUERY_KEY,
+    mode: MODE_PAGE
+};
+exports["default"] = Crud;

package/ui/crud/Crud/CrudContent.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { IGridProps } from '../../list/Grid/Grid';
+import { IFormProps } from '../../form/Form/Form';
+import { ICrudItem } from './Crud';
+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;