@ant-design/pro-components 2.8.10 → 3.0.0-beta.2

package/es/table/style/index.js

@@ -0,0 +1,140 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { Keyframes } from '@ant-design/cssinjs';
+import { useStyle as useAntdStyle } from "../../provider";
+export var turn = new Keyframes('turn', {
+  '0%': {
+    transform: 'rotate(0deg)'
+  },
+  '25%': {
+    transform: 'rotate(90deg)'
+  },
+  '50%': {
+    transform: 'rotate(180deg)'
+  },
+  '75%': {
+    transform: 'rotate(270deg)'
+  },
+  '100%': {
+    transform: 'rotate(360deg)'
+  }
+});
+var genProListStyle = function genProListStyle(token) {
+  return _defineProperty(_defineProperty(_defineProperty({}, token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    zIndex: 1
+  }, "".concat(token.antCls, "-table-wrapper ").concat(token.antCls, "-table-pagination").concat(token.antCls, "-pagination"), {
+    marginBlockEnd: 0
+  }), '&:not(:root):fullscreen', {
+    minHeight: '100vh',
+    overflow: 'auto',
+    background: token.colorBgContainer
+  }), '&-extra', {
+    marginBlockEnd: 16
+  }), '&-polling', _defineProperty({}, "".concat(token.componentCls, "-list-toolbar-setting-item"), {
+    '.anticon.anticon-reload': {
+      transform: 'rotate(0deg)',
+      animationName: turn,
+      animationDuration: '1s',
+      animationTimingFunction: 'linear',
+      animationIterationCount: 'infinite'
+    }
+  })), "td".concat(token.antCls, "-table-cell"), {
+    '>a': {
+      fontSize: token.fontSize
+    }
+  }), "".concat(token.antCls, "-table").concat(token.antCls, "-table-tbody").concat(token.antCls, "-table-wrapper:only-child").concat(token.antCls, "-table"), {
+    marginBlock: 0,
+    marginInline: 0
+  }), "".concat(token.antCls, "-table").concat(token.antCls, "-table-middle ").concat(token.componentCls), _defineProperty({
+    marginBlock: 0,
+    marginInline: -8
+  }, "".concat(token.proComponentsCls, "-card"), {
+    backgroundColor: 'initial'
+  })), '& &-search', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    marginBlockEnd: '16px',
+    background: token.colorBgContainer,
+    '&-ghost': {
+      background: 'transparent'
+    }
+  }, "&".concat(token.componentCls, "-form"), {
+    marginBlock: 0,
+    marginInline: 0,
+    paddingBlock: 0,
+    paddingInline: 16,
+    overflow: 'unset'
+  }), '&-light-filter', {
+    marginBlockEnd: 0,
+    paddingBlock: 0,
+    paddingInline: 0
+  }), '&-form-option', _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-form-item"), {}), "".concat(token.antCls, "-form-item-label"), {}), "".concat(token.antCls, "-form-item-control-input"), {})), '@media (max-width: 575px)', _defineProperty({}, token.componentCls, _defineProperty({
+    height: 'auto !important',
+    paddingBlockEnd: '24px'
+  }, "".concat(token.antCls, "-form-item-label"), {
+    minWidth: '80px',
+    textAlign: 'start'
+  })))), '&-toolbar', {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: '64px',
+    paddingInline: 24,
+    paddingBlock: 0,
+    '&-option': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    },
+    '&-title': {
+      flex: '1',
+      color: token.colorTextLabel,
+      fontWeight: '500',
+      fontSize: '16px',
+      lineHeight: '24px',
+      opacity: '0.85'
+    }
+  })), "@media (max-width: ".concat(token.screenXS, ")px"), _defineProperty({}, token.componentCls, _defineProperty({}, "".concat(token.antCls, "-table"), {
+    width: '100%',
+    overflowX: 'auto',
+    '&-thead > tr,&-tbody > tr': {
+      '> th,> td': {
+        whiteSpace: 'pre',
+        '>span': {
+          display: 'block'
+        }
+      }
+    }
+  }))), '@media (max-width: 575px)', _defineProperty({}, "".concat(token.componentCls, "-toolbar"), {
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    height: 'auto',
+    marginBlockEnd: '16px',
+    marginInlineStart: '16px',
+    paddingBlock: 8,
+    paddingInline: 8,
+    paddingBlockStart: '16px',
+    lineHeight: 'normal',
+    '&-title': {
+      marginBlockEnd: 16
+    },
+    '&-option': {
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: '100%'
+    },
+    '&-default-option': {
+      display: 'flex',
+      flex: '1',
+      alignItems: 'center',
+      justifyContent: 'flex-end'
+    }
+  }));
+};
+export function useStyle(prefixCls) {
+  return useAntdStyle('ProTable', function (token) {
+    var proListToken = _objectSpread(_objectSpread({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
+    });
+    return [genProListStyle(proListToken)];
+  });
+}

package/es/table/typing.d.ts

@@ -0,0 +1,431 @@
+import type { SpinProps, TableProps } from 'antd';
+import type { SizeType } from 'antd/lib/config-provider/SizeContext';
+import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
+import type { NamePath } from 'antd/lib/form/interface';
+import type { SearchProps } from 'antd/lib/input';
+import type { ColumnFilterItem, ColumnType, CompareFn, SortOrder } from 'antd/lib/table/interface';
+import type dayjs from 'dayjs';
+import type React from 'react';
+import type { CSSProperties } from 'react';
+import type { ProCardProps } from '../card';
+import type { ProFieldEmptyText } from '../field';
+import type { LightWrapperProps, ProFormProps, QueryFilterProps } from '../form';
+import type { ProCoreActionType, ProSchema, ProSchemaComponentTypes, ProTableEditableFnType, RowEditableConfig, SearchTransformKeyFn } from '../utils';
+import type { AlertRenderType } from './components/Alert';
+import type { SearchConfig, TableFormItem } from './components/Form/FormRender';
+import type { ListToolBarProps } from './components/ListToolBar';
+import type { OptionConfig, ToolBarProps } from './components/ToolBar';
+import type { DensitySize } from './components/ToolBar/DensityIcon';
+import type { ColumnsState, ContainerType } from './Store/Provide';
+export type PageInfo = {
+    pageSize: number;
+    total: number;
+    current: number;
+};
+export type RequestData<T> = {
+    data: T[] | undefined;
+    success?: boolean;
+    total?: number;
+} & Record<string, any>;
+export type UseFetchDataAction<T = any> = {
+    dataSource: T[];
+    setDataSource: (dataSource: T[]) => void;
+    loading: boolean | SpinProps | undefined;
+    pageInfo: PageInfo;
+    reload: () => Promise<void>;
+    fullScreen?: () => void;
+    reset: () => void;
+    pollingLoading: boolean;
+    setPageInfo: (pageInfo: Partial<PageInfo>) => void;
+};
+/** 转化列的定义 */
+export type ColumnRenderInterface<T> = {
+    item: ProColumns<T>;
+    text: any;
+    row: T;
+    index: number;
+    columnEmptyText?: ProFieldEmptyText;
+    type: ProSchemaComponentTypes;
+    counter: ReturnType<ContainerType>;
+};
+export type TableRowSelection = TableProps<any>['rowSelection'];
+export type ExtraProColumnType<T> = Omit<ColumnType<T>, 'render' | 'children' | 'title' | 'filters' | 'onFilter' | 'sorter'> & {
+    sorter?: string | boolean | CompareFn<T> | {
+        compare?: CompareFn<T>;
+        /** Config multiple sorter order priority */
+        multiple?: number;
+    };
+};
+export type ProColumnType<T = unknown, ValueType = 'text'> = ProSchema<T, ExtraProColumnType<T> & {
+    children?: ProColumns<T>[];
+    index?: number;
+    /**
+     * 每个表单占据的格子大小
+     *
+     * @param 总宽度 = span* colSize
+     * @param 默认为 1
+     */
+    colSize?: number;
+    /** 搜索表单的默认值 */
+    initialValue?: any;
+    /** @name 是否缩略 */
+    ellipsis?: ColumnType<T>['ellipsis'];
+    /** @name 是否拷贝 */
+    copyable?: boolean;
+    /** 在查询表单中隐藏 */
+    search?: boolean | {
+        /**
+         * Transform: (value: any) => ({ startTime: value[0], endTime: value[1] }),
+         *
+         * @name 转化值的key, 一般用于时间区间的转化
+         */
+        transform: SearchTransformKeyFn;
+    };
+    /** @name 在 table 中隐藏 */
+    hideInTable?: boolean;
+    /** @name 在新建表单中删除 */
+    hideInForm?: boolean;
+    /** @name 不在配置工具中显示 */
+    hideInSetting?: boolean;
+    /** @name 表头的筛选菜单项 */
+    filters?: boolean | ColumnFilterItem[];
+    /** @name 筛选的函数，设置为 false 会关闭自带的本地筛选 */
+    onFilter?: boolean | ColumnType<T>['onFilter'];
+    /** @name Form 的排序 */
+    order?: number;
+    /** @name 可编辑表格是否可编辑 */
+    editable?: boolean | ProTableEditableFnType<T>;
+    /** @private */
+    listKey?: string;
+    /** @name 只读 */
+    readonly?: boolean;
+    /** @name 列设置的 disabled */
+    disable?: boolean | {
+        checkbox: boolean;
+    };
+}, ProSchemaComponentTypes, ValueType, {
+    lightProps?: LightWrapperProps;
+}>;
+export type ProColumns<T = any, ValueType = 'text'> = ProColumnType<T, ValueType>;
+export type BorderedType = 'search' | 'table';
+export type Bordered = boolean | {
+    search?: boolean;
+    table?: boolean;
+};
+export type ColumnStateType = {
+    /**
+     * 持久化的类型，支持 localStorage 和 sessionStorage
+     *
+     * @param localStorage 设置在关闭浏览器后也是存在的
+     * @param sessionStorage 关闭浏览器后会丢失
+     */
+    persistenceType?: 'localStorage' | 'sessionStorage';
+    /** 持久化的key，用于存储到 storage 中 */
+    persistenceKey?: string;
+    /** ColumnsState 的值 */
+    defaultValue?: Record<string, ColumnsState>;
+    /** ColumnsState 的值 */
+    value?: Record<string, ColumnsState>;
+    onChange?: (map: Record<string, ColumnsState>) => void;
+};
+/** ProTable 的类型定义 继承自 antd 的 Table */
+export type ProTableProps<DataSource, U, ValueType = 'text'> = {
+    /**
+     * @name 列配置能力，支持一个数组
+     */
+    columns?: ProColumns<DataSource, ValueType>[];
+    /**
+     * @name ListToolBar 的属性
+     */
+    toolbar?: ListToolBarProps;
+    /**
+     * @name 幽灵模式，即是否取消卡片内容区域的 padding 和 卡片的背景颜色。
+     */
+    ghost?: boolean;
+    /**
+     * request 的参数，修改之后会触发更新
+     *
+     * @example pathname 修改重新触发 request
+     * params={{ pathName }}
+     */
+    params?: U;
+    /** @name 列状态的配置，可以用来操作列功能 */
+    columnsState?: ColumnStateType;
+    onSizeChange?: (size: DensitySize) => void;
+    /**
+     * @name table 外面卡片的设置
+     */
+    cardProps?: ProCardProps | false;
+    /**
+     * @name 渲染 table
+     */
+    tableRender?: (props: ProTableProps<DataSource, U, ValueType>, defaultDom: JSX.Element, 
+    /** 各个区域的 dom */
+    domList: {
+        toolbar: JSX.Element | undefined;
+        alert: JSX.Element | undefined;
+        table: JSX.Element | undefined;
+    }) => React.ReactNode;
+    /**
+     * @name 渲染 table 视图，用于定制 ProList，不推荐直接使用
+     */
+    tableViewRender?: (props: TableProps<DataSource>, defaultDom: JSX.Element) => JSX.Element | undefined;
+    /**
+     * @name table 和搜索表单之间的 dom 渲染
+     *
+     * @example 在table 上方增加一个统计表单
+     *
+     * tableExtraRender={()=> <Statistic title="统计" value={10} />}
+     */
+    tableExtraRender?: (props: ProTableProps<DataSource, U, ValueType>, dataSource: DataSource[]) => React.ReactNode;
+    /**
+     * @name 渲染搜索表单
+     */
+    searchFormRender?: (props: ProTableProps<DataSource, U, ValueType>, defaultDom: JSX.Element) => React.ReactNode;
+    /** @name 一个获得 dataSource 的方法 */
+    request?: (params: U & {
+        pageSize?: number;
+        current?: number;
+        keyword?: string;
+    }, sort: Record<string, SortOrder>, filter: Record<string, (string | number)[] | null>) => Promise<Partial<RequestData<DataSource>>>;
+    /** @name 对数据进行一些处理 */
+    postData?: any;
+    /** @name 默认的数据 */
+    defaultData?: DataSource[];
+    /**
+     * @name 初始化的参数，可以操作 table
+     *
+     * @example 重新刷新表格
+     * actionRef.current?.reload();
+     *
+     * @example 重置表格
+     * actionRef.current?.reset();
+     */
+    actionRef?: React.Ref<ActionType | undefined>;
+    /**
+     * @name 操作自带的 form
+     */
+    formRef?: TableFormItem<DataSource>['formRef'];
+    /**
+     * @name 渲染操作栏
+     */
+    toolBarRender?: ToolBarProps<DataSource>['toolBarRender'] | false;
+    optionsRender?: ToolBarProps<DataSource>['optionsRender'];
+    /**
+     * @name 数据加载完成后触发
+     */
+    onLoad?: (dataSource: DataSource[]) => void;
+    /**
+     * @name loading 被修改时触发，一般是网络请求导致的
+     */
+    onLoadingChange?: (loading: boolean | SpinProps | undefined) => void;
+    /**
+     * @name 数据加载失败时触发
+     */
+    onRequestError?: (e: Error) => void;
+    /**
+     * 是否轮询 ProTable 它不会自动提交表单，如果你想自动提交表单的功能，需要在 onValueChange 中调用 formRef.current?.submit()
+     * @property {number} polling 表示轮询的时间间隔，0 表示关闭轮询，大于 0 表示开启轮询，最小的轮询时间为 2000ms
+     * @param dataSource 返回当前的表单数据，你可以用它判断要不要打开轮询
+     */
+    polling?: number | ((dataSource: DataSource[]) => number);
+    /** @name 给封装的 table 的 className */
+    tableClassName?: string;
+    /** @name 给封装的 table 的 style */
+    tableStyle?: CSSProperties;
+    /** @name 左上角的 title */
+    headerTitle?: React.ReactNode;
+    /** @name 标题旁边的 tooltip */
+    tooltip?: string | LabelTooltipType;
+    /** @name 操作栏配置 */
+    options?: OptionConfig | false;
+    /**
+     * @type SearchConfig
+     * @name 是否显示搜索表单
+     */
+    search?: false | SearchConfig;
+    /**
+     * 基本配置与 antd Form 相同, 但是劫持了 form onFinish 的配置
+     *
+     * @name type="form" 和 搜索表单 的 Form 配置
+     */
+    form?: Omit<ProFormProps & QueryFilterProps, 'form'>;
+    /**
+     * 暂时只支持 dayjs - string 会格式化为 YYYY-DD-MM - number 代表时间戳
+     *
+     * @name 如何格式化日期
+     */
+    dateFormatter?: (string & {}) | 'string' | 'number' | ((value: dayjs.Dayjs, valueType: string) => string | number) | false;
+    /** @name 格式化搜索表单提交数据 */
+    beforeSearchSubmit?: (params: Partial<U>) => any;
+    /**
+     * 设置或者返回false 即可关闭
+     *
+     * @name 自定义 table 的 alert
+     */
+    tableAlertRender?: AlertRenderType<DataSource>;
+    /**
+     * 设置或者返回false 即可关闭
+     *
+     * @name 自定义 table 的 alert 的操作
+     */
+    tableAlertOptionRender?: AlertRenderType<DataSource>;
+    /** @name 选择项配置 */
+    rowSelection?: (TableProps<DataSource>['rowSelection'] & {
+        alwaysShowAlert?: boolean;
+    }) | false;
+    style?: React.CSSProperties;
+    /** 支持 ProTable 的类型 */
+    type?: ProSchemaComponentTypes;
+    /** @name 提交表单时触发 */
+    onSubmit?: (params: U) => void;
+    /** @name 重置表单时触发 */
+    onReset?: () => void;
+    /** @name 空值时显示 */
+    columnEmptyText?: ProFieldEmptyText;
+    /** @name 是否手动触发请求 */
+    manualRequest?: boolean;
+    /**
+     * @name 编辑行相关的配置
+     *
+     * @example 支持多行编辑
+     * editable={{type:"multiple"}}
+     *
+     * @example 保存的时候请求后端
+     * editable={{ onSave:async (rows)=>{ await save(rows) } }}
+     */
+    editable?: RowEditableConfig<DataSource>;
+    /**
+     * @name 可编辑表格修改数据的改变
+     */
+    onDataSourceChange?: (dataSource: DataSource[]) => void;
+    /** @name 查询表单和 Table 的卡片 border 配置 */
+    cardBordered?: Bordered;
+    /** @name 去抖时间 */
+    debounceTime?: number;
+    /**
+     * 只在request 存在的时候生效，可编辑表格也不会生效
+     *
+     * @default false
+     * @name 窗口聚焦时自动重新请求
+     */
+    revalidateOnFocus?: boolean;
+    /** 默认的表格大小 */
+    defaultSize?: SizeType;
+    /**
+     * @name, 可编辑表格的name,通过这个name 可以直接与 form通信，无需嵌套
+     */
+    name?: NamePath;
+    /**
+     * 错误边界自定义
+     */
+    ErrorBoundary?: React.ComponentClass<any, any> | false;
+} & Omit<TableProps<DataSource>, 'columns' | 'rowSelection'>;
+export type ActionType = ProCoreActionType & {
+    fullScreen?: () => void;
+    setPageInfo?: (page: Partial<PageInfo>) => void;
+};
+/**
+ * 用于定义 useFetch 的参数类型
+ * @typedef {Object} UseFetchProps
+ * @property {any} [dataSource] - 数据源，可选参数
+ * @property {UseFetchDataAction['loading']} loading - 数据加载状态，必须参数
+ * @property {(loading: UseFetchDataAction['loading']) => void} [onLoadingChange] - 加载状态改变时的回调函数，可选参数
+ * @property {(dataSource: any[], extra: any) => void} [onLoad] - 数据加载完成时的回调函数，可选参数
+ * @property {(dataSource?: any) => void} [onDataSourceChange] - 数据源改变时的回调函数，可选参数
+ * @property {any} postData - 发送到后端的数据，必须参数
+ * @property {{current?: number; pageSize?: number; defaultCurrent?: number; defaultPageSize?: number;} | false} pageInfo - 分页信息，可选参数，false 表示不启用分页
+ * @property {(pageInfo: PageInfo) => void} [onPageInfoChange] - 分页信息改变时的回调函数，可选参数
+ * @property {any[]} [effects] - 依赖的其它 Hook 或其它变量，可选参数
+ * @property {(e: Error) => void} [onRequestError] - 请求出错时的回调函数，可选参数
+ * @property {boolean} manual - 是否手动触发请求，必须参数
+ * @property {number} [debounceTime] - 延迟时间，可选参数，单位为毫秒
+ * @property {number | ((dataSource: any[]) => number)} [polling] - 轮询时间，可选参数，单位为毫秒或一个返回时间的函数
+ * @property {boolean} [revalidateOnFocus] - 是否在焦点回到页面时重新验证数据，可选参数
+ */
+export type UseFetchProps = {
+    /**
+     * 数据源
+     * @type {any}
+     */
+    dataSource?: any;
+    /**
+     * 是否处于加载状态
+     * @type {UseFetchDataAction['loading']}
+     */
+    loading: UseFetchDataAction['loading'];
+    /**
+     * 加载状态改变时的回调函数
+     * @type {(loading: UseFetchDataAction['loading']) => void}
+     */
+    onLoadingChange?: (loading: UseFetchDataAction['loading']) => void;
+    /**
+     * 数据加载完成后的回调函数
+     * @type {(dataSource: any[], extra: any) => void}
+     */
+    onLoad?: (dataSource: any[], extra: any) => void;
+    /**
+     * 数据源变化时的回调函数
+     * @type {(dataSource?: any) => void}
+     */
+    onDataSourceChange?: (dataSource?: any) => void;
+    /**
+     * 请求时附带的数据
+     * @type {any}
+     */
+    postData: (dataSource: any[]) => any[];
+    /**
+     * 分页信息
+     * @type {{
+     *   current?: number;
+     *   pageSize?: number;
+     *   defaultCurrent?: number;
+     *   defaultPageSize?: number;
+     * } | false}
+     */
+    pageInfo: {
+        current?: number;
+        pageSize?: number;
+        defaultCurrent?: number;
+        defaultPageSize?: number;
+    } | false;
+    /**
+     * 分页信息变化时的回调函数
+     * @type {(pageInfo: PageInfo) => void}
+     */
+    onPageInfoChange?: (pageInfo: PageInfo) => void;
+    /**
+     * 请求相关的副作用
+     * @type {any[]}
+     */
+    effects?: any[];
+    /**
+     * 请求出错时的回调函数
+     * @type {(e: Error) => void}
+     */
+    onRequestError?: (e: Error) => void;
+    /**
+     * 是否手动触发请求
+     * @type {boolean}
+     */
+    manual: boolean;
+    /**
+     * 请求防抖时间
+     * @type {number}
+     */
+    debounceTime?: number;
+    /**
+     * 数据源轮询间隔时间或轮询触发条件
+     * @type {number | ((dataSource: any[]) => number)}
+     */
+    polling?: number | ((dataSource: any[]) => number);
+    /**
+     * 是否在页面获得焦点时重新验证数据
+     * @type {Boolean}
+     */
+    revalidateOnFocus?: boolean;
+};
+export type OptionSearchProps = Omit<SearchProps, 'onSearch'> & {
+    /** 如果 onSearch 返回一个false，直接拦截请求 */
+    onSearch?: (keyword: string) => Promise<boolean | undefined> | boolean | undefined;
+};

package/es/table/typing.js

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

package/es/table/useFetchData.d.ts

@@ -0,0 +1,15 @@
+import type { RequestData, UseFetchDataAction, UseFetchProps } from './typing';
+/**
+ * useFetchData hook 用来获取数据并控制数据的状态和分页
+ * @template T
+ * @param {(undefined | ((params?: { pageSize: number; current: number }) => Promise<DataSource>))} getData - 获取数据的函数，参数为分页参数，
+ * 返回一个 Promise 类型的 T 类型的数据
+ * @param {(undefined | any[])} defaultData - 默认的数据
+ * @param {UseFetchProps} options - 配置项，包括了默认的分页参数、格式化数据的函数等
+ * @returns {UseFetchDataAction} 返回一个对象，包含当前的数据列表、loading 状态、error、以及可控制的分页参数等
+ */
+declare const useFetchData: <DataSource extends RequestData<any>>(getData: ((params?: {
+    pageSize: number;
+    current: number;
+}) => Promise<DataSource>) | undefined, defaultData: any[] | undefined, options: UseFetchProps) => UseFetchDataAction;
+export default useFetchData;