@nickeylin/antd-mobile-pro 2.0.0

package/dist/cjs/components/pro-list/pro-list.js

@@ -0,0 +1,559 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pro-list/pro-list.tsx
+var pro_list_exports = {};
+__export(pro_list_exports, {
+  default: () => pro_list_default
+});
+module.exports = __toCommonJS(pro_list_exports);
+var import_rc_utils = require("@nickeylin/rc-utils");
+var import_ahooks = require("ahooks");
+var import_antd_mobile = require("antd-mobile");
+var import_antd_mobile_icons = require("antd-mobile-icons");
+var import_native_props = require("antd-mobile/es/utils/native-props");
+var import_validate = require("antd-mobile/es/utils/validate");
+var import_classnames = __toESM(require("classnames"));
+var import_react = require("react");
+var import_bem = require("../../utils/bem");
+var import_dev_log = require("../../utils/dev-log");
+var import_config_provider = require("../config-provider");
+var import_error_block = __toESM(require("../error-block"));
+var import_page_context = require("../page/page-context");
+var import_helper = require("./helper");
+var import_pagination_toolbar = __toESM(require("./pagination-toolbar"));
+var import_selected_rows_summary = __toESM(require("./selected-rows-summary"));
+var bem = (0, import_bem.cn)("pro-list");
+var defaultPageSize = 15;
+function ProList(props) {
+  const {
+    search,
+    toolbar: toolbarProp,
+    rowKey = "key",
+    renderItem,
+    pagination,
+    params: paramsProp,
+    request,
+    manual,
+    errorProps,
+    emptyProps,
+    rowSelection,
+    actionRef,
+    children,
+    filterSearch,
+    fillMaxPageHeight,
+    style: styleProp
+  } = props;
+  const { locale } = (0, import_config_provider.useConfig)();
+  const {
+    type: paginationType = "infinite",
+    pageIndex: propPageIndex = 1,
+    pageSize = defaultPageSize
+  } = pagination === false ? { type: "none" } : pagination ?? {};
+  const { inPage, headerSize, footerSize } = (0, import_page_context.usePage)();
+  const [pageState, setPageState] = (0, import_ahooks.useSetState)({ pageIndex: propPageIndex, pageSize });
+  const innerListStyle = (0, import_react.useMemo)(() => {
+    const result = {};
+    if (inPage && fillMaxPageHeight) {
+      const extraHeight = ((headerSize == null ? void 0 : headerSize.height) ?? 0) + ((footerSize == null ? void 0 : footerSize.height) ?? 0);
+      result["--extra-height"] = `${extraHeight}px`;
+      result.height = "calc(var(--page-height, 100vh) - var(--extra-height))";
+    }
+    return result;
+  }, [fillMaxPageHeight, footerSize == null ? void 0 : footerSize.height, headerSize == null ? void 0 : headerSize.height, inPage]);
+  const [hasMore, setHasMore] = (0, import_react.useState)(true);
+  const [total, setTotal] = (0, import_react.useState)(0);
+  const [searchKeyword, setSearchKeyword] = (0, import_react.useState)(
+    search ? search.defaultValue ?? "" : ""
+  );
+  const listRef = (0, import_react.useRef)(null);
+  const [localLoading, setLocalLoading] = (0, import_react.useState)(false);
+  const {
+    data,
+    loading: requestLoading,
+    run,
+    runAsync,
+    error
+  } = (0, import_ahooks.useRequest)(
+    async (pageIndex = 1, keywordParam) => {
+      const keyword = !keywordParam && !filterSearch ? searchKeyword : keywordParam ?? "";
+      const result = { total: 0, rows: [] };
+      const params = {
+        ...paramsProp,
+        keyword,
+        pageInfo: { page: pageIndex, rows: pageSize }
+      };
+      if (request) {
+        const d = await request(params);
+        result.total = d.records;
+        result.rows = d.rows;
+      }
+      setTotal(result.total);
+      setPageState({ pageIndex });
+      setHasMore(result.rows.length == pageSize);
+      if (paginationType === "infinite") {
+        return pageIndex == 1 ? result.rows : [...data ?? [], ...result.rows];
+      } else {
+        return result.rows;
+      }
+    },
+    {
+      manual,
+      debounceWait: 300
+    }
+  );
+  const [selectedRowKeys, setSelectedRowKeys] = (0, import_rc_utils.useMergedState)(
+    (rowSelection == null ? void 0 : rowSelection.defaultSelectedRowKeys) ?? [],
+    {
+      value: rowSelection == null ? void 0 : rowSelection.selectedRowKeys
+    }
+  );
+  const tempSelectedRowsRef = (0, import_react.useRef)([]);
+  (0, import_react.useEffect)(() => {
+    tempSelectedRowsRef.current = ((rowSelection == null ? void 0 : rowSelection.selectedRows) ?? []).map(
+      (r, index) => ({
+        _key: (0, import_helper.getRowKey)(rowKey ?? "key", r, index),
+        ...r
+      })
+    );
+  }, [rowKey, rowSelection == null ? void 0 : rowSelection.selectedRows]);
+  const stateRefs = (0, import_react.useRef)({ data });
+  stateRefs.current = { data };
+  const loading = (0, import_react.useMemo)(
+    () => props.loading || localLoading || requestLoading,
+    [props.loading, requestLoading, localLoading]
+  );
+  const [rowLoadingMap, setRowLoadingMap] = (0, import_ahooks.useSetState)({});
+  const getRows = (0, import_ahooks.useMemoizedFn)((rowKeys) => {
+    return rowKeys.map((k) => {
+      const keyedData = (data ?? []).map((d, dIndex) => {
+        const _key = (0, import_helper.getRowKey)(rowKey, d, dIndex);
+        return { _key, ...d };
+      });
+      const result = [...tempSelectedRowsRef.current, ...keyedData].find(
+        (d) => {
+          return k === d._key;
+        }
+      );
+      if (result) {
+      }
+      return result;
+    }).filter((d) => !!d);
+  });
+  const onListItemClick = (0, import_ahooks.useMemoizedFn)(async (item, index) => {
+    var _a, _b;
+    if (!rowSelection)
+      return;
+    const key = (0, import_helper.getRowKey)(rowKey ?? "key", item, index);
+    if (!key) {
+      (0, import_dev_log.devWarning)("ProList", `Invalid rowKey ${key}`);
+      return;
+    }
+    const rowLoading = rowLoadingMap[key];
+    if (rowLoading)
+      return;
+    const idx = selectedRowKeys.indexOf(key);
+    let nextSelectedRowKeys = [...selectedRowKeys];
+    let selected = true;
+    const beforeSelect = async () => {
+      if (rowSelection.onBeforeSelect) {
+        const res = rowSelection.onBeforeSelect(item);
+        let flag;
+        if ((0, import_validate.isPromise)(res)) {
+          setRowLoadingMap({ [key]: true });
+          try {
+            flag = await res;
+            setRowLoadingMap({ [key]: false });
+          } catch (error2) {
+            setRowLoadingMap({ [key]: false });
+            return;
+          }
+        } else {
+          flag = res;
+        }
+        return flag;
+      }
+      return true;
+    };
+    if (rowSelection.type == "single") {
+      if (idx !== 0) {
+        const flag = await beforeSelect();
+        if (!flag)
+          return;
+        nextSelectedRowKeys = [key];
+        tempSelectedRowsRef.current = [{ ...item, _key: key }];
+      } else {
+        return;
+      }
+    } else if (rowSelection.type == "multi") {
+      if (idx >= 0) {
+        nextSelectedRowKeys.splice(idx, 1);
+        selected = false;
+      } else {
+        const flag = await beforeSelect();
+        if (!flag)
+          return;
+        tempSelectedRowsRef.current.push({ ...item, _key: key });
+        nextSelectedRowKeys.push(key);
+      }
+    }
+    const selectedRows = getRows(nextSelectedRowKeys);
+    setSelectedRowKeys(nextSelectedRowKeys);
+    (_a = rowSelection.onSelect) == null ? void 0 : _a.call(rowSelection, item, selected, selectedRows);
+    (_b = rowSelection.onChange) == null ? void 0 : _b.call(rowSelection, nextSelectedRowKeys, selectedRows, {
+      type: rowSelection.type
+    });
+  });
+  const isRowSelected = (0, import_react.useCallback)(
+    (item, index) => {
+      if (!rowSelection) {
+        return false;
+      }
+      const key = (0, import_helper.getRowKey)(rowKey ?? "key", item, index);
+      if (!key)
+        return false;
+      return selectedRowKeys.indexOf(key) >= 0;
+    },
+    [rowKey, rowSelection, selectedRowKeys]
+  );
+  const toolbar = (0, import_react.useMemo)(() => {
+    if ((toolbarProp === null || toolbarProp === void 0) && !(rowSelection == null ? void 0 : rowSelection.showAllSelected)) {
+      return null;
+    }
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, toolbarProp, (rowSelection == null ? void 0 : rowSelection.showAllSelected) && /* @__PURE__ */ React.createElement(
+      import_selected_rows_summary.default,
+      {
+        selectedRows: getRows(selectedRowKeys),
+        renderItem,
+        onDelete: (item) => {
+          var _a;
+          const nextSelectedRowKeys = [...selectedRowKeys];
+          const index = nextSelectedRowKeys.indexOf(item._key);
+          if (index < 0)
+            return;
+          nextSelectedRowKeys.splice(index, 1);
+          setSelectedRowKeys(nextSelectedRowKeys);
+          (_a = rowSelection.onChange) == null ? void 0 : _a.call(
+            rowSelection,
+            nextSelectedRowKeys,
+            getRows(nextSelectedRowKeys),
+            {
+              type: rowSelection.type
+            }
+          );
+        },
+        onClear: async () => {
+          var _a;
+          setSelectedRowKeys([]);
+          (_a = rowSelection.onChange) == null ? void 0 : _a.call(rowSelection, [], [], { type: rowSelection.type });
+          return true;
+        }
+      }
+    ));
+  }, [
+    getRows,
+    renderItem,
+    rowSelection,
+    selectedRowKeys,
+    setSelectedRowKeys,
+    toolbarProp
+  ]);
+  const hasHeader = (0, import_react.useMemo)(
+    () => search !== false || !!props.header || !!toolbar,
+    [search, props.header, toolbar]
+  );
+  const [filteredData, setFilteredData] = (0, import_react.useState)(null);
+  const localSearch = (keywords) => {
+    let result = null;
+    if (!filterSearch)
+      result = null;
+    else if (paginationType === "infinite") {
+      (0, import_dev_log.devWarning)(
+        "ProList",
+        "filterSearch not support in `infinite` pagination"
+      );
+      result = null;
+    } else if (!keywords) {
+      result = data ?? null;
+    } else {
+      result = (data == null ? void 0 : data.filter((d) => filterSearch(keywords, d))) ?? null;
+    }
+    setFilteredData(result);
+  };
+  const reloadAsync = (0, import_react.useCallback)(
+    async (keyword) => {
+      setLocalLoading(true);
+      try {
+        const results = await runAsync(1, keyword);
+        setLocalLoading(false);
+        return results;
+      } catch (error2) {
+        setLocalLoading(false);
+        throw error2;
+      }
+    },
+    [runAsync]
+  );
+  const renderSearch = () => {
+    if (search === false)
+      return null;
+    const {
+      onSearch,
+      onClear,
+      onChange,
+      value: _,
+      ...restSearchProps
+    } = search ?? {};
+    return /* @__PURE__ */ React.createElement("div", { className: bem("header-search") }, /* @__PURE__ */ React.createElement(
+      import_antd_mobile.SearchBar,
+      {
+        value: searchKeyword,
+        onSearch: (val) => {
+          if (filterSearch) {
+            localSearch(val);
+          } else {
+            reloadAsync(val);
+          }
+          onSearch == null ? void 0 : onSearch(val);
+        },
+        onChange: (val) => {
+          setSearchKeyword(val);
+          onChange == null ? void 0 : onChange(val);
+        },
+        onClear: async () => {
+          if (filterSearch) {
+            localSearch("");
+          } else {
+            reloadAsync("");
+          }
+          onClear == null ? void 0 : onClear();
+        },
+        placeholder: locale.ProList.keywordsPlaceholder,
+        ...restSearchProps ?? {}
+      }
+    ));
+  };
+  const renderContent = () => {
+    const errorBlockPaddingTop = "calc(50vh - var(--image-height-full-page) - var(--extra-height))";
+    if (error) {
+      const { render, style, ...restErrorProps } = errorProps ?? {};
+      const mergedErrorProps = {
+        fullPage: true,
+        children: /* @__PURE__ */ React.createElement(
+          import_antd_mobile.Button,
+          {
+            color: "primary",
+            onClick: () => {
+              run(1);
+            }
+          },
+          locale.ProList.retry
+        ),
+        style: {
+          paddingTop: errorBlockPaddingTop,
+          ...style
+        },
+        ...restErrorProps
+      };
+      return (render == null ? void 0 : render(error, mergedErrorProps)) ?? /* @__PURE__ */ React.createElement(import_error_block.default, { description: error.message, ...mergedErrorProps });
+    }
+    if (!children && !renderItem) {
+      return /* @__PURE__ */ React.createElement(
+        import_error_block.default,
+        {
+          title: locale.ProList.invalidRenderParamTitle,
+          fullPage: true,
+          description: locale.ProList.invalidRenderParamMessage,
+          style: { paddingTop: errorBlockPaddingTop }
+        }
+      );
+    }
+    const dataSource = filteredData ?? data;
+    if (dataSource && dataSource.length === 0 && !loading) {
+      const { render, style, ...restProps } = emptyProps ?? {};
+      const mergedProps = {
+        fullPage: true,
+        status: "empty",
+        title: locale.common.noData,
+        description: "",
+        style: {
+          paddingTop: errorBlockPaddingTop,
+          ...style
+        },
+        ...restProps
+      };
+      return (render == null ? void 0 : render(mergedProps)) ?? /* @__PURE__ */ React.createElement(import_error_block.default, { ...mergedProps });
+    }
+    if (dataSource && dataSource.length > 0) {
+      return /* @__PURE__ */ React.createElement(
+        import_antd_mobile.PullToRefresh,
+        {
+          onRefresh: async () => {
+            await runAsync(1);
+          }
+        },
+        children ? children(dataSource, selectedRowKeys, {
+          toggleSelectItem: onListItemClick
+        }) : /* @__PURE__ */ React.createElement(import_antd_mobile.List, { mode: props.mode, ref: listRef }, dataSource.map((item, index) => {
+          if (!renderItem)
+            return null;
+          const key = (0, import_helper.getRowKey)(rowKey, item, index);
+          const selected = isRowSelected(item, index);
+          const rowLoading = rowLoadingMap[key];
+          const itemNode = renderItem(item, index, selected) ?? {};
+          const { onClick, ...listItemProps } = itemNode;
+          const renderArrow = () => {
+            var _a;
+            if (rowLoading) {
+              return /* @__PURE__ */ React.createElement(import_antd_mobile.SpinLoading, { style: { "--size": "18px" } });
+            }
+            const customIcon = (_a = rowSelection == null ? void 0 : rowSelection.renderSelectedIcon) == null ? void 0 : _a.call(rowSelection, selected);
+            if (selected) {
+              return /* @__PURE__ */ React.createElement("span", { style: { color: "var(--adm-color-primary)" } }, customIcon ?? /* @__PURE__ */ React.createElement(import_antd_mobile_icons.CheckOutline, null));
+            }
+            return customIcon ?? false;
+          };
+          return /* @__PURE__ */ React.createElement(
+            import_antd_mobile.List.Item,
+            {
+              key,
+              arrow: renderArrow(),
+              ...listItemProps,
+              onClick: (e) => {
+                onListItemClick(item, index);
+                onClick == null ? void 0 : onClick(e);
+              }
+            }
+          );
+        })),
+        paginationType == "infinite" && /* @__PURE__ */ React.createElement(
+          import_antd_mobile.InfiniteScroll,
+          {
+            loadMore: async (isRetry) => {
+              await runAsync(pageState.pageIndex + (isRetry ? 0 : 1));
+            },
+            hasMore
+          }
+        )
+      );
+    }
+  };
+  (0, import_react.useImperativeHandle)(actionRef, () => {
+    const checkPaginationType = (type, funcName) => {
+      if (paginationType != type) {
+        (0, import_dev_log.devWarning)(
+          "ProList",
+          `\`${funcName}\` need \`${type}\` paginationType, current is \`${paginationType}\`.`
+        );
+        return false;
+      }
+      return true;
+    };
+    return {
+      setSearchKeyword(keywords, reload = true) {
+        setSearchKeyword(keywords);
+        if (reload && !filterSearch) {
+          reloadAsync(keywords);
+        }
+      },
+      async reload(reset) {
+        if (reset) {
+          setSearchKeyword("");
+          return await reloadAsync("");
+        } else {
+          return await reloadAsync();
+        }
+      },
+      async infinitLoadmore(retry) {
+        if (!checkPaginationType("infinite", "infinitLoadmore"))
+          return [];
+        if (!hasMore)
+          return [];
+        return runAsync(pageState.pageIndex + (retry ? 0 : 1));
+      },
+      async nextPage() {
+        if (!checkPaginationType("toolbar", "nextPage"))
+          return [];
+        if (!hasMore)
+          return [];
+        return await runAsync(pageState.pageIndex + 1);
+      },
+      async prevPage() {
+        if (!checkPaginationType("toolbar", "prevPage"))
+          return [];
+        const page = pageState.pageIndex - 1;
+        if (page < 1) {
+          return [];
+        }
+        return await runAsync(page);
+      }
+    };
+  });
+  (0, import_ahooks.useUpdateEffect)(() => {
+    reloadAsync();
+  }, [(0, import_rc_utils.useDeepCompareMemoize)(paramsProp)]);
+  return (0, import_native_props.withNativeProps)(
+    props,
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: (0, import_classnames.default)(
+          bem({
+            "has-header": hasHeader,
+            "has-toolbar": !!toolbar,
+            "has-footer": paginationType === "toolbar"
+          })
+        ),
+        style: { ...innerListStyle, ...styleProp }
+      },
+      hasHeader && /* @__PURE__ */ React.createElement("div", { className: bem("header") }, props.header && /* @__PURE__ */ React.createElement("div", { className: bem("header-title") }, props.header), renderSearch(), toolbar && /* @__PURE__ */ React.createElement("div", { className: bem("header-toolbar") }, toolbar)),
+      /* @__PURE__ */ React.createElement("div", { style: { height: "auto" }, className: bem("body") }, renderContent(), loading && /* @__PURE__ */ React.createElement("div", { className: bem("loading") }, /* @__PURE__ */ React.createElement(import_antd_mobile.SpinLoading, null))),
+      paginationType === "toolbar" && /* @__PURE__ */ React.createElement("div", { className: bem("footer") }, /* @__PURE__ */ React.createElement(
+        import_pagination_toolbar.default,
+        {
+          disabled: loading,
+          pagination: {
+            current: pageState.pageIndex,
+            pageSize: pageState.pageSize,
+            total
+          },
+          onNext: () => {
+            run(pageState.pageIndex + 1);
+          },
+          onPrev: () => {
+            const page = pageState.pageIndex - 1;
+            if (page >= 1) {
+              run(page);
+            }
+          }
+        }
+      ))
+    )
+  );
+}
+var pro_list_default = ProList;

package/dist/cjs/components/pro-list/pro-list.less

@@ -0,0 +1,80 @@
+@import '../styles/variable.less';
+
+@class-prefix-picker: ~'suid-pro-list';
+
+.@{class-prefix-picker} {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  height: calc(100vh - var(--extra-height));
+  &__header {
+    border-bottom: 1px solid var(--adm-color-border);
+    overflow: hidden;
+    background-color: var(--header-background-color);
+
+    &-title {
+      color: var(--title-color);
+      font-size: var(--title-font-size);
+      padding: var(--title-padding);
+    }
+
+    &-search {
+      padding: var(--search-padding);
+    }
+
+    &-title + &-search {
+      padding-top: 0;
+    }
+  }
+
+  &__body {
+    flex: 1;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  &__footer {
+    height: 50px;
+    border-top: 1px solid var(--adm-color-border);
+    background-color: var(--footer-background-color);
+  }
+  &__loading {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(255, 255, 255, 0.6);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: 40px;
+
+    @{dark-selector} & {
+      background-color: rgba(0, 0, 0, 0.35);
+    }
+  }
+
+  &--has-header {
+    .adm-list {
+      --border-top: none;
+    }
+  }
+  &--has-footer {
+    .adm-list {
+      --border-bottom: none;
+    }
+  }
+}
+
+.@{class-prefix-picker} {
+  --header-background-color: var(--adm-color-background);
+
+  --title-color: var(--adm-color-weak);
+  --title-font-size: var(--adm-font-size-7);
+  --title-padding: 8px 12px;
+  --search-padding: 8px 12px;
+
+  --extra-height: 0px;
+  --footer-background-color: var(--adm-color-background);
+}

package/dist/cjs/components/pro-list/selected-rows-summary.d.ts

@@ -0,0 +1,14 @@
+import { ListItemProps } from 'antd-mobile';
+import { Key } from 'react';
+interface SelectedRowsSummaryProps<T extends {
+    _key: Key;
+}> {
+    selectedRows?: T[];
+    renderItem?: (item: T, index: number, selected: boolean) => ListItemProps;
+    onDelete?(item: T): void;
+    onClear?(): Promise<boolean>;
+}
+declare function SelectedRowsSummary<T extends {
+    _key: Key;
+}>({ selectedRows, renderItem, onDelete, onClear, }: SelectedRowsSummaryProps<T>): JSX.Element;
+export default SelectedRowsSummary;