57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
|
|
import { useIntl } from '@umijs/max';
|
|
import { Divider } from 'antd';
|
|
|
|
interface InfoColumnProps {
|
|
fieldList: {
|
|
label: string;
|
|
key: string;
|
|
locale?: boolean;
|
|
render?: (val: any, data: any) => any;
|
|
}[];
|
|
style?: React.CSSProperties;
|
|
data: Record<string, any>;
|
|
}
|
|
const InfoColumn: React.FC<InfoColumnProps> = (props) => {
|
|
const { data, fieldList, style } = props;
|
|
|
|
const intl = useIntl();
|
|
|
|
return (
|
|
<span className="flex" style={style}>
|
|
{fieldList.map((item, index) => {
|
|
return (
|
|
<span key={item.key || index} className="flex-center">
|
|
<span className="flex-column flex-center">
|
|
<span>
|
|
{' '}
|
|
{item.locale
|
|
? intl.formatMessage({ id: item.label })
|
|
: item.label}
|
|
</span>
|
|
<span style={{ color: 'var(--color-white-quaternary)' }}>
|
|
{' '}
|
|
{item.render?.(data[item.key], data) ?? data[item.key]}
|
|
</span>
|
|
</span>
|
|
{index < fieldList.length - 1 ? (
|
|
<Divider
|
|
orientation="vertical"
|
|
style={{
|
|
height: 30,
|
|
marginInline: 12,
|
|
borderColor: 'var(--color-white-light-2)',
|
|
alignSelf: 'center'
|
|
}}
|
|
></Divider>
|
|
) : null}
|
|
</span>
|
|
);
|
|
})}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default InfoColumn;
|