feat: update vc-tabs to 9.4.8 and vc-time-picker to 3.4.0

components/vc-tabs/src/InkTabBarNode.jsx

@@ -1,46 +1,11 @@
 import PropTypes from '../../_util/vue-types'
-import { setTransform, isTransformSupported } from './utils'
+import { setTransform, isTransformSupported, getLeft, getTop } from './utils'
 import BaseMixin from '../../_util/BaseMixin'
 
-export function getScroll (w, top) {
-  let ret = w[`page${top ? 'Y' : 'X'}Offset`]
-  const method = `scroll${top ? 'Top' : 'Left'}`
-  if (typeof ret !== 'number') {
-    const d = w.document
-    // ie6,7,8 standard mode
-    ret = d.documentElement[method]
-    if (typeof ret !== 'number') {
-      // quirks mode
-      ret = d.body[method]
-    }
-  }
-  return ret
-}
-
-function offset (elem) {
-  let x
-  let y
-  const doc = elem.ownerDocument
-  const body = doc.body
-  const docElem = doc && doc.documentElement
-  const box = elem.getBoundingClientRect()
-  x = box.left
-  y = box.top
-  x -= docElem.clientLeft || body.clientLeft || 0
-  y -= docElem.clientTop || body.clientTop || 0
-  const w = doc.defaultView || doc.parentWindow
-  x += getScroll(w)
-  y += getScroll(w, true)
-  return {
-    left: x, top: y,
-  }
-}
-
 function componentDidUpdate (component, init) {
   const { styles = {}} = component.$props
   const rootNode = component.getRef('root')
   const wrapNode = component.getRef('nav') || rootNode
-  const containerOffset = offset(wrapNode)
   const inkBarNode = component.getRef('inkBar')
   const activeTab = component.getRef('activeTab')
   const inkBarNodeStyle = inkBarNode.style
@@ -51,12 +16,10 @@ function componentDidUpdate (component, init) {
   }
   if (activeTab) {
     const tabNode = activeTab
-    const tabOffset = offset(tabNode)
     const transformSupported = isTransformSupported(inkBarNodeStyle)
     if (tabBarPosition === 'top' || tabBarPosition === 'bottom') {
-      let left = tabOffset.left - containerOffset.left
+      let left = getLeft(tabNode, wrapNode)
       let width = tabNode.offsetWidth
-
       // If tabNode'width width equal to wrapNode'width when tabBarPosition is top or bottom
       // It means no css working, then ink bar should not have width until css is loaded
       // Fix https://github.com/ant-design/ant-design/issues/7564
@@ -80,7 +43,7 @@ function componentDidUpdate (component, init) {
         inkBarNodeStyle.right = `${wrapNode.offsetWidth - left - width}px`
       }
     } else {
-      let top = tabOffset.top - containerOffset.top
+      let top = getTop(tabNode, wrapNode)
       let height = tabNode.offsetHeight
       if (styles.inkBar && styles.inkBar.height !== undefined) {
         height = parseFloat(styles.inkBar.height, 10)

components/vc-tabs/src/ScrollableTabBarNode.jsx

@@ -3,6 +3,7 @@ import addDOMEventListener from 'add-dom-event-listener'
 import debounce from 'lodash/debounce'
 import PropTypes from '../../_util/vue-types'
 import BaseMixin from '../../_util/BaseMixin'
+import { getComponentFromProp } from '../../_util/props-util'
 
 function noop () {
 }
@@ -17,6 +18,8 @@ export default {
     scrollAnimated: PropTypes.bool.def(true),
     navWrapper: PropTypes.func.def(arg => arg),
     activeKey: PropTypes.any,
+    prevIcon: PropTypes.any,
+    nextIcon: PropTypes.any,
   },
 
   data () {
@@ -83,7 +86,8 @@ export default {
     },
     setNextPrev () {
       const navNode = this.$props.getRef('nav')
-      const navNodeWH = this.getScrollWH(navNode)
+      const navTabsContainer = this.$props.getRef('navTabsContainer')
+      const navNodeWH = this.getScrollWH(navTabsContainer || navNode)
       const containerWH = this.getOffsetWH(this.$props.getRef('container'))
       const navWrapNodeWH = this.getOffsetWH(this.$props.getRef('navWrap'))
       let { offset } = this
@@ -267,7 +271,13 @@ export default {
   },
   render () {
     const { next, prev } = this
-    const { prefixCls, scrollAnimated, navWrapper } = this.$props
+    const {
+      prefixCls,
+      scrollAnimated,
+      navWrapper,
+    } = this.$props
+    const prevIcon = getComponentFromProp(this, 'prevIcon')
+    const nextIcon = getComponentFromProp(this, 'nextIcon')
     const showNextPrev = prev || next
 
     const prevButton = (
@@ -281,7 +291,7 @@ export default {
         }}
         onTransitionend={this.prevTransitionEnd}
       >
-        <span class={`${prefixCls}-tab-prev-icon`} />
+        {prevIcon || <span class={`${prefixCls}-tab-prev-icon`} />}
       </span>
     )
 
@@ -295,7 +305,7 @@ export default {
           [`${prefixCls}-tab-arrow-show`]: showNextPrev,
         }}
       >
-        <span class={`${prefixCls}-tab-next-icon`} />
+        {nextIcon || <span class={`${prefixCls}-tab-next-icon`} />}
       </span>
     )
 

components/vc-tabs/src/TabBarTabsNode.jsx

@@ -19,7 +19,7 @@ export default {
     getRef: PropTypes.func.def(noop),
   },
   render () {
-    const { panels: children, activeKey, prefixCls, tabBarGutter } = this.$props
+    const { panels: children, activeKey, prefixCls, tabBarGutter, saveRef } = this.$props
     const rst = []
 
     children.forEach((child, index) => {
@@ -43,7 +43,7 @@ export default {
       if (activeKey === key) {
         directives.push({
           name: 'ref',
-          value: this.saveRef('activeTab'),
+          value: saveRef('activeTab'),
         })
       }
       const tab = getComponentFromProp(child, 'tab')
@@ -64,7 +64,14 @@ export default {
       )
     })
 
-    return <div>{rst}</div>
+    return (
+      <div
+        {...{ directives: [{
+          name: 'ref',
+          value: this.saveRef('navTabsContainer'),
+        }] }}
+      >{rst}</div>
+    )
   },
 }
 

components/vc-tabs/src/index.js

@@ -1,4 +1,4 @@
-// based on rc-tabs 9.3.6
+// based on rc-tabs 9.4.8
 import Tabs from './Tabs'
 import TabPane from './TabPane'
 import TabContent from './TabContent'

components/vc-tabs/src/utils.js

@@ -81,3 +81,47 @@ export function getDataAttr (props) {
     return prev
   }, {})
 }
+
+function toNum (style, property) {
+  return +style.getPropertyValue(property).replace('px', '')
+}
+
+function getTypeValue (start, current, end, tabNode, wrapperNode) {
+  let total = getStyle(wrapperNode, `padding-${start}`)
+  if (!tabNode || !tabNode.parentNode) {
+    return total
+  }
+
+  const { childNodes } = tabNode.parentNode
+  Array.prototype.some.call(childNodes, (node) => {
+    const style = getComputedStyle(node)
+    if (node !== tabNode) {
+      total += toNum(style, `margin-${start}`)
+      total += toNum(style, `margin-${end}`)
+      total += node[current]
+
+      if (style.boxSizing === 'content-box') {
+        total += toNum(style, `border-${start}-width`) + toNum(style, `border-${end}-width`)
+      }
+      return false
+    }
+
+    // We need count current node margin
+    // ref: https://github.com/react-component/tabs/pull/139#issuecomment-431005262
+    total += toNum(style, `margin-${start}`)
+
+    return true
+  })
+
+  return total
+}
+
+export function getLeft (tabNode, wrapperNode) {
+  return getTypeValue('left', 'offsetWidth', 'right', tabNode, wrapperNode)
+}
+
+export function getTop (tabNode, wrapperNode) {
+  const top = getTypeValue('top', 'offsetHeight', 'bottom', tabNode, wrapperNode)
+  const height = getStyle(tabNode.parentNode, 'height')
+  return top - height
+}

components/vc-time-picker/Header.jsx

@@ -2,6 +2,7 @@
 import PropTypes from '../_util/vue-types'
 import BaseMixin from '../_util/BaseMixin'
 import moment from 'moment'
+import { getComponentFromProp } from '../_util/props-util'
 
 const Header = {
   mixins: [BaseMixin],
@@ -28,6 +29,7 @@ const Header = {
     focusOnOpen: PropTypes.bool,
     // onKeyDown: PropTypes.func,
     showStr: PropTypes.bool.def(true),
+    clearIcon: PropTypes.any,
   },
   data () {
     const { value, format } = this
@@ -156,15 +158,20 @@ const Header = {
 
     getClearButton () {
       const { prefixCls, allowEmpty, clearText } = this
+      const clearIcon = getComponentFromProp(this, 'clearIcon')
       if (!allowEmpty) {
         return null
       }
-      return (<a
+      return (
-        class={`${prefixCls}-clear-btn`}
+        <a
-        role='button'
+          role='button'
-        title={clearText}
+          class={`${prefixCls}-clear-btn`}
-        onMousedown={this.onClear}
+          title={clearText}
-      />)
+          onMousedown={this.onClear}
+        >
+          {clearIcon || <i class={`${prefixCls}-clear-btn-icon`} />}
+        </a>
+      )
     },
 
     getProtoValue () {
@@ -176,7 +183,7 @@ const Header = {
       const invalidClass = invalid ? `${prefixCls}-input-invalid` : ''
       return (
         <input
-          class={`${prefixCls}-input  ${invalidClass}`}
+          class={`${prefixCls}-input ${invalidClass}`}
           ref='input'
           onKeydown={this.onKeyDown}
           value={showStr ? str : ''}

components/vc-time-picker/Panel.jsx

@@ -4,6 +4,7 @@ import BaseMixin from '../_util/BaseMixin'
 import Header from './Header'
 import Combobox from './Combobox'
 import moment from 'moment'
+import { getComponentFromProp } from '../_util/props-util'
 
 function noop () {
 }
@@ -50,6 +51,7 @@ const Panel = {
     secondStep: PropTypes.number,
     focusOnOpen: PropTypes.bool,
     // onKeydown: PropTypes.func,
+    clearIcon: PropTypes.any,
   },
   data () {
     return {
@@ -116,6 +118,7 @@ const Panel = {
       focusOnOpen, hourStep, minuteStep, secondStep, inputReadOnly,
       sValue, currentSelectPanel, showStr, $listeners = {},
     } = this
+    const clearIcon = getComponentFromProp(this, 'clearIcon')
     const { esc = noop, clear = noop, keydown = noop } = $listeners
 
     const disabledHourOptions = this.disabledHours2()
@@ -156,6 +159,7 @@ const Panel = {
           onKeydown={keydown}
           inputReadOnly={inputReadOnly}
           showStr={showStr}
+          clearIcon={clearIcon}
         />
         <Combobox
           prefixCls={prefixCls}

components/vc-time-picker/TimePicker.jsx

@@ -5,7 +5,7 @@ import Trigger from '../vc-trigger'
 import Panel from './Panel'
 import placements from './placements'
 import moment from 'moment'
-import { initDefaultProps, hasProp } from '../_util/props-util'
+import { initDefaultProps, hasProp, getComponentFromProp } from '../_util/props-util'
 
 function noop () {
 }
@@ -58,6 +58,8 @@ export default {
     // onKeyDown: PropTypes.func,
     autoFocus: PropTypes.bool,
     id: PropTypes.string,
+    inputIcon: PropTypes.any,
+    clearIcon: PropTypes.any,
   }, {
     clearText: 'clear',
     prefixCls: 'rc-time-picker',
@@ -175,6 +177,7 @@ export default {
         use12Hours, focusOnOpen, onKeyDown2, hourStep, minuteStep, secondStep,
         sValue,
       } = this
+      const clearIcon = getComponentFromProp(this, 'clearIcon')
       return (
         <Panel
           clearText={clearText}
@@ -201,7 +204,8 @@ export default {
           minuteStep={minuteStep}
           secondStep={secondStep}
           focusOnOpen={focusOnOpen}
-          onKeyDown={onKeyDown2}
+          onKeydown={onKeyDown2}
+          clearIcon={clearIcon}
         >
           {this.$slots.addon}
         </Panel>
@@ -267,6 +271,7 @@ export default {
       autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur,
     } = this
     const popupClassName = this.getPopupClassName()
+    const inputIcon = getComponentFromProp(this, 'inputIcon')
     return (
       <Trigger
         prefixCls={`${prefixCls}-panel`}
@@ -301,7 +306,7 @@ export default {
             readOnly={!!inputReadOnly}
             id={id}
           />
-          <span class={`${prefixCls}-icon`}/>
+          {inputIcon || <span class={`${prefixCls}-icon`}/>}
         </span>
       </Trigger>
     )

components/vc-time-picker/assets/index/Header.less

@@ -33,9 +33,10 @@
     margin: 0;
   }
 
-  &-clear-btn:after {
+  &-clear-btn-icon:after {
     content: "x";
     font-size: 12px;
+    font-style: normal;
     color: #aaa;
     display: inline-block;
     line-height: 1;
@@ -43,7 +44,7 @@
     transition: color 0.3s ease;
   }
 
-  &-clear-btn:hover:after {
+  &-clear-btn-icon:hover:after {
     color: #666;
   }
 }

components/vc-time-picker/index.js

@@ -1,2 +1,2 @@
-// based on rc-time-picker 3.3.1
+// based on rc-time-picker 3.4.0
 export { default } from './TimePicker'