@alicloud/xconsole-rc-description v1.0.0-beta.3

xconsole-rc-description

为阿里云控制台提供信息描述组件。

Usage

import Description from '@alicloud/xconsole-rc-description';
import { Button } from '@alicloud/console-components'

const items = [
  {
    label: '实例 ID',
    dataIndex: 'InstanceId',
  },
  {
    label: '地域',
    dataIndex: 'RegionId',
    visible: false,
  },
  {
    label: '规格',
    dataIndex: 'Config',
    visible: (value) => value === 'xxxxx1',
  },
  {
    label: '创建时间',
    dataIndex: 'CreatedDate',
    visible: (value, dataSource) => dataSource.RegionId === 'cn-hanghou',
  },
]

const dataSource = {
  InstanceId: 'rds-xxxxx',
  RegionId: 'cn-hanghou',
  Config: 'xxxxx',
  CreatedDate: '2019-10-10',
}

export default () => (
  <Description
    title="实例详情"
    items={items}
    dataSource={dataSource}
    actions={<Button type='primary' text>编辑</Button>}
   />
)

APIs

interface IDataFieldItemProps {
  label?: ReactNode;
  dataIndex?: string;
  labelLayout?: any;
  valueLayout?: any;
  render?: (value: any) => ReactElement;
  visible?: boolean | ((value?: any, dataSource?: {}) => boolean);
  children?: ReactNode;
}