@hw-component/form 1.9.12 → 1.9.14

package/es/Input/InputNumberGroup.js

@@ -3,7 +3,7 @@ import _typeof from '@babel/runtime-corejs3/helpers/typeof';
 import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/objectWithoutProperties';
 import _defineProperty from '@babel/runtime-corejs3/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime-corejs3/helpers/slicedToArray';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Input, InputNumber } from 'antd';
 import { SwapRightOutlined } from '@ant-design/icons';
 import React, { useState, useMemo } from 'react';
@@ -22,24 +22,47 @@ var useArrayProps = function useArrayProps(props) {
     return [props, props];
   }, [props]);
 };
-var InputNumberGroup = function InputNumberGroup(_ref) {
-  var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? {} : _ref$value,
-    _ref$valueMap = _ref.valueMap,
-    valueMap = _ref$valueMap === void 0 ? {
+var Addon = function Addon(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var addonClassname = useClassName(["hw-input-group-addon"]);
+  if (!children) {
+    return jsx(Fragment, {});
+  }
+  if (/*#__PURE__*/React.isValidElement(children)) {
+    return jsx("div", {
+      className: addonClassname,
+      children: /*#__PURE__*/React.cloneElement(children, {
+        value: value,
+        onChange: onChange
+      })
+    });
+  }
+  return jsx("div", {
+    className: addonClassname,
+    children: children
+  });
+};
+var InputNumberGroup = function InputNumberGroup(_ref2) {
+  var _ref2$value = _ref2.value,
+    value = _ref2$value === void 0 ? {} : _ref2$value,
+    _ref2$valueMap = _ref2.valueMap,
+    valueMap = _ref2$valueMap === void 0 ? {
       min: "min",
       max: "max"
-    } : _ref$valueMap,
-    onChange = _ref.onChange,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? ["请输入", "请输入"] : _ref$placeholder,
-    _ref$inputNumberProps = _ref.inputNumberProps,
-    inputNumberProps = _ref$inputNumberProps === void 0 ? {} : _ref$inputNumberProps,
-    addonAfter = _ref.addonAfter,
-    _ref$noHandlerWrap = _ref.noHandlerWrap,
-    noHandlerWrap = _ref$noHandlerWrap === void 0 ? true : _ref$noHandlerWrap,
-    addFormat = _ref.addFormat,
-    disabled = _ref.disabled;
+    } : _ref2$valueMap,
+    onChange = _ref2.onChange,
+    _ref2$placeholder = _ref2.placeholder,
+    placeholder = _ref2$placeholder === void 0 ? ["请输入", "请输入"] : _ref2$placeholder,
+    _ref2$inputNumberProp = _ref2.inputNumberProps,
+    inputNumberProps = _ref2$inputNumberProp === void 0 ? {} : _ref2$inputNumberProp,
+    addonAfter = _ref2.addonAfter,
+    _ref2$noHandlerWrap = _ref2.noHandlerWrap,
+    noHandlerWrap = _ref2$noHandlerWrap === void 0 ? true : _ref2$noHandlerWrap,
+    addFormat = _ref2.addFormat,
+    disabled = _ref2.disabled,
+    addonBefore = _ref2.addonBefore;
   var min = valueMap.min,
     max = valueMap.max;
   var minVal = value[min],
@@ -99,10 +122,11 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   return jsxs(Input.Group, {
     compact: true,
     className: contentClassname,
-    children: [addonAfter ? /*#__PURE__*/React.cloneElement(addonAfter, {
+    children: [jsx(Addon, {
       value: value,
-      onChange: onChange
-    }) : addonAfter, jsxs("div", {
+      onChange: onChange,
+      children: addonBefore
+    }), jsxs("div", {
       className: "".concat(bodyClassname, " \n        ").concat(focus ? activeClassname : "", " \n        ").concat(noHandlerWrap ? noHandlerWrapClassname : "", "\n         ").concat(disabled ? disabledClassname : notDisabledClassname, "\n        "),
       children: [jsx("span", {
         className: borderClassname
@@ -145,14 +169,18 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
       }, edProps), {}, {
         disabled: disabled
       }))]
+    }), jsx(Addon, {
+      value: value,
+      onChange: onChange,
+      children: addonAfter
     })]
   });
 };
 var Index = HFormConnect(InputNumberGroup);
 var HInputNumberGroup = {
   Component: Index,
-  placeholder: function placeholder(_ref4) {
-    var label = _ref4.label;
+  placeholder: function placeholder(_ref5) {
+    var label = _ref5.label;
     return ["\u8BF7\u8F93\u5165".concat(label, "\u6700\u5C0F\u503C"), "\u8BF7\u8F93\u5165".concat(label, "\u6700\u5927\u503C")];
   }
 };

package/es/index.css

@@ -148,6 +148,19 @@
   border-color: #40a9ff;
   box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
+.ant-hw-input-group .ant-hw-input-group-addon {
+  padding: 0 11px;
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+  display: -webkit-box !important;
+  display: -webkit-flex !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 .ant-hw-color-box {
   width: 22px;
   height: 22px;

package/lib/Input/InputNumberGroup.js

@@ -25,24 +25,47 @@ var useArrayProps = function useArrayProps(props) {
     return [props, props];
   }, [props]);
 };
-var InputNumberGroup = function InputNumberGroup(_ref) {
-  var _ref$value = _ref.value,
-    value = _ref$value === void 0 ? {} : _ref$value,
-    _ref$valueMap = _ref.valueMap,
-    valueMap = _ref$valueMap === void 0 ? {
+var Addon = function Addon(_ref) {
+  var children = _ref.children,
+    value = _ref.value,
+    onChange = _ref.onChange;
+  var addonClassname = index.useClassName(["hw-input-group-addon"]);
+  if (!children) {
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  if (/*#__PURE__*/React.isValidElement(children)) {
+    return jsxRuntime.jsx("div", {
+      className: addonClassname,
+      children: /*#__PURE__*/React.cloneElement(children, {
+        value: value,
+        onChange: onChange
+      })
+    });
+  }
+  return jsxRuntime.jsx("div", {
+    className: addonClassname,
+    children: children
+  });
+};
+var InputNumberGroup = function InputNumberGroup(_ref2) {
+  var _ref2$value = _ref2.value,
+    value = _ref2$value === void 0 ? {} : _ref2$value,
+    _ref2$valueMap = _ref2.valueMap,
+    valueMap = _ref2$valueMap === void 0 ? {
       min: "min",
       max: "max"
-    } : _ref$valueMap,
-    onChange = _ref.onChange,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? ["请输入", "请输入"] : _ref$placeholder,
-    _ref$inputNumberProps = _ref.inputNumberProps,
-    inputNumberProps = _ref$inputNumberProps === void 0 ? {} : _ref$inputNumberProps,
-    addonAfter = _ref.addonAfter,
-    _ref$noHandlerWrap = _ref.noHandlerWrap,
-    noHandlerWrap = _ref$noHandlerWrap === void 0 ? true : _ref$noHandlerWrap,
-    addFormat = _ref.addFormat,
-    disabled = _ref.disabled;
+    } : _ref2$valueMap,
+    onChange = _ref2.onChange,
+    _ref2$placeholder = _ref2.placeholder,
+    placeholder = _ref2$placeholder === void 0 ? ["请输入", "请输入"] : _ref2$placeholder,
+    _ref2$inputNumberProp = _ref2.inputNumberProps,
+    inputNumberProps = _ref2$inputNumberProp === void 0 ? {} : _ref2$inputNumberProp,
+    addonAfter = _ref2.addonAfter,
+    _ref2$noHandlerWrap = _ref2.noHandlerWrap,
+    noHandlerWrap = _ref2$noHandlerWrap === void 0 ? true : _ref2$noHandlerWrap,
+    addFormat = _ref2.addFormat,
+    disabled = _ref2.disabled,
+    addonBefore = _ref2.addonBefore;
   var min = valueMap.min,
     max = valueMap.max;
   var minVal = value[min],
@@ -102,10 +125,11 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   return jsxRuntime.jsxs(antd.Input.Group, {
     compact: true,
     className: contentClassname,
-    children: [addonAfter ? /*#__PURE__*/React.cloneElement(addonAfter, {
+    children: [jsxRuntime.jsx(Addon, {
       value: value,
-      onChange: onChange
-    }) : addonAfter, jsxRuntime.jsxs("div", {
+      onChange: onChange,
+      children: addonBefore
+    }), jsxRuntime.jsxs("div", {
       className: "".concat(bodyClassname, " \n        ").concat(focus ? activeClassname : "", " \n        ").concat(noHandlerWrap ? noHandlerWrapClassname : "", "\n         ").concat(disabled ? disabledClassname : notDisabledClassname, "\n        "),
       children: [jsxRuntime.jsx("span", {
         className: borderClassname
@@ -148,14 +172,18 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
       }, edProps), {}, {
         disabled: disabled
       }))]
+    }), jsxRuntime.jsx(Addon, {
+      value: value,
+      onChange: onChange,
+      children: addonAfter
     })]
   });
 };
 var Index = HFormConnect.default(InputNumberGroup);
 var HInputNumberGroup = {
   Component: Index,
-  placeholder: function placeholder(_ref4) {
-    var label = _ref4.label;
+  placeholder: function placeholder(_ref5) {
+    var label = _ref5.label;
     return ["\u8BF7\u8F93\u5165".concat(label, "\u6700\u5C0F\u503C"), "\u8BF7\u8F93\u5165".concat(label, "\u6700\u5927\u503C")];
   }
 };

package/lib/index.css

@@ -148,6 +148,19 @@
   border-color: #40a9ff;
   box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
 }
+.ant-hw-input-group .ant-hw-input-group-addon {
+  padding: 0 11px;
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+  display: -webkit-box !important;
+  display: -webkit-flex !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
 .ant-hw-color-box {
   width: 22px;
   height: 22px;

package/package.json

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

package/src/components/Input/InputNumberGroup.tsx

@@ -19,6 +19,7 @@ interface IProps<T = any> {
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   noHandlerWrap?: boolean;
   disabled?: boolean;
+  addonBefore?:React.ReactNode
 }
 const useArrayProps = (props: any) => {
   return useMemo(() => {
@@ -28,6 +29,20 @@ const useArrayProps = (props: any) => {
     return [props, props];
   }, [props]);
 };
+const Addon:React.FC<IProps>=({children,value,onChange})=>{
+  const addonClassname=useClassName(["hw-input-group-addon"])
+   if (!children){
+      return  <></>
+   }
+  if (React.isValidElement(children)){
+    return <div className={addonClassname}>
+      { React.cloneElement(children as any, { value, onChange })}
+    </div>
+  }
+  return  <div className={addonClassname}>
+    {children}
+  </div>
+}
 const InputNumberGroup = ({
   value = {},
   valueMap = { min: "min", max: "max" },
@@ -38,6 +53,7 @@ const InputNumberGroup = ({
   noHandlerWrap = true,
   addFormat,
   disabled,
+                            addonBefore,
 }: IProps) => {
   const { min, max } = valueMap;
   const { [min]: minVal, [max]: maxVal } = value;
@@ -52,7 +68,6 @@ const InputNumberGroup = ({
   const iconClassname = useClassName(["hw-input-group-icon"]);
   const disabledClassname = useClassName(["hw-input-group-disabled"]);
   const notDisabledClassname = useClassName(["hw-input-group-not-disabled"]);
-
   const noHandlerWrapClassname = useClassName([
     "hw-input-group-no-handler-wrap",
   ]);
@@ -96,9 +111,7 @@ const InputNumberGroup = ({
   };
   return (
     <Input.Group compact className={contentClassname}>
-      {addonAfter
-        ? React.cloneElement(addonAfter as any, { value, onChange })
-        : addonAfter}
+      <Addon value={value} onChange={onChange}>{addonBefore}</Addon>
       <div
         className={`${bodyClassname} 
         ${focus ? activeClassname : ""} 
@@ -148,6 +161,7 @@ const InputNumberGroup = ({
           disabled={disabled}
         />
       </div>
+      <Addon value={value} onChange={onChange}>{addonAfter}</Addon>
     </Input.Group>
   );
 };

package/src/components/Input/index.less

@@ -51,6 +51,13 @@
     border-color: #40a9ff;
     box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
   }
+  .@{all-input-group}-addon{
+       padding: 0 11px;
+       background-color: #fafafa;
+       border: 1px solid #d9d9d9;
+       display: flex !important;
+       align-items: center;
+  }
 }
 
 .@{ant-prefix}-hw-color-box {

package/src/pages/Form/index.tsx

@@ -134,13 +134,8 @@ export default () => {
       >
         <HForm
           configData={formData(options)}
-          labelWidth={300}
           dismissOnPressEnter={false}
           form={form}
-          layout={"vertical"}
-          itemSpan={{
-            span: 12,
-          }}
           labelAlign={"left"}
           onFinish={(value) => {
             console.log(value, "onFinish");

package/src/pages/InputNumberGroup/index.tsx

@@ -0,0 +1,15 @@
+import {HInputNumberGroup} from '@/components';
+import {Col, Row} from 'antd';
+const Test=({value,onChange})=>{
+    console.log(value)
+    return <div onClick={()=>{
+        onChange(1);
+    }}>1231</div>
+}
+export default ()=>{
+    return <Row style={{marginTop:20,marginLeft:20}}>
+        <Col span={10}>
+            <HInputNumberGroup addonBefore={<Test/>} />
+        </Col>
+    </Row>
+}

package/src/routes.tsx

@@ -10,6 +10,7 @@ import Upload from "./pages/Upload";
 import Form from "./pages/Form";
 import ModalForm from "./pages/ModalForm";
 import DrawerForm from "./pages/DrawerForm";
+import InputNumberGroup from "./pages/InputNumberGroup";
 
 export interface RouteModal {
   path?: string;
@@ -75,6 +76,11 @@ const routes: RouteModal[] = [
     name: "抽屉表单",
     element: <DrawerForm />,
   },
+  {
+    path: "/inputNumberGroup",
+    name: "数字输入框",
+    element:<InputNumberGroup/>,
+  },
 ];
 
 export default routes;