@hw-component/form 1.9.88 → 1.9.90

package/src/components/Select/TagSelect/hooks.ts

@@ -1,102 +1,111 @@
-import {useEffect, useMemo, useState} from "react";
-import {HTagSelectProps, OptionType} from "@/components/Select/modal";
+import { useEffect, useMemo, useState } from "react";
+import { HTagSelectProps, OptionType } from "@/components/Select/modal";
 
-export const useTagControl=({value,options,title}:HTagSelectProps)=>{
-    const {checked,indeterminate}=useMemo(()=>{
-        const len=value?.length;
-        const opLen=options?.length;
-        if (!opLen){
-            return {
-                checked:false
-            }
-        }
-        if (len===opLen){
-            return {
-                checked:true
-            }
-        }
-        return  {
-            indeterminate:!!len
-        }
-    },[value,options]);
-    const labelNode=useMemo(()=>{
-        if (title){
-            return title;
-        }
-        if (checked){
-            return  "取消"
-        }
-        return  "全选"
-    },[title,checked,indeterminate]);
-    return {
-        labelNode,
-        checked,
-        indeterminate
-    }
-}
-
-export const useChangeControl=({options,value,onChange,fieldNames}:HTagSelectProps)=>{
-    const {value:valueKey="value"}=fieldNames||{};
-    const optsNk=(newVal)=>{
-        const newOpts:OptionType[]=[];
-        newVal?.forEach((itemVal)=>{
-            const index=options?.findIndex((item)=>{
-                return itemVal===item[valueKey];
-            });
-            if (typeof index!=="undefined"){
-                newOpts.push((options?.[index] as OptionType));
-            }
-        });
-        return  newOpts;
+export const useTagControl = ({ value, options, title }: HTagSelectProps) => {
+  const { checked, indeterminate } = useMemo(() => {
+    const len = value?.length;
+    const opLen = options?.length;
+    if (!opLen) {
+      return {
+        checked: false,
+      };
     }
-    const checkedVal=(val)=>{
-        const newVal=[...value];
-        newVal.push(val);
-        onChange?.(newVal,optsNk(newVal));
+    if (len === opLen) {
+      return {
+        checked: true,
+      };
     }
-    const removeVal=(index)=>{
-        const newVal=[...value];
-        newVal.splice(index,1);
-        onChange?.(newVal,optsNk(newVal));
+    return {
+      indeterminate: !!len,
+    };
+  }, [value, options]);
+  const labelNode = useMemo(() => {
+    if (title) {
+      return title;
     }
-    const change=(val)=>{
-         const index=value?.indexOf(val);
-        const checked=index===-1;
-        if (checked){
-            return checkedVal(val);
-        }
-        return  removeVal(index);
+    if (checked) {
+      return "取消";
     }
-    const allCheck=(e)=>{
-        if (!e.target.checked){
-           return  onChange?.([],[]);
-        }
-        const newVal=options?.map((item)=>{
-             return item[valueKey];
-        });
-        return  onChange?.(newVal,options);
+    return "全选";
+  }, [title, checked, indeterminate]);
+  return {
+    labelNode,
+    checked,
+    indeterminate,
+  };
+};
+
+export const useChangeControl = ({
+  options,
+  value,
+  onChange,
+  fieldNames,
+}: HTagSelectProps) => {
+  const { value: valueKey = "value" } = fieldNames || {};
+  const optsNk = (newVal) => {
+    const newOpts: OptionType[] = [];
+    newVal?.forEach((itemVal) => {
+      const index = options?.findIndex((item) => {
+        return itemVal === item[valueKey];
+      });
+      if (typeof index !== "undefined") {
+        newOpts.push(options?.[index] as OptionType);
+      }
+    });
+    return newOpts;
+  };
+  const checkedVal = (val) => {
+    const newVal = [...value];
+    newVal.push(val);
+    onChange?.(newVal, optsNk(newVal));
+  };
+  const removeVal = (index) => {
+    const newVal = [...value];
+    newVal.splice(index, 1);
+    onChange?.(newVal, optsNk(newVal));
+  };
+  const change = (val) => {
+    const index = value?.indexOf(val);
+    const checked = index === -1;
+    if (checked) {
+      return checkedVal(val);
     }
-    return {
-        change,
-        allCheck
+    return removeVal(index);
+  };
+  const allCheck = (e) => {
+    if (!e.target.checked) {
+      return onChange?.([], []);
     }
-}
+    const newVal = options?.map((item) => {
+      return item[valueKey];
+    });
+    return onChange?.(newVal, options);
+  };
+  return {
+    change,
+    allCheck,
+  };
+};
 
-export const useCollapseControl=({visible,defaultVisible,onVisibleChange}:HTagSelectProps)=>{
-     const [activeKey,setActiveKey]=useState(defaultVisible?["1"]:[]);
-    useEffect(() => {
-        if (typeof visible==="undefined"){
-            return;
-        }
-        setActiveKey(visible?["1"]:[]);
-    }, [visible]);
-    const onChange=(keys)=>{
-         const len=keys?.length;
-         onVisibleChange?.(!!len);
-         setActiveKey(keys)
+export const useCollapseControl = ({
+  visible,
+  defaultVisible,
+  onVisibleChange,
+}: HTagSelectProps) => {
+  const [activeKey, setActiveKey] = useState(defaultVisible ? ["1"] : []);
+  useEffect(() => {
+    if (typeof visible === "undefined") {
+      return;
     }
-     return {
-         activeKey,
-         onChange
-     }
-}
+    setActiveKey(visible ? ["1"] : []);
+  }, [visible]);
+  const onChange = (keys) => {
+    const len = keys?.length;
+    onVisibleChange?.(!!len);
+    setActiveKey(keys);
+  };
+  return {
+    activeKey,
+    onChange,
+  };
+};

package/src/components/Select/TagSelect/index.tsx

@@ -1,79 +1,105 @@
-import {Collapse, Checkbox} from 'antd';
-import {useClassName, useMatchConfigProps} from "../../hooks";
+import { Collapse, Checkbox } from "antd";
+import { useClassName, useMatchConfigProps } from "../../hooks";
 import React from "react";
-import {useSelectReq} from "../hooks/norHooks";
-import {HTagSelectProps} from "../modal";
-import {CheckboxProps} from "antd/lib/checkbox/Checkbox";
-import Content from './Content';
-import {useChangeControl, useCollapseControl, useTagControl} from "@/components/Select/TagSelect/hooks";
+import { useSelectReq } from "../hooks/norHooks";
+import { HTagSelectProps } from "../modal";
+import { CheckboxProps } from "antd/lib/checkbox/Checkbox";
+import Content from "./Content";
+import {
+  useChangeControl,
+  useCollapseControl,
+  useTagControl,
+} from "@/components/Select/TagSelect/hooks";
 import HFormConnect from "@/components/Form/HFormConnect";
 const { Panel } = Collapse;
 
-const ItemTitle:React.FC<CheckboxProps>=({children,...props})=>{
-    return <div onClick={(event)=>{
+const ItemTitle: React.FC<CheckboxProps> = ({ children, ...props }) => {
+  return (
+    <div
+      onClick={(event) => {
         event.stopPropagation();
-    }}>
-        <Checkbox {...props}>
-            {children}
-        </Checkbox>
+      }}
+    >
+      <Checkbox {...props}>{children}</Checkbox>
     </div>
-}
-const Index:React.FC<HTagSelectProps>=({
-                                           options,
-                                           value=[],
-                                           onChange,
-                                           dispatch,
-                                           fieldNames:propsFieldNames,
-                                           request,
-                                           title,
-                                           manual,
-                                           className="",
-    visible,
+  );
+};
+const Index: React.FC<HTagSelectProps> = ({
+  options,
+  value = [],
+  onChange,
+  dispatch,
+  fieldNames: propsFieldNames,
+  request,
+  title,
+  manual,
+  className = "",
+  visible,
+  defaultVisible,
+  onVisibleChange,
+  addDispatchListener,
+}) => {
+  const collapseClassName = useClassName("hw-tag-select");
+  const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
+  const { activeKey, onChange: colChange } = useCollapseControl({
     defaultVisible,
+    visible,
     onVisibleChange,
-                                           addDispatchListener
-})=>{
-    const collapseClassName = useClassName("hw-tag-select");
-    const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
-    const {activeKey,onChange:colChange}=useCollapseControl({defaultVisible,visible,onVisibleChange})
-    const {
-        loading,
-        data: resultData,
-        error,
-        reload,
-    } = useSelectReq({
-        options,
-        manual,
-        request,
-        dispatch,
-    }); //options
-    const {labelNode,checked,indeterminate}=useTagControl({value,options:resultData,title});
-    const {allCheck}=useChangeControl({
-        value,
-        options:resultData,
-        onChange,
-        fieldNames
-    });
-    addDispatchListener?.("reload", reload);
-    return <Collapse bordered={false}
-                     ghost
-                     activeKey={activeKey}
-                     onChange={colChange}
-                     className={`${collapseClassName} ${className}`}
+  });
+  const {
+    loading,
+    data: resultData,
+    error,
+    reload,
+  } = useSelectReq({
+    options,
+    manual,
+    request,
+    dispatch,
+  }); //options
+  const { labelNode, checked, indeterminate } = useTagControl({
+    value,
+    options: resultData,
+    title,
+  });
+  const { allCheck } = useChangeControl({
+    value,
+    options: resultData,
+    onChange,
+    fieldNames,
+  });
+  addDispatchListener?.("reload", reload);
+  return (
+    <Collapse
+      bordered={false}
+      ghost
+      activeKey={activeKey}
+      onChange={colChange}
+      className={`${collapseClassName} ${className}`}
     >
-        <Panel key="1" header={<ItemTitle indeterminate={indeterminate}
-                                  checked={checked}
-                                  onChange={allCheck}
-        >{labelNode}</ItemTitle>}>
-            <Content loading={loading}
-                     options={resultData}
-                     value={value}
-                     error={error}
-                     onChange={onChange}
-                     reload={reload}
-                     fieldNames={fieldNames}
-            />
-        </Panel>
+      <Panel
+        key="1"
+        header={
+          <ItemTitle
+            indeterminate={indeterminate}
+            checked={checked}
+            onChange={allCheck}
+          >
+            {labelNode}
+          </ItemTitle>
+        }
+      >
+        <Content
+          loading={loading}
+          options={resultData}
+          value={value}
+          error={error}
+          onChange={onChange}
+          reload={reload}
+          fieldNames={fieldNames}
+        />
+      </Panel>
     </Collapse>
-}
+  );
+};
 export default HFormConnect(Index);

package/src/components/Select/index.less

@@ -58,13 +58,12 @@
 .@{ant-prefix}-hw-tag-select {
   width: 100%;
   .@{ant-prefix}-collapse-content-box {
-       padding: 0px 40px !important;
+       padding: 0 40px !important;
   }
-  .@{ant-prefix}-hw-tag-select{
+  .@{ant-prefix}-hw-tag-select {
     cursor: pointer;
   }
-  .@{ant-prefix}-collapse-header{
+  .@{ant-prefix}-collapse-header {
      padding: 5px 16px !important;
   }
 }
-

package/src/components/Select/modal.ts

@@ -2,7 +2,7 @@ import type { SelectProps } from "antd";
 import type React from "react";
 import type { PromiseFnResult } from "../modal";
 import type { addFormatItemModal, argsFn, DispatchModal } from "../Form/modal";
-import {CollapseProps} from "antd/lib/collapse/Collapse";
+import { CollapseProps } from "antd/lib/collapse/Collapse";
 
 export type OptionType = Record<string, any>;
 export type RenderFn = (data: OptionType) => React.ReactNode;
@@ -25,7 +25,7 @@ export interface OptionsPageResultModal {
 }
 export type OptionsDataType = OptionsListType | OptionsPageResultModal;
 export interface HSelectProps
-  extends Omit<SelectProps, "options" | "placeholder"|"onChange"> {
+  extends Omit<SelectProps, "options" | "placeholder" | "onChange"> {
   style?: React.CSSProperties;
   request?: PromiseFnResult<any, OptionsDataType>;
   manual?: boolean;
@@ -42,16 +42,16 @@ export interface HSelectProps
   isList?: boolean;
   addonBefore?: React.ReactNode;
   addonAfter?: React.ReactNode;
-  onChange?:(value:any,opts?:OptionType[]|OptionType)=>void;
+  onChange?: (value: any, opts?: OptionType[] | OptionType) => void;
 }
 export interface FilterDataModal {
   value: any;
   index: number;
 }
-export interface HTagSelectProps extends HSelectProps{
-  title?:React.ReactNode;
-  defaultVisible?:boolean;
-  visible?:boolean;
-  onVisibleChange?:(visible:boolean)=>void;
+export interface HTagSelectProps extends HSelectProps {
+  title?: React.ReactNode;
+  defaultVisible?: boolean;
+  visible?: boolean;
+  onVisibleChange?: (visible: boolean) => void;
 }
 export type PartialHSelectProps = Partial<HSelectProps>;

package/src/components/TDPicker/TimeRangePicker.tsx

@@ -0,0 +1,51 @@
+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 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)
+                };
+            },
+        },
+    });
+
+    return <TimePicker.RangePicker value={value} onChange={onChange}  order={order} style={{ width: '100%' }} {...props}/>;
+}
+
+const Index=HFormConnect(HTimePicker);
+
+export default {
+    Component: Index,
+    placeholder: ({ label }: HItemProps) => {
+        return [`请选择开始${label}`, `请选择结束${label}`];
+    },
+    requiredErrMsg: ({ label }: HItemProps) => {
+        return `请选择${label}`;
+    },
+};

package/src/components/TDPicker/modal.ts

@@ -6,6 +6,7 @@ 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";
 interface DisabledDateFnModal<T = Moment | undefined> {
   (currentDate: Moment, value: T): boolean;
 }
@@ -47,3 +48,12 @@ export interface HTimePickerProps
   disabledDate?: DisabledDateFnModal;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }
+
+export interface HTimeRangePickerProps extends Omit<TimeRangePickerProps, "format">{
+  valueMap?:{
+    start:string;
+    end:string;
+  }
+  format?:string;
+  addFormat?: (config: Record<string, addFormatItemModal>) => void;
+}

package/src/components/index.tsx

@@ -42,3 +42,5 @@ export const HTrimTextArea = FormConfig.trimTextArea;
 export const HInputNumberGroup = FormConfig.inputNumberGroup.Component;
 
 export const HTagSelect = FormConfig.tagSelect;
+
+export const HTimeRangePicker = FormConfig.timeRangePicker;

package/src/pages/Form/index.tsx

@@ -77,28 +77,31 @@ export default () => {
             configData={[
               {
                 label: "tagSelect",
-                type:"tagSelect",
+                type: "tagSelect",
                 name: "wz",
-                  dispatch: {
-                      fnKey: 'reload',
-                      dependencies: ['wz1'],
+                dispatch: {
+                  fnKey: "reload",
+                  dependencies: ["wz1"],
+                },
+                itemProps: {
+                  request: () => {
+                    return new Promise((resolve, reject) => {
+                      setTimeout(() => {
+                        resolve([
+                          {
+                            value: "你好",
+                            key: "1",
+                          },
+                        ]);
+                      }, 3000);
+                    });
                   },
-                itemProps:{
-                    request:()=>{
-                        return new Promise((resolve, reject)=>{
-                            setTimeout(()=>{
-                                resolve([{
-                                    value:"你好",
-                                    key:"1"
-                                }])
-                            },3000)
-                        })
-                    }
-                }
+                },
               },
               {
                 label: "文字1",
                 name: "wz1",
+                type:"timeRangePicker"
               },
               // {
               //   label: "inputSelect",
@@ -237,6 +240,8 @@ export default () => {
             form={form}
             initialValues={{
               richEditor: "1312312",
+              startTime:'07:00:00' ,
+              endTime:"14:00:00"
             }}
             labelAlign={"left"}
             onFinish={(value) => {

package/src/pages/Select/index.tsx

@@ -1,12 +1,12 @@
-import { HSelect ,HTagSelect} from "../../components";
+import { HSelect, HTagSelect } from "../../components";
 import { Form, Space } from "antd";
 import { useEffect, useState } from "react";
 export default () => {
   const [selectVal, setSelectVal] = useState([{ name: "11", id: -100 }]);
   const [op, setOp] = useState([{ label: "1", value: 1 }]);
   const [val, setVal] = useState([2, 3]);
-    const [tagVal, setTagVal] = useState([]);
-  const [visible,setVisible]=useState(true);
+  const [tagVal, setTagVal] = useState([]);
+  const [visible, setVisible] = useState(true);
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
       <HSelect
@@ -40,39 +40,41 @@ export default () => {
       />
       <HSelect
         value={val}
-        onChange={(v,opts) => {
-            console.log(v,opts)
+        onChange={(v, opts) => {
+          console.log(v, opts);
           setVal(v);
         }}
         mode="multiple"
       />
-        <div onClick={()=>{
-            setVisible(false)
-        }}>
-            关闭
-        </div>
-        <HTagSelect
-            value={tagVal}
-            visible={visible}
-            onVisibleChange={(v)=>{
-                 console.log(v)
-            }}
-            request={()=>{
-                return new Promise((resolve, reject)=>{
-                    setTimeout(()=>{
-                       resolve([])
-                    },3000)
-                })
-            }}
-            onChange={(value, opts)=>{
-                setTagVal(value);
-                console.log(value,opts)
-            }}
-            fieldNames={{
-                label:"value",
-                value:"key"
-            }}
-        />
+      <div
+        onClick={() => {
+          setVisible(false);
+        }}
+      >
+        关闭
+      </div>
+      <HTagSelect
+        value={tagVal}
+        visible={visible}
+        onVisibleChange={(v) => {
+          console.log(v);
+        }}
+        request={() => {
+          return new Promise((resolve, reject) => {
+            setTimeout(() => {
+              resolve([]);
+            }, 3000);
+          });
+        }}
+        onChange={(value, opts) => {
+          setTagVal(value);
+          console.log(value, opts);
+        }}
+        fieldNames={{
+          label: "value",
+          value: "key",
+        }}
+      />
       <div
         onClick={() => {
           setOp([{ label: "2", value: 2 }]);