test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:48:55 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Grid 调整删掉一些没用的属性 (#2338)

Browse Source 
* 页面的区域可以固定配置,而不是根据内容自动

* chore: grid 删掉一些没用的属性

* rm console.log
This commit is contained in:
liaoxuezhi 2021-07-29 18:57:57 +08:00 committed by GitHub
parent 7e445a091c
commit 8676fc95ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/zh-CN/components/grid.md
View File

@ -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)

44
src/compat.ts
View File

@ -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',

113
src/renderers/Grid.tsx
View File

@ -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,28 +146,16 @@ 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(
`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
}
)}
</div>
);