@teamix/pro 1.6.0-beta.6 → 2.0.0-beta.1

package/lib/table/index.scss

@@ -1,158 +0,0 @@
-$prefix: 'teamix-pro-table';
-$fullscreenPadding: 24px;
-
-.#{$prefix} {
-  background: var(--table-row-bg, #ffffff);
-  position: relative;
-  &-footer {
-    padding: 8px 0;
-    width: 100%;
-  }
-  &-footer-fixed {
-    position: fixed;
-    z-index: 3;
-    bottom: 0;
-    border-top: 1px solid var(--color-line1-2);
-    box-shadow: var(--shadow-1-up);
-    background: var(--color-fill1-1);
-  }
-  &-footer-has-rowSelection, &-footer-has-action {
-    display: flex;
-    align-items: center;
-    padding: 8px 0;
-    right: 0;
-    width: 100%;
-  }
-  &-footer-left-wrapper {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-  }
-  &-footer-right-wrapper {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-    & > span {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-    }
-  }
-  &-footer-action {
-    margin-left: 16px;
-  }
-  &-footer-checkbox-medium {
-    margin-left: var(--table-cell-padding-left, 16px);
-  }
-  &-footer-checkbox-small {
-    margin-left: var(--table-size-s-cell-padding-left, 8px);
-  }
-  &-selected-msg {
-    color: var(--color-fill1-6);
-    margin-left: 16px;
-  }
-  &-fullscreen {
-    padding: $fullscreenPadding $fullscreenPadding 0 $fullscreenPadding;
-
-    // 去除全屏锁列之后右侧滚动条阴影
-    .next-table-stickylock.next-table-scrolling-to-right {
-      &::after {
-        box-shadow: unset;
-      }
-    }
-
-    .teamix-pro-table-footer {
-      position: fixed;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      padding: 10px $fullscreenPadding 8px $fullscreenPadding;
-      box-shadow: var(--shadow-1-up);
-      background-color: var(--table-row-bg, #ffffff);
-      margin: 0;
-      z-index: 2;
-    }
-
-    .next-table-body {
-      transition: all 0.1s;
-    }
-  }
-  // sort icon
-  .next-table-sort.next-table-header-icon {
-    line-height: 16px;
-    margin-left: 6px;
-    .teamix-icon {
-      position: absolute;
-      width: 12px;
-    }
-    & .current .teamix-icon {
-      color: var(--table-sort-color-current, #0064c8);
-    }
-  }
-  .next-table-empty {
-    padding: 0;
-  }
-  .next-table-wrap-empty {
-    .next-table-body tr td{
-      border-bottom: 0;
-    }
-  }
-}
-
-.teamix-pro-table-footer-suction {
-  margin-bottom: 50px;
-  .teamix-pro-table-footer {
-    position: fixed;
-    bottom: 0;
-    padding: 10px $fullscreenPadding 8px $fullscreenPadding;
-    box-shadow: var(--shadow-1-up);
-    background-color: var(--table-row-bg, #ffffff);
-    border-top: 1px solid var(--color-line1-1);
-    margin: 0;
-    z-index: 2;
-  }
-}
-
-.next-table-empty {
-  --table-empty-padding: 48px;
-}
-
-// 后面在基础组件里面覆盖
-.next-table.next-table td .next-table-cell-wrapper {
-  text-overflow: unset;
-}
-
-.mb8 {
-  margin-bottom: 8px;
-}
-
-.next-table {
-  .next-form-preview {
-    line-height: unset;
-  }
-  &-row {
-    .teamix-pro-field.teamix-pro-field-text .next-form-preview {
-      color: var(--table-row-color);
-    }
-  }
-  &-row.hovered {
-    .teamix-pro-field.teamix-pro-field-text .next-form-preview {
-      color: var(--table-row-hover-color);
-    }
-  }
-}
-
-// 排序icon hover 颜色跟随主题
-.next-table-sort.next-table-header-icon {
-  a:hover {
-    color: var(--color-brand1-5);
-  }
-}
-.teamix-pro-tree-table {
-  .next-table-cell.first {
-    .next-table-cell-wrapper {
-      display: flex;
-      align-items: center;
-    }
-  }
-}

package/lib/table/typing.d.ts

@@ -1,426 +0,0 @@
-/**
- * ProTable 类型定义
- */
-import { ColumnProps, TableProps } from '@alicloudfe/components/types/table';
-import { ProFieldType, ProFieldRenderProps, ProFieldDataSourceItem, EmptyContentProps } from '../field';
-import { QueryFilterProps, ProFormType } from '../form';
-import { ProActionGroupProps, ProActionButtonProps } from '../actions';
-import { PaginationProps } from '@alicloudfe/components/types/pagination';
-import { HeaderProps as ProTableHeaderProps } from '../field';
-import { Method, AxiosRequestConfig } from 'axios';
-import React from 'react';
-import { ProCardProps } from '../card';
-declare type IFieldRenderProps = keyof ProFieldRenderProps;
-/** 列record函数 */
-declare type ProTableCellFunProp = (value: any, index: number, record: any, ...others: any) => any;
-declare type ITableCellRender = {
-    [key in IFieldRenderProps]?: ProFieldRenderProps[key] | ProTableCellFunProp;
-} | ((...other: any) => React.ReactNode);
-declare type TDataService = {
-    /** 翻页器总数 */
-    total?: string | number;
-    /** 表格数据 */
-    data?: any;
-};
-export declare type responsivePaginationType = 'mini' | 'small' | 'simple' | 'normal';
-export declare type ProTableColumnProps = {
-    /**
-     * 会在 title 之后展示一个 icon，hover 之后提示一些信息
-     */
-    tooltip?: string;
-    /**
-     * title 之后展示一个 icon 设置，可传 TeamixIcon 对应的 type，也可以是自定义 Icon
-     */
-    tooltipIcon?: React.ReactNode;
-    /** 对应 ProField 里面的 type */
-    valueType?: ProFieldType;
-    /** 是否隐藏表格列，列配置也不显示 */
-    hidden?: boolean;
-    /** 【列配置】是否默认隐藏表格列，但列配置显示 */
-    columnFilters?: boolean;
-    /** 【列配置】是否禁用隐藏列 */
-    columnFiltersDisabled?: boolean;
-    /** 渲染单元格内容字段 */
-    render?: ITableCellRender;
-    /** 枚举值 */
-    dataSource?: ProFieldDataSourceItem[] | ProTableCellFunProp;
-    /** 表头的过滤菜单项，当值为 true 时，自动使用 dataSource 生成 */
-    filters?: boolean | ProTableColumnsFilterItemProps[];
-    /** 表头的过滤菜单项过滤方式 single 单选 multiple 多选 */
-    filtersMode?: 'single' | 'multiple';
-    /** 表头的过滤菜单项在搜索之前的参数操作 */
-    beforeFilter?: (rules: string[]) => string;
-    /** 表头的过滤菜单宽度 */
-    filtersWidth?: string | number;
-    /** 操作组配置 */
-    actionSchema?: ProActionGroupProps;
-    /** 指定列对应的字段，支持`a.b`形式的快速取值 和 数组取值 */
-    dataIndex?: string | string[];
-    /** 指定 valueType 为日期时间格式时，可以格式化日期时间 */
-    format?: string;
-    /** 多级表头 **/
-    children?: ProTableColumnProps[];
-    /** ProField 其他配置项 */
-    props?: any;
-} & Omit<ColumnProps, 'filters' | 'dataIndex' | 'filtersMode' | 'children'>;
-export declare type ProColumnProps = ProTableColumnProps;
-export declare type ProTableProps = {
-    /** ProColums 定义，取代 Table 的 columns */
-    columns: ProTableColumnProps[];
-    /** 请求地址 */
-    url?: string;
-    /** 请求方法 */
-    method?: Method;
-    /** 请求参数 */
-    params?: {
-        [propName: string]: any;
-    };
-    /** sort 排序请求参数处理函数 */
-    formatSort?: (sort: object) => object;
-    /** 如需自定义调用参数格式，则可以设定此值在请求前对 params 进行自定义，如果返回false则可以阻止请求 */
-    formatParams?: ((params: any) => typeof params) | string;
-    /** 对返回值的 data，total 进行映射处理  */
-    formatResult?: TDataService | ((res: any) => TDataService) | string;
-    /** 请求成功后经过 formatResult 转换后的回调 */
-    onFormatResult?: (data: any[]) => void;
-    /** 是否第一次加载时就发起请求 */
-    requestWhenMount?: boolean;
-    /** 内部请求每次成功后的回调 */
-    onSuccess?: (res: any) => void;
-    /** 内部请求失败时的回调 */
-    onError?: (error: Error) => void;
-    /** 自定义的请求配置 */
-    requestConfig?: AxiosRequestConfig;
-    /** 翻页页数的请求参数名  */
-    pageKey?: string;
-    /** 翻页器页数对应字段 */
-    pageSizeKey?: string;
-    /** 翻页器每页显示的条数 */
-    pageSize?: number;
-    /** 每页显示选择器可选值 */
-    pageSizeList?: PaginationProps['pageSizeList'];
-    /** 透传给翻页器的属性  */
-    paginationProps?: PaginationProps;
-    /** 是否显示翻页器  */
-    showPagination?: boolean;
-    /** 手动指定响应式翻页器的 type */
-    responsivePaginationType?: responsivePaginationType;
-    /** 是否使用内置的 rowSelection */
-    useRowSelection?: boolean;
-    /** 内置 rowSelection 变化时的回调 */
-    onChangeRowSelection?: (selectedRowKeys: string[]) => void;
-    /** 获取内置 rowSelection */
-    getRowSelection?: (rowSelection: innerRowSelectionType) => void;
-    /** 表格底部（左侧）配置 */
-    footerAction?: ProActionGroupProps | React.ReactNode;
-    /** 表格底部（右层）配置 */
-    footer?: React.ReactNode;
-    /**
-     * @deprecated 已废弃 建议用 dataFilter 中的 filterDebounce 代替
-     * 筛选区自动搜索的防抖时间（毫秒）
-     */
-    filterDebounce?: number;
-    /** ProTable action 的引用，便于手动触发一些方法  */
-    actionRef?: React.MutableRefObject<ProTableActionType | undefined>;
-    /** 是否首次加载渲染骨架屏  */
-    showSkeleton?: boolean;
-    /** 渲染骨架屏条数  */
-    skeletonSize?: number;
-    /** 表格主题 className */
-    tableClassName?: string;
-    /** 非全屏模式下是否吸底 默认状态下取用 ProPageContainer 作为参照物。如果传入了 Dom，则取用 Dom 作为参照物 */
-    footerSuction?: boolean | Element;
-    /** 当满足条件时开启自动刷新，返回值为自动刷新间隔时间，如果返回 0 或 false 则停止自动刷新，每次触发翻页、搜索都将重置时间 */
-    autoRefresh?: ((dataSource: any[]) => number | boolean) | boolean;
-    /** 自动刷新配置 */
-    autoRefreshProps?: {
-        /** 可选间隔列表 **/
-        dataSource?: {
-            label?: React.ReactNode;
-            value?: number;
-        }[];
-    };
-    /** 自定义请求方法，必需返回 success，data 字段，如果需要手动分页 total 也是必需的 */
-    customRequest?: (params: any) => Promise<{
-        success: boolean;
-        data: any[];
-        total?: number;
-    }>;
-    /** 翻页时是否保留之前批量选择数据 */
-    reserveSelectedRecords?: boolean;
-    /** 默认漏斗过滤条件 */
-    defaultFilterParams?: {
-        [key: string]: any[] | any;
-    };
-    /** 禁用掉批量选择中的全选 */
-    disableSelectAll?: boolean;
-    /** 接收外部传来的 context，eg: dialog-table */
-    context?: any;
-    /** 是否固定表格主体（开启后横向滚动条会固定在底部） */
-    fixedTableBody?: boolean;
-    /** 用于埋点 */
-    'data-teamix-spm'?: string;
-    /** 是否切换卡片视角 **/
-    switchCardView?: boolean;
-    /** 卡片视角配置 **/
-    cardViewProps?: ProTableCardProps;
-    /** 默认展示维度 **/
-    defaultView?: 'table' | 'card';
-    /** 空状态配置 **/
-    emptyProps?: EmptyContentProps;
-    /** 是否绑定 url **/
-    bindUrl?: boolean;
-    /** 绑定 url 配置 **/
-    bindUrlProps?: ProTableBindUrlProps;
-    /** 当前页数据被删除完后，是否跳转回第一页 **/
-    autoRedirect?: boolean;
-    /** 使用超大数据模式 **/
-    useMaxData?: boolean;
-} & Omit<TableProps, 'columns'> & ProTableTopAreaProps;
-export declare type rowSelectionType = {
-    getProps?: (record: any, index: number) => any;
-    onChange?: (selectedRowKeys: Array<any>, records: Array<any>) => void;
-    onSelect?: (selected: boolean, record: any, records: Array<any>) => void;
-    onSelectAll?: (selected: boolean, records: Array<any>) => void;
-    selectedRowKeys?: Array<any>;
-    selectedRecords?: any[];
-    mode?: 'single' | 'multiple';
-    titleProps?: () => any;
-    columnProps?: () => any;
-    titleAddons?: () => any;
-};
-export declare type innerRowSelectionType = {
-    rowSelection: rowSelectionType;
-    selectedRowKeys: string[];
-    setSelectedRowKeys: (selectedRowKeys: string[]) => void;
-    selectedRecords: any[];
-    setSelectedRecords: (selectedRecords: any[]) => void;
-};
-export declare type ProTableActionType = {
-    /** 全屏展示 */
-    fullScreen?: () => boolean;
-    /** 设置显示列 */
-    setColumn?: (newColumns: ProColumnProps[], update?: boolean) => void;
-    /** 表格尺寸 */
-    size?: 'small' | 'medium';
-    /** 设置表格大小 */
-    setSize?: (mode: 'small' | 'medium') => void;
-    /** 刷新表格 */
-    refresh?: (params?: any) => void;
-    /*** 表格内部请求方法 */
-    request?: (params?: any) => void;
-    /** 重置表格 */
-    reset?: () => void;
-    /** 表格选择相关属性 */
-    rowSelection?: innerRowSelectionType | rowSelectionType;
-    /** 清空表格选择 */
-    clearRowSelection?: () => void;
-    /** 过滤 DataSource */
-    filterDataSource?: (dataIndex: string) => void;
-    /** 翻页器当前信息 */
-    pageInfo?: {
-        /** 总数 */
-        total?: number;
-        /** 当前页 */
-        current?: number;
-        /** 每页数据量 */
-        pageSize?: number;
-        /** 翻页页数的请求参数名*/
-        targetPageKey?: string;
-        /** 翻页单页数量的请求参数名 */
-        targetPageSizeKey?: string;
-    };
-    /** 重置翻页器为1，不发送请求 */
-    resetPage?: () => void;
-    nextPage?: () => void;
-    /** 获取数据过滤区表单实例 */
-    dataFilterForm?: ProFormType;
-    /** 用于在 mount 的时候获取到表单 ref */
-    dataFilterFormRef?: React.MutableRefObject<ProFormType>;
-    normalDataFilterForm?: ProFormType;
-    fullscreenDataFilterForm?: ProFormType;
-    filterEnableRef?: any;
-    /** 表格当前的数据 */
-    data?: any[];
-    /** 切换视角 **/
-    switchView?: (view: 'card' | 'table') => void;
-    /** 设置数据源 **/
-    setData?: (data: any[]) => void;
-    setCardViewScrollPosition?: (scrollTop: number) => void;
-    /** 刷新定时器间隔时间 */
-    setAutoRefreshTimers?: (timers: number) => void;
-    /** 清除刷新定时器 */
-    clearAutoRefreshTimers?: () => void;
-} & ProTableActionTypeMutations;
-/** action State 定义 */
-export declare type ProTableActionTypeMutations = {
-    /** 获取state 状态 */
-    getState?: () => ProTableActionTypeState;
-    /** 设置state 状态 */
-    setState?: (key: string, value: any) => void;
-    /** 设置全屏状态 */
-    setFullScreenState?: (state: boolean) => void;
-    /** 绑定state监听事件 */
-    on?: (...args: any) => void;
-    /** 销毁监听事件 */
-    off?: (...args: any) => void;
-    /** 设置 列 过滤规则 */
-    setFilterRules?: (rules: ProTableColumnsFilterRulesItem) => void;
-    /** 获取 列 过滤规则 */
-    getFilterRules?: () => object;
-    /** 重新计算表格maxHeight高度 */
-    resetTableMaxBodyHeight?: (offset: number) => void;
-    /** 列筛选规则 */
-    filterColumns?: any[];
-    /** 获取所有 on 监听事件 */
-    getCallback?: () => any;
-};
-/** action Mutations 定义 */
-export declare type ProTableActionTypeState = {
-    fullScreenState: boolean;
-    filterRules: ProTableColumnsFilterRulesItem;
-    filterColumns: ProTableColumnProps[];
-    [key: string]: any;
-};
-export declare type ProTableDataFilterProps = {
-    searchUndefined?: boolean;
-    /** 搜索时是否传入值为空字符串的参数，默认不传 */
-    searchEmptyString?: boolean;
-    /** 自定义内容 */
-    content?: React.ReactNode;
-} & QueryFilterProps;
-export declare type dataFilterProps = ProTableDataFilterProps;
-export declare type ProTableTopAreaProps = {
-    /** 标题区 */
-    header?: ProTableHeaderProps;
-    /** 主操作区 */
-    mainAction?: ProActionGroupProps | React.ReactNode;
-    /** 工具栏区 */
-    toolBar?: boolean | ProTableToolBarItem[];
-    /** 是否开启工具栏自适应 */
-    toolBarAutoWidth?: boolean;
-    /** 快捷操作区 */
-    extra?: ProActionButtonProps | React.ReactNode | React.ReactNode[];
-    /** 数据过滤区 */
-    dataFilter?: ProTableDataFilterProps;
-    /** 数据过滤区下方自定义区域 */
-    afterDataFilter?: React.ReactNode;
-    /** 传给 QueryFilter 的 formRef */
-    dataFilterFormRef?: any;
-    /** 排序、筛选列展示状态 */
-    filterColumnType?: 'dialog' | 'dropdown' | 'auto';
-};
-/** 单个工具栏 */
-export declare type ProTableToolBarItem = React.ReactNode | 'refresh' | 'density' | 'filterColumn' | 'fullscreen';
-export declare type toolBarItem = ProTableToolBarItem;
-export declare type ProTableLayoutProps = {
-    actionRef: React.MutableRefObject<ProTableActionType | undefined>;
-    columns?: ProTableColumnProps[];
-    rowSelection?: innerRowSelectionType | rowSelectionType;
-    fullScreenState?: boolean;
-    dataTeamixSpm?: string;
-    switchCardView?: boolean;
-    defaultView?: 'table' | 'card';
-    autoRefresh?: ProTableProps['autoRefresh'];
-    autoRefreshProps?: ProTableProps['autoRefreshProps'];
-    bindUrl?: ProTableProps['bindUrl'];
-    bindUrlProps?: ProTableProps['bindUrlProps'];
-} & ProTableTopAreaProps;
-/** columns 列过滤 */
-export declare type ProTableColumnsFilterItemProps = {
-    /** 绑定值 */
-    value?: string | boolean | number;
-    /** 显示值 */
-    label?: React.ReactNode;
-};
-/** columns 列过滤规则 item （action ref state用） */
-export declare type ProTableColumnsFilterRulesItem = {
-    [key: string]: {
-        /** 原始规则 */
-        rules: string[];
-        /** 处理过后的作为params的规则 */
-        params: string;
-    };
-};
-/** 非全屏模式下的吸底 useState类型定义 */
-export declare type parentPositionProps = {
-    offsetLeft: number;
-    offsetRight: number;
-};
-/** card props **/
-export declare type ProTableCardProps = {
-    /** 标题 dataIndex **/
-    title?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps) | ((index: number, record: any) => ProTableColumnProps['dataIndex'] | ProTableColumnProps);
-    /** 副标题 dataIndex **/
-    subTitle?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps) | ((index: number, record: any) => ProTableColumnProps['dataIndex'] | ProTableColumnProps);
-    /** 内容区域 dataIndex **/
-    content?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[] | ((index: number, record: any) => (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[]);
-    /** extra 区域 **/
-    extra?: (ProActionGroupProps | React.ReactNode | ProTableColumnProps['dataIndex'])[] | ((index: number, record: any) => (ProActionGroupProps | React.ReactNode | ProTableColumnProps['dataIndex'])[]);
-    /** 标签区域 **/
-    tags?: (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[] | ((index: number, record: any) => (ProTableColumnProps['dataIndex'] | ProTableColumnProps)[]);
-    /** 分页器条数 **/
-    pageSize?: 12 | 24 | 48 | 96 | number;
-    /** 卡片区域滚动高度 **/
-    scrollHeight?: number | string;
-    /** 自动加载下一页 **/
-    autoLoadNextPage?: boolean;
-    /** 滚动容器 用于监听触底事件 **/
-    scrollDom?: HTMLElement;
-    /** 触底事件 **/
-    onScrollBottom?: () => void;
-    /** 使用表格分页 **/
-    useTablePagination?: boolean;
-    /** 使用响应式 **/
-    cardResponsiveProps?: {
-        xxs?: number;
-        xs?: number;
-        s?: number;
-        m?: number;
-        l?: number;
-        xl?: number;
-    };
-    /** 卡片配置 **/
-    cardProps?: {
-        [key in keyof ProCardProps]?: ProCardProps[key] | ((index: number, record: any) => ProCardProps[key]);
-    };
-    /** 是否展示卡片骨架 **/
-    showSkeleton?: boolean;
-};
-/** card 视角 Props （内部组件） **/
-export declare type ProTableCardViewProps = {
-    /** 卡片视角配置 **/
-    cardViewProps?: ProTableCardProps;
-    /** 数据源 **/
-    dataSource?: any[];
-    /** 原始 columns **/
-    originColumns?: any[];
-    /** 处理过后的 columns **/
-    columns?: any[];
-    /** 加载动画 **/
-    loading?: boolean;
-    /** 上下文 **/
-    context?: any;
-    actionRef?: React.MutableRefObject<ProTableActionType | undefined>;
-    /** 卡片区域滚动高度 **/
-    scrollHeight?: number | string;
-    /** 骨架屏状态 **/
-    showSkeleton?: boolean;
-    /** ProCard 卡片配置 **/
-    cardProps?: ProTableCardProps['cardProps'];
-    /** 表格分页器参数 **/
-    tablePaginationProps?: PaginationProps;
-    /** 空数据配置 **/
-    emptyProps?: ProTableProps['emptyProps'];
-    /** 自定义渲染空数据 **/
-    emptyContent?: ProTableProps['emptyContent'];
-};
-export declare type ProTableBindUrlProps = {
-    /** 翻页器区域 **/
-    pagination?: boolean;
-    /** 搜索区域 **/
-    filters?: boolean;
-    /** 表格标题过滤器区域 **/
-    headerFilters?: boolean;
-};
-export {};

package/lib/table/typing.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/lib/table/utils/columnRender.d.ts

@@ -1,13 +0,0 @@
-/**
- * 渲染列的逻辑函数
- */
-import React from 'react';
-import { ProTableColumnProps, ProTableActionType, ProTableProps } from '../typing';
-/**
- * 增加了 icon 的功能 render title
- */
-export declare const renderColumnsTitle: (item: ProTableColumnProps, actionRef: React.MutableRefObject<ProTableActionType | undefined>, bindUrl?: ProTableProps['bindUrl'], bindUrlProps?: ProTableProps['bindUrlProps']) => JSX.Element;
-/**
- * 负责单元格的具体渲染
- */
-export declare const renderCell: (value: any, item: ProTableColumnProps, index: number, record: any, actionRef: React.MutableRefObject<ProTableActionType | undefined>, context?: any, dataTeamixSpm?: string) => JSX.Element;