@hw-component/form 1.9.87 → 1.9.89

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

@@ -1,50 +1,78 @@
-import {HTagSelectProps} from "../modal";
-import {useClassName} from "@/components/hooks";
-import {Row, Skeleton, Space, Tag,Empty} from "antd";
+import { HTagSelectProps } from "../modal";
+import { useClassName } from "@/components/hooks";
+import { Row, Skeleton, Space, Tag, Empty } from "antd";
 import React from "react";
-import {useChangeControl} from "./hooks";
+import { useChangeControl } from "./hooks";
 import NotFoundContent from "../components/NotFoundContent";
 
-const ItemOption=({options,value,onChange,fieldNames}:HTagSelectProps)=>{
-    const tagClassName = useClassName("hw-tag-item");
-    const {label:labelKey="label",value:valueKey="value"}=fieldNames||{};
-    const {change}=useChangeControl({options,value,onChange,fieldNames});
-    return  <Row gutter={[0,8]}>
-    {options?.map((item)=>{
-        const {[labelKey]:label,[valueKey]:itemVal}=item;
-        const index=value?.indexOf(itemVal);
-        const checkedTag=index!==-1;
-        return  <Tag color={checkedTag?"processing":undefined}
-        className={tagClassName}
-        key={itemVal}
-        onClick={()=>{
-            change(itemVal);
-        }}
-    >
-        {label}
-        </Tag>
-    })}
+const ItemOption = ({
+  options,
+  value,
+  onChange,
+  fieldNames,
+}: HTagSelectProps) => {
+  const tagClassName = useClassName("hw-tag-item");
+  const { label: labelKey = "label", value: valueKey = "value" } =
+    fieldNames || {};
+  const { change } = useChangeControl({ options, value, onChange, fieldNames });
+  return (
+    <Row gutter={[0, 8]}>
+      {options?.map((item) => {
+        const { [labelKey]: label, [valueKey]: itemVal } = item;
+        const index = value?.indexOf(itemVal);
+        const checkedTag = index !== -1;
+        return (
+          <Tag
+            color={checkedTag ? "processing" : undefined}
+            className={tagClassName}
+            key={itemVal}
+            onClick={() => {
+              change(itemVal);
+            }}
+          >
+            {label}
+          </Tag>
+        );
+      })}
     </Row>
-}
+  );
+};
 
-interface IContentProps extends HTagSelectProps{
-    error?:Error;
-    reload:VoidFunction;
+interface IContentProps extends HTagSelectProps {
+  error?: Error;
+  reload: VoidFunction;
 }
 
-export default ({loading,value,options,onChange,fieldNames,error,reload}:IContentProps)=>{
- const len=options?.length||0;
- if (loading&&len===0){
-     return  <Space direction={"vertical"} style={{width:"100%"}}>
-         <Skeleton.Button active size={"small"} block />
-         <Skeleton.Button active size={"small"} block />
-     </Space>
- }
-    if (error && len === 0) {
-        return <NotFoundContent error={error}  reload={reload}/>;
-    }
-    if (len===0){
-        return  <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
-    }
- return  <ItemOption options={options} value={value} onChange={onChange} fieldNames={fieldNames}/>
-}
+export default ({
+  loading,
+  value,
+  options,
+  onChange,
+  fieldNames,
+  error,
+  reload,
+}: IContentProps) => {
+  const len = options?.length || 0;
+  if (loading && len === 0) {
+    return (
+      <Space direction={"vertical"} style={{ width: "100%" }}>
+        <Skeleton.Button active size={"small"} block />
+        <Skeleton.Button active size={"small"} block />
+      </Space>
+    );
+  }
+  if (error && len === 0) {
+    return <NotFoundContent error={error} reload={reload} />;
+  }
+  if (len === 0) {
+    return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+  }
+  return (
+    <ItemOption
+      options={options}
+      value={value}
+      onChange={onChange}
+      fieldNames={fieldNames}
+    />
+  );
+};

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

@@ -1,83 +1,111 @@
-import {useMemo} 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 useTagControl = ({ value, options, title }: HTagSelectProps) => {
+  const { checked, indeterminate } = useMemo(() => {
+    const len = value?.length;
+    const opLen = options?.length;
+    if (!opLen) {
+      return {
+        checked: false,
+      };
     }
-}
-
-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;
+    if (len === opLen) {
+      return {
+        checked: true,
+      };
     }
-    const checkedVal=(val)=>{
-        const newVal=[...value];
-        newVal.push(val);
-        onChange?.(newVal,optsNk(newVal));
+    return {
+      indeterminate: !!len,
+    };
+  }, [value, options]);
+  const labelNode = useMemo(() => {
+    if (title) {
+      return title;
     }
-    const removeVal=(index)=>{
-        const newVal=[...value];
-        newVal.splice(index,1);
-        onChange?.(newVal,optsNk(newVal));
+    if (checked) {
+      return "取消";
     }
-    const change=(val)=>{
-         const index=value?.indexOf(val);
-        const checked=index===-1;
-        if (checked){
-            return checkedVal(val);
-        }
-        return  removeVal(index);
+    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);
     }
-    const allCheck=(e)=>{
-        if (!e.target.checked){
-           return  onChange?.([],[]);
-        }
-        const newVal=options?.map((item)=>{
-             return item[valueKey];
-        });
-        return  onChange?.(newVal,options);
+    return removeVal(index);
+  };
+  const allCheck = (e) => {
+    if (!e.target.checked) {
+      return onChange?.([], []);
     }
-    return {
-        change,
-        allCheck
+    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);
+  };
+  return {
+    activeKey,
+    onChange,
+  };
+};

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

@@ -1,63 +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, 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="",collapseProps,addDispatchListener})=>{
-    const collapseClassName = useClassName("hw-tag-select");
-    const { fieldNames } = useMatchConfigProps({ fieldNames: propsFieldNames });
-    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
-                     {...collapseProps}
-                     className={`${collapseClassName} ${className}`}
+  );
+};
+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,
+  });
+  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,14 +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;
-  collapseProps?:CollapseProps
+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) => {