Merge pull request #591 from XiaoMi/feature/2.2.0

Feature/2.2.0
XiaoMi · Aug 28, 2019 · 8f8e37c · 8f8e37c
2 parents 9d3bcf7 + 4004327
commit 8f8e37c
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 29 deletions.
diff --git a/components/button/index.js b/components/button/index.js
@@ -3,4 +3,5 @@ import ButtonGroup from './ButtonGroup'
 import './style/index'
 
 Button.Group = ButtonGroup
+Button.IS_HI_COMPONENT = true
 export default Button
diff --git a/components/popover/index.js b/components/popover/index.js
@@ -65,7 +65,6 @@ export default class Popover extends Component {
 
     this.element = ReactDOM.findDOMNode(this)
     const referenceRef = ReactDOM.findDOMNode(this.referenceRef)
-    // this.reference = ReactDOM.findDOMNode(this.refs.reference)
     if (referenceRef === null) return
 
     if (trigger === 'click') {
@@ -105,27 +104,28 @@ export default class Popover extends Component {
       this.unbindHover = false
       popper.current.addEventListener('mouseenter', e => {
         this.eventTarget = e.target
-        // this.showPopper()
       })
       popper.current.addEventListener('mouseleave', e => {
-        this.delayHidePopper(e)
+        const poperPosition = popper.current.getBoundingClientRect()
+        if (e.clientY > poperPosition.y + poperPosition.height - 1 || e.clientY < poperPosition.y || e.clientX < poperPosition.x || e.clientX > poperPosition.x + poperPosition.width - 1) {
+          this.delayHidePopper(e)
+        }
       })
     }
   }
 
   render () {
-    const { style, className, title, content, placement, width } = this.props
+    const { style, className, title, content, placement, width, visible } = this.props
     const {
       showPopper
     } = this.state
-
     return (
       <div className={classNames(className, 'hi-popover')} style={style} ref={node => { this.popoverContainer = node }}>
         { React.cloneElement(React.Children.only(this.props.children), { ref: (el) => { this.referenceRef = el }, tabIndex: '0' }) }
 
         <Popper
           className='hi-popover__popper'
-          show={showPopper}
+          show={[true, false].includes(visible) ? visible : showPopper}
           attachEle={this.popoverContainer}
           placement={placement}
           zIndex={1040}

diff --git a/components/select/Select.js b/components/select/Select.js
@@ -10,6 +10,8 @@ import SelectInput from './SelectInput'
 import SelectDropdown from './SelectDropdown'
 import Provider from '../context'
 import fetchJsonp from 'fetch-jsonp'
+import qs from 'qs'
+
 class Select extends Component {
   autoloadFlag = true // 第一次自动加载数据标识
 
@@ -347,7 +349,7 @@ class Select extends Component {
       mode,
       data = {},
       type = 'GET',
-      key = 'keyword',
+      key,
       jsonpCallback = 'callback',
       ...options
     } = this.props.dataSource
@@ -357,24 +359,11 @@ class Select extends Component {
         : keyword
     this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词
 
-    const queryParams = (() => {
-      if (!queryParams) {
-        return ''
-      }
-      if (typeof params === 'string') {
-        return params
-      }
-      if (Object.prototype.toString.call(params) === '[object Object]') {
-        return Object.keys(params)
-          .map((key) => `&${key}=${params[key]}`)
-          .join('')
-      }
-    })()
-
+    const queryParams = qs.stringify(Object.assign({}, params, key && {[key]: keyword}))
     url =
-      url.indexOf('?') === -1
-        ? `${url}?${[key]}=${keyword}${queryParams}`
-        : `${url}&${[key]}=${keyword}${queryParams}`
+      url.includes('?')
+        ? `${url}&${queryParams}`
+        : `${url}?${queryParams}`
 
     if (type.toUpperCase() === 'POST') {
       options.body = JSON.stringify(data)
@@ -443,7 +432,7 @@ class Select extends Component {
       () => this.resetFocusedIndex()
     )
 
-    if (this.props.dataSource) {
+    if (this.props.dataSource && this.props.dataSource.key) {
       if (
         this.props.autoload ||
         keyword.toString().length >= this.state.queryLength

diff --git a/components/tooltip/index.js b/components/tooltip/index.js
@@ -25,9 +25,21 @@ class Tooltip extends Component {
   state = {
     tooltipShow: this.props.defaultVisible
   }
-
+  // 兼容处理 button disabled tooltip 不消失的问题
+  compatDisabledBtn = el => {
+    if (el.type.IS_HI_COMPONENT && el.props.disabled) {
+      return React.cloneElement(el, {
+        style: {
+          ...el.props.style,
+          pointerEvents: 'none'
+        }
+      })
+    } else {
+      return el
+    }
+  }
   render () {
-    const { placement, style, className, onClick, title, children } = this.props
+    const { placement, style, className, onClick, title, children, visible } = this.props
     const eleClass = classNames(`${prefixCls}-base`, placement && `${prefixCls}-${placement}`)
     const { tooltipShow } = this.state
     return (
@@ -49,15 +61,15 @@ class Tooltip extends Component {
       >
         <Popper
           className={`${prefixCls}__popper`}
-          show={tooltipShow}
+          show={[true, false].includes(visible) ? visible : tooltipShow}
           attachEle={this.tooltipContainer}
           placement={placement}
           zIndex={1070}
           width='auto'
         >
           <div className={eleClass}>{title}</div>
         </Popper>
-        {children}
+        {this.compatDisabledBtn(children)}
       </div>
     )
   }

diff --git a/docs/zh-CN/components/popover.mdx b/docs/zh-CN/components/popover.mdx
@@ -16,3 +16,4 @@ import DemoBase from '../../demo/popover/section-base.jsx'
 | content   | 气泡卡片内容       | string \| ReactNode | -                                      | -       |
 | placement | 气泡卡片显示的位置 | string              | 'top' \| 'right' \| 'bottom' \| 'left' | 'top'   |
 | trigger   | 气泡卡片触发方式   | string              | 'click' \| 'focus' \| 'hover'          | 'click' |
+| visible   | 控制气泡卡片的显示和隐藏（需要组件完全受控时使用）   | boolean              |true \| false          | true |
diff --git a/package.json b/package.json
@@ -52,6 +52,7 @@
     "github-markdown-css": "^3.0.1",
     "hoist-non-react-statics": "^2.5.0",
     "lodash": "^4.17.11",
+    "qs": "^6.8.0",
     "react": "^16.8.6",
     "react-addons-css-transition-group": "^15.6.2",
     "react-click-outside": "^3.0.1",