Merge "feat: add props in BaseForm"
This commit is contained in:
commit
f73d5a37bf
@ -163,6 +163,18 @@ export default class BaseForm extends React.Component {
|
|||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get hasFooter() {
|
||||||
|
return !(this.isStep || this.isModal);
|
||||||
|
}
|
||||||
|
|
||||||
|
get formStyle() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
get footerStyle() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
get labelCol() {
|
get labelCol() {
|
||||||
return {
|
return {
|
||||||
xs: { span: 5 },
|
xs: { span: 5 },
|
||||||
@ -554,7 +566,7 @@ export default class BaseForm extends React.Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
renderFooter() {
|
renderFooter() {
|
||||||
if (this.isStep || this.isModal) {
|
if (!this.hasFooter) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
const footerStyle = {};
|
const footerStyle = {};
|
||||||
@ -564,7 +576,10 @@ export default class BaseForm extends React.Component {
|
|||||||
footerStyle.bottom = height;
|
footerStyle.bottom = height;
|
||||||
}
|
}
|
||||||
return (
|
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={styles['footer-left']}>{this.renderFooterLeft()}</div>
|
||||||
<div className={classnames(styles.btns, 'footer-btns')}>
|
<div className={classnames(styles.btns, 'footer-btns')}>
|
||||||
<Button
|
<Button
|
||||||
@ -754,7 +769,10 @@ export default class BaseForm extends React.Component {
|
|||||||
const formDiv = (
|
const formDiv = (
|
||||||
<Spin spinning={this.isSubmitting} tip={this.renderSubmittingTip()}>
|
<Spin spinning={this.isSubmitting} tip={this.renderSubmittingTip()}>
|
||||||
{this.renderRightTopExtra()}
|
{this.renderRightTopExtra()}
|
||||||
<div className={classnames(styles.form, 'sl-form')} style={formStyle}>
|
<div
|
||||||
|
className={classnames(styles.form, 'sl-form')}
|
||||||
|
style={{ ...formStyle, ...this.formStyle }}
|
||||||
|
>
|
||||||
{this.renderForms()}
|
{this.renderForms()}
|
||||||
</div>
|
</div>
|
||||||
{this.renderFooter()}
|
{this.renderFooter()}
|
||||||
|
@ -80,13 +80,20 @@ export default class index extends Component {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { key, value } = this.state;
|
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 (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
<Col span={keySpan || 4}>
|
<Col span={keySpan || 4}>
|
||||||
<Input
|
<Input
|
||||||
value={key}
|
value={key}
|
||||||
placeholder={t['Please input key']}
|
placeholder={keyPlaceholder}
|
||||||
onChange={this.onKeyChange}
|
onChange={this.onKeyChange}
|
||||||
readOnly={keyReadonly}
|
readOnly={keyReadonly}
|
||||||
required
|
required
|
||||||
@ -98,7 +105,7 @@ export default class index extends Component {
|
|||||||
<Col span={valueSpan || 8}>
|
<Col span={valueSpan || 8}>
|
||||||
<Input
|
<Input
|
||||||
value={value}
|
value={value}
|
||||||
placeholder={t['Please input key']}
|
placeholder={valuePlaceholder}
|
||||||
onChange={this.onValueChange}
|
onChange={this.onValueChange}
|
||||||
readOnly={valueReadonly}
|
readOnly={valueReadonly}
|
||||||
required
|
required
|
||||||
|
@ -24,7 +24,7 @@ import { firstUpperCase, allSettled } from 'utils';
|
|||||||
import styles from './index.less';
|
import styles from './index.less';
|
||||||
|
|
||||||
function getDefaultMsg(action, data) {
|
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 name = isArray(data) ? data.map((it) => it.name).join(', ') : data.name;
|
||||||
const submitErrorMsg = t('Unable to {action} {name}.', {
|
const submitErrorMsg = t('Unable to {action} {name}.', {
|
||||||
action: actionName.toLowerCase() || title,
|
action: actionName.toLowerCase() || title,
|
||||||
|
@ -4,6 +4,10 @@
|
|||||||
min-height: calc(100vh - 108px);
|
min-height: calc(100vh - 108px);
|
||||||
|
|
||||||
:global {
|
:global {
|
||||||
|
.ant-tabs-content {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
.ant-tabs > .ant-tabs-nav {
|
.ant-tabs > .ant-tabs-nav {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user