@steroidsjs/core 2.2.9 → 2.2.13

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.9",
+  "version": "2.2.13",
   "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

@@ -69,8 +69,8 @@ var buildUrl = function (path, params) {
     var pathKeys = [];
     try {
         pathKeys = path_to_regexp_1.parse(path)
-            .slice(1)
-            .map(function (p) { return p.name; });
+            .map(function (p) { return typeof p === 'object' && p.name; })
+            .filter(Boolean);
         url = path_to_regexp_1.compile(path)(__assign({}, params));
     }
     catch (e) {

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/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) { 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));
+        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,