@hw-component/form 1.9.85 → 1.9.87

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

@@ -1,44 +1,42 @@
-import {addFormatItemModal, HFormItemProps} from "../modal";
-import {useFormContext} from "@/components/Form/Context";
-import {useEffect} from "react";
+import { addFormatItemModal, HFormItemProps } from "../modal";
+import { useFormContext } from "@/components/Form/Context";
+import { useEffect } from "react";
 
 interface ResultModal {
-    inputValue?: (value: Record<string, any>) => Record<string, any>;
-    outputValue?: (value: Record<string, any>) => Record<string, any>;
+  inputValue?: (value: Record<string, any>) => Record<string, any>;
+  outputValue?: (value: Record<string, any>) => Record<string, any>;
 }
 
 export const formatMaker = (
-    itemProps: HFormItemProps,
-    formats?: addFormatItemModal
+  itemProps: HFormItemProps,
+  formats?: addFormatItemModal
 ) => {
-    const { inputValue, outputValue } = formats || {};
-    const { initValueProvider = inputValue, subProvider = outputValue } =
-        itemProps;
-    const resultObj: ResultModal = {};
-    if (initValueProvider) {
-        resultObj.inputValue = (value) => {
-            return initValueProvider(itemProps, value);
-        };
-    }
-    if (subProvider) {
-        resultObj.outputValue = (value) => {
-            return subProvider(itemProps, value);
-        };
-    }
-    const keysLen = Object.keys(resultObj).length;
-    return keysLen === 0 ? undefined : resultObj;
+  const { inputValue, outputValue } = formats || {};
+  const { initValueProvider = inputValue, subProvider = outputValue } =
+    itemProps;
+  const resultObj: ResultModal = {};
+  if (initValueProvider) {
+    resultObj.inputValue = (value) => {
+      return initValueProvider(itemProps, value);
+    };
+  }
+  if (subProvider) {
+    resultObj.outputValue = (value) => {
+      return subProvider(itemProps, value);
+    };
+  }
+  const keysLen = Object.keys(resultObj).length;
+  return keysLen === 0 ? undefined : resultObj;
 };
 
-
-
-export default (props:HFormItemProps)=>{
-    const {name,itemProps}=props;
-    const { form, valueType = "float" } = useFormContext();
-    const relName = Array.isArray(name) ? name.join(".") : name;
-    useEffect(() => {
-        if (!relName||!itemProps) {
-            return;
-        }
-        form?.addFormat(relName, formatMaker((itemProps as HFormItemProps)));
-    }, [valueType, props]);
-}
+export default (props: HFormItemProps) => {
+  const { name, itemProps } = props;
+  const { form, valueType = "float" } = useFormContext();
+  const relName = Array.isArray(name) ? name.join(".") : name;
+  useEffect(() => {
+    if (!relName || !itemProps) {
+      return;
+    }
+    form?.addFormat(relName, formatMaker(itemProps as HFormItemProps));
+  }, [valueType, props]);
+};

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

@@ -186,14 +186,26 @@ export default () => {
           ...values,
         });
       },
+      resetFieldsValues: (values = {}) => {
+        const oldValue = form.getFieldsValue(true);
+        const keys = Object.keys(oldValue);
+        const newVale = {};
+        keys.forEach((key) => {
+          newVale[key] = undefined;
+        });
+        form.setFieldsValue({
+          ...newVale,
+          ...values,
+        });
+      },
       clear: () => {
         form.resetFields();
         isLoading = false;
       },
-      resetFormStatus:()=>{
+      resetFormStatus: () => {
         isLoading = false;
       },
-      inited:false
+      inited: false,
     };
   }, []);
 };

package/src/components/Form/index.less

@@ -102,3 +102,9 @@
     display: flex;
   }
 }
+
+.@{ant-prefix}-hw-tag-select{
+    .@{ant-prefix}-hw-tag-item{
+      cursor: pointer;
+    }
+}

package/src/components/Form/modal.ts

@@ -208,9 +208,10 @@ export interface HFormInstance extends FormInstance {
   reload: PromiseFnResult;
   clear: VoidFunction;
   resetFieldsInitValue: (values?: Record<string, any>) => void;
+  resetFieldsValues: (values?: Record<string, any>) => void;
   clearFormat: (name: string) => void;
-  inited:boolean;
-  resetFormStatus:VoidFunction
+  inited: boolean;
+  resetFormStatus: VoidFunction;
 }
 
 export interface ConnectConfigModal {

package/src/components/RichEditor/hooks.ts

@@ -3,7 +3,7 @@ import { baseConfig } from "../config";
 import { IHRichEditorProps } from "src/components/RichEditor/modal";
 import { useClassName } from "../hooks";
 import { useEffect, useMemo, useRef, useState } from "react";
-import BraftEditor, {EditorState} from "braft-editor";
+import BraftEditor, { EditorState } from "braft-editor";
 
 export const useProps = ({ fileRequest, valueType }: IHRichEditorProps) => {
   const {
@@ -46,38 +46,40 @@ export const useFocusClassname = ({
   };
 };
 
-export const useVC=({value,onChange,valueType}:IHRichEditorProps)=>{
-    const richValue: EditorState | undefined = valueType === "html" ? BraftEditor.createEditorState(value) : (value as EditorState);
-    const change = (editorState) => {
-        const changeVal = valueType === "html" ? editorState.toHTML() : editorState;
-        const isEmpty = !!richValue ? richValue.isEmpty() : true;
-        if (isEmpty && editorState.isEmpty()) {
-            return;
-        }
-        onChange?.(changeVal);
-    };
-    return {
-        richValue,
-        change
+export const useVC = ({ value, onChange, valueType }: IHRichEditorProps) => {
+  const richValue: EditorState | undefined =
+    valueType === "html"
+      ? BraftEditor.createEditorState(value)
+      : (value as EditorState);
+  const change = (editorState) => {
+    const changeVal = valueType === "html" ? editorState.toHTML() : editorState;
+    const isEmpty = !!richValue ? richValue.isEmpty() : true;
+    if (isEmpty && editorState.isEmpty()) {
+      return;
     }
-}
-
+    onChange?.(changeVal);
+  };
+  return {
+    richValue,
+    change,
+  };
+};
 
-export const useUploadFn=({fileRequest}:IHRichEditorProps)=>{
-    return async (params)=>{
-        const { file, id } = params;
-        const { url } = await fileRequest?.(file, params);
-        params.success({
-            url,
-            meta: {
-                id,
-                title: file.name,
-                alt: "媒体资源",
-                loop: false,
-                autoPlay: false,
-                controls: true,
-                poster: url,
-            },
-        });
-    }
-}
+export const useUploadFn = ({ fileRequest }: IHRichEditorProps) => {
+  return async (params) => {
+    const { file, id } = params;
+    const { url } = await fileRequest?.(file, params);
+    params.success({
+      url,
+      meta: {
+        id,
+        title: file.name,
+        alt: "媒体资源",
+        loop: false,
+        autoPlay: false,
+        controls: true,
+        poster: url,
+      },
+    });
+  };
+};

package/src/components/RichEditor/index.tsx

@@ -1,7 +1,7 @@
 import BraftEditor, { EditorState } from "braft-editor";
 import "braft-editor/dist/index.css";
 import { IHRichEditorProps } from "./modal";
-import {useFocusClassname, useProps, useUploadFn, useVC} from "./hooks";
+import { useFocusClassname, useProps, useUploadFn, useVC } from "./hooks";
 import { useClassName } from "../hooks";
 import React from "react";
 import HFormConnect from "../Form/HFormConnect";
@@ -19,8 +19,8 @@ const Index: React.ForwardRefRenderFunction<any, IHRichEditorProps> = (
     media,
     contentStyle = defaultContentStyle,
     bordered = true,
-      onBlur,
-      onFocus,
+    onBlur,
+    onFocus,
     addFormat,
     ...props
   },
@@ -30,37 +30,45 @@ const Index: React.ForwardRefRenderFunction<any, IHRichEditorProps> = (
     fileRequest,
     valueType,
   });
-  const { focusClassname, onFocus:selfFocus, onBlur:selfBlur } = useFocusClassname({
+  const {
+    focusClassname,
+    onFocus: selfFocus,
+    onBlur: selfBlur,
+  } = useFocusClassname({
     bordered,
     onBlur,
-    onFocus
+    onFocus,
   });
-  const {richValue,change}=useVC({value,onChange,valueType:vType});
-  const uploadFn = useUploadFn({fileRequest:fileReq});
+  const { richValue, change } = useVC({ value, onChange, valueType: vType });
+  const uploadFn = useUploadFn({ fileRequest: fileReq });
   const bodyClassName = useClassName("hw-rich-editor");
   const borderClassName = useClassName("hw-rich-editor-border");
   addFormat?.({
-    float:{
-      inputValue:(item, initValue)=>{
+    float: {
+      inputValue: (item, initValue) => {
         const { name = "" } = item;
-        const keyName=(name as string);
-        const itemVal=initValue[keyName];
-        const initVal=typeof itemVal==="string"?BraftEditor.createEditorState(itemVal):itemVal;
+        const keyName = name as string;
+        const itemVal = initValue[keyName];
+        const initVal =
+          typeof itemVal === "string"
+            ? BraftEditor.createEditorState(itemVal)
+            : itemVal;
         return {
-            [keyName]:initVal
+          [keyName]: initVal,
         };
       },
-      outputValue:(item, outputValue)=>{
+      outputValue: (item, outputValue) => {
         const { name = "" } = item;
-          const keyName=(name as string);
-        const itemVal=outputValue[keyName];
-        const outputVal=typeof itemVal==="string"?itemVal:itemVal?.toHTML();
+        const keyName = name as string;
+        const itemVal = outputValue[keyName];
+        const outputVal =
+          typeof itemVal === "string" ? itemVal : itemVal?.toHTML();
         return {
-            [keyName]:outputVal
-        }
-      }
-    }
-  })
+          [keyName]: outputVal,
+        };
+      },
+    },
+  });
   return (
     <div
       className={`${bodyClassName} ${
@@ -81,4 +89,4 @@ const Index: React.ForwardRefRenderFunction<any, IHRichEditorProps> = (
   );
 };
 
-export default HFormConnect((React.forwardRef(Index) as any));
+export default HFormConnect(React.forwardRef(Index) as any);

package/src/components/RichEditor/modal.ts

@@ -2,7 +2,8 @@ import { BraftEditorProps, EditorState } from "braft-editor";
 import { PromiseFnResult } from "../modal";
 import { addFormatItemModal } from "../Form/modal";
 
-export interface IHRichEditorProps extends Omit<BraftEditorProps, "value"|"onChange"> {
+export interface IHRichEditorProps
+  extends Omit<BraftEditorProps, "value" | "onChange"> {
   value?: string | EditorState;
   onChange?: (value: string | EditorState) => void;
   fileRequest?: PromiseFnResult;
@@ -10,4 +11,3 @@ export interface IHRichEditorProps extends Omit<BraftEditorProps, "value"|"onCha
   bordered?: boolean;
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
 }
-

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

@@ -0,0 +1,50 @@
+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 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>
+    })}
+    </Row>
+}
+
+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}/>
+}

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

@@ -0,0 +1,83 @@
+import {useMemo} 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;
+    }
+    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  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
+    }
+}

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

@@ -0,0 +1,63 @@
+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 HFormConnect from "@/components/Form/HFormConnect";
+const { Panel } = Collapse;
+
+const ItemTitle:React.FC<CheckboxProps>=({children,...props})=>{
+    return <div onClick={(event)=>{
+        event.stopPropagation();
+    }}>
+        <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}`}
+    >
+        <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

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

package/src/components/Select/index.tsx

@@ -55,7 +55,6 @@ const Index: React.FC<HSelectProps> = ({
   } = useSelectReq({
     options,
     manual,
-    fieldNames,
     request,
     serviceSearch,
     showSearch,

package/src/components/Select/modal.ts

@@ -2,6 +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";
 
 export type OptionType = Record<string, any>;
 export type RenderFn = (data: OptionType) => React.ReactNode;
@@ -24,7 +25,7 @@ export interface OptionsPageResultModal {
 }
 export type OptionsDataType = OptionsListType | OptionsPageResultModal;
 export interface HSelectProps
-  extends Omit<SelectProps, "options" | "placeholder"> {
+  extends Omit<SelectProps, "options" | "placeholder"|"onChange"> {
   style?: React.CSSProperties;
   request?: PromiseFnResult<any, OptionsDataType>;
   manual?: boolean;
@@ -41,9 +42,14 @@ export interface HSelectProps
   isList?: boolean;
   addonBefore?: React.ReactNode;
   addonAfter?: React.ReactNode;
+  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 type PartialHSelectProps = Partial<HSelectProps>;

package/src/components/TDPicker/TimePicker.tsx

@@ -23,7 +23,7 @@ const Index = ({
         return !!disabledDate?.(currentDate, timeVal);
       }}
       style={{
-        width:"100%"
+        width: "100%",
       }}
       {...props}
     />

package/src/components/TDPicker/hooks.ts

@@ -88,7 +88,7 @@ export const useTimePickerValue = ({
   format,
 }: UseTimePickerValParams) => {
   return useMemo(() => {
-    const valStr=value?.toString()
+    const valStr = value?.toString();
     if (!valStr || !format) {
       return value;
     }

package/src/components/TextArea/index.tsx

@@ -9,7 +9,7 @@ export default ({
   autoSize = { minRows: 4, maxRows: 4 },
   bordered = true,
   className,
-  style={},
+  style = {},
   ...props
 }: HTextAreaProps) => {
   const noBorderClassName = useClassName("hw-text-area-no-border");
@@ -17,7 +17,7 @@ export default ({
   return (
     <Input.TextArea
       autoSize={autoSize}
-      style={{width:"100%",...style}}
+      style={{ width: "100%", ...style }}
       {...props}
       className={`${borderClassName} ${className}`}
     />

package/src/components/Upload/Btn.tsx

@@ -3,7 +3,7 @@ import type { IUpLoadProps } from "./modal";
 import React, { useMemo } from "react";
 import { Button } from "antd";
 
-export default ({ value, maxCount = 1, listType ,children}: IUpLoadProps) => {
+export default ({ value, maxCount = 1, listType, children }: IUpLoadProps) => {
   const len = value?.length || 0;
   const text = useMemo(() => {
     if (len === maxCount) {
@@ -19,13 +19,17 @@ export default ({ value, maxCount = 1, listType ,children}: IUpLoadProps) => {
       </div>
     );
   }
-  const loading=useMemo(()=>{
-     return value?.some(({status})=>{
-        return status==="uploading";
-     })
-  },[value]);
-  if (children){
-    return  React.cloneElement<any>((children as any),{loading});
+  const loading = useMemo(() => {
+    return value?.some(({ status }) => {
+      return status === "uploading";
+    });
+  }, [value]);
+  if (children) {
+    return React.cloneElement<any>(children as any, { loading });
   }
-  return <Button icon={<UploadOutlined />} loading={loading}>{text}</Button>;
+  return (
+    <Button icon={<UploadOutlined />} loading={loading}>
+      {text}
+    </Button>
+  );
 };

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

@@ -4,7 +4,7 @@ import type { RcFile } from "antd/lib/upload";
 import { useEffect, useMemo } from "react";
 import type { UploadFileStatus } from "antd/es/upload/interface";
 import { message } from "antd";
-import {useRequest} from "ahooks";
+import { useRequest } from "ahooks";
 
 interface SubReqParamsModal {
   request?: IUpLoadProps["request"];