@teamias/rex-pro 0.0.1

package/dist/components/rex-pro-table/types.d.ts

@@ -0,0 +1,221 @@
+import { BaseListTable, BaseTable, RequestFieldsContainer, TButtonFilterItem } from '@teamias/rex-design';
+import { Button, DrawerProps, DropDownProps, FormInstance, GetProps, ModalProps } from 'antd';
+import { SizeType } from 'antd/es/config-provider/SizeContext';
+import { MutableRefObject, ReactNode } from 'react';
+import { FilterForm, IFilterFormProps } from '../filter-form';
+/** 组件props */
+export interface IRexProTableProps<TF extends Record<string, unknown>, TT extends Record<string, unknown>> {
+    toolbar?: {
+        /** 批量操作按钮 */
+        batchActionProps?: Omit<IActionButtonsProps<TF>, 'proTableRef'>;
+        /** 自定选择 */
+        render?: (batchActionNode: ReactNode) => ReactNode;
+    };
+    /** 搜索表单 filter props */
+    filterFormProps?: Exclude<GetProps<typeof FilterForm<TF>>, 'loading' | 'form' | 'onReset' | 'onFinish' | 'onInit'>;
+    /** table props */
+    tableProps?: Exclude<GetProps<typeof BaseTable<TT>>, 'loading' | 'dataSource' | 'pagination' | 'extraColumns'>;
+    /** list-table props */
+    listTableProps?: Omit<GetProps<typeof BaseListTable<TT>>, 'loading' | 'headerRender' | 'pagination' | 'extraColumns'>;
+    /** 请求列表数据 */
+    request: (params: TRexProTableRequestParams<TF>) => Promise<TRexProTableRequestResult<TT>>;
+    /**
+     * 默认条数
+     * @default 50
+     */
+    defaultPageSize?: number;
+    /**
+     * 初始化自动请求
+     * @default false
+     */
+    autoInitRequest?: boolean;
+    /** 操作列配置 */
+    actionConfig?: {
+        /** 自定义渲染 */
+        render?: (record: TT, recordIndex: number, actionButtonsNode: ReactNode) => ReactNode;
+        /** 操作按钮 */
+        actionButtonProps?: Omit<IActionButtonsProps<TF>, 'proTableRef' | 'onClick'> & {
+            onClick?: (record: TT, recordIndex: number, key: number | string | bigint | undefined, item: TDropDownItem, proTableRef: IRexProTableRef<TF>) => void;
+        };
+        /** 列配置 */
+        columnConfig?: Omit<Exclude<GetProps<typeof BaseTable<TT>>['columns'], undefined>[number], 'render'>;
+    };
+    /** proTable 操作对象 */
+    proTableRef?: MutableRefObject<IRexProTableRef<TF> | undefined>;
+    /** 隐藏分页 */
+    hidePagination?: boolean;
+}
+export interface IRexProTableRef<TF extends Record<string, unknown>> {
+    /** 主动查询 */
+    getList: (page?: number) => void;
+    /** 获取过滤条件 */
+    getFilterValue: (real?: boolean) => TF;
+    /** 重载组件 */
+    reload: (wait?: number) => Promise<void>;
+    /** 获取form ref */
+    getFormRef: () => GetProps<typeof FilterForm<TF>>['formRef'];
+    /** 获取form 实例 */
+    getFormInstance: () => FormInstance<TF>;
+}
+export interface IActionButtonsProps<TF extends Record<string, unknown>> {
+    /** 静态配置 */
+    fieldsConfig?: IButtonItems[];
+    /** 配置数据 */
+    requestFields?: () => Promise<IButtonItems[]>;
+    /** 配置数据, 配置url的时候,通过注入请求器的方式获取 */
+    requestFieldsUrl?: string;
+    /** 配套 */
+    requestFieldsParams?: Record<string, unknown>;
+    /** 自定义配置 */
+    items?: IButtonItems[];
+    /**
+     * 检查选中项
+     * status: true 有值
+     * status: false 无值
+     */
+    checkSelected?: () => {
+        status: boolean;
+        selected?: React.Key[];
+    };
+    /**
+     * 操作成功回调
+     * - 目前适用于 confirm 的成功回调
+     */
+    actionSuccessCallback?: (key: number | string | bigint | undefined, item: TDropDownItem, proTableRef: IRexProTableRef<TF>, response?: unknown) => void;
+    /**
+     * 点击回调
+     * - 注意传入原生items的时候,会把里面的click 拦截掉
+     */
+    onClick?: (key: number | string | bigint | undefined, item: TDropDownItem, proTableRef: IRexProTableRef<TF>) => void | Promise<void>;
+    /** proTable ref */
+    proTableRef: IRexProTableRef<TF>;
+    /**
+     * antd Dropdown 配置属性(menu.items 无效)
+     */
+    dropdownProps?: DropDownProps;
+    /** 尺寸 */
+    size?: SizeType;
+    /** 行数据 */
+    record?: Record<string, unknown>;
+    /**
+     * 有无按钮
+     * - TODO: 注意每渲染一次,都会执行一次,需要在外面做判断
+     */
+    onHasButtons?: (has: boolean) => void;
+    enablePromiseCollection?: boolean;
+}
+export interface IButtonItems {
+    /** 按钮组类型 */
+    type: 'button_items' | 'button_group';
+    /** group 时候需要 */
+    label?: string;
+    /** group按钮的设置 */
+    buttonProps?: Omit<GetProps<typeof Button>, 'onClick'>;
+    /** 每项按钮 */
+    items?: TDropDownItem[];
+    /**
+     * 排序字段
+     * @default 99
+     */
+    sort?: number;
+}
+export type TDropDownItem = {
+    /** 按钮名 */
+    label: string;
+    /** 按钮key */
+    value: string | number;
+    /** 按钮对应的操作类型 */
+    action?: 'confirm' | 'modal-form' | 'modal-search' | 'custom';
+    /** 针对按钮的设置 */
+    buttonProps?: Omit<GetProps<typeof Button>, 'onClick'>;
+    /** 模块配置路径 */
+    modalConfigUrl?: string;
+    modalConfigParams?: Record<string, unknown>;
+    modalTitle?: string;
+    modalHeight?: string;
+    modalMaxHeight?: string;
+    modalWidth?: string | number;
+    confirmTitle?: ReactNode;
+    confirmContent?: ReactNode;
+    /**
+     * 针对 confirm 的提交路径
+     */
+    api?: string;
+    /** 后端提供, 后面结合数据一起提交 */
+    data?: object;
+    /**
+     * - 全部满足后,可显示
+     * - 不配置或缺少解析数据源,正常显示
+     */
+    filter?: TButtonFilterItem[];
+};
+/** 接口入参 */
+export type TRexProTableRequestParams<T> = {
+    filterValues: T;
+    page: {
+        page_size: number;
+        current: number;
+    };
+    sort: unknown;
+    filter: unknown;
+};
+/** 接口回调 */
+export type TRexProTableRequestResult<T> = {
+    items: T[];
+    page?: {
+        current_page: number;
+        page_size: number;
+        total_items: number;
+        total_pages: number;
+    };
+};
+export interface DrawerTableProps extends GetProps<typeof RequestFieldsContainer> {
+    /** 标题2 */
+    title?: ReactNode;
+    /** 是否显示遮罩层 */
+    mask?: boolean;
+    /** 宽度 */
+    width?: number | string;
+    /** 抽屉属性 */
+    drawerProps?: Omit<DrawerProps, 'visible' | 'onClose'>;
+    /** 打开/关闭回调 */
+    onOpenChange?: (open?: boolean) => void;
+    /**
+     * 窗口操作
+     */
+    action?: MutableRefObject<ModalAction | undefined>;
+    /** 行数据 */
+    record?: Record<string, unknown>;
+}
+export type ModalAction = {
+    onOpen: () => void;
+    onCancel: () => void;
+};
+export interface ProModalFormProps<T extends Record<string, unknown> = Record<string, unknown>> extends GetProps<typeof RequestFieldsContainer>, Pick<IFilterFormProps<T>, 'fieldPropsFn'> {
+    /**
+     * @description 标题
+     */
+    title?: ReactNode;
+    /** 弹框属性 */
+    modalProps?: Omit<ModalProps, 'cancelText' | 'onCancel'>;
+    /**
+     * @description 宽度
+     */
+    width?: number | string;
+    height?: string;
+    maxHeight?: string;
+    /**
+     * @description 表单域操作实例
+     */
+    action?: MutableRefObject<ModalAction | undefined>;
+    /**
+     * @description 打开/关闭执行的回调
+     * @param open
+     * @returns
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** 操作成功回调 */
+    onFinish?: (response: unknown) => void;
+    /** 行数据 */
+    record?: Record<string, unknown>;
+}

package/dist/components/rex-pro-table/types.js

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

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/dist/locales/en-US.json

@@ -0,0 +1,28 @@
+{
+  "pro": {
+    "components": {
+      "rex-pro-table": {
+        "action-buttons": {
+          "confirm-execute-operation-is-it": "Are you sure you want to do this?",
+          "confirm-operation": "Confirm operation {label}",
+          "group-label": "Group label not configured",
+          "item-label": "Not configured button label",
+          "please-check-data": "Please check the data"
+        },
+        "column-action-title": "operate",
+        "empty-text": "Please select relevant filter criteria to search.",
+        "form": {
+          "cancel": "Cancel",
+          "determine": "Sure"
+        },
+        "pagination-total": "{total} entries in total"
+      },
+      "filter-form": {
+        "reset": "Reset",
+        "search": "Search",
+        "expand": "Expand",
+        "collapse": "Collapse"
+      }
+    }
+  }
+}

package/dist/locales/zh-CN.json

@@ -0,0 +1,28 @@
+{
+  "pro": {
+    "components": {
+      "rex-pro-table": {
+        "empty-text": "请选择相关筛选条件进行搜索.",
+        "column-action-title": "操作",
+        "pagination-total": "共 {total} 条",
+        "action-buttons": {
+          "please-check-data": "请勾选数据",
+          "confirm-operation": "确认操作{label}",
+          "confirm-execute-operation-is-it": "确认要执行此操作吗？",
+          "item-label": "未配置 button label",
+          "group-label": "未配置 group label"
+        },
+        "form": {
+          "cancel": "取消",
+          "determine": "确定"
+        }
+      },
+      "filter-form": {
+        "reset": "重置",
+        "search": "查询",
+        "expand": "展开",
+        "collapse": "收起"
+      }
+    }
+  }
+}

package/dist/types/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@teamias/rex-pro",
+  "version": "0.0.1",
+  "description": "A react library developed with dumi",
+  "license": "MIT",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "adduser": "npm adduser",
+    "build": "father build",
+    "build:watch": "father dev",
+    "deploy": "changeset && changeset version && npm publish",
+    "dev": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:preview": "dumi preview",
+    "doctor": "father doctor",
+    "lint": "npm run lint:es",
+    "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
+    "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
+    "prepare": "husky install && dumi setup",
+    "prepublishOnly": "father doctor && npm run build",
+    "start": "npm run dev"
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "lint-staged": {
+    "*.{md,json}": [
+      "prettier --write --no-error-on-unmatched-pattern"
+    ],
+    "*.{css,less}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ],
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "@ant-design/pro-components": "^2.8.10",
+    "@teamias/rex-design": "^0.0.3",
+    "ahooks": "^3.9.0",
+    "antd": "^5.26.7",
+    "classnames": "^2.5.1",
+    "dayjs": "^1.11.13",
+    "lodash": "^4.17.21",
+    "radash": "^12.1.1",
+    "react-intl": "^7.1.11",
+    "styled-components": "^6.1.19"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.29.5",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@types/lodash": "^4.17.20",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@umijs/lint": "^4.0.0",
+    "dumi": "^2.4.13",
+    "eslint": "^8.23.0",
+    "father": "^4.1.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "prettier-plugin-organize-imports": "^3.0.0",
+    "prettier-plugin-packagejson": "^2.2.18",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "stylelint": "^14.9.1"
+  },
+  "peerDependencies": {
+    "@ant-design/icons": ">=5.0.0",
+    "@ant-design/pro-components": ">=2.0.0",
+    "@teamias/rex-design": ">=0.0.1",
+    "antd": ">=5.0.0",
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
+    "react-intl": ">=3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "cloudovo"
+  ]
+}