ant-design/components/descriptions/Row.tsx
thinkasany 0745996d65
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
feat: ConfigProvider support classNames and styles for Descriptions (#52120)
* draft

* fix

* fix

* add header, title, extra

* add border preview

* update

* update demo

* add divider

* update width

* update SemanticPreview demo
2025-01-02 14:40:48 +08:00

168 lines
4.0 KiB
TypeScript

import * as React from 'react';
import type { InternalDescriptionsItemType } from '.';
import Cell from './Cell';
import type { DescriptionsContextProps } from './DescriptionsContext';
import DescriptionsContext from './DescriptionsContext';
interface CellConfig {
component: string | [string, string];
type: 'label' | 'content' | 'item';
showLabel?: boolean;
showContent?: boolean;
}
function renderCells(
items: InternalDescriptionsItemType[],
{ colon, prefixCls, bordered }: RowProps,
{
component,
type,
showLabel,
showContent,
labelStyle: rootLabelStyle,
contentStyle: rootContentStyle,
styles: rootStyles,
}: CellConfig & DescriptionsContextProps,
) {
return items.map(
(
{
label,
children,
prefixCls: itemPrefixCls = prefixCls,
className,
style,
labelStyle,
contentStyle,
span = 1,
key,
styles,
},
index,
) => {
if (typeof component === 'string') {
return (
<Cell
key={`${type}-${key || index}`}
className={className}
style={style}
styles={{
label: {
...rootLabelStyle,
...rootStyles?.label,
...labelStyle,
...styles?.label,
},
content: {
...rootContentStyle,
...rootStyles?.content,
...contentStyle,
...styles?.content,
},
}}
span={span}
colon={colon}
component={component}
itemPrefixCls={itemPrefixCls}
bordered={bordered}
label={showLabel ? label : null}
content={showContent ? children : null}
type={type}
/>
);
}
return [
<Cell
key={`label-${key || index}`}
className={className}
style={{
...rootLabelStyle,
...rootStyles?.label,
...style,
...labelStyle,
...styles?.label,
}}
span={1}
colon={colon}
component={component[0]}
itemPrefixCls={itemPrefixCls}
bordered={bordered}
label={label}
type="label"
/>,
<Cell
key={`content-${key || index}`}
className={className}
style={{
...rootContentStyle,
...rootStyles?.content,
...style,
...contentStyle,
...styles?.content,
}}
span={span * 2 - 1}
component={component[1]}
itemPrefixCls={itemPrefixCls}
bordered={bordered}
content={children}
type="content"
/>,
];
},
);
}
export interface RowProps {
prefixCls: string;
vertical: boolean;
row: InternalDescriptionsItemType[];
bordered?: boolean;
colon: boolean;
index: number;
children?: React.ReactNode;
}
const Row: React.FC<RowProps> = (props) => {
const descContext = React.useContext(DescriptionsContext);
const { prefixCls, vertical, row, index, bordered } = props;
if (vertical) {
return (
<>
<tr key={`label-${index}`} className={`${prefixCls}-row`}>
{renderCells(row, props, {
component: 'th',
type: 'label',
showLabel: true,
...descContext,
})}
</tr>
<tr key={`content-${index}`} className={`${prefixCls}-row`}>
{renderCells(row, props, {
component: 'td',
type: 'content',
showContent: true,
...descContext,
})}
</tr>
</>
);
}
return (
<tr key={index} className={`${prefixCls}-row`}>
{renderCells(row, props, {
component: bordered ? ['th', 'td'] : 'td',
type: 'item',
showLabel: true,
showContent: true,
...descContext,
})}
</tr>
);
};
export default Row;