123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417 |
- "use strict";
- "use client";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var React = _interopRequireWildcard(require("react"));
- var _classnames = _interopRequireDefault(require("classnames"));
- var _rcTable = require("rc-table");
- var _useColumns = require("rc-table/lib/hooks/useColumns");
- var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
- var _useProxyImperativeHandle = _interopRequireDefault(require("../_util/hooks/useProxyImperativeHandle"));
- var _scrollTo = _interopRequireDefault(require("../_util/scrollTo"));
- var _warning = require("../_util/warning");
- var _configProvider = _interopRequireDefault(require("../config-provider"));
- var _context = require("../config-provider/context");
- var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
- var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
- var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
- var _useBreakpoint = _interopRequireDefault(require("../grid/hooks/useBreakpoint"));
- var _en_US = _interopRequireDefault(require("../locale/en_US"));
- var _pagination = _interopRequireDefault(require("../pagination"));
- var _spin = _interopRequireDefault(require("../spin"));
- var _internal = require("../theme/internal");
- var _ExpandIcon = _interopRequireDefault(require("./ExpandIcon"));
- var _useContainerWidth = _interopRequireDefault(require("./hooks/useContainerWidth"));
- var _useFilter = _interopRequireWildcard(require("./hooks/useFilter"));
- var _useLazyKVMap = _interopRequireDefault(require("./hooks/useLazyKVMap"));
- var _usePagination = _interopRequireWildcard(require("./hooks/usePagination"));
- var _useSelection = _interopRequireDefault(require("./hooks/useSelection"));
- var _useSorter = _interopRequireWildcard(require("./hooks/useSorter"));
- var _useTitleColumns = _interopRequireDefault(require("./hooks/useTitleColumns"));
- var _RcTable = _interopRequireDefault(require("./RcTable"));
- var _VirtualTable = _interopRequireDefault(require("./RcTable/VirtualTable"));
- var _style = _interopRequireDefault(require("./style"));
- const EMPTY_LIST = [];
- const InternalTable = (props, ref) => {
- var _a, _b;
- const {
- prefixCls: customizePrefixCls,
- className,
- rootClassName,
- style,
- size: customizeSize,
- bordered,
- dropdownPrefixCls: customizeDropdownPrefixCls,
- dataSource,
- pagination,
- rowSelection,
- rowKey = 'key',
- rowClassName,
- columns,
- children,
- childrenColumnName: legacyChildrenColumnName,
- onChange,
- getPopupContainer,
- loading,
- expandIcon,
- expandable,
- expandedRowRender,
- expandIconColumnIndex,
- indentSize,
- scroll,
- sortDirections,
- locale,
- showSorterTooltip = {
- target: 'full-header'
- },
- virtual
- } = props;
- const warning = (0, _warning.devUseWarning)('Table');
- if (process.env.NODE_ENV !== 'production') {
- process.env.NODE_ENV !== "production" ? warning(!(typeof rowKey === 'function' && rowKey.length > 1), 'usage', '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.') : void 0;
- }
- const baseColumns = React.useMemo(() => columns || (0, _useColumns.convertChildrenToColumns)(children), [columns, children]);
- const needResponsive = React.useMemo(() => baseColumns.some(col => col.responsive), [baseColumns]);
- const screens = (0, _useBreakpoint.default)(needResponsive);
- const mergedColumns = React.useMemo(() => {
- const matched = new Set(Object.keys(screens).filter(m => screens[m]));
- return baseColumns.filter(c => !c.responsive || c.responsive.some(r => matched.has(r)));
- }, [baseColumns, screens]);
- const tableProps = (0, _omit.default)(props, ['className', 'style', 'columns']);
- const {
- locale: contextLocale = _en_US.default,
- direction,
- table,
- renderEmpty,
- getPrefixCls,
- getPopupContainer: getContextPopupContainer
- } = React.useContext(_context.ConfigContext);
- const mergedSize = (0, _useSize.default)(customizeSize);
- const tableLocale = Object.assign(Object.assign({}, contextLocale.Table), locale);
- const rawData = dataSource || EMPTY_LIST;
- const prefixCls = getPrefixCls('table', customizePrefixCls);
- const dropdownPrefixCls = getPrefixCls('dropdown', customizeDropdownPrefixCls);
- const [, token] = (0, _internal.useToken)();
- const rootCls = (0, _useCSSVarCls.default)(prefixCls);
- const [wrapCSSVar, hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
- const mergedExpandable = Object.assign(Object.assign({
- childrenColumnName: legacyChildrenColumnName,
- expandIconColumnIndex
- }, expandable), {
- expandIcon: (_a = expandable === null || expandable === void 0 ? void 0 : expandable.expandIcon) !== null && _a !== void 0 ? _a : (_b = table === null || table === void 0 ? void 0 : table.expandable) === null || _b === void 0 ? void 0 : _b.expandIcon
- });
- const {
- childrenColumnName = 'children'
- } = mergedExpandable;
- const expandType = React.useMemo(() => {
- if (rawData.some(item => item === null || item === void 0 ? void 0 : item[childrenColumnName])) {
- return 'nest';
- }
- if (expandedRowRender || (expandable === null || expandable === void 0 ? void 0 : expandable.expandedRowRender)) {
- return 'row';
- }
- return null;
- }, [rawData]);
- const internalRefs = {
- body: React.useRef(null)
- };
- // ============================ Width =============================
- const getContainerWidth = (0, _useContainerWidth.default)(prefixCls);
- // ============================= Refs =============================
- const rootRef = React.useRef(null);
- const tblRef = React.useRef(null);
- (0, _useProxyImperativeHandle.default)(ref, () => Object.assign(Object.assign({}, tblRef.current), {
- nativeElement: rootRef.current
- }));
- // ============================ RowKey ============================
- const getRowKey = React.useMemo(() => {
- if (typeof rowKey === 'function') {
- return rowKey;
- }
- return record => record === null || record === void 0 ? void 0 : record[rowKey];
- }, [rowKey]);
- const [getRecordByKey] = (0, _useLazyKVMap.default)(rawData, childrenColumnName, getRowKey);
- // ============================ Events =============================
- const changeEventInfo = {};
- const triggerOnChange = (info, action, reset = false) => {
- var _a, _b, _c, _d;
- const changeInfo = Object.assign(Object.assign({}, changeEventInfo), info);
- if (reset) {
- (_a = changeEventInfo.resetPagination) === null || _a === void 0 ? void 0 : _a.call(changeEventInfo);
- // Reset event param
- if ((_b = changeInfo.pagination) === null || _b === void 0 ? void 0 : _b.current) {
- changeInfo.pagination.current = 1;
- }
- // Trigger pagination events
- if (pagination) {
- (_c = pagination.onChange) === null || _c === void 0 ? void 0 : _c.call(pagination, 1, (_d = changeInfo.pagination) === null || _d === void 0 ? void 0 : _d.pageSize);
- }
- }
- if (scroll && scroll.scrollToFirstRowOnChange !== false && internalRefs.body.current) {
- (0, _scrollTo.default)(0, {
- getContainer: () => internalRefs.body.current
- });
- }
- onChange === null || onChange === void 0 ? void 0 : onChange(changeInfo.pagination, changeInfo.filters, changeInfo.sorter, {
- currentDataSource: (0, _useFilter.getFilterData)((0, _useSorter.getSortData)(rawData, changeInfo.sorterStates, childrenColumnName), changeInfo.filterStates, childrenColumnName),
- action
- });
- };
- /**
- * Controlled state in `columns` is not a good idea that makes too many code (1000+ line?) to read
- * state out and then put it back to title render. Move these code into `hooks` but still too
- * complex. We should provides Table props like `sorter` & `filter` to handle control in next big
- * version.
- */
- // ============================ Sorter =============================
- const onSorterChange = (sorter, sorterStates) => {
- triggerOnChange({
- sorter,
- sorterStates
- }, 'sort', false);
- };
- const [transformSorterColumns, sortStates, sorterTitleProps, getSorters] = (0, _useSorter.default)({
- prefixCls,
- mergedColumns,
- onSorterChange,
- sortDirections: sortDirections || ['ascend', 'descend'],
- tableLocale,
- showSorterTooltip
- });
- const sortedData = React.useMemo(() => (0, _useSorter.getSortData)(rawData, sortStates, childrenColumnName), [rawData, sortStates]);
- changeEventInfo.sorter = getSorters();
- changeEventInfo.sorterStates = sortStates;
- // ============================ Filter ============================
- const onFilterChange = (filters, filterStates) => {
- triggerOnChange({
- filters,
- filterStates
- }, 'filter', true);
- };
- const [transformFilterColumns, filterStates, filters] = (0, _useFilter.default)({
- prefixCls,
- locale: tableLocale,
- dropdownPrefixCls,
- mergedColumns,
- onFilterChange,
- getPopupContainer: getPopupContainer || getContextPopupContainer,
- rootClassName: (0, _classnames.default)(rootClassName, rootCls)
- });
- const mergedData = (0, _useFilter.getFilterData)(sortedData, filterStates, childrenColumnName);
- changeEventInfo.filters = filters;
- changeEventInfo.filterStates = filterStates;
- // ============================ Column ============================
- const columnTitleProps = React.useMemo(() => {
- const mergedFilters = {};
- Object.keys(filters).forEach(filterKey => {
- if (filters[filterKey] !== null) {
- mergedFilters[filterKey] = filters[filterKey];
- }
- });
- return Object.assign(Object.assign({}, sorterTitleProps), {
- filters: mergedFilters
- });
- }, [sorterTitleProps, filters]);
- const [transformTitleColumns] = (0, _useTitleColumns.default)(columnTitleProps);
- // ========================== Pagination ==========================
- const onPaginationChange = (current, pageSize) => {
- triggerOnChange({
- pagination: Object.assign(Object.assign({}, changeEventInfo.pagination), {
- current,
- pageSize
- })
- }, 'paginate');
- };
- const [mergedPagination, resetPagination] = (0, _usePagination.default)(mergedData.length, onPaginationChange, pagination);
- changeEventInfo.pagination = pagination === false ? {} : (0, _usePagination.getPaginationParam)(mergedPagination, pagination);
- changeEventInfo.resetPagination = resetPagination;
- // ============================= Data =============================
- const pageData = React.useMemo(() => {
- if (pagination === false || !mergedPagination.pageSize) {
- return mergedData;
- }
- const {
- current = 1,
- total,
- pageSize = _usePagination.DEFAULT_PAGE_SIZE
- } = mergedPagination;
- process.env.NODE_ENV !== "production" ? warning(current > 0, 'usage', '`current` should be positive number.') : void 0;
- // Dynamic table data
- if (mergedData.length < total) {
- if (mergedData.length > pageSize) {
- process.env.NODE_ENV !== "production" ? warning(false, 'usage', '`dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.') : void 0;
- return mergedData.slice((current - 1) * pageSize, current * pageSize);
- }
- return mergedData;
- }
- return mergedData.slice((current - 1) * pageSize, current * pageSize);
- }, [!!pagination, mergedData, mergedPagination === null || mergedPagination === void 0 ? void 0 : mergedPagination.current, mergedPagination === null || mergedPagination === void 0 ? void 0 : mergedPagination.pageSize, mergedPagination === null || mergedPagination === void 0 ? void 0 : mergedPagination.total]);
- // ========================== Selections ==========================
- const [transformSelectionColumns, selectedKeySet] = (0, _useSelection.default)({
- prefixCls,
- data: mergedData,
- pageData,
- getRowKey,
- getRecordByKey,
- expandType,
- childrenColumnName,
- locale: tableLocale,
- getPopupContainer: getPopupContainer || getContextPopupContainer
- }, rowSelection);
- const internalRowClassName = (record, index, indent) => {
- let mergedRowClassName;
- if (typeof rowClassName === 'function') {
- mergedRowClassName = (0, _classnames.default)(rowClassName(record, index, indent));
- } else {
- mergedRowClassName = (0, _classnames.default)(rowClassName);
- }
- return (0, _classnames.default)({
- [`${prefixCls}-row-selected`]: selectedKeySet.has(getRowKey(record, index))
- }, mergedRowClassName);
- };
- // ========================== Expandable ==========================
- // Pass origin render status into `rc-table`, this can be removed when refactor with `rc-table`
- mergedExpandable.__PARENT_RENDER_ICON__ = mergedExpandable.expandIcon;
- // Customize expandable icon
- mergedExpandable.expandIcon = mergedExpandable.expandIcon || expandIcon || (0, _ExpandIcon.default)(tableLocale);
- // Adjust expand icon index, no overwrite expandIconColumnIndex if set.
- if (expandType === 'nest' && mergedExpandable.expandIconColumnIndex === undefined) {
- mergedExpandable.expandIconColumnIndex = rowSelection ? 1 : 0;
- } else if (mergedExpandable.expandIconColumnIndex > 0 && rowSelection) {
- mergedExpandable.expandIconColumnIndex -= 1;
- }
- // Indent size
- if (typeof mergedExpandable.indentSize !== 'number') {
- mergedExpandable.indentSize = typeof indentSize === 'number' ? indentSize : 15;
- }
- // ============================ Render ============================
- const transformColumns = React.useCallback(innerColumns => transformTitleColumns(transformSelectionColumns(transformFilterColumns(transformSorterColumns(innerColumns)))), [transformSorterColumns, transformFilterColumns, transformSelectionColumns]);
- let topPaginationNode;
- let bottomPaginationNode;
- if (pagination !== false && (mergedPagination === null || mergedPagination === void 0 ? void 0 : mergedPagination.total)) {
- let paginationSize;
- if (mergedPagination.size) {
- paginationSize = mergedPagination.size;
- } else {
- paginationSize = mergedSize === 'small' || mergedSize === 'middle' ? 'small' : undefined;
- }
- const renderPagination = position => (/*#__PURE__*/React.createElement(_pagination.default, Object.assign({}, mergedPagination, {
- className: (0, _classnames.default)(`${prefixCls}-pagination ${prefixCls}-pagination-${position}`, mergedPagination.className),
- size: paginationSize
- })));
- const defaultPosition = direction === 'rtl' ? 'left' : 'right';
- const {
- position
- } = mergedPagination;
- if (position !== null && Array.isArray(position)) {
- const topPos = position.find(p => p.includes('top'));
- const bottomPos = position.find(p => p.includes('bottom'));
- const isDisable = position.every(p => `${p}` === 'none');
- if (!topPos && !bottomPos && !isDisable) {
- bottomPaginationNode = renderPagination(defaultPosition);
- }
- if (topPos) {
- topPaginationNode = renderPagination(topPos.toLowerCase().replace('top', ''));
- }
- if (bottomPos) {
- bottomPaginationNode = renderPagination(bottomPos.toLowerCase().replace('bottom', ''));
- }
- } else {
- bottomPaginationNode = renderPagination(defaultPosition);
- }
- }
- // >>>>>>>>> Spinning
- let spinProps;
- if (typeof loading === 'boolean') {
- spinProps = {
- spinning: loading
- };
- } else if (typeof loading === 'object') {
- spinProps = Object.assign({
- spinning: true
- }, loading);
- }
- const wrapperClassNames = (0, _classnames.default)(cssVarCls, rootCls, `${prefixCls}-wrapper`, table === null || table === void 0 ? void 0 : table.className, {
- [`${prefixCls}-wrapper-rtl`]: direction === 'rtl'
- }, className, rootClassName, hashId);
- const mergedStyle = Object.assign(Object.assign({}, table === null || table === void 0 ? void 0 : table.style), style);
- // ========== empty ==========
- const mergedEmptyNode = React.useMemo(() => {
- // When dataSource is null/undefined (detected by reference equality with EMPTY_LIST),
- // and the table is in a loading state, we only show the loading spinner without the empty placeholder.
- // For empty arrays (datasource={[]}), both loading and empty states would normally be shown.
- // discussion https://github.com/ant-design/ant-design/issues/54601#issuecomment-3158091383
- if ((spinProps === null || spinProps === void 0 ? void 0 : spinProps.spinning) && rawData === EMPTY_LIST) {
- return null;
- }
- if (typeof (locale === null || locale === void 0 ? void 0 : locale.emptyText) !== 'undefined') {
- return locale.emptyText;
- }
- return (renderEmpty === null || renderEmpty === void 0 ? void 0 : renderEmpty('Table')) || /*#__PURE__*/React.createElement(_defaultRenderEmpty.default, {
- componentName: "Table"
- });
- }, [spinProps === null || spinProps === void 0 ? void 0 : spinProps.spinning, rawData, locale === null || locale === void 0 ? void 0 : locale.emptyText, renderEmpty]);
- // ========================== Render ==========================
- const TableComponent = virtual ? _VirtualTable.default : _RcTable.default;
- // >>> Virtual Table props. We set height here since it will affect height collection
- const virtualProps = {};
- const listItemHeight = React.useMemo(() => {
- const {
- fontSize,
- lineHeight,
- lineWidth,
- padding,
- paddingXS,
- paddingSM
- } = token;
- const fontHeight = Math.floor(fontSize * lineHeight);
- switch (mergedSize) {
- case 'middle':
- return paddingSM * 2 + fontHeight + lineWidth;
- case 'small':
- return paddingXS * 2 + fontHeight + lineWidth;
- default:
- return padding * 2 + fontHeight + lineWidth;
- }
- }, [token, mergedSize]);
- if (virtual) {
- virtualProps.listItemHeight = listItemHeight;
- }
- return wrapCSSVar(/*#__PURE__*/React.createElement("div", {
- ref: rootRef,
- className: wrapperClassNames,
- style: mergedStyle
- }, /*#__PURE__*/React.createElement(_spin.default, Object.assign({
- spinning: false
- }, spinProps), topPaginationNode, /*#__PURE__*/React.createElement(TableComponent, Object.assign({}, virtualProps, tableProps, {
- ref: tblRef,
- columns: mergedColumns,
- direction: direction,
- expandable: mergedExpandable,
- prefixCls: prefixCls,
- className: (0, _classnames.default)({
- [`${prefixCls}-middle`]: mergedSize === 'middle',
- [`${prefixCls}-small`]: mergedSize === 'small',
- [`${prefixCls}-bordered`]: bordered,
- [`${prefixCls}-empty`]: rawData.length === 0
- }, cssVarCls, rootCls, hashId),
- data: pageData,
- rowKey: getRowKey,
- rowClassName: internalRowClassName,
- emptyText: mergedEmptyNode,
- // Internal
- internalHooks: _rcTable.INTERNAL_HOOKS,
- internalRefs: internalRefs,
- transformColumns: transformColumns,
- getContainerWidth: getContainerWidth,
- measureRowRender: measureRow => (/*#__PURE__*/React.createElement(_configProvider.default, {
- getPopupContainer: node => node
- }, measureRow))
- })), bottomPaginationNode)));
- };
- var _default = exports.default = /*#__PURE__*/React.forwardRef(InternalTable);
|