iglooform 2.4.30 → 2.4.31

package/es/filter/index.d.ts

@@ -46,6 +46,7 @@ export interface IFilterProps {
     searchWithFilter?: boolean;
     inputOnly?: boolean;
     beforeOpenFilter?: any;
+    resetCallBack?: any;
 }
 declare const FilterComponent: (props: IFilterProps) => JSX.Element;
 export default FilterComponent;

package/es/filter/index.js

@@ -356,7 +356,8 @@ var FilterComponent = function FilterComponent(props) {
       searchInputDefault = props.searchInputDefault,
       initValue = props.initValue,
       inputOnly = props.inputOnly,
-      beforeOpenFilter = props.beforeOpenFilter;
+      beforeOpenFilter = props.beforeOpenFilter,
+      resetCallBack = props.resetCallBack;
   var filterTitle = props.filterTitle,
       _props$filterItems = props.filterItems,
       filterItems = _props$filterItems === void 0 ? [] : _props$filterItems; // id controller
@@ -710,6 +711,7 @@ var FilterComponent = function FilterComponent(props) {
         },
         children: [_jsx("span", {
           onClick: function onClick() {
+            typeof resetCallBack === 'function' && resetCallBack(_objectSpread({}, defaultOptions));
             setTimeout(function () {
               setTimeRangeType(-1);
               dispatchOptionsChange({
@@ -1050,9 +1052,13 @@ var FilterComponent = function FilterComponent(props) {
       visible: dropVisible,
       onVisibleChange: function onVisibleChange(visible) {
         setDropVisible(visible);
+
+        if (visible) {
+          typeof beforeOpenFilter === 'function' && beforeOpenFilter(_objectSpread({}, confirmed));
+        }
+
         setTimeout(function () {
           if (dropVisible) {
-            typeof beforeOpenFilter === 'function' && beforeOpenFilter(_objectSpread({}, confirmed));
             setTimeRangeType(confirmedTimeRange);
             dispatchOptionsChange({
               type: 'default',

package/es/form/element/index.js

@@ -238,11 +238,7 @@ var Element = function Element(_ref) {
         hideWhenEdit = elementProps.hideWhenEdit,
         otherElementProps = _objectWithoutProperties(elementProps, _excluded2);
 
-    if (preview && hideWhenPreview) {
-      return null;
-    }
-
-    return hideWhenEdit || !display ? null : _jsx(_Col, _objectSpread(_objectSpread({}, restColProps), {}, {
+    var component = _jsx(_Col, _objectSpread(_objectSpread({}, restColProps), {}, {
       className: "igloo-form-item",
       children: _jsx("div", {
         style: {
@@ -261,6 +257,13 @@ var Element = function Element(_ref) {
         }))
       })
     }));
+
+    if (preview) {
+      if (hideWhenPreview) return null;
+      return component;
+    }
+
+    return hideWhenEdit || !display ? null : component;
   }
 
   if (!display) return null;

package/es/form/index.js

@@ -60,7 +60,8 @@ var IglooForm = function IglooForm(props, ref) {
   } : _props$getScrollConta,
       _props$onFirstModifie = props.onFirstModified,
       onFirstModified = _props$onFirstModifie === void 0 ? function () {} : _props$onFirstModifie,
-      uploadApi = props.uploadApi;
+      uploadApi = props.uploadApi,
+      selectDatasourceApi = props.selectDatasourceApi;
 
   var _Form$useForm = _Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -239,7 +240,8 @@ var IglooForm = function IglooForm(props, ref) {
         showSubmitButton: showSubmitButton,
         getScrollContainer: getScrollContainer,
         registerDependencies: registerDependencies,
-        uploadApi: uploadApi
+        uploadApi: uploadApi,
+        selectDatasourceApi: selectDatasourceApi
       }, locales),
       children: _jsxs(_Form, {
         form: form,

package/es/form-context.d.ts

@@ -16,5 +16,6 @@ declare const _default: React.Context<{
     getScrollContainer: () => HTMLElement | Window | null;
     registerDependencies: (name: FormItemName | FormItemName[], updater: Function) => void;
     uploadApi?: string | undefined;
+    selectDatasourceApi?: string | undefined;
 }>;
 export default _default;

package/es/free-form/addable-section/index.js

@@ -201,7 +201,7 @@ var AddableSection = function AddableSection(props) {
       return children.map(function (c, index) {
         var _c$type;
 
-        if (['Igloo_Free_Form_Item', 'Igloo_Free_Form_Section', 'Igloo_Free_Form_AddabledSection'].includes(c === null || c === void 0 ? void 0 : (_c$type = c.type) === null || _c$type === void 0 ? void 0 : _c$type.displayName)) {
+        if (['Igloo_Free_Form_Item', 'Igloo_Free_Form_Section', 'Igloo_Free_Form_AddableSection'].includes(c === null || c === void 0 ? void 0 : (_c$type = c.type) === null || _c$type === void 0 ? void 0 : _c$type.displayName)) {
           return /*#__PURE__*/cloneElement(c, _objectSpread(_objectSpread({
             key: index
           }, c.props), {}, {

package/es/free-form/index.js

@@ -55,7 +55,8 @@ var FreeForm = function FreeForm(props) {
   } : _props$getScrollConta,
       _props$onFirstModifie = props.onFirstModified,
       onFirstModified = _props$onFirstModifie === void 0 ? function () {} : _props$onFirstModifie,
-      uploadApi = props.uploadApi;
+      uploadApi = props.uploadApi,
+      selectDatasourceApi = props.selectDatasourceApi;
 
   var _Form$useForm = _Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -196,7 +197,8 @@ var FreeForm = function FreeForm(props) {
         showSubmitButton: showSubmitButton,
         getScrollContainer: getScrollContainer,
         registerDependencies: registerDependencies,
-        uploadApi: uploadApi
+        uploadApi: uploadApi,
+        selectDatasourceApi: selectDatasourceApi
       }, locales),
       children: _jsx(_Form, {
         form: form,

package/es/select/attached-select.d.ts

@@ -2,11 +2,19 @@ import { SelectProps, SelectValue } from 'antd/es/select';
 import { FC, IglooComponentProps } from '../types';
 import { FormInstance } from 'antd/es/form';
 import './style';
+import { NamePath } from 'antd/es/form/interface';
 export declare const Option: import("rc-select/lib/Option").OptionFC, OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
 declare type Props = SelectProps<SelectValue> & IglooComponentProps & {
     getOptions?: (form: FormInstance) => any[];
     multiple?: boolean;
     clearWhenOptionsUpdated?: boolean;
+    optionGroups?: {
+        parentKey: string;
+        options: Props['options'];
+    }[];
+    datasourceKey?: string;
+    datasourceApi?: string;
+    dependField?: NamePath;
 };
 declare type OptionType = typeof Option;
 declare type OptGroupType = typeof OptGroup;
@@ -14,5 +22,5 @@ interface IglooSelectType extends FC<Props> {
     Option: OptionType;
     OptGroup: OptGroupType;
 }
-declare const IglooSelect: IglooSelectType;
-export default IglooSelect;
+declare const AttachedSelect: IglooSelectType;
+export default AttachedSelect;

package/es/select/attached-select.js

@@ -1,6 +1,13 @@
 import "antd/es/select/style";
 import _Select from "antd/es/select";
-var _excluded = ["options", "getOptions", "value", "className", "placeholder", "onDropdownVisibleChange", "children", "showSearch", "filterOption", "optionFilterProp", "multiple", "clearWhenOptionsUpdated"];
+var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options"],
+    _excluded2 = ["options", "optionGroups", "getOptions", "datasourceKey", "dependField", "children", "clearWhenOptionsUpdated"];
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -40,28 +47,27 @@ import { ArrowDownOutlined, ArrowUpOutlined, SearchOutlined } from 'iglooicon';
 import classnames from 'classnames';
 import Checkbox from '../checkbox';
 import LocaleContext from '../locale/locale-context';
+import FormContext from '../form-context';
 import Button from '../button';
 import Input from '../input';
 import './style';
+import invariant from 'invariant';
 var Option = _Select.Option,
     OptGroup = _Select.OptGroup;
 export { Option, OptGroup };
 
 var IglooSelect = function IglooSelect(_ref) {
-  var optionsProp = _ref.options,
-      getOptionsProp = _ref.getOptions,
-      valueProp = _ref.value,
+  var valueProp = _ref.value,
       className = _ref.className,
       placeholder = _ref.placeholder,
       _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
       onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
-      children = _ref.children,
       showSearch = _ref.showSearch,
       filterOption = _ref.filterOption,
       optionFilterProp = _ref.optionFilterProp,
       multiple = _ref.multiple,
-      _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
-      clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = useContext(LocaleContext),
@@ -77,86 +83,25 @@ var IglooSelect = function IglooSelect(_ref) {
       selectedOptions = _useState4[0],
       setSelectedOptions = _useState4[1];
 
+  var _useState5 = useState(options),
+      _useState6 = _slicedToArray(_useState5, 2),
+      displayOptions = _useState6[0],
+      setDisplay = _useState6[1];
+
   useEffect(function () {
     typeof rest.onChange === 'function' && valueProp !== selected && rest.onChange(selected, selectedOptions);
   }, [selected]);
   useEffect(function () {
     setSelected(valueProp);
   }, [valueProp]);
-
-  var getOptions = function getOptions() {
-    var getFormInstance = rest.getFormInstance;
-    var form = typeof getFormInstance === 'function' && getFormInstance();
-
-    if (!form) {
-      if (!children || typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') return [];
-      return Array.isArray(children) ? children.map(function (child) {
-        return {
-          label: child.props.children,
-          value: child.props.value
-        };
-      }) : [{
-        label: children.props.children,
-        value: children.props.value
-      }];
-    }
-
-    var options = typeof getOptionsProp === 'function' && getOptionsProp(form);
-    return options || [];
-  };
-
-  var options = optionsProp || getOptions();
-
-  var _useState5 = useState(options),
-      _useState6 = _slicedToArray(_useState5, 2),
-      originOptions = _useState6[0],
-      setOriginOptions = _useState6[1];
-
-  var _useState7 = useState(options),
-      _useState8 = _slicedToArray(_useState7, 2),
-      displayOptions = _useState8[0],
-      setDisplay = _useState8[1];
-
   useEffect(function () {
-    var updateOptions = options.length !== originOptions.length;
-
-    if (!updateOptions) {
-      for (var i = 0; i < options.length; i++) {
-        var newOption = options[i];
-        var originOption = originOptions[i];
-
-        if (newOption.label !== originOption.label || newOption.value !== originOption.value) {
-          updateOptions = true;
-          break;
-        }
-      }
-    }
-
-    if (updateOptions) {
-      setOriginOptions(options);
-      setDisplay(options);
-      var setFieldValue = rest.setFieldValue;
-
-      if (clearWhenOptionsUpdated) {
-        typeof setFieldValue === 'function' && setFieldValue();
-      }
-    }
+    setDisplay(options);
   }, [options]);
-  useEffect(function () {
-    var setFieldValue = rest.setFieldValue;
-    var foundValue = originOptions.find(function (option) {
-      return Array.isArray(valueProp) ? valueProp.includes(option.value) : option.value === valueProp;
-    });
 
-    if (!foundValue) {
-      typeof setFieldValue === 'function' && setFieldValue();
-    }
-  }, [valueProp, originOptions]);
-
-  var _useState9 = useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      dropVisible = _useState10[0],
-      setDropVisible = _useState10[1];
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      dropVisible = _useState8[0],
+      setDropVisible = _useState8[1];
 
   var handleDropDownVisibleChange = function handleDropDownVisibleChange(open) {
     typeof onDropdownVisibleChange === 'function' && onDropdownVisibleChange(open);
@@ -165,7 +110,7 @@ var IglooSelect = function IglooSelect(_ref) {
 
   var handleSearch = function handleSearch(e) {
     var value = e.target.value;
-    var filteredOptions = originOptions.filter(function (option) {
+    var filteredOptions = options.filter(function (option) {
       var _option$label, _option$label$toStrin;
 
       return Boolean(option === null || option === void 0 ? void 0 : (_option$label = option.label) === null || _option$label === void 0 ? void 0 : (_option$label$toStrin = _option$label.toString()) === null || _option$label$toStrin === void 0 ? void 0 : _option$label$toStrin.includes(value));
@@ -347,10 +292,168 @@ var IglooSelect = function IglooSelect(_ref) {
   });
 };
 
-IglooSelect.formItemPropsHandler = function (config) {
+var AttachedSelect = function AttachedSelect(_ref11) {
+  var options = _ref11.options,
+      optionGroups = _ref11.optionGroups,
+      getOptions = _ref11.getOptions,
+      datasourceKey = _ref11.datasourceKey,
+      dependField = _ref11.dependField,
+      children = _ref11.children,
+      _ref11$clearWhenOptio = _ref11.clearWhenOptionsUpdated,
+      clearWhenOptionsUpdated = _ref11$clearWhenOptio === void 0 ? false : _ref11$clearWhenOptio,
+      rest = _objectWithoutProperties(_ref11, _excluded2);
+
+  var _useState9 = useState(options || []),
+      _useState10 = _slicedToArray(_useState9, 2),
+      _options = _useState10[0],
+      setOptions = _useState10[1];
+
+  var _useContext2 = useContext(FormContext),
+      selectDatasourceApi = _useContext2.selectDatasourceApi;
+
+  var getFormInstance = rest.getFormInstance;
+  var form = typeof getFormInstance === 'function' && getFormInstance();
+  var dependFieldValue = form && dependField && form.getFieldValue(dependField);
+  var optionsFromGetOptions = typeof getOptions === 'function' && form && getOptions(form);
+  invariant(datasourceKey && selectDatasourceApi || !datasourceKey, 'Please provide selectDatasourceApi in Form props');
+  useEffect(function () {
+    var calcOptions = /*#__PURE__*/function () {
+      var _ref12 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+        var group, query, api, rst, _yield$rst$json, data;
+
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!Array.isArray(options)) {
+                  _context.next = 2;
+                  break;
+                }
+
+                return _context.abrupt("return", options);
+
+              case 2:
+                if (!(Array.isArray(children) || _typeof(children) === 'object')) {
+                  _context.next = 4;
+                  break;
+                }
+
+                return _context.abrupt("return", Array.isArray(children) ? children.map(function (child) {
+                  return {
+                    label: child.props.children,
+                    value: child.props.value
+                  };
+                }) : [{
+                  label: children.props.children,
+                  value: children.props.value
+                }]);
+
+              case 4:
+                if (!Array.isArray(optionsFromGetOptions)) {
+                  _context.next = 6;
+                  break;
+                }
+
+                return _context.abrupt("return", optionsFromGetOptions);
+
+              case 6:
+                if (!optionGroups) {
+                  _context.next = 10;
+                  break;
+                }
+
+                if (!dependFieldValue) {
+                  _context.next = 10;
+                  break;
+                }
+
+                group = optionGroups.find(function (_ref13) {
+                  var parentKey = _ref13.parentKey;
+                  return Array.isArray(dependFieldValue) ? dependFieldValue.includes(parentKey) : parentKey === dependFieldValue;
+                });
+                return _context.abrupt("return", (group === null || group === void 0 ? void 0 : group.options) || []);
+
+              case 10:
+                if (!(selectDatasourceApi && datasourceKey)) {
+                  _context.next = 27;
+                  break;
+                }
+
+                query = Array.isArray(dependFieldValue) ? dependFieldValue.map(function (v) {
+                  return "parent=".concat(v);
+                }).join('&') : dependFieldValue ? "parent=".concat(dependFieldValue) : '';
+                api = "".concat(selectDatasourceApi, "/").concat(datasourceKey);
+                _context.prev = 13;
+                _context.next = 16;
+                return fetch(query ? "".concat(api, "?").concat(query) : api);
+
+              case 16:
+                rst = _context.sent;
+                _context.next = 19;
+                return rst.json();
+
+              case 19:
+                _yield$rst$json = _context.sent;
+                data = _yield$rst$json.data;
+                return _context.abrupt("return", data || []);
+
+              case 24:
+                _context.prev = 24;
+                _context.t0 = _context["catch"](13);
+                return _context.abrupt("return", []);
+
+              case 27:
+                return _context.abrupt("return", []);
+
+              case 28:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[13, 24]]);
+      }));
+
+      return function calcOptions() {
+        return _ref12.apply(this, arguments);
+      };
+    }();
+
+    var compareOptions = function compareOptions(newOptions) {
+      var updateOptions = _options.length !== newOptions.length;
+
+      if (!updateOptions) {
+        for (var i = 0; i < _options.length; i++) {
+          var newOption = _options[i];
+          var originOption = newOptions[i];
+
+          if (newOption.label !== originOption.label || newOption.value !== originOption.value) {
+            updateOptions = true;
+            break;
+          }
+        }
+      }
+
+      if (updateOptions) {
+        setOptions(newOptions);
+        var setFieldValue = rest.setFieldValue;
+
+        if (clearWhenOptionsUpdated) {
+          typeof setFieldValue === 'function' && setFieldValue();
+        }
+      }
+    };
+
+    calcOptions().then(compareOptions);
+  }, [options, optionGroups, dependFieldValue, optionsFromGetOptions]);
+  return _jsx(IglooSelect, _objectSpread({
+    options: _options
+  }, rest));
+};
+
+AttachedSelect.formItemPropsHandler = function (config) {
   return {};
 };
 
-IglooSelect.Option = Option;
-IglooSelect.OptGroup = OptGroup;
-export default IglooSelect;
+AttachedSelect.Option = Option;
+AttachedSelect.OptGroup = OptGroup;
+export default AttachedSelect;

package/es/types.d.ts

@@ -3,6 +3,7 @@
 import { FormItemProps, FormInstance } from 'antd/es/form';
 import { NamePath } from 'rc-field-form/lib/interface';
 import { CheckboxOptionType } from 'antd/es/checkbox';
+import { SelectProps } from 'antd/es/select';
 export declare type FormItemName = NamePath;
 export interface FormBasicConfig {
     className?: string;
@@ -25,6 +26,7 @@ export interface FormBasicConfig {
     getScrollContainer?: () => HTMLElement | null;
     onFirstModified?: () => any;
     uploadApi?: string;
+    selectDatasourceApi?: string;
 }
 export declare type FormItemAssert = {
     field: NamePath;
@@ -79,7 +81,7 @@ export interface FormItemExtraConfig extends FormItemProps {
             content: any;
             shownTrigger: 'unchecked' | 'checked' | 'all';
         };
-    })[];
+    })[] | SelectProps['options'];
     sendOtp?: (value: any) => any;
     dependField?: FormItemName;
     countDownSeconds?: number;

package/es/upload-photo/index.js

@@ -118,8 +118,7 @@ var UploadPhoto = function UploadPhoto(props) {
 
   invariant(typeof props.handleUpload === 'function' || uploadApi, '"handleUpload" should be a function. Or uploadApi should be set at Form/FreeForm');
   invariant(!uploadApi || props.bizKey, '"bizKey" should be set if Upload is used with uploadApi');
-  var _props$value = props.value,
-      value = _props$value === void 0 ? [] : _props$value,
+  var value = props.value,
       limit = props.limit,
       limitErrorMessage = props.limitErrorMessage,
       descriptions = props.descriptions,
@@ -238,7 +237,7 @@ var UploadPhoto = function UploadPhoto(props) {
     if (Array.isArray(value) && files.length === 0) {
       mapFilesFromValue(value);
     }
-  }, [value]);
+  }, [value, files]);
   var uploadId = useMemo(function () {
     return "igloo-upload-photo-input-".concat(Math.random());
   }, []);
@@ -250,7 +249,7 @@ var UploadPhoto = function UploadPhoto(props) {
         URL.revokeObjectURL(dataUrl);
       });
     };
-  }, []);
+  }, [files]);
   useEffect(function () {
     var removeLimitMsg = function removeLimitMsg(e) {
       if (DomRef.current && !DomRef.current.contains(e.target) && limitNumError.current) {

package/lib/filter/index.d.ts

@@ -46,6 +46,7 @@ export interface IFilterProps {
     searchWithFilter?: boolean;
     inputOnly?: boolean;
     beforeOpenFilter?: any;
+    resetCallBack?: any;
 }
 declare const FilterComponent: (props: IFilterProps) => JSX.Element;
 export default FilterComponent;

package/lib/filter/index.js

@@ -390,7 +390,8 @@ var FilterComponent = function FilterComponent(props) {
       searchInputDefault = props.searchInputDefault,
       initValue = props.initValue,
       inputOnly = props.inputOnly,
-      beforeOpenFilter = props.beforeOpenFilter;
+      beforeOpenFilter = props.beforeOpenFilter,
+      resetCallBack = props.resetCallBack;
   var filterTitle = props.filterTitle,
       _props$filterItems = props.filterItems,
       filterItems = _props$filterItems === void 0 ? [] : _props$filterItems; // id controller
@@ -743,6 +744,7 @@ var FilterComponent = function FilterComponent(props) {
         },
         children: [(0, _jsxRuntime.jsx)("span", {
           onClick: function onClick() {
+            typeof resetCallBack === 'function' && resetCallBack(_objectSpread({}, defaultOptions));
             setTimeout(function () {
               setTimeRangeType(-1);
               dispatchOptionsChange({
@@ -1082,9 +1084,13 @@ var FilterComponent = function FilterComponent(props) {
       visible: dropVisible,
       onVisibleChange: function onVisibleChange(visible) {
         setDropVisible(visible);
+
+        if (visible) {
+          typeof beforeOpenFilter === 'function' && beforeOpenFilter(_objectSpread({}, confirmed));
+        }
+
         setTimeout(function () {
           if (dropVisible) {
-            typeof beforeOpenFilter === 'function' && beforeOpenFilter(_objectSpread({}, confirmed));
             setTimeRangeType(confirmedTimeRange);
             dispatchOptionsChange({
               type: 'default',

package/lib/form/element/index.js

@@ -267,11 +267,7 @@ var Element = function Element(_ref) {
         hideWhenEdit = elementProps.hideWhenEdit,
         otherElementProps = _objectWithoutProperties(elementProps, _excluded2);
 
-    if (preview && hideWhenPreview) {
-      return null;
-    }
-
-    return hideWhenEdit || !display ? null : (0, _jsxRuntime.jsx)(_col.default, _objectSpread(_objectSpread({}, restColProps), {}, {
+    var component = (0, _jsxRuntime.jsx)(_col.default, _objectSpread(_objectSpread({}, restColProps), {}, {
       className: "igloo-form-item",
       children: (0, _jsxRuntime.jsx)("div", {
         style: {
@@ -290,6 +286,13 @@ var Element = function Element(_ref) {
         }))
       })
     }));
+
+    if (preview) {
+      if (hideWhenPreview) return null;
+      return component;
+    }
+
+    return hideWhenEdit || !display ? null : component;
   }
 
   if (!display) return null;

package/lib/form/index.js

@@ -81,7 +81,8 @@ var IglooForm = function IglooForm(props, ref) {
   } : _props$getScrollConta,
       _props$onFirstModifie = props.onFirstModified,
       onFirstModified = _props$onFirstModifie === void 0 ? function () {} : _props$onFirstModifie,
-      uploadApi = props.uploadApi;
+      uploadApi = props.uploadApi,
+      selectDatasourceApi = props.selectDatasourceApi;
 
   var _Form$useForm = _form.default.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -260,7 +261,8 @@ var IglooForm = function IglooForm(props, ref) {
         showSubmitButton: showSubmitButton,
         getScrollContainer: getScrollContainer,
         registerDependencies: registerDependencies,
-        uploadApi: uploadApi
+        uploadApi: uploadApi,
+        selectDatasourceApi: selectDatasourceApi
       }, locales),
       children: (0, _jsxRuntime.jsxs)(_form.default, {
         form: form,

package/lib/form-context.d.ts

@@ -16,5 +16,6 @@ declare const _default: React.Context<{
     getScrollContainer: () => HTMLElement | Window | null;
     registerDependencies: (name: FormItemName | FormItemName[], updater: Function) => void;
     uploadApi?: string | undefined;
+    selectDatasourceApi?: string | undefined;
 }>;
 export default _default;

package/lib/free-form/addable-section/index.js

@@ -225,7 +225,7 @@ var AddableSection = function AddableSection(props) {
       return children.map(function (c, index) {
         var _c$type;
 
-        if (['Igloo_Free_Form_Item', 'Igloo_Free_Form_Section', 'Igloo_Free_Form_AddabledSection'].includes(c === null || c === void 0 ? void 0 : (_c$type = c.type) === null || _c$type === void 0 ? void 0 : _c$type.displayName)) {
+        if (['Igloo_Free_Form_Item', 'Igloo_Free_Form_Section', 'Igloo_Free_Form_AddableSection'].includes(c === null || c === void 0 ? void 0 : (_c$type = c.type) === null || _c$type === void 0 ? void 0 : _c$type.displayName)) {
           return /*#__PURE__*/(0, _react.cloneElement)(c, _objectSpread(_objectSpread({
             key: index
           }, c.props), {}, {

package/lib/free-form/index.js

@@ -71,7 +71,8 @@ var FreeForm = function FreeForm(props) {
   } : _props$getScrollConta,
       _props$onFirstModifie = props.onFirstModified,
       onFirstModified = _props$onFirstModifie === void 0 ? function () {} : _props$onFirstModifie,
-      uploadApi = props.uploadApi;
+      uploadApi = props.uploadApi,
+      selectDatasourceApi = props.selectDatasourceApi;
 
   var _Form$useForm = _form.default.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -212,7 +213,8 @@ var FreeForm = function FreeForm(props) {
         showSubmitButton: showSubmitButton,
         getScrollContainer: getScrollContainer,
         registerDependencies: registerDependencies,
-        uploadApi: uploadApi
+        uploadApi: uploadApi,
+        selectDatasourceApi: selectDatasourceApi
       }, locales),
       children: (0, _jsxRuntime.jsx)(_form.default, {
         form: form,

package/lib/select/attached-select.d.ts

@@ -2,11 +2,19 @@ import { SelectProps, SelectValue } from 'antd/es/select';
 import { FC, IglooComponentProps } from '../types';
 import { FormInstance } from 'antd/es/form';
 import './style';
+import { NamePath } from 'antd/es/form/interface';
 export declare const Option: import("rc-select/lib/Option").OptionFC, OptGroup: import("rc-select/lib/OptGroup").OptionGroupFC;
 declare type Props = SelectProps<SelectValue> & IglooComponentProps & {
     getOptions?: (form: FormInstance) => any[];
     multiple?: boolean;
     clearWhenOptionsUpdated?: boolean;
+    optionGroups?: {
+        parentKey: string;
+        options: Props['options'];
+    }[];
+    datasourceKey?: string;
+    datasourceApi?: string;
+    dependField?: NamePath;
 };
 declare type OptionType = typeof Option;
 declare type OptGroupType = typeof OptGroup;
@@ -14,5 +22,5 @@ interface IglooSelectType extends FC<Props> {
     Option: OptionType;
     OptGroup: OptGroupType;
 }
-declare const IglooSelect: IglooSelectType;
-export default IglooSelect;
+declare const AttachedSelect: IglooSelectType;
+export default AttachedSelect;

package/lib/select/attached-select.js

@@ -25,16 +25,27 @@ var _checkbox = _interopRequireDefault(require("../checkbox"));
 
 var _localeContext = _interopRequireDefault(require("../locale/locale-context"));
 
+var _formContext = _interopRequireDefault(require("../form-context"));
+
 var _button = _interopRequireDefault(require("../button"));
 
 var _input = _interopRequireDefault(require("../input"));
 
 require("./style");
 
-var _excluded = ["options", "getOptions", "value", "className", "placeholder", "onDropdownVisibleChange", "children", "showSearch", "filterOption", "optionFilterProp", "multiple", "clearWhenOptionsUpdated"];
+var _invariant = _interopRequireDefault(require("invariant"));
+
+var _excluded = ["value", "className", "placeholder", "onDropdownVisibleChange", "showSearch", "filterOption", "optionFilterProp", "multiple", "options"],
+    _excluded2 = ["options", "optionGroups", "getOptions", "datasourceKey", "dependField", "children", "clearWhenOptionsUpdated"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -71,20 +82,17 @@ exports.OptGroup = OptGroup;
 exports.Option = Option;
 
 var IglooSelect = function IglooSelect(_ref) {
-  var optionsProp = _ref.options,
-      getOptionsProp = _ref.getOptions,
-      valueProp = _ref.value,
+  var valueProp = _ref.value,
       className = _ref.className,
       placeholder = _ref.placeholder,
       _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
       onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
-      children = _ref.children,
       showSearch = _ref.showSearch,
       filterOption = _ref.filterOption,
       optionFilterProp = _ref.optionFilterProp,
       multiple = _ref.multiple,
-      _ref$clearWhenOptions = _ref.clearWhenOptionsUpdated,
-      clearWhenOptionsUpdated = _ref$clearWhenOptions === void 0 ? false : _ref$clearWhenOptions,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useContext = (0, _react.useContext)(_localeContext.default),
@@ -100,86 +108,25 @@ var IglooSelect = function IglooSelect(_ref) {
       selectedOptions = _useState4[0],
       setSelectedOptions = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(options),
+      _useState6 = _slicedToArray(_useState5, 2),
+      displayOptions = _useState6[0],
+      setDisplay = _useState6[1];
+
   (0, _react.useEffect)(function () {
     typeof rest.onChange === 'function' && valueProp !== selected && rest.onChange(selected, selectedOptions);
   }, [selected]);
   (0, _react.useEffect)(function () {
     setSelected(valueProp);
   }, [valueProp]);
-
-  var getOptions = function getOptions() {
-    var getFormInstance = rest.getFormInstance;
-    var form = typeof getFormInstance === 'function' && getFormInstance();
-
-    if (!form) {
-      if (!children || typeof children === 'string' || typeof children === 'number' || typeof children === 'boolean') return [];
-      return Array.isArray(children) ? children.map(function (child) {
-        return {
-          label: child.props.children,
-          value: child.props.value
-        };
-      }) : [{
-        label: children.props.children,
-        value: children.props.value
-      }];
-    }
-
-    var options = typeof getOptionsProp === 'function' && getOptionsProp(form);
-    return options || [];
-  };
-
-  var options = optionsProp || getOptions();
-
-  var _useState5 = (0, _react.useState)(options),
-      _useState6 = _slicedToArray(_useState5, 2),
-      originOptions = _useState6[0],
-      setOriginOptions = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(options),
-      _useState8 = _slicedToArray(_useState7, 2),
-      displayOptions = _useState8[0],
-      setDisplay = _useState8[1];
-
   (0, _react.useEffect)(function () {
-    var updateOptions = options.length !== originOptions.length;
-
-    if (!updateOptions) {
-      for (var i = 0; i < options.length; i++) {
-        var newOption = options[i];
-        var originOption = originOptions[i];
-
-        if (newOption.label !== originOption.label || newOption.value !== originOption.value) {
-          updateOptions = true;
-          break;
-        }
-      }
-    }
-
-    if (updateOptions) {
-      setOriginOptions(options);
-      setDisplay(options);
-      var setFieldValue = rest.setFieldValue;
-
-      if (clearWhenOptionsUpdated) {
-        typeof setFieldValue === 'function' && setFieldValue();
-      }
-    }
+    setDisplay(options);
   }, [options]);
-  (0, _react.useEffect)(function () {
-    var setFieldValue = rest.setFieldValue;
-    var foundValue = originOptions.find(function (option) {
-      return Array.isArray(valueProp) ? valueProp.includes(option.value) : option.value === valueProp;
-    });
 
-    if (!foundValue) {
-      typeof setFieldValue === 'function' && setFieldValue();
-    }
-  }, [valueProp, originOptions]);
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      dropVisible = _useState10[0],
-      setDropVisible = _useState10[1];
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      dropVisible = _useState8[0],
+      setDropVisible = _useState8[1];
 
   var handleDropDownVisibleChange = function handleDropDownVisibleChange(open) {
     typeof onDropdownVisibleChange === 'function' && onDropdownVisibleChange(open);
@@ -188,7 +135,7 @@ var IglooSelect = function IglooSelect(_ref) {
 
   var handleSearch = function handleSearch(e) {
     var value = e.target.value;
-    var filteredOptions = originOptions.filter(function (option) {
+    var filteredOptions = options.filter(function (option) {
       var _option$label, _option$label$toStrin;
 
       return Boolean(option === null || option === void 0 ? void 0 : (_option$label = option.label) === null || _option$label === void 0 ? void 0 : (_option$label$toStrin = _option$label.toString()) === null || _option$label$toStrin === void 0 ? void 0 : _option$label$toStrin.includes(value));
@@ -370,11 +317,169 @@ var IglooSelect = function IglooSelect(_ref) {
   });
 };
 
-IglooSelect.formItemPropsHandler = function (config) {
+var AttachedSelect = function AttachedSelect(_ref11) {
+  var options = _ref11.options,
+      optionGroups = _ref11.optionGroups,
+      getOptions = _ref11.getOptions,
+      datasourceKey = _ref11.datasourceKey,
+      dependField = _ref11.dependField,
+      children = _ref11.children,
+      _ref11$clearWhenOptio = _ref11.clearWhenOptionsUpdated,
+      clearWhenOptionsUpdated = _ref11$clearWhenOptio === void 0 ? false : _ref11$clearWhenOptio,
+      rest = _objectWithoutProperties(_ref11, _excluded2);
+
+  var _useState9 = (0, _react.useState)(options || []),
+      _useState10 = _slicedToArray(_useState9, 2),
+      _options = _useState10[0],
+      setOptions = _useState10[1];
+
+  var _useContext2 = (0, _react.useContext)(_formContext.default),
+      selectDatasourceApi = _useContext2.selectDatasourceApi;
+
+  var getFormInstance = rest.getFormInstance;
+  var form = typeof getFormInstance === 'function' && getFormInstance();
+  var dependFieldValue = form && dependField && form.getFieldValue(dependField);
+  var optionsFromGetOptions = typeof getOptions === 'function' && form && getOptions(form);
+  (0, _invariant.default)(datasourceKey && selectDatasourceApi || !datasourceKey, 'Please provide selectDatasourceApi in Form props');
+  (0, _react.useEffect)(function () {
+    var calcOptions = /*#__PURE__*/function () {
+      var _ref12 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+        var group, query, api, rst, _yield$rst$json, data;
+
+        return regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                if (!Array.isArray(options)) {
+                  _context.next = 2;
+                  break;
+                }
+
+                return _context.abrupt("return", options);
+
+              case 2:
+                if (!(Array.isArray(children) || _typeof(children) === 'object')) {
+                  _context.next = 4;
+                  break;
+                }
+
+                return _context.abrupt("return", Array.isArray(children) ? children.map(function (child) {
+                  return {
+                    label: child.props.children,
+                    value: child.props.value
+                  };
+                }) : [{
+                  label: children.props.children,
+                  value: children.props.value
+                }]);
+
+              case 4:
+                if (!Array.isArray(optionsFromGetOptions)) {
+                  _context.next = 6;
+                  break;
+                }
+
+                return _context.abrupt("return", optionsFromGetOptions);
+
+              case 6:
+                if (!optionGroups) {
+                  _context.next = 10;
+                  break;
+                }
+
+                if (!dependFieldValue) {
+                  _context.next = 10;
+                  break;
+                }
+
+                group = optionGroups.find(function (_ref13) {
+                  var parentKey = _ref13.parentKey;
+                  return Array.isArray(dependFieldValue) ? dependFieldValue.includes(parentKey) : parentKey === dependFieldValue;
+                });
+                return _context.abrupt("return", (group === null || group === void 0 ? void 0 : group.options) || []);
+
+              case 10:
+                if (!(selectDatasourceApi && datasourceKey)) {
+                  _context.next = 27;
+                  break;
+                }
+
+                query = Array.isArray(dependFieldValue) ? dependFieldValue.map(function (v) {
+                  return "parent=".concat(v);
+                }).join('&') : dependFieldValue ? "parent=".concat(dependFieldValue) : '';
+                api = "".concat(selectDatasourceApi, "/").concat(datasourceKey);
+                _context.prev = 13;
+                _context.next = 16;
+                return fetch(query ? "".concat(api, "?").concat(query) : api);
+
+              case 16:
+                rst = _context.sent;
+                _context.next = 19;
+                return rst.json();
+
+              case 19:
+                _yield$rst$json = _context.sent;
+                data = _yield$rst$json.data;
+                return _context.abrupt("return", data || []);
+
+              case 24:
+                _context.prev = 24;
+                _context.t0 = _context["catch"](13);
+                return _context.abrupt("return", []);
+
+              case 27:
+                return _context.abrupt("return", []);
+
+              case 28:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee, null, [[13, 24]]);
+      }));
+
+      return function calcOptions() {
+        return _ref12.apply(this, arguments);
+      };
+    }();
+
+    var compareOptions = function compareOptions(newOptions) {
+      var updateOptions = _options.length !== newOptions.length;
+
+      if (!updateOptions) {
+        for (var i = 0; i < _options.length; i++) {
+          var newOption = _options[i];
+          var originOption = newOptions[i];
+
+          if (newOption.label !== originOption.label || newOption.value !== originOption.value) {
+            updateOptions = true;
+            break;
+          }
+        }
+      }
+
+      if (updateOptions) {
+        setOptions(newOptions);
+        var setFieldValue = rest.setFieldValue;
+
+        if (clearWhenOptionsUpdated) {
+          typeof setFieldValue === 'function' && setFieldValue();
+        }
+      }
+    };
+
+    calcOptions().then(compareOptions);
+  }, [options, optionGroups, dependFieldValue, optionsFromGetOptions]);
+  return (0, _jsxRuntime.jsx)(IglooSelect, _objectSpread({
+    options: _options
+  }, rest));
+};
+
+AttachedSelect.formItemPropsHandler = function (config) {
   return {};
 };
 
-IglooSelect.Option = Option;
-IglooSelect.OptGroup = OptGroup;
-var _default = IglooSelect;
+AttachedSelect.Option = Option;
+AttachedSelect.OptGroup = OptGroup;
+var _default = AttachedSelect;
 exports.default = _default;

package/lib/types.d.ts

@@ -3,6 +3,7 @@
 import { FormItemProps, FormInstance } from 'antd/es/form';
 import { NamePath } from 'rc-field-form/lib/interface';
 import { CheckboxOptionType } from 'antd/es/checkbox';
+import { SelectProps } from 'antd/es/select';
 export declare type FormItemName = NamePath;
 export interface FormBasicConfig {
     className?: string;
@@ -25,6 +26,7 @@ export interface FormBasicConfig {
     getScrollContainer?: () => HTMLElement | null;
     onFirstModified?: () => any;
     uploadApi?: string;
+    selectDatasourceApi?: string;
 }
 export declare type FormItemAssert = {
     field: NamePath;
@@ -79,7 +81,7 @@ export interface FormItemExtraConfig extends FormItemProps {
             content: any;
             shownTrigger: 'unchecked' | 'checked' | 'all';
         };
-    })[];
+    })[] | SelectProps['options'];
     sendOtp?: (value: any) => any;
     dependField?: FormItemName;
     countDownSeconds?: number;

package/lib/upload-photo/index.js

@@ -151,8 +151,7 @@ var UploadPhoto = function UploadPhoto(props) {
 
   (0, _invariant.default)(typeof props.handleUpload === 'function' || uploadApi, '"handleUpload" should be a function. Or uploadApi should be set at Form/FreeForm');
   (0, _invariant.default)(!uploadApi || props.bizKey, '"bizKey" should be set if Upload is used with uploadApi');
-  var _props$value = props.value,
-      value = _props$value === void 0 ? [] : _props$value,
+  var value = props.value,
       limit = props.limit,
       limitErrorMessage = props.limitErrorMessage,
       descriptions = props.descriptions,
@@ -271,7 +270,7 @@ var UploadPhoto = function UploadPhoto(props) {
     if (Array.isArray(value) && files.length === 0) {
       mapFilesFromValue(value);
     }
-  }, [value]);
+  }, [value, files]);
   var uploadId = (0, _react.useMemo)(function () {
     return "igloo-upload-photo-input-".concat(Math.random());
   }, []);
@@ -283,7 +282,7 @@ var UploadPhoto = function UploadPhoto(props) {
         URL.revokeObjectURL(dataUrl);
       });
     };
-  }, []);
+  }, [files]);
   (0, _react.useEffect)(function () {
     var removeLimitMsg = function removeLimitMsg(e) {
       if (DomRef.current && !DomRef.current.contains(e.target) && limitNumError.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iglooform",
-  "version": "2.4.30",
+  "version": "2.4.31",
   "scripts": {
     "start": "dumi dev",
     "build-dev": "dumi build",