mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
chore: 表单项的布局方式支持外部扩充 (#2333)
This commit is contained in:
liaoxuezhi
GitHub
parent
a0526cc7d8
commit
eb4940b69c
@ -164,7 +164,7 @@ import './renderers/Code';
|
||||
|
||||
import Scoped, {ScopedContext} from './Scoped';
|
||||
|
||||
import {FormItem, registerFormItem} from './renderers/Form/Item';
|
||||
import {FormItem, FormItemWrap, registerFormItem} from './renderers/Form/Item';
|
||||
|
||||
// 兼容旧版本用法
|
||||
import './compat';
|
||||
@ -209,6 +209,7 @@ export {
|
||||
Renderer as Renderer,
|
||||
RegisterStore,
|
||||
FormItem,
|
||||
FormItemWrap,
|
||||
OptionsControl,
|
||||
wrapFetcher,
|
||||
buildApi,
|
||||
|
||||
@ -444,7 +444,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
model.closeDialog();
|
||||
}
|
||||
|
||||
renderControl() {
|
||||
renderControl(): JSX.Element | null {
|
||||
const {
|
||||
inputClassName,
|
||||
formItem: model,
|
||||
@ -488,7 +488,16 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
return null;
|
||||
}
|
||||
|
||||
renderHorizontal() {
|
||||
/**
|
||||
* 布局扩充点，可以自己扩充表单项的布局方式
|
||||
*/
|
||||
static layoutRenderers: {
|
||||
[propsName: string]: (
|
||||
props: FormItemProps,
|
||||
renderControl: () => JSX.Element | null
|
||||
) => JSX.Element;
|
||||
} = {
|
||||
horizontal: (props: FormItemProps, renderControl: () => JSX.Element) => {
|
||||
let {
|
||||
className,
|
||||
classnames: cx,
|
||||
@ -510,7 +519,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
hint,
|
||||
data,
|
||||
showErrorMsg
|
||||
} = this.props;
|
||||
} = props;
|
||||
|
||||
// 强制不渲染 label 的话
|
||||
if (renderLabel === false) {
|
||||
@ -518,7 +527,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
}
|
||||
|
||||
description = description || desc;
|
||||
const horizontal = this.props.horizontal || this.props.formHorizontal || {};
|
||||
const horizontal = props.horizontal || props.formHorizontal || {};
|
||||
const left = getWidthRate(horizontal.left);
|
||||
const right = getWidthRate(horizontal.right);
|
||||
|
||||
@ -556,8 +565,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
className: cx(`Form-labelRemark`),
|
||||
container: this.props.popOverContainer
|
||||
? this.props.popOverContainer
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
: undefined
|
||||
@ -574,7 +583,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
!horizontal.leftFixed && !!right && right !== 12 - left
|
||||
})}
|
||||
>
|
||||
{this.renderControl()}
|
||||
{renderControl()}
|
||||
|
||||
{caption
|
||||
? render('caption', caption, {
|
||||
@ -588,8 +597,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: remark.icon || 'warning-mark',
|
||||
tooltip: remark,
|
||||
className: cx(`Form-remark`),
|
||||
container: this.props.popOverContainer
|
||||
? this.props.popOverContainer
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
: undefined
|
||||
@ -621,9 +630,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
renderNormal() {
|
||||
normal: (props: FormItemProps, renderControl: () => JSX.Element) => {
|
||||
let {
|
||||
className,
|
||||
classnames: cx,
|
||||
@ -645,7 +654,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
hint,
|
||||
data,
|
||||
showErrorMsg
|
||||
} = this.props;
|
||||
} = props;
|
||||
|
||||
description = description || desc;
|
||||
|
||||
@ -670,8 +679,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
className: cx(`Form-lableRemark`),
|
||||
container: this.props.popOverContainer
|
||||
? this.props.popOverContainer
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
: undefined
|
||||
@ -681,7 +690,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
{this.renderControl()}
|
||||
{renderControl()}
|
||||
|
||||
{caption
|
||||
? render('caption', caption, {
|
||||
@ -696,7 +705,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
className: cx(`Form-remark`),
|
||||
tooltip: remark,
|
||||
container:
|
||||
env && env.getModalContainer ? env.getModalContainer : undefined
|
||||
env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
: undefined
|
||||
})
|
||||
: null}
|
||||
|
||||
@ -724,9 +735,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
renderInline() {
|
||||
inline: (props: FormItemProps, renderControl: () => JSX.Element) => {
|
||||
let {
|
||||
className,
|
||||
classnames: cx,
|
||||
@ -748,7 +759,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
renderDescription,
|
||||
data,
|
||||
showErrorMsg
|
||||
} = this.props;
|
||||
} = props;
|
||||
|
||||
description = description || desc;
|
||||
|
||||
@ -773,8 +784,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
className: cx(`Form-lableRemark`),
|
||||
container: this.props.popOverContainer
|
||||
? this.props.popOverContainer
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
: undefined
|
||||
@ -785,7 +796,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
) : null}
|
||||
|
||||
<div className={cx(`Form-value`)}>
|
||||
{this.renderControl()}
|
||||
{renderControl()}
|
||||
|
||||
{caption
|
||||
? render('caption', caption, {
|
||||
@ -799,8 +810,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: remark.icon || 'warning-mark',
|
||||
className: cx(`Form-remark`),
|
||||
tooltip: remark,
|
||||
container: this.props.popOverContainer
|
||||
? this.props.popOverContainer
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
: undefined
|
||||
@ -832,9 +843,9 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
renderRow() {
|
||||
row: (props: FormItemProps, renderControl: () => JSX.Element) => {
|
||||
let {
|
||||
className,
|
||||
classnames: cx,
|
||||
@ -856,7 +867,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
hint,
|
||||
data,
|
||||
showErrorMsg
|
||||
} = this.props;
|
||||
} = props;
|
||||
|
||||
description = description || desc;
|
||||
|
||||
@ -882,8 +893,8 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
icon: labelRemark.icon || 'warning-mark',
|
||||
tooltip: labelRemark,
|
||||
className: cx(`Form-lableRemark`),
|
||||
container: this.props.popOverContainer
|
||||
? this.props.popOverContainer
|
||||
container: props.popOverContainer
|
||||
? props.popOverContainer
|
||||
: env && env.getModalContainer
|
||||
? env.getModalContainer
|
||||
: undefined
|
||||
@ -893,7 +904,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
</label>
|
||||
) : null}
|
||||
|
||||
{this.renderControl()}
|
||||
{renderControl()}
|
||||
|
||||
{caption
|
||||
? render('caption', caption, {
|
||||
@ -940,6 +951,7 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const {formMode, inputOnly, wrap, render, formItem: model} = this.props;
|
||||
@ -949,15 +961,14 @@ export class FormItemWrap extends React.Component<FormItemProps> {
|
||||
return this.renderControl();
|
||||
}
|
||||
|
||||
const renderLayout =
|
||||
FormItemWrap.layoutRenderers[mode] ||
|
||||
FormItemWrap.layoutRenderers['normal'];
|
||||
|
||||
return (
|
||||
<>
|
||||
{mode === 'inline'
|
||||
? this.renderInline()
|
||||
: mode === 'horizontal'
|
||||
? this.renderHorizontal()
|
||||
: mode === 'row'
|
||||
? this.renderRow()
|
||||
: this.renderNormal()}
|
||||
{renderLayout(this.props, this.renderControl.bind(this))}
|
||||
|
||||
{model
|
||||
? render(
|
||||
'modal',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user