refactor(comp:footer): modify ok button

change ok button mode to default when there's no cancel button
IDuxFE · Jan 6, 2022 · c23c445 · c23c445
1 parent 657b749
commit c23c445
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 32 deletions.
diff --git a/packages/components/_private/footer/src/Footer.tsx b/packages/components/_private/footer/src/Footer.tsx
@@ -17,21 +17,6 @@ import { footerProps } from './types'
 export default defineComponent({
   props: footerProps,
   setup(props, { slots }) {
-    const okButtonProps = computed<FooterButtonProps | undefined>(() => {
-      const { ok, okButton, okLoading, okText } = props
-      if (!ok && !okText && !okButton) {
-        return undefined
-      }
-      return {
-        key: '__IDUX_FOOTER_BUTTON_OK',
-        text: okText,
-        onClick: ok,
-        loading: okLoading,
-        mode: 'primary',
-        ...okButton,
-      }
-    })
-
     const cancelButtonProps = computed<FooterButtonProps | undefined>(() => {
       const { cancel, cancelButton, cancelVisible, cancelLoading, cancelText } = props
       if (!cancelVisible || (!cancel && !cancelText && !cancelButton)) {
@@ -46,6 +31,21 @@ export default defineComponent({
       }
     })
 
+    const okButtonProps = computed<FooterButtonProps | undefined>(() => {
+      const { ok, okButton, okLoading, okText } = props
+      if (!ok && !okText && !okButton) {
+        return undefined
+      }
+      return {
+        key: '__IDUX_FOOTER_BUTTON_OK',
+        text: okText,
+        onClick: ok,
+        loading: okLoading,
+        mode: cancelButtonProps.value ? 'primary' : 'default',
+        ...okButton,
+      }
+    })
+
     return () => {
       const footerProp = props.footer
       const footerSlot = slots.footer

diff --git a/packages/components/i18n/src/locales/zh-CN.ts b/packages/components/i18n/src/locales/zh-CN.ts
@@ -47,7 +47,7 @@ const zhCN: Locale = {
   modal: {
     cancelText: '取消',
     okText: '确定',
-    justOkText: '知道了',
+    justOkText: '我知道了',
   },
   popconfirm: {
     cancelText: '取消',

diff --git a/packages/components/modal/src/ModalWrapper.tsx b/packages/components/modal/src/ModalWrapper.tsx
@@ -5,30 +5,21 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import {
-  ComputedRef,
-  Ref,
-  Transition,
-  computed,
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue'
+import type { ModalProps } from './types'
+import type { ModalConfig } from '@idux/components/config'
+import type { ComputedRef, Ref } from 'vue'
+
+import { Transition, computed, defineComponent, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 import { isFunction } from 'lodash-es'
 
 import { callEmit, convertCssPixel, getOffset } from '@idux/cdk/utils'
 import { ɵFooter } from '@idux/components/_private/footer'
 import { ɵHeader } from '@idux/components/_private/header'
-import { ModalConfig } from '@idux/components/config'
 import { getLocale } from '@idux/components/i18n'
 
 import ModalBody from './ModalBody'
 import { MODAL_TOKEN, modalToken } from './token'
-import { ModalProps } from './types'
 
 export default defineComponent({
   inheritAttrs: false,

diff --git a/packages/components/modal/style/index.less b/packages/components/modal/style/index.less
@@ -69,7 +69,7 @@
     &-warning,
     &-error {
       display: flex;
-      padding: @modal-typed-body-padding;
+      padding: @modal-body-typed-padding;
     }
 
     &-icon {

diff --git a/packages/components/modal/style/themes/default.variable.less b/packages/components/modal/style/themes/default.variable.less
@@ -31,7 +31,7 @@
 @modal-body-warning-color: @color-warning;
 @modal-body-error-color: @color-error;
 
-@modal-typed-body-padding: 0 @font-size-lg @font-size-lg @font-size-lg;
+@modal-body-typed-padding: 0 @spacing-sm @spacing-xl;
 
 @modal-max-width-screen-sm: calc(100vw - 16px);
 @modal-margin-screen-sm: @spacing-sm auto;