whale-docgen-render

财鲸组件文档渲染

安装方法

$ tnpm install whale-docgen-render --save

如何iceworks中使用组件

API

DocStructureCollapse

折叠样式文档组件。

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------ | ------- | ------ | ------ | | props (必填) | 需要渲染的组件字段 | WmProps | | |

DocStructureTypesCollapse

折叠样式文档组件。

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------ | ----------------- | ------ | ------ | | types (必填) | 需要渲染的组件字段 | WmPropItemType[] | | |

DocStructureTable

表格样式文档组件。

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | | props (必填) | 需要渲染的组件字段 | WmProps | | | | prefix | 样式类名的品牌前缀 | string | | | | size | 尺寸 small为紧凑模式 | "small" | "medium" | "small", "medium" | | | className | 自定义类名 | string | | | | style | 自定义内联样式 | CSSProperties | | | | columns | | any[] | | | | tableLayout | 表格元素的 table-layout 属性，设为 fixed 表示内容不会影响列的布局 | "fixed" | "auto" | "fixed", "auto" | | | tableWidth | 表格的总长度，可以这么用：设置表格总长度 、设置部分列的宽度，这样表格会按照剩余空间大小，自动其他列分配宽度 | number | | | | dataSource | 表格展示的数据源 | any[] | | | | onRowClick | 点击表格每一行触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | | | | onRowMouseEnter | 悬浮在表格每一行的时候触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | | | | onRowMouseLeave | 离开表格每一行的时候触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | | | | onSort | 点击列排序触发的事件 | (dataIndex: string, order: string) => void | | | | onFilter | 点击过滤确认按钮触发的事件 | (filterParams: any) => void | | | | onResizeChange | 重设列尺寸的时候触发的事件 | (dataIndex: string, value: number) => void | | | | getRowProps | 设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。 | (record: any, index: number) => any | | | | rowProps | | (record: any, index: number) => any | | | | getCellProps | 设置单元格的属性，通过该属性可以进行合并单元格 | (rowIndex: number, colIndex: number, dataIndex: string, record: any) => any | | | | cellProps | | (rowIndex: number, colIndex: number, dataIndex: string, record: any) => any | | | | hasBorder | 表格是否具有边框 | boolean | | | | hasHeader | 表格是否具有头部 | boolean | | | | isZebra | 表格是否是斑马线 | boolean | | | | loading | 表格是否在加载中 | boolean | | | | loadingComponent | 自定义 Loading 组件 请务必传递 props, 使用方式： loadingComponent={props => <Loading {...props}/>} | (props: LoadingProps) => ReactNode | | | | filterParams | 当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}} 示例: 假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中 `<Table filterParams={{id: {selectedKeys: ['one']}}}/>` | { [propName: string]: any; } | | | | sort | 当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'} | { [propName: string]: any; } | | | | sortIcons | 自定义排序按钮，例如上下排布的: `{desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}` | { desc?: ReactNode; asc?: ReactNode; } | | | | locale | 自定义国际化文案对象 | { ok: string; reset: string; empty: string; asc: string; desc: string; expanded: string; folded: string; filter: string; selectAll: string; } | | | | emptyContent | 设置数据为空的时候的表格内容展现 | ReactNode | | | | primaryKey | dataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中 | string | | | | expandedRowRender | 额外渲染行的渲染函数 | (record: any, index: number) => ReactElement<any, string | JSXElementConstructor<any>> | | | | rowExpandable | | (record: any) => boolean | | | | expandedRowIndent | 额外渲染行的缩进 | any[] | | | | openRowKeys | 默认情况下展开的渲染行或者Tree, 传入此属性为受控状态 | any[] | | | | hasExpandedRowCtrl | 是否显示点击展开额外渲染行的+号按钮 | boolean | | | | getExpandedColProps | 设置额外渲染行的属性 | <IRecord extends unknown = any>(record: IRecord, index: number) => object | Record<string | number, any> | | | | onRowOpen | 在额外渲染行或者Tree展开或者收起的时候触发的事件 | (openRowKeys: any[], currentRowKey: string, expanded: boolean, currentRecord: any) => void | | | | onExpandedRowClick | 点击额外渲染行触发的事件 | (record: any, index: number, e: MouseEvent<Element, MouseEvent>) => void | | | | fixedHeader | 表头是否固定，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条 | boolean | | | | maxBodyHeight | 最大内容区域的高度,在`fixedHeader`为`true`的时候,超过这个高度会出现滚动条 | string | number | string, number | | | rowSelection | 是否启用选择模式 | { getProps?: (record: any, index: number) => void; onChange?: (selectedRowKeys: any[], records: any[]) => void; onSelect?: (selected: boolean, record: any, records: any[]) => void; onSelectAll?: (selected: boolean, records: any[]) => void; ... 4 more ...; titleAddons?: () => any; } | | | | stickyHeader | 表头是否是sticky | boolean | | | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | | affixProps | affix组件的的属性 | AffixProps | | | | indent | 在tree模式下的缩进尺寸， 仅在isTree为true时候有效 | number | | | | isTree | 开启Table的tree模式, 接收的数据格式中包含children则渲染成tree table | boolean | | | | useVirtual | 是否开启虚拟滚动 | boolean | | | | scrollToRow | 滚动到指定行 | number | | | | rowHeight | 设置行高 | number | (() => void) | number, () => void | | | onBodyScroll | 在内容区域滚动的时候触发的函数 | () => void | | | | expandedIndexSimulate | 开启时，getExpandedColProps() / getRowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...) | boolean | | | | crossline | 在 hover 时出现十字参考轴，适用于表头比较复杂，需要做表头分类的场景。 | boolean | | | | defaultChecked | | boolean | | | | defaultValue | | string | number | readonly string[] | string, number, readonly string[] | | | suppressContentEditableWarning | | boolean | | | | suppressHydrationWarning | | boolean | | | | accessKey | | string | | | | contentEditable | | Booleanish | "inherit" | false, true, "true", "false", "inherit" | | | contextMenu | | string | | | | dir | | string | | | | draggable | | Booleanish | | | | hidden | | boolean | | | | id | | string | | | | lang | | string | | | | placeholder | | string | | | | slot | | string | | | | spellCheck | | Booleanish | | | | tabIndex | | number | | | | title | | string | | | | translate | | "yes" | "no" | "yes", "no" | | | radioGroup | | string | | | | role | | string | | | | about | | string | | | | datatype | | string | | | | inlist | | any | | | | property | | string | | | | resource | | string | | | | typeof | | string | | | | vocab | | string | | | | autoCapitalize | | string | | | | autoCorrect | | string | | | | autoSave | | string | | | | color | | string | | | | itemProp | | string | | | | itemScope | | boolean | | | | itemType | | string