@hw-component/form 1.6.1 → 1.6.3

package/lib/Select/index.js

@@ -23,7 +23,7 @@ var AllSelect = require('./components/AllSelect.js');
 var index = require('../hooks/index.js');
 var HFormConnect = require('../Form/HFormConnect.js');
 
-var _excluded = ["style", "mode", "options", "modeConfig", "value", "onChange", "fieldNames", "request", "manual", "optionLabelProp", "filterProvider", "optionFilterProp", "serviceSearch", "onSearch", "filterOption", "showSearch", "labelInValue", "noMatchItemRender", "allSelect", "addDispatchListener", "addFormat", "dispatch"],
+var _excluded = ["style", "mode", "options", "modeConfig", "value", "onChange", "fieldNames", "request", "manual", "optionLabelProp", "filterProvider", "optionFilterProp", "serviceSearch", "onSearch", "filterOption", "showSearch", "labelInValue", "noMatchItemRender", "allSelect", "addDispatchListener", "addFormat", "dispatch", "isList", "onPopupScroll"],
   _excluded2 = ["value", "label"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -58,6 +58,8 @@ var Index = function Index(_ref) {
     addDispatchListener = _ref.addDispatchListener;
     _ref.addFormat;
     var dispatch = _ref.dispatch,
+    isList = _ref.isList,
+    propsOnPopupScroll = _ref.onPopupScroll,
     props = _objectWithoutProperties(_ref, _excluded);
   var _ref2 = (modeConfig === null || modeConfig === void 0 ? void 0 : modeConfig[mode || ""]) || {},
     icon = _ref2.icon,
@@ -70,7 +72,7 @@ var Index = function Index(_ref) {
     filterOption: filterOption,
     serviceSearch: serviceSearch
   });
-  var _useOptionReq = norHooks.useOptionReq({
+  var _useSelectReq = norHooks.useSelectReq({
       options: options,
       manual: manual,
       fieldNames: fieldNames,
@@ -78,15 +80,17 @@ var Index = function Index(_ref) {
       serviceSearch: serviceSearch,
       showSearch: showSearch,
       onSearch: propsOnSearch,
-      dispatch: dispatch
+      dispatch: dispatch,
+      isList: isList
     }),
-    run = _useOptionReq.run,
-    loading = _useOptionReq.loading,
-    resultData = _useOptionReq.data,
-    error = _useOptionReq.error,
-    onSearch = _useOptionReq.onSearch,
-    mathShowSearch = _useOptionReq.mathShowSearch,
-    reload = _useOptionReq.reload;
+    run = _useSelectReq.run,
+    loading = _useSelectReq.loading,
+    resultData = _useSelectReq.data,
+    error = _useSelectReq.error,
+    onSearch = _useSelectReq.onSearch,
+    mathShowSearch = _useSelectReq.mathShowSearch,
+    reload = _useSelectReq.reload,
+    onPopupScroll = _useSelectReq.onPopupScroll;
   var data = index.useChangeOptions({
     options: resultData,
     fieldNames: fieldNames
@@ -132,7 +136,8 @@ var Index = function Index(_ref) {
     optionFilterProp: optionFilterProp,
     filterOption: selfFilterOption,
     showSearch: mathShowSearch,
-    labelInValue: true
+    labelInValue: true,
+    onPopupScroll: propsOnPopupScroll || onPopupScroll
   }, props), {}, {
     children: data === null || data === void 0 ? void 0 : data.map(function (item) {
       var optionValue = item.value,

package/lib/Select/modal.d.ts

@@ -3,7 +3,6 @@ import type React from "react";
 import type { PromiseFnResult } from "../modal";
 import type { addFormatItemModal, argsFn, DispatchModal } from "../Form/modal";
 export type OptionType = Record<string, any>;
-export type PartialHSelectProps = Partial<HSelectProps>;
 export type RenderFn = (data: OptionType) => React.ReactNode;
 interface ModeConfigItem {
     icon?: React.ReactNode | null;
@@ -14,9 +13,17 @@ export interface ModeConfig {
     tags?: ModeConfigItem;
 }
 type FilterProviderFn = (item: any) => string;
+type OptionsListType = OptionType[];
+export interface OptionsPageResultModal {
+    page: number;
+    size: number;
+    data: OptionsListType;
+    total: number;
+}
+export type OptionsDataType = OptionsListType | OptionsPageResultModal;
 export interface HSelectProps extends Omit<SelectProps, "options" | "placeholder"> {
     style?: React.CSSProperties;
-    request?: PromiseFnResult<any, OptionType[]>;
+    request?: PromiseFnResult<any, OptionsDataType>;
     manual?: boolean;
     modeConfig?: ModeConfig;
     filterProvider?: FilterProviderFn | string;
@@ -28,9 +35,11 @@ export interface HSelectProps extends Omit<SelectProps, "options" | "placeholder
     addFormat?: (format: Record<string, addFormatItemModal>) => void;
     placeholder?: string;
     dispatch?: DispatchModal;
+    isList?: boolean;
 }
 export interface FilterDataModal {
     value: any;
     index: number;
 }
+export type PartialHSelectProps = Partial<HSelectProps>;
 export {};

package/package.json

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

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

@@ -104,7 +104,7 @@ export default ({
       footer={footerComponent()}
     >
       <FormConfigProvider {...providerConfig}>
-        {contentRender ? contentRender(node, currentForm,params) : node}
+        {contentRender ? contentRender(node, currentForm, params) : node}
       </FormConfigProvider>
     </Drawer>
   );

package/src/components/DialogForm/ModalForm.tsx

@@ -98,7 +98,7 @@ export default ({
       footer={defaultFooter}
     >
       <FormConfigProvider {...providerConfig}>
-        {contentRender ? contentRender?.(node, currentForm,formParams) : node}
+        {contentRender ? contentRender?.(node, currentForm, formParams) : node}
       </FormConfigProvider>
     </Modal>
   );

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

@@ -30,7 +30,7 @@ export const useDefaultRender = (
       Component = (dom as ConfigComponentModal).Component;
     }
     const node = Component && (
-      <Component {...componentProps} {...itemProps} form={form}/>
+      <Component {...componentProps} {...itemProps} form={form} />
     );
     if (render) {
       const resultNode = render(props, node, form);

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

@@ -86,7 +86,7 @@ export default () => {
         return newValue;
       }, //转化方法
       dispatch(...args) {
-        const [action,...dispatchArgs]=args;
+        const [action, ...dispatchArgs] = args;
         const { key, name } = action;
         const items = dispatchSourceData[key];
         if (!items) {

package/src/components/Form/index.tsx

@@ -1,4 +1,4 @@
-import {Form, Input, Row} from "antd";
+import { Form, Input, Row } from "antd";
 import type { HFormProps, HItemProps } from "./modal";
 import Item from "./FormItem";
 import { useCurrentForm, useInfoReq, useValuesChange } from "./hooks";
@@ -62,9 +62,9 @@ export default ({
       hForm.removeDispatchListener();
     };
   }, []);
-  const defaultOnPressEnter=()=>{
+  const defaultOnPressEnter = () => {
     hForm.submit();
-  }
+  };
   return (
     <PageHandler
       loading={infoLoading}
@@ -93,7 +93,7 @@ export default ({
                 colon: itemColon,
               } = itemData;
               const defaultItemProps = {
-                onPressEnter:defaultOnPressEnter,
+                onPressEnter: defaultOnPressEnter,
                 ...formItemProps,
                 ...itemProps,
               };

package/src/components/Input/ButtonInput.tsx

@@ -14,7 +14,7 @@ const Index: React.FC<HButtonInputProps> = ({
   const {
     onClick,
     type = "primary",
-      ghost=true,
+    ghost = true,
     loading: btnLoading,
     ...oProps
   } = buttonProps;
@@ -42,7 +42,7 @@ const Index: React.FC<HButtonInputProps> = ({
         type={type}
         onClick={click}
         loading={loading || btnLoading}
-        style={{ marginLeft: 8,borderRadius:4 }}
+        style={{ marginLeft: 8, borderRadius: 4 }}
         ghost={ghost}
         {...oProps}
       >

package/src/components/Select/hooks/changeHooks.tsx

@@ -97,9 +97,12 @@ const tag = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {
   return resultProvider(newData, oldData, value);
 }; //tags模式
 const matchNotFind = (
-  { options, value, mode, noMatchItemRender }: PartialHSelectProps,
+  { options, value, mode, noMatchItemRender ,labelInValue}: PartialHSelectProps,
   oldVale?: OptionType[]
 ) => {
+ if (labelInValue){
+    return  value;
+ }
   if (!mode) {
     return single({ options, value, noMatchItemRender });
   }
@@ -142,20 +145,20 @@ export const useValueChange = (params: PartialHSelectProps) => {
     onChange(newChangeVal, subItemOps);
   };
   useEffect(() => {
-    if (mode === "tags") {
-      setVal(value);
-      return;
-    }
     if (value === null || value === undefined) {
       setVal(undefined);
       return;
     }
+    if (mode === "tags") {
+      setVal(value);
+      return;
+    }
     if (options) {
       setVal((oldVale) => {
         return matchNotFind(params, oldVale);
       });
     }
-  }, [value, options, mode, noMatchItemRender]);
+  }, [value, options, mode, noMatchItemRender,labelInValue]);
   return {
     val,
     change,

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

@@ -1,36 +1,84 @@
-import { useEffect, useState } from "react";
+import {useEffect, useMemo, useState} from "react";
 import type {
   OptionType,
   PartialHSelectProps,
-} from "@/components/Select/modal";
+} from "../modal";
 import { useRequest } from "ahooks";
 import { useFormContext } from "../../Form/Context";
+import {OptionsPageResultModal} from "../modal";
 
 interface ParamsModal {
   options?: OptionType[];
   params?: any;
 }
-export const useOptionReq = ({
-  manual,
+const useSaveParams=()=>{
+  const saveParams=useMemo(()=>{
+    return {
+      listParams:{
+        isEnd:false,
+        page:1,
+        size:100,
+        reqParams:{}
+      }
+    }
+  },[]);
+  const resetSaveParams=()=>{
+      saveParams.listParams={
+        isEnd:false,
+        page:1,
+        size:100,
+        reqParams:{}
+      }
+  }
+  const nextPage=(data:OptionsPageResultModal)=>{
+    const {size,total,page}=data;
+    saveParams.listParams.size=size;
+    saveParams.listParams.page=page+1;
+    saveParams.listParams.isEnd=size*page>=total;
+  }
+  return {
+    saveParams,
+    resetSaveParams,
+    nextPage
+  }
+}
+const useOptionsRequest = ({
   request,
-  options,
-  serviceSearch,
-  showSearch,
-  onSearch: propsOnSearch,
   dispatch = {},
+  manual,
+  options,
+  isList
 }: PartialHSelectProps) => {
-  const { manual: dispatchManual } = dispatch;
+  const {saveParams,resetSaveParams,nextPage}=useSaveParams();
   const { form } = useFormContext();
+  const { manual: dispatchManual } = dispatch;
   const [data, setData] = useState<OptionType[] | undefined>();
+  const paramsProvider=(params:Record<string, any>)=>{
+    if (isList){
+      const page=saveParams.listParams.page;
+      const size=saveParams.listParams.size;
+      return  {
+        ...params,
+        page,
+        size
+      }
+    }
+    return params;
+  }
   const { run, loading, error } = useRequest(
-    async (requestParams = {}) => {
-      const { params = {}, values, type = "init" } = requestParams;
+    async (requestParams = {},type="init") => {
+      const { params = saveParams.listParams.reqParams, values} = requestParams;
       const formData = values || form?.getFieldsValue();
       if (type === "init") {
+        resetSaveParams();
         setData(undefined);
       }
+      saveParams.listParams.reqParams=params;
+      if (isList&&saveParams.listParams.isEnd){
+        return data;
+      }
       if (request) {
-        return request(params, formData);
+        return request(paramsProvider(params), formData);
       }
       return Promise.resolve(options);
     },
@@ -38,12 +86,48 @@ export const useOptionReq = ({
       manual: dispatchManual === false ? true : manual,
       debounceInterval: 300,
       onSuccess: (resultData) => {
-        setData(resultData);
+        if (Array.isArray(resultData)||!resultData){
+         return  setData(resultData);
+        }
+        const oldData=data||[];
+        const {data:resultOption}=resultData;
+        const op = resultOption||[];
+        nextPage(resultData);
+        setData([
+            ...oldData,
+            ...op
+        ]);
       },
     }
   );
+  return {
+    loading,
+    run,
+    error,
+    data,
+    setData,
+  };
+};
+
+export const useSelectReq = ({
+  manual,
+  request,
+  options,
+  serviceSearch,
+  showSearch,
+  onSearch: propsOnSearch,
+  dispatch = {},
+  isList,
+}: PartialHSelectProps) => {
+  const { run, loading, error, data, setData } = useOptionsRequest({
+    request,
+    dispatch,
+    manual,
+    options,
+    isList
+  });
   const reload = (reloadParams?: ParamsModal) => {
-    const { options: changeOpts, params }=reloadParams||{};
+    const { options: changeOpts, params } = reloadParams || {};
     if (changeOpts) {
       return setData(changeOpts);
     }
@@ -61,6 +145,13 @@ export const useOptionReq = ({
       setData(options);
     }
   }, [options]);
+  const onPopupScroll=(e)=>{
+    const {target} = e;
+    const changeTarget=(target as any);
+    if (changeTarget.scrollTop + changeTarget.offsetHeight === changeTarget.scrollHeight) {
+      run({},"page");
+    }
+  }
   const mathShowSearch = showSearch || serviceSearch;
   return {
     run,
@@ -70,6 +161,7 @@ export const useOptionReq = ({
     onSearch: mathShowSearch ? onSearch : propsOnSearch,
     mathShowSearch: showSearch || serviceSearch,
     reload,
+    onPopupScroll:isList?onPopupScroll:undefined
   };
 };
 
@@ -78,9 +170,7 @@ export const useFilterOption = ({
   serviceSearch,
 }: PartialHSelectProps) => {
   if (serviceSearch) {
-    return () => {
-      return true;
-    };
+    return false
   }
   return filterOption;
 };

package/src/components/Select/index.tsx

@@ -1,6 +1,6 @@
 import { Select } from "antd";
 import React from "react";
-import { useFilterOption, useOptionReq } from "./hooks/norHooks";
+import {useFilterOption, useSelectReq} from "./hooks/norHooks";
 import { useValueChange } from "./hooks/changeHooks";
 import type { HSelectProps } from "./modal";
 import { defaultModeConfig, defaultSelectConfig } from "./defaultConfig";
@@ -33,6 +33,8 @@ const Index: React.FC<HSelectProps> = ({
   addDispatchListener,
   addFormat,
   dispatch,
+  isList,
+  onPopupScroll:propsOnPopupScroll,
   ...props
 }) => {
   const { icon, render } = modeConfig?.[mode || ""] || {};
@@ -46,7 +48,8 @@ const Index: React.FC<HSelectProps> = ({
     onSearch,
     mathShowSearch,
     reload,
-  } = useOptionReq({
+    onPopupScroll
+  } = useSelectReq({
     options,
     manual,
     fieldNames,
@@ -55,6 +58,7 @@ const Index: React.FC<HSelectProps> = ({
     showSearch,
     onSearch: propsOnSearch,
     dispatch,
+    isList
   }); //options
 
   const data = useChangeOptions({ options: resultData, fieldNames });
@@ -103,6 +107,7 @@ const Index: React.FC<HSelectProps> = ({
       filterOption={selfFilterOption}
       showSearch={mathShowSearch}
       labelInValue={true}
+      onPopupScroll={propsOnPopupScroll||onPopupScroll}
       {...props}
     >
       {data?.map((item) => {

package/src/components/Select/modal.ts

@@ -2,8 +2,8 @@ import type { SelectProps } from "antd";
 import type React from "react";
 import type { PromiseFnResult } from "../modal";
 import type { addFormatItemModal, argsFn, DispatchModal } from "../Form/modal";
+
 export type OptionType = Record<string, any>;
-export type PartialHSelectProps = Partial<HSelectProps>;
 export type RenderFn = (data: OptionType) => React.ReactNode;
 
 interface ModeConfigItem {
@@ -15,10 +15,20 @@ export interface ModeConfig {
   tags?: ModeConfigItem;
 }
 type FilterProviderFn = (item: any) => string;
+type OptionsListType = OptionType[];
+export interface OptionsPageResultModal {
+  page: number;
+  size: number;
+  data: OptionsListType;
+  total:number;
+}
+export type OptionsDataType =
+  | OptionsListType
+  | OptionsPageResultModal
 export interface HSelectProps
   extends Omit<SelectProps, "options" | "placeholder"> {
   style?: React.CSSProperties;
-  request?: PromiseFnResult<any, OptionType[]>;
+  request?: PromiseFnResult<any, OptionsDataType>;
   manual?: boolean;
   modeConfig?: ModeConfig;
   filterProvider?: FilterProviderFn | string; //筛选字段默认为label
@@ -30,8 +40,10 @@ export interface HSelectProps
   addFormat?: (format: Record<string, addFormatItemModal>) => void;
   placeholder?: string;
   dispatch?: DispatchModal;
+  isList?:boolean
 }
 export interface FilterDataModal {
   value: any;
   index: number;
 }
+export type PartialHSelectProps = Partial<HSelectProps>;

package/src/components/Submit/components.tsx

@@ -7,9 +7,13 @@ import type {
 } from "@/components/Submit/index";
 interface ControlFooterProps extends ISubmitProps {
   action: SubmitBarExtraType;
-  style?:React.CSSProperties
+  style?: React.CSSProperties;
 }
-function ResetBtn({ form, style={borderRadius:4},...props }:Omit<ControlFooterProps, 'action'>) {
+function ResetBtn({
+  form,
+  style = { borderRadius: 4 },
+  ...props
+}: Omit<ControlFooterProps, "action">) {
   return (
     <Button
       {...props}
@@ -28,7 +32,7 @@ function SubBtn({
   form,
   text = "提交",
   loading,
-  style={borderRadius:4},
+  style = { borderRadius: 4 },
   ...props
 }: ISubmitProps) {
   const { loading: formSubLoading = loading } = useFormContext();

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

@@ -9,14 +9,14 @@ import { message } from "antd";
 interface SubReqParamsModal {
   request?: (
     file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
-  ) => Promise<{ url: string ,thumbUrl?:string}>;
+  ) => Promise<{ url: string; thumbUrl?: string }>;
   file: RcFile;
 }
 interface ResultModal {
   url: string;
   status: UploadFileStatus;
   uid?: string;
-  thumbUrl?:string;
+  thumbUrl?: string;
 }
 const subReq = async ({
   request,
@@ -29,7 +29,7 @@ const subReq = async ({
     };
   }
   try {
-    const { url ,thumbUrl} = await request(file);
+    const { url, thumbUrl } = await request(file);
     return {
       url,
       thumbUrl,
@@ -44,19 +44,19 @@ const subReq = async ({
   }
 };
 const fileListProvider = (changeFile: ResultModal, files?: UploadFile[]) => {
-  const { status, url, uid,thumbUrl } = changeFile;
+  const { status, url, uid, thumbUrl } = changeFile;
   if (status === "error") {
     return files?.filter((item) => {
       return item.uid !== uid;
     });
   }
   return files?.map((item) => {
-    const fileDefaultThumbUrl=item.thumbUrl||thumbUrl;
+    const fileDefaultThumbUrl = item.thumbUrl || thumbUrl;
     const resultUrl = url || item.thumbUrl;
     if (item.uid === uid) {
       item.status = status;
       item.response = { url: resultUrl };
-      item.thumbUrl=fileDefaultThumbUrl;
+      item.thumbUrl = fileDefaultThumbUrl;
       return item;
     }
     return item;

package/src/pages/DrawerForm/index.tsx

@@ -13,6 +13,19 @@ const data = [
       { label: "选择2", value: 1 },
     ],
   },
+  {
+    label: "选择",
+    name: "select",
+    type: "select",
+    helper: "select",
+    itemProps: {
+      mode: "tags",
+      options: [
+        { label: "选择1", value: 0 },
+        { label: "选择2", value: 1 },
+      ],
+    },
+  },
   {
     label: "地址文件",
     name: "urlUpload",
@@ -71,7 +84,11 @@ export default () => {
       </Button>
       <Button
         onClick={() => {
-          modalForm.show();
+          modalForm.show({
+            initialValues: {
+              select: null,
+            },
+          });
         }}
       >
         打开

package/src/pages/Form/index.tsx

@@ -49,25 +49,28 @@ const formData = (options) => {
       className: "hdjd",
       type: "select",
       name: "test321",
-        itemProps: {
-          options:[{
-              value:"选项1",
-              key:1
-          },{
-              value:"选项2",
-              key:2
-          }],
-            showSearch:true
-        }
-    },
-      {
-          label: "测试12312",
-          className: "hdjd",
-          name: "test123",
-      },
-      {
-         type: "submit"
+      itemProps: {
+        options: [
+          {
+            value: "选项1",
+            key: 1,
+          },
+          {
+            value: "选项2",
+            key: 2,
+          },
+        ],
+        showSearch: true,
       },
+    },
+    {
+      label: "测试12312",
+      className: "hdjd",
+      name: "test123",
+    },
+    {
+      type: "submit",
+    },
   ];
 };
 function Ttta({ form }) {