@steroidsjs/core 3.0.0-beta.1 → 3.0.0-beta.100

package/hooks/useList.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 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]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -33,18 +37,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
+exports.prepareItemsToTree = exports.createInitialValues = exports.getDefaultSearchModel = exports.normalizeSortProps = exports.defaultConfig = void 0;
 var react_1 = require("react");
 var get_1 = __importDefault(require("lodash-es/get"));
 var union_1 = __importDefault(require("lodash-es/union"));
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var React = __importStar(require("react"));
 var react_use_1 = require("react-use");
+var list_1 = require("../utils/list");
 var useSelector_1 = __importDefault(require("../hooks/useSelector"));
-var list_1 = require("../reducers/list");
+var list_2 = require("../reducers/list");
 var useModel_1 = __importDefault(require("../hooks/useModel"));
 var useAddressBar_1 = __importDefault(require("../hooks/useAddressBar"));
-var list_2 = require("../actions/list");
+var list_3 = require("../actions/list");
 var useDispatch_1 = __importDefault(require("../hooks/useDispatch"));
 var form_1 = require("../actions/form");
 var form_2 = require("../reducers/form");
@@ -100,6 +105,27 @@ var createInitialValues = function (_a) {
     return (__assign(__assign((_b = {}, _b[paginationProps.attribute] = paginationProps.defaultValue, _b[paginationSizeProps.attribute] = paginationSizeProps.defaultValue, _b[sort.attribute] = sort.defaultValue, _b[layoutNamesProps.attribute] = layoutNamesProps.defaultValue, _b), initialQuery), configQuery));
 };
 exports.createInitialValues = createInitialValues;
+var TOP_TREE_LEVEL_VALUE = 0;
+var prepareItemsToTree = function (sourceItems, openedTreeItems, currentPage, itemsOnPage, onTreeItemClick, parentId, currentLevel) {
+    if (parentId === void 0) { parentId = ''; }
+    if (currentLevel === void 0) { currentLevel = TOP_TREE_LEVEL_VALUE; }
+    var treeItems = [];
+    if (currentPage && itemsOnPage && currentLevel === TOP_TREE_LEVEL_VALUE) {
+        var startIndex = (currentPage - 1) * itemsOnPage;
+        sourceItems = sourceItems.slice(startIndex, startIndex + itemsOnPage);
+    }
+    (sourceItems || []).forEach(function (item, index) {
+        var uniqueId = (0, list_1.getTreeItemUniqId)(item, index, parentId);
+        var isOpened = !!openedTreeItems[uniqueId];
+        var hasItems = !!(item.items && item.items.length > 0);
+        treeItems.push(__assign(__assign({}, item), { uniqueId: uniqueId, level: currentLevel, isOpened: isOpened, hasItems: hasItems, onTreeItemClick: onTreeItemClick }));
+        if (isOpened) {
+            treeItems = treeItems.concat((0, exports.prepareItemsToTree)(item.items, openedTreeItems, currentPage, itemsOnPage, onTreeItemClick, uniqueId, currentLevel + 1)).filter(Boolean);
+        }
+    });
+    return treeItems;
+};
+exports.prepareItemsToTree = prepareItemsToTree;
 /**
  * useList
  * Добавляет массу возможностей для взаимодействия с коллекциями. Коллекции можно получать как с бекенда,
@@ -109,12 +135,23 @@ exports.createInitialValues = createInitialValues;
 function useList(config) {
     var _a, _b;
     // Get list from redux state
-    var list = useSelector_1["default"](function (state) { return list_1.getList(state, config.listId); });
+    var list = (0, useSelector_1["default"])(function (state) { return (0, list_2.getList)(state, config.listId); });
+    var _c = (0, react_1.useState)({}), openedTreeItems = _c[0], setOpenedTreeItems = _c[1];
+    var onTreeItemClick = (0, react_1.useCallback)(function (uniqueId, item) {
+        var _a;
+        if (((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            setOpenedTreeItems(function (prevItems) {
+                var _a;
+                return (__assign(__assign({}, prevItems), (_a = {}, _a[uniqueId] = !prevItems[uniqueId], _a)));
+            });
+        }
+    }, []);
+    var getTreeItems = (0, react_1.useCallback)(function (sourceItems) { return (0, exports.prepareItemsToTree)(sourceItems, openedTreeItems, list === null || list === void 0 ? void 0 : list.page, list === null || list === void 0 ? void 0 : list.pageSize, onTreeItemClick); }, [onTreeItemClick, openedTreeItems, list]);
     // Normalize sort config
-    var sort = exports.normalizeSortProps(config.sort);
+    var sort = (0, exports.normalizeSortProps)(config.sort);
     // Empty
     var Empty = require('../ui/list/Empty')["default"];
-    var emptyProps = Empty_1.normalizeEmptyProps(config.empty);
+    var emptyProps = (0, Empty_1.normalizeEmptyProps)(config.empty);
     var renderEmpty = function () {
         var _a;
         if (!emptyProps.enable || (list === null || list === void 0 ? void 0 : list.isLoading) || ((_a = list === null || list === void 0 ? void 0 : list.items) === null || _a === void 0 ? void 0 : _a.length) > 0) {
@@ -124,35 +161,35 @@ function useList(config) {
     };
     // Pagination size
     var PaginationSize = require('../ui/list/PaginationSize')["default"];
-    var paginationSizeProps = PaginationSize_1.normalizePaginationSizeProps(config.paginationSize);
+    var paginationSizeProps = (0, PaginationSize_1.normalizePaginationSizeProps)(config.paginationSize);
     var renderPaginationSize = function () { return paginationSizeProps.enable
         ? (React.createElement(PaginationSize, __assign({ list: list }, paginationSizeProps)))
         : null; };
     // Pagination
     var Pagination = require('../ui/list/Pagination')["default"];
-    var paginationProps = Pagination_1.normalizePaginationProps(config.pagination);
+    var paginationProps = (0, Pagination_1.normalizePaginationProps)(config.pagination);
     var renderPagination = function () { return paginationProps.enable
         ? (React.createElement(Pagination, __assign({ list: list }, paginationProps, { sizeAttribute: paginationSizeProps.attribute })))
         : null; };
     // Layout switcher
     var LayoutNames = require('../ui/list/LayoutNames')["default"];
-    var layoutNamesProps = LayoutNames_1.normalizeLayoutNamesProps(config.layout);
-    var renderLayoutNames = function () { return React.createElement(LayoutNames, __assign({ list: list }, layoutNamesProps)); };
+    var layoutNamesProps = (0, LayoutNames_1.normalizeLayoutNamesProps)(config.layout);
+    var renderLayoutNames = function () { return (React.createElement(LayoutNames, __assign({ list: list }, layoutNamesProps))); };
     // Models
-    var defaultSearchModel = react_1.useMemo(function () { return exports.getDefaultSearchModel({
+    var defaultSearchModel = (0, react_1.useMemo)(function () { return (0, exports.getDefaultSearchModel)({
         paginationProps: paginationProps,
         paginationSizeProps: paginationSizeProps,
         sort: sort,
         layoutNamesProps: layoutNamesProps
     }); }, [layoutNamesProps, paginationProps, paginationSizeProps, sort]);
-    var model = useModel_1["default"](config.model);
-    var searchModel = useModel_1["default"](config.searchModel || ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.model), defaultSearchModel);
+    var model = (0, useModel_1["default"])(config.model);
+    var searchModel = (0, useModel_1["default"])(config.searchModel || ((_a = config.searchForm) === null || _a === void 0 ? void 0 : _a.model), defaultSearchModel);
     // Address bar synchronization
-    var _c = useAddressBar_1["default"](__assign({ enable: !!config.addressBar, model: searchModel }, (typeof config.addressBar === 'boolean' ? { enable: config.addressBar } : config.addressBar))), initialQuery = _c.initialQuery, updateQuery = _c.updateQuery;
+    var _d = (0, useAddressBar_1["default"])(__assign({ enable: !!config.addressBar, model: searchModel }, (typeof config.addressBar === 'boolean' ? { enable: config.addressBar } : config.addressBar))), initialQuery = _d.initialQuery, updateQuery = _d.updateQuery;
     // Outside search form
     var searchFormFields = (_b = config.searchForm) === null || _b === void 0 ? void 0 : _b.fields;
     var SearchForm = require('../ui/list/SearchForm')["default"];
-    var initialValuesSearchForm = react_1.useMemo(function () { return (searchFormFields || []).reduce(function (acc, field) {
+    var initialValuesSearchForm = (0, react_1.useMemo)(function () { return (searchFormFields || []).reduce(function (acc, field) {
         var attribute = typeof field === 'string' ? field : field.attribute;
         acc[attribute] = initialQuery === null || initialQuery === void 0 ? void 0 : initialQuery[attribute];
         return acc;
@@ -160,10 +197,10 @@ function useList(config) {
     var searchFormProps = __assign(__assign({ listId: config.listId }, config.searchForm), { model: searchModel, initialValues: initialValuesSearchForm });
     var renderSearchForm = function () { return React.createElement(SearchForm, __assign({}, searchFormProps)); };
     // Form id
-    var formId = get_1["default"](config, 'searchForm.formId') || config.listId;
-    var dispatch = useDispatch_1["default"]();
+    var formId = (0, get_1["default"])(config, 'searchForm.formId') || config.listId;
+    var dispatch = (0, useDispatch_1["default"])();
     // List wrapper (form context)
-    var _initialValues = react_1.useMemo(function () { return exports.createInitialValues({
+    var _initialValues = (0, react_1.useMemo)(function () { return (0, exports.createInitialValues)({
         paginationProps: paginationProps,
         paginationSizeProps: paginationSizeProps,
         sort: sort,
@@ -171,24 +208,26 @@ function useList(config) {
         initialQuery: initialQuery,
         configQuery: config.query
     }); }, [config.query, initialQuery, layoutNamesProps, paginationProps, paginationSizeProps, sort]);
-    var initialValues = useInitial_1["default"](function () { return _initialValues; });
-    var renderList = react_1.useCallback(function (children) {
+    var initialValues = (0, useInitial_1["default"])(function () { return _initialValues; });
+    var renderList = (0, react_1.useCallback)(function (children) {
         var Form = require('../ui/form/Form')["default"];
         return (React.createElement(Form, { formId: formId, initialValues: initialValues, view: false, useRedux: true }, children));
     }, [formId, initialValues]);
     // Init list in redux store
-    react_use_1.useMount(function () {
+    (0, react_use_1.useMount)(function () {
         if (!list) {
+            var items = config.hasTreeItems ? getTreeItems(config.items) : config.items;
             var toDispatch = [
-                list_2.listInit(config.listId, {
+                (0, list_3.listInit)(config.listId, {
                     listId: config.listId,
                     action: config.action || config.action === '' ? config.action : null,
                     actionMethod: config.actionMethod || exports.defaultConfig.actionMethod,
                     onFetch: config.onFetch,
+                    onError: config.onError,
                     condition: config.condition,
                     scope: config.scope,
                     items: null,
-                    sourceItems: config.items || null,
+                    sourceItems: items || null,
                     total: config.initialTotal,
                     isRemote: !config.items,
                     primaryKey: config.primaryKey || exports.defaultConfig.primaryKey,
@@ -200,67 +239,81 @@ function useList(config) {
                     layoutAttribute: layoutNamesProps.attribute || null
                 }),
             ];
-            if (config.initialItems || config.items) {
-                toDispatch.push(list_2.listSetItems(config.listId, config.initialItems || config.items));
+            if (config.initialItems) {
+                var initialItems = config.hasTreeItems ? getTreeItems(config.initialItems) : config.initialItems;
+                toDispatch.push((0, list_3.listSetItems)(config.listId, initialItems));
+            }
+            else if (config.items) {
+                toDispatch.push((0, list_3.listSetItems)(config.listId, items));
             }
             if (!config.initialItems) {
-                toDispatch.push(list_2.listLazyFetch(config.listId));
+                toDispatch.push((0, list_3.listLazyFetch)(config.listId));
             }
             dispatch(toDispatch);
         }
     });
     // Check form values change
-    var formValues = useSelector_1["default"](function (state) { return form_2.formSelector(state, formId, function (_a) {
+    var formValues = (0, useSelector_1["default"])(function (state) { return (0, form_2.formSelector)(state, formId, function (_a) {
         var values = _a.values;
         return values;
     }); });
-    var prevFormValues = react_use_1.usePrevious(formValues);
-    react_use_1.useUpdateEffect(function () {
-        if (prevFormValues && !isEqual_1["default"](formValues, prevFormValues)) {
+    var prevFormValues = (0, react_use_1.usePrevious)(formValues);
+    (0, react_use_1.useUpdateEffect)(function () {
+        if (prevFormValues && !(0, isEqual_1["default"])(formValues, prevFormValues)) {
             // Has changes (but not page) -> reset page
             var attribute = paginationProps.attribute;
             if ((prevFormValues === null || prevFormValues === void 0 ? void 0 : prevFormValues[attribute]) === formValues[attribute] && formValues[attribute] > 1) {
                 formValues[attribute] = paginationProps.defaultValue;
-                dispatch(form_1.formChange(formId, attribute, formValues[attribute]));
+                dispatch((0, form_1.formChange)(formId, attribute, formValues[attribute]));
             }
             // Sync with address bar
             updateQuery(formValues);
             // Send request
             if (config.autoFetchOnFormChanges !== false) {
-                dispatch(list_2.listLazyFetch(config.listId));
+                dispatch((0, list_3.listLazyFetch)(config.listId));
             }
         }
     }, [config.autoFetchOnFormChanges, config.listId, dispatch, formId, formValues,
         paginationProps.attribute, paginationProps.defaultValue, prevFormValues, updateQuery]);
     // Check change query
-    var prevQuery = react_use_1.usePrevious(config.query);
-    react_use_1.useUpdateEffect(function () {
-        union_1["default"](Object.keys(prevQuery), Object.keys(config.query))
+    var prevQuery = (0, react_use_1.usePrevious)(config.query);
+    (0, react_use_1.useUpdateEffect)(function () {
+        (0, union_1["default"])(Object.keys(prevQuery), Object.keys(config.query))
             .forEach(function (key) {
-            if (!isEqual_1["default"](prevQuery[key], config.query[key])) {
-                dispatch(form_1.formChange(formId, key, config.query[key]));
+            if (!(0, isEqual_1["default"])(prevQuery[key], config.query[key])) {
+                dispatch((0, form_1.formChange)(formId, key, config.query[key]));
             }
         });
     }, [formId, prevQuery, config.query, dispatch]);
     // Check change items
-    react_use_1.useUpdateEffect(function () {
+    (0, react_use_1.useUpdateEffect)(function () {
         dispatch([
-            list_2.listSetItems(config.listId, config.items),
+            (0, list_3.listSetItems)(config.listId, config.items),
         ]);
     }, [dispatch, config.items, config.listId]);
+    (0, react_use_1.useUpdateEffect)(function () {
+        if (config.hasTreeItems) {
+            dispatch([
+                (0, list_3.listSetItems)(config.listId, getTreeItems(config.items)),
+            ]);
+        }
+    }, [dispatch, config.items, config.listId, openedTreeItems, list === null || list === void 0 ? void 0 : list.pageSize, list === null || list === void 0 ? void 0 : list.page]);
     // Destroy
-    react_use_1.useUnmount(function () {
+    (0, react_use_1.useUnmount)(function () {
         var autoDestroy = typeof config.autoDestroy === 'boolean' ? config.autoDestroy : exports.defaultConfig.autoDestroy;
         if (autoDestroy) {
-            dispatch(list_2.listDestroy(config.listId));
+            dispatch([
+                (0, list_3.listDestroy)(config.listId),
+                (0, form_1.formDestroy)(config.listId),
+            ]);
         }
     });
-    var onFetch = react_1.useCallback(function (params) {
+    var onFetch = (0, react_1.useCallback)(function (params) {
         if (params === void 0) { params = {}; }
-        dispatch(list_2.listFetch(config.listId, params));
+        dispatch((0, list_3.listFetch)(config.listId, params));
     }, [config.listId, dispatch]);
-    var onSort = react_1.useCallback(function (value) {
-        dispatch(form_1.formChange(formId, sort.attribute, value));
+    var onSort = (0, react_1.useCallback)(function (value) {
+        dispatch((0, form_1.formChange)(formId, sort.attribute, value));
     }, [dispatch, formId, sort.attribute]);
     return {
         list: list,

package/hooks/useModel.js

@@ -7,7 +7,7 @@ var react_1 = require("react");
 var useComponents_1 = __importDefault(require("./useComponents"));
 function useModel(model, defaultModel) {
     if (defaultModel === void 0) { defaultModel = null; }
-    var components = useComponents_1["default"]();
-    return react_1.useMemo(function () { return components.meta.normalizeModel(typeof model === 'string' ? components.meta.getModel(model) : model, defaultModel); }, [components.meta, defaultModel, model]);
+    var components = (0, useComponents_1["default"])();
+    return (0, react_1.useMemo)(function () { return components.meta.normalizeModel(typeof model === 'string' ? components.meta.getModel(model) : model, defaultModel); }, [components.meta, defaultModel, model]);
 }
 exports["default"] = useModel;

package/hooks/useSaveCursorPosition.d.ts

@@ -0,0 +1,6 @@
+import React, { ChangeEvent } from 'react';
+import { IInputParams } from '../ui/form/Field/fieldWrapper';
+export default function useSaveCursorPosition(inputParams: IInputParams): {
+    inputRef: React.MutableRefObject<any>;
+    onChange: (event: ChangeEvent<HTMLInputElement>, value?: any) => void;
+};

package/hooks/useSaveCursorPosition.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable max-len */
+/* eslint-disable no-unneeded-ternary */
+/* eslint-disable consistent-return */
+/* eslint-disable no-return-assign */
+/* eslint-disable no-unused-expressions */
+var react_1 = __importDefault(require("react"));
+function useSaveCursorPosition(inputParams) {
+    var _a = react_1["default"].useState(null), cursor = _a[0], setCursor = _a[1];
+    var inputRef = react_1["default"].useRef(null);
+    react_1["default"].useEffect(function () {
+        var inputElement = inputRef.current;
+        if (inputElement) {
+            inputElement.setSelectionRange(cursor, cursor);
+        }
+    }, [cursor, inputParams.value]);
+    var onChange = react_1["default"].useCallback(function (event, value) {
+        var _a, _b;
+        if (value === void 0) { value = null; }
+        setCursor((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.selectionStart);
+        inputParams.onChange(value || ((_b = event.target) === null || _b === void 0 ? void 0 : _b.value));
+    }, [inputParams]);
+    return {
+        inputRef: inputRef,
+        onChange: onChange
+    };
+}
+exports["default"] = useSaveCursorPosition;

package/hooks/useScreen.js

@@ -3,6 +3,6 @@ exports.__esModule = true;
 var react_1 = require("react");
 var ScreenProvider_1 = require("../providers/ScreenProvider");
 function useScreen() {
-    return react_1.useContext(ScreenProvider_1.ScreenContext);
+    return (0, react_1.useContext)(ScreenProvider_1.ScreenContext);
 }
 exports["default"] = useScreen;

package/hooks/useSelector.js

@@ -2,6 +2,6 @@
 exports.__esModule = true;
 var react_redux_1 = require("react-redux");
 function useSelector(selector) {
-    return react_redux_1.useSelector(selector, react_redux_1.shallowEqual);
+    return (0, react_redux_1.useSelector)(selector, react_redux_1.shallowEqual);
 }
 exports["default"] = useSelector;

package/hooks/useSsr.js

@@ -3,6 +3,6 @@ exports.__esModule = true;
 var react_1 = require("react");
 var SsrProvider_1 = require("../providers/SsrProvider");
 function useSsr() {
-    return react_1.useContext(SsrProvider_1.SsrProviderContext) || {};
+    return (0, react_1.useContext)(SsrProvider_1.SsrProviderContext) || {};
 }
 exports["default"] = useSsr;

package/hooks/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { ITheme } from '../providers/ThemeProvider';
+export default function useTheme(): ITheme;

package/hooks/useTheme.js

@@ -0,0 +1,8 @@
+"use strict";
+exports.__esModule = true;
+var react_1 = require("react");
+var ThemeProvider_1 = require("../providers/ThemeProvider");
+function useTheme() {
+    return (0, react_1.useContext)(ThemeProvider_1.ThemeContext);
+}
+exports["default"] = useTheme;

package/hooks/useUniqueId.d.ts

@@ -1 +1 @@
-export default function useUniqueId(prefix: string): undefined;
+export default function useUniqueId(prefix: string): string;

package/hooks/useUniqueId.js

@@ -6,9 +6,9 @@ exports.__esModule = true;
 var react_1 = require("react");
 var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
 function useUniqueId(prefix) {
-    var idRef = react_1.useRef();
+    var idRef = (0, react_1.useRef)('');
     if (!idRef.current) {
-        idRef.current = uniqueId_1["default"](prefix);
+        idRef.current = (0, uniqueId_1["default"])(prefix);
     }
     return idRef.current;
 }

package/index.d.ts

@@ -34,6 +34,7 @@ declare type ColorName =
     | 'danger'
     | 'light'
     | 'dark'
+    | 'basic'
     | string;
 
 /**
@@ -47,21 +48,9 @@ declare type PrimaryKey = number | string;
 declare type Size = 'small' | 'middle' | 'large' | string;
 
 /**
- * Макет формы или ее части, влияющий на расположение полей
+ * Ориентация элемента
  */
-declare type FormLayoutName = 'default' | 'horizontal' | 'inline' | string;
-
-/**
- * Свойства для настройки макета формы
- */
-declare type FormLayout = FormLayoutName | boolean | {
-    layout?: FormLayoutName | boolean,
-    className?: string,
-    style?: any,
-    label?: boolean,
-    cols?: number[],
-    [key: string]: any,
-};
+declare type Orientation = 'horizontal' | 'vertical' | string;
 
 /**
  * Объект из свойства `input` от redux-form
@@ -88,9 +77,34 @@ declare type CustomStyle = React.CSSProperties;
  * Переопределение view React компонента для кастомизации отображения
  * @example MyCustomView
  */
-declare type CustomView = React.ReactNode;
+declare type CustomView = React.ReactNode | ((props: React.ComponentProps<any>) => JSX.Element);
+
+/**
+ * Кастомная иконка
+ * @example custom-icon
+ */
+declare type CustomIcon = string | React.ReactElement;
 
 /**
  * HTTP метод
  */
 declare type HttpMethod = 'get' | 'post' | 'put' | 'delete' | string;
+
+declare interface IUiComponent {
+    /**
+     * Переопределение view React компонента для кастомизации отображения
+     * @example MyCustomView
+     */
+    view?: CustomView;
+
+    /**
+     * Дополнительный CSS-класс для элемента отображения
+     */
+    className?: CssClassName;
+
+    /**
+     * Объект CSS стилей
+     * @example {width: '45%'}
+     */
+    style?: CustomStyle;
+}