@hw-component/form 0.0.1 → 0.0.2-bate

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,35 @@
-.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 8px 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;
+}

package/lib/index.d.ts

@@ -1 +1,20 @@
-export { default as HSelect } from './Select';
+/// <reference types="react" />
+import "./styles/index.less";
+export { default as HForm } from "./Form";
+export { default as useHForm } from "./Form/hooks/useHForm";
+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("antd").InputProps) => JSX.Element;
+export declare const HSelectInput: ({ selectProps, value, onChange, valueName, ...props }: import("./Input/modal").HSelectInputProps) => JSX.Element;
+export declare const HUpload: import("react").ForwardRefExoticComponent<import("./Upload/modal").IUpLoadProps & import("react").RefAttributes<import("./Upload/modal").IUploadRefModal>>;
+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: (props: import("./Form/modal").HFormItemProps) => import("react").ReactElement<import("./Form/modal").ConnectResultProps, string | import("react").JSXElementConstructor<any>>;
+export declare const HDatePicker: ({ value, onChange, showTime, format, ...props }: import("./TDPicker/modal").HDatePickerProps) => JSX.Element;
+export declare const HRangePicker: ({ value, onChange, showTime, format, valueMap, ranges, name, ...props }: import("./TDPicker/modal").HRangePickerProps) => JSX.Element;
+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 HFormConfigProvider: import("react").FC<import("./Form/modal").IFormConfigContextProps>;

package/lib/index.js

@@ -1,8 +1,43 @@
 'use strict';
 
-var index = require('./Select/index.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 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 HFormConfigProvider = config.default.formConfigProvider;
 
-
-exports.HSelect = index.default;
+exports.HForm = index.default;
+exports.useHForm = useHForm.default;
+exports.HButtonInput = HButtonInput;
+exports.HCheckBox = HCheckBox;
+exports.HCheckboxGroup = HCheckboxGroup;
+exports.HDatePicker = HDatePicker;
+exports.HFormConfigProvider = HFormConfigProvider;
+exports.HInput = HInput;
+exports.HInputNumber = HInputNumber;
+exports.HPageHandler = HPageHandler;
+exports.HRadioGroup = HRadioGroup;
+exports.HRangePicker = HRangePicker;
+exports.HSelect = HSelect;
+exports.HSelectInput = HSelectInput;
+exports.HSwitch = HSwitch;
+exports.HTimePicker = HTimePicker;
+exports.HUpload = HUpload;
+exports.HUrlUpload = HUrlUpload;
 // powered by h

package/lib/modal.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "0.0.1",
+  "version": "0.0.2-bate",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",
@@ -27,8 +27,9 @@
     ]
   },
   "dependencies": {
+    "@ant-design/icons": "4.6.2",
     "ahooks": "2.10.9",
-    "antd": "4.19.0",
+    "antd": "4.20.7",
     "react": "16.14.0",
     "react-dom": "17.0.2",
     "react-router-dom": "^6.11.2"
@@ -66,7 +67,7 @@
     "postcss-less": "^6.0.0",
     "rollup": "^3.23.0",
     "rollup-plugin-clear": "^2.0.7",
-    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss": "4.0.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "style-loader": "^3.3.3",
     "stylelint": "13.13.1",

package/scripts/rollup.config.js

@@ -4,12 +4,10 @@ const { nodeResolve } = require("@rollup/plugin-node-resolve");
 const { babel } = require("@rollup/plugin-babel");
 const commonjs = require("@rollup/plugin-commonjs");
 const typescript = require("rollup-plugin-typescript2");
-const postcss = require("rollup-plugin-postcss");
 const autoprefixer = require("autoprefixer");
 const inject = require("@rollup/plugin-inject");
 const url = require("@rollup/plugin-url");
-const pkg = require("../package.json");
-const prefix = pkg.cssPrefix;
+const postcss = require("rollup-plugin-postcss");
 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,
@@ -43,9 +41,6 @@ module.exports = {
     }),
     postcss({
       extract: "index.css",
-      modules: {
-        generateScopedName: `${prefix}_[local]`,
-      },
       plugins: [
         autoprefixer({
           overrideBrowserslist: [

package/scripts/webpack.config.js

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

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

@@ -0,0 +1,38 @@
+import { Checkbox } from "antd";
+import React, { useMemo } from "react";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+import { useMatchConfigProps } from "../../hooks";
+
+const Index: React.FC<HCheckboxProps> = ({
+  value,
+  onChange,
+  children,
+  valueMap: propsValueCheckMap,
+}) => {
+  const { valueCheckMap = {} } = useMatchConfigProps({
+    valueCheckMap: propsValueCheckMap,
+  }); //匹配全局
+  const checkedVal = useMemo(() => {
+    const { checked } = valueCheckMap;
+    if (value === checked) {
+      return true;
+    }
+    return false;
+  }, [value]);
+  const change = (e: CheckboxChangeEvent) => {
+    const { checked, noChecked } = valueCheckMap;
+    const val = e.target.checked;
+    let subVal = checked;
+    if (!val) {
+      subVal = noChecked;
+    }
+    onChange?.(subVal);
+  };
+  return (
+    <Checkbox checked={checkedVal} onChange={change}>
+      {children}
+    </Checkbox>
+  );
+};
+export default Index;

package/src/components/CheckboxGroup/hooks.ts

@@ -0,0 +1,102 @@
+import { useEffect, useMemo, useState } from "react";
+import type { HCheckboxProps } from "@/components/CheckboxGroup/modal";
+
+const changValProvider = ({
+  value,
+  options,
+  valueMap = {},
+}: HCheckboxProps) => {
+  const newVal = { ...value };
+  const { checked, noChecked } = valueMap;
+  options?.forEach((item) => {
+    const { value: itemVal } = item;
+    if (newVal[itemVal] !== checked) {
+      newVal[itemVal] = noChecked;
+    }
+  });
+  return newVal;
+};
+
+export const useValueProvider = ({
+  value,
+  valueMap = {},
+  keyInValue = true,
+  onChange,
+  options,
+}: HCheckboxProps) => {
+  const [val, setVal] = useState<Record<any, any>>({});
+  const oldValueCheckMap = useMemo(() => {
+    return {
+      valueMap,
+    };
+  }, []); //存储老的map
+  useEffect(() => {
+    setVal((oldVal) => {
+      return changValProvider({
+        value: oldVal,
+        options,
+        valueMap: oldValueCheckMap.valueMap,
+      });
+    });
+  }, [options]); //初始化数据
+  useEffect(() => {
+    const { checked: oldChecked } = oldValueCheckMap.valueMap;
+    const { checked, noChecked } = valueMap;
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      const keys = Object.keys(newVal);
+      keys.forEach((key) => {
+        if (newVal[key] === oldChecked) {
+          newVal[key] = checked;
+          return;
+        }
+        newVal[key] = noChecked;
+      });
+      oldValueCheckMap.valueMap = valueMap;
+      return newVal;
+    });
+  }, [valueMap]);
+
+  useEffect(() => {
+    const { checked } = oldValueCheckMap.valueMap;
+    if (!value) {
+      return;
+    }
+    if (!Array.isArray(value)) {
+      setVal(value);
+      return;
+    }
+    setVal((oldVal) => {
+      const newVal = { ...oldVal };
+      value.forEach((itemVal) => {
+        newVal[itemVal] = checked;
+      });
+      return newVal;
+    });
+  }, [value]);
+
+  const change = (key: any, changeVal: any) => {
+    const { checked, noChecked } = valueMap;
+    const newVal = { ...val };
+    newVal[key] = noChecked;
+    if (changeVal === checked) {
+      newVal[key] = checked;
+    }
+    if (!onChange) {
+      setVal(newVal);
+      return;
+    }
+    if (keyInValue) {
+      onChange(newVal);
+      return;
+    }
+    const subVal = Object.keys(newVal).filter((valKey) => {
+      return newVal[valKey] === checked;
+    });
+    onChange(subVal);
+  };
+  return {
+    val,
+    change,
+  };
+};

package/src/components/CheckboxGroup/index.tsx

@@ -0,0 +1,79 @@
+import { Space } from "antd";
+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";
+
+const Index = ({
+  options,
+  fieldNames,
+  onChange,
+  valueMap,
+  value,
+  disabled,
+  keyInValue = true,
+  addFormat,
+}: HCheckboxProps) => {
+  const { valueCheckMap: resultValueCheckMap, fieldNames: resultFieldNames } =
+    useMatchConfigProps({ fieldNames, valueCheckMap: valueMap }); //匹配全局
+  const checkOptions = useChangeOptions({
+    options,
+    fieldNames: resultFieldNames,
+  });
+  const { val, change } = useValueProvider({
+    options: checkOptions,
+    onChange,
+    valueMap: resultValueCheckMap,
+    keyInValue,
+    value,
+  });
+  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) => {
+        const { label, value: itemVal } = item;
+        const checked = val[itemVal];
+        return (
+          <Checkbox
+            value={checked}
+            key={itemVal}
+            onChange={(changeVal) => {
+              change(itemVal, changeVal);
+            }}
+            valueMap={valueMap}
+            disabled={disabled}
+          >
+            {label}
+          </Checkbox>
+        );
+      })}
+    </Space>
+  );
+};
+
+export default HFormConnect(Index);

package/src/components/CheckboxGroup/modal.ts

@@ -0,0 +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"];
+  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/Form/Context/FormConfigProvider.tsx

@@ -0,0 +1,38 @@
+import { FormConfigContext } from "./index";
+import React, { useContext } from "react";
+import { baseConfig } from "../../config";
+import type { IFormConfigContextProps } from "../modal";
+
+export const useFormConfigContext = (key?: string) => {
+  const defaultProps = useContext(FormConfigContext);
+  if (!key) {
+    return Object.keys(defaultProps).length === 0
+      ? { ...baseConfig }
+      : defaultProps;
+  }
+  return defaultProps[key] || { ...baseConfig[key] };
+}; //获取配置
+const mergeProps = (props: IFormConfigContextProps) => {
+  const newProps = { ...baseConfig };
+  const keys = Object.keys(props);
+  keys.forEach((key) => {
+    const defaultItem = newProps[key];
+    if (!defaultItem) {
+      return;
+    }
+    newProps[key] = {
+      ...defaultItem,
+      ...props[key],
+    };
+  });
+  return newProps;
+};
+
+const Index: React.FC<IFormConfigContextProps> = ({ children, ...props }) => {
+  return (
+    <FormConfigContext.Provider value={mergeProps(props)}>
+      {children}
+    </FormConfigContext.Provider>
+  );
+};
+export default Index;

package/src/components/Form/Context/index.tsx

@@ -0,0 +1,14 @@
+import React, { useContext } from "react";
+import type {
+  IFormConfigContextProps,
+  FormContextProps,
+} from "@/components/Form/modal";
+
+export const FormContext = React.createContext<Partial<FormContextProps>>({});
+export const useFormContext = (): FormContextProps => {
+  return useContext(FormContext) as FormContextProps;
+};
+
+export const FormConfigContext = React.createContext<IFormConfigContextProps>(
+  {}
+);

package/src/components/Form/FormItem/BasicItem.tsx

@@ -0,0 +1,70 @@
+import Label from "../Label";
+import { Form, Space } from "antd";
+import React from "react";
+import Helper from "./Helper";
+import { useClassName } from "../../hooks";
+import { useHide } from "./hooks";
+import { useFormContext } from "../Context";
+import type { FormItemWithRender, HItemProps } from "../modal";
+
+interface ContentProps extends Omit<HItemProps, "name"> {
+  value?: any;
+  onChange?: (val: any) => void;
+}
+const Content: React.FC<ContentProps> = ({
+  children,
+  helper,
+  value,
+  onChange,
+}) => {
+  const className = useClassName("hw-form-base-item");
+  const relChild =
+    children && React.cloneElement(children as any, { value, onChange });
+  return (
+    <Space direction={"vertical"} size={4} style={{ width: "100%" }}>
+      <div className={className}>{relChild}</div>
+      <Helper helper={helper} />
+    </Space>
+  );
+};
+
+const Index: React.FC<FormItemWithRender> = ({
+  hover,
+  labelWidth,
+  required,
+  colon = true,
+  label,
+  itemProps,
+  children,
+  helper,
+  hide,
+  render,
+  ...props
+}) => {
+  const { form } = useFormContext();
+  const hideItem = useHide({ hide, form });
+  if (hideItem) {
+    return null;
+  }
+  return (
+    <Form.Item
+      label={
+        <Label
+          hover={hover}
+          labelWidth={labelWidth}
+          required={required}
+          colon={colon}
+        >
+          {label}
+        </Label>
+      }
+      {...props}
+      colon={false}
+      required={false}
+    >
+      <Content helper={helper}>{render(form)}</Content>
+    </Form.Item>
+  );
+};
+
+export default Index;