@innoways/drip-form-theme-antd 8.0.18 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Change Log
 
+## 9.0.0
+
+### Major Changes
+
+- fixed datepicker field porps issue and style issues 8.0.20
+
+### Patch Changes
+
+- Updated dependencies
+  - @innoways/hooks@9.0.0
+  - @innoways/utils@9.0.0
+
+## 8.0.19
+
+### Patch Changes
+
+- Date component fix same as gima 8.0.19
+- Updated dependencies
+  - @innoways/hooks@8.0.19
+  - @innoways/utils@8.0.19
+
 ## 8.0.18
 
 ### Patch Changes

package/dist/down-arrow.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>

package/dist/index.css

@@ -95,6 +95,150 @@
   color: #fff !important;
 }
 
+.year-1 {
+  display: block !important;
+  position: absolute;
+  top: 34px;
+  right: 78px;
+  background-color: #fff;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+  border: 0.8px solid #ddd;
+  border-radius: 5px;
+  z-index: 9999;
+}
+
+.year-picker-list {
+  height: 258px;
+  padding: 0 6px;
+  overflow: auto;
+  margin-bottom: 5px;
+  margin-top: 5px;
+  list-style-type: none;
+  scrollbar-width: thin;
+}
+
+.year-picker-list li.selected {
+  background-color: var(
+    --ant-primary-color
+  ); /* Change the background color of the selected year here */
+  color: #fff;
+  width: 100%;
+  padding: 0 5px;
+  border-radius: 20px;
+}
+
+.year-picker-list li {
+  cursor: pointer;
+  padding: 1px;
+}
+
+.select_year {
+  border: none;
+  outline: none;
+}
+
+.numInputWrapper .icon-box {
+  background: url(./down-arrow.svg);
+  background-size: 16px 16px !important;
+  background-repeat: no-repeat !important;
+  cursor: pointer !important;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 4px;
+  right: 0px;
+}
+
+.numInputWrapper .icon-box.active {
+  background: url(./down-arrow.svg);
+  background-size: 16px 16px !important;
+  background-repeat: no-repeat !important;
+  cursor: pointer !important;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 4px;
+  right: -17px;
+  transform: scaleX(1) scaleY(1);
+}
+
+.flatpickr-calendar.animate.active {
+  top: 1616.09px !important;
+}
+
+.icon-box::before {
+  content: '';
+}
+
+.numInputWrapper span {
+  opacity: 1 !important;
+  border: none !important;
+}
+.numInputWrapper span:hover {
+  background-color: none;
+  background: url(./down-arrow.svg);
+  background-size: 16px 16px !important;
+  background-repeat: no-repeat !important;
+  cursor: pointer !important;
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 4px;
+  right: 0px;
+}
+
+@media (max-width: 768px) {
+  /* .flatpickr-calendar.animate.active {
+  top: 2100.09px !important
+  }  */
+
+  .flatpickr-current-month .flatpickr-monthDropdown-months span,
+  .flatpickr-current-month .numInputWrapper span {
+    display: block;
+  }
+}
+
+/* date picker */
+.custom-year-picker {
+  position: absolute;
+  top: -57px;
+  left: 0;
+  padding: 10px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  z-index: 9999;
+  display: block;
+}
+
+.custom-year-picker .year-option {
+  display: inline-block;
+  margin: 5px;
+  cursor: pointer;
+}
+
+.custom-year-display {
+  display: flex;
+  align-items: center;
+}
+
+.year-option:hover {
+  background: #ddd;
+  cursor: pointer;
+}
+
+.year-arrow {
+  cursor: pointer;
+}
+
+.custom-year-display .year-arrow {
+  cursor: pointer;
+}
+
+.flatpickr-current-month {
+  display: flex !important;
+  justify-content: center !important;
+}
+
 .drip-form--colorpicker {
   display: flex;
 }

package/dist/index.js

@@ -3,7 +3,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import 'antd/es/input/style';
 import _Input from 'antd/es/input';
-import React, { useState, memo, useEffect, useMemo, useCallback } from 'react';
+import React, { useState, memo, useEffect, useMemo, useRef, useCallback } from 'react';
 import { useField, useCountryStateCityOptions, usePrevious, useQuery, useEventCallback } from '@innoways/hooks';
 import 'antd/es/modal/style';
 import _Modal from 'antd/es/modal';
@@ -36,7 +36,7 @@ import 'antd/es/input-number/style';
 import _InputNumber from 'antd/es/input-number';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import * as Icon from 'react-feather';
-import { Edit, Delete, Search } from 'react-feather';
+import { X, Edit, Delete, Search } from 'react-feather';
 import 'antd/es/switch/style';
 import _Switch from 'antd/es/switch';
 import 'antd/es/slider/style';
@@ -45,7 +45,6 @@ import 'antd/es/time-picker/style';
 import _TimePicker from 'antd/es/time-picker';
 import moment from 'moment';
 import locale from 'antd/es/date-picker/locale/en_US';
-import _typeof from '@babel/runtime/helpers/typeof';
 import 'antd/es/date-picker/style';
 import _DatePicker from 'antd/es/date-picker';
 import Flatpickr from 'react-flatpickr';
@@ -56,6 +55,7 @@ import _Checkbox from 'antd/es/checkbox';
 import 'antd/es/upload/style';
 import _Upload from 'antd/es/upload';
 import { useImmer } from 'use-immer';
+import _typeof from '@babel/runtime/helpers/typeof';
 import 'antd/es/cascader/style';
 import _Cascader from 'antd/es/cascader';
 import 'antd/es/transfer/style';
@@ -63,9 +63,9 @@ import _Transfer from 'antd/es/transfer';
 import 'antd/es/tree-select/style';
 import _TreeSelect from 'antd/es/tree-select';
 
-function ownKeys$f(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 ownKeys$h(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$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var searchTypes = [{
   label: 'Google',
   value: 'WGS84'
@@ -130,7 +130,7 @@ function GpsModal(_ref) {
       form = _Form$useForm2[0];
 
   var handleGpsDataChange = function handleGpsDataChange(value, name) {
-    setGpsData(_objectSpread$f(_objectSpread$f({}, gpsData), {}, _defineProperty({}, name, value)));
+    setGpsData(_objectSpread$h(_objectSpread$h({}, gpsData), {}, _defineProperty({}, name, value)));
   };
 
   var handleResult = function handleResult(result1, type, addressFg) {
@@ -596,9 +596,9 @@ var config$l = {
 
 var _excluded$m = ["multiline", "disabled", "onChange", "fieldData", "fieldKey", "dispatch", "disabled_input", "style", "asyncValidate", "getKey", "formMode", "autoSize", "type", "globalState", "searchUrl"];
 
-function ownKeys$e(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 ownKeys$g(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$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 _Input.TextArea;
 
 var PlaceAutoCompleteField = function PlaceAutoCompleteField(_ref) {
@@ -619,7 +619,7 @@ var PlaceAutoCompleteField = function PlaceAutoCompleteField(_ref) {
       searchUrl = _ref.searchUrl,
       restProps = _objectWithoutProperties(_ref, _excluded$m);
 
-  var _onChange = useField(_objectSpread$e({
+  var _onChange = useField(_objectSpread$g({
     fieldKey: fieldKey,
     onChange: onChange,
     asyncValidate: asyncValidate,
@@ -632,7 +632,7 @@ var PlaceAutoCompleteField = function PlaceAutoCompleteField(_ref) {
   }), dispatch);
 
   var handleIsGPSModalOpen = function handleIsGPSModalOpen(toggle) {
-    globalState.setGlobalState(_objectSpread$e(_objectSpread$e({}, globalState), {}, {
+    globalState.setGlobalState(_objectSpread$g(_objectSpread$g({}, globalState), {}, {
       webModalForPlaceAutoCompleteField: toggle ? fieldKey : null
     }));
   };
@@ -749,9 +749,9 @@ var config$k = {
 
 var _excluded$l = ["multiline", "disabled", "onChange", "fieldData", "fieldKey", "dispatch", "disabled_input", "style", "asyncValidate", "getKey", "formMode", "autoSize", "type"];
 
-function ownKeys$d(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 ownKeys$f(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$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TextArea$1 = _Input.TextArea;
 
 var TextField = function TextField(_ref) {
@@ -783,7 +783,7 @@ var TextField = function TextField(_ref) {
       updatedType = _useState4[0],
       setUpdatedType = _useState4[1];
 
-  var _onChange = useField(_objectSpread$d({
+  var _onChange = useField(_objectSpread$f({
     fieldKey: fieldKey,
     onChange: onChange,
     asyncValidate: asyncValidate,
@@ -1865,9 +1865,9 @@ var config$j = {
 var _excluded$k = ["fieldKey", "fieldData", "dispatch", "options", "buttonStyle", "onChange", "asyncValidate", "getKey", "formMode", "renderType", "style"],
     _excluded2$2 = ["value", "label", "description"];
 
-function ownKeys$c(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 ownKeys$e(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$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TextArea = _Input.TextArea;
 
 var RadioField = function RadioField(_ref) {
@@ -1915,7 +1915,7 @@ var RadioField = function RadioField(_ref) {
   }
 
   var handleRadioTextChange = function handleRadioTextChange(value, key) {
-    _onChange(_objectSpread$c(_objectSpread$c({}, fieldData), {}, _defineProperty({}, key, value)));
+    _onChange(_objectSpread$e(_objectSpread$e({}, fieldData), {}, _defineProperty({}, key, value)));
   };
 
   var renderRadioField = function renderRadioField() {
@@ -1933,7 +1933,7 @@ var RadioField = function RadioField(_ref) {
       onChange: function onChange(e) {
         return renderType === 'radioNumber' ? handleRadioTextChange(e.target.value, 'radio') : _onChange(e);
       },
-      style: _objectSpread$c(_objectSpread$c({}, style), {}, {
+      style: _objectSpread$e(_objectSpread$e({}, style), {}, {
         width: renderType === 'radioNumber' ? '30%' : style === null || style === void 0 ? void 0 : style.width
       })
     }), options.map(function (item, idx) {
@@ -1955,7 +1955,7 @@ var RadioField = function RadioField(_ref) {
         return handleRadioTextChange(e.target.value, 'text');
       },
       value: fieldData.text,
-      style: _objectSpread$c(_objectSpread$c({}, style), {}, {
+      style: _objectSpread$e(_objectSpread$e({}, style), {}, {
         margin: '0 10px 0 10px',
         width: '34%',
         minWidth: '300px'
@@ -19355,9 +19355,9 @@ var config$i = {
 
 var _excluded$i = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "style", "asyncValidate", "getKey", "formMode", "renderType"];
 
-function ownKeys$b(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 ownKeys$d(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$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var NumberField = function NumberField(_ref) {
   var disabled = _ref.disabled,
@@ -19391,7 +19391,7 @@ var NumberField = function NumberField(_ref) {
   }, dispatch);
 
   var onPhoneCodeChange = function onPhoneCodeChange(key, value) {
-    setNumbers(_objectSpread$b(_objectSpread$b({}, numbers), {}, _defineProperty({}, key, value)));
+    setNumbers(_objectSpread$d(_objectSpread$d({}, numbers), {}, _defineProperty({}, key, value)));
   };
 
   useEffect(function () {
@@ -19449,7 +19449,7 @@ var NumberField = function NumberField(_ref) {
         return onPhoneCodeChange('country_id', e);
       },
       value: numbers.country_id,
-      style: _objectSpread$b(_objectSpread$b({}, style), {}, {
+      style: _objectSpread$d(_objectSpread$d({}, style), {}, {
         width: '20%',
         marginRight: '5px'
       })
@@ -19459,7 +19459,7 @@ var NumberField = function NumberField(_ref) {
         return onPhoneCodeChange('city_id', e);
       },
       value: numbers.city_id,
-      style: _objectSpread$b(_objectSpread$b({}, style), {}, {
+      style: _objectSpread$d(_objectSpread$d({}, style), {}, {
         width: '20%',
         marginRight: '5px'
       })
@@ -19469,7 +19469,7 @@ var NumberField = function NumberField(_ref) {
         return onPhoneCodeChange('phone', e);
       },
       value: numbers.phone,
-      style: _objectSpread$b(_objectSpread$b({}, style), {}, {
+      style: _objectSpread$d(_objectSpread$d({}, style), {}, {
         width: '60%'
       })
     }, restProps)));
@@ -19909,9 +19909,9 @@ var config$h = {
 
 var _excluded$h = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "multiple", "options", "allowClear", "queryFunc", "asyncValidate", "requestCache", "style", "getKey", "queryConfigCountry", "token"];
 
-function ownKeys$a(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 ownKeys$c(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$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var SelectField$5 = function SelectField(_ref) {
   var disabled = _ref.disabled,
@@ -19932,7 +19932,7 @@ var SelectField$5 = function SelectField(_ref) {
       token = _ref$token === void 0 ? '' : _ref$token,
       restProps = _objectWithoutProperties(_ref, _excluded$h);
 
-  var _useCountryStateCityO = useCountryStateCityOptions(fieldData || '', _objectSpread$a(_objectSpread$a({}, queryConfigCountry), {}, {
+  var _useCountryStateCityO = useCountryStateCityOptions(fieldData || '', _objectSpread$c(_objectSpread$c({}, queryConfigCountry), {}, {
     token: token
   })),
       _useCountryStateCityO2 = _useCountryStateCityO.countryOption,
@@ -20095,9 +20095,9 @@ var config$g = {
 
 var _excluded$g = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "multiple", "options", "allowClear", "queryFunc", "asyncValidate", "requestCache", "style", "getKey", "queryConfig", "queryConfigState", "formData", "token"];
 
-function ownKeys$9(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 ownKeys$b(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$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var SelectField$4 = function SelectField(_ref) {
   var disabled = _ref.disabled,
@@ -20125,7 +20125,7 @@ var SelectField$4 = function SelectField(_ref) {
   var _useCountryStateCityO = useCountryStateCityOptions({
     country: queryConfig !== null && queryConfig !== void 0 && queryConfig.country ? formData[queryConfig.country] : '',
     state: fieldData
-  }, null, _objectSpread$9(_objectSpread$9({}, queryConfigState), {}, {
+  }, null, _objectSpread$b(_objectSpread$b({}, queryConfigState), {}, {
     token: token
   })),
       _useCountryStateCityO2 = _useCountryStateCityO.stateOption,
@@ -20316,9 +20316,9 @@ var config$f = {
 
 var _excluded$f = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "multiple", "options", "allowClear", "queryFunc", "asyncValidate", "requestCache", "style", "getKey", "queryConfigState", "queryConfigCity", "queryConfig", "formData", "token"];
 
-function ownKeys$8(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 ownKeys$a(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$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var SelectField$3 = function SelectField(_ref) {
   var disabled = _ref.disabled,
@@ -20347,9 +20347,9 @@ var SelectField$3 = function SelectField(_ref) {
   var _useCountryStateCityO = useCountryStateCityOptions({
     state: queryConfig !== null && queryConfig !== void 0 && queryConfig.state ? formData[queryConfig.state] : '',
     city: fieldData
-  }, null, _objectSpread$8(_objectSpread$8({}, queryConfigState), {}, {
+  }, null, _objectSpread$a(_objectSpread$a({}, queryConfigState), {}, {
     token: token
-  }), _objectSpread$8(_objectSpread$8({}, queryConfigCity), {}, {
+  }), _objectSpread$a(_objectSpread$a({}, queryConfigCity), {}, {
     token: token
   })),
       _useCountryStateCityO2 = _useCountryStateCityO.cityOption,
@@ -20527,9 +20527,9 @@ var config$e = {
 
 var _excluded$e = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "multiple", "options", "allowClear", "queryFunc", "asyncValidate", "requestCache", "style", "getKey", "queryConfigCountry", "queryConfigCity", "queryConfig", "formData", "token"];
 
-function ownKeys$7(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 ownKeys$9(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$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var SelectField$2 = function SelectField(_ref) {
   var disabled = _ref.disabled,
@@ -20558,9 +20558,9 @@ var SelectField$2 = function SelectField(_ref) {
   var _useCountryStateCityO = useCountryStateCityOptions({
     country: queryConfig !== null && queryConfig !== void 0 && queryConfig.country ? formData[queryConfig.country] : '',
     city: fieldData
-  }, _objectSpread$7(_objectSpread$7({}, queryConfigCountry), {}, {
+  }, _objectSpread$9(_objectSpread$9({}, queryConfigCountry), {}, {
     token: token
-  }), null, _objectSpread$7(_objectSpread$7({}, queryConfigCity), {}, {
+  }), null, _objectSpread$9(_objectSpread$9({}, queryConfigCity), {}, {
     token: token
   })),
       _useCountryStateCityO2 = _useCountryStateCityO.cityOption,
@@ -20646,9 +20646,9 @@ var getIconComponent = function getIconComponent(iconName) {
 
 var _excluded$d = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "multiple", "options", "allowClear", "queryFunc", "asyncValidate", "requestCache", "style", "getKey", "renderType", "queryConfig", "renderOptionAsChildren"];
 
-function ownKeys$6(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 ownKeys$8(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Option = _Select.Option;
 
 var SelectField$1 = function SelectField(props) {
@@ -20711,7 +20711,7 @@ var SelectField$1 = function SelectField(props) {
   }, dispatch);
 
   var handleSelectNumberChange = function handleSelectNumberChange(value, key) {
-    _onChange(_objectSpread$6(_objectSpread$6({}, fieldData), {}, _defineProperty({}, key, value)));
+    _onChange(_objectSpread$8(_objectSpread$8({}, fieldData), {}, _defineProperty({}, key, value)));
   }; // 不管单选多选，均可搜索
 
 
@@ -20732,7 +20732,7 @@ var SelectField$1 = function SelectField(props) {
     var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
 
     if (width) {
-      style = _objectSpread$6(_objectSpread$6({}, style), {}, {
+      style = _objectSpread$8(_objectSpread$8({}, style), {}, {
         width: width
       });
     }
@@ -20777,7 +20777,7 @@ var SelectField$1 = function SelectField(props) {
     }, renderSelect(function (e) {
       return handleSelectNumberChange(e, 'select1');
     }, fieldData.select1, '50%', options), /*#__PURE__*/React.createElement(_InputNumber, {
-      style: _objectSpread$6(_objectSpread$6({
+      style: _objectSpread$8(_objectSpread$8({
         marginLeft: '10px'
       }, style), {}, {
         width: '50%'
@@ -20801,7 +20801,7 @@ var SelectField$1 = function SelectField(props) {
     }, renderSelect(function (e) {
       return handleSelectNumberChange(e, 'select1');
     }, fieldData.select1, '33%', options), /*#__PURE__*/React.createElement(_InputNumber, {
-      style: _objectSpread$6(_objectSpread$6({}, style), {}, {
+      style: _objectSpread$8(_objectSpread$8({}, style), {}, {
         margin: '0 10px 0 10px',
         width: '34%'
       }),
@@ -20961,48 +20961,48 @@ var config$d = {
   }
 };
 
-function ownKeys$5(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 ownKeys$7(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var SelectField = function SelectField(props) {
   var queryConfig = props.queryConfig;
 
   if ((queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.optionsType) === 'country') {
-    return /*#__PURE__*/React.createElement(select$5, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, props), config$h.unitedSchema.ui), props.queryConfig.url ? {
-      queryConfigCountry: _objectSpread$5(_objectSpread$5({}, config$h.unitedSchema.ui.queryConfigCountry), {}, {
+    return /*#__PURE__*/React.createElement(select$5, _objectSpread$7(_objectSpread$7(_objectSpread$7({}, props), config$h.unitedSchema.ui), props.queryConfig.url ? {
+      queryConfigCountry: _objectSpread$7(_objectSpread$7({}, config$h.unitedSchema.ui.queryConfigCountry), {}, {
         url: props.queryConfig.url
       })
     } : {}));
   }
 
   if ((queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.optionsType) === 'state') {
-    return /*#__PURE__*/React.createElement(select$4, _objectSpread$5(_objectSpread$5(_objectSpread$5({}, props), config$g.unitedSchema.ui), props.queryConfig.url ? {
-      queryConfigState: _objectSpread$5(_objectSpread$5({}, config$g.unitedSchema.ui.queryConfigState), {}, {
+    return /*#__PURE__*/React.createElement(select$4, _objectSpread$7(_objectSpread$7(_objectSpread$7({}, props), config$g.unitedSchema.ui), props.queryConfig.url ? {
+      queryConfigState: _objectSpread$7(_objectSpread$7({}, config$g.unitedSchema.ui.queryConfigState), {}, {
         url: props.queryConfig.url
       })
     } : {}));
   }
 
   if ((queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.optionsType) === 'city' && (queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.operationMethod) === 'stateCity') {
-    return /*#__PURE__*/React.createElement(select$3, _objectSpread$5(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, props), config$f.unitedSchema.ui), props.queryConfig.url ? {
-      queryConfigState: _objectSpread$5(_objectSpread$5({}, config$f.unitedSchema.ui.queryConfigState), {}, {
+    return /*#__PURE__*/React.createElement(select$3, _objectSpread$7(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, props), config$f.unitedSchema.ui), props.queryConfig.url ? {
+      queryConfigState: _objectSpread$7(_objectSpread$7({}, config$f.unitedSchema.ui.queryConfigState), {}, {
         url: props.queryConfig.url
       })
     } : {}), props.queryConfig.url ? {
-      queryConfigCity: _objectSpread$5(_objectSpread$5({}, config$f.unitedSchema.ui.queryConfigCity), {}, {
+      queryConfigCity: _objectSpread$7(_objectSpread$7({}, config$f.unitedSchema.ui.queryConfigCity), {}, {
         url: props.queryConfig.url
       })
     } : {}));
   }
 
   if ((queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.optionsType) === 'city' && (queryConfig === null || queryConfig === void 0 ? void 0 : queryConfig.operationMethod) === 'countryCity') {
-    return /*#__PURE__*/React.createElement(select$2, _objectSpread$5(_objectSpread$5(_objectSpread$5(_objectSpread$5({}, props), config$e.unitedSchema.ui), props.queryConfig.url ? {
-      queryConfigCountry: _objectSpread$5(_objectSpread$5({}, config$e.unitedSchema.ui.queryConfigCountry), {}, {
+    return /*#__PURE__*/React.createElement(select$2, _objectSpread$7(_objectSpread$7(_objectSpread$7(_objectSpread$7({}, props), config$e.unitedSchema.ui), props.queryConfig.url ? {
+      queryConfigCountry: _objectSpread$7(_objectSpread$7({}, config$e.unitedSchema.ui.queryConfigCountry), {}, {
         url: props.queryConfig.url
       })
     } : {}), props.queryConfig.url ? {
-      queryConfigCity: _objectSpread$5(_objectSpread$5({}, config$e.unitedSchema.ui.queryConfigCity), {}, {
+      queryConfigCity: _objectSpread$7(_objectSpread$7({}, config$e.unitedSchema.ui.queryConfigCity), {}, {
         url: props.queryConfig.url
       })
     } : {}));
@@ -21198,9 +21198,9 @@ var config$c = {
   }
 };
 
-function ownKeys$4(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 ownKeys$6(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var commonStyle = {
   height: 40,
   lineHeight: '40px',
@@ -21209,17 +21209,17 @@ var commonStyle = {
 };
 var styleTypeMap = {
   none: null,
-  success: _objectSpread$4({
+  success: _objectSpread$6({
     backgroundColor: '#F6FFED'
   }, commonStyle),
-  error: _objectSpread$4({
+  error: _objectSpread$6({
     backgroundColor: '#FFF2F0'
   }, commonStyle),
-  warning: _objectSpread$4({
+  warning: _objectSpread$6({
     backgroundColor: '#fff7e1',
     color: '#feb00e'
   }, commonStyle),
-  info: _objectSpread$4({
+  info: _objectSpread$6({
     backgroundColor: '#E6F7FF'
   }, commonStyle)
 };
@@ -21237,7 +21237,7 @@ var NullField = function NullField(_ref) {
 
   if (renderType === 'divider') {
     return /*#__PURE__*/React.createElement("div", {
-      style: _objectSpread$4({
+      style: _objectSpread$6({
         height: '1px',
         border: 'none',
         backgroundColor: 'grey'
@@ -21253,7 +21253,7 @@ var NullField = function NullField(_ref) {
 
       headings.push( /*#__PURE__*/React.createElement("div", {
         key: i,
-        style: _objectSpread$4(_objectSpread$4(_objectSpread$4({
+        style: _objectSpread$6(_objectSpread$6(_objectSpread$6({
           wordBreak: 'break-all'
         }, style), styleTypeMap[styleType]), {}, {
           width: columnsWidth
@@ -21899,8 +21899,314 @@ var TimePickerField = function TimePickerField(_ref) {
 
 var timePicker = /*#__PURE__*/memo(TimePickerField);
 
+function ownKeys$5(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$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var StyledFlatPicker = function StyledFlatPicker(props) {
+  var value = props.value,
+      _onChange = props.onChange,
+      options = props.options,
+      className = props.className,
+      themeColor = props.themeColor,
+      disabled = props.disabled,
+      style = props.style,
+      _props$allowClear = props.allowClear,
+      allowClear = _props$allowClear === void 0 ? true : _props$allowClear;
+
+  var _useState = useState(Date.now()),
+      _useState2 = _slicedToArray(_useState, 2),
+      key = _useState2[0],
+      setKey = _useState2[1]; // Key to force remount
+
+
+  var _useState3 = useState(!isEmpty(value)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      showClear = _useState4[0],
+      setShowClear = _useState4[1];
+
+  var fp = useRef(null);
+  React.useEffect(function () {
+    setShowClear(!isEmpty(value));
+  }, [value]); // Force re-render when options change (especially enableTime)
+
+  React.useEffect(function () {
+    setKey(Date.now());
+  }, [options === null || options === void 0 ? void 0 : options.enableTime, options === null || options === void 0 ? void 0 : options.altFormat, options === null || options === void 0 ? void 0 : options.dateFormat]);
+
+  var dateFieldStyle = _objectSpread$5(_objectSpread$5({}, style), {}, {
+    borderColor: themeColor
+  });
+
+  var clearDatePicker = function clearDatePicker(e) {
+    var _fp$current;
+
+    e.stopPropagation();
+    e.preventDefault();
+    setShowClear(false);
+
+    _onChange([], true);
+
+    if ((_fp$current = fp.current) !== null && _fp$current !== void 0 && _fp$current.flatpickr) {
+      fp.current.flatpickr.clear();
+    }
+  };
+
+  var loadMonths = function loadMonths(instance, year) {
+    if (options !== null && options !== void 0 && options.minDate || options !== null && options !== void 0 && options.maxDate) {
+      var monthList = instance.l10n.months.longhand; // international all months list
+
+      var minDate = options !== null && options !== void 0 && options.minDate ? new Date(options.minDate) : null;
+      var maxDate = options !== null && options !== void 0 && options.maxDate ? new Date(options.maxDate) : null;
+      var _value = instance.latestSelectedDateObj; // get selected date on calendar
+
+      /**
+       * Resets the month dropdown options based on the selected year.
+       * @param {Array<string>} monthListParam - The list of month names.
+       * @param {number} [selectedMonth] - The index of the initially selected month.
+       */
+
+      var setMonthList = function setMonthList(monthListParam) {
+        var _instance$calendarCon;
+
+        var selectedMonth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        var monthsDropdown = instance === null || instance === void 0 ? void 0 : (_instance$calendarCon = instance.calendarContainer) === null || _instance$calendarCon === void 0 ? void 0 : _instance$calendarCon.querySelector('.flatpickr-monthDropdown-months');
+
+        if (monthsDropdown) {
+          monthsDropdown.id = 'month-dropdown';
+        }
+
+        var flag = selectedMonth || 0;
+        monthListParam.forEach(function (monthName, monthIndex) {
+          var option = document.createElement('option');
+          option.value = String(selectedMonth ? flag : monthIndex);
+          option.textContent = monthName;
+          option.selected = selectedMonth === monthIndex || (_value === null || _value === void 0 ? void 0 : _value.getMonth()) === monthIndex;
+          option.tabIndex = monthsDropdown === null || monthsDropdown === void 0 ? void 0 : monthsDropdown.tabIndex;
+          option.classList.add('flatpickr-monthDropdown-month');
+
+          if (monthIndex === 0) {
+            monthsDropdown.replaceChildren(option); // first time replace all old months
+          } else {
+            monthsDropdown.appendChild(option); // append rest of the months
+          }
+
+          if (selectedMonth) flag = flag + 1;
+        });
+      }; // Handle minDate constraint
+
+
+      if (minDate && year === minDate.getFullYear()) {
+        monthList = monthList.slice(minDate.getMonth());
+        setMonthList(monthList, minDate.getMonth());
+      } // Handle maxDate constraint
+      else if (maxDate && year === maxDate.getFullYear()) {
+        monthList = monthList.slice(0, maxDate.getMonth() + 1);
+        setMonthList(monthList, 0);
+      } // No constraint for this year
+      else {
+        setMonthList(monthList);
+      }
+    }
+  };
+
+  var createYearItem = function createYearItem(instance, list, year, isSelected) {
+    var listItem = document.createElement('li');
+    listItem.textContent = String(year); // Check if year is disabled by minDate or maxDate
+
+    var minDate = options !== null && options !== void 0 && options.minDate ? new Date(options.minDate) : null;
+    var maxDate = options !== null && options !== void 0 && options.maxDate ? new Date(options.maxDate) : null;
+    var isDisabled = minDate && year < minDate.getFullYear() || maxDate && year > maxDate.getFullYear();
+
+    if (isDisabled) {
+      listItem.style.opacity = '0.4';
+      listItem.style.cursor = 'not-allowed';
+      listItem.style.pointerEvents = 'none';
+    }
+
+    if (isSelected) {
+      listItem.classList.add('selected');
+      var color = themeColor || 'var(--ant-primary-color)';
+      listItem.style.setProperty('background-color', color, 'important');
+    }
+
+    if (!isDisabled) {
+      listItem.addEventListener('click', function () {
+        var _instance$calendarCon2;
+
+        loadMonths(instance, year);
+        fp.current.flatpickr.setDate(new Date(parseInt(this.textContent || '0'), 0, 1), true);
+        list.querySelectorAll('li').forEach(function (item) {
+          item.classList.remove('selected');
+          item.style.removeProperty('background-color');
+        });
+        this.classList.add('selected');
+        var color = themeColor || 'var(--ant-primary-color)';
+        this.style.setProperty('background-color', color, 'important');
+        list.innerHTML = '';
+        loadYears(instance, list);
+        (_instance$calendarCon2 = instance.calendarContainer.querySelector('.year-1')) === null || _instance$calendarCon2 === void 0 ? void 0 : _instance$calendarCon2.remove();
+      });
+    }
+
+    return listItem;
+  };
+
+  function loadYears(instance, list) {
+    var currentYear = instance.currentYear;
+    var startYear = Math.floor(currentYear / 10) * 10 - 1;
+    var endYear = startYear + 11;
+
+    for (var year = startYear; year <= endYear; year++) {
+      list.appendChild(createYearItem(instance, list, year, year === currentYear));
+    }
+  }
+
+  function prependPreviousYears(instance, list) {
+    var _list$firstElementChi;
+
+    var firstYear = parseInt(((_list$firstElementChi = list.firstElementChild) === null || _list$firstElementChi === void 0 ? void 0 : _list$firstElementChi.textContent) || '0');
+    var startYear = firstYear - 10;
+    var endYear = startYear + 11;
+
+    for (var year = endYear; year >= startYear; year--) {
+      list.insertBefore(createYearItem(instance, list, year, false), list.firstElementChild);
+    }
+
+    list.scrollTop = 240;
+  }
+
+  function appendNextYears(instance, list) {
+    var _list$lastElementChil;
+
+    var lastYear = parseInt(((_list$lastElementChil = list.lastElementChild) === null || _list$lastElementChil === void 0 ? void 0 : _list$lastElementChil.textContent) || '0');
+    var startYear = lastYear + 1;
+    var endYear = startYear + 11;
+
+    for (var year = startYear; year <= endYear; year++) {
+      list.appendChild(createYearItem(instance, list, year, false));
+    }
+  }
+
+  function openYearPicker(instance) {
+    var _instance$calendarCon3;
+
+    var yearPicker = document.createElement('div');
+    yearPicker.classList.add('year-1');
+    var list = document.createElement('ul');
+    list.classList.add('year-picker-list');
+    list.addEventListener('scroll', function () {
+      if (list.scrollTop < 10) {
+        prependPreviousYears(instance, list);
+      } else if (list.scrollHeight - list.scrollTop <= list.clientHeight + 1) {
+        appendNextYears(instance, list);
+      }
+    });
+    yearPicker.appendChild(list);
+    loadYears(instance, list);
+    (_instance$calendarCon3 = instance.calendarContainer.querySelector('.year-1')) === null || _instance$calendarCon3 === void 0 ? void 0 : _instance$calendarCon3.remove();
+    instance.calendarContainer.appendChild(yearPicker);
+    list.scrollTop = 240;
+  }
+
+  var toggleYearPicker = function toggleYearPicker(instance, e) {
+    e.stopPropagation();
+    var isOpen = instance.calendarContainer.querySelector('.year-1');
+    instance.calendarContainer.querySelector('.icon-box');
+
+    if (isOpen) {
+      isOpen.remove();
+    } else {
+      openYearPicker(instance);
+    }
+  };
+
+  var flatpickrOptions = _objectSpread$5(_objectSpread$5({}, options), {}, {
+    onReady: function onReady(selectedDates, dateStr, instance) {
+      if (!(instance !== null && instance !== void 0 && instance.calendarContainer)) return;
+      var yearInput = instance.calendarContainer.querySelector('.cur-year');
+      var numInputWrapper = instance.calendarContainer.querySelector('.numInputWrapper');
+      var monthsDropdown = instance.calendarContainer.querySelector('.flatpickr-monthDropdown-months'); // Add id to month dropdown
+
+      if (monthsDropdown) {
+        monthsDropdown.id = 'month-dropdown';
+      }
+
+      if (yearInput && numInputWrapper) {
+        var _numInputWrapper$quer, _numInputWrapper$quer2;
+
+        // Hide default arrows
+        (_numInputWrapper$quer = numInputWrapper.querySelector('.arrowUp')) === null || _numInputWrapper$quer === void 0 ? void 0 : _numInputWrapper$quer.style.setProperty('display', 'none');
+        (_numInputWrapper$quer2 = numInputWrapper.querySelector('.arrowDown')) === null || _numInputWrapper$quer2 === void 0 ? void 0 : _numInputWrapper$quer2.style.setProperty('display', 'none'); // Create dropdown arrow with CSS class
+
+        var dropdownArrow = document.createElement('span');
+        dropdownArrow.className = 'icon-box';
+        dropdownArrow.addEventListener('click', function (e) {
+          return toggleYearPicker(instance, e);
+        }); // Make year input readonly and clickable
+
+        var yearInputElement = yearInput;
+        yearInputElement.id = 'year-input';
+        yearInputElement.readOnly = true;
+        yearInputElement.style.cursor = 'pointer';
+        yearInput.addEventListener('click', function (e) {
+          return toggleYearPicker(instance, e);
+        });
+        numInputWrapper.appendChild(dropdownArrow);
+      }
+    },
+    onYearChange: function onYearChange() {
+      var currentYearPicker = document.querySelector('.year-1');
+
+      if (currentYearPicker) {
+        currentYearPicker.remove();
+      }
+    }
+  });
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "rounded custom-date-picker",
+    style: _objectSpread$5(_objectSpread$5({}, dateFieldStyle), {}, {
+      position: 'relative'
+    })
+  }, /*#__PURE__*/React.createElement(Flatpickr, {
+    key: key,
+    ref: fp,
+    value: value,
+    onChange: function onChange(selectedDates) {
+      return _onChange(selectedDates);
+    },
+    options: flatpickrOptions,
+    disabled: disabled,
+    className: "".concat(className ? className : '', " form-control flat-date-picker")
+  }), allowClear && showClear && /*#__PURE__*/React.createElement(X, {
+    type: "button",
+    className: "cross-padding",
+    onClick: clearDatePicker,
+    style: {
+      cursor: 'pointer',
+      color: '#999',
+      width: '20px',
+      height: '20px',
+      position: 'absolute',
+      right: '10px',
+      top: '50%',
+      transform: 'translateY(-50%)'
+    }
+  }));
+};
+
+StyledFlatPicker.propTypes = {
+  value: _pt.any,
+  onChange: _pt.func.isRequired,
+  className: _pt.string,
+  themeColor: _pt.string,
+  disabled: _pt.bool,
+  allowClear: _pt.bool
+};
+
 var formatList = {
-  date: 'YYYY-MM-DD HH:mm:ss',
+  date: 'DD-MMM-YYYY HH:mm:ss',
   week: 'YYYY-wo',
   month: 'YYYY-MM',
   quarter: 'YYYY-quarter',
@@ -21916,7 +22222,7 @@ var changeShowTime = function changeShowTime(_ref) {
   dispatch({
     type: 'setUi',
     action: {
-      set: (_set = {}, _defineProperty(_set, getKey('ui.default', 'uiSchema') + '.showTime', val), _defineProperty(_set, getKey('ui.default', 'uiSchema') + '.format', val ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'), _defineProperty(_set, getKey('ui.default__range.0', 'uiSchema') + '.showTime', val), _defineProperty(_set, getKey('ui.default__range.1', 'uiSchema') + '.showTime', val), _defineProperty(_set, getKey('ui.default__range.0', 'uiSchema') + '.format', val ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'), _defineProperty(_set, getKey('ui.default__range.1', 'uiSchema') + '.format', val ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'), _set)
+      set: (_set = {}, _defineProperty(_set, getKey('ui.default', 'uiSchema') + '.showTime', val), _defineProperty(_set, getKey('ui.default', 'uiSchema') + '.format', val ? 'DD-MMM-YYYY HH:mm:ss' : 'DD-MMM-YYYY'), _defineProperty(_set, getKey('ui.default__range.0', 'uiSchema') + '.showTime', val), _defineProperty(_set, getKey('ui.default__range.1', 'uiSchema') + '.showTime', val), _defineProperty(_set, getKey('ui.default__range.0', 'uiSchema') + '.format', val ? 'DD-MMM-YYYY HH:mm:ss' : 'DD-MMM-YYYY'), _defineProperty(_set, getKey('ui.default__range.1', 'uiSchema') + '.format', val ? 'DD-MMM-YYYY HH:mm:ss' : 'DD-MMM-YYYY'), _set)
     }
   });
   dispatch({
@@ -21931,7 +22237,7 @@ var changeShowTime = function changeShowTime(_ref) {
       set: {
         'ui.default': '',
         'ui.default__range': [],
-        'ui.format': val ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
+        'ui.format': val ? 'DD-MMM-YYYY HH:mm:ss' : 'DD-MMM-YYYY'
       }
     }
   });
@@ -21979,7 +22285,11 @@ var config$8 = {
     title: 'Date Selection Box',
     ui: {
       type: 'datePicker',
-      showTime: true,
+      showTime: false,
+      allowClear: true,
+      picker: 'date',
+      format: 'DD-MMM-YYYY',
+      flatpickrFormat: 'd-M-Y',
       theme: 'antd',
       style: {
         width: '100%'
@@ -22033,7 +22343,7 @@ var config$8 = {
       fieldKey: 'showTime',
       type: 'boolean',
       title: 'Is the time selection function enabled',
-      "default": true,
+      "default": false,
       ui: {
         type: 'switch',
         onChange: changeShowTime,
@@ -22147,16 +22457,20 @@ var config$8 = {
       fieldKey: 'format',
       type: 'string',
       title: 'Time format',
-      "default": 'YYYY-MM-DD HH:mm:ss',
+      "default": 'DD-MMM-YYYY',
       ui: {
         type: 'text',
-        placeholder: 'YYYY-MM-DD HH:mm:ss'
+        placeholder: 'DD-MMM-YYYY'
       }
     }]
   }
 };
 
-var _excluded$9 = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "style", "range", "format", "picker", "asyncValidate", "showTime", "getKey", "formMode", "showCurrentDate"];
+var _excluded$9 = ["disabled", "onChange", "fieldData", "fieldKey", "dispatch", "style", "range", "format", "flatpickrFormat", "picker", "asyncValidate", "showTime", "allowClear", "getKey", "formMode", "showCurrentDate", "themeColor", "options"];
+
+function ownKeys$4(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$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 _DatePicker.RangePicker;
 
 var DatePickerField = function DatePickerField(_ref) {
@@ -22164,18 +22478,25 @@ var DatePickerField = function DatePickerField(_ref) {
       onChange = _ref.onChange,
       fieldData = _ref.fieldData,
       fieldKey = _ref.fieldKey,
-      dispatch = _ref.dispatch;
-      _ref.style;
-      var range = _ref.range,
+      dispatch = _ref.dispatch,
+      style = _ref.style,
+      range = _ref.range,
       _ref$format = _ref.format,
-      format = _ref$format === void 0 ? 'YYYY-MM-DD' : _ref$format;
+      format = _ref$format === void 0 ? 'DD-MMM-YYYY' : _ref$format,
+      _ref$flatpickrFormat = _ref.flatpickrFormat,
+      flatpickrFormat = _ref$flatpickrFormat === void 0 ? 'd-M-Y' : _ref$flatpickrFormat;
       _ref.picker;
       var asyncValidate = _ref.asyncValidate,
-      showTime = _ref.showTime,
+      _ref$showTime = _ref.showTime,
+      showTime = _ref$showTime === void 0 ? false : _ref$showTime,
+      _ref$allowClear = _ref.allowClear,
+      allowClear = _ref$allowClear === void 0 ? true : _ref$allowClear,
       getKey = _ref.getKey,
       formMode = _ref.formMode;
       _ref.showCurrentDate;
-      var restProps = _objectWithoutProperties(_ref, _excluded$9);
+      var themeColor = _ref.themeColor,
+      options = _ref.options;
+      _objectWithoutProperties(_ref, _excluded$9);
 
   /**
    * 暂时不支持的DatePicker功能
@@ -22219,86 +22540,47 @@ var DatePickerField = function DatePickerField(_ref) {
   if (formMode === 'view') return fieldData ? typeCheck(fieldData) === 'Array' ? fieldData.map(function (item) {
     return moment(item).format(format);
   }).join(' ~ ') : moment(fieldData).format(format) : null;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, range ? /*#__PURE__*/React.createElement(Flatpickr, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, range ? /*#__PURE__*/React.createElement(StyledFlatPicker, {
     id: "range-picker",
     className: "form-control border-0",
     value: fieldData ? [fieldData[0], fieldData[1]] : [],
-    onChange: _onChange,
-    options: {
+    onChange: function onChange(date, isCleared) {
+      if (isCleared) {
+        _onChange(null);
+      } else {
+        _onChange(date);
+      }
+    },
+    themeColor: themeColor,
+    style: style,
+    allowClear: allowClear,
+    options: _objectSpread$4({
       mode: 'range',
       allowInput: true
-    }
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Flatpickr, _extends({
-    type: "date",
+    }, options)
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFlatPicker, {
     disabled: disabled,
-    value: fieldData ? [new Date(moment(fieldData).format(format))] : [],
-    onChange: function onChange(date) {
-      if (date.length) {
-        _onChange(date[0]);
-      } else {
-        _onChange(fieldData);
+    value: fieldData ? [typeof fieldData === 'string' ? moment(fieldData, format).toDate() : moment(fieldData).toDate()] : [],
+    onChange: function onChange(date, isCleared) {
+      if (isCleared) {
+        _onChange(null);
+      } else if (date.length) {
+        _onChange(moment(date[0]).format(format));
       }
     },
     id: "default-picker",
-    options: {
-      enableTime: _typeof(showTime) === 'object',
+    themeColor: themeColor,
+    style: style,
+    allowClear: allowClear,
+    options: _objectSpread$4({
+      enableTime: showTime,
       altInput: true,
       allowInput: false,
-      altFormat: _typeof(showTime) === 'object' ? 'd-M-Y H:i' : 'd-M-Y',
-      dateFormat: _typeof(showTime) === 'object' ? 'd-M-Y H:i' : 'D-M-Y',
+      altFormat: showTime ? flatpickrFormat + ' H:i' : flatpickrFormat,
+      dateFormat: showTime ? 'Y-m-d H:i' : 'Y-m-d',
       altInputClass: disabled ? 'drip_date_picker_input_disabled' : 'drip_date_picker_input'
-    }
-  }, restProps)))); // return range ? (
-  //   <RangePicker
-  //     picker={picker}
-  //     disabled={disabled}
-  //     {...(isValid
-  //       ? {
-  //           value: fieldData
-  //             ? [moment(fieldData[0], format), moment(fieldData[1], format)]
-  //             : undefined,
-  //         }
-  //       : null)}
-  //     onChange={_onChange}
-  //     format={format}
-  //     locale={locale}
-  //     showTime={
-  //       typeof showTime === 'object'
-  //         ? {
-  //             ...showTime,
-  //             defaultValue: [
-  //               moment(showTime.defaultValue, showTime.format),
-  //               moment(showTime.defaultValue, showTime.format),
-  //             ],
-  //           }
-  //         : showTime
-  //     }
-  //     {...restProps}
-  //   />
-  // ) : (
-  //   <DatePicker
-  //     picker={picker}
-  //     {...(isValid
-  //       ? {
-  //           value: fieldData ? moment(fieldData) : null,
-  //         }
-  //       : null)}
-  //     format={format}
-  //     disabled={disabled}
-  //     onChange={_onChange}
-  //     locale={locale}
-  //     style={style}
-  //     showTime={
-  //       typeof showTime === 'object'
-  //         ? {
-  //             ...showTime,
-  //             defaultValue: moment(showTime.defaultValue, showTime.format),
-  //           }
-  //         : showTime
-  //     }
-  //     {...restProps}
-  //   />
-  // )
+    }, options)
+  })));
 };
 
 DatePickerField.propTypes = {
@@ -22306,7 +22588,10 @@ DatePickerField.propTypes = {
   showTime: _pt.oneOfType([_pt.bool, _pt.shape({
     format: _pt.string,
     defaultValue: _pt.string.isRequired
-  })])
+  })]),
+  options: _pt.any,
+  allowClear: _pt.bool,
+  flatpickrFormat: _pt.string
 };
 var datePicker = /*#__PURE__*/memo(DatePickerField);
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@innoways/drip-form-theme-antd",
-	"version": "8.0.18",
+	"version": "9.0.0",
 	"author": "JDFED",
 	"description": "drip-form antd主题包",
 	"main": "dist/index.js",
@@ -31,8 +31,8 @@
 	"dependencies": {
 		"@ant-design/icons": "^4.7.0",
 		"@babel/runtime": "^7.10.2",
-		"@innoways/hooks": "^8.0.18",
-		"@innoways/utils": "^8.0.18",
+		"@innoways/hooks": "^9.0.0",
+		"@innoways/utils": "^9.0.0",
 		"antd": "^4.16.13",
 		"flatpickr": "^4.6.13",
 		"moment": "^2.26.0",