fix: dialog 在鸿蒙下问题修复 (#3032)

Author: xiaoyatong

src/packages/dialog/dialog.scss

@@ -8,7 +8,9 @@
   align-items: center;
   width: $dialog-width;
   min-width: $dialog-min-width;
+  /* #ifndef harmony*/
   max-height: 67%;
+  /* #endif */
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
@@ -112,15 +114,10 @@
         min-width: 100%;
       }
 
-      .nut-dialog-footer-ok {
-        order: 1;
-      }
-
       .nut-dialog-footer-cancel {
         margin: 0;
         color: $color-text;
         font-size: $font-size-base;
-        order: 2;
         display: flex;
         justify-content: center;
         margin-top: $dialog-vertical-footer-ok-margin-top;

src/packages/dialog/dialog.taro.tsx

@@ -122,43 +122,68 @@ export const BaseDialog: FunctionComponent<Partial<DialogBasicProps>> & {
     const btnClass =
       hideCancelButton || hideConfirmButton ? `${classPrefix}-footer-block` : ''
 
+    const renderCancelOfVertical = () => {
+      return (
+        !hideCancelButton && (
+          <View
+            className={`${classPrefix}-footer-cancel ${btnClass}`}
+            onClick={(e: ITouchEvent) => handleCancel(e)}
+          >
+            {cancelText || locale.cancel}
+          </View>
+        )
+      )
+    }
+
+    const renderCancel = () => {
+      return (
+        !hideCancelButton && (
+          <Button
+            type="default"
+            size="large"
+            className={`${classPrefix}-footer-cancel ${btnClass}`}
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+              handleCancel(e)
+            }
+          >
+            {cancelText || locale.cancel}
+          </Button>
+        )
+      )
+    }
+
+    const renderConfirm = () => {
+      return (
+        !hideConfirmButton && (
+          <Button
+            size="large"
+            type="primary"
+            className={classNames(`${classPrefix}-footer-ok ${btnClass}`, {
+              disabled: disableConfirmButton,
+            })}
+            disabled={disableConfirmButton}
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleOk(e)}
+            loading={loading}
+          >
+            {confirmText || locale.confirm}
+          </Button>
+        )
+      )
+    }
+
     return (
       footer || (
         <>
-          {!hideCancelButton &&
-            (footerDirection === 'vertical' ? (
-              <View
-                className={`${classPrefix}-footer-cancel ${btnClass}`}
-                onClick={(e: ITouchEvent) => handleCancel(e)}
-              >
-                {cancelText || locale.cancel}
-              </View>
-            ) : (
-              <Button
-                type="default"
-                size="large"
-                className={`${classPrefix}-footer-cancel ${btnClass}`}
-                onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
-                  handleCancel(e)
-                }
-              >
-                {cancelText || locale.cancel}
-              </Button>
-            ))}
-
-          {!hideConfirmButton && (
-            <Button
-              size="large"
-              type="primary"
-              className={classNames(`${classPrefix}-footer-ok ${btnClass}`, {
-                disabled: disableConfirmButton,
-              })}
-              disabled={disableConfirmButton}
-              onClick={(e: React.MouseEvent<HTMLButtonElement>) => handleOk(e)}
-              loading={loading}
-            >
-              {confirmText || locale.confirm}
-            </Button>
+          {footerDirection === 'vertical' ? (
+            <>
+              {renderConfirm()}
+              {renderCancelOfVertical()}
+            </>
+          ) : (
+            <>
+              {renderCancel()}
+              {renderConfirm()}
+            </>
           )}
         </>
       )
@@ -193,46 +218,52 @@ export const BaseDialog: FunctionComponent<Partial<DialogBasicProps>> & {
     }
   }
 
+  const renderContent = () => {
+    return (
+      <CSSTransition
+        in={visible}
+        timeout={300}
+        classNames="fadeDialog"
+        unmountOnExit
+        appear
+      >
+        <Content
+          className={className}
+          style={style}
+          title={title}
+          header={header}
+          close={renderCloseIcon()}
+          footer={renderFooter()}
+          footerDirection={footerDirection}
+          visible={visible}
+        >
+          {content || children}
+        </Content>
+      </CSSTransition>
+    )
+  }
+
   return (
     <View
       style={{ display: visible ? 'block' : 'none' }}
       ref={refObject}
       catchMove={lockScroll}
     >
-      <>
-        {overlay && (
-          <Overlay
-            zIndex={zIndex}
-            visible={visible}
-            style={overlayStyle}
-            className={overlayClassName}
-            closeOnOverlayClick={closeOnOverlayClick}
-            lockScroll={lockScroll}
-            onClick={onHandleClickOverlay}
-          />
-        )}
-
-        <CSSTransition
-          in={visible}
-          timeout={300}
-          classNames="fadeDialog"
-          unmountOnExit
-          appear
+      {overlay ? (
+        <Overlay
+          zIndex={zIndex}
+          visible={visible}
+          style={overlayStyle}
+          className={overlayClassName}
+          closeOnOverlayClick={closeOnOverlayClick}
+          lockScroll={lockScroll}
+          onClick={onHandleClickOverlay}
         >
-          <Content
-            className={className}
-            style={style}
-            title={title}
-            header={header}
-            close={renderCloseIcon()}
-            footer={renderFooter()}
-            footerDirection={footerDirection}
-            visible={visible}
-          >
-            {content || children}
-          </Content>
-        </CSSTransition>
-      </>
+          {renderContent()}
+        </Overlay>
+      ) : (
+        renderContent()
+      )}
     </View>
   )
 }

src/packages/dialog/dialog.tsx

@@ -93,6 +93,7 @@ const BaseDialog: ForwardRefRenderFunction<
           {!hideCancelButton &&
             (footerDirection === 'vertical' ? (
               <div
+                style={{ order: 2 }}
                 className={`${classPrefix}-footer-cancel ${btnClass}`}
                 onClick={(e) => handleCancel(e)}
               >