@nickeylin/antd-mobile-pro 2.0.0

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

@@ -0,0 +1,82 @@
+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/pagination-toolbar.tsx
+var pagination_toolbar_exports = {};
+__export(pagination_toolbar_exports, {
+  default: () => pagination_toolbar_default
+});
+module.exports = __toCommonJS(pagination_toolbar_exports);
+var import_antd_mobile = require("antd-mobile");
+var import_react = __toESM(require("react"));
+var import_config_provider = require("../config-provider");
+var StartPageIndex = 1;
+var PaginationToolBar = ({ pagination, disabled, onPrev, onNext }) => {
+  const { locale } = (0, import_config_provider.useConfig)();
+  const { total = 0, pageSize } = pagination ?? {};
+  const totalPage = (0, import_react.useMemo)(() => {
+    if (!pageSize || pageSize <= 0)
+      return 0;
+    return Math.ceil(total / pageSize);
+  }, [pageSize, total]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd_mobile.Space,
+    {
+      block: true,
+      justify: "between",
+      align: "center",
+      style: {
+        height: "100%",
+        padding: "0 15px",
+        borderTop: "var(--border-top)"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd_mobile.Button,
+      {
+        fill: "none",
+        size: "small",
+        disabled: disabled || !pagination || pagination.current <= StartPageIndex,
+        onClick: onPrev
+      },
+      locale.ProList.prevPage
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", null, pagination ? `${pagination.current}/${totalPage}` : "-"),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd_mobile.Button,
+      {
+        fill: "none",
+        size: "small",
+        disabled: disabled || !pagination || pagination.current >= totalPage,
+        onClick: onNext
+      },
+      locale.ProList.nextPage
+    )
+  );
+};
+var pagination_toolbar_default = PaginationToolBar;

package/dist/cjs/components/pro-list/pro-list.d.ts

@@ -0,0 +1,155 @@
+import { ErrorBlockProps, ListItemProps, ListProps, SearchBarProps } from 'antd-mobile';
+import { NativeProps } from 'antd-mobile/es/utils/native-props';
+import { Key, ReactNode, Ref } from 'react';
+import { RowKey } from './helper';
+export interface ProListPaginationProps {
+    /** 分页方式，默认`infinite`.  */
+    type?: 'infinite' | 'toolbar';
+    /** 分页大小，默认10 */
+    pageSize?: number;
+    /** 页码，从1开始 */
+    pageIndex?: number;
+}
+type ProListCustomRequestParams<U> = Service.FindByPage.RequestParams & {
+    pageInfo?: {
+        page: number;
+        rows: number;
+    };
+} & U;
+interface ProListCustomRequestData<T> {
+    rows: T[];
+    records: number;
+}
+interface ProListCustomRequest<T, U> {
+    (params: ProListCustomRequestParams<U>): Promise<ProListCustomRequestData<T>>;
+}
+export interface ProListRowSelection<T> {
+    type: 'single' | 'multi';
+    /**
+     * 指定选中项的 key 数组，需要和 onChange 进行配合
+     */
+    selectedRowKeys?: Key[];
+    /**
+     * 选中项的对象数组
+     */
+    selectedRows?: T[];
+    /** 是否显示已选项操作栏, 默认false */
+    showAllSelected?: boolean;
+    /**
+     * 默认选中项的 key 数组
+     */
+    defaultSelectedRowKeys?: Key[];
+    /**
+     * 自定义选中/未选中图标
+     * @param selected 选中状态
+     */
+    renderSelectedIcon?(selected: boolean): ReactNode | null;
+    /**
+     * 选中项发生变化时的回调
+     */
+    onChange?: (selectedRowKeys: Key[], selectedRows: T[], info: {
+        type: 'single' | 'multi';
+    }) => void;
+    /**
+     * 用户手动选择/取消选择某行的回调
+     */
+    onSelect?: (record: T, selected: boolean, selectedRows: T[]) => void;
+    /**
+     * 选中某项前回调，若返回false，则不会对改行选中
+     * @param record
+     * @returns {boolean|Promise<boolean>}
+     */
+    onBeforeSelect?: (record: T) => boolean | Promise<boolean>;
+}
+export interface ProListProps<T, U = object> extends NativeProps<'--header-font-size' | '--header-background-color' | '--header-text-color' | '--header-padding' | '--search-padding'>, Pick<ListProps, 'mode' | 'header'> {
+    /**
+     * 搜索栏配置
+     */
+    search?: false | SearchBarProps;
+    /**
+     * 工具栏，位于搜索栏与列表之间
+     */
+    toolbar?: ReactNode;
+    /**
+     * 网络请求参数，变化时将触发刷新
+     */
+    params?: U;
+    /**
+     * 自定义请求，若不传，将执行默认的网络请求
+     */
+    request?: ProListCustomRequest<T, U>;
+    /**
+     * 是否手动触发首次请求
+     */
+    manual?: boolean;
+    rowKey?: RowKey<T>;
+    renderItem?: (item: T, index: number, selected: boolean) => ListItemProps;
+    rowSelection?: ProListRowSelection<T>;
+    /**
+     * 列表分页配置
+     */
+    pagination?: false | ProListPaginationProps;
+    /**
+     * 错误界面配置
+     *
+     * @description 获取首页数据发生错误时将展示错误界面
+     */
+    errorProps?: ErrorBlockProps & {
+        render?(error: Error, props: ErrorBlockProps): ReactNode;
+    };
+    /**
+     * 空数据界面配置
+     */
+    emptyProps?: ErrorBlockProps & {
+        render?(props: ErrorBlockProps): ReactNode;
+    };
+    loading?: boolean;
+    actionRef?: Ref<ProListAction<T> | undefined>;
+    /**
+     * 自定义列表渲染
+     * @param data 列表数据
+     * @param selectedRowKeys 选中的Key列表
+     * @param action 操作
+     */
+    children?(data: T[], selectedRowKeys: Key[], action: {
+        toggleSelectItem(item: T, index: number): void;
+    }): ReactNode;
+    /**
+     * 自定义本地筛选方法，设置了此方法后，关键词搜索将不进行远程查询
+     * @param input 搜索关键词
+     * @param item 列表项
+     */
+    filterSearch?(input: string, item: T): boolean;
+    /**
+     * 是否填充Page内容高度，仅在Page组件内有效
+     */
+    fillMaxPageHeight?: boolean;
+}
+export interface ProListAction<T = any> {
+    /**
+     * 设置搜索关键词
+     * @param keywords 搜索关键词
+     * @param reload 是否在设置搜索关键词后立即刷新并重置到第一页，默认ture
+     */
+    setSearchKeyword(keywords: string, reload?: boolean): void;
+    /**
+     * 刷新并重置到第一页
+     * @param reset 是否重置搜索关键词
+     */
+    reload(reset?: boolean): Promise<T[]>;
+    /**
+     * 加载下一页(无限加载分页模式)
+     * @param retry 是否重新加载当前页
+     */
+    infinitLoadmore(retry?: boolean): Promise<T[]>;
+    /**
+     * 下一页（手动分页模式）
+     */
+    nextPage(): Promise<T[]>;
+    /**
+     * 上一页（手动分页模式）
+     */
+    prevPage(): Promise<T[]>;
+}
+declare function ProList<T = any, U = object>(props: ProListProps<T, U>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default ProList;