test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-03 12:38:53 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

chore: 表单项的布局方式支持外部扩充 (#2333)

Browse Source
This commit is contained in:
liaoxuezhi 2021-07-29 18:56:00 +08:00 committed by GitHub
parent a0526cc7d8
commit eb4940b69c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 426 additions and 414 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.tsx
View File

@ -164,7 +164,7 @@ import './renderers/Code';
import Scoped, {ScopedContext} from './Scoped'; import Scoped, {ScopedContext} from './Scoped';
import {FormItem, registerFormItem} from './renderers/Form/Item'; import {FormItem, FormItemWrap, registerFormItem} from './renderers/Form/Item';
// 兼容旧版本用法 // 兼容旧版本用法
import './compat'; import './compat';
@ -209,6 +209,7 @@ export {
Renderer as Renderer, Renderer as Renderer,
RegisterStore, RegisterStore,
FormItem, FormItem,
FormItemWrap,
OptionsControl, OptionsControl,
wrapFetcher, wrapFetcher,
buildApi, buildApi,

85
src/renderers/Form/Item.tsx
View File

@ -444,7 +444,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
model.closeDialog(); model.closeDialog();
} }
renderControl() { renderControl(): JSX.Element | null {
const { const {
inputClassName, inputClassName,
formItem: model, formItem: model,
@ -488,7 +488,16 @@ export class FormItemWrap extends React.Component<FormItemProps> {
return null; return null;
} }
renderHorizontal() { /**
* 布局扩充点，可以自己扩充表单项的布局方式
*/
static layoutRenderers: {
[propsName: string]: (
props: FormItemProps,
renderControl: () => JSX.Element | null
) => JSX.Element;
} = {
horizontal: (props: FormItemProps, renderControl: () => JSX.Element) => {
let { let {
className, className,
classnames: cx, classnames: cx,
@ -510,7 +519,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
hint, hint,
data, data,
showErrorMsg showErrorMsg
} = this.props; } = props;
// 强制不渲染 label 的话 // 强制不渲染 label 的话
if (renderLabel === false) { if (renderLabel === false) {
@ -518,7 +527,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
} }
description = description || desc; description = description || desc;
const horizontal = this.props.horizontal || this.props.formHorizontal || {}; const horizontal = props.horizontal || props.formHorizontal || {};
const left = getWidthRate(horizontal.left); const left = getWidthRate(horizontal.left);
const right = getWidthRate(horizontal.right); const right = getWidthRate(horizontal.right);
@ -556,8 +565,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
icon: labelRemark.icon || 'warning-mark', icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark, tooltip: labelRemark,
className: cx(`Form-labelRemark`), className: cx(`Form-labelRemark`),
container: this.props.popOverContainer container: props.popOverContainer
? this.props.popOverContainer ? props.popOverContainer
: env && env.getModalContainer : env && env.getModalContainer
? env.getModalContainer ? env.getModalContainer
: undefined : undefined
@ -574,7 +583,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
!horizontal.leftFixed && !!right && right !== 12 - left !horizontal.leftFixed && !!right && right !== 12 - left
})} })}
> >
{this.renderControl()} {renderControl()}
{caption {caption
? render('caption', caption, { ? render('caption', caption, {
@ -588,8 +597,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
icon: remark.icon || 'warning-mark', icon: remark.icon || 'warning-mark',
tooltip: remark, tooltip: remark,
className: cx(`Form-remark`), className: cx(`Form-remark`),
container: this.props.popOverContainer container: props.popOverContainer
? this.props.popOverContainer ? props.popOverContainer
: env && env.getModalContainer : env && env.getModalContainer
? env.getModalContainer ? env.getModalContainer
: undefined : undefined
@ -621,9 +630,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
</div> </div>
</div> </div>
); );
} },
renderNormal() { normal: (props: FormItemProps, renderControl: () => JSX.Element) => {
let { let {
className, className,
classnames: cx, classnames: cx,
@ -645,7 +654,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
hint, hint,
data, data,
showErrorMsg showErrorMsg
} = this.props; } = props;
description = description || desc; description = description || desc;
@ -670,8 +679,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
icon: labelRemark.icon || 'warning-mark', icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark, tooltip: labelRemark,
className: cx(`Form-lableRemark`), className: cx(`Form-lableRemark`),
container: this.props.popOverContainer container: props.popOverContainer
? this.props.popOverContainer ? props.popOverContainer
: env && env.getModalContainer : env && env.getModalContainer
? env.getModalContainer ? env.getModalContainer
: undefined : undefined
@ -681,7 +690,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
</label> </label>
) : null} ) : null}
{this.renderControl()} {renderControl()}
{caption {caption
? render('caption', caption, { ? render('caption', caption, {
@ -696,7 +705,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
className: cx(`Form-remark`), className: cx(`Form-remark`),
tooltip: remark, tooltip: remark,
container: container:
env && env.getModalContainer ? env.getModalContainer : undefined env && env.getModalContainer
? env.getModalContainer
: undefined
}) })
: null} : null}
@ -724,9 +735,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
: null} : null}
</div> </div>
); );
} },
renderInline() { inline: (props: FormItemProps, renderControl: () => JSX.Element) => {
let { let {
className, className,
classnames: cx, classnames: cx,
@ -748,7 +759,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
renderDescription, renderDescription,
data, data,
showErrorMsg showErrorMsg
} = this.props; } = props;
description = description || desc; description = description || desc;
@ -773,8 +784,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
icon: labelRemark.icon || 'warning-mark', icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark, tooltip: labelRemark,
className: cx(`Form-lableRemark`), className: cx(`Form-lableRemark`),
container: this.props.popOverContainer container: props.popOverContainer
? this.props.popOverContainer ? props.popOverContainer
: env && env.getModalContainer : env && env.getModalContainer
? env.getModalContainer ? env.getModalContainer
: undefined : undefined
@ -785,7 +796,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
) : null} ) : null}
<div className={cx(`Form-value`)}> <div className={cx(`Form-value`)}>
{this.renderControl()} {renderControl()}
{caption {caption
? render('caption', caption, { ? render('caption', caption, {
@ -799,8 +810,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
icon: remark.icon || 'warning-mark', icon: remark.icon || 'warning-mark',
className: cx(`Form-remark`), className: cx(`Form-remark`),
tooltip: remark, tooltip: remark,
container: this.props.popOverContainer container: props.popOverContainer
? this.props.popOverContainer ? props.popOverContainer
: env && env.getModalContainer : env && env.getModalContainer
? env.getModalContainer ? env.getModalContainer
: undefined : undefined
@ -832,9 +843,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
</div> </div>
</div> </div>
); );
} },
renderRow() { row: (props: FormItemProps, renderControl: () => JSX.Element) => {
let { let {
className, className,
classnames: cx, classnames: cx,
@ -856,7 +867,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
hint, hint,
data, data,
showErrorMsg showErrorMsg
} = this.props; } = props;
description = description || desc; description = description || desc;
@ -882,8 +893,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
icon: labelRemark.icon || 'warning-mark', icon: labelRemark.icon || 'warning-mark',
tooltip: labelRemark, tooltip: labelRemark,
className: cx(`Form-lableRemark`), className: cx(`Form-lableRemark`),
container: this.props.popOverContainer container: props.popOverContainer
? this.props.popOverContainer ? props.popOverContainer
: env && env.getModalContainer : env && env.getModalContainer
? env.getModalContainer ? env.getModalContainer
: undefined : undefined
@ -893,7 +904,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
</label> </label>
) : null} ) : null}
{this.renderControl()} {renderControl()}
{caption {caption
? render('caption', caption, { ? render('caption', caption, {
@ -940,6 +951,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
</div> </div>
); );
} }
};
render() { render() {
const {formMode, inputOnly, wrap, render, formItem: model} = this.props; const {formMode, inputOnly, wrap, render, formItem: model} = this.props;
@ -949,15 +961,14 @@ export class FormItemWrap extends React.Component<FormItemProps> {
return this.renderControl(); return this.renderControl();
} }
const renderLayout =
FormItemWrap.layoutRenderers[mode] ||
FormItemWrap.layoutRenderers['normal'];
return ( return (
<> <>
{mode === 'inline' {renderLayout(this.props, this.renderControl.bind(this))}
? this.renderInline()
: mode === 'horizontal'
? this.renderHorizontal()
: mode === 'row'
? this.renderRow()
: this.renderNormal()}
{model {model
? render( ? render(
'modal', 'modal',