@hw-component/form 1.9.66 → 1.9.68

package/es/Form/Basic.d.ts

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

package/es/Form/Basic.js

@@ -6,6 +6,7 @@ import Item from './FormItem/index.js';
 import { Row } from 'antd';
 import { useFormContext } from './Context/index.js';
 import useInitConfigData from './hooks/useInitConfigData.js';
+import { useClassName } from '../hooks/index.js';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -16,7 +17,8 @@ var Basic = (function (_ref) {
     dismissOnPressEnter = _ref$dismissOnPressEn === void 0 ? true : _ref$dismissOnPressEn,
     itemSpan = _ref.itemSpan,
     labelWidth = _ref.labelWidth,
-    formItemStyle = _ref.formItemStyle;
+    formItemStyle = _ref.formItemStyle,
+    flexBox = _ref.flexBox;
   var _useFormContext = useFormContext(),
     form = _useFormContext.form,
     formItemProps = _useFormContext.itemProps,
@@ -29,6 +31,7 @@ var Basic = (function (_ref) {
     }),
     newConfigData = _useInitConfigData.newConfigData,
     dispatchSourceData = _useInitConfigData.dispatchSourceData;
+  var rowClassname = useClassName("hw-form-item-row");
   useEffect(function () {
     setData === null || setData === void 0 || setData(dispatchSourceData);
   }, []);
@@ -41,6 +44,7 @@ var Basic = (function (_ref) {
     style: {
       width: "100%"
     },
+    className: flexBox ? rowClassname : "",
     children: newConfigData.map(function (itemData, index) {
       var _itemData$labelWidth = itemData.labelWidth,
         itemLabelWidth = _itemData$labelWidth === void 0 ? labelWidth : _itemData$labelWidth,

package/es/Form/modal.d.ts

@@ -77,6 +77,7 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     itemProps?: ItemPropsType;
     dismissOnPressEnter?: boolean;
     rowWrapper?: boolean;
+    flexBox?: boolean;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;

package/es/index.css

@@ -160,6 +160,12 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-hw-form-item-row .ant-form-item-control-input-content > .ant-space-vertical {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
 .ant-hw-input-group .ant-hw-input-group-disabled {
   background-color: #f5f5f5;
 }

package/lib/Form/Basic.d.ts

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

package/lib/Form/Basic.js

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var index$1 = require('./FormItem/index.js');
+var index$2 = require('./FormItem/index.js');
 var antd = require('antd');
 var index = require('./Context/index.js');
 var useInitConfigData = require('./hooks/useInitConfigData.js');
+var index$1 = require('../hooks/index.js');
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,7 +20,8 @@ var Basic = (function (_ref) {
     dismissOnPressEnter = _ref$dismissOnPressEn === void 0 ? true : _ref$dismissOnPressEn,
     itemSpan = _ref.itemSpan,
     labelWidth = _ref.labelWidth,
-    formItemStyle = _ref.formItemStyle;
+    formItemStyle = _ref.formItemStyle,
+    flexBox = _ref.flexBox;
   var _useFormContext = index.useFormContext(),
     form = _useFormContext.form,
     formItemProps = _useFormContext.itemProps,
@@ -32,6 +34,7 @@ var Basic = (function (_ref) {
     }),
     newConfigData = _useInitConfigData.newConfigData,
     dispatchSourceData = _useInitConfigData.dispatchSourceData;
+  var rowClassname = index$1.useClassName("hw-form-item-row");
   React.useEffect(function () {
     setData === null || setData === void 0 || setData(dispatchSourceData);
   }, []);
@@ -44,6 +47,7 @@ var Basic = (function (_ref) {
     style: {
       width: "100%"
     },
+    className: flexBox ? rowClassname : "",
     children: newConfigData.map(function (itemData, index) {
       var _itemData$labelWidth = itemData.labelWidth,
         itemLabelWidth = _itemData$labelWidth === void 0 ? labelWidth : _itemData$labelWidth,
@@ -62,7 +66,7 @@ var Basic = (function (_ref) {
       var arrayName = Array.isArray(name) ? name.join(".") : name;
       var key = arrayName || nameKey;
       var itemStyle = style || formItemStyle;
-      return /*#__PURE__*/React.createElement(index$1.default, _objectSpread(_objectSpread({}, itemData), {}, {
+      return /*#__PURE__*/React.createElement(index$2.default, _objectSpread(_objectSpread({}, itemData), {}, {
         labelAlign: labelAlign,
         key: key || index,
         style: itemStyle,

package/lib/Form/modal.d.ts

@@ -77,6 +77,7 @@ export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form" | "
     itemProps?: ItemPropsType;
     dismissOnPressEnter?: boolean;
     rowWrapper?: boolean;
+    flexBox?: boolean;
 }
 export interface HFormItemProps extends HItemProps {
     required?: boolean;

package/lib/index.css

@@ -160,6 +160,12 @@
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;
 }
+.ant-hw-form-item-row .ant-form-item-control-input-content > .ant-space-vertical {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
 .ant-hw-input-group .ant-hw-input-group-disabled {
   background-color: #f5f5f5;
 }

package/package.json

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

package/src/components/Form/Basic.tsx

@@ -8,6 +8,7 @@ import { Row } from "antd";
 import { useFormContext } from "./Context";
 import useInitConfigData from "./hooks/useInitConfigData";
 import { useEffect } from "react";
+import {useClassName} from "../hooks";
 
 export default ({
   configData,
@@ -16,6 +17,7 @@ export default ({
   itemSpan,
   labelWidth,
                   formItemStyle,
+                  flexBox
 }: HFormProps) => {
   const {
     form,
@@ -28,6 +30,7 @@ export default ({
     configData,
     form,
   });
+  const rowClassname=useClassName("hw-form-item-row");
   useEffect(() => {
     setData?.(dispatchSourceData);
   }, []);
@@ -36,7 +39,7 @@ export default ({
   };
   const globalItemSpan = itemSpan || formItemSpan;
   return (
-    <Row gutter={gutter} style={{ width: "100%" }}>
+    <Row gutter={gutter} style={{ width: "100%" }} className={flexBox?rowClassname:""}>
       {newConfigData.map((itemData: HItemProps, index) => {
         const {
           labelWidth: itemLabelWidth = labelWidth,

package/src/components/Form/index.less

@@ -95,3 +95,8 @@
     overflow: visible;
   }
 }
+.@{ant-prefix}-hw-form-item-row{
+  .@{ant-prefix}-form-item-control-input-content>.@{ant-prefix}-space-vertical{
+      display: flex;
+  }
+}

package/src/components/Form/modal.ts

@@ -125,6 +125,7 @@ export interface HFormProps<T = any, R = any>
   itemProps?: ItemPropsType;
   dismissOnPressEnter?: boolean;
   rowWrapper?: boolean;
+  flexBox?:boolean;
 }
 export interface HFormItemProps extends HItemProps {
   required?: boolean;

package/src/pages/Select/index.tsx

@@ -1,10 +1,11 @@
 import { HSelect } from "../../components";
-import { Space } from "antd";
-import { useState } from "react";
+import {Form, Space} from "antd";
+import {useEffect, useState} from "react";
 export default () => {
   const [selectVal, setSelectVal] = useState([{ name: "11", id: -100 }]);
   const [op, setOp] = useState([{ label: "1", value: 1 }]);
   const [val, setVal] = useState([2, 3]);
+
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HSelect