@hw-component/form 0.0.9-beta-v18 → 0.0.9-beta-v19

package/es/Form/FormItem/BasicItem.js

@@ -20,8 +20,8 @@ import { useDefaultRender } from '../hooks/useDefaultRender.js';
 import { useDefaultComponents } from '../hooks/index.js';
 import { useFormConfigContext } from '../Context/FormConfigProvider.js';
 
-var _excluded = ["hover", "labelWidth", "required", "colon", "label", "itemProps", "children", "helper", "hide", "render", "itemSpan", "hideLabel", "labelAlign", "style"],
-  _excluded2 = ["labelAlign"];
+var _excluded = ["hover", "labelWidth", "required", "colon", "label", "itemProps", "children", "helper", "hide", "render", "itemSpan", "hideLabel", "labelAlign", "style", "className"],
+  _excluded2 = ["labelAlign", "itemProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Content = function Content(_ref) {
@@ -68,15 +68,21 @@ var Index = function Index(props) {
     hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel;
     props.labelAlign;
     var style = props.style,
+    colClassName = props.className,
     oProps = _objectWithoutProperties(props, _excluded);
   var _props$labelAlign = props.labelAlign,
     align = _props$labelAlign === void 0 ? "right" : _props$labelAlign,
+    itemProps = props.itemProps,
     inProps = _objectWithoutProperties(props, _excluded2);
   var _useFormContext = useFormContext(),
     form = _useFormContext.form;
   var defaultComponent = useDefaultComponents();
   var formItemStyle = useFormConfigContext("formItemStyle");
-  var defaultRender = useDefaultRender(inProps, defaultComponent);
+  var ctxItemProps = useFormConfigContext("itemProps");
+  var defaultItemProps = _objectSpread(_objectSpread({}, ctxItemProps), itemProps);
+  var defaultRender = useDefaultRender(_objectSpread(_objectSpread({}, inProps), {}, {
+    itemProps: defaultItemProps
+  }), defaultComponent);
   var className = usePositionClassName(align);
   var hideItem = useHide({
     hide: hide,
@@ -86,6 +92,7 @@ var Index = function Index(props) {
     return null;
   }
   return jsx(Col, _objectSpread(_objectSpread({}, itemSpan), {}, {
+    className: colClassName,
     children: jsx(Form.Item, _objectSpread(_objectSpread({
       className: className,
       label: !hideLabel && jsx(Index$1, {

package/es/Form/index.d.ts

@@ -1,3 +1,3 @@
 import type { HFormProps } from "./modal";
-declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, ...props }: HFormProps) => JSX.Element;
+declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, itemProps: formItemProps, ...props }: HFormProps) => JSX.Element;
 export default _default;

package/es/Form/index.js

@@ -20,7 +20,7 @@ import Index from '../PageHandler/index.js';
 import useInitConfigData from './hooks/useInitConfigData.js';
 import InitSet from './InitSet.js';
 
-var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle"];
+var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle", "itemProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HForm = (function (_ref) {
@@ -43,6 +43,8 @@ var HForm = (function (_ref) {
     submitLoading = _ref.submitLoading,
     formLabelAlign = _ref.labelAlign,
     formItemStyle = _ref.formItemStyle,
+    _ref$itemProps = _ref.itemProps,
+    formItemProps = _ref$itemProps === void 0 ? {} : _ref$itemProps,
     props = _objectWithoutProperties(_ref, _excluded);
   var hForm = useCurrentForm(form);
   var _useInitConfigData = useInitConfigData({
@@ -104,11 +106,15 @@ var HForm = (function (_ref) {
               labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign,
               name = itemData.name,
               _itemData$style = itemData.style,
-              style = _itemData$style === void 0 ? formItemStyle : _itemData$style;
+              style = _itemData$style === void 0 ? formItemStyle : _itemData$style,
+              _itemData$itemProps = itemData.itemProps,
+              itemProps = _itemData$itemProps === void 0 ? {} : _itemData$itemProps;
+            var defaultItemProps = _objectSpread(_objectSpread({}, formItemProps), itemProps);
             return /*#__PURE__*/createElement(Item, _objectSpread(_objectSpread({}, itemData), {}, {
               labelAlign: labelAlign,
               key: name || index,
               style: style,
+              itemProps: defaultItemProps,
               hideLabel: hideLabel,
               itemSpan: itemSpan,
               labelWidth: itemLabelWidth || labelWidth

package/es/Form/modal.d.ts

@@ -17,7 +17,7 @@ import type { DataFnProvider } from "../modal";
 import type { ColProps } from "antd/lib/grid/col";
 import type { Gutter } from "antd/lib/grid/row";
 type RenderFun = (props: HItemProps, node: React.ReactNode, form: FormInstance) => React.ReactNode;
-type ItemPropsType = HCheckboxProps | HInputProps | HSelectInputProps | HButtonProps | HRadioGroupProps | HSelectProps | ButtonProps | HSwitchProps | HDatePickerProps | HRangePickerProps | HTimePickerProps | TextAreaProps | IUpLoadProps | CascaderProps<any>;
+export type ItemPropsType = HCheckboxProps | HInputProps | HSelectInputProps | HButtonProps | HRadioGroupProps | HSelectProps | ButtonProps | HSwitchProps | HDatePickerProps | HRangePickerProps | HTimePickerProps | TextAreaProps | IUpLoadProps | CascaderProps<any>;
 export interface HoverModal {
     text?: string;
     icon?: React.ReactNode;
@@ -63,6 +63,7 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     submitLoading?: boolean;
     labelAlign?: LabelAlignModal;
     formItemStyle?: React.CSSProperties;
+    itemProps?: ItemPropsType;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;
@@ -101,6 +102,7 @@ export interface IFormConfigContextProps {
     uploadProps?: ConfigUploadProps;
     defaultComponent?: DefaultComponentModal;
     formItemStyle?: React.CSSProperties;
+    itemProps?: ItemPropsType;
 }
 interface ActionModal {
     key: string;

package/es/config.js

@@ -59,7 +59,8 @@ var baseConfig = {
     maxSize: 1024 * 1024 * 1.8
   },
   defaultComponent: {},
-  formItemStyle: {}
+  formItemStyle: {},
+  itemProps: {}
 };
 
 export { baseConfig };

package/lib/Form/FormItem/BasicItem.js

@@ -23,8 +23,8 @@ var useDefaultRender = require('../hooks/useDefaultRender.js');
 var index$1 = require('../hooks/index.js');
 var FormConfigProvider = require('../Context/FormConfigProvider.js');
 
-var _excluded = ["hover", "labelWidth", "required", "colon", "label", "itemProps", "children", "helper", "hide", "render", "itemSpan", "hideLabel", "labelAlign", "style"],
-  _excluded2 = ["labelAlign"];
+var _excluded = ["hover", "labelWidth", "required", "colon", "label", "itemProps", "children", "helper", "hide", "render", "itemSpan", "hideLabel", "labelAlign", "style", "className"],
+  _excluded2 = ["labelAlign", "itemProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Content = function Content(_ref) {
@@ -71,15 +71,21 @@ var Index = function Index(props) {
     hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel;
     props.labelAlign;
     var style = props.style,
+    colClassName = props.className,
     oProps = _objectWithoutProperties(props, _excluded);
   var _props$labelAlign = props.labelAlign,
     align = _props$labelAlign === void 0 ? "right" : _props$labelAlign,
+    itemProps = props.itemProps,
     inProps = _objectWithoutProperties(props, _excluded2);
   var _useFormContext = index.useFormContext(),
     form = _useFormContext.form;
   var defaultComponent = index$1.useDefaultComponents();
   var formItemStyle = FormConfigProvider.useFormConfigContext("formItemStyle");
-  var defaultRender = useDefaultRender.useDefaultRender(inProps, defaultComponent);
+  var ctxItemProps = FormConfigProvider.useFormConfigContext("itemProps");
+  var defaultItemProps = _objectSpread(_objectSpread({}, ctxItemProps), itemProps);
+  var defaultRender = useDefaultRender.useDefaultRender(_objectSpread(_objectSpread({}, inProps), {}, {
+    itemProps: defaultItemProps
+  }), defaultComponent);
   var className = hooks.usePositionClassName(align);
   var hideItem = hooks.useHide({
     hide: hide,
@@ -89,6 +95,7 @@ var Index = function Index(props) {
     return null;
   }
   return jsxRuntime.jsx(antd.Col, _objectSpread(_objectSpread({}, itemSpan), {}, {
+    className: colClassName,
     children: jsxRuntime.jsx(antd.Form.Item, _objectSpread(_objectSpread({
       className: className,
       label: !hideLabel && jsxRuntime.jsx(Label.default, {

package/lib/Form/index.d.ts

@@ -1,3 +1,3 @@
 import type { HFormProps } from "./modal";
-declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, ...props }: HFormProps) => JSX.Element;
+declare const _default: ({ configData, labelWidth, form, request, onFinish, infoRequest, valueType, initialValues, params, onValuesChange, itemSpan, hideLabel: formHideLabel, gutter, submitLoading, labelAlign: formLabelAlign, formItemStyle, itemProps: formItemProps, ...props }: HFormProps) => JSX.Element;
 export default _default;

package/lib/Form/index.js

@@ -23,7 +23,7 @@ var index$1 = require('../PageHandler/index.js');
 var useInitConfigData = require('./hooks/useInitConfigData.js');
 var InitSet = require('./InitSet.js');
 
-var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle"];
+var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle", "itemProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HForm = (function (_ref) {
@@ -46,6 +46,8 @@ var HForm = (function (_ref) {
     submitLoading = _ref.submitLoading,
     formLabelAlign = _ref.labelAlign,
     formItemStyle = _ref.formItemStyle,
+    _ref$itemProps = _ref.itemProps,
+    formItemProps = _ref$itemProps === void 0 ? {} : _ref$itemProps,
     props = _objectWithoutProperties(_ref, _excluded);
   var hForm = index.useCurrentForm(form);
   var _useInitConfigData = useInitConfigData.default({
@@ -107,11 +109,15 @@ var HForm = (function (_ref) {
               labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign,
               name = itemData.name,
               _itemData$style = itemData.style,
-              style = _itemData$style === void 0 ? formItemStyle : _itemData$style;
+              style = _itemData$style === void 0 ? formItemStyle : _itemData$style,
+              _itemData$itemProps = itemData.itemProps,
+              itemProps = _itemData$itemProps === void 0 ? {} : _itemData$itemProps;
+            var defaultItemProps = _objectSpread(_objectSpread({}, formItemProps), itemProps);
             return /*#__PURE__*/React.createElement(index$3.default, _objectSpread(_objectSpread({}, itemData), {}, {
               labelAlign: labelAlign,
               key: name || index,
               style: style,
+              itemProps: defaultItemProps,
               hideLabel: hideLabel,
               itemSpan: itemSpan,
               labelWidth: itemLabelWidth || labelWidth

package/lib/Form/modal.d.ts

@@ -17,7 +17,7 @@ import type { DataFnProvider } from "../modal";
 import type { ColProps } from "antd/lib/grid/col";
 import type { Gutter } from "antd/lib/grid/row";
 type RenderFun = (props: HItemProps, node: React.ReactNode, form: FormInstance) => React.ReactNode;
-type ItemPropsType = HCheckboxProps | HInputProps | HSelectInputProps | HButtonProps | HRadioGroupProps | HSelectProps | ButtonProps | HSwitchProps | HDatePickerProps | HRangePickerProps | HTimePickerProps | TextAreaProps | IUpLoadProps | CascaderProps<any>;
+export type ItemPropsType = HCheckboxProps | HInputProps | HSelectInputProps | HButtonProps | HRadioGroupProps | HSelectProps | ButtonProps | HSwitchProps | HDatePickerProps | HRangePickerProps | HTimePickerProps | TextAreaProps | IUpLoadProps | CascaderProps<any>;
 export interface HoverModal {
     text?: string;
     icon?: React.ReactNode;
@@ -63,6 +63,7 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     submitLoading?: boolean;
     labelAlign?: LabelAlignModal;
     formItemStyle?: React.CSSProperties;
+    itemProps?: ItemPropsType;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;
@@ -101,6 +102,7 @@ export interface IFormConfigContextProps {
     uploadProps?: ConfigUploadProps;
     defaultComponent?: DefaultComponentModal;
     formItemStyle?: React.CSSProperties;
+    itemProps?: ItemPropsType;
 }
 interface ActionModal {
     key: string;

package/lib/config.js

@@ -60,7 +60,8 @@ var baseConfig = {
     maxSize: 1024 * 1024 * 1.8
   },
   defaultComponent: {},
-  formItemStyle: {}
+  formItemStyle: {},
+  itemProps: {}
 };
 
 exports.baseConfig = baseConfig;

package/package.json

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

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

@@ -38,7 +38,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
     required,
     colon = true,
     label,
-    itemProps,
+    itemProps:colItemProps,
     children,
     helper,
     hide,
@@ -47,20 +47,26 @@ const Index: React.FC<HFormItemProps> = (props) => {
     hideLabel = false,
     labelAlign,
     style,
+    className:colClassName,
     ...oProps
   } = props;
-  const { labelAlign: align = "right", ...inProps } = props;
+  const { labelAlign: align = "right",itemProps, ...inProps } = props;
   const { form } = useFormContext();
   const defaultComponent = useDefaultComponents();
   const formItemStyle = useFormConfigContext("formItemStyle");
-  const defaultRender = useDefaultRender(inProps, defaultComponent);
+  const ctxItemProps = useFormConfigContext("itemProps");
+  const defaultItemProps={
+      ...ctxItemProps,
+      ...itemProps
+  }
+  const defaultRender = useDefaultRender({...inProps,itemProps:defaultItemProps}, defaultComponent);
   const className = usePositionClassName(align);
   const hideItem = useHide({ hide, form });
   if (hideItem) {
     return null;
   }
   return (
-    <Col {...itemSpan}>
+    <Col {...itemSpan} className={colClassName}>
       <Form.Item
         className={className}
         label={

package/src/components/Form/index.tsx

@@ -7,6 +7,7 @@ import PageHandler from "../PageHandler";
 import useInitConfigData from "./hooks/useInitConfigData";
 import { useEffect } from "react";
 import InitSet from "./InitSet";
+import {ItemPropsType} from "./modal";
 
 export default ({
   configData,
@@ -25,6 +26,7 @@ export default ({
   submitLoading,
   labelAlign: formLabelAlign,
                   formItemStyle,
+    itemProps:formItemProps={},
   ...props
 }: HFormProps) => {
   const hForm = useCurrentForm(form);
@@ -83,13 +85,19 @@ export default ({
                 labelAlign = formLabelAlign,
                 name,
                   style=formItemStyle,
+                  itemProps={},
               } = itemData;
+              const defaultItemProps={
+                 ...formItemProps,
+                 ...itemProps
+              }
               return (
                 <Item
                   {...itemData}
                   labelAlign={labelAlign}
                   key={name||index}
                   style={style}
+                  itemProps={(defaultItemProps as ItemPropsType)}
                   hideLabel={hideLabel}
                   itemSpan={itemSpan}
                   labelWidth={itemLabelWidth || labelWidth}

package/src/components/Form/modal.ts

@@ -40,7 +40,7 @@ type RenderFun = (
   node: React.ReactNode,
   form: FormInstance
 ) => React.ReactNode;
-type ItemPropsType =
+export type ItemPropsType =
   | HCheckboxProps
   | HInputProps
   | HSelectInputProps
@@ -110,6 +110,7 @@ export interface HFormProps<T = any, R = any>
   submitLoading?: boolean;
   labelAlign?: LabelAlignModal;
   formItemStyle?:React.CSSProperties;
+  itemProps?:ItemPropsType
 }
 export interface HFormItemProps extends HItemProps {
   required?: boolean;
@@ -151,7 +152,8 @@ export interface IFormConfigContextProps {
   dateRanges?: RangePickerProps["ranges"];
   uploadProps?: ConfigUploadProps;
   defaultComponent?: DefaultComponentModal;
-  formItemStyle?:React.CSSProperties
+  formItemStyle?:React.CSSProperties;
+  itemProps?:ItemPropsType
 }
 interface ActionModal {
   key: string;

package/src/components/config.ts

@@ -38,7 +38,8 @@ export const baseConfig: IFormConfigContextProps = {
     maxSize: 1024 * 1024 * 1.8,
   },
   defaultComponent: {},
-  formItemStyle:{}
+  formItemStyle:{},
+  itemProps:{}
 };
 
 export default {

package/src/pages/Form/index.tsx

@@ -14,6 +14,18 @@ const formData = (options) => {
     },
   ];
   return [
+    {
+      label: "测试",
+      className:"hdjd",
+    },
+    {
+      label: "测试1",
+      type:"select"
+    },
+    {
+      label: "测试1",
+      type:"inputNumber"
+    },
     {
       label: "选择",
       name: "checkboxGroup",
@@ -26,9 +38,6 @@ const formData = (options) => {
       ],
       direction: "vertical",
       labelAlign: "topLeft",
-      style:{
-        marginBottom:200
-      }
     },
     {
       label: "开关",
@@ -113,8 +122,10 @@ export default () => {
         defaultComponent={{
           test: Test,
         }}
-        formItemStyle={{
-          marginBottom:100
+        itemProps={{
+          style:{
+             borderRadius:10
+          }
         }}
         fieldNames={{
           label: "value",
@@ -125,9 +136,6 @@ export default () => {
           configData={formData(options)}
           labelWidth={200}
           form={form}
-          formItemStyle={{
-            marginBottom:10
-          }}
           labelAlign={"right"}
           submitLoading={true}
           onFinish={(value) => {