@hw-component/form 1.9.12 → 1.9.13

package/es/Input/InputNumberGroup.js

@@ -39,7 +39,8 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
     _ref$noHandlerWrap = _ref.noHandlerWrap,
     noHandlerWrap = _ref$noHandlerWrap === void 0 ? true : _ref$noHandlerWrap,
     addFormat = _ref.addFormat,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    addonBefore = _ref.addonBefore;
   var min = valueMap.min,
     max = valueMap.max;
   var minVal = value[min],
@@ -64,6 +65,7 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   var iconClassname = useClassName(["hw-input-group-icon"]);
   var disabledClassname = useClassName(["hw-input-group-disabled"]);
   var notDisabledClassname = useClassName(["hw-input-group-not-disabled"]);
+  var addonClassname = useClassName(["hw-input-group-addon"]);
   var noHandlerWrapClassname = useClassName(["hw-input-group-no-handler-wrap"]);
   addFormat === null || addFormat === void 0 || addFormat({
     float: {
@@ -99,10 +101,13 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   return jsxs(Input.Group, {
     compact: true,
     className: contentClassname,
-    children: [addonAfter ? /*#__PURE__*/React.cloneElement(addonAfter, {
-      value: value,
-      onChange: onChange
-    }) : addonAfter, jsxs("div", {
+    children: [addonBefore && jsx("div", {
+      className: addonClassname,
+      children: /*#__PURE__*/React.cloneElement(addonBefore, {
+        value: value,
+        onChange: onChange
+      })
+    }), 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,6 +150,12 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
       }, edProps), {}, {
         disabled: disabled
       }))]
+    }), addonAfter && jsx("div", {
+      className: addonClassname,
+      children: /*#__PURE__*/React.cloneElement(addonAfter, {
+        value: value,
+        onChange: onChange
+      })
     })]
   });
 };

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

@@ -42,7 +42,8 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
     _ref$noHandlerWrap = _ref.noHandlerWrap,
     noHandlerWrap = _ref$noHandlerWrap === void 0 ? true : _ref$noHandlerWrap,
     addFormat = _ref.addFormat,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    addonBefore = _ref.addonBefore;
   var min = valueMap.min,
     max = valueMap.max;
   var minVal = value[min],
@@ -67,6 +68,7 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   var iconClassname = index.useClassName(["hw-input-group-icon"]);
   var disabledClassname = index.useClassName(["hw-input-group-disabled"]);
   var notDisabledClassname = index.useClassName(["hw-input-group-not-disabled"]);
+  var addonClassname = index.useClassName(["hw-input-group-addon"]);
   var noHandlerWrapClassname = index.useClassName(["hw-input-group-no-handler-wrap"]);
   addFormat === null || addFormat === void 0 || addFormat({
     float: {
@@ -102,10 +104,13 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
   return jsxRuntime.jsxs(antd.Input.Group, {
     compact: true,
     className: contentClassname,
-    children: [addonAfter ? /*#__PURE__*/React.cloneElement(addonAfter, {
-      value: value,
-      onChange: onChange
-    }) : addonAfter, jsxRuntime.jsxs("div", {
+    children: [addonBefore && jsxRuntime.jsx("div", {
+      className: addonClassname,
+      children: /*#__PURE__*/React.cloneElement(addonBefore, {
+        value: value,
+        onChange: onChange
+      })
+    }), 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,6 +153,12 @@ var InputNumberGroup = function InputNumberGroup(_ref) {
       }, edProps), {}, {
         disabled: disabled
       }))]
+    }), addonAfter && jsxRuntime.jsx("div", {
+      className: addonClassname,
+      children: /*#__PURE__*/React.cloneElement(addonAfter, {
+        value: value,
+        onChange: onChange
+      })
     })]
   });
 };

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.13",
   "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(() => {
@@ -38,6 +39,7 @@ const InputNumberGroup = ({
   noHandlerWrap = true,
   addFormat,
   disabled,
+                            addonBefore,
 }: IProps) => {
   const { min, max } = valueMap;
   const { [min]: minVal, [max]: maxVal } = value;
@@ -52,7 +54,7 @@ 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 addonClassname=useClassName(["hw-input-group-addon"])
   const noHandlerWrapClassname = useClassName([
     "hw-input-group-no-handler-wrap",
   ]);
@@ -96,9 +98,9 @@ const InputNumberGroup = ({
   };
   return (
     <Input.Group compact className={contentClassname}>
-      {addonAfter
-        ? React.cloneElement(addonAfter as any, { value, onChange })
-        : addonAfter}
+      {addonBefore&&<div className={addonClassname}>
+        { React.cloneElement(addonBefore as any, { value, onChange })}
+      </div>}
       <div
         className={`${bodyClassname} 
         ${focus ? activeClassname : ""} 
@@ -148,6 +150,9 @@ const InputNumberGroup = ({
           disabled={disabled}
         />
       </div>
+      {addonAfter&&<div className={addonClassname}>
+        { React.cloneElement(addonAfter as any, { value, onChange })}
+      </div>}
     </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,9 @@
+import {HInputNumberGroup} from '@/components';
+import {Col, Row} from 'antd';
+export default ()=>{
+    return <Row style={{marginTop:20,marginLeft:20}}>
+        <Col span={10}>
+            <HInputNumberGroup />
+        </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;