@hw-component/form 1.6.2 → 1.6.4

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.2",
+  "version": "1.6.4",
   "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

@@ -1,113 +1,9 @@
 import type {
-  OptionType,
   PartialHSelectProps,
 } from "@/components/Select/modal";
 import { useEffect, useState } from "react";
-import type { FilterDataModal } from "@/components/Select/modal";
 import { itemOpProvider } from "../utils";
-
-const single = ({ options, value, noMatchItemRender }: PartialHSelectProps) => {
-  const newOptions = options || [];
-  const index = newOptions.findIndex((item) => {
-    return item.value === value;
-  });
-  if (index !== -1) {
-    const { label } = newOptions[index];
-    return {
-      value,
-      label,
-    };
-  }
-  return {
-    value,
-    label: noMatchItemRender?.({ value }) || value,
-  };
-}; //单选模式
-const findNewValInOldVal = (val, oldVal?: any[]) => {
-  if (!oldVal) {
-    return -1;
-  }
-  return oldVal.findIndex((item) => {
-    return item.value === val;
-  });
-}; //查询新增的 value
-const sourceDataProvider = (
-  { options, value }: PartialHSelectProps,
-  oldVal?: any[]
-) => {
-  const oldData: FilterDataModal[] = [];
-  const newData: FilterDataModal[] = [];
-  value.forEach((item, i) => {
-    const index = findNewValInOldVal(item, oldVal);
-    if (index === -1) {
-      newData.push({
-        value: item,
-        index: i,
-      });
-      return;
-    }
-    const newVal = oldVal?.[index];
-    oldData.push({
-      ...newVal,
-      index: i,
-    });
-  });
-  return {
-    oldData,
-    newData,
-  };
-}; //创建新旧数据
-const resultProvider = (
-  newData: FilterDataModal[],
-  oldData: FilterDataModal[],
-  value: any[]
-) => {
-  const newResult = new Array(value.length);
-  oldData.forEach((item) => {
-    const { index, ...val } = item;
-    newResult[index] = {
-      ...val,
-    };
-  });
-  newData.forEach((item) => {
-    const { index, ...val } = item;
-    newResult[index] = {
-      ...val,
-    };
-  });
-  return newResult;
-};
-const multiple = (
-  { options, value, noMatchItemRender }: PartialHSelectProps,
-  oldVal?: any[]
-) => {
-  const { newData, oldData } = sourceDataProvider({ options, value }, oldVal);
-  const newMatchVal = newData.map((item) => {
-    const { value: itemVal, index } = item;
-    const newItem = single({ options, value: itemVal, noMatchItemRender });
-    return {
-      ...newItem,
-      index,
-    };
-  });
-  return resultProvider(newMatchVal, oldData, value);
-}; //多选
-const tag = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {
-  const { newData, oldData } = sourceDataProvider({ options, value }, oldVal);
-  return resultProvider(newData, oldData, value);
-}; //tags模式
-const matchNotFind = (
-  { options, value, mode, noMatchItemRender }: PartialHSelectProps,
-  oldVale?: OptionType[]
-) => {
-  if (!mode) {
-    return single({ options, value, noMatchItemRender });
-  }
-  if (mode === "multiple") {
-    return multiple({ options, value, noMatchItemRender }, oldVale) || [];
-  }
-  return tag({ options, value }, oldVale);
-}; //不匹配
+import {matchNotFind} from './util'
 export const useValueChange = (params: PartialHSelectProps) => {
   const {
     labelInValue,
@@ -155,9 +51,36 @@ export const useValueChange = (params: PartialHSelectProps) => {
         return matchNotFind(params, oldVale);
       });
     }
-  }, [value, options, mode, noMatchItemRender]);
+  }, [value, options, mode]);
+  const itemMaker=(item)=>{
+     const {value:itemVal,label,noMatch}=item;
+     if (noMatch){
+       return {
+         value:itemVal,
+         label: noMatchItemRender?.({ value }) || value,
+       }
+     }
+     return  {
+       value:itemVal,
+       label
+     }
+  }
+  const valuesMaker=()=>{
+     if (labelInValue){
+       return val;
+     }
+     if (!val){
+       return  val;
+     }
+     if (Array.isArray(val)){
+        return val.map((item)=>{
+            return itemMaker(item);
+        })
+     }
+    return itemMaker(val);
+  }
   return {
-    val,
+    val:valuesMaker(),
     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/hooks/util.ts

@@ -0,0 +1,109 @@
+import {FilterDataModal, OptionType, PartialHSelectProps} from "@/components/Select/modal";
+
+const findNewValInOldVal = (val, oldVal?: any[]) => {
+    if (!oldVal) {
+        return -1;
+    }
+    return oldVal.findIndex((item) => {
+        return item.value === val;
+    });
+}; //查询新增的 value
+
+const sourceDataProvider = (
+    { value }: PartialHSelectProps,
+    oldVal?: any[]
+) => {
+    const oldData: FilterDataModal[] = [];
+    const newData: FilterDataModal[] = [];
+    value.forEach((item, i) => {
+        const index = findNewValInOldVal(item, oldVal);
+        if (index === -1) {
+            newData.push({
+                value: item,
+                index: i,
+            });
+            return;
+        }
+        const newVal = oldVal?.[index];
+        oldData.push({
+            ...newVal,
+            index: i,
+        });
+    });
+    return {
+        oldData,
+        newData,
+    };
+}; //创建新旧数据
+
+
+const single = ({ options, value }: PartialHSelectProps) => {
+    const newOptions = options || [];
+    const index = newOptions.findIndex((item) => {
+        return item.value === value;
+    });
+    if (index !== -1) {
+        const { label } = newOptions[index];
+        return {
+            value,
+            label,
+        };
+    }
+    return {
+        value,
+        label:value,
+        noMatch:true
+    };
+}; //单选模式
+const resultProvider = (
+    newData: FilterDataModal[],
+    oldData: FilterDataModal[],
+    value: any[]
+) => {
+    const newResult = new Array(value.length);
+    oldData.forEach((item) => {
+        const { index, ...val } = item;
+        newResult[index] = {
+            ...val,
+        };
+    });
+    newData.forEach((item) => {
+        const { index, ...val } = item;
+        newResult[index] = {
+            ...val,
+        };
+    });
+    return newResult;
+};
+const multiple = (
+    { options, value }: PartialHSelectProps,
+    oldVal?: any[]
+) => {
+    const { newData, oldData } = sourceDataProvider({ value }, oldVal);
+    const newMatchVal = newData.map((item) => {
+        const { value: itemVal, index } = item;
+        const newItem = single({ options, value: itemVal });
+        return {
+            ...newItem,
+            index,
+        };
+    });
+    return resultProvider(newMatchVal, oldData, value);
+}; //多选
+
+const tag = ({ options, value }: PartialHSelectProps, oldVal?: any[]) => {
+    const { newData, oldData } = sourceDataProvider({ options, value }, oldVal);
+    return resultProvider(newData, oldData, value);
+}; //tags模式
+export const matchNotFind = (
+    { options, value, mode }: PartialHSelectProps,
+    oldVale?: OptionType[]
+) => {
+    if (!mode) {
+        return single({ options, value });
+    }
+    if (mode === "multiple") {
+        return multiple({ options, value }, oldVale) || [];
+    }
+    return tag({ options, value }, oldVale);
+}; //不匹配

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) => {