@hw-component/form 1.9.60 → 1.9.62

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,8 @@ 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 +51,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"]);
@@ -114,65 +99,64 @@ const InputNumberGroup = ({
     onChange?.(newVal);
   };
   return (
-    <Input.Group compact className={contentClassname}>
-      <Addon value={value} onChange={onChange}>
-        {addonBefore}
-      </Addon>
-      <div
-        className={`${bodyClassname} 
+    <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}
-        />
+    >
+      <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>
-      <Addon value={value} onChange={onChange}>
-        {addonAfter}
-      </Addon>
-    </Input.Group>
+      <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,17 +1,12 @@
-@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;
+  .@{all-input-group}-number-body {
     display: flex !important;
-    flex: 1;
+    width: 100%;
     border: 1px solid #d9d9d9;
   }
   .@{all-input-group}-not-disabled {
@@ -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,53 @@
+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;
+  className?:string;
+}
+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,
+                                             className="",
+  onChange,
+  ...props
+}) => {
+  const contentClassname = useClassName(["hw-input-group"]);
+  const bodyClassname = useClassName(["hw-input-group-body"]);
+
+  return (
+    <Input.Group compact className={`${contentClassname} ${className}`}>
+      <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/Text/index.tsx

@@ -1,7 +1,7 @@
 import { Space, Typography } from "antd";
-import { TextProps } from "antd/lib/typography/Text";
+import type { TextProps } from "antd/lib/typography/Text";
 import React, { useMemo } from "react";
-const {Text}=Typography;
+const { Text } = Typography;
 export interface HFormTextProps<V = any> extends TextProps {
   value?: V;
   addonBefore?: React.ReactNode;
@@ -21,9 +21,11 @@ export default ({
     }
     return value;
   }, [value]);
-  return <Space size={size} align={"center"}>
-     <Text {...props}>{addonBefore}</Text>
-    <Text {...props}>{text}</Text>
-    <Text {...props}>{addonAfter}</Text>
-  </Space>
+  return (
+    <Space size={size} align={"center"}>
+      <Text {...props}>{addonBefore}</Text>
+      <Text {...props}>{text}</Text>
+      <Text {...props}>{addonAfter}</Text>
+    </Space>
+  );
 };

package/src/components/TextArea/index.less

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

package/src/components/TextArea/index.tsx

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

@@ -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/DrawerForm/index.tsx

@@ -78,9 +78,15 @@ export default () => {
           console.log("contentRender");
           return <div>{node}</div>;
         }}
-        title={<div onClick={()=>{
-            modalForm.hide()
-        }}>关闭</div>}
+        title={
+          <div
+            onClick={() => {
+              modalForm.hide();
+            }}
+          >
+            关闭
+          </div>
+        }
       >
         <Test1 />
       </HDrawerForm>

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>;
 };
@@ -239,7 +117,7 @@ export default () => {
                         height: "100%",
                       }}
                     >
-                      <div style={{ height: 200 }}></div>
+                      <div style={{ height: 200 }} />
                     </div>
                   );
                 },
@@ -255,10 +133,16 @@ export default () => {
                         backgroundColor: "black",
                         height: "100%",
                       }}
-                    ></div>
+                    />
                   );
                 },
               },
+              {
+                label: "数字输入框",
+                name: "yyy",
+                type: "inputNumberGroup",
+                rules: [{ required: true }],
+              },
               {
                 label: "文字",
                 type: "text",
@@ -280,7 +164,7 @@ export default () => {
             ]}
             dismissOnPressEnter={false}
             formItemStyle={{
-              marginBottom:100
+              marginBottom: 100,
             }}
             labelWidth={88}
             form={form}

package/src/pages/Input/index.tsx

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