mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
Grid 调整删掉一些没用的属性 (#2338)
* 页面的区域可以固定配置,而不是根据内容自动 * chore: grid 删掉一些没用的属性 * rm console.log
This commit is contained in:
liaoxuezhi
GitHub
parent
7e445a091c
commit
8676fc95ab
@ -48,31 +48,15 @@ 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 |
|
||||
|
||||
更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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<ColumnNode> {}
|
||||
|
||||
/**
|
||||
@ -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,20 +146,9 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
|
||||
fromBsClass((column as any).columnClassName!)
|
||||
)}
|
||||
>
|
||||
{Array.isArray(column) ? (
|
||||
<div className={cx('Grid')}>
|
||||
{column.map((column, key) =>
|
||||
this.renderColumn(
|
||||
column,
|
||||
key,
|
||||
(column as Array<GridColumn>).length
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
this.renderChild(
|
||||
{this.renderChild(
|
||||
`column/${key}`,
|
||||
column.type ? column : (column as any).body!,
|
||||
(column as any).type ? column : (column as any).body!,
|
||||
key,
|
||||
length,
|
||||
{
|
||||
@ -242,7 +156,6 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
|
||||
formHorizontal:
|
||||
column.horizontal || subFormHorizontal || formHorizontal
|
||||
}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user