feat(Badge): fix align not update & add bubble container, offset

UCloud-FE · Aug 28, 2020 · 9782022 · 9782022
1 parent fb02087
commit 9782022
Show file tree

Hide file tree

Showing 10 changed files with 530 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -53,11 +53,11 @@
     "color": "^3.0.0",
     "component-classes": "^1.2.6",
     "create-react-context": "^0.2.3",
+    "dom-align": "^1.12.0",
     "lodash": "^4.17.5",
     "mini-store": "^1.0.2",
     "moment": "^2.22.2",
     "prop-types": "^15.6.1",
-    "rc-align": "2.4.3",
     "rc-calendar": "9.6.2",
     "rc-dialog": "7.2.1",
     "rc-form": "2.2.0",

diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import RcAlign from 'rc-align';
+import RcAlign from 'src/libs/rc-align';
 import _ from 'lodash';
 
 import { Wrap, BadgeWrap, BaseBadge, DotBadge } from './style';

diff --git a/src/components/Badge/Bubble.jsx b/src/components/Badge/Bubble.jsx
@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
-import RcAlign from 'rc-align';
+import RcAlign from 'src/libs/rc-align';
 
 import { Wrap, BubbleWrap, bubbleStyleMap } from './style';
 import { bubblePlacement } from './placements';
@@ -23,18 +23,26 @@ export class Bubble extends PureComponent {
             bubbleColor: PropTypes.string,
             /** 泡泡的背景色 */
             bubbleBackground: PropTypes.string
-        })
+        }),
+        /** 自定义冒泡层容器 */
+        getBubbleContainer: PropTypes.func,
+        /** 自定义偏移量 */
+        offset: PropTypes.array
     };
     static defaultProps = {
-        styleType: 'yellow'
+        styleType: 'yellow',
+        offset: [12, -4]
     };
     render() {
-        const { children, bubble, styleType, customStyle, ...rest } = this.props;
+        const { children, bubble, styleType, customStyle, offset, getBubbleContainer, ...rest } = this.props;
         return (
             <Wrap {...rest}>
                 {children}
                 {bubble && (
-                    <RcAlign target={() => ReactDOM.findDOMNode(this)} align={bubblePlacement}>
+                    <RcAlign
+                        target={getBubbleContainer || (() => ReactDOM.findDOMNode(this))}
+                        align={{ ...bubblePlacement, targetOffset: offset }}
+                    >
                         <BubbleWrap styleType={styleType} customStyle={customStyle}>
                             {bubble}
                         </BubbleWrap>

diff --git a/src/components/Badge/__demo__/badge.jsx b/src/components/Badge/__demo__/badge.jsx
@@ -21,9 +21,6 @@ class Demo extends React.Component {
             noneContent: false
         };
     }
-    forceAlign() {
-        this.badge && this.badge.forceAlign();
-    }
     render() {
         const { value, dot, hideWhenZero, placement, maxValue, noneContent, color, background } = this.state;
         const itemLayout = {
@@ -58,7 +55,6 @@ class Demo extends React.Component {
                             value={placement}
                             onChange={placement => {
                                 this.setState({ placement });
-                                setTimeout(() => this.forceAlign());
                             }}
                         />
                     </Form.Item>
@@ -78,7 +74,6 @@ class Demo extends React.Component {
                         hideWhenZero={hideWhenZero}
                         placement={placement}
                         badgeStyle={{ color, background }}
-                        innerRef={ref => (this.badge = ref)}
                     >
                         {noneContent ? null : <div style={{ width: 50, height: 50, background: '#ddd' }} />}
                     </Badge>

diff --git a/src/components/Badge/__demo__/bubble.jsx b/src/components/Badge/__demo__/bubble.jsx
@@ -3,25 +3,27 @@ import React from 'react';
 import Badge from 'src/components/Badge';
 import Form from 'src/components/Form';
 import Input from 'src/components/Input';
+import NumberInput from 'src/components/NumberInput';
 import Radio from 'src/components/Radio';
 import Button from 'src/components/Button';
 import Combine from 'src/components/Combine';
 
 // demo start
-const { StyleType } = Badge.Bubble;
+const { StyleType, defaultProps } = Badge.Bubble;
 class Demo extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
             bubble: 'bubble',
-            styleType: Badge.Bubble.defaultProps.styleType
+            styleType: defaultProps.styleType,
+            offset: defaultProps.offset
         };
     }
     forceAlign() {
         this.badge && this.badge.forceAlign();
     }
     render() {
-        const { bubble, styleType, bubbleColor, bubbleBackground } = this.state;
+        const { bubble, styleType, bubbleColor, bubbleBackground, offset } = this.state;
         const itemLayout = {
             labelCol: {
                 span: 3
@@ -43,6 +45,26 @@ class Demo extends React.Component {
                             onChange={v => this.setState({ styleType: v })}
                         />
                     </Form.Item>
+                    <Form.Item label="offset[0]" {...itemLayout}>
+                        <NumberInput
+                            value={offset[0]}
+                            onNumberChange={v =>
+                                this.setState({
+                                    offset: [v, offset[1]]
+                                })
+                            }
+                        />
+                    </Form.Item>
+                    <Form.Item label="offset[1]" {...itemLayout}>
+                        <NumberInput
+                            value={offset[1]}
+                            onNumberChange={v =>
+                                this.setState({
+                                    offset: [offset[0], v]
+                                })
+                            }
+                        />
+                    </Form.Item>
                     <Form.Item label="customStyle.bubbleColor" {...itemLayout}>
                         <Combine>
                             <input type="color" onChange={e => this.setState({ bubbleColor: e.target.value })} />
@@ -64,6 +86,7 @@ class Demo extends React.Component {
                     <Badge.Bubble
                         bubble={bubble}
                         styleType={styleType}
+                        offset={offset}
                         customStyle={{ bubbleColor, bubbleBackground }}
                         style={{ margin: 10 }}
                     >