@ant-design/pro-components 2.8.9 → 3.0.0-beta.1

package/es/form/typing.d.ts

@@ -0,0 +1,145 @@
+import type { ColProps, FormItemProps, RowProps } from 'antd';
+import type React from 'react';
+import type { ProFieldProps, ProFieldValueType, ProFormBaseGroupProps, ProSchema, SearchConvertKeyFn } from '../utils';
+import type { ProFormInstance } from './BaseForm';
+import type { ProFormItemProps } from './components';
+import type { CaptFieldRef } from './components/Captcha';
+export interface ProFormGridConfig {
+    /**
+     * open grid layout
+     * @default false
+     */
+    grid?: boolean;
+    /**
+     * only works when grid is enabled
+     *
+     * When passing the `span` attribute, the default value is empty
+     * @default
+     * { xs: 24 }
+     */
+    colProps?: ColProps;
+    /**
+     * only works when grid is enabled
+     * @default
+     * { gutter: 8 }
+     */
+    rowProps?: RowProps;
+}
+export type ProFormItemCreateConfig = {
+    /** 自定义类型 */
+    valueType?: ProFieldValueType;
+    /** 自定义 lightMode */
+    customLightMode?: boolean;
+    /** Light mode 自定义的 label 模式 */
+    lightFilterLabelFormatter?: (value: any) => string;
+    /** 默认的props，如果用户设置会被覆盖 */
+    defaultProps?: Record<string, any>;
+    /** @name 不使用默认的宽度 */
+    ignoreWidth?: boolean;
+} & ProFormItemProps;
+export type ExtendsProps = {
+    secondary?: boolean;
+    allowClear?: boolean;
+    bordered?: boolean;
+    colSize?: number;
+    /**
+     * 需要与 request 配合使用
+     *
+     * @name 网络请求用的输出，会触发reload
+     */
+    params?: ((form: ProFormInstance) => Record<string, any>) | Record<string, any>;
+    /** @name 需要放在formItem 时使用 */
+    ignoreFormItem?: boolean;
+    /**
+     * 实验性质，可能 api 会有改动，谨慎使用
+     *
+     * @name 只读模式
+     */
+    readonly?: boolean;
+    /**
+     * @name 获取时转化值，一般用于将数据格式化为组件接收的格式
+     */
+    convertValue?: SearchConvertKeyFn;
+    /**
+     * 给 protable 开的口子
+     *
+     * @name 自定义的 formItemProps
+     */
+    formItemProps?: FormItemProps;
+    /** 给自定义组件行为开的口子 */
+    filedConfig?: ProFormItemCreateConfig;
+    fieldRef?: React.Ref<CaptFieldRef | null | undefined>;
+};
+export type ProFormGroupProps = ProFormBaseGroupProps & ProFormGridConfig;
+export type FieldProps<K> = {
+    style?: React.CSSProperties;
+    width?: string;
+    ref?: React.Ref<K>;
+};
+export type LightFilterFooterRender = ((
+/**
+ * @name 确认选择的值
+ */
+onConfirm?: (e?: React.MouseEvent) => void, 
+/**
+ * @name 清除选择
+ */
+onClear?: (e?: React.MouseEvent) => void) => JSX.Element | false) | false;
+export type ProFormFieldItemProps<T = Record<string, any>, K = any> = {
+    /**
+     * @name 设置到控件上的属性
+     *
+     * @example 设置select 多选
+     * <ProFormSelect fieldProps={{mode:"multiple"}} />
+     * @example 设置select 多选
+     * <ProFormText fieldProps={{placeholder:"请输入！"}} />
+     */
+    fieldProps?: Partial<FieldProps<K> & T>;
+    /**
+     * @name 输入的描述，没有值的时候展示
+     */
+    placeholder?: string | string[];
+    /**
+     * @name 是否是次要控件，只针对 LightFilter 下有效
+     */
+    secondary?: boolean;
+    /**
+     * @name 只读模式渲染文本,没有值的时候展示
+     */
+    emptyText?: React.ReactNode;
+    /**
+     * @name 是否使用 swr 来缓存 缓存可能导致数据更新不及时，请谨慎使用，尤其是页面中多个组件 name 相同
+     *
+     * @default false
+     */
+    cacheForSwr?: boolean;
+    /**
+     * @name disabled=true 时控件不可用
+     */
+    disabled?: boolean;
+    /**
+     * @type auto 使用组件默认的宽度
+     * @type xs=104px 适用于短数字、短文本或选项。
+     * @type sm=216px 适用于较短字段录入、如姓名、电话、ID 等。
+     * @type md=328px 标准宽度，适用于大部分字段长度。
+     * @type lg=440px 适用于较长字段录入，如长网址、标签组、文件路径等。
+     * @type xl=552px 适用于长文本录入，如长链接、描述、备注等，通常搭配自适应多行输入框或定高文本域使用。
+     */
+    width?: number | 'sm' | 'md' | 'xl' | 'xs' | 'lg';
+    /**
+     * @name 设置到 ProField 上面的 Props，内部属性
+     */
+    proFieldProps?: ProFieldProps;
+    /**
+     * @name QueryFilter 上的footer
+     *
+     * @example 自定义清除按钮
+     * footerRender={(onConfirm,onClear)=>{ return <Button onClick={onClear}>清除</Button> }}
+     */
+    footerRender?: LightFilterFooterRender;
+    children?: any;
+} & Omit<ProFormItemProps, 'valueType'> & Pick<ProFormGridConfig, 'colProps'> & ExtendsProps;
+/**
+ * load remote data props
+ */
+export type ProFormFieldRemoteProps = Pick<ProSchema, 'debounceTime' | 'request' | 'valueEnum' | 'params'>;

package/es/index.d.ts

@@ -1,11 +1,11 @@
-export * from '@ant-design/pro-card';
-export * from '@ant-design/pro-descriptions';
-export * from '@ant-design/pro-field';
-export * from '@ant-design/pro-form';
-export * from '@ant-design/pro-layout';
-export * from '@ant-design/pro-list';
-export * from '@ant-design/pro-provider';
-export * from '@ant-design/pro-skeleton';
-export * from '@ant-design/pro-table';
-export * from '@ant-design/pro-utils';
-export * from './version';
+export * from './card';
+export * from './descriptions';
+export * from './field';
+export * from './form';
+export * from './layout';
+export * from './list';
+export * from './provider';
+export * from './skeleton';
+export * from './table';
+export * from './utils';
+export { version } from './version';

package/es/index.js

@@ -1,12 +1,15 @@
-export * from '@ant-design/pro-card';
-export * from '@ant-design/pro-descriptions';
-export * from '@ant-design/pro-field';
-export * from '@ant-design/pro-form';
-export * from '@ant-design/pro-layout';
-export * from '@ant-design/pro-list';
-export * from '@ant-design/pro-provider';
-export * from '@ant-design/pro-skeleton';
-export * from '@ant-design/pro-table';
-export * from '@ant-design/pro-utils';
-// @ts-ignore
-export * from "./version";
+// src/index.ts
+export * from "./card";
+export * from "./descriptions";
+export * from "./field";
+export * from "./form";
+export * from "./layout";
+export * from "./list";
+export * from "./provider";
+export * from "./skeleton";
+export * from "./table";
+export * from "./utils";
+import { version } from "./version";
+export {
+  version
+};

package/es/layout/ProLayout.d.ts

@@ -0,0 +1,181 @@
+import type { BreadcrumbProps, WatermarkProps } from 'antd';
+import type { AnyObject } from 'antd/lib/_util/type';
+import type { ItemType } from 'antd/lib/breadcrumb/Breadcrumb';
+import type { CSSProperties } from 'react';
+import React from 'react';
+import type { GenerateStyle, ProTokenType } from '../provider';
+import type { HeaderViewProps } from './components/Header';
+import type { SiderMenuProps } from './components/SiderMenu/SiderMenu';
+import type { SiderMenuToken } from './components/SiderMenu/style';
+import type { GetPageTitleProps } from './getPageTitle';
+import type { LocaleType } from './locales';
+import type { MenuDataItem, MessageDescriptor, RouterTypes, WithFalse } from './typing';
+type LayoutItemType = ItemType & {
+    linkPath?: string;
+    component?: string;
+};
+export type LayoutBreadcrumbProps<T extends AnyObject = AnyObject> = {
+    minLength?: number;
+    itemRender?: (route: LayoutItemType, params: T, routes: LayoutItemType[], paths: string[]) => React.ReactNode;
+};
+type GlobalTypes = Omit<Partial<RouterTypes> & SiderMenuProps & HeaderViewProps & {
+    token?: ProTokenType['layout'];
+}, 'collapsed'>;
+export type ProLayoutProps = GlobalTypes & {
+    stylish?: {
+        header?: GenerateStyle<SiderMenuToken>;
+        sider?: GenerateStyle<SiderMenuToken>;
+    };
+    /** Layout 的品牌配置，表现为一张背景图片 */
+    bgLayoutImgList?: {
+        src?: string;
+        width?: string;
+        height?: string;
+        left?: number;
+        top?: number;
+        bottom?: number;
+        right?: number;
+    }[];
+    /**
+     * @name 简约模式，设置了之后不渲染的任何 layout 的东西，但是会有 context，可以获取到当前菜单。
+     *
+     * @example pure={true}
+     */
+    pure?: boolean;
+    /**
+     * @name logo 的配置，可以配置url，React 组件 和 false
+     *
+     * @example 设置 logo 为网络地址  logo="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"
+     * @example 设置 logo 为组件  logo={<img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/>}
+     * @example 设置 logo 为 false 不显示 logo  logo={false}
+     * @example 设置 logo 为 方法  logo={()=> <img src="https://avatars1.githubusercontent.com/u/8186664?s=460&v=4"/> }
+     * */
+    logo?: React.ReactNode | JSX.Element | WithFalse<() => React.ReactNode | JSX.Element>;
+    /**
+     * @name 页面切换的时候触发
+     *
+     * @example 获取切换的页面地址 onPageChange={(location) => { console.log("切换到："+location.pathname) }}
+     *
+     * */
+    onPageChange?: (location?: RouterTypes['location']) => void;
+    /**
+     * @name layout 的 loading 效果，设置完成之后只展示一个 loading
+     *
+     * @example loading={true}
+     */
+    loading?: boolean;
+    /**
+     * @name layout
+     *
+     * @description "zh-CN" | "zh-TW" | "en-US" | "it-IT" | "ko-KR"
+     * @example 中文 layout="zh-CN"
+     * @example 英文 layout="en-US"
+     */
+    locale?: LocaleType;
+    /**
+     * @name 是否收起 layout 是严格受控的，可以 设置为 true，一直收起
+     *
+     * @example collapsed={true}
+     */
+    collapsed?: boolean;
+    /**
+     * @name 收起和展开的时候触发事件
+     *
+     * @example onCollapse=(collapsed)=>{ setCollapsed(collapsed) };
+     */
+    onCollapse?: (collapsed: boolean) => void;
+    /**
+     * @name 页脚的配置
+     *
+     * @example 不展示dom footerRender={false}
+     * @example 使用 layout 的  DefaultFooter   footerRender={() => (<DefaultFooter copyright="这是一条测试文案"/>}
+     */
+    footerRender?: WithFalse<(props: ProLayoutProps & {
+        hasSiderMenu?: boolean;
+    }, defaultDom: React.ReactNode) => React.ReactNode>;
+    /**
+     * @name 设置 PageHeader 的面包屑，只能处理数据
+     *
+     * @example 手动设置 breadcrumbRender={(routers = []) => [ { path: '/', breadcrumbName: '主页'} ]
+     * @example 增加一项 breadcrumbRender={(routers = []) => { return [{ path: '/', breadcrumbName: '主页'} ,...routers ]}
+     * @example 删除首页 breadcrumbRender={(routers = []) => { return routers.filter(item => item.path !== '/')}
+     * @example 不显示面包屑 breadcrumbRender={false}
+     */
+    breadcrumbRender?: WithFalse<(routers: BreadcrumbProps['items']) => BreadcrumbProps['items']>;
+    /**
+     * @name 设置页面的标题
+     * @example 根据页面的路由设置标题 pageTitleRender={(props) => { return props.location.pathname }}
+     * @example 不显示标题 pageTitleRender={false}
+     * @example 根据默认的标题设置 pageTitleRender={(props,defaultPageTitle) => { return defaultPageTitle + '这是一个测试标题' }}
+     * @example 根据 info 来自己组合标题 pageTitleRender={(props,defaultPageTitle,info) => { return info.title + "-" + info.pageName }
+     */
+    pageTitleRender?: WithFalse<(props: GetPageTitleProps, defaultPageTitle?: string, info?: {
+        title: string;
+        id: string;
+        pageName: string;
+    }) => string>;
+    /**
+     * @name 处理 menuData 的数据，可以动态的控制数据
+     * @see 尽量不要用异步数据来处理，否则可能造成更新不及时，如果异步数据推荐使用 menu.request 和 params。
+     *
+     * @example 删除一些菜单 menuDataRender=((menuData) => { return menuData.filter(item => item.name !== 'test') })
+     * @example 增加一些菜单 menuDataRender={(menuData) => { return menuData.concat({ path: '/test', name: '测试', icon: 'smile' }) }}
+     * @example 修改菜单 menuDataRender={(menuData) => { return menuData.map(item => { if (item.name === 'test') { item.name = '测试' } return item }) }}
+     * @example 打平数据 menuDataRender={(menuData) => { return menuData.reduce((pre, item) => { return pre.concat(item.children || []) }, []) }}
+     */
+    menuDataRender?: (menuData: MenuDataItem[]) => MenuDataItem[];
+    /**
+     * @name 处理每个面包屑的配置，需要直接返回 dom
+     * @description (route: Route, params: any, routes: Array<Route>, paths: Array<string>) => React.ReactNode
+     *
+     * @example 设置 disabled： itemRender={(route, params, routes, paths) => { return <Button disabled>{route.breadcrumbName}</Button> }}
+     * @example 拼接 path： itemRender={(route, params, routes, paths) => { return <a href={paths.join('/')}>{route.breadcrumbName}</a> }}
+     */
+    itemRender?: BreadcrumbProps['itemRender'];
+    formatMessage?: (message: MessageDescriptor) => string;
+    /** @name 是否禁用移动端模式
+     *
+     * @see 有的管理系统不需要移动端模式，此属性设置为true即可
+     * @example disableMobile={true}
+     *  */
+    disableMobile?: boolean;
+    /**
+     * content 的样式
+     *
+     * @example 背景颜色为红色 contentStyle={{ backgroundColor: 'red '}}
+     */
+    contentStyle?: CSSProperties;
+    className?: string;
+    /** PageHeader 的 BreadcrumbProps 配置，会透传下去 */
+    breadcrumbProps?: Omit<BreadcrumbProps, 'itemRender'> & LayoutBreadcrumbProps;
+    /** @name 水印的相关配置 */
+    waterMarkProps?: WatermarkProps;
+    /**
+     * @name 操作菜单重新刷新
+     *
+     * @example  重新获取菜单 actionRef.current.reload();
+     * */
+    actionRef?: React.MutableRefObject<{
+        reload: () => void;
+    } | undefined>;
+    /**
+     * @name 错误处理组件
+     *
+     * @example ErrorBoundary={MyErrorBoundary}
+     */
+    ErrorBoundary?: React.ComponentClass<any, any> | boolean;
+    /**
+     * @name  侧边菜单的类型, menu.type 的快捷方式
+     * @type "sub" | "group"
+     * @example group
+     */
+    siderMenuType?: 'sub' | 'group';
+    isChildrenLayout?: boolean;
+};
+export type BasicLayoutContext = {
+    [K in 'location']: ProLayoutProps[K];
+} & {
+    breadcrumb: Record<string, MenuDataItem>;
+};
+declare const ProLayout: React.FC<ProLayoutProps>;
+export { ProLayout };