feat: [Popover] 添加新配isReverseBtn

Author: jiaojiao.diao

src/components/index.js

@@ -17,7 +17,7 @@ bodys.style.setProperty(`--shuyunBlue${i + 1}`,color)
 }
 }
 
-export const version = '2.1.0';
+export const version = '2.0.5';
 
 export { default as Avatar } from './avatar';
 

src/components/popover/demos/basic.md

@@ -71,6 +71,7 @@ export default function PopoverDemo() {
           size="small"
           content="这是一段文字描述"
           showIcon
+          isReverseBtn
           showCancelBtn
           showConfirmBtn>
           <Button>文字 + Icon + btn</Button>

src/components/popover/index.js

@@ -21,6 +21,7 @@ function Popover(props) {
     iconTpl,
     iconType,
     iconStyle,
+    isReverseBtn,
     showCancelBtn,
     showConfirmBtn,
     cancelBtnText,
@@ -105,7 +106,7 @@ function Popover(props) {
           </div>
         </section>
 
-        <section className={`${classSelector}-btn`} ref={ref}>
+        <section className={classnames(`${classSelector}-btn`, {[`${classSelector}-reverse-btn`]: isReverseBtn})} ref={ref}>
           {showCancelBtn && (
             <Button
               onClick={handleCancelClick}
@@ -176,6 +177,7 @@ Popover.propTypes = {
   iconStyle: PropTypes.object,
   showCancelBtn: PropTypes.bool,
   showConfirmBtn: PropTypes.bool,
+  isReverseBtn: PropTypes.bool,
   cancelBtnText: PropTypes.string,
   confirmText: PropTypes.string,
   size: PropTypes.oneOf([ 'mini', 'small', 'default', 'large' ]),
@@ -197,6 +199,7 @@ Popover.defaultProps = {
   iconTpl: '',
   iconType: '',
   iconStyle: {},
+  isReverseBtn: false,
   showCancelBtn: false,
   showConfirmBtn: false,
   cancelBtnText: '取消',

src/components/popover/index.less

@@ -21,6 +21,7 @@
       color: @orange-5;
     }
   }
+
   &-icon {
     color: #fd830a;
     margin-right: 8px;
@@ -49,6 +50,7 @@
     line-height: 18px;
     max-height: 190px;
     overflow-y: auto;
+
     &::-webkit-scrollbar {
       width: 4px;
     }
@@ -63,12 +65,18 @@
     display: flex;
     justify-content: end;
 
-    > button {
+    >button {
       margin-top: 16px;
       margin-left: 8px;
       margin-bottom: 4px;
     }
   }
+
+  &-reverse-btn {
+    display: flex;
+    justify-content: right;
+    flex-direction: row-reverse;
+  }
 }
 
 .@{popover-prefix-cls}-tooltip {
@@ -105,4 +113,4 @@
     margin-top: -3px;
     cursor: pointer;
   }
-}
+}

src/components/popover/index.md

@@ -28,6 +28,7 @@ group:
 | iconTpl  | 自定义图标 | Element           | ''  |
 | iconType  | 自定义图标，可直接传入组件库的图标类型 | string           | ''  |
 | iconStyle  | 图标样式，配置 iconTpl 时，该值无效 | object           | {}  |
+| isReverseBtn       | 是否反转确定和取消的位置                   | boolean             | `false`  |
 | showCancelBtn          | 是否展示取消按钮     | boolean           | false     |
 | showConfirmBtn  | 是否展示确认按钮               | boolean            | false     |
 | cancelBtnText      | 取消按钮自定义文本      | string            | '取消'     |