@hw-component/form 1.9.11 → 1.9.13

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;