@steroidsjs/core 2.2.8 → 2.2.12

package/hooks/index.d.ts

@@ -1,8 +1,20 @@
+import useAbsolutePositioning from './useAbsolutePositioning';
+import useAddressBar from './useAddressBar';
+import useApplication from './useApplication';
 import useBem from './useBem';
 import useComponents from './useComponents';
 import useDataProvider from './useDataProvider';
 import useDataSelect from './useDataSelect';
-import useSelector from './useSelector';
+import useDispatch from './useDispatch';
+import useFetch from './useFetch';
+import useFile from './useFile';
 import useForm from './useForm';
+import useInitial from './useInitial';
+import useLayout from './useLayout';
+import useList from './useList';
+import useModel from './useModel';
+import useScreen from './useScreen';
+import useSelector from './useSelector';
 import useSsr from './useSsr';
-export { useBem, useComponents, useDataProvider, useDataSelect, useSelector, useForm, useSsr, };
+import useUniqueId from './useUniqueId';
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, };

package/hooks/index.js

@@ -3,7 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.useSsr = exports.useForm = exports.useSelector = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = void 0;
+exports.useUniqueId = exports.useSsr = exports.useSelector = exports.useScreen = exports.useModel = exports.useList = exports.useLayout = exports.useInitial = exports.useForm = exports.useFile = exports.useFetch = exports.useDispatch = exports.useDataSelect = exports.useDataProvider = exports.useComponents = exports.useBem = exports.useApplication = exports.useAddressBar = exports.useAbsolutePositioning = void 0;
+var useAbsolutePositioning_1 = __importDefault(require("./useAbsolutePositioning"));
+exports.useAbsolutePositioning = useAbsolutePositioning_1["default"];
+var useAddressBar_1 = __importDefault(require("./useAddressBar"));
+exports.useAddressBar = useAddressBar_1["default"];
+var useApplication_1 = __importDefault(require("./useApplication"));
+exports.useApplication = useApplication_1["default"];
 var useBem_1 = __importDefault(require("./useBem"));
 exports.useBem = useBem_1["default"];
 var useComponents_1 = __importDefault(require("./useComponents"));
@@ -12,9 +18,27 @@ var useDataProvider_1 = __importDefault(require("./useDataProvider"));
 exports.useDataProvider = useDataProvider_1["default"];
 var useDataSelect_1 = __importDefault(require("./useDataSelect"));
 exports.useDataSelect = useDataSelect_1["default"];
-var useSelector_1 = __importDefault(require("./useSelector"));
-exports.useSelector = useSelector_1["default"];
+var useDispatch_1 = __importDefault(require("./useDispatch"));
+exports.useDispatch = useDispatch_1["default"];
+var useFetch_1 = __importDefault(require("./useFetch"));
+exports.useFetch = useFetch_1["default"];
+var useFile_1 = __importDefault(require("./useFile"));
+exports.useFile = useFile_1["default"];
 var useForm_1 = __importDefault(require("./useForm"));
 exports.useForm = useForm_1["default"];
+var useInitial_1 = __importDefault(require("./useInitial"));
+exports.useInitial = useInitial_1["default"];
+var useLayout_1 = __importDefault(require("./useLayout"));
+exports.useLayout = useLayout_1["default"];
+var useList_1 = __importDefault(require("./useList"));
+exports.useList = useList_1["default"];
+var useModel_1 = __importDefault(require("./useModel"));
+exports.useModel = useModel_1["default"];
+var useScreen_1 = __importDefault(require("./useScreen"));
+exports.useScreen = useScreen_1["default"];
+var useSelector_1 = __importDefault(require("./useSelector"));
+exports.useSelector = useSelector_1["default"];
 var useSsr_1 = __importDefault(require("./useSsr"));
 exports.useSsr = useSsr_1["default"];
+var useUniqueId_1 = __importDefault(require("./useUniqueId"));
+exports.useUniqueId = useUniqueId_1["default"];

package/hooks/useDataSelect.d.ts

@@ -29,6 +29,12 @@ export interface IDataSelectConfig {
      * @example id
      */
     primaryKey?: string;
+    /**
+     * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
+     * Если аттрибут не задан - группировка не производится
+     * @example items
+     */
+    groupAttribute?: string;
     /**
      * Значение поля в форме
      */
@@ -49,5 +55,6 @@ export interface IDataSelectResult {
     setSelectedIds: (ids: PrimaryKey | PrimaryKey[], skipToggle?: boolean) => void;
     selectedItems: IDataSelectItem[];
 }
+export declare const getLinearItems: (items: any, groupAttribute: any) => any[];
 export default function useDataSelect(config: IDataSelectConfig): IDataSelectResult;
 export {};

package/hooks/useDataSelect.js

@@ -8,6 +8,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+exports.getLinearItems = void 0;
 var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var isArray_1 = __importDefault(require("lodash-es/isArray"));
 var isNil_1 = __importDefault(require("lodash-es/isNil"));
@@ -16,9 +17,23 @@ var react_use_1 = require("react-use");
 var defaultProps = {
     primaryKey: 'id'
 };
+var getLinearItems = function (items, groupAttribute) {
+    var result = [];
+    items.forEach(function (item) {
+        if (groupAttribute && Array.isArray(item[groupAttribute])) {
+            result = result.concat(exports.getLinearItems(item[groupAttribute], groupAttribute));
+        }
+        else {
+            result.push(item);
+        }
+    });
+    return result;
+};
+exports.getLinearItems = getLinearItems;
 function useDataSelect(config) {
     // Get primary key
     var primaryKey = config.primaryKey || defaultProps.primaryKey;
+    var linearItems = react_1.useMemo(function () { return exports.getLinearItems(config.items, config.groupAttribute); }, [config.groupAttribute, config.items]);
     // Initial select
     var initialSelectedIds = react_1.useMemo(function () {
         var _a;
@@ -28,16 +43,16 @@ function useDataSelect(config) {
         if (!isNil_1["default"](config.inputValue)) {
             return [].concat(isArray_1["default"](config.inputValue) ? config.inputValue : [config.inputValue]);
         }
-        return config.selectFirst && config.items.length > 0
-            ? [config.items[0][primaryKey]]
+        return config.selectFirst && linearItems.length > 0
+            ? [linearItems[0][primaryKey]]
             : [];
-    }, [config.items, config.selectFirst, config.selectedIds, primaryKey, config.inputValue]);
-    var initialSelectedItems = react_1.useMemo(function () { return config.items.length > 0
+    }, [config.selectedIds, config.inputValue, config.selectFirst, linearItems, primaryKey]);
+    var initialSelectedItems = react_1.useMemo(function () { return linearItems.length > 0
         && initialSelectedIds.length > 0
         ? initialSelectedIds
-            .map(function (selectedId) { return config.items.find(function (item) { return item.id === selectedId; }); })
+            .map(function (selectedId) { return linearItems.find(function (item) { return item.id === selectedId; }); })
             .filter(Boolean)
-        : []; }, [initialSelectedIds, config.items]);
+        : []; }, [initialSelectedIds, linearItems]);
     // State
     var _a = react_1.useState(false), isOpened = _a[0], setIsOpened = _a[1];
     var _b = react_1.useState(false), isFocused = _b[0], setIsFocused = _b[1];
@@ -82,7 +97,7 @@ function useDataSelect(config) {
         var newSelectedItems = [];
         var hasChanges = false;
         selectedIds.forEach(function (selectedId) {
-            var finedItem = config.items.find(function (item) { return item[primaryKey] === selectedId; });
+            var finedItem = linearItems.find(function (item) { return item[primaryKey] === selectedId; });
             if (!finedItem && config.sourceItems) {
                 finedItem = config.sourceItems.find(function (item) { return item[primaryKey] === selectedId; });
             }
@@ -98,14 +113,14 @@ function useDataSelect(config) {
         if (hasChanges || prevSelectedIdsLength !== selectedIds.length) {
             setSelectedItemsInternal(newSelectedItems);
         }
-    }, [config.items, config.sourceItems, primaryKey, selectedIds, selectedItems, prevSelectedIdsLength]);
+    }, [linearItems, config.sourceItems, primaryKey, selectedIds, selectedItems, prevSelectedIdsLength]);
     // Select first after fetch data
-    var prevItemsLength = react_use_1.usePrevious(config.items.length);
+    var prevItemsLength = react_use_1.usePrevious(linearItems.length);
     react_use_1.useUpdateEffect(function () {
-        if (config.selectFirst && prevItemsLength === 0 && config.items.length > 0) {
-            setSelectedIdsInternal([config.items[0][primaryKey]]);
+        if (config.selectFirst && prevItemsLength === 0 && linearItems.length > 0) {
+            setSelectedIdsInternal([linearItems[0][primaryKey]]);
         }
-    }, [config.items, config.selectFirst, prevItemsLength, primaryKey]);
+    }, [linearItems, config.selectFirst, prevItemsLength, primaryKey]);
     // Update selected items on change value
     var prevConfigSelectedIds = react_use_1.usePrevious(config.selectedIds || []);
     react_use_1.useUpdateEffect(function () {
@@ -121,7 +136,7 @@ function useDataSelect(config) {
             && !isEqual_1["default"](selectedIds, newSelectedIds) && newSelectedIds.length !== 0) {
             setSelectedIdsInternal(newSelectedIds);
         }
-    }, [config.items, config.selectedIds, primaryKey, prevConfigSelectedIds,
+    }, [linearItems, config.selectedIds, primaryKey, prevConfigSelectedIds,
         selectedItems, config.sourceItems, selectedIds]);
     // Global key down handler for navigate on items
     // Support keys:
@@ -151,9 +166,9 @@ function useDataSelect(config) {
                 // Select first selected
                 setSelectedIds(selectedIds[0], true);
             }
-            else if (config.items.length > 0) {
+            else if (linearItems.length > 0) {
                 // Select first result
-                setSelectedIds(config.items[0], true);
+                setSelectedIds(linearItems[0], true);
             }
             setIsOpened(false);
         }
@@ -178,7 +193,7 @@ function useDataSelect(config) {
             else {
                 // Navigate on items by keys
                 var direction = isDown ? 1 : -1;
-                var keys = config.items.map(function (item) { return item.id; });
+                var keys = linearItems.map(function (item) { return item.id; });
                 // Get current index
                 var index = hoveredId ? keys.indexOf(hoveredId) : -1;
                 if (index === -1 && selectedIds.length === 1) {
@@ -192,7 +207,7 @@ function useDataSelect(config) {
                 setHoveredId(keys[newIndex]);
             }
         }
-    }, [config.items, hoveredId, isFocused, isOpened, setSelectedIds, selectedIds]);
+    }, [isFocused, isOpened, hoveredId, selectedIds, linearItems, setSelectedIds]);
     react_use_1.useEvent('keydown', onKeyDown);
     return {
         isOpened: isOpened,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steroidsjs/core",
-  "version": "2.2.8",
+  "version": "2.2.12",
   "description": "",
   "author": "Vladimir Kozhin <hello@kozhindev.com>",
   "repository": {

package/reducers/form.js

@@ -50,7 +50,7 @@ function reducerItem(state, action) {
         case form_1.FORM_SUBMIT:
             return dot_prop_immutable_1.set(state, 'submitCounter', (state.submitCounter || 0) + 1);
         case form_1.FORM_RESET:
-            return dot_prop_immutable_1.set(state, 'values', cloneDeep_1["default"](state.initialValues || {}));
+            return __assign(__assign({}, state), { values: cloneDeep_1["default"](state.initialValues || {}) });
         case form_1.FORM_ARRAY_ADD:
             // eslint-disable-next-line no-case-declarations
             var newValue = [].concat(get_1["default"](state, 'values.' + action.name) || []);

package/reducers/router.js

@@ -202,6 +202,7 @@ exports.getRouteParam = getRouteParam;
 var getRouteBreadcrumbs = function (state, routeId) {
     if (routeId === void 0) { routeId = null; }
     var items = [];
+    routeId = routeId || exports.getRouteId(state);
     findRecursive(state.router.routesTree, routeId, items);
     return items.reverse().filter(function (item) { return item.isVisible !== false && item.isNavVisible !== false; });
 };

package/ui/form/Button/Button.d.ts

@@ -90,7 +90,7 @@ export interface IButtonProps {
      * автоматически будет переключаться в режим загрузки (`loading`) на время выполнения `Promise`.
      * @param e => fetch(...)
      */
-    onClick?: (e: Event | React.MouseEvent) => Promise<any> | void;
+    onClick?: (e: Event | React.MouseEvent) => Promise<any> | any;
     /**
      * Переводит кнопку в состояние "не активна"
      * @example true

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -15,6 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var react_use_1 = require("react-use");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
 function CheckboxListField(props) {
@@ -42,6 +43,17 @@ function CheckboxListField(props) {
     react_1.useEffect(function () {
         props.input.onChange.call(null, selectedIds);
     }, [props.input.onChange, selectedIds]);
+    var onReset = react_1.useCallback(function () {
+        setSelectedIds([]);
+    }, [setSelectedIds]);
+    // Reset selected ids on form reset
+    var prevInputValue = react_use_1.usePrevious(props.input.value);
+    react_use_1.useUpdateEffect(function () {
+        // if form reset
+        if (prevInputValue && props.input.value === undefined && selectedIds.length > 0) {
+            onReset();
+        }
+    }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     return components.ui.renderView(props.view || 'form.CheckboxListFieldView', __assign(__assign({}, props), { items: items,
         inputProps: inputProps,
         onItemSelect: onItemSelect,

package/ui/form/DropDownField/DropDownField.d.ts

@@ -31,6 +31,12 @@ export interface IDropDownFieldProps extends IFieldWrapperInputProps, IDataProvi
      * @example true
      */
     showReset?: boolean;
+    /**
+     * Атрибут, в котором должны лежать дочерние элементы списка (для группировки)
+     * Если аттрибут не задан - группировка не производится
+     * @example items
+     */
+    groupAttribute?: string;
     /**
      * Включает стиль без 'border'
      * @example true

package/ui/form/DropDownField/DropDownField.js

@@ -39,6 +39,7 @@ function DropDownField(props) {
         selectFirst: props.selectFirst,
         selectedIds: inputSelectedIds,
         primaryKey: props.primaryKey,
+        groupAttribute: props.groupAttribute,
         items: items,
         sourceItems: sourceItems,
         inputValue: props.input.value

package/ui/form/FieldList/FieldList.d.ts

@@ -66,6 +66,10 @@ export interface IFieldListProps extends IFieldWrapperInputProps {
      * Дополнительный CSS-класс для списка с группами полей
      */
     className?: CssClassName;
+    /**
+     * Дополнительный CSS-класс для таблицы
+     */
+    tableClassName?: CssClassName;
     /**
      * Переопределение view React компонента для кастомизации отображения списка с группами полей
      * @example MyCustomView
@@ -102,6 +106,7 @@ export interface IFieldListViewProps {
     showAdd?: boolean;
     children?: React.ReactNode;
     className?: string;
+    tableClassName?: string;
     style?: any;
     forwardedRef?: any;
     disabled?: boolean;

package/ui/form/FieldList/FieldList.js

@@ -95,6 +95,8 @@ function FieldList(props) {
         size: props.size,
         disabled: props.disabled,
         required: props.required,
+        className: props.className,
+        tableClassName: props.tableClassName,
         items: items
     };
     var FieldListView = props.view || components.ui.getView('form.FieldListView');

package/ui/form/NumberField/NumberField.js

@@ -21,9 +21,9 @@ function NumberField(props) {
     var components = hooks_1.useComponents();
     props.inputProps = react_1.useMemo(function () {
         var _a;
-        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : undefined, onChange: function (e) { return props.input.onChange(e.target ? e.target.value : e.nativeEvent.text); }, type: 'number', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: function (e) { var _a, _b; return props.input.onChange(((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || ((_b = e.nativeEvent) === null || _b === void 0 ? void 0 : _b.text)); }, type: 'number', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled }, props.inputProps));
     }, [props.disabled, props.input, props.inputProps, props.placeholder, props.min, props.max, props.step]);
-    return components.ui.renderView(props.view || 'form.NumberFieldView' || 'form.InputFieldView', props);
+    return components.ui.renderView(props.view || 'form.NumberFieldView', props);
 }
 NumberField.defaultProps = {
     disabled: false,

package/ui/nav/Breadcrumbs/Breadcrumbs.d.ts

@@ -34,5 +34,7 @@ export interface IBreadcrumbsProps {
     view?: CustomView;
     [key: string]: any;
 }
-export declare type IBreadcrumbsViewProps = IBreadcrumbsProps;
+export declare type IBreadcrumbsViewProps = IBreadcrumbsProps & {
+    routeParams?: any;
+};
 export default function Breadcrumbs(props: IBreadcrumbsProps): JSX.Element;

package/ui/nav/Breadcrumbs/Breadcrumbs.js

@@ -15,8 +15,10 @@ var hooks_1 = require("../../../hooks");
 var router_1 = require("../../../reducers/router");
 function Breadcrumbs(props) {
     var components = hooks_1.useComponents();
-    var routeItems = hooks_1.useSelector(function (state) { return props.pageId ? router_1.getRouteBreadcrumbs(state, props.pageId) : null; });
+    var routeItems = hooks_1.useSelector(function (state) { return router_1.getRouteBreadcrumbs(state, props.pageId); });
+    var routeParams = hooks_1.useSelector(function (state) { return router_1.getRouteParams(state); });
     var items = props.items || routeItems;
-    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', __assign(__assign({}, props), { items: items }));
+    return components.ui.renderView(props.view || 'nav.BreadcrumbsView', __assign(__assign({}, props), { items: items,
+        routeParams: routeParams }));
 }
 exports["default"] = Breadcrumbs;

package/ui/nav/Nav/Nav.js

@@ -54,7 +54,7 @@ function Nav(props) {
     var _a = hooks_1.useSelector(function (state) { return ({
         routes: typeof props.items === 'string' ? router_1.getNavItems(state, props.items) : null,
         activeRouteIds: router_1.getActiveRouteIds(state),
-        routerParams: router_1.getRouterParams(state)
+        routerParams: router_1.getRouteParams(state)
     }); }), routes = _a.routes, activeRouteIds = _a.activeRouteIds, routerParams = _a.routerParams;
     var _b = react_1.useState(props.activeTab || get_1["default"](props, 'items.0.id') || 0), activeTab = _b[0], setActiveTab = _b[1];
     react_1.useEffect(function () {

package/ui/nav/Router/Router.js

@@ -116,7 +116,9 @@ var treeToList = function (item, isRoot) {
 };
 exports.treeToList = treeToList;
 var renderComponent = function (route, activePath, routeProps) {
-    if (route.redirectTo && route.path === activePath) {
+    var _a, _b;
+    var routePath = router_2.buildUrl(route.path, (_a = routeProps === null || routeProps === void 0 ? void 0 : routeProps.match) === null || _a === void 0 ? void 0 : _a.params);
+    if (route.redirectTo && routePath === activePath) {
         var to = findRedirectPathRecursive(route);
         if (to === null) {
             // eslint-disable-next-line no-console
@@ -124,8 +126,9 @@ var renderComponent = function (route, activePath, routeProps) {
             return null;
         }
         // Check already redirected
-        if (activePath !== to) {
-            return (React.createElement(react_router_1.Redirect, __assign({}, routeProps, { to: to }, route.componentProps)));
+        var toPath = router_2.buildUrl(to, (_b = routeProps === null || routeProps === void 0 ? void 0 : routeProps.match) === null || _b === void 0 ? void 0 : _b.params);
+        if (activePath !== toPath) {
+            return (React.createElement(react_router_1.Redirect, __assign({}, routeProps, { to: toPath }, route.componentProps)));
         }
     }
     if (!route.component) {
@@ -224,6 +227,10 @@ function Router(props) {
             }
             var activeRoute = routes.find(function (r) { return r.id === activeRouteId; });
             children = renderComponent(activeRoute, activePath, __assign(__assign({}, routeProps), { children: children })) || children;
+            // Stop, if route is exact
+            if (activeRoute.exact) {
+                return true;
+            }
             return false;
         });
         var result = renderComponent(routeItem, activePath, __assign(__assign({}, routeProps), { children: children }));