@hw-component/form 0.0.4 → 0.0.5-beta-v1

package/lib/hooks/index.js

@@ -0,0 +1,78 @@
+'use strict';
+
+var _typeof = require('@babel/runtime-corejs3/helpers/typeof');
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/map');
+var _Array$isArray = require('@babel/runtime-corejs3/core-js/array/is-array');
+var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/concat');
+var _Object$keys = require('@babel/runtime-corejs3/core-js/object/keys');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/for-each');
+var _Symbol$toPrimitive = require('@babel/runtime-corejs3/core-js/symbol/to-primitive');
+var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js/object/get-own-property-symbols');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptor');
+var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptors');
+var _Object$defineProperties = require('@babel/runtime-corejs3/core-js/object/define-properties');
+var _Object$defineProperty = require('@babel/runtime-corejs3/core-js/object/define-property');
+var React = require('react');
+var configProvider = require('antd/es/config-provider');
+var FormConfigProvider = require('../Form/Context/FormConfigProvider.js');
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[_Symbol$toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var useChangeOptions = function useChangeOptions(_ref) {
+  var options = _ref.options,
+    _ref$fieldNames = _ref.fieldNames,
+    fieldNames = _ref$fieldNames === void 0 ? {} : _ref$fieldNames;
+  return React.useMemo(function () {
+    return options === null || options === void 0 ? void 0 : _mapInstanceProperty(options).call(options, function (item) {
+      var _context;
+      var _fieldNames$label = fieldNames.label,
+        label = _fieldNames$label === void 0 ? "" : _fieldNames$label,
+        _fieldNames$value = fieldNames.value,
+        value = _fieldNames$value === void 0 ? "" : _fieldNames$value;
+      var relLabel = item[label],
+        relVal = item[value],
+        oItem = _objectWithoutProperties(item, _mapInstanceProperty(_context = [label, value]).call(_context, _toPropertyKey));
+      return _objectSpread(_objectSpread({}, oItem), {}, {
+        label: relLabel,
+        value: relVal
+      });
+    });
+  }, [options]);
+};
+var useClassName = function useClassName(className) {
+  var config = React.useContext(configProvider.ConfigContext);
+  return React.useMemo(function () {
+    var _context3;
+    if (_Array$isArray(className)) {
+      var classNames = _mapInstanceProperty(className).call(className, function (item) {
+        var _context2;
+        return _concatInstanceProperty(_context2 = "".concat(config.getPrefixCls(), "-")).call(_context2, item);
+      });
+      return classNames.join(" ");
+    }
+    return _concatInstanceProperty(_context3 = "".concat(config.getPrefixCls(), "-")).call(_context3, className);
+  }, [className]);
+};
+var useMatchConfigProps = function useMatchConfigProps(matchProps) {
+  var globalConfig = FormConfigProvider.useFormConfigContext();
+  var keys = _Object$keys(matchProps);
+  var resultMatchProps = {};
+  _forEachInstanceProperty(keys).call(keys, function (key) {
+    if (!matchProps[key]) {
+      resultMatchProps[key] = globalConfig[key];
+      return;
+    }
+    resultMatchProps[key] = matchProps[key];
+  });
+  return resultMatchProps;
+};
+
+exports.useChangeOptions = useChangeOptions;
+exports.useClassName = useClassName;
+exports.useMatchConfigProps = useMatchConfigProps;
+// powered by h

package/lib/index.css

@@ -1,3 +1,44 @@
-.ant-hw-option:hover {
+.ant-hw-all-check-box .ant-select-item-option-active:not( .ant-select-item-option-disabled) {
+  background-color: transparent;
+}
+.ant-hw-all-check-box .ant-select-item-option-selected:not( .ant-select-item-option-disabled) {
+  background-color: #e6f7ff;
+}
+.ant-hw-all-check-box .ant-select-item-option:not( .ant-select-item-option-selected):hover {
   background-color: #f5f5f5;
 }
+.ant-hw-form-item-colon:after {
+  position: relative;
+  top: -0.5px;
+  margin: 0 0 0 2px;
+  content: ":";
+}
+.ant-hw-form-item-required:before {
+  display: inline-block;
+  margin-right: 4px;
+  color: #ff4d4f;
+  font-size: 14px;
+  font-family: SimSun, sans-serif;
+  line-height: 1;
+  content: "*";
+}
+.ant-hw-form-base-item {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+  min-height: 32px;
+}
+.ant-hw-color-box {
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ant-hw-color-input-picker {
+  box-shadow: 0 0 0 0 !important;
+}

package/lib/index.d.ts

@@ -1,11 +1,26 @@
-export { default as HSelect } from "./Select";
-export { default as HInput } from "./Input";
-export { default as HInputNumber } from "./Input/InputNumber";
-export { default as HSelectInput } from "./Input/SelectInput";
-export { default as HButtonInput } from "./Input/ButtonInput";
-export { default as HCheckboxGroup } from "./CheckboxGroup";
-export { default as HCheckBox } from "./CheckboxGroup/CheckBox";
-export { default as HRadioGroup } from "./RadioGroup";
-export { default as HSwitch } from "./Switch";
-export { default as HDatePicker } from "./DatePicker";
-export { default as HRangePicker } from "./DatePicker/RangePicker";
+/// <reference types="react" />
+import "./styles/index.less";
+export { default as HForm } from "./Form";
+export { default as useHForm } from "./Form/hooks/useHForm";
+export { useHDialogForm } from "./DialogForm/hooks";
+export { default as HFormConnect } from "./Form/HFormConnect";
+export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
+export declare const HSelect: ({ style, mode, options, modeConfig, value, onChange, fieldNames: propsFieldNames, request, manual, optionLabelProp, filterProvider, optionFilterProp, serviceSearch, onSearch: propsOnSearch, filterOption, showSearch, labelInValue, noMatchItemRender, allSelect, ...props }: import("./Select/modal").HSelectProps) => JSX.Element;
+export declare const HInput: ({ ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
+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, ...props }: import("./Upload/modal").IUrlUploadProps) => JSX.Element;
+export declare const HButtonInput: import("react").FC<import("./Input/modal").HButtonInputProps>;
+export declare const HCheckBox: import("react").FC<import("./CheckboxGroup/modal").HCheckboxProps>;
+export declare const HSwitch: import("react").FC<import("./Switch").HSwitchProps>;
+export declare const HCheckboxGroup: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HDatePicker: import("react").FC<import("./TDPicker/modal").HDatePickerProps>;
+export declare const HRangePicker: import("react").ForwardRefExoticComponent<import("./Form/modal").HFormItemProps & import("react").RefAttributes<any>>;
+export declare const HRadioGroup: ({ value, options, onChange, fieldNames: propsFieldNames, ...props }: import("./RadioGroup").HRadioGroupProps) => JSX.Element;
+export declare const HTimePicker: ({ value, format, onChange, ...props }: import("./TDPicker/modal").HTimePickerProps) => JSX.Element;
+export declare const HInputNumber: ({ style, ...props }: import("antd").InputNumberProps<string | number>) => JSX.Element;
+export declare const HPageHandler: import("react").FC<import("./PageHandler/modal").IHPageHandler<any>>;
+export declare const HTextArea: ({ autoSize, ...props }: import("antd/es/input").TextAreaProps) => JSX.Element;
+export declare const HColorInput: ({ value, onChange, ...props }: import("./Input/modal").HInputProps<any>) => JSX.Element;
+export declare const HModalForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, initialValues, onFinish, params, onOk, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;
+export declare const HDrawerForm: ({ visible, title, onCancel, configData, infoRequest, request, afterClose, dialogForm, closable, initialValues, labelWidth, onOk, onFinish, size, form, footer, params, ...props }: import("./DialogForm/modal").DialogFormProps<any, any>) => JSX.Element;

package/lib/index.js

@@ -1,28 +1,57 @@
 'use strict';
 
-var index = require('./Select/index.js');
-var index$1 = require('./Input/index.js');
-var InputNumber = require('./Input/InputNumber.js');
-var SelectInput = require('./Input/SelectInput.js');
-var ButtonInput = require('./Input/ButtonInput.js');
-var index$2 = require('./CheckboxGroup/index.js');
-var index$3 = require('./CheckboxGroup/CheckBox/index.js');
-var index$4 = require('./RadioGroup/index.js');
-var index$5 = require('./Switch/index.js');
-var index$6 = require('./DatePicker/index.js');
-var RangePicker = require('./DatePicker/RangePicker.js');
+var config = require('./Form/config.js');
+var index$1 = require('./PageHandler/index.js');
+var index = require('./Form/index.js');
+var useHForm = require('./Form/hooks/useHForm.js');
+var hooks = require('./DialogForm/hooks.js');
+var HFormConnect = require('./Form/HFormConnect.js');
+var FormConfigProvider = require('./Form/Context/FormConfigProvider.js');
+var ModalForm = require('./DialogForm/ModalForm.js');
+var index$2 = require('./DialogForm/DrawerForm/index.js');
 
+var HSelect = config.default.select;
+var HInput = config.default.input;
+var HSelectInput = config.default.selectInput;
+var HUpload = config.default.upload;
+var HUrlUpload = config.default.urlUpload;
+var HButtonInput = config.default.buttonInput;
+var HCheckBox = config.default.checkBox;
+var HSwitch = config.default["switch"];
+var HCheckboxGroup = config.default.checkboxGroup;
+var HDatePicker = config.default.datePicker;
+var HRangePicker = config.default.rangePicker.Component;
+var HRadioGroup = config.default.radioGroup;
+var HTimePicker = config.default.timePicker;
+var HInputNumber = config.default.inputNumber;
+var HPageHandler = index$1.default;
+var HTextArea = config.default.textArea;
+var HColorInput = config.default.colorInput;
+var HModalForm = ModalForm.default;
+var HDrawerForm = index$2.default;
 
-
-exports.HSelect = index.default;
-exports.HInput = index$1.default;
-exports.HInputNumber = InputNumber.default;
-exports.HSelectInput = SelectInput.default;
-exports.HButtonInput = ButtonInput.default;
-exports.HCheckboxGroup = index$2.default;
-exports.HCheckBox = index$3.default;
-exports.HRadioGroup = index$4.default;
-exports.HSwitch = index$5.default;
-exports.HDatePicker = index$6.default;
-exports.HRangePicker = RangePicker.default;
+exports.HForm = index.default;
+exports.useHForm = useHForm.default;
+exports.useHDialogForm = hooks.useHDialogForm;
+exports.HFormConnect = HFormConnect.default;
+exports.HFormConfigProvider = FormConfigProvider.default;
+exports.HButtonInput = HButtonInput;
+exports.HCheckBox = HCheckBox;
+exports.HCheckboxGroup = HCheckboxGroup;
+exports.HColorInput = HColorInput;
+exports.HDatePicker = HDatePicker;
+exports.HDrawerForm = HDrawerForm;
+exports.HInput = HInput;
+exports.HInputNumber = HInputNumber;
+exports.HModalForm = HModalForm;
+exports.HPageHandler = HPageHandler;
+exports.HRadioGroup = HRadioGroup;
+exports.HRangePicker = HRangePicker;
+exports.HSelect = HSelect;
+exports.HSelectInput = HSelectInput;
+exports.HSwitch = HSwitch;
+exports.HTextArea = HTextArea;
+exports.HTimePicker = HTimePicker;
+exports.HUpload = HUpload;
+exports.HUrlUpload = HUrlUpload;
 // powered by h

package/lib/modal.d.ts

@@ -0,0 +1,16 @@
+export interface ValueCheckMapModal {
+    checked?: any;
+    noChecked?: any;
+}
+export type PromiseFnResult<T = any, R = any> = (params: T, formDataValues?: any) => Promise<R>;
+export interface ValueSwitchMapModal {
+    open?: any;
+    close?: any;
+}
+export interface DataFnProvider<P = any, R = any> {
+    (name: P): R;
+}
+export interface DateRangePickerValueMapModal {
+    start?: string | DataFnProvider<string, string>;
+    end?: string | DataFnProvider<string, string>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.4",
+  "version": "0.0.5-beta-v1",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",
@@ -27,9 +27,12 @@
     ]
   },
   "dependencies": {
+    "@ant-design/icons": "4.6.2",
+    "@types/react-color": "^3.0.9",
     "ahooks": "2.10.9",
-    "antd": "4.19.0",
-    "react": "16.14.0",
+    "antd": "4.20.7",
+    "react": "17.0.0",
+    "react-color": "^2.19.3",
     "react-dom": "17.0.2",
     "react-router-dom": "^6.11.2"
   },
@@ -45,7 +48,7 @@
     "@rollup/plugin-inject": "^5.0.3",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-url": "^8.0.1",
-    "@types/react": "17.0.14",
+    "@types/react": "17.0.17",
     "@types/react-dom": "17.0.9",
     "@typescript-eslint/eslint-plugin": "^5.59.7",
     "@umijs/fabric": "^2.14.1",

package/scripts/rollup.config.js

@@ -7,9 +7,7 @@ const typescript = require("rollup-plugin-typescript2");
 const autoprefixer = require("autoprefixer");
 const inject = require("@rollup/plugin-inject");
 const url = require("@rollup/plugin-url");
-const pkg = require("../package.json");
 const postcss = require("rollup-plugin-postcss");
-const prefix = pkg.cssPrefix;
 const input = path.resolve(__dirname, "../src/components/index.tsx");
 const outDir = path.resolve(__dirname, "../lib");
 const esOutDir = path.resolve(__dirname, "../es");
@@ -27,8 +25,8 @@ module.exports = {
     {
       dir: esOutDir,
       format: "es",
-      banner: "// welcome to ww-building-blocks-tmp",
-      footer: "// powered by ww",
+      banner: "// welcome to hoo hoo hoo",
+      footer: "// powered by hdj",
       entryFileNames: "[name].js",
       exports: "named",
       preserveModules: true,

package/scripts/webpack.config.js

@@ -42,18 +42,15 @@ module.exports = {
           "style-loader",
           {
             loader: "css-loader",
-            options: {
-              modules: true,
-            },
           },
           {
             loader: "less-loader",
-            options:{
-              lessOptions:{
+            options: {
+              lessOptions: {
                 javascriptEnabled: true,
-              }
-            }
-          }
+              },
+            },
+          },
         ],
       },
     ],

package/src/Layout.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Menu } from "antd";
-import styles from "./index.less";
+import "./index.less";
 import type { RouteModal } from "./routes";
 import routes from "./routes";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
@@ -35,9 +35,9 @@ export default () => {
     setOpenKey(openKeys);
   }, [pathname]);
   return (
-    <div className={styles.layout}>
+    <div className="layout">
       <Menu
-        className={styles.menu}
+        className="menu"
         selectedKeys={keys}
         openKeys={openKey}
         onOpenChange={(openKeys) => {
@@ -53,7 +53,7 @@ export default () => {
           return menuItem(item);
         })}
       </Menu>
-      <div className={styles.body}>
+      <div className="body">
         <Outlet />
       </div>
     </div>

package/src/components/CheckboxGroup/CheckBox/index.tsx

@@ -1,18 +1,18 @@
-import type { CheckboxProps } from "antd/lib/checkbox/Checkbox";
 import { Checkbox } from "antd";
 import React, { useMemo } from "react";
-import { baseConfig } from "../../config";
 import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useMatchConfigProps } from "../../hooks";
 
-interface IProps extends CheckboxProps {
-  valueCheckMap?: ValueCheckMapModal;
-}
-const Index: React.FC<IProps> = ({
+const Index: React.FC<HCheckboxProps> = ({
   value,
   onChange,
   children,
-  valueCheckMap = baseConfig.defaultValueCheckMap,
+  valueMap: propsValueCheckMap,
 }) => {
+  const { valueCheckMap = {} } = useMatchConfigProps({
+    valueCheckMap: propsValueCheckMap,
+  }); //匹配全局
   const checkedVal = useMemo(() => {
     const { checked } = valueCheckMap;
     if (value === checked) {

package/src/components/CheckboxGroup/hooks.ts

@@ -1,14 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
 import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
-import { baseConfig } from "../config";
 
 const changValProvider = ({
   value,
   options,
-  valueCheckMap = baseConfig.defaultValueCheckMap,
+  valueMap = {},
 }: HCheckboxProps) => {
   const newVal = { ...value };
-  const { checked, noChecked } = valueCheckMap;
+  const { checked, noChecked } = valueMap;
   options?.forEach((item) => {
     const { value: itemVal } = item;
     if (newVal[itemVal] !== checked) {
@@ -20,7 +19,7 @@ const changValProvider = ({
 
 export const useValueProvider = ({
   value,
-  valueCheckMap = baseConfig.defaultValueCheckMap,
+  valueMap = {},
   keyInValue = true,
   onChange,
   options,
@@ -28,21 +27,21 @@ export const useValueProvider = ({
   const [val, setVal] = useState<Record<any, any>>({});
   const oldValueCheckMap = useMemo(() => {
     return {
-      valueCheckMap,
+      valueMap,
     };
-  }, []);
+  }, []); //存储老的map
   useEffect(() => {
     setVal((oldVal) => {
       return changValProvider({
         value: oldVal,
         options,
-        valueCheckMap: oldValueCheckMap.valueCheckMap,
+        valueMap: oldValueCheckMap.valueMap,
       });
     });
   }, [options]); //初始化数据
   useEffect(() => {
-    const { checked: oldChecked } = oldValueCheckMap.valueCheckMap;
-    const { checked, noChecked } = valueCheckMap;
+    const { checked: oldChecked } = oldValueCheckMap.valueMap;
+    const { checked, noChecked } = valueMap;
     setVal((oldVal) => {
       const newVal = { ...oldVal };
       const keys = Object.keys(newVal);
@@ -53,13 +52,13 @@ export const useValueProvider = ({
         }
         newVal[key] = noChecked;
       });
-      oldValueCheckMap.valueCheckMap = valueCheckMap;
+      oldValueCheckMap.valueMap = valueMap;
       return newVal;
     });
-  }, [valueCheckMap]);
+  }, [valueMap]);
 
   useEffect(() => {
-    const { checked } = oldValueCheckMap.valueCheckMap;
+    const { checked } = oldValueCheckMap.valueMap;
     if (!value) {
       return;
     }
@@ -77,7 +76,7 @@ export const useValueProvider = ({
   }, [value]);
 
   const change = (key: any, changeVal: any) => {
-    const { checked, noChecked } = valueCheckMap;
+    const { checked, noChecked } = valueMap;
     const newVal = { ...val };
     newVal[key] = noChecked;
     if (changeVal === checked) {

package/src/components/CheckboxGroup/index.tsx

@@ -1,27 +1,58 @@
 import { Space } from "antd";
-import { useChangeOptions } from "../hooks/useChangeOptions";
 import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
 import { useValueProvider } from "./hooks";
 import Checkbox from "./CheckBox";
+import { useMatchConfigProps, useChangeOptions } from "../hooks";
+import HFormConnect from "../Form/HFormConnect";
+import React from "react";
 
-export default ({
+const Index = ({
   options,
   fieldNames,
   onChange,
-  valueCheckMap,
+  valueMap,
   value,
   disabled,
   keyInValue = true,
+  addFormat,
 }: HCheckboxProps) => {
-  const checkOptions = useChangeOptions({ options, fieldNames });
+  const { valueCheckMap: resultValueCheckMap, fieldNames: resultFieldNames } =
+    useMatchConfigProps({ fieldNames, valueCheckMap: valueMap }); //匹配全局
+  const checkOptions = useChangeOptions({
+    options,
+    fieldNames: resultFieldNames,
+  });
   const { val, change } = useValueProvider({
     options: checkOptions,
     onChange,
-    valueCheckMap,
+    valueMap: resultValueCheckMap,
     keyInValue,
     value,
   });
-  console.log(val);
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name = "" } = item;
+        const keys = checkOptions?.map((optItem) => {
+          return optItem.value;
+        });
+        const resultObj = {};
+        keys?.forEach((key) => {
+          resultObj[key] = initValue[key];
+        });
+        return {
+          [name]: resultObj,
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name = "" } = item;
+        const { [name]: itemVal = {} } = outputValue;
+        return {
+          ...itemVal,
+        };
+      },
+    },
+  });
   return (
     <Space>
       {checkOptions?.map((item) => {
@@ -34,7 +65,7 @@ export default ({
             onChange={(changeVal) => {
               change(itemVal, changeVal);
             }}
-            valueCheckMap={valueCheckMap}
+            valueMap={valueMap}
             disabled={disabled}
           >
             {label}
@@ -44,3 +75,5 @@ export default ({
     </Space>
   );
 };
+
+export default HFormConnect(Index);

package/src/components/CheckboxGroup/{modal.d.ts → modal.ts}

@@ -1,12 +1,15 @@
 import type { CheckboxProps } from "antd/lib/checkbox/Checkbox";
 import type { SelectProps } from "antd";
+import type { addFormatItemModal } from "../Form/modal";
+import type { ValueCheckMapModal } from "../modal";
 
 export interface HCheckboxProps
   extends Omit<CheckboxProps, "value" | "onChange"> {
   options?: Record<string, any>[];
   fieldNames?: SelectProps["fieldNames"];
-  valueCheckMap?: ValueCheckMapModal;
+  valueMap?: ValueCheckMapModal;
   keyInValue?: boolean;
   value?: Record<string, any> | any[];
   onChange?: (value: Record<string, any> | any[]) => void;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }

package/src/components/DialogForm/DrawerForm/Footer.tsx

@@ -0,0 +1,20 @@
+import { Row, Space, Button } from "antd";
+
+interface IProps {
+  onOk?: VoidFunction;
+  onCancel?: VoidFunction;
+  confirmLoading?: boolean;
+}
+
+export default ({ onCancel, onOk, confirmLoading }: IProps) => {
+  return (
+    <Row justify={"end"}>
+      <Space size={"middle"}>
+        <Button onClick={onCancel}>关闭</Button>
+        <Button type={"primary"} onClick={onOk} loading={confirmLoading}>
+          确定
+        </Button>
+      </Space>
+    </Row>
+  );
+};

package/src/components/DialogForm/DrawerForm/Title.tsx

@@ -0,0 +1,12 @@
+import type { ModalProps } from "antd";
+import { Row } from "antd";
+import { CloseOutlined } from "@ant-design/icons";
+
+export default ({ title, closable, onCancel }: ModalProps) => {
+  return (
+    <Row justify={"space-between"}>
+      <div>{title}</div>
+      {closable && <CloseOutlined onClick={onCancel} />}
+    </Row>
+  );
+};