@hw-component/form 1.9.26 → 1.9.28

package/src/components/Input/InputNumberGroup.tsx

@@ -19,9 +19,9 @@ interface IProps<T = any> {
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   noHandlerWrap?: boolean;
   disabled?: boolean;
-  addonBefore?:React.ReactNode;
-  minValMk?:(val:number)=>number;
-  maxValMk?:(val:number)=>number;
+  addonBefore?: React.ReactNode;
+  minValMk?: (val: number) => number;
+  maxValMk?: (val: number) => number;
 }
 const useArrayProps = (props: any) => {
   return useMemo(() => {
@@ -31,20 +31,20 @@ const useArrayProps = (props: any) => {
     return [props, props];
   }, [props]);
 };
-const Addon:React.FC<IProps>=({children,value,onChange})=>{
-  const addonClassname=useClassName(["hw-input-group-addon"])
-   if (!children){
-      return  <></>
-   }
-  if (React.isValidElement(children)){
-    return <div className={addonClassname}>
-      { React.cloneElement(children as any, { value, onChange })}
-    </div>
+const Addon: React.FC<IProps> = ({ children, value, onChange }) => {
+  const addonClassname = useClassName(["hw-input-group-addon"]);
+  if (!children) {
+    return <></>;
   }
-  return  <div className={addonClassname}>
-    {children}
-  </div>
-}
+  if (React.isValidElement(children)) {
+    return (
+      <div className={addonClassname}>
+        {React.cloneElement(children as any, { value, onChange })}
+      </div>
+    );
+  }
+  return <div className={addonClassname}>{children}</div>;
+};
 const InputNumberGroup = ({
   value = {},
   valueMap = { min: "min", max: "max" },
@@ -55,9 +55,9 @@ const InputNumberGroup = ({
   noHandlerWrap = true,
   addFormat,
   disabled,
-                            addonBefore,
-                            minValMk,
-    maxValMk
+  addonBefore,
+  minValMk,
+  maxValMk,
 }: IProps) => {
   const { min, max } = valueMap;
   const { [min]: minVal, [max]: maxVal } = value;
@@ -115,7 +115,9 @@ const InputNumberGroup = ({
   };
   return (
     <Input.Group compact className={contentClassname}>
-      <Addon value={value} onChange={onChange}>{addonBefore}</Addon>
+      <Addon value={value} onChange={onChange}>
+        {addonBefore}
+      </Addon>
       <div
         className={`${bodyClassname} 
         ${focus ? activeClassname : ""} 
@@ -127,7 +129,7 @@ const InputNumberGroup = ({
         <InputNumber<number>
           bordered={false}
           value={minVal}
-          max={maxValMk?maxValMk(maxVal):maxVal}
+          max={maxValMk ? maxValMk(maxVal) : maxVal}
           min={0}
           className={oneClassname}
           onFocus={() => {
@@ -151,7 +153,7 @@ const InputNumberGroup = ({
           value={maxVal}
           className={oneClassname}
           placeholder={edPlaceholder}
-          min={minValMk?minValMk(minVal):minVal}
+          min={minValMk ? minValMk(minVal) : minVal}
           onFocus={() => {
             setFocus(true);
           }}
@@ -165,7 +167,9 @@ const InputNumberGroup = ({
           disabled={disabled}
         />
       </div>
-      <Addon value={value} onChange={onChange}>{addonAfter}</Addon>
+      <Addon value={value} onChange={onChange}>
+        {addonAfter}
+      </Addon>
     </Input.Group>
   );
 };

package/src/components/Input/index.less

@@ -1,6 +1,18 @@
 @import "../styles/local.less";
 @all-input-group: ~"@{ant-prefix}-hw-input-group";
-
+.@{ant-prefix}-form-item-has-error {
+  .@{all-input-group}-body {
+    border-color: #ff4d4f !important;
+  }
+  .@{all-input-group}-active {
+    border-color: #ff4d4f !important;
+    box-shadow: 0 0 0 2px rgba(255, 77, 79, 0.2) !important;
+  }
+  .@{all-input-group}-addon {
+    color: #ff4d4f;
+    border-color: #ff4d4f !important;
+  }
+}
 .@{all-input-group} {
   display: flex !important;
   width: 100%;
@@ -51,12 +63,12 @@
     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;
+  .@{all-input-group}-addon {
+    display: flex !important;
+    align-items: center;
+    padding: 0 11px;
+    background-color: #fafafa;
+    border: 1px solid #d9d9d9;
   }
 }
 

package/src/components/Select/TreeSelect.tsx

@@ -0,0 +1,16 @@
+import { TreeSelect } from "antd";
+import { TreeSelectProps } from "antd/lib/tree-select";
+import { PromiseFnResult } from "../modal";
+import { useRequest } from "ahooks";
+interface IProps extends TreeSelectProps {
+  request?: PromiseFnResult;
+}
+export default ({ request,treeData, ...props }: IProps) => {
+  const { loading, data } = useRequest(() => {
+    if (request) {
+      return request({});
+    }
+    return Promise.resolve(treeData);
+  });
+  return <TreeSelect treeData={data} loading={loading} {...props}/>;
+};

package/src/components/Switch/index.less

@@ -4,10 +4,10 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  .@{ant-prefix}-hw-switch-before{
+  .@{ant-prefix}-hw-switch-before {
     margin-right: 4px;
   }
-  .@{ant-prefix}-hw-switch-after{
+  .@{ant-prefix}-hw-switch-after {
     margin-left: 4px;
   }
 }

package/src/components/Switch/index.tsx

@@ -1,7 +1,7 @@
 import type { SwitchProps } from "antd";
-import {Switch } from "antd";
+import { Switch } from "antd";
 import React, { useMemo } from "react";
-import {useClassName, useMatchConfigProps} from "../hooks";
+import { useClassName, useMatchConfigProps } from "../hooks";
 import type { ValueSwitchMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
 import HFormConnect from "../Form/HFormConnect";
@@ -28,9 +28,9 @@ const Index: React.FC<HSwitchProps> = ({
   const { valueSwitchMap = {} } = useMatchConfigProps({
     valueSwitchMap: propsValueSwitchMap,
   });
-  const switchClassName=useClassName("hw-switch");
-  const switchBefore=useClassName("hw-switch-before");
-  const switchAfter=useClassName("hw-switch-after")
+  const switchClassName = useClassName("hw-switch");
+  const switchBefore = useClassName("hw-switch-before");
+  const switchAfter = useClassName("hw-switch-after");
 
   const swChecked = useMemo(() => {
     const { open } = valueSwitchMap;
@@ -66,17 +66,15 @@ const Index: React.FC<HSwitchProps> = ({
   });
   return (
     <div style={style} className={switchClassName}>
-      {beforeText&&<span className={switchBefore}>
-        {beforeText}
-      </span>}
+      {beforeText && <span className={switchBefore}>{beforeText}</span>}
       <Switch
-          checked={swChecked}
-          checkedChildren={checkedChildren}
-          unCheckedChildren={unCheckedChildren}
-          onChange={change}
-          {...props}
+        checked={swChecked}
+        checkedChildren={checkedChildren}
+        unCheckedChildren={unCheckedChildren}
+        onChange={change}
+        {...props}
       />
-      {children&&   <span className={switchAfter}>{children}</span>}
+      {children && <span className={switchAfter}>{children}</span>}
     </div>
   );
 };

package/src/components/Upload/UrlUpload/index.tsx

@@ -6,7 +6,7 @@ import TypeEle from "../MediaTypeEle/TypeEle";
 import { useRef, useState } from "react";
 import type { RcFile, UploadFile } from "antd/es/upload/interface";
 import { useDefaultExFiles } from "./hooks";
-import { HItemProps } from "@/components/Form/modal";
+import type { HItemProps } from "@/components/Form/modal";
 const { Text } = Typography;
 const mkSubFileList = (fileList: UploadFile[], maxCount = 1) => {
   const len = fileList.length;

package/src/pages/Form/index.tsx

@@ -70,46 +70,105 @@ const formData = (options) => {
     {
       name: "name",
       label: "输入框",
+      rules: [
+        {
+          validator: () => {
+            return Promise.reject(new Error("错误"));
+          },
+        },
+      ],
       itemProps: {
-
-      }
+        addonBefore: "前面",
+        addonAfter: "后面",
+      },
+    },
+    {
+      name: "inputNumberGroup",
+      label: "输入框",
+      rules: [
+        {
+          validator: () => {
+            return Promise.reject(new Error("错误"));
+          },
+        },
+      ],
+      type: "inputNumberGroup",
+      itemProps: {
+        addonBefore: "前面",
+        addonAfter: "后面",
+      },
     },
     {
       name: "url",
       type: "urlUpload",
       label: "文本",
-        itemSpan:{
-          span:24
+      hideLabel: true,
+      rules: [
+        {
+          validator: () => {
+            return Promise.reject(new Error("错误"));
+          },
+        },
+      ],
+      itemProps: {
+        initValueProvider: (props, val) => {
+          console.log(props, val, "fff");
+          return {
+            ...val,
+            name: "ffffsfsadasda",
+          };
         },
-        hideLabel:true,
-        itemProps: {
-            initValueProvider:(props,val)=>{
-                console.log(props,val,"fff")
-                return {
-                    ...val,
-                    name:"ffffsfsadasda"
-                }
-            }
-        }
+      },
     },
-      {
-          nameKey: "name1",
-          label: "输入框",
-          render:()=>{
-              return <Basic
-               configData={[{
-                   label:"1"
-               },{
-                   label:"2"
-               }]}
-              />
-          }
+    {
+      nameKey: "name1",
+      label: "输入框",
+      render: () => {
+        return (
+          <Basic
+            configData={[
+              {
+                label: "1",
+              },
+              {
+                label: "2",
+              },
+            ]}
+          />
+        );
       },
+    },
+    {
+      name: "treeSelect",
+      label: "treeSelect",
+      type: "treeSelect",
+      itemProps: {
+        request: async () => {
+          return [
+            {
+              name: "父亲",
+              key: "1",
+              child: [
+                {
+                  name: "儿子",
+                  key: "1-1",
+                },
+              ],
+            },
+          ];
+        },
+        fieldNames: {
+          label: "name",
+          value: "key",
+          children: "child",
+        },
+      },
+    },
     {
       label: "输入框",
       type: "checkboxGroup",
       name: "check",
-      hover:"你好",
+      hover: "你好",
       itemProps: {
         options: [
           {
@@ -162,9 +221,6 @@ export default () => {
           configData={formData(options)}
           dismissOnPressEnter={false}
           labelWidth={88}
-          itemSpan={{
-              span:12
-          }}
           form={form}
           labelAlign={"left"}
           onFinish={(value) => {
@@ -195,7 +251,7 @@ export default () => {
       </div>
       <div
         onClick={() => {
-          console.log(form.formatValues());
+          form.submit();
         }}
       >
         提交

package/src/pages/Input/index.tsx

@@ -8,9 +8,9 @@ import {
   HInputNumberGroup,
 } from "../../components";
 import { Space } from "antd";
-import {useState} from "react";
+import { useState } from "react";
 export default () => {
-  const [colorVal,setColorVal]=useState();
+  const [colorVal, setColorVal] = useState();
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HInput placeholder="基础输入框" copy value="11111" />
@@ -22,7 +22,7 @@ export default () => {
       />
       <HButtonInput>点我</HButtonInput>
       <HInputNumber />
-      <HColorInput value={colorVal} onChange={setColorVal}/>
+      <HColorInput value={colorVal} onChange={setColorVal} />
       <HVerificationCodeInput
         request={() => {
           return Promise.resolve({ code: 200 });

package/src/pages/InputNumberGroup/index.tsx

@@ -1,15 +1,23 @@
-import {HInputNumberGroup} from '@/components';
-import {Col, Row} from 'antd';
-const Test=({value,onChange})=>{
-    console.log(value)
-    return <div onClick={()=>{
+import { HInputNumberGroup } from "@/components";
+import { Col, Row } from "antd";
+const Test = ({ value, onChange }) => {
+  console.log(value);
+  return (
+    <div
+      onClick={() => {
         onChange(1);
-    }}>1231</div>
-}
-export default ()=>{
-    return <Row style={{marginTop:20,marginLeft:20}}>
-        <Col span={10}>
-            <HInputNumberGroup addonBefore={<Test/>} />
-        </Col>
+      }}
+    >
+      1231
+    </div>
+  );
+};
+export default () => {
+  return (
+    <Row style={{ marginTop: 20, marginLeft: 20 }}>
+      <Col span={10}>
+        <HInputNumberGroup addonBefore={<Test />} />
+      </Col>
     </Row>
-}
+  );
+};

package/src/pages/Switch/index.tsx

@@ -15,17 +15,16 @@ export default () => {
         打开
       </HSwitch>
 
-
-        <HSwitch
-            value={1}
-            beforeText="开关"
-            valueMap={{ open: 1, close: 0 }}
-            onChange={(val) => {
-                console.log(val);
-            }}
-        >
-            手机设备发送微信红包
-        </HSwitch>
+      <HSwitch
+        value={1}
+        beforeText="开关"
+        valueMap={{ open: 1, close: 0 }}
+        onChange={(val) => {
+          console.log(val);
+        }}
+      >
+        手机设备发送微信红包
+      </HSwitch>
     </Space>
   );
 };

package/src/routes.tsx

@@ -79,7 +79,7 @@ const routes: RouteModal[] = [
   {
     path: "/inputNumberGroup",
     name: "数字输入框",
-    element:<InputNumberGroup/>,
+    element: <InputNumberGroup />,
   },
 ];