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

package/es/Form/FormItem/BasicItem.js

@@ -14,12 +14,13 @@ import { Col, Form, Space } from 'antd';
 import React from 'react';
 import Index$2 from './Helper.js';
 import { useClassName } from '../../hooks/index.js';
-import { useHide } from './hooks.js';
+import { usePositionClassName, useHide } from './hooks.js';
 import { useFormContext } from '../Context/index.js';
 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"],
+var _excluded = ["hover", "labelWidth", "required", "colon", "label", "itemProps", "children", "helper", "hide", "render", "itemSpan", "hideLabel", "labelAlign", "style"],
   _excluded2 = ["labelAlign"];
 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; }
@@ -64,15 +65,19 @@ var Index = function Index(props) {
       span: 24
     } : _props$itemSpan,
     _props$hideLabel = props.hideLabel,
-    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
-    labelAlign = props.labelAlign,
+    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel;
+    props.labelAlign;
+    var style = props.style,
     oProps = _objectWithoutProperties(props, _excluded);
-  props.labelAlign;
-    var inProps = _objectWithoutProperties(props, _excluded2);
+  var _props$labelAlign = props.labelAlign,
+    align = _props$labelAlign === void 0 ? "right" : _props$labelAlign,
+    inProps = _objectWithoutProperties(props, _excluded2);
   var _useFormContext = useFormContext(),
     form = _useFormContext.form;
   var defaultComponent = useDefaultComponents();
+  var formItemStyle = useFormConfigContext("formItemStyle");
   var defaultRender = useDefaultRender(inProps, defaultComponent);
+  var className = usePositionClassName(align);
   var hideItem = useHide({
     hide: hide,
     form: form
@@ -82,15 +87,16 @@ var Index = function Index(props) {
   }
   return jsx(Col, _objectSpread(_objectSpread({}, itemSpan), {}, {
     children: jsx(Form.Item, _objectSpread(_objectSpread({
+      className: className,
       label: !hideLabel && jsx(Index$1, {
         hover: hover,
         labelWidth: labelWidth,
         required: required,
         colon: colon,
-        align: labelAlign,
         children: label
       })
     }, oProps), {}, {
+      style: style || formItemStyle,
       colon: false,
       required: false,
       children: jsx(Content, {

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

@@ -1,8 +1,10 @@
 import type { HFormInstance, HItemProps } from "../modal";
+import type { LabelAlignModal } from "../modal";
 export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
 interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
     form: HFormInstance;
 }
 export declare const useShouldUpdate: ({ hide, shouldUpdate, }: Omit<HItemProps, "name">) => import("rc-field-form/lib/Field").ShouldUpdate<any> | undefined;
 export declare const useHide: ({ hide, form }: UseHideUpItemModal) => boolean;
+export declare const usePositionClassName: (position: LabelAlignModal) => string;
 export {};

package/es/Form/FormItem/hooks.js

@@ -2,6 +2,7 @@
 import UpFormItem from './UpFormItem.js';
 import RegularFormItem from './RegularFormItem.js';
 import { useMemo } from 'react';
+import { useClassName } from '../../hooks/index.js';
 
 var useFormItemDomControl = function useFormItemDomControl(_ref) {
   var shouldUpdate = _ref.shouldUpdate,
@@ -33,6 +34,17 @@ var useHide = function useHide(_ref3) {
   }
   return !!hide;
 };
+var classNameData = {
+  top: "hw-form-base-item-top",
+  left: "hw-form-base-item-left",
+  right: "hw-form-base-item-right",
+  topRight: "hw-form-base-item-top-right",
+  topLeft: "hw-form-base-item-top-left"
+};
+var usePositionClassName = function usePositionClassName(position) {
+  var className = classNameData[position];
+  return useClassName(className);
+};
 
-export { useFormItemDomControl, useHide, useShouldUpdate };
+export { useFormItemDomControl, useHide, usePositionClassName, useShouldUpdate };
 // powered by hdj

package/es/Form/Label.d.ts

@@ -5,7 +5,6 @@ interface IProps {
     hover?: string | HoverModal;
     colon?: boolean;
     required?: boolean;
-    align?: "left" | "right";
 }
 declare const Index: React.FC<IProps>;
 export default Index;

package/es/Form/Label.js

@@ -19,9 +19,7 @@ var Index = function Index(_ref2) {
     children = _ref2.children,
     colon = _ref2.colon,
     required = _ref2.required,
-    hover = _ref2.hover,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "right" : _ref2$align;
+    hover = _ref2.hover;
   var _useHover = useHover({
       hover: hover
     }),
@@ -31,8 +29,7 @@ var Index = function Index(_ref2) {
   var className = useClassName(array);
   return jsxs("div", {
     style: {
-      width: labelWidth,
-      textAlign: align
+      width: labelWidth
     },
     className: className,
     children: [children, text && jsx("span", {

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, ...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, ...props }: HFormProps) => JSX.Element;
 export default _default;

package/es/Form/index.js

@@ -9,6 +9,7 @@ import 'core-js/modules/es.object.get-own-property-descriptors.js';
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import 'core-js/modules/es.array.map.js';
+import 'core-js/modules/es.function.name.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useEffect, createElement } from 'react';
 import { Form, Row } from 'antd';
@@ -19,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"];
+var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle"];
 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) {
@@ -41,6 +42,7 @@ var HForm = (function (_ref) {
     gutter = _ref.gutter,
     submitLoading = _ref.submitLoading,
     formLabelAlign = _ref.labelAlign,
+    formItemStyle = _ref.formItemStyle,
     props = _objectWithoutProperties(_ref, _excluded);
   var hForm = useCurrentForm(form);
   var _useInitConfigData = useInitConfigData({
@@ -99,13 +101,17 @@ var HForm = (function (_ref) {
               _itemData$hideLabel = itemData.hideLabel,
               hideLabel = _itemData$hideLabel === void 0 ? formHideLabel : _itemData$hideLabel,
               _itemData$labelAlign = itemData.labelAlign,
-              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign;
+              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign,
+              name = itemData.name,
+              _itemData$style = itemData.style,
+              style = _itemData$style === void 0 ? formItemStyle : _itemData$style;
             return /*#__PURE__*/createElement(Item, _objectSpread(_objectSpread({}, itemData), {}, {
-              key: index,
+              labelAlign: labelAlign,
+              key: name || index,
+              style: style,
               hideLabel: hideLabel,
               itemSpan: itemSpan,
-              labelWidth: itemLabelWidth || labelWidth,
-              labelAlign: labelAlign
+              labelWidth: itemLabelWidth || labelWidth
             }));
           })
         }), jsx(InitSet, {})]

package/es/Form/modal.d.ts

@@ -32,7 +32,8 @@ export interface DispatchModal<T = string | string[]> {
     manual?: boolean;
     reset?: boolean;
 }
-export interface HItemProps extends Omit<FormItemProps, "name"> {
+export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
+export interface HItemProps extends Omit<FormItemProps, "name" | "labelAlign"> {
     type?: string;
     itemProps?: ItemPropsType;
     render?: RenderFun;
@@ -45,8 +46,9 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
     dispatch?: DispatchModal;
     itemSpan?: ColProps;
     hideLabel?: boolean;
+    labelAlign?: LabelAlignModal;
 }
-export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish"> {
+export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish" | "labelAlign"> {
     configData: HItemProps[];
     labelWidth?: number;
     request?: (values: T, params?: any) => Promise<R>;
@@ -59,7 +61,8 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     hideLabel?: boolean;
     gutter?: Gutter | [Gutter, Gutter];
     submitLoading?: boolean;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
+    formItemStyle?: React.CSSProperties;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;
@@ -68,7 +71,7 @@ export interface HFormItemProps extends HItemProps {
     itemSpan?: ColProps;
     initValueProvider?: AddValueFormat;
     subProvider?: AddValueFormat;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
 }
 export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {
@@ -97,6 +100,7 @@ export interface IFormConfigContextProps {
     dateRanges?: RangePickerProps["ranges"];
     uploadProps?: ConfigUploadProps;
     defaultComponent?: DefaultComponentModal;
+    formItemStyle?: React.CSSProperties;
 }
 interface ActionModal {
     key: string;

package/es/config.js

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

package/es/index.css

@@ -33,6 +33,27 @@
           align-items: center;
   min-height: 32px;
 }
+.ant-hw-form-base-item-top-left .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-left .ant-hw-form-item-colon {
+  text-align: left;
+}
+.ant-hw-form-base-item-top-right .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-top .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-left .ant-hw-form-item-colon {
+  text-align: left;
+}
 .ant-hw-color-box {
   width: 22px;
   height: 22px;

package/lib/Form/FormItem/BasicItem.js

@@ -21,8 +21,9 @@ var hooks = require('./hooks.js');
 var index = require('../Context/index.js');
 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"],
+var _excluded = ["hover", "labelWidth", "required", "colon", "label", "itemProps", "children", "helper", "hide", "render", "itemSpan", "hideLabel", "labelAlign", "style"],
   _excluded2 = ["labelAlign"];
 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; }
@@ -67,15 +68,19 @@ var Index = function Index(props) {
       span: 24
     } : _props$itemSpan,
     _props$hideLabel = props.hideLabel,
-    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel,
-    labelAlign = props.labelAlign,
+    hideLabel = _props$hideLabel === void 0 ? false : _props$hideLabel;
+    props.labelAlign;
+    var style = props.style,
     oProps = _objectWithoutProperties(props, _excluded);
-  props.labelAlign;
-    var inProps = _objectWithoutProperties(props, _excluded2);
+  var _props$labelAlign = props.labelAlign,
+    align = _props$labelAlign === void 0 ? "right" : _props$labelAlign,
+    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 className = hooks.usePositionClassName(align);
   var hideItem = hooks.useHide({
     hide: hide,
     form: form
@@ -85,15 +90,16 @@ var Index = function Index(props) {
   }
   return jsxRuntime.jsx(antd.Col, _objectSpread(_objectSpread({}, itemSpan), {}, {
     children: jsxRuntime.jsx(antd.Form.Item, _objectSpread(_objectSpread({
+      className: className,
       label: !hideLabel && jsxRuntime.jsx(Label.default, {
         hover: hover,
         labelWidth: labelWidth,
         required: required,
         colon: colon,
-        align: labelAlign,
         children: label
       })
     }, oProps), {}, {
+      style: style || formItemStyle,
       colon: false,
       required: false,
       children: jsxRuntime.jsx(Content, {

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

@@ -1,8 +1,10 @@
 import type { HFormInstance, HItemProps } from "../modal";
+import type { LabelAlignModal } from "../modal";
 export declare const useFormItemDomControl: ({ shouldUpdate, hide, dependencies, }: HItemProps) => ({ shouldUpdate, dependencies, hide, itemSpan, ...props }: import("../modal").HFormItemProps) => JSX.Element;
 interface UseHideUpItemModal extends Omit<HItemProps, "name"> {
     form: HFormInstance;
 }
 export declare const useShouldUpdate: ({ hide, shouldUpdate, }: Omit<HItemProps, "name">) => import("rc-field-form/lib/Field").ShouldUpdate<any> | undefined;
 export declare const useHide: ({ hide, form }: UseHideUpItemModal) => boolean;
+export declare const usePositionClassName: (position: LabelAlignModal) => string;
 export {};

package/lib/Form/FormItem/hooks.js

@@ -3,6 +3,7 @@
 var UpFormItem = require('./UpFormItem.js');
 var RegularFormItem = require('./RegularFormItem.js');
 var React = require('react');
+var index = require('../../hooks/index.js');
 
 var useFormItemDomControl = function useFormItemDomControl(_ref) {
   var shouldUpdate = _ref.shouldUpdate,
@@ -34,8 +35,20 @@ var useHide = function useHide(_ref3) {
   }
   return !!hide;
 };
+var classNameData = {
+  top: "hw-form-base-item-top",
+  left: "hw-form-base-item-left",
+  right: "hw-form-base-item-right",
+  topRight: "hw-form-base-item-top-right",
+  topLeft: "hw-form-base-item-top-left"
+};
+var usePositionClassName = function usePositionClassName(position) {
+  var className = classNameData[position];
+  return index.useClassName(className);
+};
 
 exports.useFormItemDomControl = useFormItemDomControl;
 exports.useHide = useHide;
+exports.usePositionClassName = usePositionClassName;
 exports.useShouldUpdate = useShouldUpdate;
 // powered by h

package/lib/Form/Label.d.ts

@@ -5,7 +5,6 @@ interface IProps {
     hover?: string | HoverModal;
     colon?: boolean;
     required?: boolean;
-    align?: "left" | "right";
 }
 declare const Index: React.FC<IProps>;
 export default Index;

package/lib/Form/Label.js

@@ -22,9 +22,7 @@ var Index = function Index(_ref2) {
     children = _ref2.children,
     colon = _ref2.colon,
     required = _ref2.required,
-    hover = _ref2.hover,
-    _ref2$align = _ref2.align,
-    align = _ref2$align === void 0 ? "right" : _ref2$align;
+    hover = _ref2.hover;
   var _useHover = useHover({
       hover: hover
     }),
@@ -34,8 +32,7 @@ var Index = function Index(_ref2) {
   var className = index.useClassName(array);
   return jsxRuntime.jsxs("div", {
     style: {
-      width: labelWidth,
-      textAlign: align
+      width: labelWidth
     },
     className: className,
     children: [children, text && jsxRuntime.jsx("span", {

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, ...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, ...props }: HFormProps) => JSX.Element;
 export default _default;

package/lib/Form/index.js

@@ -12,6 +12,7 @@ require('core-js/modules/es.object.get-own-property-descriptors.js');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
 require('core-js/modules/es.array.map.js');
+require('core-js/modules/es.function.name.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var antd = require('antd');
@@ -22,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"];
+var _excluded = ["configData", "labelWidth", "form", "request", "onFinish", "infoRequest", "valueType", "initialValues", "params", "onValuesChange", "itemSpan", "hideLabel", "gutter", "submitLoading", "labelAlign", "formItemStyle"];
 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) {
@@ -44,6 +45,7 @@ var HForm = (function (_ref) {
     gutter = _ref.gutter,
     submitLoading = _ref.submitLoading,
     formLabelAlign = _ref.labelAlign,
+    formItemStyle = _ref.formItemStyle,
     props = _objectWithoutProperties(_ref, _excluded);
   var hForm = index.useCurrentForm(form);
   var _useInitConfigData = useInitConfigData.default({
@@ -102,13 +104,17 @@ var HForm = (function (_ref) {
               _itemData$hideLabel = itemData.hideLabel,
               hideLabel = _itemData$hideLabel === void 0 ? formHideLabel : _itemData$hideLabel,
               _itemData$labelAlign = itemData.labelAlign,
-              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign;
+              labelAlign = _itemData$labelAlign === void 0 ? formLabelAlign : _itemData$labelAlign,
+              name = itemData.name,
+              _itemData$style = itemData.style,
+              style = _itemData$style === void 0 ? formItemStyle : _itemData$style;
             return /*#__PURE__*/React.createElement(index$3.default, _objectSpread(_objectSpread({}, itemData), {}, {
-              key: index,
+              labelAlign: labelAlign,
+              key: name || index,
+              style: style,
               hideLabel: hideLabel,
               itemSpan: itemSpan,
-              labelWidth: itemLabelWidth || labelWidth,
-              labelAlign: labelAlign
+              labelWidth: itemLabelWidth || labelWidth
             }));
           })
         }), jsxRuntime.jsx(InitSet.default, {})]

package/lib/Form/modal.d.ts

@@ -32,7 +32,8 @@ export interface DispatchModal<T = string | string[]> {
     manual?: boolean;
     reset?: boolean;
 }
-export interface HItemProps extends Omit<FormItemProps, "name"> {
+export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
+export interface HItemProps extends Omit<FormItemProps, "name" | "labelAlign"> {
     type?: string;
     itemProps?: ItemPropsType;
     render?: RenderFun;
@@ -45,8 +46,9 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
     dispatch?: DispatchModal;
     itemSpan?: ColProps;
     hideLabel?: boolean;
+    labelAlign?: LabelAlignModal;
 }
-export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish"> {
+export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "onFinish" | "labelAlign"> {
     configData: HItemProps[];
     labelWidth?: number;
     request?: (values: T, params?: any) => Promise<R>;
@@ -59,7 +61,8 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     hideLabel?: boolean;
     gutter?: Gutter | [Gutter, Gutter];
     submitLoading?: boolean;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
+    formItemStyle?: React.CSSProperties;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;
@@ -68,7 +71,7 @@ export interface HFormItemProps extends HItemProps {
     itemSpan?: ColProps;
     initValueProvider?: AddValueFormat;
     subProvider?: AddValueFormat;
-    labelAlign?: "left" | "right";
+    labelAlign?: LabelAlignModal;
 }
 export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {
@@ -97,6 +100,7 @@ export interface IFormConfigContextProps {
     dateRanges?: RangePickerProps["ranges"];
     uploadProps?: ConfigUploadProps;
     defaultComponent?: DefaultComponentModal;
+    formItemStyle?: React.CSSProperties;
 }
 interface ActionModal {
     key: string;

package/lib/config.js

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

package/lib/index.css

@@ -33,6 +33,27 @@
           align-items: center;
   min-height: 32px;
 }
+.ant-hw-form-base-item-top-left .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-left .ant-hw-form-item-colon {
+  text-align: left;
+}
+.ant-hw-form-base-item-top-right .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-top-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-top .ant-form-item-label > label {
+  height: auto;
+}
+.ant-hw-form-base-item-right .ant-hw-form-item-colon {
+  text-align: right;
+}
+.ant-hw-form-base-item-left .ant-hw-form-item-colon {
+  text-align: left;
+}
 .ant-hw-color-box {
   width: 22px;
   height: 22px;

package/package.json

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

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

@@ -3,12 +3,13 @@ import { Form, Space, Col } from "antd";
 import React from "react";
 import Helper from "./Helper";
 import { useClassName } from "../../hooks";
-import { useHide } from "./hooks";
+import { useHide, usePositionClassName } from "./hooks";
 import { useFormContext } from "../Context";
 import type { HItemProps } from "../modal";
 import { useDefaultRender } from "../hooks/useDefaultRender";
 import type { HFormItemProps } from "../modal";
 import { useDefaultComponents } from "../hooks";
+import {useFormConfigContext} from "../Context/FormConfigProvider";
 
 interface ContentProps extends Omit<HItemProps, "name"> {
   value?: any;
@@ -30,7 +31,6 @@ const Content: React.FC<ContentProps> = ({
     </Space>
   );
 };
-
 const Index: React.FC<HFormItemProps> = (props) => {
   const {
     hover,
@@ -46,12 +46,15 @@ const Index: React.FC<HFormItemProps> = (props) => {
     itemSpan = { span: 24 },
     hideLabel = false,
     labelAlign,
+    style,
     ...oProps
   } = props;
-  const { labelAlign: align, ...inProps } = props;
+  const { labelAlign: align = "right", ...inProps } = props;
   const { form } = useFormContext();
   const defaultComponent = useDefaultComponents();
+  const formItemStyle = useFormConfigContext("formItemStyle");
   const defaultRender = useDefaultRender(inProps, defaultComponent);
+  const className = usePositionClassName(align);
   const hideItem = useHide({ hide, form });
   if (hideItem) {
     return null;
@@ -59,6 +62,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
   return (
     <Col {...itemSpan}>
       <Form.Item
+        className={className}
         label={
           !hideLabel && (
             <Label
@@ -66,13 +70,13 @@ const Index: React.FC<HFormItemProps> = (props) => {
               labelWidth={labelWidth}
               required={required}
               colon={colon}
-              align={labelAlign}
             >
               {label}
             </Label>
           )
         }
         {...oProps}
+          style={style||formItemStyle}
         colon={false}
         required={false}
       >

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

@@ -2,6 +2,8 @@ import UpFormItem from "./UpFormItem";
 import RegularFormItem from "./RegularFormItem";
 import { useMemo } from "react";
 import type { HFormInstance, HItemProps } from "../modal";
+import type { LabelAlignModal } from "../modal";
+import { useClassName } from "../../hooks";
 
 export const useFormItemDomControl = ({
   shouldUpdate,
@@ -38,3 +40,15 @@ export const useHide = ({ hide, form }: UseHideUpItemModal) => {
   }
   return !!hide;
 };
+
+const classNameData = {
+  top: "hw-form-base-item-top",
+  left: "hw-form-base-item-left",
+  right: "hw-form-base-item-right",
+  topRight: "hw-form-base-item-top-right",
+  topLeft: "hw-form-base-item-top-left",
+};
+export const usePositionClassName = (position: LabelAlignModal) => {
+  const className = classNameData[position];
+  return useClassName(className);
+};

package/src/components/Form/Label.tsx

@@ -9,7 +9,6 @@ interface IProps {
   hover?: string | HoverModal;
   colon?: boolean;
   required?: boolean;
-  align?: "left" | "right";
 }
 const useHover = ({ hover }: IProps) => {
   if (!hover || typeof hover === "string") {
@@ -26,7 +25,6 @@ const Index: React.FC<IProps> = ({
   colon,
   required,
   hover,
-  align = "right",
 }) => {
   const { text, icon } = useHover({ hover });
   const array = [
@@ -36,7 +34,7 @@ const Index: React.FC<IProps> = ({
 
   const className = useClassName(array);
   return (
-    <div style={{ width: labelWidth, textAlign: align }} className={className}>
+    <div style={{ width: labelWidth }} className={className}>
       {children}
       {text && (
         <span style={{ marginLeft: 4 }}>

package/src/components/Form/index.less

@@ -20,3 +20,35 @@
   align-items: center;
   min-height: 32px;
 }
+.@{ant-prefix}-hw-form-base-item-top-left {
+  .@{ant-prefix}-form-item-label > label {
+    height: auto;
+  }
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: left;
+  }
+}
+.@{ant-prefix}-hw-form-base-item-top-right {
+  .@{ant-prefix}-form-item-label > label {
+    height: auto;
+  }
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: right;
+  }
+}
+.@{ant-prefix}-hw-form-base-item-top {
+  .@{ant-prefix}-form-item-label > label {
+    height: auto;
+  }
+}
+.@{ant-prefix}-hw-form-base-item-right {
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: right;
+  }
+}
+
+.@{ant-prefix}-hw-form-base-item-left {
+  .@{ant-prefix}-hw-form-item-colon {
+    text-align: left;
+  }
+}

package/src/components/Form/index.tsx

@@ -24,6 +24,7 @@ export default ({
   gutter,
   submitLoading,
   labelAlign: formLabelAlign,
+                  formItemStyle,
   ...props
 }: HFormProps) => {
   const hForm = useCurrentForm(form);
@@ -80,15 +81,18 @@ export default ({
                 labelWidth: itemLabelWidth,
                 hideLabel = formHideLabel,
                 labelAlign = formLabelAlign,
+                name,
+                  style=formItemStyle,
               } = itemData;
               return (
                 <Item
                   {...itemData}
-                  key={index}
+                  labelAlign={labelAlign}
+                  key={name||index}
+                  style={style}
                   hideLabel={hideLabel}
                   itemSpan={itemSpan}
                   labelWidth={itemLabelWidth || labelWidth}
-                  labelAlign={labelAlign}
                 />
               );
             })}

package/src/components/Form/modal.ts

@@ -75,7 +75,9 @@ export interface DispatchModal<T = string | string[]> {
   manual?: boolean;
   reset?: boolean;
 }
-export interface HItemProps extends Omit<FormItemProps, "name"> {
+export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
+
+export interface HItemProps extends Omit<FormItemProps, "name"|"labelAlign"> {
   type?: string;
   itemProps?: ItemPropsType;
   render?: RenderFun;
@@ -90,10 +92,10 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
   dispatch?: DispatchModal;
   itemSpan?: ColProps;
   hideLabel?: boolean;
+  labelAlign?: LabelAlignModal;
 }
-
 export interface HFormProps<T = any, R = any>
-  extends Omit<FormProps, "form" | "onFinish"> {
+  extends Omit<FormProps, "form" | "onFinish"|"labelAlign"> {
   configData: HItemProps[];
   labelWidth?: number;
   request?: (values: T, params?: any) => Promise<R>;
@@ -106,7 +108,8 @@ export interface HFormProps<T = any, R = any>
   hideLabel?: boolean;
   gutter?: Gutter | [Gutter, Gutter];
   submitLoading?: boolean;
-  labelAlign?: "left" | "right";
+  labelAlign?: LabelAlignModal;
+  formItemStyle?:React.CSSProperties;
 }
 export interface HFormItemProps extends HItemProps {
   required?: boolean;
@@ -115,7 +118,7 @@ export interface HFormItemProps extends HItemProps {
   itemSpan?: ColProps;
   initValueProvider?: AddValueFormat;
   subProvider?: AddValueFormat;
-  labelAlign?: "left" | "right";
+  labelAlign?: LabelAlignModal;
 }
 export type argsFn = (...args: any[]) => void;
 export interface FormContextProps {
@@ -148,6 +151,7 @@ export interface IFormConfigContextProps {
   dateRanges?: RangePickerProps["ranges"];
   uploadProps?: ConfigUploadProps;
   defaultComponent?: DefaultComponentModal;
+  formItemStyle?:React.CSSProperties
 }
 interface ActionModal {
   key: string;

package/src/components/config.ts

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

package/src/pages/Form/index.tsx

@@ -14,64 +14,6 @@ const formData = (options) => {
     },
   ];
   return [
-    {
-      label: "输入框",
-      name: "name",
-      rules: [
-        () => {
-          return {
-            required: true,
-          };
-        },
-      ],
-    },
-    {
-      label: "数字",
-      name: "sz",
-      type: "inputNumber",
-      rules: [{ required: true }],
-    },
-    {
-      label: "下拉框213",
-      name: "select",
-      type: "select",
-      style:{
-        marginBottom:8
-      },
-      dispatch: {
-        fnKey: "reload",
-        dependencies: ["selectInput", "sz"],
-      },
-      itemProps: {
-        options: op,
-        showSearch: true,
-        allowClear: true,
-        mode: "multiple",
-      },
-      rules: [{ required: true }],
-    },
-    {
-      label: "下拉输入框",
-      name: "selectInput",
-      type: "selectInput",
-      rules: [{ required: true }],
-      itemProps: {
-        valueName: {
-          select: "op",
-          input: "opInput",
-        },
-        selectProps: {
-          options: [{ label: "测试", value: 1 }],
-        },
-      },
-    },
-    {
-      label: "按钮输入框",
-      name: "buttonInput",
-      type: "buttonInput",
-      children: "点击",
-      rules: [{ required: true }],
-    },
     {
       label: "选择",
       name: "checkboxGroup",
@@ -83,6 +25,10 @@ const formData = (options) => {
         { value: "选择2", key: "check2" },
       ],
       direction: "vertical",
+      labelAlign: "topLeft",
+      style:{
+        marginBottom:200
+      }
     },
     {
       label: "开关",
@@ -96,100 +42,6 @@ const formData = (options) => {
         },
       },
     },
-    {
-      label: "时间",
-      name: "datePicker",
-      type: "datePicker",
-      hover: "时间选择",
-      helper: "帮助我",
-      itemProps: {
-        subProvider: (item, val) => {
-          return {
-            datePicker: "fakfjkfjsklfjskljsak",
-          };
-        },
-      },
-      rules: [{ required: true }],
-    },
-    {
-      label: "时间段",
-      name: "rangePicker",
-      type: "rangePicker",
-      helper: "帮助我",
-      rules: [{ required: true }],
-      itemProps: {
-        valueMap: {
-          start: "testStart",
-          end: "testEnd",
-        },
-      },
-    },
-    {
-      label: "时分秒",
-      name: "timePicker",
-      type: "timePicker",
-      rules: [{ required: true }],
-    },
-    {
-      label: "文件",
-      name: "upload",
-      type: "upload",
-      rules: [{ required: true }],
-    },
-    {
-      label: "地址文件",
-      name: "urlUpload",
-      type: "urlUpload",
-      itemProps: {
-        maxCount: 3,
-      },
-      rules: [{ required: true }],
-    },
-    {
-      label: "颜色",
-      name: "colorInput",
-      type: "colorInput",
-    },
-    {
-      label: "测试",
-      type: "test",
-    },
-    {
-      label: "多级",
-      type: "cascader",
-      name: "cascader",
-      itemProps: {
-        options: [
-          {
-            value: "多选1",
-            key: 1,
-          },
-        ],
-      },
-    },
-    {
-      label: "验证码",
-      type: "verificationCodeInput",
-      name: "verificationCodeInput",
-      itemProps: {
-        request: () => {
-          return Promise.resolve({ code: 200 });
-        },
-      },
-    },
-    {
-      label: "去空input",
-      type: "trimInput",
-      name: "trimInput",
-    },
-    {
-      label: "去空textArea",
-      type: "trimTextArea",
-      name: "trimTextArea",
-    },
-    {
-      type: "submit",
-    },
     {
       type: "submit",
       itemProps: {
@@ -261,6 +113,9 @@ export default () => {
         defaultComponent={{
           test: Test,
         }}
+        formItemStyle={{
+          marginBottom:100
+        }}
         fieldNames={{
           label: "value",
           value: "key",
@@ -270,7 +125,10 @@ export default () => {
           configData={formData(options)}
           labelWidth={200}
           form={form}
-          labelAlign={"left"}
+          formItemStyle={{
+            marginBottom:10
+          }}
+          labelAlign={"right"}
           submitLoading={true}
           onFinish={(value) => {
             console.log(value);