@hw-component/form 1.10.21 → 1.10.22

package/src/components/TDPicker/TimeRangePicker.tsx

@@ -1,56 +1,68 @@
-import { TimePicker } from 'antd';
+import { TimePicker } from "antd";
 import React from "react";
 import HFormConnect from "@/components/Form/HFormConnect";
-import {HTimeRangePickerProps} from "@/components/TDPicker/modal";
-import {HItemProps} from "@/components/Form/modal";
+import type { HTimeRangePickerProps } from "@/components/TDPicker/modal";
+import type { HItemProps } from "@/components/Form/modal";
 import moment from "moment";
-const HTimePicker:React.FC<HTimeRangePickerProps>=({value,format="HH:mm:ss",addFormat,valueMap={},onChange,order=false,...props})=>{
-    const {start="startTime",end="endTime"}=valueMap;
-    addFormat?.({
-        float: {
-            inputValue: (item, initValue) => {
-              const {[start]:initStart,[end]:initEnd}=initValue;
-              const {name}=item;
-              if (initStart&&initEnd){
-                  return {
-                      [(name as string)]:[
-                          moment(initStart,format),
-                          moment(initEnd,format)
-                      ]
-                  }
-              }
-              return {
-                  [(name as string)]:[]
-              };
-            },
-            outputValue: (item, outputValue) => {
-                const { name: valueName = "" } = item;
-                const { [valueName as string]: itemVal  } = outputValue;
-                const [startVal,endVal]=itemVal||[];
-                return {
-                   [start]:startVal?.format(format),
-                    [end]:endVal?.format(format)
-                };
-            },
-        },
-    });
+const HTimePicker: React.FC<HTimeRangePickerProps> = ({
+  value,
+  format = "HH:mm:ss",
+  addFormat,
+  valueMap = {},
+  onChange,
+  order = false,
+  ...props
+}) => {
+  const { start = "startTime", end = "endTime" } = valueMap;
+  addFormat?.({
+    float: {
+      inputValue: (item, initValue) => {
+        const { [start]: initStart, [end]: initEnd } = initValue;
+        const { name } = item;
+        if (initStart && initEnd) {
+          return {
+            [name as string]: [
+              moment(initStart, format),
+              moment(initEnd, format),
+            ],
+          };
+        }
+        return {
+          [name as string]: [],
+        };
+      },
+      outputValue: (item, outputValue) => {
+        const { name: valueName = "" } = item;
+        const { [valueName as string]: itemVal } = outputValue;
+        const [startVal, endVal] = itemVal || [];
+        return {
+          [start]: startVal?.format(format),
+          [end]: endVal?.format(format),
+        };
+      },
+    },
+  });
 
-    return <TimePicker.RangePicker value={value}
-                                   onChange={onChange}
-                                   order={order}
-                                   format={format}
-                                   style={{ width: '100%' }}
-                                   {...props}/>;
-}
+  return (
+    <TimePicker.RangePicker
+      value={value}
+      onChange={onChange}
+      order={order}
+      format={format}
+      style={{ width: "100%" }}
+      {...props}
+    />
+  );
+};
 
-const Index=HFormConnect(HTimePicker);
+const Index = HFormConnect(HTimePicker);
 
 export default {
-    Component: Index,
-    placeholder: ({ label }: HItemProps) => {
-        return [`请选择开始${label}`, `请选择结束${label}`];
-    },
-    requiredErrMsg: ({ label }: HItemProps) => {
-        return `请选择${label}`;
-    },
+  Component: Index,
+  placeholder: ({ label }: HItemProps) => {
+    return [`请选择开始${label}`, `请选择结束${label}`];
+  },
+  requiredErrMsg: ({ label }: HItemProps) => {
+    return `请选择${label}`;
+  },
 };

package/src/components/TDPicker/hooks.ts

@@ -22,7 +22,7 @@ interface UseTimeChangeParams {
   showTime?: HDatePickerProps["showTime"];
   showSecond?: boolean;
 }
-export const useTimeVal = ({ value, format="X" }: UseTimeValParams) => {
+export const useTimeVal = ({ value, format = "X" }: UseTimeValParams) => {
   return useMemo(() => {
     if (!value || !format) {
       return value;
@@ -60,7 +60,7 @@ const timeProvider = (
   return value;
 };
 export const useTimeChange = ({
-  format="X",
+  format = "X",
   onChange,
   showTime,
   showSecond = true,
@@ -83,12 +83,12 @@ const formatMap = {
   X: "s",
   x: "ms",
 };
-export const usePropsFormat=({format}:UseTimePickerValParams)=>{
-   if (!format){
-     return  format;
-   }
-   return formatMap[format]?undefined:format;
-}
+export const usePropsFormat = ({ format }: UseTimePickerValParams) => {
+  if (!format) {
+    return format;
+  }
+  return formatMap[format] ? undefined : format;
+};
 export const useTimePickerValue = ({
   value,
   format,

package/src/components/TDPicker/index.tsx

@@ -1,9 +1,9 @@
-import {DatePicker, Input} from "antd";
+import { DatePicker, Input } from "antd";
 import type { HDatePickerProps } from "./modal";
 import { useTimeChange, useTimeVal } from "./hooks";
 import React, { useMemo } from "react";
 import HFormConnect from "../Form/HFormConnect";
-import {useClassName} from "@/components/hooks";
+import { useClassName } from "@/components/hooks";
 const Picker = DatePicker as any;
 const Index: React.FC<HDatePickerProps> = ({
   value,
@@ -14,53 +14,63 @@ const Index: React.FC<HDatePickerProps> = ({
   addFormat,
   style = { width: "100%" },
   showSecond = true,
-                                             addonBefore,
-    addonAfter,
-    className,
+  addonBefore,
+  addonAfter,
+  className,
   ...props
 }) => {
   addFormat?.({});
   const timeVal = useTimeVal({ value, format });
-  const addonClassName=useClassName("hw-addon")
+  const addonClassName = useClassName("hw-addon");
   const change = useTimeChange({ format, onChange, showTime, showSecond });
-  const {format:pickerFormat,showTime:propsShowTime} = useMemo(() => {
+  const { format: pickerFormat, showTime: propsShowTime } = useMemo(() => {
     if (!showTime) {
       return {
-        format:"YYYY-MM-DD",
-        showTime
-      }
+        format: "YYYY-MM-DD",
+        showTime,
+      };
     }
     if (showSecond) {
-      const sPropsShowTime=typeof showTime==="boolean"?{ format: 'HH:mm:ss' }:{format: 'HH:mm:ss' ,...showTime };
+      const sPropsShowTime =
+        typeof showTime === "boolean"
+          ? { format: "HH:mm:ss" }
+          : { format: "HH:mm:ss", ...showTime };
 
       return {
         format: "YYYY-MM-DD HH:mm:ss",
-        showTime:sPropsShowTime
-      }
+        showTime: sPropsShowTime,
+      };
     }
-    const mPropsShowTime=typeof showTime==="boolean"?{ format: 'HH:mm' }:{format: 'HH:mm' ,...showTime };
+    const mPropsShowTime =
+      typeof showTime === "boolean"
+        ? { format: "HH:mm" }
+        : { format: "HH:mm", ...showTime };
     return {
       format: "YYYY-MM-DD HH:mm",
-      showTime:mPropsShowTime
-    }
+      showTime: mPropsShowTime,
+    };
   }, [showSecond, showTime]);
   return (
-   <Input.Group compact style={{display:"flex",...style}} className={className}>
-     {addonBefore? <div className={addonClassName}>{addonBefore}</div>:null}
-     <Picker
-         value={timeVal}
-         onChange={change}
-         showTime={propsShowTime}
-         format={format||pickerFormat}
-         style={{flex:1}}
-         showSecond={showSecond}
-         disabledDate={(currentDate) => {
-           return !!disabledDate?.(currentDate, timeVal);
-         }}
-         {...props}
-     />
-     {addonAfter? <div className={addonClassName}>{addonAfter}</div>:null}
-   </Input.Group>
+    <Input.Group
+      compact
+      style={{ display: "flex", ...style }}
+      className={className}
+    >
+      {addonBefore ? <div className={addonClassName}>{addonBefore}</div> : null}
+      <Picker
+        value={timeVal}
+        onChange={change}
+        showTime={propsShowTime}
+        format={format || pickerFormat}
+        style={{ flex: 1 }}
+        showSecond={showSecond}
+        disabledDate={(currentDate) => {
+          return !!disabledDate?.(currentDate, timeVal);
+        }}
+        {...props}
+      />
+      {addonAfter ? <div className={addonClassName}>{addonAfter}</div> : null}
+    </Input.Group>
   );
 };
 export default HFormConnect(Index);

package/src/components/TDPicker/modal.ts

@@ -6,8 +6,8 @@ import type { TimePickerProps } from "antd";
 import type { DurationInputArg2 } from "moment";
 import type { DateRangePickerValueMapModal } from "../modal";
 import type { addFormatItemModal } from "../Form/modal";
-import {TimeRangePickerProps} from "antd/lib/time-picker";
-import React from "react";
+import type { TimeRangePickerProps } from "antd/lib/time-picker";
+import type React from "react";
 interface DisabledDateFnModal<T = Moment | undefined> {
   (currentDate: Moment, value: T): boolean;
 }
@@ -23,8 +23,8 @@ export interface HDatePickerProps
   disabledDate?: DisabledDateFnModal;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   showSecond?: boolean;
-  addonBefore?:React.ReactNode;
-  addonAfter?:React.ReactNode;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
 }
 export interface HRangePickerProps
   extends Omit<
@@ -50,15 +50,16 @@ export interface HTimePickerProps
   format?: DurationInputArg2 | string;
   disabledDate?: DisabledDateFnModal;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
-  addonBefore?:React.ReactNode;
-  addonAfter?:React.ReactNode;
+  addonBefore?: React.ReactNode;
+  addonAfter?: React.ReactNode;
 }
 
-export interface HTimeRangePickerProps extends Omit<TimeRangePickerProps, "format">{
-  valueMap?:{
-    start:string;
-    end:string;
-  }
-  format?:string;
+export interface HTimeRangePickerProps
+  extends Omit<TimeRangePickerProps, "format"> {
+  valueMap?: {
+    start: string;
+    end: string;
+  };
+  format?: string;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
-}
+}

package/src/components/Text/index.tsx

@@ -16,8 +16,12 @@ export default ({
   ...props
 }: HFormTextProps) => {
   const text = useMemo(() => {
-    const relVal=value?.toString();
-    if (typeof value === "undefined" || value === null||relVal?.trim()==="") {
+    const relVal = value?.toString();
+    if (
+      typeof value === "undefined" ||
+      value === null ||
+      relVal?.trim() === ""
+    ) {
       return "-";
     }
     return value;

package/src/components/Upload/modal.ts

@@ -5,7 +5,7 @@ import type { UploadChangeParam } from "antd/lib/upload/interface";
 import type { MediaTypeEnum } from "@/components/Upload/enums";
 import type { addFormatItemModal } from "@/components/Form/modal";
 import type React from "react";
-import { UploadListType } from "antd/lib/upload/interface";
+import type { UploadListType } from "antd/lib/upload/interface";
 
 export interface IUpLoadProps
   extends Omit<UploadProps, "onChange" | "listType" | "onPreview"> {

package/src/pages/DatePicker/index.tsx

@@ -1,5 +1,10 @@
-import { Space ,DatePicker} from "antd";
-import {HDatePicker, HRangePicker, HTimePicker, HTimeRangePicker} from "../../components";
+import { Space, DatePicker } from "antd";
+import {
+  HDatePicker,
+  HRangePicker,
+  HTimePicker,
+  HTimeRangePicker,
+} from "../../components";
 import { useState } from "react";
 export default () => {
   const [timeVal, setTimeVal] = useState({
@@ -8,35 +13,35 @@ export default () => {
   });
   const [timeVal1, setTimeVal1] = useState(1692070068);
   return (
-   <div style={{padding:20}}>
-       <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
-           <HDatePicker
-               value={timeVal1}
-               showTime={false}
-               addonBefore="你好"
-               onChange={(val) => {
-                   console.log(val);
-                   setTimeVal1(val);
-               }}
-           />
-           <HRangePicker
-               value={timeVal}
-               valueMap={{ start: "start", end: "end" }}
-               onChange={(val) => {
-                   console.log(val);
-                   setTimeVal(val);
-               }}
-           />
-           <HTimePicker
-               value={55135}
-               addonBefore="你好"
-               addonAfter="我很好"
-               onChange={(val) => {
-                   console.log(val);
-               }}
-           />
-           <HTimeRangePicker format="HH:mm"/>
-       </Space>
-   </div>
+    <div style={{ padding: 20 }}>
+      <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
+        <HDatePicker
+          value={timeVal1}
+          showTime={false}
+          addonBefore="你好"
+          onChange={(val) => {
+            console.log(val);
+            setTimeVal1(val);
+          }}
+        />
+        <HRangePicker
+          value={timeVal}
+          valueMap={{ start: "start", end: "end" }}
+          onChange={(val) => {
+            console.log(val);
+            setTimeVal(val);
+          }}
+        />
+        <HTimePicker
+          value={55135}
+          addonBefore="你好"
+          addonAfter="我很好"
+          onChange={(val) => {
+            console.log(val);
+          }}
+        />
+        <HTimeRangePicker format="HH:mm" />
+      </Space>
+    </div>
   );
 };

package/src/pages/Form/index.tsx

@@ -1,8 +1,9 @@
 import {
-    HForm,
-    HFormConfigProvider,
-    useHForm,
-    HSelect, HBasicForm,
+  HForm,
+  HFormConfigProvider,
+  useHForm,
+  HSelect,
+  HBasicForm,
 } from "../../components";
 import { useState } from "react";
 import { Button, Form, Input, Space } from "antd";
@@ -101,12 +102,12 @@ export default () => {
               {
                 label: "文字1",
                 name: "wz1",
-                type:"datePicker",
-                  rules:[{required:true}],
-                  itemProps:{
-                      format:"HH:mm",
-                      addonAfter:"测试"
-                  }
+                type: "datePicker",
+                rules: [{ required: true }],
+                itemProps: {
+                  format: "HH:mm",
+                  addonAfter: "测试",
+                },
               },
               // {
               //   label: "inputSelect",
@@ -122,13 +123,11 @@ export default () => {
               //   ],
               // },
               {
-                  hideLabel:true,
-                  itemProps:{
-
-                  },
-                  render:()=>{
-                      return <div>11</div>
-                  }
+                hideLabel: true,
+                itemProps: {},
+                render: () => {
+                  return <div>11</div>;
+                },
               },
               // {
               //   label: "运营商账号",
@@ -237,8 +236,8 @@ export default () => {
             form={form}
             initialValues={{
               richEditor: "1312312",
-              startTime:'07:00:00' ,
-              endTime:"14:00:00"
+              startTime: "07:00:00",
+              endTime: "14:00:00",
             }}
             labelAlign={"left"}
             onFinish={(value) => {

package/src/pages/Select/index.tsx

@@ -40,11 +40,13 @@ export default () => {
       />
       <HSelect
         value={val}
+
         onChange={(v, opts) => {
           console.log(v, opts);
           setVal(v);
         }}
         mode="multiple"
+        showSearch={false}
       />
       <div
         onClick={() => {

package/src/pages/Upload/index.tsx

@@ -11,7 +11,9 @@ export default () => {
       <HUpload
         value={files}
         exFiles={["MP4"]}
-        thumbUrl={"https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641"}
+        thumbUrl={
+          "https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641"
+        }
         onPreview={null}
         request={() => {
           return {
@@ -27,7 +29,9 @@ export default () => {
       />
       <HUpload
         value={files1}
-        thumbUrl={"https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641"}
+        thumbUrl={
+          "https://inews.gtimg.com/om_bt/OGlQWfsaAoKkuCcMZ2o9IVEPqd-72DQy5EAN02XBHUwfYAA/641"
+        }
         mediaType={MediaTypeEnum.file}
         onChange={setFiles1}
       >