@hw-component/form 1.3.4 → 1.3.5

package/lib/DialogForm/hooks.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
+/// <reference types="react" />
 import type { DialogFormProps, HDialogFormInstance, ModifyPropsModal } from "./modal";
 export declare const useModifyProps: ({ visible, configData, initialValues, dialogForm, afterClose, params, title, onCancel, autoClear, }: ModifyPropsModal) => {
     modalFormData: import("../Form/modal").HItemProps[];
     modalVisible: boolean | undefined;
-    setModalVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
-    setModalFormData: React.Dispatch<React.SetStateAction<import("../Form/modal").HItemProps[]>>;
+    setModalVisible: import("react").Dispatch<import("react").SetStateAction<boolean | undefined>>;
+    setModalFormData: import("react").Dispatch<import("react").SetStateAction<import("../Form/modal").HItemProps[]>>;
     initValue: Record<string, any> | undefined;
-    setInitValue: React.Dispatch<React.SetStateAction<Record<string, any> | undefined>>;
+    setInitValue: import("react").Dispatch<import("react").SetStateAction<Record<string, any> | undefined>>;
     onAfterClose: () => void;
     formParams: any;
-    title: string | number | boolean | {} | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactNodeArray | React.ReactPortal | null | undefined;
+    title: string | number | boolean | {} | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNodeArray | import("react").ReactPortal | null | undefined;
 };
 export declare const useHDialogForm: () => HDialogFormInstance<any, any>;
 export declare const useCurrentForm: (hDialogForm?: HDialogFormInstance) => HDialogFormInstance<any, any>;

package/lib/Form/config.js

@@ -25,7 +25,7 @@ var TrimInput = require('../Input/TrimInput.js');
 var TrimTextArea = require('../TextArea/TrimTextArea.js');
 
 var placeholderConfig = {
-  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", 'urlUpload'],
+  inputType: ["input", "inputNumber", "selectInput", "buttonInput", "verificationCodeInput", "trimInput", "urlUpload"],
   selectType: ["select", "datePicker", "timePicker", "colorInput"]
 };
 var componentConfig = {

package/lib/Form/hooks/useHForm.js

@@ -79,6 +79,9 @@ var useHForm = (function () {
           outputValue: outputValue
         };
       },
+      clearFormat: function clearFormat(name) {
+        Reflect.deleteProperty(formatSourceData, name);
+      },
       formatValues: function formatValues() {
         var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var formatKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "inputValue";

package/lib/Form/modal.d.ts

@@ -122,6 +122,7 @@ export interface HFormInstance extends FormInstance {
     reload: PromiseFnResult;
     clear: VoidFunction;
     resetFieldsInitValue: VoidFunction;
+    clearFormat: (name: string) => void;
 }
 export interface ConnectConfigModal {
     format?: Record<string, addFormatItemModal>;

package/lib/Upload/UrlUpload/hooks.d.ts

@@ -1,2 +1,2 @@
 import type { IUrlUploadProps } from "../modal";
-export declare const useDefaultExFiles: ({ mediaType, exFiles }: IUrlUploadProps) => any;
+export declare const useDefaultExFiles: ({ mediaType, exFiles, }: IUrlUploadProps) => any;

package/lib/Upload/hooks/change.d.ts

@@ -1,3 +1,3 @@
 import type { IUpLoadProps } from "../modal";
 import type { UploadChangeParam, UploadFile } from "antd/lib/upload/interface";
-export declare const useChange: ({ value, onChange, maxCount, request, exFiles, maxSize, thumbUrl }: IUpLoadProps) => (info: UploadChangeParam<UploadFile>) => void;
+export declare const useChange: ({ value, onChange, maxCount, request, exFiles, maxSize, thumbUrl, }: IUpLoadProps) => (info: UploadChangeParam<UploadFile>) => void;

package/lib/Upload/index.js

@@ -93,16 +93,19 @@ var Index = function Index(_ref, ref) {
           name = _item$name === void 0 ? "" : _item$name;
         var initFileList = initValue[name] || [];
         var relInitFileList = typeof initFileList === "string" ? [initFileList] : initFileList;
-        var fileList = relInitFileList.map(function (url, index) {
-          return {
-            name: url,
-            response: {
-              url: url
-            },
-            status: "done",
-            uid: "init-".concat(index),
-            thumbUrl: thumbUrl || url
-          };
+        var fileList = relInitFileList.map(function (itemData, index) {
+          if (typeof itemData === "string") {
+            return {
+              name: itemData,
+              response: {
+                itemData: itemData
+              },
+              status: "done",
+              uid: "init-".concat(index),
+              thumbUrl: thumbUrl || itemData
+            };
+          }
+          return _objectSpread({}, itemData);
         });
         return _defineProperty({}, name, fileList);
       },

package/lib/index.css

@@ -32,8 +32,8 @@
 }
 .ant-hw-form-base-item-top-left .ant-hw-form-item-required {
   position: absolute;
-  left: -10px;
   top: 0;
+  left: -10px;
 }
 .ant-hw-form-base-item-top-left .ant-hw-form-label-item {
   position: relative;
@@ -58,8 +58,8 @@
 }
 .ant-hw-form-base-item-left .ant-hw-form-item-required {
   position: absolute;
-  left: -10px;
   top: 0;
+  left: -10px;
 }
 .ant-hw-form-base-item-left .ant-hw-form-label-item {
   position: relative;
@@ -73,12 +73,12 @@
 .ant-hw-form-item-required:before {
   display: inline-block;
   width: 10px;
+  margin-right: 4px;
   color: #ff4d4f;
   font-size: 14px;
   font-family: SimSun, sans-serif;
   line-height: 1;
   content: "*";
-  margin-right: 4px;
 }
 .ant-hw-form-form-item .ant-form-item-label {
   overflow: visible;

package/package.json

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

package/src/components/DialogForm/DrawerForm/index.tsx

@@ -49,7 +49,7 @@ export default ({
     title,
     onCancel,
     autoClear,
-    afterClose
+    afterClose,
   });
   const cancel = () => {
     onAfterClose();

package/src/components/DialogForm/hooks.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import useHForm from "../Form/hooks/useHForm";
 import type {
   DialogFormProps,

package/src/components/Form/FormItem/BasicItem.tsx

@@ -3,7 +3,7 @@ import { Form, Space, Col } from "antd";
 import React from "react";
 import Helper from "./Helper";
 import { useClassName } from "../../hooks";
-import {useFormItemLabel, useHide, usePositionClassName} from "./hooks";
+import { useFormItemLabel, useHide, usePositionClassName } from "./hooks";
 import { useFormContext } from "../Context";
 import type { HItemProps } from "../modal";
 import { useDefaultRender } from "../hooks/useDefaultRender";
@@ -56,7 +56,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
   const defaultComponent = useDefaultComponents();
   const formItemStyle = useFormConfigContext("formItemStyle");
   const ctxItemProps = useFormConfigContext("itemProps");
-  const itemClassName=useClassName("hw-form-form-item")
+  const itemClassName = useClassName("hw-form-form-item");
   const defaultItemProps = {
     ...ctxItemProps,
     ...itemProps,
@@ -67,7 +67,7 @@ const Index: React.FC<HFormItemProps> = (props) => {
   );
   const className = usePositionClassName(align);
   const hideItem = useHide({ hide, form });
-  const formItemLabel=useFormItemLabel(form,label);
+  const formItemLabel = useFormItemLabel(form, label);
   if (hideItem) {
     return null;
   }

package/src/components/Form/FormItem/hooks.tsx

@@ -5,7 +5,7 @@ import { useMemo } from "react";
 import type { HFormInstance, HItemProps } from "../modal";
 import type { LabelAlignModal } from "../modal";
 import { useClassName } from "../../hooks";
-import type {HelperModal} from "../modal";
+import type { HelperModal } from "../modal";
 
 export const useFormItemDomControl = ({
   shouldUpdate,
@@ -55,6 +55,9 @@ export const usePositionClassName = (position: LabelAlignModal) => {
   return useClassName(className);
 };
 
-export const useFormItemLabel=(form: HFormInstance,label?: React.ReactNode|HelperModal,)=>{
-   return  typeof label==="function"?label(form):label;
-}
+export const useFormItemLabel = (
+  form: HFormInstance,
+  label?: React.ReactNode | HelperModal
+) => {
+  return typeof label === "function" ? label(form) : label;
+};

package/src/components/Form/HFormConnect.tsx

@@ -50,7 +50,6 @@ export default (
     useEffect(() => {
       form?.addFormat(name, formatMaker(props, format[valueType]));
     }, [valueType, props]);
-
     const addFormat = (aFormat: Record<string, addFormatItemModal>) => {
       form?.addFormat(name, formatMaker(props, aFormat[valueType]));
     };

package/src/components/Form/Label.tsx

@@ -27,18 +27,14 @@ const Index: React.FC<IProps> = ({
   hover,
 }) => {
   const { text, icon } = useHover({ hover });
-  const array = [
-    colon ? "hw-form-item-colon" : "",
-  ];
+  const array = [colon ? "hw-form-item-colon" : ""];
 
-  const className = useClassName([...array,"hw-form-label-item"]);
-  const requiredClass=useClassName("hw-form-item-required");
-  const noRequiredClass=useClassName("hw-form-item-no-required")
+  const className = useClassName([...array, "hw-form-label-item"]);
+  const requiredClass = useClassName("hw-form-item-required");
+  const noRequiredClass = useClassName("hw-form-item-no-required");
   return (
-    <div style={{ width: labelWidth }}
-         className={className}
-    >
-      <span className={required?requiredClass:noRequiredClass}/>
+    <div style={{ width: labelWidth }} className={className}>
+      <span className={required ? requiredClass : noRequiredClass} />
       {children}
       {text && (
         <span style={{ marginLeft: 4 }}>

package/src/components/Form/config.ts

@@ -27,7 +27,7 @@ export const placeholderConfig = {
     "buttonInput",
     "verificationCodeInput",
     "trimInput",
-    'urlUpload'
+    "urlUpload",
   ],
   selectType: ["select", "datePicker", "timePicker", "colorInput"],
 };

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

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { Form } from "antd";
 import type { FormatItemModal, HFormInstance } from "../modal";
 import type { argsFn } from "../modal";
@@ -61,6 +61,9 @@ export default () => {
           outputValue,
         };
       }, //注册转化方法
+      clearFormat(name: string) {
+        Reflect.deleteProperty(formatSourceData, name);
+      },
       formatValues(value = {}, formatKey = "inputValue") {
         const valKeys = Object.keys(value).length;
         if (!valKeys) {

package/src/components/Form/index.less

@@ -19,8 +19,8 @@
   }
   .@{ant-prefix}-hw-form-item-required {
     position: absolute;
-    left: -10px;
     top: 0;
+    left: -10px;
   }
   .@{ant-prefix}-hw-form-label-item {
     position: relative;
@@ -54,8 +54,8 @@
   }
   .@{ant-prefix}-hw-form-item-required {
     position: absolute;
-    left: -10px;
     top: 0;
+    left: -10px;
   }
   .@{ant-prefix}-hw-form-label-item {
     position: relative;
@@ -71,15 +71,15 @@
 .@{ant-prefix}-hw-form-item-required:before {
   display: inline-block;
   width: 10px;
+  margin-right: 4px;
   color: #ff4d4f;
   font-size: 14px;
   font-family: SimSun, sans-serif;
   line-height: 1;
   content: "*";
-  margin-right: 4px;
 }
 .@{ant-prefix}-hw-form-form-item {
- .@{ant-prefix}-form-item-label {
-    overflow:visible
- }
-}
+  .@{ant-prefix}-form-item-label {
+    overflow: visible;
+  }
+}

package/src/components/Form/modal.ts

@@ -34,7 +34,7 @@ import type { ForwardedRef } from "react";
 import type { DataFnProvider } from "../modal";
 import type { ColProps } from "antd/lib/grid/col";
 import type { Gutter } from "antd/lib/grid/row";
-import type {IUrlUploadProps} from "../Upload/modal";
+import type { IUrlUploadProps } from "../Upload/modal";
 
 type RenderFun = (
   props: HItemProps,
@@ -56,7 +56,7 @@ export type ItemPropsType =
   | TextAreaProps
   | IUpLoadProps
   | CascaderProps<any>
-  | IUrlUploadProps
+  | IUrlUploadProps;
 
 export interface HoverModal {
   text?: string;
@@ -79,7 +79,8 @@ export interface DispatchModal<T = string | string[]> {
 }
 export type LabelAlignModal = "left" | "right" | "topLeft" | "topRight" | "top";
 
-export interface HItemProps extends Omit<FormItemProps, "name" | "labelAlign"|"label"> {
+export interface HItemProps
+  extends Omit<FormItemProps, "name" | "labelAlign" | "label"> {
   type?: string;
   itemProps?: ItemPropsType;
   render?: RenderFun;
@@ -95,7 +96,7 @@ export interface HItemProps extends Omit<FormItemProps, "name" | "labelAlign"|"l
   itemSpan?: ColProps;
   hideLabel?: boolean;
   labelAlign?: LabelAlignModal;
-  label?: React.ReactNode|HelperModal;
+  label?: React.ReactNode | HelperModal;
 }
 export interface HFormProps<T = any, R = any>
   extends Omit<FormProps, "form" | "onFinish" | "labelAlign"> {
@@ -177,6 +178,7 @@ export interface HFormInstance extends FormInstance {
   reload: PromiseFnResult;
   clear: VoidFunction;
   resetFieldsInitValue: VoidFunction;
+  clearFormat: (name: string) => void;
 }
 
 export interface ConnectConfigModal {

package/src/components/Input/ButtonInput.tsx

@@ -11,7 +11,12 @@ const Index: React.FC<HButtonInputProps> = ({
   request,
   ...props
 }) => {
-  const { onClick, type = "primary", loading:btnLoading,...oProps } = buttonProps;
+  const {
+    onClick,
+    type = "primary",
+    loading: btnLoading,
+    ...oProps
+  } = buttonProps;
   const { run, loading } = useRequest(
     (val) => {
       return request?.(val);
@@ -36,7 +41,7 @@ const Index: React.FC<HButtonInputProps> = ({
         {...oProps}
         type={type}
         onClick={click}
-        loading={loading||btnLoading}
+        loading={loading || btnLoading}
         style={{ marginLeft: 4 }}
       >
         {children}

package/src/components/Input/VerificationCodeInput/hooks.ts

@@ -1,36 +1,35 @@
-import type {ButtonProps} from "./index";
-import {useEffect, useState} from "react";
+import type { ButtonProps } from "./index";
+import { useEffect, useState } from "react";
 
-export const useDis=(buttonProps: ButtonProps)=>{
-    const {disabled}=buttonProps;
-    const [btnDis,setBtnDis]=useState<boolean|undefined>(!!disabled);
-    const [countdown, setCountdown] = useState<number>(0);
-    const setBtnDisabled=({changedValues})=>{
-        if (!!countdown){
-            return setBtnDis(true);
-        }
-        if (typeof disabled==="function"){
-            const resultDisabled=disabled(changedValues);
-            return setBtnDis(resultDisabled);
-        }
-        return  setBtnDis(disabled);
+export const useDis = (buttonProps: ButtonProps) => {
+  const { disabled } = buttonProps;
+  const [btnDis, setBtnDis] = useState<boolean | undefined>(!!disabled);
+  const [countdown, setCountdown] = useState<number>(0);
+  const setBtnDisabled = ({ changedValues }) => {
+    if (!!countdown) {
+      return setBtnDis(true);
     }
-    useEffect(() => {
-       setBtnDis(!!countdown);
-    }, [countdown]);
-    useEffect(() => {
-        if (!!countdown){
-            return;
-        }
-        if (typeof disabled==="boolean"){
-            setBtnDis(disabled);
-        }
-
-    }, [disabled]);
-    return {
-        disabled:btnDis,
-        setBtnDisabled,
-        countdown,
-        setCountdown
+    if (typeof disabled === "function") {
+      const resultDisabled = disabled(changedValues);
+      return setBtnDis(resultDisabled);
+    }
+    return setBtnDis(disabled);
+  };
+  useEffect(() => {
+    setBtnDis(!!countdown);
+  }, [countdown]);
+  useEffect(() => {
+    if (!!countdown) {
+      return;
+    }
+    if (typeof disabled === "boolean") {
+      setBtnDis(disabled);
     }
-}
+  }, [disabled]);
+  return {
+    disabled: btnDis,
+    setBtnDisabled,
+    countdown,
+    setCountdown,
+  };
+};

package/src/components/Input/VerificationCodeInput/index.tsx

@@ -2,95 +2,97 @@ import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ButtonInput from "../ButtonInput";
 import { useRequest } from "ahooks";
 import type { HFormInstance } from "../../Form/modal";
-import type {HButtonInputProps} from "../modal";
+import type { HButtonInputProps } from "../modal";
 import HFormConnect from "../../Form/HFormConnect";
-import type {argsFn} from "../../Form/modal";
-import {useDis} from "./hooks";
+import type { argsFn } from "../../Form/modal";
+import { useDis } from "./hooks";
 
-type disabledFn=(data: any) => boolean;
-export interface ButtonProps extends Omit<HButtonInputProps["buttonProps"],"disabled">{
-    disabled?: boolean|disabledFn;
+type disabledFn = (data: any) => boolean;
+export interface ButtonProps
+  extends Omit<HButtonInputProps["buttonProps"], "disabled"> {
+  disabled?: boolean | disabledFn;
 }
 
-export interface HVerificationCodeInputProps extends Omit<HButtonInputProps, "form"|"buttonProps"> {
-    request?: (value: any) => Promise<any>;
-    form?: HFormInstance;
-    addDispatchListener?: (key: string, fn: argsFn) => void;
-    buttonProps?: ButtonProps;
+export interface HVerificationCodeInputProps
+  extends Omit<HButtonInputProps, "form" | "buttonProps"> {
+  request?: (value: any) => Promise<any>;
+  form?: HFormInstance;
+  addDispatchListener?: (key: string, fn: argsFn) => void;
+  buttonProps?: ButtonProps;
 }
-const Index= ({
-                  value,
-                  request,
-                  form,
-                  onChange,
-                  addDispatchListener,
-                  buttonProps={},
-                  ...props
-              }: HVerificationCodeInputProps) => {
-    const {disabled,setBtnDisabled,countdown,setCountdown}=useDis(buttonProps);
-    const timer = useMemo<{ time: any }>(() => {
-        return {
-            time: undefined,
-        };
-    }, []);
-    const timerControl = useCallback(() => {
-        timer.time = setInterval(() => {
-            setCountdown((oldVal = 0) => {
-                const newVal = oldVal - 1;
-                if (newVal <= 0) {
-                    clearInterval(timer.time);
-                }
-                return newVal;
-            });
-        }, 1000);
-    }, []);
-    const { run, loading } = useRequest(
-        async () => {
-            if (!request) {
-                return Promise.resolve({});
-            }
-            const val = form?.getFieldsValue();
-            const result = await request?.(val);
-            if (result) {
-                setCountdown(60);
-            }
-            timerControl();
-            return result;
-        },
-        { manual: true }
-    );
-    useEffect(() => {
-        return () => {
-            clearInterval(timer.time);
-        };
-    }, []);
-    const text = () => {
-        if (!countdown) {
-            return "获取验证码";
-        }
-        let countdownStr = `${countdown}`;
-        if (countdown < 10) {
-            countdownStr = `0${countdownStr}`;
+const Index = ({
+  value,
+  request,
+  form,
+  onChange,
+  addDispatchListener,
+  buttonProps = {},
+  ...props
+}: HVerificationCodeInputProps) => {
+  const { disabled, setBtnDisabled, countdown, setCountdown } =
+    useDis(buttonProps);
+  const timer = useMemo<{ time: any }>(() => {
+    return {
+      time: undefined,
+    };
+  }, []);
+  const timerControl = useCallback(() => {
+    timer.time = setInterval(() => {
+      setCountdown((oldVal = 0) => {
+        const newVal = oldVal - 1;
+        if (newVal <= 0) {
+          clearInterval(timer.time);
         }
-        return `${countdownStr}秒后重新获取`;
+        return newVal;
+      });
+    }, 1000);
+  }, []);
+  const { run, loading } = useRequest(
+    async () => {
+      if (!request) {
+        return Promise.resolve({});
+      }
+      const val = form?.getFieldsValue();
+      const result = await request?.(val);
+      if (result) {
+        setCountdown(60);
+      }
+      timerControl();
+      return result;
+    },
+    { manual: true }
+  );
+  useEffect(() => {
+    return () => {
+      clearInterval(timer.time);
     };
-
-    const defaultButtonProps={
-        onClick: run,
-        loading,
+  }, []);
+  const text = () => {
+    if (!countdown) {
+      return "获取验证码";
     }
-    addDispatchListener?.("disabled",setBtnDisabled);
-    return (
-        <ButtonInput
-            value={value}
-            onChange={onChange}
-            buttonProps={{...defaultButtonProps,...buttonProps,disabled}}
-            {...props}
-        >
-            {text()}
-        </ButtonInput>
-    );
+    let countdownStr = `${countdown}`;
+    if (countdown < 10) {
+      countdownStr = `0${countdownStr}`;
+    }
+    return `${countdownStr}秒后重新获取`;
+  };
+
+  const defaultButtonProps = {
+    onClick: run,
+    loading,
+  };
+  addDispatchListener?.("disabled", setBtnDisabled);
+  return (
+    <ButtonInput
+      value={value}
+      onChange={onChange}
+      buttonProps={{ ...defaultButtonProps, ...buttonProps, disabled }}
+      {...props}
+    >
+      {text()}
+    </ButtonInput>
+  );
 };
 
 export default HFormConnect(Index);
-

package/src/components/Select/index.tsx

@@ -105,12 +105,12 @@ const Index: React.FC<HSelectProps> = ({
       {...props}
     >
       {data?.map((item) => {
-        const { value: optionValue, label ,...oItem} = item;
+        const { value: optionValue, label, ...oItem } = item;
         const result = filterProvider?.(item) || label;
         const filter = { [optionFilterProp]: result };
         return (
           <Option
-              {...oItem}
+            {...oItem}
             value={optionValue}
             key={optionValue}
             label={label}