@hw-component/form 1.9.59 → 1.9.61

package/src/components/Input/InputNumberGroup.tsx

@@ -1,11 +1,11 @@
-import { InputNumber, Input } from "antd";
+import { InputNumber } from "antd";
 import { SwapRightOutlined } from "@ant-design/icons";
 import React, { useMemo, useState } from "react";
 import type { InputNumberProps } from "antd/lib/input-number";
 import { useClassName } from "../hooks";
 import type { addFormatItemModal, HItemProps } from "@/components/Form/modal";
 import HFormConnect from "../Form/HFormConnect";
-
+import InputGroup from '../InputGroup'
 interface IProps<T = any> {
   placeholder?: [string, string] | string;
   addonAfter?: React.ReactNode;
@@ -15,7 +15,7 @@ interface IProps<T = any> {
   };
   inputNumberProps?: [InputNumberProps, InputNumberProps] | InputNumberProps;
   value?: T;
-  onChange: (value: T) => void;
+  onChange?: (value: T) => void;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   noHandlerWrap?: boolean;
   disabled?: boolean;
@@ -31,21 +31,9 @@ const useArrayProps = (props: any) => {
     return [props, props];
   }, [props]);
 };
-const Addon: React.FC<IProps> = ({ 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 InputNumberGroup = ({
+
+
+const Content = ({
   value = {},
   valueMap = { min: "min", max: "max" },
   onChange,
@@ -64,10 +52,8 @@ const InputNumberGroup = ({
   const [fsPlaceholder, edPlaceholder] = useArrayProps(placeholder);
   const [fsProps, edProps] = useArrayProps(inputNumberProps);
   const [focus, setFocus] = useState(false);
-  const contentClassname = useClassName(["hw-input-group"]);
-  const bodyClassname = useClassName(["hw-input-group-body"]);
+  const bodyClassname = useClassName(["hw-input-group-number-body"]);
   const activeClassname = useClassName(["hw-input-group-active"]);
-  const borderClassname = useClassName(["hw-input-group-border"]);
   const oneClassname = useClassName(["hw-input-group-one"]);
   const iconClassname = useClassName(["hw-input-group-icon"]);
   const disabledClassname = useClassName(["hw-input-group-disabled"]);
@@ -113,66 +99,62 @@ const InputNumberGroup = ({
     newVal[key] = val;
     onChange?.(newVal);
   };
-  return (
-    <Input.Group compact className={contentClassname}>
-      <Addon value={value} onChange={onChange}>
-        {addonBefore}
-      </Addon>
-      <div
-        className={`${bodyClassname} 
+  return <div
+      className={`${bodyClassname} 
         ${focus ? activeClassname : ""} 
         ${noHandlerWrap ? noHandlerWrapClassname : ""}
          ${disabled ? disabledClassname : notDisabledClassname}
         `}
-      >
-        <span className={borderClassname} />
-        <InputNumber<number>
-          bordered={false}
-          value={minVal}
-          max={maxValMk ? maxValMk(maxVal) : maxVal}
-          min={0}
-          className={oneClassname}
-          onFocus={() => {
-            setFocus(true);
-          }}
-          onBlur={() => {
-            setFocus(false);
-          }}
-          onChange={(val) => {
-            change(min, val);
-          }}
-          placeholder={fsPlaceholder}
-          {...fsProps}
-          disabled={disabled}
-        />
-        <div className={iconClassname}>
-          <SwapRightOutlined />
-        </div>
-        <InputNumber<number>
-          bordered={false}
-          value={maxVal}
-          className={oneClassname}
-          placeholder={edPlaceholder}
-          min={minValMk ? minValMk(minVal) : minVal}
-          onFocus={() => {
-            setFocus(true);
-          }}
-          onBlur={() => {
-            setFocus(false);
-          }}
-          onChange={(val) => {
-            change(max, val);
-          }}
-          {...edProps}
-          disabled={disabled}
-        />
-      </div>
-      <Addon value={value} onChange={onChange}>
-        {addonAfter}
-      </Addon>
-    </Input.Group>
-  );
+  >
+    <InputNumber<number>
+        bordered={false}
+        value={minVal}
+        max={maxValMk ? maxValMk(maxVal) : maxVal}
+        min={0}
+        className={oneClassname}
+        onFocus={() => {
+          setFocus(true);
+        }}
+        onBlur={() => {
+          setFocus(false);
+        }}
+        onChange={(val) => {
+          change(min, val);
+        }}
+        placeholder={fsPlaceholder}
+        {...fsProps}
+        disabled={disabled}
+    />
+    <div className={iconClassname}>
+      <SwapRightOutlined />
+    </div>
+    <InputNumber<number>
+        bordered={false}
+        value={maxVal}
+        className={oneClassname}
+        placeholder={edPlaceholder}
+        min={minValMk ? minValMk(minVal) : minVal}
+        onFocus={() => {
+          setFocus(true);
+        }}
+        onBlur={() => {
+          setFocus(false);
+        }}
+        onChange={(val) => {
+          change(max, val);
+        }}
+        {...edProps}
+        disabled={disabled}
+    />
+  </div>
+
 };
+const InputNumberGroup=(props)=>{
+  return <InputGroup {...props}>
+      <Content/>
+  </InputGroup>
+}
+
 const Index = HFormConnect(InputNumberGroup);
 export default {
   Component: Index,

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.less

@@ -0,0 +1,8 @@
+@import "../styles/local.less";
+
+.@{ant-prefix}-hw-text-area-no-border{
+   border: none !important;
+   &:focus{
+     box-shadow: none !important;
+   }
+}

package/src/components/TextArea/index.tsx

@@ -1,8 +1,17 @@
 import { Input } from "antd";
 import type { TextAreaProps } from "antd/es/input";
+import {useClassName} from "../hooks";
+export interface HTextAreaProps extends TextAreaProps{
+   bordered?:boolean;
+}
+
 export default ({
   autoSize = { minRows: 4, maxRows: 4 },
+                  bordered=true,
+    className="",
   ...props
-}: TextAreaProps) => {
-  return <Input.TextArea autoSize={autoSize} {...props} />;
+}: HTextAreaProps) => {
+  const noBorderClassName=useClassName("hw-text-area-no-border") ;
+  const borderClassName=!bordered?noBorderClassName:"";
+  return <Input.TextArea autoSize={autoSize} {...props} className={`${borderClassName} ${className}`}/>;
 };

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

@@ -2,17 +2,5 @@
 @import "../Form/index.less";
 @import "../Input/index.less";
 @import "../Switch/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 "../TextArea/index.less";
+@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/Input/index.tsx

@@ -6,6 +6,7 @@ import {
   HColorInput,
   HVerificationCodeInput,
   HInputNumberGroup,
+    HTextArea,
 } from "../../components";
 import { Space } from "antd";
 import { useState } from "react";
@@ -36,6 +37,7 @@ export default () => {
           },
         ]}
       />
+        <HTextArea />
     </Space>
   );
 };

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>
   );