feat: add props in BaseForm

1. add hasFooter props to judge show the form footer in BaseForm
2. add formStyle and footerStyle props to set form and footer style
3. support add placeholder props in the KeyValueInput component

Change-Id: I6627a1fdbb92f95985c022ad15a19efabe4842c1
This commit is contained in:
zhangke 2022-10-28 18:26:55 +08:00
parent b971ad860f
commit 5a476a09a4
4 changed files with 36 additions and 7 deletions

View File

@ -163,6 +163,18 @@ export default class BaseForm extends React.Component {
return false;
}
get hasFooter() {
return !(this.isStep || this.isModal);
}
get formStyle() {
return {};
}
get footerStyle() {
return {};
}
get labelCol() {
return {
xs: { span: 5 },
@ -554,7 +566,7 @@ export default class BaseForm extends React.Component {
}
renderFooter() {
if (this.isStep || this.isModal) {
if (!this.hasFooter) {
return null;
}
const footerStyle = {};
@ -564,7 +576,10 @@ export default class BaseForm extends React.Component {
footerStyle.bottom = height;
}
return (
<div className={styles.footer} style={footerStyle}>
<div
className={styles.footer}
style={{ ...footerStyle, ...this.footerStyle }}
>
<div className={styles['footer-left']}>{this.renderFooterLeft()}</div>
<div className={classnames(styles.btns, 'footer-btns')}>
<Button
@ -754,7 +769,10 @@ export default class BaseForm extends React.Component {
const formDiv = (
<Spin spinning={this.isSubmitting} tip={this.renderSubmittingTip()}>
{this.renderRightTopExtra()}
<div className={classnames(styles.form, 'sl-form')} style={formStyle}>
<div
className={classnames(styles.form, 'sl-form')}
style={{ ...formStyle, ...this.formStyle }}
>
{this.renderForms()}
</div>
{this.renderFooter()}

View File

@ -80,13 +80,20 @@ export default class index extends Component {
render() {
const { key, value } = this.state;
const { keyReadonly, valueReadonly, keySpan, valueSpan } = this.props;
const {
keyReadonly,
valueReadonly,
keySpan,
valueSpan,
keyPlaceholder = t('Please input key'),
valuePlaceholder = t('Please input value'),
} = this.props;
return (
<Row>
<Col span={keySpan || 4}>
<Input
value={key}
placeholder={t['Please input key']}
placeholder={keyPlaceholder}
onChange={this.onKeyChange}
readOnly={keyReadonly}
required
@ -98,7 +105,7 @@ export default class index extends Component {
<Col span={valueSpan || 8}>
<Input
value={value}
placeholder={t['Please input key']}
placeholder={valuePlaceholder}
onChange={this.onValueChange}
readOnly={valueReadonly}
required

View File

@ -24,7 +24,7 @@ import { firstUpperCase, allSettled } from 'utils';
import styles from './index.less';
function getDefaultMsg(action, data) {
const { actionName, title } = action;
const { actionName = '', title = '' } = action;
const name = isArray(data) ? data.map((it) => it.name).join(', ') : data.name;
const submitErrorMsg = t('Unable to {action} {name}.', {
action: actionName.toLowerCase() || title,

View File

@ -4,6 +4,10 @@
min-height: calc(100vh - 108px);
:global {
.ant-tabs-content {
height: 100vh;
}
.ant-tabs > .ant-tabs-nav {
background-color: #fff;
}