diff --git a/docs/zh-CN/components/grid.md b/docs/zh-CN/components/grid.md index 502696423..f6628b65a 100755 --- a/docs/zh-CN/components/grid.md +++ b/docs/zh-CN/components/grid.md @@ -47,32 +47,16 @@ order: 46 ## 属性表 -| 属性名 | 类型 | 默认值 | 说明 | -| -------------------------- | ----------------------------------------- | -------- | ----------------------- | -| type | `string` | `"grid"` | 指定为 Grid 渲染器 | -| className | `string` | | 外层 Dom 的类名 | -| columns | `Array` | | 列集合 | -| columns[x] | [SchemaNode](../../docs/types/schemanode) | | 成员可以是其他渲染器 | -| columns[x].xs | `int` | | 宽度占比： 1 - 12 | -| columns[x].columnClassName | | | 列类名 | -| columns[x].xsHidden | `boolean` | | 是否隐藏 | -| columns[x].xsOffset | `int` | | 偏移量 1 - 12 | -| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 | -| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 | -| columns[x].sm | `int` | | 宽度占比： 1 - 12 | -| columns[x].smHidden | `boolean` | | 是否隐藏 | -| columns[x].smOffset | `int` | | 偏移量 1 - 12 | -| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 | -| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 | -| columns[x].md | `int` | | 宽度占比： 1 - 12 | -| columns[x].mdHidden | `boolean` | | 是否隐藏 | -| columns[x].mdOffset | `int` | | 偏移量 1 - 12 | -| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 | -| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 | -| columns[x].lg | `int` | | 宽度占比： 1 - 12 | -| columns[x].lgHidden | `boolean` | | 是否隐藏 | -| columns[x].lgOffset | `int` | | 偏移量 1 - 12 | -| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 | -| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 | +| 属性名 | 类型 | 默认值 | 说明 | +| -------------------------- | ----------------------------------------- | -------- | -------------------- | +| type | `string` | `"grid"` | 指定为 Grid 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| columns | `Array` | | 列集合 | +| columns[x] | [SchemaNode](../../docs/types/schemanode) | | 成员可以是其他渲染器 | +| columns[x].xs | `int` | | 宽度占比： 1 - 12 | +| columns[x].columnClassName | | | 列类名 | +| columns[x].sm | `int` | | 宽度占比： 1 - 12 | +| columns[x].md | `int` | | 宽度占比： 1 - 12 | +| columns[x].lg | `int` | | 宽度占比： 1 - 12 | 更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props) diff --git a/src/compat.ts b/src/compat.ts index 85469491a..7948c587e 100644 --- a/src/compat.ts +++ b/src/compat.ts @@ -15,6 +15,7 @@ import {FileControlRenderer} from './renderers/Form/InputFile'; import {ImageControlRenderer} from './renderers/Form/InputImage'; import {RichTextControlRenderer} from './renderers/Form/InputRichText'; import isPlainObject from 'lodash/isPlainObject'; +import {GridRenderer} from './renderers/Grid'; // 兼容老的用法，老用法 label 用在 checkbox 的右侧内容，新用法用 option 来代替。 addSchemaFilter(function CheckboxPropsFilter(schema: Schema, renderer) { @@ -287,6 +288,49 @@ addSchemaFilter(function (scheam: Schema, renderer) { return scheam; }); +// Grid 一些旧格式的兼容 +addSchemaFilter(function (scheam: Schema, renderer) { + if (renderer.component !== GridRenderer) { + return scheam; + } + + if ( + Array.isArray(scheam.columns) && + scheam.columns.some(item => Array.isArray(item) || item.type) + ) { + scheam = { + ...scheam, + columns: scheam.columns.map(item => { + if (Array.isArray(item)) { + return { + body: [ + { + type: 'grid', + columns: item + } + ] + }; + } else if (item.type) { + let {xs, sm, md, lg, body, ...rest} = item; + body = Array.isArray(body) ? body.concat() : body ? [body] : []; + body.push(rest); + item = { + xs, + sm, + md, + lg, + body + }; + } + + return item; + }) + }; + } + + return scheam; +}); + const controlMapping: any = { 'array': 'input-array', 'button-group': 'button-group-select', diff --git a/src/renderers/Grid.tsx b/src/renderers/Grid.tsx index 08d7f13d6..ac4394a84 100644 --- a/src/renderers/Grid.tsx +++ b/src/renderers/Grid.tsx @@ -18,101 +18,26 @@ export type GridColumnObject = { */ xs?: number; - /** - * 极小屏（<768px）时是否隐藏该列 - */ - xsHidden?: boolean; - - /** - * 极小屏（<768px）时宽度偏移量 - */ - xsOffset?: number; - - /** - * 极小屏（<768px）时宽度右偏移量 - */ - xsPull?: number; - - /** - * 极小屏（<768px）时宽度左偏移量 - */ - xsPush?: number; - /** * 小屏时（>=768px）宽度占比 */ sm?: number; - /** - * 小屏时（>=768px）是否隐藏该列 - */ - smHidden?: boolean; - - /** - * 小屏时（>=768px）宽度偏移量 - */ - smOffset?: number; - - /** - * 小屏时（>=768px）宽度右偏移量 - */ - smPull?: number; - - /** - * 小屏时（>=768px）宽度左偏移量 - */ - smPush?: number; - /** * 中屏时(>=992px)宽度占比 */ md?: number; - /** - * 中屏时(>=992px)是否隐藏该列 - */ - mdHidden?: boolean; - - /** - * 中屏时(>=992px)宽度偏移量 - */ - mdOffset?: number; - - /** - * 中屏时(>=992px)宽度右偏移量 - */ - mdPull?: number; - - /** - * 中屏时(>=992px)宽度左偏移量 - */ - mdPush?: number; - /** * 大屏时(>=1200px)宽度占比 */ lg?: number; - /** - * 大屏时(>=1200px)是否隐藏该列 - */ - lgHidden?: boolean; - /** - * 大屏时(>=1200px)宽度偏移量 - */ - lgOffset?: number; - /** - * 大屏时(>=1200px)宽度右偏移量 - */ - lgPull?: number; - /** - * 大屏时(>=1200px)宽度左偏移量 - */ - lgPush?: number; /** * 配置子表单项默认的展示方式。 */ mode?: 'normal' | 'inline' | 'horizontal'; + /** * 如果是水平排版，这个属性可以细化水平排版的左右宽度占比。 */ @@ -127,7 +52,7 @@ export type GridColumnObject = { }; export type GridColumn = GridColumnObject & SchemaObject; -export type ColumnNode = GridColumn | ColumnArray; +export type ColumnNode = GridColumn; export interface ColumnArray extends Array {} /** @@ -174,7 +99,7 @@ function copProps2Class(props: any): string { props[modifier] && cns.push(`Grid-col--${modifier}${props[modifier]}`) ); - cns.length || cns.push('Grid-col--sm'); + cns.length || cns.push('Grid-col--md'); return cns.join(' '); } @@ -221,28 +146,16 @@ export default class Grid extends React.Component { fromBsClass((column as any).columnClassName!) )} > - {Array.isArray(column) ? ( -
- {column.map((column, key) => - this.renderColumn( - column, - key, - (column as Array).length - ) - )} -
- ) : ( - this.renderChild( - `column/${key}`, - column.type ? column : (column as any).body!, - key, - length, - { - formMode: column.mode || subFormMode || formMode, - formHorizontal: - column.horizontal || subFormHorizontal || formHorizontal - } - ) + {this.renderChild( + `column/${key}`, + (column as any).type ? column : (column as any).body!, + key, + length, + { + formMode: column.mode || subFormMode || formMode, + formHorizontal: + column.horizontal || subFormHorizontal || formHorizontal + } )} );