@steroidsjs/core 2.1.0-beta.30 → 2.1.0-beta.31

package/hooks/useDataProvider.js

@@ -137,7 +137,8 @@ function useDataProvider(config) {
                 delayTimerRef.current = setTimeout(fetchRemote, autoComplete.delay);
             }
         }
-    }, [autoComplete, components.api, components.http, config.autoFetch, config.dataProvider, config.query, dataProvider, dataProvider.action, dataProvider.onSearch, prevQuery, sourceItems]);
+    }, [autoComplete, components.api, components.http, config.autoFetch, config.dataProvider,
+        config.query, dataProvider, dataProvider.action, dataProvider.onSearch, prevQuery, sourceItems]);
     return {
         sourceItems: sourceItems,
         items: items,

package/hooks/useDataSelect.js

@@ -51,7 +51,7 @@ function useDataSelect(config) {
             if (!config.multiple && ids.length > 1) {
                 ids = [ids[0]];
             }
-            setSelectedIdsInternal(ids);
+            setSelectedIdsInternal(ids.sort());
         }
         else {
             var id_1 = ids;
@@ -61,11 +61,11 @@ function useDataSelect(config) {
             else if (config.multiple) {
                 if (selectedIds.indexOf(id_1) !== -1) {
                     if (!skipToggle) {
-                        setSelectedIdsInternal(selectedIds.filter(function (itemValue) { return itemValue !== id_1; }));
+                        setSelectedIdsInternal(selectedIds.filter(function (itemValue) { return itemValue !== id_1; }).sort());
                     }
                 }
                 else {
-                    setSelectedIdsInternal(__spreadArray(__spreadArray([], selectedIds), [id_1]));
+                    setSelectedIdsInternal(__spreadArray(__spreadArray([], selectedIds), [id_1]).sort());
                 }
             }
             else {
@@ -119,16 +119,19 @@ function useDataSelect(config) {
                 newSelectedIds.push(selectedItem.id);
             }
         });
-        if (!isEqual_1["default"](prevConfigSelectedIds, newSelectedIds) && newSelectedIds.length !== 0) {
+        if (!isEqual_1["default"](prevConfigSelectedIds.sort(), newSelectedIds.sort())
+            && !isEqual_1["default"](selectedIds.sort(), newSelectedIds.sort()) && newSelectedIds.length !== 0) {
             setSelectedIdsInternal(newSelectedIds);
         }
-    }, [config.items, config.selectedIds, primaryKey, prevConfigSelectedIds, selectedItems, config.sourceItems]);
+    }, [config.items, config.selectedIds, primaryKey, prevConfigSelectedIds,
+        selectedItems, config.sourceItems, selectedIds]);
     // Global key down handler for navigate on items
     // Support keys:
     // - tab
     // - esc
     // - enter
     // - up/down arrows
+    // - space
     var onKeyDown = react_1.useCallback(function (e) {
         // Skip no active
         if (!isFocused && !isOpened) {
@@ -138,9 +141,8 @@ function useDataSelect(config) {
         if ([9, 27].includes(e.which)) {
             e.preventDefault();
             setIsOpened(false);
-            return;
         }
-        // Keys: enter
+        // Keys: enter (select and close)
         if (e.which === 13 && isOpened) {
             e.preventDefault();
             if (hoveredId) {
@@ -155,6 +157,15 @@ function useDataSelect(config) {
                 // Select first result
                 setSelectedIds(config.items[0], true);
             }
+            setIsOpened(false);
+        }
+        // Keys: space (toggle select)
+        if (e.which === 32 && isOpened) {
+            e.preventDefault();
+            if (hoveredId) {
+                // Select hovered
+                setSelectedIds(hoveredId);
+            }
         }
         // Keys: arrow up, arrow down
         if ([38, 40].includes(e.which)) {

package/package.json

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

package/ui/form/DateField/useDateTime.js

@@ -18,11 +18,11 @@ function useDateTime(props) {
     // Handler for calendar and time picker changes
     var onDateSelect = react_1.useCallback(function (date) {
         var result = date + props.dateTimeSeparator + (timeValue || '00:00');
-        props.input.onChange.call(null, calendar_1.convertDate(result, props.valueFormat, props.valueFormat, true));
+        props.input.onChange.call(null, calendar_1.convertDate(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, true));
     }, [props.dateTimeSeparator, props.input.onChange, props.valueFormat, timeValue]);
     var onTimeSelect = react_1.useCallback(function (time) {
         var result = (dateValue || moment_1["default"]().format(dateValueFormat)) + props.dateTimeSeparator + time;
-        props.input.onChange.call(null, calendar_1.convertDate(result, props.valueFormat, props.valueFormat, true));
+        props.input.onChange.call(null, calendar_1.convertDate(result, [props.valueFormat, 'YYYY-MM-DD HH:mm'], props.valueFormat, true));
     }, [dateValue, dateValueFormat, props.dateTimeSeparator, props.input.onChange, props.valueFormat]);
     return {
         dateValue: dateValue,

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

@@ -63,7 +63,7 @@ export interface IDropDownFieldViewProps extends Omit<IDropDownFieldProps, 'item
     onClose: () => void;
     placeholder: string;
     isAutoComplete?: boolean;
-    searchAutoFocus?: any;
+    isSearchAutoFocus?: boolean;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDropDownFieldProps>;
 export default _default;

package/ui/form/DropDownField/DropDownField.js

@@ -88,13 +88,14 @@ function DropDownField(props) {
             }
         }
     }, [prevSelectedIds, props.input.onChange, props.multiple, props.onChange, selectedIds]);
-    // form reset
-    react_1.useEffect(function () {
-        //if form reset
-        if (props.input.value === undefined && selectedIds.length > 0) {
+    // 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, props.input.value, selectedIds.length]);
+    }, [onReset, prevInputValue, props.input.value, selectedIds.length]);
     return components.ui.renderView(props.view || 'form.DropDownFieldView', __assign(__assign({}, props), { isAutoComplete: isAutoComplete,
         items: items,
         hoveredId: hoveredId,
@@ -120,6 +121,7 @@ DropDownField.defaultProps = {
     className: '',
     autoComplete: false,
     showReset: false,
-    multiple: false
+    multiple: false,
+    isSearchAutoFocus: true
 };
 exports["default"] = fieldWrapper_1["default"]('DropDownField', DropDownField);

package/ui/form/ImageField/ImageField.js

@@ -55,7 +55,7 @@ function ImageField(props) {
         var data = null;
         try {
             data = JSON.parse(text);
-            dispatch(modal_1.openModal(ImageFieldModalVIew, __assign(__assign({ modalId: modalId }, props.modalProps), { crop: __assign(__assign({}, props.crop), { onSubmit: function (crop, imageId) { return setCroppedImage(__assign(__assign({}, crop), { id: imageId })); } }), image: first_1["default"](data) })));
+            dispatch(modal_1.openModal(ImageFieldModalVIew, __assign(__assign({ modalId: modalId }, props.modalProps), { crop: __assign(__assign({}, props.crop), { onSubmit: function (crop, imageId) { return setCroppedImage(__assign(__assign({}, crop), { id: imageId })); } }), image: first_1["default"](data) || data })));
             // eslint-disable-next-line no-empty
         }
         catch (e) { }
@@ -63,7 +63,7 @@ function ImageField(props) {
     }, [ImageFieldModalVIew, modalId, dispatch, props.crop, props.modalProps]);
     var _b = useFile_1["default"](__assign(__assign({}, props), { multiple: false, imagesOnly: true, uploader: __assign({ uploaderConfigs: {
                 xhr: {
-                    responseParser: responseParser
+                    responseParser: props.crop ? responseParser : null
                 }
             } }, props.uploader) })), files = _b.files, onBrowse = _b.onBrowse, onRemove = _b.onRemove, onAdd = _b.onAdd;
     // Fetch cropped image

package/ui/format/EnumFormatter/EnumFormatter.js

@@ -28,7 +28,7 @@ var getLabel = function (items, id) {
 exports.getLabel = getLabel;
 function EnumFormatter(props) {
     var components = hooks_1.useComponents();
-    var items = hooks_1.useDataProvider({ items: props.items });
+    var items = hooks_1.useDataProvider({ items: props.items }).items;
     return components.ui.renderView(props.view || 'format.DefaultFormatterView', {
         value: exports.getLabel(items, props.value)
     });