@nickeylin/antd-mobile-pro 2.0.0

package/dist/es/components/pro-form/types.d.ts

@@ -0,0 +1,87 @@
+/// <reference types="react" />
+import { FormInstance as RcFormInstance } from 'rc-field-form';
+import { NamePath } from 'rc-field-form/lib/interface';
+export type RequestOptionsType = {
+    /**
+     * 选项的文本内容，可以是一个 React 组件。
+     */
+    label?: React.ReactNode;
+    /**
+     * 选项的值，可以是一个字符串或数字类型。
+     */
+    value?: string | number;
+};
+/**
+ * load remote data props
+ */
+export interface ProFormFieldRemoteProps<U = any, T = RequestOptionsType> {
+    options?: T[];
+    /**
+     * 从服务器请求枚举
+     */
+    request?: (params: U, props: any) => Promise<T[]>;
+    /**
+     * request防抖动时间 默认10 单位ms
+     */
+    debounceTime?: number;
+    /**
+     * 从服务器请求的参数，改变了会触发 reload
+     */
+    params?: U;
+    swrOption?: {
+        /**
+         * 请求的唯一标识。相同 cacheKey 的数据全局同步（cacheTime、staleTime 参数会使该机制失效，见示例：数据共享）。
+         */
+        cacheKey?: string;
+        /**
+         * - 设置缓存数据回收时间。默认缓存数据 5 分钟后回收
+         * - 如果设置为 -1, 则表示缓存数据永不过期
+         *
+         * 默认值：300000
+         */
+        cacheTime?: number;
+        /**
+         * - 缓存数据保持新鲜时间。在该时间间隔内，认为数据是新鲜的，不会重新发请求
+         * - 如果设置为 -1，则表示数据永远新鲜
+         *
+         * 默认值：0
+         */
+        staleTime?: number;
+    };
+}
+export type ProFormInstanceType<T> = {
+    /**
+     * 获取被 ProForm 格式化后的所有数据
+     * @param nameList boolean
+     * @returns T
+     *
+     * @example  getFieldsFormatValue() ->返回所有数据
+     * @example  getFieldsFormatValue(true) ->返回所有数据，即使没有被 form 托管的
+     */
+    getFieldsFormatValue: (nameList?: true | NamePath[], omitNil?: boolean) => T;
+    /**
+     * 获取被 ProForm 格式化后的单个数据
+     * @param nameList (string|number)[]
+     * @returns T
+     *
+     * @example {a:{b:value}} -> getFieldFormatValue(['a', 'b']) -> value
+     */
+    getFieldFormatValue: (nameList?: NamePath, omitNil?: boolean) => T;
+    /**
+     * 获取被 ProForm 格式化后的单个数据, 包含他的 name
+     * @param nameList (string|number)[]
+     * @returns T
+     *
+     * @example {a:{b:value}}->getFieldFormatValueObject(['a','b'])->{a:{b:value}}
+     */
+    getFieldFormatValueObject: (nameList?: NamePath, omitNil?: boolean) => T;
+    /**
+     *验字段后返回格式化之后的所有数据
+     * @param nameList (string|number)[]
+     * @returns T
+     *
+     * @example validateFieldsReturnFormatValue -> {a:{b:value}}
+     */
+    validateFieldsReturnFormatValue: (nameList?: NamePath[]) => Promise<T>;
+};
+export type ProFormInstance<Values> = RcFormInstance<Values> & ProFormInstanceType<Values>;

package/dist/es/components/pro-form/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/components/pro-form/use-form-instance.d.ts

@@ -0,0 +1,2 @@
+import { FormInstance } from 'antd-mobile/es/components/form';
+export declare function useFormInstace(): FormInstance;

package/dist/es/components/pro-form/use-form-instance.js

@@ -0,0 +1,5 @@
+import { FieldContext } from 'rc-field-form';
+import { useContext } from 'react';
+export function useFormInstace() {
+  return useContext(FieldContext);
+}

package/dist/es/components/pro-form/utils.d.ts

@@ -0,0 +1,22 @@
+import { ProFormItemProps } from './pro-form-item';
+import { ProFormFieldRemoteProps, RequestOptionsType } from './types';
+export type TransformKeyFn = (value: any, namePath: string, allValues: any) => any;
+export declare function transformKey(target: object, transformers: Record<string, TransformKeyFn>, option?: {
+    omitNil?: boolean;
+    keyPath?: (string | number)[];
+}): any;
+export declare function useFieldOptionsRequest<U = any, T = RequestOptionsType>(props: ProFormFieldRemoteProps<U, T>): readonly [T[] | undefined, {
+    readonly error?: Error | undefined;
+    readonly params: [];
+    readonly cancel: () => void;
+    readonly refresh: () => void;
+    readonly refreshAsync: () => Promise<T[]>;
+    readonly run: () => void;
+    readonly runAsync: () => Promise<T[]>;
+    readonly mutate: (data?: T[] | ((oldData?: T[] | undefined) => T[] | undefined) | undefined) => void;
+    readonly loading: boolean;
+}];
+export declare function useChildElementPosition(props: Pick<ProFormItemProps, 'childElementPosition'>): "normal" | "right" | undefined;
+export declare function useReadonly(props: {
+    readonly?: boolean;
+}): boolean | undefined;

package/dist/es/components/pro-form/utils.js

@@ -0,0 +1,127 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["data", "loading"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { useDeepCompareMemoize } from '@nickeylin/rc-utils';
+import { useRequest } from 'ahooks';
+import { get, isNil, set } from 'lodash';
+import { useContext } from 'react';
+import ProFormContext from "./pro-form-context";
+function traverse(target, callback, parentKeyPath) {
+  if (_typeof(target) !== 'object' || isNil(target) || target instanceof Blob) {
+    return target;
+  }
+  var keys = Object.keys(target);
+  for (var _i = 0, _keys = keys; _i < _keys.length; _i++) {
+    var k = _keys[_i];
+    var _value = target[k];
+    var _keyPath = parentKeyPath ? [parentKeyPath, k].flat(1) : [k].flat(1);
+    var stop = callback === null || callback === void 0 ? void 0 : callback(_value, _keyPath);
+    if (stop) continue;
+    traverse(_value, callback, _keyPath);
+  }
+}
+export function transformKey(target, transformers) {
+  var option = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  // ignore nil transform
+  var dataFormatMap = Object.keys(transformers).reduce(function (ret, key) {
+    var value = transformers[key];
+    if (!isNil(value)) {
+      // eslint-disable-next-line no-param-reassign
+      ret[key] = value; // can't be undefined
+    }
+    return ret;
+  }, {});
+  if (Object.keys(dataFormatMap).length < 1) {
+    return target;
+  }
+  if (typeof window === 'undefined') return target;
+  // 如果 value 是 string | null | Array | Blob类型 其中之一，直接返回
+  // 形如 {key: [File, File]} 的表单字段当进行第二次递归时会导致其直接越过 typeof value !== 'object' 这一判断
+  if (_typeof(target) !== 'object' || isNil(target) || target instanceof Blob) {
+    return target;
+  }
+  var omitNil = option.omitNil,
+    keyPath = option.keyPath;
+  if (keyPath) {
+    var keyStr = keyPath.join('.');
+    var transform = transformers[keyStr];
+    var _value2 = get(target, keyPath);
+    return transform ? transform(_value2, keyStr, target) : _value2;
+  }
+  var nextObj = {};
+  traverse(target, function (value, keyPath) {
+    if (omitNil && !value) return false;
+    var keyStr = keyPath.join('.');
+    var oldValue = get(target, keyPath);
+    var transform = transformers[keyStr];
+    if (transform) {
+      var newValue = transform(oldValue, keyStr, target);
+      set(nextObj, keyPath, newValue);
+      return true;
+    } else {
+      set(nextObj, keyPath, oldValue);
+      return false;
+    }
+  });
+  return nextObj;
+}
+export function useFieldOptionsRequest(props) {
+  var options = props.options,
+    request = props.request,
+    _props$debounceTime = props.debounceTime,
+    debounceTime = _props$debounceTime === void 0 ? 10 : _props$debounceTime,
+    paramsProp = props.params,
+    swrOption = props.swrOption;
+  var params = useDeepCompareMemoize(paramsProp);
+  var _useRequest = useRequest( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!options) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return", options);
+          case 2:
+            if (!request) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 5;
+            return request(params, props);
+          case 5:
+            return _context.abrupt("return", _context.sent);
+          case 6:
+            return _context.abrupt("return", []);
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })), _objectSpread({
+      refreshDeps: [params],
+      debounceWait: debounceTime
+    }, !options && request ? swrOption : {})),
+    optionData = _useRequest.data,
+    loading = _useRequest.loading,
+    state = _objectWithoutProperties(_useRequest, _excluded);
+  return [options !== null && options !== void 0 ? options : optionData, _objectSpread({
+    loading: !options && loading
+  }, state)];
+}
+export function useChildElementPosition(props) {
+  var _props$childElementPo;
+  var ctx = useContext(ProFormContext);
+  return (_props$childElementPo = props.childElementPosition) !== null && _props$childElementPo !== void 0 ? _props$childElementPo : ctx.childElementPosition;
+}
+export function useReadonly(props) {
+  var _props$readonly;
+  var _useContext = useContext(ProFormContext),
+    readonly = _useContext.readonly;
+  return (_props$readonly = props.readonly) !== null && _props$readonly !== void 0 ? _props$readonly : readonly;
+}

package/dist/es/components/pro-list/helper.d.ts

@@ -0,0 +1,3 @@
+import { Key } from 'react';
+export type RowKey<T> = Key | ((item: T, index: number) => Key);
+export declare function getRowKey<T>(rowKey: RowKey<T>, item: T, index?: number): Key;

package/dist/es/components/pro-list/helper.js

@@ -0,0 +1,4 @@
+export function getRowKey(rowKey, item) {
+  var index = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return typeof rowKey == 'function' ? rowKey(item, index) : item[rowKey || 'key'];
+}

package/dist/es/components/pro-list/index.d.ts

@@ -0,0 +1,4 @@
+import ProList from './pro-list';
+import './pro-list.less';
+export default ProList;
+export { type ProListAction, type ProListPaginationProps, type ProListProps, type ProListRowSelection, } from './pro-list';

package/dist/es/components/pro-list/index.js

@@ -0,0 +1,3 @@
+import ProList from "./pro-list";
+import "./pro-list.less";
+export default ProList;

package/dist/es/components/pro-list/pagination-toolbar.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const PaginationToolBar: React.FC<{
+    pagination: {
+        /** begin with 1 */
+        current: number;
+        total: number;
+        pageSize: number;
+    } | null;
+    disabled?: boolean;
+    onPrev?(): void;
+    onNext?(): void;
+}>;
+export default PaginationToolBar;

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

@@ -0,0 +1,48 @@
+import { Button, Space } from 'antd-mobile';
+import React, { useMemo } from 'react';
+import { useConfig } from "../config-provider";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StartPageIndex = 1;
+var PaginationToolBar = function PaginationToolBar(_ref) {
+  var pagination = _ref.pagination,
+    disabled = _ref.disabled,
+    onPrev = _ref.onPrev,
+    onNext = _ref.onNext;
+  var _useConfig = useConfig(),
+    locale = _useConfig.locale;
+  var _ref2 = pagination !== null && pagination !== void 0 ? pagination : {},
+    _ref2$total = _ref2.total,
+    total = _ref2$total === void 0 ? 0 : _ref2$total,
+    pageSize = _ref2.pageSize;
+  var totalPage = useMemo(function () {
+    if (!pageSize || pageSize <= 0) return 0;
+    return Math.ceil(total / pageSize);
+  }, [pageSize, total]);
+  return /*#__PURE__*/_jsxs(Space, {
+    block: true,
+    justify: "between",
+    align: "center",
+    style: {
+      height: '100%',
+      padding: '0 15px',
+      borderTop: 'var(--border-top)'
+    },
+    children: [/*#__PURE__*/_jsx(Button, {
+      fill: "none",
+      size: "small",
+      disabled: disabled || !pagination || pagination.current <= StartPageIndex,
+      onClick: onPrev,
+      children: locale.ProList.prevPage
+    }), /*#__PURE__*/_jsx("div", {
+      children: pagination ? "".concat(pagination.current, "/").concat(totalPage) : '-'
+    }), /*#__PURE__*/_jsx(Button, {
+      fill: "none",
+      size: "small",
+      disabled: disabled || !pagination || pagination.current >= totalPage,
+      onClick: onNext,
+      children: locale.ProList.nextPage
+    })]
+  });
+};
+export default PaginationToolBar;

package/dist/es/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;