1
This commit is contained in:
+4
@@ -0,0 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import type { DescriptionsItemType, InternalDescriptionsItemType } from '..';
|
||||
import type { ScreenMap } from '../../_util/responsiveObserver';
|
||||
export default function useItems(screens: ScreenMap, items?: DescriptionsItemType[], children?: React.ReactNode): InternalDescriptionsItemType[];
|
||||
+30
@@ -0,0 +1,30 @@
|
||||
import * as React from 'react';
|
||||
import { toArray } from '@rc-component/util';
|
||||
import { isNumber } from '../../_util/is';
|
||||
import { matchScreen } from '../../_util/responsiveObserver';
|
||||
// Convert children into items
|
||||
const transChildren2Items = childNodes => toArray(childNodes).map(node => ({
|
||||
...node?.props,
|
||||
key: node.key
|
||||
}));
|
||||
export default function useItems(screens, items, children) {
|
||||
const mergedItems = React.useMemo(() =>
|
||||
// Take `items` first or convert `children` into items
|
||||
items || transChildren2Items(children), [items, children]);
|
||||
const responsiveItems = React.useMemo(() => mergedItems.map(({
|
||||
span,
|
||||
...restItem
|
||||
}) => {
|
||||
if (span === 'filled') {
|
||||
return {
|
||||
...restItem,
|
||||
filled: true
|
||||
};
|
||||
}
|
||||
return {
|
||||
...restItem,
|
||||
span: isNumber(span) ? span : matchScreen(screens, span)
|
||||
};
|
||||
}), [mergedItems, screens]);
|
||||
return responsiveItems;
|
||||
}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
import type { InternalDescriptionsItemType } from '..';
|
||||
declare const useRow: (mergedColumn: number, items: InternalDescriptionsItemType[]) => InternalDescriptionsItemType[][];
|
||||
export default useRow;
|
||||
+65
@@ -0,0 +1,65 @@
|
||||
import { useMemo } from 'react';
|
||||
import { devUseWarning } from '../../_util/warning';
|
||||
// Calculate the sum of span in a row
|
||||
function getCalcRows(rowItems, mergedColumn) {
|
||||
let rows = [];
|
||||
let tmpRow = [];
|
||||
let exceed = false;
|
||||
let count = 0;
|
||||
rowItems.filter(n => n).forEach(rowItem => {
|
||||
const {
|
||||
filled,
|
||||
...restItem
|
||||
} = rowItem;
|
||||
if (filled) {
|
||||
tmpRow.push(restItem);
|
||||
rows.push(tmpRow);
|
||||
// reset
|
||||
tmpRow = [];
|
||||
count = 0;
|
||||
return;
|
||||
}
|
||||
const restSpan = mergedColumn - count;
|
||||
count += rowItem.span || 1;
|
||||
if (count >= mergedColumn) {
|
||||
if (count > mergedColumn) {
|
||||
exceed = true;
|
||||
tmpRow.push({
|
||||
...restItem,
|
||||
span: restSpan
|
||||
});
|
||||
} else {
|
||||
tmpRow.push(restItem);
|
||||
}
|
||||
rows.push(tmpRow);
|
||||
// reset
|
||||
tmpRow = [];
|
||||
count = 0;
|
||||
} else {
|
||||
tmpRow.push(restItem);
|
||||
}
|
||||
});
|
||||
if (tmpRow.length > 0) {
|
||||
rows.push(tmpRow);
|
||||
}
|
||||
rows = rows.map(rows => {
|
||||
const count = rows.reduce((acc, item) => acc + (item.span || 1), 0);
|
||||
if (count < mergedColumn) {
|
||||
// If the span of the last element in the current row is less than the column, then add its span to the remaining columns
|
||||
const last = rows[rows.length - 1];
|
||||
last.span = mergedColumn - (count - (last.span || 1));
|
||||
return rows;
|
||||
}
|
||||
return rows;
|
||||
});
|
||||
return [rows, exceed];
|
||||
}
|
||||
const useRow = (mergedColumn, items) => {
|
||||
const [rows, exceed] = useMemo(() => getCalcRows(items, mergedColumn), [items, mergedColumn]);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const warning = devUseWarning('Descriptions');
|
||||
process.env.NODE_ENV !== "production" ? warning(!exceed, 'usage', 'Sum of column `span` in a line not match `column` of Descriptions.') : void 0;
|
||||
}
|
||||
return rows;
|
||||
};
|
||||
export default useRow;
|
||||
Reference in New Issue
Block a user