@hw-component/form 1.9.60 → 1.9.61

package/src/components/Input/index.less

@@ -1,18 +1,13 @@
-@import "../styles/local.less";
-@all-input-group: ~"@{ant-prefix}-hw-input-group";
+@import "../InputGroup/index";
 
 .@{all-input-group} {
-  display: flex !important;
-  width: 100%;
-  color: rgba(0, 0, 0, 0.25);
   .@{all-input-group}-disabled {
     background-color: #f5f5f5;
   }
-  .@{all-input-group}-body {
-    position: relative;
-    display: flex !important;
-    flex: 1;
+  .@{all-input-group}-number-body{
+    width: 100%;
     border: 1px solid #d9d9d9;
+    display: flex !important;
   }
   .@{all-input-group}-not-disabled {
     &:hover {
@@ -30,14 +25,6 @@
       display: none;
     }
   }
-  .@{all-input-group}-border {
-    position: absolute;
-    left: -1px;
-    display: none;
-    width: 1px;
-    height: 100%;
-    background-color: #40a9ff;
-  }
   .@{all-input-group}-icon {
     display: flex;
     align-items: center;
@@ -63,7 +50,7 @@
   box-shadow: 0 0 0 0 !important;
 }
 .@{ant-prefix}-form-item-has-error {
-  .@{all-input-group}-body {
+  .@{all-input-group}-number-body {
     border-color: #ff4d4f !important;
   }
   .@{all-input-group}-active {

package/src/components/InputGroup/index.less

@@ -0,0 +1,26 @@
+@import "../styles/local.less";
+@all-input-group: ~"@{ant-prefix}-hw-input-group";
+
+.@{all-input-group} {
+  display: flex !important;
+  width: 100%;
+  color: rgba(0, 0, 0, 0.25);
+  .@{all-input-group}-body {
+    position: relative;
+    display: flex !important;
+    flex: 1;
+  }
+}
+
+.@{ant-prefix}-hw-addon {
+  display: flex !important;
+  align-items: center;
+  padding: 0 11px;
+  background-color: #fafafa;
+  border: 1px solid #d9d9d9;
+}
+.@{ant-prefix}-form-item-has-error {
+  .@{all-input-group}-body {
+    border-color: #ff4d4f !important;
+  }
+}

package/src/components/InputGroup/index.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {useClassName} from "../hooks";
+import {Input} from "antd"
+interface HInputGroupProps<T=any> {
+    addonAfter?: React.ReactNode;
+    value?: T;
+    onChange?: (value: T) => void;
+    addonBefore?: React.ReactNode;
+}
+const Addon: React.FC<HInputGroupProps> = ({ children, value, onChange }) => {
+    const addonClassname = useClassName(["hw-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 Index:React.FC<HInputGroupProps>=({addonAfter,addonBefore,children,value,onChange,...props})=>{
+    const contentClassname = useClassName(["hw-input-group"]);
+    const bodyClassname = useClassName(["hw-input-group-body"]);
+
+    return <Input.Group compact className={contentClassname}>
+        <Addon value={value} onChange={onChange}>
+            {addonBefore}
+        </Addon>
+       <div className={bodyClassname}>
+           {React.cloneElement((children as any),{value,onChange,...props})}
+       </div>
+        <Addon value={value} onChange={onChange}>
+            {addonAfter}
+        </Addon>
+    </Input.Group>
+}
+
+export default Index;

package/src/components/TextArea/index.tsx

@@ -1,7 +1,7 @@
 import { Input } from "antd";
 import type { TextAreaProps } from "antd/es/input";
 import {useClassName} from "../hooks";
-interface HTextAreaProps extends TextAreaProps{
+export interface HTextAreaProps extends TextAreaProps{
    bordered?:boolean;
 }
 

package/src/components/index.tsx

@@ -7,6 +7,7 @@ export { useHDialogForm } from "@/components/DialogForm/hooks";
 export { default as HFormConnect } from "./Form/HFormConnect";
 export { default as HFormConfigProvider } from "./Form/Context/FormConfigProvider";
 export { default as HBasicForm } from "./Form/Basic";
+export { default as HInputGroup } from "./InputGroup";
 
 import ModalForm from "./DialogForm/ModalForm";
 import DrawerForm from "./DialogForm/DrawerForm";

package/src/components/styles/index.less

@@ -3,17 +3,4 @@
 @import "../Input/index.less";
 @import "../Switch/index.less";
 @import "../TextArea/index.less";
-
-.@{ant-prefix}-hw-addon {
-  display: flex !important;
-  align-items: center;
-  padding: 0 11px;
-  background-color: #fafafa;
-  border: 1px solid #d9d9d9;
-}
-.@{ant-prefix}-form-item-has-error {
-  .@{ant-prefix}-hw-addon {
-    color: #ff4d4f;
-    border-color: #ff4d4f !important;
-  }
-}
+@import "../InputGroup/index.less";

package/src/pages/Form/index.tsx

@@ -1,17 +1,11 @@
 import {
-  HBasicForm,
   HForm,
   HFormConfigProvider,
-  HSwitch,
   useHForm,
   HSelect,
 } from "../../components";
 import { useState } from "react";
-import { Button, DatePicker, Form, Input, Row, Space } from "antd";
-import Basic from "@/components/Form/Basic";
-const Test2 = () => {
-  return <Row style={{ background: "red" }} />;
-};
+import { Button, Form, Input, Space } from "antd";
 const Test3 = ({ value = {}, onChange }) => {
   const { fs, end } = value;
   return (
@@ -45,122 +39,6 @@ const TestItem = () => {
     </Form.Item>
   );
 };
-const Test3Item = () => {
-  return (
-    <Form.List name="users">
-      {(fields, { add, remove }) => (
-        <>
-          {fields.map(({ key, name, ...restField }) => (
-            <Form.Item {...restField} name={name} key={key}>
-              <Test3 />
-            </Form.Item>
-          ))}
-          <Form.Item>
-            <Button type="dashed" onClick={() => add({})} block>
-              Add field
-            </Button>
-          </Form.Item>
-        </>
-      )}
-    </Form.List>
-  );
-};
-const formData = (options) => {
-  return [
-    {
-      name: "name",
-      label: "name",
-      rules: [
-        {
-          validator: () => {
-            return Promise.reject(new Error("错误"));
-          },
-        },
-      ],
-      itemProps: {
-        addonBefore: "前面",
-        addonAfter: "后面",
-        disabled: true,
-      },
-    },
-    {
-      name: "inputNumberGroup",
-      label: "inputNumber",
-      type: "inputNumberGroup",
-      rules: [
-        {
-          validator: () => {
-            return Promise.reject(new Error("错误"));
-          },
-        },
-      ],
-      itemProps: {
-        addonBefore: "前面",
-        addonAfter: "后面",
-      },
-    },
-    {
-      label: "时间",
-      name: "time",
-      type: "datePicker",
-      itemProps: {
-        picker: "month",
-        placeholder: "请选择月份",
-      },
-    },
-    {
-      label: "inputSelect",
-      type: "selectInput",
-      name: "selectInput",
-      itemProps: {
-        selectProps: {
-          options: [
-            {
-              value: "第一",
-              key: 1,
-            },
-          ],
-        },
-      },
-    },
-    {
-      label: "下拉",
-      name: "select",
-      type: "select",
-      rules: [
-        {
-          validator: () => {
-            return Promise.reject(new Error("错误"));
-          },
-        },
-      ],
-      itemProps: {
-        addonBefore: "前面",
-        addonAfter: (
-          <div
-            onClick={() => {
-              console.log("fff");
-            }}
-          >
-            后面
-          </div>
-        ),
-      },
-    },
-  ];
-};
-function Ttta({ form }) {
-  return (
-    <div
-      onClick={() => {
-        form.setFieldsValue({ switch: 1 });
-      }}
-    >
-      ttta
-    </div>
-  );
-}
-
 const Test = (props) => {
   return <div>ffff</div>;
 };
@@ -258,6 +136,11 @@ export default () => {
                     ></div>
                   );
                 },
+              },{
+                label:"数字输入框",
+                name:"yyy",
+                type:"inputNumberGroup",
+                rules:[{required:true}]
               },
               {
                 label: "文字",

package/src/pages/InputNumberGroup/index.tsx

@@ -1,5 +1,6 @@
 import { HInputNumberGroup } from "@/components";
 import { Col, Row } from "antd";
+import {useState} from "react";
 const Test = ({ value, onChange }) => {
   console.log(value);
   return (
@@ -13,10 +14,11 @@ const Test = ({ value, onChange }) => {
   );
 };
 export default () => {
+  const [val,setVal]=useState({});
   return (
     <Row style={{ marginTop: 20, marginLeft: 20 }}>
       <Col span={10}>
-        <HInputNumberGroup addonBefore={<Test />} />
+        <HInputNumberGroup addonBefore={<Test />} value={val} onChange={setVal}/>
       </Col>
     </Row>
   );