@hw-component/form 1.9.70 → 1.9.71

package/es/Form/HFormConnect.js

@@ -2,36 +2,12 @@
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import { jsx } from 'react/jsx-runtime';
 import { useFormContext } from './Context/index.js';
-import React, { useEffect } from 'react';
+import React from 'react';
+import { formatMaker } from './hooks/useAddFormat.js';
 
 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 formatMaker = function formatMaker(itemProps, formats) {
-  var _ref = formats || {},
-    inputValue = _ref.inputValue,
-    outputValue = _ref.outputValue;
-  var _itemProps$initValueP = itemProps.initValueProvider,
-    initValueProvider = _itemProps$initValueP === void 0 ? inputValue : _itemProps$initValueP,
-    _itemProps$subProvide = itemProps.subProvider,
-    subProvider = _itemProps$subProvide === void 0 ? outputValue : _itemProps$subProvide;
-  var resultObj = {};
-  if (initValueProvider) {
-    resultObj.inputValue = function (value) {
-      return initValueProvider(itemProps, value);
-    };
-  }
-  if (subProvider) {
-    resultObj.outputValue = function (value) {
-      return subProvider(itemProps, value);
-    };
-  }
-  var keysLen = Object.keys(resultObj).length;
-  return keysLen === 0 ? undefined : resultObj;
-};
 var HFormConnect = (function (component) {
-  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _config$format = config.format,
-    format = _config$format === void 0 ? {} : _config$format;
   var Index = function Index(props, ref) {
     var _useFormContext = useFormContext(),
       form = _useFormContext.form,
@@ -39,12 +15,6 @@ var HFormConnect = (function (component) {
       valueType = _useFormContext$value === void 0 ? "float" : _useFormContext$value;
     var name = props.name;
     var relName = Array.isArray(name) ? name.join(".") : name;
-    useEffect(function () {
-      if (!relName) {
-        return;
-      }
-      form === null || form === void 0 || form.addFormat(relName, formatMaker(props, format[valueType]));
-    }, [valueType, props]);
     var addFormat = function addFormat(aFormat) {
       if (!relName) {
         return;

package/es/Form/config.d.ts

@@ -37,5 +37,6 @@ declare const componentConfig: {
     };
     treeSelect: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, ...props }: import("../Select/TreeSelect").HTreeSelectProps) => JSX.Element;
     text: ({ value, addonBefore, addonAfter, size, ...props }: import("../Text").HFormTextProps) => JSX.Element;
+    richEditor: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
 };
 export default componentConfig;

package/es/Form/config.js

@@ -23,9 +23,10 @@ import TrimInput from '../Input/TrimInput.js';
 import TrimTextArea from '../TextArea/TrimTextArea.js';
 import HInputNumberGroup from '../Input/InputNumberGroup.js';
 import HText from '../Text/index.js';
+import HRichEditor from '../RichEditor/index.js';
 
 var placeholderConfig = {
-  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea"],
+  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea", "richEditor"],
   selectType: ["select", "datePicker", "timePicker", "colorInput", "treeSelect"]
 };
 var componentConfig = {
@@ -52,7 +53,8 @@ var componentConfig = {
   trimTextArea: TrimTextArea,
   inputNumberGroup: HInputNumberGroup,
   treeSelect: HTreeSelect,
-  text: HText
+  text: HText,
+  richEditor: HRichEditor
 };
 
 export { componentConfig as default, placeholderConfig };

package/es/Form/hooks/index.d.ts

@@ -13,4 +13,5 @@ export declare const useInfoReq: ({ initialValues, infoRequest, form, params, re
 };
 export declare const useDefaultComponents: () => any;
 export declare const useValuesChange: ({ onValuesChange, dispatch, form, }: UseValuesChangeModal) => (changedValues: any, values: any) => void;
+export declare const useAddFormat: () => void;
 export {};

package/es/Form/hooks/useAddFormat.d.ts

@@ -0,0 +1,8 @@
+import { addFormatItemModal, HFormItemProps } from "../modal";
+interface ResultModal {
+    inputValue?: (value: Record<string, any>) => Record<string, any>;
+    outputValue?: (value: Record<string, any>) => Record<string, any>;
+}
+export declare const formatMaker: (itemProps: HFormItemProps, formats?: addFormatItemModal) => ResultModal | undefined;
+declare const _default: (props: HFormItemProps) => void;
+export default _default;

package/es/Form/hooks/useAddFormat.js

@@ -0,0 +1,44 @@
+// welcome to hoo hoo hoo
+import { useFormContext } from '../Context/index.js';
+import { useEffect } from 'react';
+
+var formatMaker = function formatMaker(itemProps, formats) {
+  var _ref = formats || {},
+    inputValue = _ref.inputValue,
+    outputValue = _ref.outputValue;
+  var _itemProps$initValueP = itemProps.initValueProvider,
+    initValueProvider = _itemProps$initValueP === void 0 ? inputValue : _itemProps$initValueP,
+    _itemProps$subProvide = itemProps.subProvider,
+    subProvider = _itemProps$subProvide === void 0 ? outputValue : _itemProps$subProvide;
+  var resultObj = {};
+  if (initValueProvider) {
+    resultObj.inputValue = function (value) {
+      return initValueProvider(itemProps, value);
+    };
+  }
+  if (subProvider) {
+    resultObj.outputValue = function (value) {
+      return subProvider(itemProps, value);
+    };
+  }
+  var keysLen = Object.keys(resultObj).length;
+  return keysLen === 0 ? undefined : resultObj;
+};
+var useAddFormat = (function (props) {
+  var name = props.name,
+    itemProps = props.itemProps;
+  var _useFormContext = useFormContext(),
+    form = _useFormContext.form,
+    _useFormContext$value = _useFormContext.valueType,
+    valueType = _useFormContext$value === void 0 ? "float" : _useFormContext$value;
+  var relName = Array.isArray(name) ? name.join(".") : name;
+  useEffect(function () {
+    if (!relName || !itemProps) {
+      return;
+    }
+    form === null || form === void 0 || form.addFormat(relName, formatMaker(itemProps));
+  }, [valueType, props]);
+});
+
+export { useAddFormat as default, formatMaker };
+// powered by hdj

package/es/Form/modal.d.ts

@@ -109,6 +109,10 @@ interface ConfigUploadProps {
     maxSize?: number;
     request?: PromiseFnResult;
 }
+interface ConfigRichEditorProps {
+    fileRequest?: PromiseFnResult;
+    valueType?: "html" | "state";
+}
 export type ComponentModal = React.FunctionComponent<any> | React.ComponentClass<any> | React.ForwardRefExoticComponent<any>;
 export interface ConfigComponentModal {
     Component: ComponentModal;
@@ -127,6 +131,7 @@ export interface IFormConfigContextProps {
     defaultComponent?: DefaultComponentModal;
     formItemStyle?: React.CSSProperties;
     itemProps?: ItemPropsType;
+    richEditorProps?: ConfigRichEditorProps;
 }
 interface ActionModal {
     key: string;

package/es/RichEditor/hooks.d.ts

@@ -0,0 +1,15 @@
+import { IHRichEditorProps } from "src/components/RichEditor/modal";
+export declare const useProps: ({ fileRequest, valueType }: IHRichEditorProps) => {
+    fileRequest: any;
+    valueType: any;
+};
+export declare const useFocusClassname: ({ bordered, onFocus: focusProps, onBlur: blurProps, }: IHRichEditorProps) => {
+    focusClassname: string;
+    onFocus: (editState: any) => void;
+    onBlur: (editState: any) => void;
+};
+export declare const useVC: ({ value, onChange, valueType }: IHRichEditorProps) => {
+    richValue: any;
+    change: (editorState: any) => void;
+};
+export declare const useUploadFn: ({ fileRequest }: IHRichEditorProps) => (params: any) => Promise<void>;

package/es/RichEditor/hooks.js

@@ -0,0 +1,110 @@
+// welcome to hoo hoo hoo
+import _asyncToGenerator from '@babel/runtime-corejs3/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
+import { useFormConfigContext } from '../Form/Context/FormConfigProvider.js';
+import { baseConfig } from '../config.js';
+import { useClassName } from '../hooks/index.js';
+import { useState } from 'react';
+import BraftEditor from 'braft-editor';
+
+var useProps = function useProps(_ref) {
+  var _baseConfig$richEdito;
+  var fileRequest = _ref.fileRequest,
+    valueType = _ref.valueType;
+  var _useFormConfigContext = useFormConfigContext("richEditorProps"),
+    _useFormConfigContext2 = _useFormConfigContext.fileRequest,
+    contextFileRequest = _useFormConfigContext2 === void 0 ? fileRequest : _useFormConfigContext2,
+    _useFormConfigContext3 = _useFormConfigContext.valueType,
+    contextValueType = _useFormConfigContext3 === void 0 ? valueType : _useFormConfigContext3;
+  var cuRequest = fileRequest === null ? (_baseConfig$richEdito = baseConfig.richEditorProps) === null || _baseConfig$richEdito === void 0 ? void 0 : _baseConfig$richEdito.fileRequest : contextFileRequest;
+  return {
+    fileRequest: cuRequest,
+    valueType: contextValueType
+  };
+};
+var useFocusClassname = function useFocusClassname(_ref2) {
+  var bordered = _ref2.bordered,
+    focusProps = _ref2.onFocus,
+    blurProps = _ref2.onBlur;
+  var styleFocusClassName = useClassName("hw-rich-editor-focus");
+  var _useState = useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusClassname = _useState2[0],
+    setFocusClassname = _useState2[1];
+  var onFocus = function onFocus(editState) {
+    focusProps === null || focusProps === void 0 || focusProps(editState);
+    if (!bordered) {
+      setFocusClassname("");
+      return;
+    }
+    setFocusClassname(styleFocusClassName);
+  };
+  var onBlur = function onBlur(editState) {
+    setFocusClassname("");
+    blurProps === null || blurProps === void 0 || blurProps(editState);
+  };
+  return {
+    focusClassname: focusClassname,
+    onFocus: onFocus,
+    onBlur: onBlur
+  };
+};
+var useVC = function useVC(_ref3) {
+  var value = _ref3.value,
+    onChange = _ref3.onChange,
+    valueType = _ref3.valueType;
+  var richValue = valueType === "html" ? BraftEditor.createEditorState(value) : value;
+  var change = function change(editorState) {
+    var changeVal = valueType === "html" ? editorState.toHTML() : editorState;
+    var isEmpty = !!richValue ? richValue.isEmpty() : true;
+    if (isEmpty && editorState.isEmpty()) {
+      return;
+    }
+    onChange === null || onChange === void 0 || onChange(changeVal);
+  };
+  return {
+    richValue: richValue,
+    change: change
+  };
+};
+var useUploadFn = function useUploadFn(_ref4) {
+  var fileRequest = _ref4.fileRequest;
+  return /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(params) {
+      var file, id, _yield$fileRequest, url;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            file = params.file, id = params.id;
+            _context.next = 3;
+            return fileRequest === null || fileRequest === void 0 ? void 0 : fileRequest(file, params);
+          case 3:
+            _yield$fileRequest = _context.sent;
+            url = _yield$fileRequest.url;
+            params.success({
+              url: url,
+              meta: {
+                id: id,
+                title: file.name,
+                alt: "媒体资源",
+                loop: false,
+                autoPlay: false,
+                controls: true,
+                poster: url
+              }
+            });
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+};
+
+export { useFocusClassname, useProps, useUploadFn, useVC };
+// powered by hdj

package/es/RichEditor/index.d.ts

@@ -0,0 +1,4 @@
+import "braft-editor/dist/index.css";
+import React from "react";
+declare const _default: React.ForwardRefExoticComponent<import("../Form/modal").HFormItemProps & React.RefAttributes<any>>;
+export default _default;

package/es/RichEditor/index.js

@@ -0,0 +1,96 @@
+// welcome to hoo hoo hoo
+import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
+import { jsx } from 'react/jsx-runtime';
+import BraftEditor from 'braft-editor';
+import 'braft-editor/dist/index.css';
+import { useProps, useFocusClassname, useVC, useUploadFn } from './hooks.js';
+import { useClassName } from '../hooks/index.js';
+import React from 'react';
+import HFormConnect from '../Form/HFormConnect.js';
+
+var _excluded = ["value", "onChange", "valueType", "fileRequest", "media", "contentStyle", "bordered", "onBlur", "onFocus", "addFormat"];
+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 defaultContentStyle = {
+  height: 400
+};
+var Index = function Index(_ref, ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    valueType = _ref.valueType,
+    fileRequest = _ref.fileRequest,
+    media = _ref.media,
+    _ref$contentStyle = _ref.contentStyle,
+    contentStyle = _ref$contentStyle === void 0 ? defaultContentStyle : _ref$contentStyle,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? true : _ref$bordered,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    addFormat = _ref.addFormat,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useProps = useProps({
+      fileRequest: fileRequest,
+      valueType: valueType
+    }),
+    fileReq = _useProps.fileRequest,
+    vType = _useProps.valueType;
+  var _useFocusClassname = useFocusClassname({
+      bordered: bordered,
+      onBlur: onBlur,
+      onFocus: onFocus
+    }),
+    focusClassname = _useFocusClassname.focusClassname,
+    selfFocus = _useFocusClassname.onFocus,
+    selfBlur = _useFocusClassname.onBlur;
+  var _useVC = useVC({
+      value: value,
+      onChange: onChange,
+      valueType: vType
+    }),
+    richValue = _useVC.richValue,
+    change = _useVC.change;
+  var uploadFn = useUploadFn({
+    fileRequest: fileReq
+  });
+  var bodyClassName = useClassName("hw-rich-editor");
+  var borderClassName = useClassName("hw-rich-editor-border");
+  addFormat === null || addFormat === void 0 || addFormat({
+    float: {
+      inputValue: function inputValue(item, initValue) {
+        var _item$name = item.name,
+          name = _item$name === void 0 ? "" : _item$name;
+        var keyName = name;
+        var itemVal = initValue[keyName];
+        var initVal = typeof itemVal === "string" ? BraftEditor.createEditorState(itemVal) : itemVal;
+        return _defineProperty({}, keyName, initVal);
+      },
+      outputValue: function outputValue(item, _outputValue) {
+        var _item$name2 = item.name,
+          name = _item$name2 === void 0 ? "" : _item$name2;
+        var keyName = name;
+        var itemVal = _outputValue[keyName];
+        var outputVal = typeof itemVal === "string" ? itemVal : itemVal === null || itemVal === void 0 ? void 0 : itemVal.toHTML();
+        return _defineProperty({}, keyName, outputVal);
+      }
+    }
+  });
+  return jsx("div", {
+    className: "".concat(bodyClassName, " ").concat(bordered ? borderClassName : "", " ").concat(focusClassname),
+    children: jsx(BraftEditor, _objectSpread({
+      contentStyle: contentStyle,
+      value: richValue,
+      onChange: change,
+      onFocus: selfFocus,
+      ref: ref,
+      onBlur: selfBlur,
+      media: _objectSpread({
+        uploadFn: uploadFn
+      }, media)
+    }, props))
+  });
+};
+var HRichEditor = HFormConnect(/*#__PURE__*/React.forwardRef(Index));
+
+export { HRichEditor as default };
+// powered by hdj

package/es/RichEditor/modal.d.ts

@@ -0,0 +1,11 @@
+import { BraftEditorProps, EditorState } from "braft-editor";
+import { PromiseFnResult } from "../modal";
+import { addFormatItemModal } from "../Form/modal";
+export interface IHRichEditorProps extends Omit<BraftEditorProps, "value" | "onChange"> {
+    value?: string | EditorState;
+    onChange?: (value: string | EditorState) => void;
+    fileRequest?: PromiseFnResult;
+    valueType?: "html" | "state";
+    bordered?: boolean;
+    addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}

package/es/config.js

@@ -69,7 +69,33 @@ var baseConfig = {
   },
   defaultComponent: {},
   formItemStyle: {},
-  itemProps: {}
+  itemProps: {},
+  richEditorProps: {
+    fileRequest: function () {
+      var _fileRequest = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(file) {
+        var url;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return fileToBase64(file);
+            case 2:
+              url = _context2.sent;
+              return _context2.abrupt("return", {
+                url: url
+              });
+            case 4:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function fileRequest(_x2) {
+        return _fileRequest.apply(this, arguments);
+      }
+      return fileRequest;
+    }()
+  }
 };
 
 export { baseConfig };

package/es/index.css

@@ -290,3 +290,25 @@
 .ant-form-item-has-error .ant-hw-input-group-body {
   border-color: #ff4d4f !important;
 }
+.ant-hw-rich-editor {
+  box-sizing: border-box;
+  width: 100%;
+}
+.ant-hw-rich-editor .bf-container .public-DraftEditorPlaceholder-root {
+  color: #bfbfbf;
+  font-size: 14px;
+}
+.ant-hw-rich-editor-border {
+  border: 1px solid #d9d9d9;
+  border-radius: 2px;
+}
+.ant-hw-rich-editor-border:hover {
+  border-color: #40a9ff;
+}
+.ant-hw-rich-editor-focus {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+.ant-form-item-has-error .ant-hw-rich-editor-border {
+  border-color: #ff4d4f !important;
+}

package/es/index.d.ts

@@ -8,6 +8,7 @@ export { default as HBasicForm } from "./Form/Basic";
 export { default as HInputGroup } from "./InputGroup";
 export declare const HSelect: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HInput: ({ copy: copyProps, value, addonAfter, ...props }: import("./Input/modal").HInputProps) => JSX.Element;
+export declare const HRichEditor: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HSelectInput: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
 export declare const HUrlUpload: ({ placeholder, value, onChange, mediaType, inputHelper, style, exFiles, spaceSize, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;

package/es/index.js

@@ -13,6 +13,7 @@ import Index$2 from './DialogForm/DrawerForm/index.js';
 
 var HSelect = componentConfig.select;
 var HInput = componentConfig.input;
+var HRichEditor = componentConfig.richEditor;
 var HSelectInput = componentConfig.selectInput;
 var HUpload = componentConfig.upload;
 var HUrlUpload = componentConfig.urlUpload.Component;
@@ -36,5 +37,5 @@ var HTrimInput = componentConfig.trimInput;
 var HTrimTextArea = componentConfig.trimTextArea;
 var HInputNumberGroup = componentConfig.inputNumberGroup.Component;
 
-export { HButtonInput, HCascader, HCheckBox, HCheckboxGroup, HColorInput, HDatePicker, HDrawerForm, HInput, HInputNumber, HInputNumberGroup, HModalForm, HPageHandler, HRadioGroup, HRangePicker, HSelect, HSelectInput, HSwitch, 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, HTextArea, HTimePicker, HTrimInput, HTrimTextArea, HUpload, HUrlUpload, HVerificationCodeInput };
 // powered by hdj

package/lib/Form/Basic.d.ts

@@ -1,3 +1,3 @@
 import type { HFormProps } from "./modal";
-declare const _default: ({ configData, gutter, dismissOnPressEnter, itemSpan, labelWidth, formItemStyle, flexBox: formFlexBox }: HFormProps) => JSX.Element;
+declare const _default: ({ configData, gutter, dismissOnPressEnter, itemSpan, labelWidth, formItemStyle, flexBox: formFlexBox, }: HFormProps) => JSX.Element;
 export default _default;

package/lib/Form/FormItem/index.js

@@ -6,6 +6,7 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('./hooks.js');
 var index = require('../Context/index.js');
+var useAddFormat = require('../hooks/useAddFormat.js');
 
 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; }
@@ -28,6 +29,7 @@ var Item = (function (props) {
     colon = props.colon,
     _props$rowWrapper = props.rowWrapper,
     rowWrapper = _props$rowWrapper === void 0 ? formRowWrapper : _props$rowWrapper;
+  useAddFormat.default(props);
   var Component = hooks.useFormItemDomControl(props);
   return jsxRuntime.jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
     labelAlign: labelAlign,

package/lib/Form/HFormConnect.d.ts

@@ -1,5 +1,4 @@
-import type { HFormItemProps } from "@/components/Form/modal";
 import React from "react";
-import type { ConnectConfigModal } from "@/components/Form/modal";
-declare const _default: (component: React.FunctionComponent | React.ComponentClass | React.ForwardRefRenderFunction<any, any>, config?: ConnectConfigModal) => React.ForwardRefExoticComponent<HFormItemProps & React.RefAttributes<any>>;
+import type { HFormItemProps } from "./modal";
+declare const _default: (component: React.FunctionComponent | React.ComponentClass | React.ForwardRefRenderFunction<any, any>) => React.ForwardRefExoticComponent<HFormItemProps & React.RefAttributes<any>>;
 export default _default;

package/lib/Form/HFormConnect.js

@@ -6,35 +6,11 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('./Context/index.js');
 var React = require('react');
+var useAddFormat = require('./hooks/useAddFormat.js');
 
 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 formatMaker = function formatMaker(itemProps, formats) {
-  var _ref = formats || {},
-    inputValue = _ref.inputValue,
-    outputValue = _ref.outputValue;
-  var _itemProps$initValueP = itemProps.initValueProvider,
-    initValueProvider = _itemProps$initValueP === void 0 ? inputValue : _itemProps$initValueP,
-    _itemProps$subProvide = itemProps.subProvider,
-    subProvider = _itemProps$subProvide === void 0 ? outputValue : _itemProps$subProvide;
-  var resultObj = {};
-  if (initValueProvider) {
-    resultObj.inputValue = function (value) {
-      return initValueProvider(itemProps, value);
-    };
-  }
-  if (subProvider) {
-    resultObj.outputValue = function (value) {
-      return subProvider(itemProps, value);
-    };
-  }
-  var keysLen = Object.keys(resultObj).length;
-  return keysLen === 0 ? undefined : resultObj;
-};
 var HFormConnect = (function (component) {
-  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var _config$format = config.format,
-    format = _config$format === void 0 ? {} : _config$format;
   var Index = function Index(props, ref) {
     var _useFormContext = index.useFormContext(),
       form = _useFormContext.form,
@@ -42,17 +18,11 @@ var HFormConnect = (function (component) {
       valueType = _useFormContext$value === void 0 ? "float" : _useFormContext$value;
     var name = props.name;
     var relName = Array.isArray(name) ? name.join(".") : name;
-    React.useEffect(function () {
-      if (!relName) {
-        return;
-      }
-      form === null || form === void 0 || form.addFormat(relName, formatMaker(props, format[valueType]));
-    }, [valueType, props]);
     var addFormat = function addFormat(aFormat) {
       if (!relName) {
         return;
       }
-      form === null || form === void 0 || form.addFormat(relName, formatMaker(props, aFormat[valueType]));
+      form === null || form === void 0 || form.addFormat(relName, useAddFormat.formatMaker(props, aFormat[valueType]));
     };
     var addDispatchListener = function addDispatchListener(key, fn) {
       var dispatch = props.dispatch;

package/lib/Form/config.d.ts

@@ -37,5 +37,6 @@ declare const componentConfig: {
     };
     treeSelect: ({ request, onlyCheckChild, multiple, treeCheckable, treeData, fieldNames, ...props }: import("../Select/TreeSelect").HTreeSelectProps) => JSX.Element;
     text: ({ value, addonBefore, addonAfter, size, ...props }: import("../Text").HFormTextProps) => JSX.Element;
+    richEditor: import("react").ForwardRefExoticComponent<import("./modal").HFormItemProps & import("react").RefAttributes<any>>;
 };
 export default componentConfig;

package/lib/Form/config.js

@@ -26,9 +26,10 @@ var TrimInput = require('../Input/TrimInput.js');
 var TrimTextArea = require('../TextArea/TrimTextArea.js');
 var InputNumberGroup = require('../Input/InputNumberGroup.js');
 var index$e = require('../Text/index.js');
+var index$f = require('../RichEditor/index.js');
 
 var placeholderConfig = {
-  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea"],
+  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload", "textArea", "richEditor"],
   selectType: ["select", "datePicker", "timePicker", "colorInput", "treeSelect"]
 };
 var componentConfig = {
@@ -55,7 +56,8 @@ var componentConfig = {
   trimTextArea: TrimTextArea.default,
   inputNumberGroup: InputNumberGroup.default,
   treeSelect: TreeSelect.default,
-  text: index$e.default
+  text: index$e.default,
+  richEditor: index$f.default
 };
 
 exports.default = componentConfig;

package/lib/Form/hooks/index.d.ts

@@ -13,4 +13,5 @@ export declare const useInfoReq: ({ initialValues, infoRequest, form, params, re
 };
 export declare const useDefaultComponents: () => any;
 export declare const useValuesChange: ({ onValuesChange, dispatch, form, }: UseValuesChangeModal) => (changedValues: any, values: any) => void;
+export declare const useAddFormat: () => void;
 export {};

package/lib/Form/hooks/useAddFormat.d.ts

@@ -0,0 +1,8 @@
+import { addFormatItemModal, HFormItemProps } from "../modal";
+interface ResultModal {
+    inputValue?: (value: Record<string, any>) => Record<string, any>;
+    outputValue?: (value: Record<string, any>) => Record<string, any>;
+}
+export declare const formatMaker: (itemProps: HFormItemProps, formats?: addFormatItemModal) => ResultModal | undefined;
+declare const _default: (props: HFormItemProps) => void;
+export default _default;