feat: [Modal]添加新配置outerClassName和isReverseBtn

ShuyunFF2E · Dec 11, 2024 · 0cc30b8 · 0cc30b8
1 parent a87e202
commit 0cc30b8
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 3 deletions.
diff --git a/src/components/modal/demos/basic-modal.md b/src/components/modal/demos/basic-modal.md
@@ -83,6 +83,7 @@ class ModalDemo extends React.Component {
 					size="medium"
 					visible={this.state.visible}
 					showMask={this.state.showMask}
+					isReverseBtn={true}
 					clickMaskCanClose={this.state.clickMaskCanClose}
 					onOk={this.handleOk}
 					onCancel={this.handleCancel}

diff --git a/src/components/modal/demos/confirm.md b/src/components/modal/demos/confirm.md
@@ -35,6 +35,7 @@ class ModalDemo extends React.Component {
 			title: '基本确认对话框',
 			body: '杭州数云信息技术有限公司是国内领先的全域消费者增长方案提供商',
 			cancelBtnOpts: { type: 'secondary' },
+			isReverseBtn: true,
 			// hasFooter: false,
       //       className: "test",
 			onOk: () => {

diff --git a/src/components/modal/index.less b/src/components/modal/index.less
@@ -21,13 +21,15 @@
 
 @confirm-loading-border: 1px solid #ddd;
 @confirm-loading-border-top: 1px solid @color-white;
+
 .@{modal-prefix-cls} {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: @z-index-modal-mask;
+
   &-mask {
     position: fixed;
     top: 0;
@@ -75,16 +77,19 @@
     opacity: 0;
     transform: scale(0.5);
   }
+
   &-enter-active,
   &-appear-active {
     opacity: 1;
     transform: scale(1);
     transition: opacity 300ms, transform 300ms;
   }
+
   &-exit {
     opacity: 1;
     transform: scale(1);
   }
+
   &-exit-active {
     opacity: 0;
     transform: scale(0.5);
@@ -145,20 +150,24 @@
       width: 8px;
       height: 8px;
     }
+
     &::-webkit-scrollbar-thumb {
       /*滚动条里面小方块*/
       background: @scrollbar-thumb;
       border-radius: @body-border-radius;
+
       &:hover {
         background: @gray-7;
       }
     }
+
     &::-webkit-scrollbar-track {
       /*滚动条里面轨道*/
       width: 8px;
       border-radius: 0;
       // background: @scrollbar-bg;
     }
+
     &::-webkit-scrollbar-corner {
       /*右下角按钮样式*/
       background: @scrollbar-bg;
@@ -191,6 +200,13 @@
       justify-content: flex-end;
     }
 
+    &-reverse {
+      display: flex;
+      justify-content: right;
+      flex-direction: row-reverse;
+      gap: 16px;
+    }
+
     .@{modal-prefix-cls}-confirm-btn {
       margin-left: 16px;
     }
@@ -220,6 +236,7 @@
       border-radius: @body-border-small-radius;
     }
   }
+
   &&-middle {
     .@{modal-prefix-cls}-header {
       border-radius: @body-border-middle-radius @body-border-middle-radius 0 0;
@@ -280,7 +297,7 @@
     line-height: 24px;
     vertical-align: text-top;
     margin-right: 8px;
-    padding: 0!important;
+    padding: 0 !important;
   }
 
   .confirm-style {
@@ -314,4 +331,4 @@
 
 .other-area-can-click {
   pointer-events: none;
-}
+}
diff --git a/src/components/modal/index.md b/src/components/modal/index.md
@@ -26,6 +26,8 @@ group:
 | footerStyle        | 设置弹出框footer区域样式                 | object              | -       |
 | disabledOk         | 禁用确认按钮                             | boolean             | `false` |
 | className          | 设置弹出框样式名称                       | string              | -       |
+| outerClassName     | 设置最外层mark样式                       | string              | -       |
+| isReverseBtn       | 是否反转确定和取消的位置                   | boolean             | `false`  |
 | hasFooter          | 是否显示底部区域                         | boolean             | `true`  |
 | footer             | modal 底部内容区域                       | string 或 ReactNode | -       |
 | onClose            | 点击右上角关闭按钮时触发的回调           | function            | -       |

diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -70,6 +70,7 @@ class Notification extends Component {
     onClose: noop,
     supportDrag: true,
     borderRadiusSize: 'large',
+    isReverseBtn: false,
   };
 
   static propTypes = {
@@ -88,6 +89,7 @@ class Notification extends Component {
     okBtnOpts: PropTypes.object,
     cancelBtnOpts: PropTypes.object,
     hasFooter: PropTypes.bool,
+    isReverseBtn: PropTypes.bool,
     onOk: PropTypes.func,
     onCancel: PropTypes.func,
     onClose: PropTypes.func,
@@ -308,6 +310,7 @@ class Notification extends Component {
     });
   };
 
+
   render() {
     const {
       visible,
@@ -318,6 +321,8 @@ class Notification extends Component {
       headerStyle,
       disabledOk,
       className,
+      outerClassName,
+      isReverseBtn,
       type,
       children,
       title,
@@ -360,7 +365,7 @@ class Notification extends Component {
         <div
           id="mask"
           ref={this.maskRef}
-          className={classnames(`${prefixCls}-modal`, {
+          className={classnames(`${prefixCls}-modal`, outerClassName, {
             'other-area-can-click': !showMask,
             [`${prefixCls}-modal-${borderRadiusSize}`]: borderRadiusSize,
           })}
@@ -428,6 +433,7 @@ class Notification extends Component {
                 disabledOk={disabledOk}
                 showConfirmLoading={showConfirmLoading}
                 infoText={infoText}
+                isReverseBtn={isReverseBtn}
               />
             </div>
           </CSSTransition>
@@ -517,6 +523,7 @@ function ModalFooter({
   cancelBtnOpts,
   hasFooter,
   showConfirmLoading,
+  isReverseBtn,
   onCancel,
   onOk,
   onReset,
@@ -532,9 +539,11 @@ function ModalFooter({
     onReset();
     onCancel();
   };
+
   const footerClass = classnames(`${prefixCls}-modal-footer`, {
     [`${prefixCls}-modal-border`]: type !== 'modal',
     [`${prefixCls}-modal-footer-default`]: !(hasFooter && footer),
+    [`${prefixCls}-modal-footer-reverse`]: isReverseBtn,
   });
   const confirmClass = classnames(`${prefixCls}-modal-confirm-btn`);
   if (!hasFooter) {

diff --git a/src/components/modal/prompt.js b/src/components/modal/prompt.js
@@ -25,6 +25,8 @@ class Prompt extends React.Component {
     onOk: noop,
     onCancel: noop,
     hasFooter: true,
+    outerClassName: '',
+    isReverseBtn: false,
     className: '',
   };
 
@@ -41,6 +43,8 @@ class Prompt extends React.Component {
     onCancel: PropTypes.func,
     hasFooter: PropTypes.bool,
     className: PropTypes.string,
+    outerClassName: PropTypes.string,
+    isReverseBtn: PropTypes.bool,
   };
 
   constructor(props) {
@@ -189,6 +193,8 @@ class Prompt extends React.Component {
           showConfirmLoading={this.state.showConfirmLoading}
           hasFooter={this.props.hasFooter}
           className={this.props.className}
+          outerClassName={this.props.outerClassName}
+          isReverseBtn={this.props.isReverseBtn}
           infoText={infoText}
         >
           <div>
@@ -243,6 +249,8 @@ function prompt({
   title,
   hasFooter,
   className,
+  outerClassName,
+  isReverseBtn,
   infoText,
 }) {
   // 创建一个关联id
@@ -264,6 +272,8 @@ function prompt({
       iconStyle={iconStyle}
       isShowIcon={isShowIcon}
       hasFooter={hasFooter}
+      outerClassName={outerClassName}
+      isReverseBtn={isReverseBtn}
       className={className}
       okText={okText}
       cancelText={cancelText}