From 5a476a09a4791da932f2180c12480ba2ba7b2315 Mon Sep 17 00:00:00 2001
From: zhangke <zhang.ke@99cloud.net>
Date: Fri, 28 Oct 2022 18:26:55 +0800
Subject: [PATCH] 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
---
 src/components/Form/index.jsx                 | 24 ++++++++++++++++---
 .../FormItem/KeyValueInput/index.jsx          | 13 +++++++---
 .../Tables/Base/ActionButton/index.jsx        |  2 +-
 src/containers/TabList/index.less             |  4 ++++
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/components/Form/index.jsx b/src/components/Form/index.jsx
index 8fdba4d8..241dd368 100644
--- a/src/components/Form/index.jsx
+++ b/src/components/Form/index.jsx
@@ -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()}
diff --git a/src/components/FormItem/KeyValueInput/index.jsx b/src/components/FormItem/KeyValueInput/index.jsx
index c019a9a4..eb762c0b 100644
--- a/src/components/FormItem/KeyValueInput/index.jsx
+++ b/src/components/FormItem/KeyValueInput/index.jsx
@@ -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
diff --git a/src/components/Tables/Base/ActionButton/index.jsx b/src/components/Tables/Base/ActionButton/index.jsx
index 1be940f7..c18cbc7a 100644
--- a/src/components/Tables/Base/ActionButton/index.jsx
+++ b/src/components/Tables/Base/ActionButton/index.jsx
@@ -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,
diff --git a/src/containers/TabList/index.less b/src/containers/TabList/index.less
index 0e4fc3d0..0070b321 100644
--- a/src/containers/TabList/index.less
+++ b/src/containers/TabList/index.less
@@ -4,6 +4,10 @@
   min-height: calc(100vh - 108px);
 
   :global {
+    .ant-tabs-content {
+      height: 100vh;
+    }
+
     .ant-tabs > .ant-tabs-nav {
       background-color: #fff;
     }