@steroidsjs/core 3.0.57 → 3.0.59

package/en.json

@@ -1018,7 +1018,9 @@
     "Активирует логику:\n- Если кликнули по дате начала или конца диапазона, то позволяем её изменить следующим кликом\n- Если клик не на дату конца или начала диапазона, а диапазон есть, то сбрасываем его\n- Если клик не на дату конца или начала диапазона, а диапазона нет, то устанавливаем кликнутую дату в поле from": "",
     "Добавляет дополнительные кнопки к календарю\ntrue - будут отображены кнопки по-умолчанию\nсписок:\n string - одна из кнопок по-умолчанию\n object - кастомная кнопка": "",
     "Разделитель для даты и времени, не влияет на отображение": "",
+    "Свойства, которые напрямую передаются в DropDown компонент": "",
     "Нужно ли подгружать данные после закрытия DropDown": "",
+    "Число в пикселях, больше которого не может быть выпадающее меню": "",
     "Начальные элементы списка": "",
     "Значения для полей при нажатии кнопки 'Добавить'": "",
     "Название иконки, которая отобразится для удаления группы с полями": "",

package/enums/FieldEnum.d.ts

@@ -0,0 +1,68 @@
+import Enum from '../base/Enum';
+export default class FieldEnum extends Enum {
+    static readonly AUTO_COMPLETE_FIELD = "AutoCompleteField";
+    static readonly BLANK_FIELD = "BlankField";
+    static readonly CHECKBOX_FIELD = "CheckboxField";
+    static readonly CHECKBOX_LIST_FIELD = "CheckboxListField";
+    static readonly CHECKBOX_TREE_FIELD = "CheckboxTreeField";
+    static readonly DATE_FIELD = "DateField";
+    static readonly DATE_RANGE_FIELD = "DateRangeField";
+    static readonly DATE_TIME_FIELD = "DateTimeField";
+    static readonly DATE_TIME_RANGE_FIELD = "DateTimeRangeField";
+    static readonly DROPDOWN_FIELD = "DropDownField";
+    static readonly EMAIL_FIELD = "EmailField";
+    static readonly FIELD = "Field";
+    static readonly FIELD_LIST = "FieldList";
+    static readonly FIELD_SET = "FieldSet";
+    static readonly FILE_FIELD = "FileField";
+    static readonly HTML_FIELD = "HtmlField";
+    static readonly IMAGE_FIELD = "ImageField";
+    static readonly INPUT_FIELD = "InputField";
+    static readonly MASK_FIELD = "MaskField";
+    static readonly NAV_FIELD = "NavField";
+    static readonly NUMBER_FIELD = "NumberField";
+    static readonly PASSWORD_FIELD = "PasswordField";
+    static readonly RADIO_FIELD = "RadioField";
+    static readonly RADIO_LIST_FIELD = "RadioListField";
+    static readonly RATE_FIELD = "RateField";
+    static readonly RE_CAPTCHA_FIELD = "ReCaptchaField";
+    static readonly SLIDER_FIELD = "SliderField";
+    static readonly SWITCHER_FIELD = "SwitcherField";
+    static readonly TEXT_FIELD = "TextField";
+    static readonly TIME_FIELD = "TimeField";
+    static readonly TIME_RANGE_FIELD = "TimeRangeField";
+    static getLabels(): {
+        AutoCompleteField: string;
+        BlankField: string;
+        CheckboxField: string;
+        CheckboxListField: string;
+        CheckboxTreeField: string;
+        DateField: string;
+        DateRangeField: string;
+        DateTimeField: string;
+        DateTimeRangeField: string;
+        DropDownField: string;
+        EmailField: string;
+        Field: string;
+        FieldList: string;
+        FieldSet: string;
+        FileField: string;
+        HtmlField: string;
+        ImageField: string;
+        InputField: string;
+        MaskField: string;
+        NavField: string;
+        NumberField: string;
+        PasswordField: string;
+        RadioField: string;
+        RadioListField: string;
+        RateField: string;
+        ReCaptchaField: string;
+        SliderField: string;
+        SwitcherField: string;
+        TextField: string;
+        TimeField: string;
+        TimeRangeField: string;
+    };
+}
+export type FieldEnumType = ReturnType<typeof Array<keyof ReturnType<typeof FieldEnum.getLabels>>>[number];

package/enums/FieldEnum.js

@@ -0,0 +1,96 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Enum_1 = __importDefault(require("../base/Enum"));
+var FieldEnum = /** @class */ (function (_super) {
+    __extends(FieldEnum, _super);
+    function FieldEnum() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    FieldEnum.getLabels = function () {
+        var _a;
+        return _a = {},
+            _a[FieldEnum.AUTO_COMPLETE_FIELD] = 'AutoCompleteField',
+            _a[FieldEnum.BLANK_FIELD] = 'BlankField',
+            _a[FieldEnum.CHECKBOX_FIELD] = 'CheckboxField',
+            _a[FieldEnum.CHECKBOX_LIST_FIELD] = 'CheckboxListField',
+            _a[FieldEnum.CHECKBOX_TREE_FIELD] = 'CheckboxTreeField',
+            _a[FieldEnum.DATE_FIELD] = 'DateField',
+            _a[FieldEnum.DATE_RANGE_FIELD] = 'DateRangeField',
+            _a[FieldEnum.DATE_TIME_FIELD] = 'DateTimeField',
+            _a[FieldEnum.DATE_TIME_RANGE_FIELD] = 'DateTimeRangeField',
+            _a[FieldEnum.DROPDOWN_FIELD] = 'DropDownField',
+            _a[FieldEnum.EMAIL_FIELD] = 'EmailField',
+            _a[FieldEnum.FIELD] = 'Field',
+            _a[FieldEnum.FIELD_LIST] = 'FieldList',
+            _a[FieldEnum.FIELD_SET] = 'FieldSet',
+            _a[FieldEnum.FILE_FIELD] = 'FileField',
+            _a[FieldEnum.HTML_FIELD] = 'HtmlField',
+            _a[FieldEnum.IMAGE_FIELD] = 'ImageField',
+            _a[FieldEnum.INPUT_FIELD] = 'InputField',
+            _a[FieldEnum.MASK_FIELD] = 'MaskField',
+            _a[FieldEnum.NAV_FIELD] = 'NavField',
+            _a[FieldEnum.NUMBER_FIELD] = 'NumberField',
+            _a[FieldEnum.PASSWORD_FIELD] = 'PasswordField',
+            _a[FieldEnum.RADIO_FIELD] = 'RadioField',
+            _a[FieldEnum.RADIO_LIST_FIELD] = 'RadioListField',
+            _a[FieldEnum.RATE_FIELD] = 'RateField',
+            _a[FieldEnum.RE_CAPTCHA_FIELD] = 'ReCaptchaField',
+            _a[FieldEnum.SLIDER_FIELD] = 'SliderField',
+            _a[FieldEnum.SWITCHER_FIELD] = 'SwitcherField',
+            _a[FieldEnum.TEXT_FIELD] = 'TextField',
+            _a[FieldEnum.TIME_FIELD] = 'TimeField',
+            _a[FieldEnum.TIME_RANGE_FIELD] = 'TimeRangeField',
+            _a;
+    };
+    FieldEnum.AUTO_COMPLETE_FIELD = 'AutoCompleteField';
+    FieldEnum.BLANK_FIELD = 'BlankField';
+    FieldEnum.CHECKBOX_FIELD = 'CheckboxField';
+    FieldEnum.CHECKBOX_LIST_FIELD = 'CheckboxListField';
+    FieldEnum.CHECKBOX_TREE_FIELD = 'CheckboxTreeField';
+    FieldEnum.DATE_FIELD = 'DateField';
+    FieldEnum.DATE_RANGE_FIELD = 'DateRangeField';
+    FieldEnum.DATE_TIME_FIELD = 'DateTimeField';
+    FieldEnum.DATE_TIME_RANGE_FIELD = 'DateTimeRangeField';
+    FieldEnum.DROPDOWN_FIELD = 'DropDownField';
+    FieldEnum.EMAIL_FIELD = 'EmailField';
+    FieldEnum.FIELD = 'Field';
+    FieldEnum.FIELD_LIST = 'FieldList';
+    FieldEnum.FIELD_SET = 'FieldSet';
+    FieldEnum.FILE_FIELD = 'FileField';
+    FieldEnum.HTML_FIELD = 'HtmlField';
+    FieldEnum.IMAGE_FIELD = 'ImageField';
+    FieldEnum.INPUT_FIELD = 'InputField';
+    FieldEnum.MASK_FIELD = 'MaskField';
+    FieldEnum.NAV_FIELD = 'NavField';
+    FieldEnum.NUMBER_FIELD = 'NumberField';
+    FieldEnum.PASSWORD_FIELD = 'PasswordField';
+    FieldEnum.RADIO_FIELD = 'RadioField';
+    FieldEnum.RADIO_LIST_FIELD = 'RadioListField';
+    FieldEnum.RATE_FIELD = 'RateField';
+    FieldEnum.RE_CAPTCHA_FIELD = 'ReCaptchaField';
+    FieldEnum.SLIDER_FIELD = 'SliderField';
+    FieldEnum.SWITCHER_FIELD = 'SwitcherField';
+    FieldEnum.TEXT_FIELD = 'TextField';
+    FieldEnum.TIME_FIELD = 'TimeField';
+    FieldEnum.TIME_RANGE_FIELD = 'TimeRangeField';
+    return FieldEnum;
+}(Enum_1["default"]));
+exports["default"] = FieldEnum;

package/enums/index.d.ts

@@ -0,0 +1,3 @@
+import FieldEnum, { FieldEnumType } from './FieldEnum';
+export { FieldEnum };
+export type { FieldEnumType };

package/enums/index.js

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

package/hooks/index.d.ts

@@ -24,4 +24,5 @@ import useWeekGrid from '../ui/content/CalendarSystem/hooks/useWeekGrid';
 import useDisplayDate from '../ui/content/CalendarSystem/hooks/useDisplayDate';
 import useCalendarControls from '../ui/content/CalendarSystem/hooks/useCalendarControls';
 import useSaveCursorPosition from './useSaveCursorPosition';
-export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useTree, useMonthGrid, useWeekGrid, useDisplayDate, useCalendarControls, useSaveCursorPosition, };
+import useListField from './useListField';
+export { useAbsolutePositioning, useAddressBar, useApplication, useBem, useComponents, useDataProvider, useDataSelect, useDispatch, useFetch, useFile, useForm, useInitial, useLayout, useList, useModel, useScreen, useSelector, useSsr, useUniqueId, useTheme, useTree, useMonthGrid, useWeekGrid, useDisplayDate, useCalendarControls, useSaveCursorPosition, useListField, };

package/hooks/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekGrid = exports.useMonthGrid = exports.useTree = exports.useTheme = 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;
+exports.useListField = exports.useSaveCursorPosition = exports.useCalendarControls = exports.useDisplayDate = exports.useWeekGrid = exports.useMonthGrid = exports.useTree = exports.useTheme = 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"));
@@ -56,3 +56,5 @@ var useCalendarControls_1 = __importDefault(require("../ui/content/CalendarSyste
 exports.useCalendarControls = useCalendarControls_1["default"];
 var useSaveCursorPosition_1 = __importDefault(require("./useSaveCursorPosition"));
 exports.useSaveCursorPosition = useSaveCursorPosition_1["default"];
+var useListField_1 = __importDefault(require("./useListField"));
+exports.useListField = useListField_1["default"];

package/hooks/useDataSelect.js

@@ -128,6 +128,7 @@ function useDataSelect(config) {
                 else if (selectedIds.length === 1 && selectedIds[0] === id_1) {
                     setSelectedIdsInternal([]);
                 }
+                setIsFocused(false);
                 setIsOpened(false);
             }
         }

package/hooks/useListField.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { DataProviderItems, IDataProvider } from '@steroidsjs/core/hooks/useDataProvider';
+import { IInputParams } from '../ui/form/Field/fieldWrapper';
+interface IUseListFieldProps {
+    defaultItemView: string;
+    selectedIds: (PrimaryKey | any)[];
+    inputType: string;
+    input?: IInputParams;
+    items?: DataProviderItems;
+    dataProvider?: IDataProvider;
+    multiple?: boolean;
+    selectFirst?: boolean;
+    primaryKey?: string;
+    inputProps?: any;
+    disabled?: boolean;
+    onChange?: (...args: any[]) => any;
+    itemView?: CustomView;
+    itemViewProps?: CustomViewProps;
+}
+export default function useListField(props: IUseListFieldProps): {
+    selectedIds: PrimaryKey[];
+    items: {
+        [key: string]: unknown;
+        id: string | number | boolean;
+        label?: string;
+    }[];
+    inputProps: any;
+    onItemSelect: (id: any) => void;
+    setSelectedIds: (ids: PrimaryKey | PrimaryKey[], skipToggle?: boolean) => void;
+    renderItem: (itemProps: any) => JSX.Element;
+};
+export {};

package/hooks/useListField.js

@@ -0,0 +1,103 @@
+"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;
+    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];
+}));
+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_1 = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var react_use_1 = require("react-use");
+function useListField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
+    // Data provider
+    var items = (0, hooks_1.useDataProvider)({
+        items: props.items,
+        initialSelectedIds: inputSelectedIds,
+        dataProvider: props.dataProvider
+    }).items;
+    // Data select
+    var _a = (0, hooks_1.useDataSelect)({
+        multiple: props.multiple,
+        selectedIds: inputSelectedIds,
+        selectFirst: props.selectFirst,
+        primaryKey: props.primaryKey,
+        items: items,
+        inputValue: props.input.value
+    }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
+    var onItemSelect = (0, react_1.useCallback)(function (id) {
+        setSelectedIds(id);
+    }, [setSelectedIds]);
+    var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { type: props.inputType, name: props.input.name, disabled: props.disabled, onChange: function (value) { return props.input.onChange(value); } })); }, [props.disabled, props.input, props.inputProps, props.inputType]);
+    // Sync with form
+    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
+    (0, react_1.useEffect)(function () {
+        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
+            var valueToSave = props.multiple ? selectedIds : selectedIds[0];
+            props.input.onChange.call(null, valueToSave);
+            if (props.onChange) {
+                props.onChange.call(null, valueToSave);
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.input.onChange, selectedIds]);
+    var onReset = (0, react_1.useCallback)(function () {
+        setSelectedIds([]);
+    }, [setSelectedIds]);
+    // Reset selected ids on form reset
+    var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
+    (0, 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]);
+    var renderItem = (0, react_1.useCallback)(function (itemProps) {
+        var defaultItemView = props.defaultItemView;
+        var ItemFieldView = itemProps.view || props.itemView || components.ui.getView(defaultItemView);
+        return (react_1["default"].createElement(ItemFieldView, __assign({}, itemProps, props.itemViewProps, { type: props.inputType })));
+    }, [components.ui, props.defaultItemView, props.inputType, props.itemView, props.itemViewProps]);
+    return {
+        selectedIds: selectedIds,
+        items: items,
+        inputProps: inputProps,
+        onItemSelect: onItemSelect,
+        setSelectedIds: setSelectedIds,
+        renderItem: renderItem
+    };
+}
+exports["default"] = useListField;

package/package.json

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

package/ui/form/AutoCompleteField/AutoCompleteField.js

@@ -19,6 +19,7 @@ var react_use_1 = require("react-use");
 var useComponents_1 = __importDefault(require("../../../hooks/useComponents"));
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var enums_1 = require("../../../enums");
 var getCategories = function (items) {
     if (!items) {
         return [];
@@ -131,4 +132,4 @@ AutoCompleteField.defaultProps = {
     required: false,
     showClear: false
 };
-exports["default"] = (0, fieldWrapper_1["default"])('AutoCompleteField', AutoCompleteField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.AUTO_COMPLETE_FIELD, AutoCompleteField);

package/ui/form/BlankField/BlankField.js

@@ -28,8 +28,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var enums_1 = require("../../../enums");
 function BlankField(props) {
     var _a;
     return React.createElement("span", null, props.text || props.children || ((_a = props.input) === null || _a === void 0 ? void 0 : _a.value));
 }
-exports["default"] = (0, fieldWrapper_1["default"])('BlankField', BlankField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.BLANK_FIELD, BlankField);

package/ui/form/Button/Button.js

@@ -84,9 +84,18 @@ function Button(props) {
             }
         }
         if (props.toRoute) {
-            //TODO remove @ts-ignore
-            //@ts-ignore
-            dispatch((0, router_1.goToRoute)(props.toRoute, props.toRouteParams));
+            if (props.target) {
+                //TODO remove @ts-ignore
+                // @ts-ignore
+                var filteredParams = (0, router_1.filterParamsForPath)(routePath, props.toRouteParams);
+                var routeUrl = (0, router_2.buildUrl)(routePath, filteredParams);
+                window.open(routeUrl, props.target);
+            }
+            else {
+                //TODO remove @ts-ignore
+                // @ts-ignore
+                dispatch((0, router_1.goToRoute)(props.toRoute, props.toRouteParams));
+            }
         }
         if (props.onClick) {
             var result = props.onClick(e);
@@ -124,7 +133,7 @@ function Button(props) {
                 });
             }
         }
-    }, [dispatch, props, tag]);
+    }, [dispatch, props, routePath, tag]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         badge: badge,
         isFailed: isFailed,

package/ui/form/CheckboxField/CheckboxField.d.ts

@@ -24,11 +24,11 @@ export interface ICheckboxFieldProps extends IFieldWrapperInputProps, IUiCompone
 }
 export interface ICheckboxFieldViewProps extends ICheckboxFieldProps, IFieldWrapperOutputProps {
     inputProps: {
-        name: string;
-        type: string;
-        checked: boolean;
-        onChange: (value: string | React.ChangeEvent) => void;
-        disabled: boolean;
+        name?: string;
+        type?: string;
+        checked?: boolean;
+        onChange?: (value: string | React.ChangeEvent) => void;
+        disabled?: boolean;
         required?: boolean;
     };
 }

package/ui/form/CheckboxField/CheckboxField.js

@@ -40,6 +40,7 @@ exports.__esModule = true;
 var react_1 = __importStar(require("react"));
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var enums_1 = require("../../../enums");
 function CheckboxField(props) {
     var _a, _b;
     var components = (0, hooks_1.useComponents)();
@@ -52,18 +53,23 @@ function CheckboxField(props) {
     }, [props]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a, _b;
-        return (__assign({ name: (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, type: 'checkbox', checked: !!((_b = props.input) === null || _b === void 0 ? void 0 : _b.value), onChange: onChangeHandler, disabled: props.disabled, required: props.required }, props.inputProps));
-    }, [onChangeHandler, props.disabled, (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, (_b = props.input) === null || _b === void 0 ? void 0 : _b.value, props.inputProps, props.required]);
+        return (__assign({ name: (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, type: props.multiply ? 'checkbox' : 'radio', checked: !!((_b = props.input) === null || _b === void 0 ? void 0 : _b.value), onChange: onChangeHandler, disabled: props.disabled, required: props.required }, props.inputProps));
+    }, [onChangeHandler, props.disabled, (_a = props.input) === null || _a === void 0 ? void 0 : _a.name, (_b = props.input) === null || _b === void 0 ? void 0 : _b.value, props.inputProps, props.multiply, props.required]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         inputProps: inputProps,
         color: props.color,
         size: props.size,
         errors: props.errors,
+        checked: props.checked,
         className: props.className,
+        disabled: props.disabled,
         style: props.style,
         id: props.id,
-        label: props.label
-    }); }, [inputProps, props.className, props.color, props.errors, props.id, props.label, props.size, props.style]);
+        label: props.label,
+        onChange: props.onChange,
+        required: props.required
+    }); }, [inputProps, props.checked, props.className, props.color, props.disabled,
+        props.errors, props.id, props.label, props.onChange, props.required, props.size, props.style]);
     return components.ui.renderView(props.view || 'form.CheckboxFieldView', viewProps);
 }
 CheckboxField.defaultProps = {
@@ -72,4 +78,4 @@ CheckboxField.defaultProps = {
     className: '',
     inputProps: {}
 };
-exports["default"] = (0, fieldWrapper_1["default"])('CheckboxField', CheckboxField, { label: false });
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.CHECKBOX_FIELD, CheckboxField, { label: false });

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -84,8 +84,9 @@ export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps, I
     onItemSelect: (id: PrimaryKey | any) => void;
     orientation?: Orientation;
     disabled?: boolean;
-    renderCheckbox: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
+    renderItem: (checkboxProps: ICheckboxFieldViewProps) => JSX.Element;
     size?: Size;
+    className?: string;
 }
 declare const _default: import("../../../ui/form/Field/fieldWrapper").FieldWrapperComponent<ICheckboxListFieldProps>;
 export default _default;

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -1,118 +1,41 @@
 "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;
-    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];
-}));
-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_1 = __importStar(require("react"));
-var react_use_1 = require("react-use");
-var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
+var enums_1 = require("../../../enums");
 function CheckboxListField(props) {
     var components = (0, hooks_1.useComponents)();
-    var inputSelectedIds = (0, react_1.useMemo)(function () { return props.selectedIds || [].concat(props.input.value || []); }, [props.input.value, props.selectedIds]);
-    // Data Provider
-    var items = (0, hooks_1.useDataProvider)({
+    var _a = (0, hooks_1.useListField)({
+        inputType: props.multiple ? 'checkbox' : 'radio',
+        defaultItemView: props.multiple ? 'form.CheckboxFieldView' : 'form.RadioFieldView',
+        selectedIds: props.selectedIds,
+        input: props.input,
         items: props.items,
-        initialSelectedIds: inputSelectedIds,
-        dataProvider: props.dataProvider
-    }).items;
-    // Data select
-    var _a = (0, hooks_1.useDataSelect)({
-        selectedIds: inputSelectedIds,
+        dataProvider: props.dataProvider,
         multiple: props.multiple,
-        primaryKey: props.primaryKey,
         selectFirst: props.selectFirst,
-        items: items,
-        inputValue: props.input.value
-    }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
-    var onItemSelect = (0, react_1.useCallback)(function (id) {
-        setSelectedIds(id);
-    }, [setSelectedIds]);
-    var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { type: 'checkbox', name: props.input.name, disabled: props.disabled })); }, [props.disabled, props.input, props.inputProps]);
-    // Sync with form
-    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
-    (0, react_1.useEffect)(function () {
-        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
-            props.input.onChange.call(null, selectedIds);
-            if (props.onChange) {
-                props.onChange.call(null, selectedIds);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.input.onChange, selectedIds]);
-    var onReset = (0, react_1.useCallback)(function () {
-        setSelectedIds([]);
-    }, [setSelectedIds]);
-    // Reset selected ids on form reset
-    var prevInputValue = (0, react_use_1.usePrevious)(props.input.value);
-    (0, 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]);
-    var CheckboxFieldView = props.itemView || components.ui.getView('form.CheckboxFieldView');
-    var renderCheckbox = (0, react_1.useCallback)(function (checkboxProps) { return (react_1["default"].createElement(CheckboxFieldView, __assign({}, checkboxProps, props.itemViewProps))); }, [CheckboxFieldView, props.itemViewProps]);
+        primaryKey: props.primaryKey,
+        inputProps: props.inputProps,
+        disabled: props.disabled
+    }), selectedIds = _a.selectedIds, items = _a.items, inputProps = _a.inputProps, onItemSelect = _a.onItemSelect, renderItem = _a.renderItem;
     var viewProps = (0, react_1.useMemo)(function () { return ({
         items: items,
         inputProps: inputProps,
         onItemSelect: onItemSelect,
         selectedIds: selectedIds,
-        renderCheckbox: renderCheckbox,
+        renderItem: renderItem,
         orientation: props.orientation,
         size: props.size,
         disabled: props.disabled,
         className: props.className,
         style: props.style,
         viewProps: props.viewProps
-    }); }, [
-        inputProps,
-        items,
-        onItemSelect,
-        props.className,
-        props.disabled,
-        props.orientation,
-        props.size,
-        props.style,
-        props.viewProps,
-        renderCheckbox,
-        selectedIds,
-    ]);
+    }); }, [inputProps, items, onItemSelect, props.className, props.disabled,
+        props.orientation, props.size, props.style, props.viewProps, renderItem, selectedIds]);
     return components.ui.renderView(props.view || 'form.CheckboxListFieldView', viewProps);
 }
 CheckboxListField.defaultProps = {
@@ -122,4 +45,4 @@ CheckboxListField.defaultProps = {
     multiple: true,
     orientation: 'vertical'
 };
-exports["default"] = (0, fieldWrapper_1["default"])('CheckboxListField', CheckboxListField);
+exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.CHECKBOX_LIST_FIELD, CheckboxListField);