@hw-component/form 1.4.9 → 1.5.0

package/lib/Upload/hooks/customRequest.js

@@ -18,7 +18,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var subReq = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref) {
-    var request, file, _yield$request, url;
+    var request, file, _yield$request, url, thumbUrl;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -38,23 +38,25 @@ var subReq = /*#__PURE__*/function () {
         case 6:
           _yield$request = _context.sent;
           url = _yield$request.url;
+          thumbUrl = _yield$request.thumbUrl;
           return _context.abrupt("return", {
             url: url,
+            thumbUrl: thumbUrl,
             status: "done"
           });
-        case 11:
-          _context.prev = 11;
+        case 12:
+          _context.prev = 12;
           _context.t0 = _context["catch"](3);
           antd.message.error(_context.t0.message);
           return _context.abrupt("return", {
             url: "",
             status: "error"
           });
-        case 15:
+        case 16:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[3, 11]]);
+    }, _callee, null, [[3, 12]]);
   }));
   return function subReq(_x) {
     return _ref2.apply(this, arguments);
@@ -63,19 +65,22 @@ var subReq = /*#__PURE__*/function () {
 var fileListProvider = function fileListProvider(changeFile, files) {
   var status = changeFile.status,
     url = changeFile.url,
-    uid = changeFile.uid;
+    uid = changeFile.uid,
+    thumbUrl = changeFile.thumbUrl;
   if (status === "error") {
     return files === null || files === void 0 ? void 0 : files.filter(function (item) {
       return item.uid !== uid;
     });
   }
   return files === null || files === void 0 ? void 0 : files.map(function (item) {
+    var fileDefaultThumbUrl = item.thumbUrl || thumbUrl;
     var resultUrl = url || item.thumbUrl;
     if (item.uid === uid) {
       item.status = status;
       item.response = {
         url: resultUrl
       };
+      item.thumbUrl = fileDefaultThumbUrl;
       return item;
     }
     return item;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/form",
-  "version": "1.4.9",
+  "version": "1.5.0",
   "description": "基于antd二次开发",
   "repository": {
     "type": "git",

package/src/components/Form/HFormConnect.tsx

@@ -43,26 +43,25 @@ export default (
     props: HFormItemProps,
     ref
   ) => {
-
     const { form, valueType = "float" } = useFormContext();
 
     useEffect(() => {
-      const {name}=props;
-      if (!name){
+      const { name } = props;
+      if (!name) {
         return;
       }
       form?.addFormat(name, formatMaker(props, format[valueType]));
     }, [valueType, props]);
     const addFormat = (aFormat: Record<string, addFormatItemModal>) => {
-      const {name}=props;
-      if (!name){
+      const { name } = props;
+      if (!name) {
         return;
       }
       form?.addFormat(name, formatMaker(props, aFormat[valueType]));
     };
     const addDispatchListener = (key: string, fn: argsFn) => {
-      const { name , dispatch } = props;
-      if (!name){
+      const { name, dispatch } = props;
+      if (!name) {
         return;
       }
       form?.addDispatchListener({ key, name, dispatch }, fn);

package/src/components/Form/config.ts

@@ -19,7 +19,7 @@ import Cascader from "../Cascader";
 import VerificationCodeInput from "../Input/VerificationCodeInput";
 import TrimInput from "../Input/TrimInput";
 import TrimTextArea from "../TextArea/TrimTextArea";
-import HInputNumberGroup from '../Input/InputNumberGroup'
+import HInputNumberGroup from "../Input/InputNumberGroup";
 export const placeholderConfig = {
   inputType: [
     "input",
@@ -29,7 +29,7 @@ export const placeholderConfig = {
     "verificationCodeInput",
     "trimInput",
     "urlUpload",
-    "textArea"
+    "textArea",
   ],
   selectType: ["select", "datePicker", "timePicker", "colorInput"],
 };
@@ -56,7 +56,6 @@ const componentConfig = {
   trimInput: TrimInput,
   trimTextArea: TrimTextArea,
   inputNumberGroup: HInputNumberGroup,
-
 };
 
 export default componentConfig;

package/src/components/Form/hooks/useHForm.ts

@@ -157,13 +157,16 @@ export default () => {
         form.setFieldsValue(newValue);
       },
       validateFields(nameList) {
-        return new Promise((resolve,reject) => {
-          form.validateFields(nameList).then((value) => {
-            const result = this.formatValues(value, "outputValue");
-            return resolve(result);
-          }).catch((e)=>{
-            reject(e);
-          });
+        return new Promise((resolve, reject) => {
+          form
+            .validateFields(nameList)
+            .then((value) => {
+              const result = this.formatValues(value, "outputValue");
+              return resolve(result);
+            })
+            .catch((e) => {
+              reject(e);
+            });
         });
       },
       resetFieldsInitValue: () => {

package/src/components/Input/InputNumberGroup.tsx

@@ -1,137 +1,149 @@
-import { InputNumber, Input } from 'antd';
-import { SwapRightOutlined } from '@ant-design/icons';
-import React, { useMemo, useState } from 'react';
-import type { InputNumberProps } from 'antd/lib/input-number';
+import { InputNumber, Input } 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 {addFormatItemModal, HItemProps} from "@/components/Form/modal";
+import type { addFormatItemModal, HItemProps } from "@/components/Form/modal";
 import HFormConnect from "../Form/HFormConnect";
 
-interface IProps<T=any> {
-    placeholder?: [string, string] | string;
-    addonAfter?: React.ReactNode;
-    valueMap?: {
-        min: string;
-        max: string;
-    };
-    inputNumberProps?: [InputNumberProps, InputNumberProps] | InputNumberProps;
-    value?:T;
-    onChange:(value:T)=>void;
-    addFormat?: (config: Record<string, addFormatItemModal>) => void;
-    noHandlerWrap?:boolean;
+interface IProps<T = any> {
+  placeholder?: [string, string] | string;
+  addonAfter?: React.ReactNode;
+  valueMap?: {
+    min: string;
+    max: string;
+  };
+  inputNumberProps?: [InputNumberProps, InputNumberProps] | InputNumberProps;
+  value?: T;
+  onChange: (value: T) => void;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+  noHandlerWrap?: boolean;
 }
 const useArrayProps = (props: any) => {
-    return useMemo(() => {
-        if (Array.isArray(props)) {
-            return props;
-        }
-        return [props, props];
-    }, [props]);
+  return useMemo(() => {
+    if (Array.isArray(props)) {
+      return props;
+    }
+    return [props, props];
+  }, [props]);
 };
-const InputNumberGroup=({
-                 value = {},
-                 valueMap = { min: 'min', max: 'max' },
-                 onChange,
-                 placeholder = ['请输入', '请输入'],
-                 inputNumberProps = {},
-                 addonAfter,
-                            noHandlerWrap=true,
-                            addFormat
-             }: IProps) => {
-    const { min, max } = valueMap;
-    const { [min]: minVal, [max]: maxVal } = value;
-    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 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 noHandlerWrapClassname = useClassName(["hw-input-group-no-handler-wrap"]);
-    addFormat?.({
-        float: {
-            inputValue: (item, initValue) => {
-                const { name: valueName = "" } = item;
-                const {min:minKey,max:maxKey}=valueMap;
-                const cuValue=initValue[valueName];
-               const minInitVal=initValue[minKey];
-               const maxInitVal=initValue[maxKey];
-                return {
-                    [valueName]:{
-                        [min]:minInitVal,
-                        [max]:maxInitVal,
-                        ...cuValue
-                    }
-                };
-            },
-            outputValue: (item, outputValue) => {
-                const { name: valueName = "" } = item;
-                const { [valueName]: itemVal = {} } = outputValue;
-                const {min:minKey,max:maxKey}=valueMap;
-                const {[minKey]:minSubVal,[maxKey]:maxSubVal,...oItemVal}=itemVal;
-                return {
-                    [maxKey]:maxSubVal,
-                    [minKey]:minSubVal,
-                    [valueName]:oItemVal
-                };
-            },
-        },
-    });
-    const change = (key: string, val: number | null) => {
-        const newVal = { ...value };
-        newVal[key] = val;
-        onChange?.(newVal);
-    };
-    return (
-        <Input.Group compact className={contentClassname}>
-            {addonAfter ? React.cloneElement(addonAfter as any, { value, onChange }) : addonAfter}
-            <div className={`${bodyClassname} ${focus ? activeClassname : ''} ${noHandlerWrap?noHandlerWrapClassname:""}`}>
-                <span className={borderClassname} />
-                <InputNumber<number>
-                    bordered={false}
-                    value={minVal}
-                    max={maxVal}
-                    min={0}
-                    className={oneClassname}
-                    onFocus={() => {
-                        setFocus(true);
-                    }}
-                    onBlur={() => {
-                        setFocus(false);
-                    }}
-                    onChange={(val) => {
-                        change(min, val);
-                    }}
-                    placeholder={fsPlaceholder}
-                    {...fsProps}
-                />
-                <SwapRightOutlined className={iconClassname} />
-                <InputNumber<number>
-                    bordered={false}
-                    value={maxVal}
-                    className={oneClassname}
-                    placeholder={edPlaceholder}
-                    min={minVal}
-                    onFocus={() => {
-                        setFocus(true);
-                    }}
-                    onBlur={() => {
-                        setFocus(false);
-                    }}
-                    onChange={(val) => {
-                        change(max, val);
-                    }}
-                    {...edProps}
-                />
-            </div>
-        </Input.Group>
-    );
+const InputNumberGroup = ({
+  value = {},
+  valueMap = { min: "min", max: "max" },
+  onChange,
+  placeholder = ["请输入", "请输入"],
+  inputNumberProps = {},
+  addonAfter,
+  noHandlerWrap = true,
+  addFormat,
+}: IProps) => {
+  const { min, max } = valueMap;
+  const { [min]: minVal, [max]: maxVal } = value;
+  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 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 noHandlerWrapClassname = useClassName([
+    "hw-input-group-no-handler-wrap",
+  ]);
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { name: valueName = "" } = item;
+        const { min: minKey, max: maxKey } = valueMap;
+        const cuValue = initValue[valueName];
+        const minInitVal = initValue[minKey];
+        const maxInitVal = initValue[maxKey];
+        return {
+          [valueName]: {
+            [min]: minInitVal,
+            [max]: maxInitVal,
+            ...cuValue,
+          },
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name: valueName = "" } = item;
+        const { [valueName]: itemVal = {} } = outputValue;
+        const { min: minKey, max: maxKey } = valueMap;
+        const {
+          [minKey]: minSubVal,
+          [maxKey]: maxSubVal,
+          ...oItemVal
+        } = itemVal;
+        return {
+          [maxKey]: maxSubVal,
+          [minKey]: minSubVal,
+          [valueName]: oItemVal,
+        };
+      },
+    },
+  });
+  const change = (key: string, val: number | null) => {
+    const newVal = { ...value };
+    newVal[key] = val;
+    onChange?.(newVal);
+  };
+  return (
+    <Input.Group compact className={contentClassname}>
+      {addonAfter
+        ? React.cloneElement(addonAfter as any, { value, onChange })
+        : addonAfter}
+      <div
+        className={`${bodyClassname} ${focus ? activeClassname : ""} ${
+          noHandlerWrap ? noHandlerWrapClassname : ""
+        }`}
+      >
+        <span className={borderClassname} />
+        <InputNumber<number>
+          bordered={false}
+          value={minVal}
+          max={maxVal}
+          min={0}
+          className={oneClassname}
+          onFocus={() => {
+            setFocus(true);
+          }}
+          onBlur={() => {
+            setFocus(false);
+          }}
+          onChange={(val) => {
+            change(min, val);
+          }}
+          placeholder={fsPlaceholder}
+          {...fsProps}
+        />
+        <SwapRightOutlined className={iconClassname} />
+        <InputNumber<number>
+          bordered={false}
+          value={maxVal}
+          className={oneClassname}
+          placeholder={edPlaceholder}
+          min={minVal}
+          onFocus={() => {
+            setFocus(true);
+          }}
+          onBlur={() => {
+            setFocus(false);
+          }}
+          onChange={(val) => {
+            change(max, val);
+          }}
+          {...edProps}
+        />
+      </div>
+    </Input.Group>
+  );
 };
-const Index=HFormConnect(InputNumberGroup)
+const Index = HFormConnect(InputNumberGroup);
 export default {
-    Component: Index,
-    placeholder: ({ label }: HItemProps) => {
-        return [`请输入${label}最小值`, `请输入${label}最大值`];
-    }
-};
+  Component: Index,
+  placeholder: ({ label }: HItemProps) => {
+    return [`请输入${label}最小值`, `请输入${label}最大值`];
+  },
+};

package/src/components/Input/index.less

@@ -5,7 +5,7 @@
   align-items: center;
   width: 100%;
   color: rgba(0, 0, 0, 0.25);
-  .@{all-input-group}-body{
+  .@{all-input-group}-body {
     position: relative;
     display: flex !important;
     flex: 1;
@@ -26,7 +26,7 @@
       display: none;
     }
   }
-  .@{all-input-group}-border{
+  .@{all-input-group}-border {
     position: absolute;
     left: -1px;
     display: none;
@@ -34,13 +34,13 @@
     height: 100%;
     background-color: #40a9ff;
   }
-  .@{all-input-group}-icon{
+  .@{all-input-group}-icon {
     padding: 0 4px;
   }
-  .@{all-input-group}-one{
+  .@{all-input-group}-one {
     flex: 1;
   }
-  .@{all-input-group}-active{
+  .@{all-input-group}-active {
     border-color: #40a9ff;
     box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
   }

package/src/components/Select/components/AllSelect.tsx

@@ -2,7 +2,7 @@ import type { HSelectProps } from "@/components/Select/modal";
 import { Checkbox, Space } from "antd";
 import { itemOpProvider } from "../utils";
 import { useClassName } from "../../hooks";
-import React, {useMemo} from "react";
+import React, { useMemo } from "react";
 
 interface IProps extends HSelectProps {
   checked?: boolean;
@@ -23,23 +23,23 @@ const Index: React.FC<IProps> = ({
   fieldNames = {},
   children,
 }) => {
-  const notDisOption=useMemo(()=>{
-      return options?.filter((item)=>{
-          return !item.disabled;
-      })
-  },[options]);
+  const notDisOption = useMemo(() => {
+    return options?.filter((item) => {
+      return !item.disabled;
+    });
+  }, [options]);
   const opLen = notDisOption?.length || 0;
   const checked = (value as any[])?.length >= opLen;
   const classNames = useRootClassName(checked);
   const optionsClassName = useClassName(classNames);
   const allCheckBox = useClassName("hw-all-check-box");
-  const allCheck=()=>{
-     const allCheckOption=options?.filter((item)=>{
-        return !item.disabled;
-     });
-    const subItemOps=itemOpProvider(allCheckOption,fieldNames);
+  const allCheck = () => {
+    const allCheckOption = options?.filter((item) => {
+      return !item.disabled;
+    });
+    const subItemOps = itemOpProvider(allCheckOption, fieldNames);
     onChange?.(allCheckOption, subItemOps);
-  }
+  };
   const change = () => {
     if (!checked) {
       allCheck();
@@ -47,7 +47,7 @@ const Index: React.FC<IProps> = ({
     }
     onChange?.([], []);
   };
-  if (!allSelect || mode !== "multiple" || serviceSearch||opLen===0) {
+  if (!allSelect || mode !== "multiple" || serviceSearch || opLen === 0) {
     return <>{children}</>;
   }
   return (

package/src/components/Select/components/CheckBoxOption.tsx

@@ -3,12 +3,12 @@ import React from "react";
 interface ICheckBoxOptionProps {
   label?: React.ReactNode;
   checked: boolean;
-  disabled?:boolean;
+  disabled?: boolean;
 }
-export default ({ label, checked ,disabled}: ICheckBoxOptionProps) => {
+export default ({ label, checked, disabled }: ICheckBoxOptionProps) => {
   return (
     <Space>
-      <Checkbox checked={checked} disabled={disabled}/>
+      <Checkbox checked={checked} disabled={disabled} />
       {label}
     </Space>
   );

package/src/components/Select/defaultConfig.tsx

@@ -9,10 +9,12 @@ export const defaultModeConfig: HSelectProps["modeConfig"] = {
       const checkVal = value?.map((itemVal) => {
         return itemVal.value;
       });
-      const {label,disabled,value:itemVal}=item;
+      const { label, disabled, value: itemVal } = item;
       const newVal = checkVal || [];
       const checked = newVal.indexOf(itemVal) !== -1;
-      return <CheckBoxOption disabled={disabled} label={label} checked={checked} />;
+      return (
+        <CheckBoxOption disabled={disabled} label={label} checked={checked} />
+      );
     },
   },
 };

package/src/components/Select/hooks/changeHooks.tsx

@@ -142,11 +142,11 @@ export const useValueChange = (params: PartialHSelectProps) => {
     onChange(newChangeVal, subItemOps);
   };
   useEffect(() => {
-    if (mode === "tags" ) {
+    if (mode === "tags") {
       setVal(value);
       return;
     }
-    if (value===null||value===undefined){
+    if (value === null || value === undefined) {
       setVal(undefined);
       return;
     }

package/src/components/Switch/index.tsx

@@ -43,7 +43,7 @@ const Index: React.FC<HSwitchProps> = ({
     float: {
       inputValue: (item, initValue) => {
         const { close } = valueSwitchMap;
-        const { name: valueName="" } = item;
+        const { name: valueName = "" } = item;
         let val = initValue[valueName];
         if (typeof val === "undefined" || val === null) {
           val = close;

package/src/components/Upload/hooks/customRequest.ts

@@ -9,13 +9,14 @@ import { message } from "antd";
 interface SubReqParamsModal {
   request?: (
     file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
-  ) => Promise<{ url: string }>;
+  ) => Promise<{ url: string ,thumbUrl?:string}>;
   file: RcFile;
 }
 interface ResultModal {
   url: string;
   status: UploadFileStatus;
   uid?: string;
+  thumbUrl?:string;
 }
 const subReq = async ({
   request,
@@ -28,9 +29,10 @@ const subReq = async ({
     };
   }
   try {
-    const { url } = await request(file);
+    const { url ,thumbUrl} = await request(file);
     return {
       url,
+      thumbUrl,
       status: "done",
     };
   } catch (err: any) {
@@ -42,17 +44,19 @@ const subReq = async ({
   }
 };
 const fileListProvider = (changeFile: ResultModal, files?: UploadFile[]) => {
-  const { status, url, uid } = changeFile;
+  const { status, url, uid,thumbUrl } = changeFile;
   if (status === "error") {
     return files?.filter((item) => {
       return item.uid !== uid;
     });
   }
   return files?.map((item) => {
+    const fileDefaultThumbUrl=item.thumbUrl||thumbUrl;
     const resultUrl = url || item.thumbUrl;
     if (item.uid === uid) {
       item.status = status;
       item.response = { url: resultUrl };
+      item.thumbUrl=fileDefaultThumbUrl;
       return item;
     }
     return item;

package/src/components/Upload/index.tsx

@@ -75,7 +75,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
             return {
               name: itemData,
               response: {
-                url:itemData,
+                url: itemData,
               },
               status: "done",
               uid: `init-${index}`,