@hw-component/form 1.9.88 → 1.9.89

package/es/Select/TagSelect/Content.d.ts

@@ -3,5 +3,5 @@ interface IContentProps extends HTagSelectProps {
     error?: Error;
     reload: VoidFunction;
 }
-declare const _default: ({ loading, value, options, onChange, fieldNames, error, reload }: IContentProps) => JSX.Element;
+declare const _default: ({ loading, value, options, onChange, fieldNames, error, reload, }: IContentProps) => JSX.Element;
 export default _default;

package/es/Select/TagSelect/hooks.d.ts

@@ -4,11 +4,11 @@ export declare const useTagControl: ({ value, options, title }: HTagSelectProps)
     checked: boolean | undefined;
     indeterminate: boolean | undefined;
 };
-export declare const useChangeControl: ({ options, value, onChange, fieldNames }: HTagSelectProps) => {
+export declare const useChangeControl: ({ options, value, onChange, fieldNames, }: HTagSelectProps) => {
     change: (val: any) => void;
     allCheck: (e: any) => void | undefined;
 };
-export declare const useCollapseControl: ({ visible, defaultVisible, onVisibleChange }: HTagSelectProps) => {
+export declare const useCollapseControl: ({ visible, defaultVisible, onVisibleChange, }: HTagSelectProps) => {
     activeKey: string[];
     onChange: (keys: any) => void;
 };

package/es/TDPicker/TimeRangePicker.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { HItemProps } from "@/components/Form/modal";
+declare const _default: {
+    Component: React.ForwardRefExoticComponent<import("@/components/Form/modal").HFormItemProps & React.RefAttributes<any>>;
+    placeholder: ({ label }: HItemProps) => string[];
+    requiredErrMsg: ({ label }: HItemProps) => string;
+};
+export default _default;

package/es/TDPicker/TimeRangePicker.js

@@ -0,0 +1,74 @@
+// welcome to hoo hoo hoo
+import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
+import { jsx } from 'react/jsx-runtime';
+import { TimePicker } from 'antd';
+import HFormConnect from '../Form/HFormConnect.js';
+import moment from 'moment';
+
+var _excluded = ["value", "format", "addFormat", "valueMap", "onChange", "order"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var HTimePicker = function HTimePicker(_ref) {
+  var value = _ref.value,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "HH:mm:ss" : _ref$format,
+    addFormat = _ref.addFormat,
+    _ref$valueMap = _ref.valueMap,
+    valueMap = _ref$valueMap === void 0 ? {} : _ref$valueMap,
+    onChange = _ref.onChange,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? false : _ref$order,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _valueMap$start = valueMap.start,
+    start = _valueMap$start === void 0 ? "startTime" : _valueMap$start,
+    _valueMap$end = valueMap.end,
+    end = _valueMap$end === void 0 ? "endTime" : _valueMap$end;
+  addFormat === null || addFormat === void 0 || addFormat({
+    float: {
+      inputValue: function inputValue(item, initValue) {
+        var initStart = initValue[start],
+          initEnd = initValue[end];
+        var name = item.name;
+        if (initStart && initEnd) {
+          return _defineProperty({}, name, [moment(initStart, format), moment(initEnd, format)]);
+        }
+        return _defineProperty({}, name, []);
+      },
+      outputValue: function outputValue(item, _outputValue) {
+        var _item$name = item.name,
+          valueName = _item$name === void 0 ? "" : _item$name;
+        var itemVal = _outputValue[valueName];
+        var _ref4 = itemVal || [],
+          _ref5 = _slicedToArray(_ref4, 2),
+          startVal = _ref5[0],
+          endVal = _ref5[1];
+        return _defineProperty(_defineProperty({}, start, startVal === null || startVal === void 0 ? void 0 : startVal.format(format)), end, endVal === null || endVal === void 0 ? void 0 : endVal.format(format));
+      }
+    }
+  });
+  return jsx(TimePicker.RangePicker, _objectSpread({
+    value: value,
+    onChange: onChange,
+    order: order,
+    style: {
+      width: '100%'
+    }
+  }, props));
+};
+var Index = HFormConnect(HTimePicker);
+var HTimeRangePicker = {
+  Component: Index,
+  placeholder: function placeholder(_ref7) {
+    var label = _ref7.label;
+    return ["\u8BF7\u9009\u62E9\u5F00\u59CB".concat(label), "\u8BF7\u9009\u62E9\u7ED3\u675F".concat(label)];
+  },
+  requiredErrMsg: function requiredErrMsg(_ref8) {
+    var label = _ref8.label;
+    return "\u8BF7\u9009\u62E9".concat(label);
+  }
+};
+
+export { HTimeRangePicker as default };
+// powered by hdj

package/es/TDPicker/modal.d.ts

@@ -6,6 +6,7 @@ import type { TimePickerProps } from "antd";
 import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
+import { TimeRangePickerProps } from "antd/lib/time-picker";
 interface DisabledDateFnModal<T = Moment | undefined> {
     (currentDate: Moment, value: T): boolean;
 }
@@ -35,4 +36,12 @@ export interface HTimePickerProps extends Omit<TimePickerProps, "onChange" | "fo
     disabledDate?: DisabledDateFnModal;
     addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }
+export interface HTimeRangePickerProps extends Omit<TimeRangePickerProps, "format"> {
+    valueMap?: {
+        start: string;
+        end: string;
+    };
+    format?: string;
+    addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
 export {};

package/es/index.css

@@ -46,7 +46,7 @@
   width: 100%;
 }
 .ant-hw-tag-select .ant-collapse-content-box {
-  padding: 0px 40px !important;
+  padding: 0 40px !important;
 }
 .ant-hw-tag-select .ant-hw-tag-select {
   cursor: pointer;
@@ -179,9 +179,6 @@
   display: -ms-flexbox;
   display: flex;
 }
-.ant-hw-tag-select .ant-hw-tag-item {
-  cursor: pointer;
-}
 .ant-hw-input-group .ant-hw-input-group-disabled {
   background-color: #f5f5f5;
 }

package/es/index.d.ts

@@ -32,3 +32,8 @@ export declare const HTrimInput: import("react").ForwardRefExoticComponent<impor
 export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HTagSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HTimeRangePicker: {
+    Component: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+    placeholder: ({ label }: import("./Form/modal").HItemProps) => string[];
+    requiredErrMsg: ({ label }: import("./Form/modal").HItemProps) => string;
+};

package/es/index.js

@@ -37,6 +37,7 @@ var HTrimInput = componentConfig.trimInput;
 var HTrimTextArea = componentConfig.trimTextArea;
 var HInputNumberGroup = componentConfig.inputNumberGroup.Component;
 var HTagSelect = componentConfig.tagSelect;
+var HTimeRangePicker = componentConfig.timeRangePicker;
 
-export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HRichEditor, HSelect, HSelectInput, HSwitch, HTagSelect, HTextArea, HTimePicker, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
+export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HRichEditor, HSelect, HSelectInput, HSwitch, HTagSelect, HTextArea, HTimePicker, HTimeRangePicker, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
 // powered by hdj

package/lib/Form/config.d.ts

@@ -39,5 +39,10 @@ declare const componentConfig: {
     text: ({ value, addonBefore, addonAfter, size, ...props }: import("../Text").HFormTextProps) => JSX.Element;
     richEditor: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
     tagSelect: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
+    timeRangePicker: {
+        Component: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
+        placeholder: ({ label }: import("./modal").HItemProps) => string[];
+        requiredErrMsg: ({ label }: import("./modal").HItemProps) => string;
+    };
 };
 export default componentConfig;

package/lib/Form/config.js

@@ -28,6 +28,7 @@ var InputNumberGroup = require('../Input/InputNumberGroup.js');
 var index$e = require('../Text/index.js');
 var index$f = require('../RichEditor/index.js');
 var index$g = require('../Select/TagSelect/index.js');
+var TimeRangePicker = require('../TDPicker/TimeRangePicker.js');
 
 var placeholderConfig = {
   inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea", "richEditor"],
@@ -59,7 +60,8 @@ var componentConfig = {
   treeSelect: TreeSelect.default,
   text: index$e.default,
   richEditor: index$f.default,
-  tagSelect: index$g.default
+  tagSelect: index$g.default,
+  timeRangePicker: TimeRangePicker.default
 };
 
 exports.default = componentConfig;

package/lib/Select/TagSelect/Content.d.ts

@@ -3,5 +3,5 @@ interface IContentProps extends HTagSelectProps {
     error?: Error;
     reload: VoidFunction;
 }
-declare const _default: ({ loading, value, options, onChange, fieldNames, error, reload }: IContentProps) => JSX.Element;
+declare const _default: ({ loading, value, options, onChange, fieldNames, error, reload, }: IContentProps) => JSX.Element;
 export default _default;

package/lib/Select/TagSelect/hooks.d.ts

@@ -4,11 +4,11 @@ export declare const useTagControl: ({ value, options, title }: HTagSelectProps)
     checked: boolean | undefined;
     indeterminate: boolean | undefined;
 };
-export declare const useChangeControl: ({ options, value, onChange, fieldNames }: HTagSelectProps) => {
+export declare const useChangeControl: ({ options, value, onChange, fieldNames, }: HTagSelectProps) => {
     change: (val: any) => void;
     allCheck: (e: any) => void | undefined;
 };
-export declare const useCollapseControl: ({ visible, defaultVisible, onVisibleChange }: HTagSelectProps) => {
+export declare const useCollapseControl: ({ visible, defaultVisible, onVisibleChange, }: HTagSelectProps) => {
     activeKey: string[];
     onChange: (keys: any) => void;
 };

package/lib/TDPicker/TimeRangePicker.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { HItemProps } from "@/components/Form/modal";
+declare const _default: {
+    Component: React.ForwardRefExoticComponent<import("@/components/Form/modal").HFormItemProps & React.RefAttributes<any>>;
+    placeholder: ({ label }: HItemProps) => string[];
+    requiredErrMsg: ({ label }: HItemProps) => string;
+};
+export default _default;

package/lib/TDPicker/TimeRangePicker.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+var HFormConnect = require('../Form/HFormConnect.js');
+var moment = require('moment');
+
+var _excluded = ["value", "format", "addFormat", "valueMap", "onChange", "order"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var HTimePicker = function HTimePicker(_ref) {
+  var value = _ref.value,
+    _ref$format = _ref.format,
+    format = _ref$format === void 0 ? "HH:mm:ss" : _ref$format,
+    addFormat = _ref.addFormat,
+    _ref$valueMap = _ref.valueMap,
+    valueMap = _ref$valueMap === void 0 ? {} : _ref$valueMap,
+    onChange = _ref.onChange,
+    _ref$order = _ref.order,
+    order = _ref$order === void 0 ? false : _ref$order,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _valueMap$start = valueMap.start,
+    start = _valueMap$start === void 0 ? "startTime" : _valueMap$start,
+    _valueMap$end = valueMap.end,
+    end = _valueMap$end === void 0 ? "endTime" : _valueMap$end;
+  addFormat === null || addFormat === void 0 || addFormat({
+    float: {
+      inputValue: function inputValue(item, initValue) {
+        var initStart = initValue[start],
+          initEnd = initValue[end];
+        var name = item.name;
+        if (initStart && initEnd) {
+          return _defineProperty({}, name, [moment(initStart, format), moment(initEnd, format)]);
+        }
+        return _defineProperty({}, name, []);
+      },
+      outputValue: function outputValue(item, _outputValue) {
+        var _item$name = item.name,
+          valueName = _item$name === void 0 ? "" : _item$name;
+        var itemVal = _outputValue[valueName];
+        var _ref4 = itemVal || [],
+          _ref5 = _slicedToArray(_ref4, 2),
+          startVal = _ref5[0],
+          endVal = _ref5[1];
+        return _defineProperty(_defineProperty({}, start, startVal === null || startVal === void 0 ? void 0 : startVal.format(format)), end, endVal === null || endVal === void 0 ? void 0 : endVal.format(format));
+      }
+    }
+  });
+  return jsxRuntime.jsx(antd.TimePicker.RangePicker, _objectSpread({
+    value: value,
+    onChange: onChange,
+    order: order,
+    style: {
+      width: '100%'
+    }
+  }, props));
+};
+var Index = HFormConnect.default(HTimePicker);
+var HTimeRangePicker = {
+  Component: Index,
+  placeholder: function placeholder(_ref7) {
+    var label = _ref7.label;
+    return ["\u8BF7\u9009\u62E9\u5F00\u59CB".concat(label), "\u8BF7\u9009\u62E9\u7ED3\u675F".concat(label)];
+  },
+  requiredErrMsg: function requiredErrMsg(_ref8) {
+    var label = _ref8.label;
+    return "\u8BF7\u9009\u62E9".concat(label);
+  }
+};
+
+exports.default = HTimeRangePicker;
+// powered by h

package/lib/TDPicker/modal.d.ts

@@ -6,6 +6,7 @@ import type { TimePickerProps } from "antd";
 import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
+import { TimeRangePickerProps } from "antd/lib/time-picker";
 interface DisabledDateFnModal<T = Moment | undefined> {
     (currentDate: Moment, value: T): boolean;
 }
@@ -35,4 +36,12 @@ export interface HTimePickerProps extends Omit<TimePickerProps, "onChange" | "fo
     disabledDate?: DisabledDateFnModal;
     addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }
+export interface HTimeRangePickerProps extends Omit<TimeRangePickerProps, "format"> {
+    valueMap?: {
+        start: string;
+        end: string;
+    };
+    format?: string;
+    addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}
 export {};

package/lib/index.css

@@ -46,7 +46,7 @@
   width: 100%;
 }
 .ant-hw-tag-select .ant-collapse-content-box {
-  padding: 0px 40px !important;
+  padding: 0 40px !important;
 }
 .ant-hw-tag-select .ant-hw-tag-select {
   cursor: pointer;
@@ -179,9 +179,6 @@
   display: -ms-flexbox;
   display: flex;
 }
-.ant-hw-tag-select .ant-hw-tag-item {
-  cursor: pointer;
-}
 .ant-hw-input-group .ant-hw-input-group-disabled {
   background-color: #f5f5f5;
 }

package/lib/index.d.ts

@@ -32,3 +32,8 @@ export declare const HTrimInput: import("react").ForwardRefExoticComponent<impor
 export declare const HTrimTextArea: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInputNumberGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HTagSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HTimeRangePicker: {
+    Component: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+    placeholder: ({ label }: import("./Form/modal").HItemProps) => string[];
+    requiredErrMsg: ({ label }: import("./Form/modal").HItemProps) => string;
+};

package/lib/index.js

@@ -38,6 +38,7 @@ var HTrimInput = config.default.trimInput;
 var HTrimTextArea = config.default.trimTextArea;
 var HInputNumberGroup = config.default.inputNumberGroup.Component;
 var HTagSelect = config.default.tagSelect;
+var HTimeRangePicker = config.default.timeRangePicker;
 
 exports.HForm = index.default;
 exports.useHForm = useHForm.default;
@@ -67,6 +68,7 @@ exports.HSwitch = HSwitch;
 exports.HTagSelect = HTagSelect;
 exports.HTextArea = HTextArea;
 exports.HTimePicker = HTimePicker;
+exports.HTimeRangePicker = HTimeRangePicker;
 exports.HTrimInput = HTrimInput;
 exports.HTrimTextArea = HTrimTextArea;
 exports.HUpload = HUpload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "1.9.88",
+  "version": "1.9.89",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Form/config.ts

@@ -23,7 +23,9 @@ import TrimTextArea from "../TextArea/TrimTextArea";
 import HInputNumberGroup from "../Input/InputNumberGroup";
 import HText from "../Text";
 import HRichEditor from "../RichEditor";
-import HTagSelect from '../Select/TagSelect';
+import HTagSelect from "../Select/TagSelect";
+import HTimeRangePicker from "../TDPicker/TimeRangePicker";
+
 export const placeholderConfig = {
   inputType: [
     "input",
@@ -70,7 +72,8 @@ const componentConfig = {
   treeSelect: HTreeSelect,
   text: HText,
   richEditor: HRichEditor,
-  tagSelect:HTagSelect
+  tagSelect: HTagSelect,
+  timeRangePicker: HTimeRangePicker,
 };
 
 export default componentConfig;

package/src/components/Form/index.less

@@ -102,9 +102,3 @@
     display: flex;
   }
 }
-
-.@{ant-prefix}-hw-tag-select{
-    .@{ant-prefix}-hw-tag-item{
-      cursor: pointer;
-    }
-}

package/src/components/Select/TagSelect/Content.tsx

@@ -1,50 +1,78 @@
-import {HTagSelectProps} from "../modal";
-import {useClassName} from "@/components/hooks";
-import {Row, Skeleton, Space, Tag,Empty} from "antd";
+import { HTagSelectProps } from "../modal";
+import { useClassName } from "@/components/hooks";
+import { Row, Skeleton, Space, Tag, Empty } from "antd";
 import React from "react";
-import {useChangeControl} from "./hooks";
+import { useChangeControl } from "./hooks";
 import NotFoundContent from "../components/NotFoundContent";
 
-const ItemOption=({options,value,onChange,fieldNames}:HTagSelectProps)=>{
-    const tagClassName = useClassName("hw-tag-item");
-    const {label:labelKey="label",value:valueKey="value"}=fieldNames||{};
-    const {change}=useChangeControl({options,value,onChange,fieldNames});
-    return  <Row gutter={[0,8]}>
-    {options?.map((item)=>{
-        const {[labelKey]:label,[valueKey]:itemVal}=item;
-        const index=value?.indexOf(itemVal);
-        const checkedTag=index!==-1;
-        return  <Tag color={checkedTag?"processing":undefined}
-        className={tagClassName}
-        key={itemVal}
-        onClick={()=>{
-            change(itemVal);
-        }}
-    >
-        {label}
-        </Tag>
-    })}
+const ItemOption = ({
+  options,
+  value,
+  onChange,
+  fieldNames,
+}: HTagSelectProps) => {
+  const tagClassName = useClassName("hw-tag-item");
+  const { label: labelKey = "label", value: valueKey = "value" } =
+    fieldNames || {};
+  const { change } = useChangeControl({ options, value, onChange, fieldNames });
+  return (
+    <Row gutter={[0, 8]}>
+      {options?.map((item) => {
+        const { [labelKey]: label, [valueKey]: itemVal } = item;
+        const index = value?.indexOf(itemVal);
+        const checkedTag = index !== -1;
+        return (
+          <Tag
+            color={checkedTag ? "processing" : undefined}
+            className={tagClassName}
+            key={itemVal}
+            onClick={() => {
+              change(itemVal);
+            }}
+          >
+            {label}
+          </Tag>
+        );
+      })}
     </Row>
-}
+  );
+};
 
-interface IContentProps extends HTagSelectProps{
-    error?:Error;
-    reload:VoidFunction;
+interface IContentProps extends HTagSelectProps {
+  error?: Error;
+  reload: VoidFunction;
 }
 
-export default ({loading,value,options,onChange,fieldNames,error,reload}:IContentProps)=>{
- const len=options?.length||0;
- if (loading&&len===0){
-     return  <Space direction={"vertical"} style={{width:"100%"}}>
-         <Skeleton.Button active size={"small"} block />
-         <Skeleton.Button active size={"small"} block />
-     </Space>
- }
-    if (error && len === 0) {
-        return <NotFoundContent error={error}  reload={reload}/>;
-    }
-    if (len===0){
-        return  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-    }
- return  <ItemOption options={options} value={value} onChange={onChange} fieldNames={fieldNames}/>
-}
+export default ({
+  loading,
+  value,
+  options,
+  onChange,
+  fieldNames,
+  error,
+  reload,
+}: IContentProps) => {
+  const len = options?.length || 0;
+  if (loading && len === 0) {
+    return (
+      <Space direction={"vertical"} style={{ width: "100%" }}>
+        <Skeleton.Button active size={"small"} block />
+        <Skeleton.Button active size={"small"} block />
+      </Space>
+    );
+  }
+  if (error && len === 0) {
+    return <NotFoundContent error={error} reload={reload} />;
+  }
+  if (len === 0) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+  }
+  return (
+    <ItemOption
+      options={options}
+      value={value}
+      onChange={onChange}
+      fieldNames={fieldNames}
+    />
+  );
+};