From cfc7e15fdf6df8d209077e360c8170edcc23217c Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Sat, 10 Nov 2018 22:03:00 +0800 Subject: [PATCH] feat: update vc-tabs to 9.4.8 and vc-time-picker to 3.4.0 --- components/vc-tabs/src/InkTabBarNode.jsx | 43 ++---------------- .../vc-tabs/src/ScrollableTabBarNode.jsx | 18 ++++++-- components/vc-tabs/src/TabBarTabsNode.jsx | 13 ++++-- components/vc-tabs/src/index.js | 2 +- components/vc-tabs/src/utils.js | 44 +++++++++++++++++++ components/vc-time-picker/Header.jsx | 21 ++++++--- components/vc-time-picker/Panel.jsx | 4 ++ components/vc-time-picker/TimePicker.jsx | 11 +++-- .../vc-time-picker/assets/index/Header.less | 5 ++- components/vc-time-picker/index.js | 2 +- 10 files changed, 102 insertions(+), 61 deletions(-) diff --git a/components/vc-tabs/src/InkTabBarNode.jsx b/components/vc-tabs/src/InkTabBarNode.jsx index 92f827d06..47240e504 100644 --- a/components/vc-tabs/src/InkTabBarNode.jsx +++ b/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) diff --git a/components/vc-tabs/src/ScrollableTabBarNode.jsx b/components/vc-tabs/src/ScrollableTabBarNode.jsx index 14fb9a303..b3962c08c 100644 --- a/components/vc-tabs/src/ScrollableTabBarNode.jsx +++ b/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} > - + {prevIcon || } ) @@ -295,7 +305,7 @@ export default { [`${prefixCls}-tab-arrow-show`]: showNextPrev, }} > - + {nextIcon || } ) diff --git a/components/vc-tabs/src/TabBarTabsNode.jsx b/components/vc-tabs/src/TabBarTabsNode.jsx index ed3b87920..3ae896d91 100644 --- a/components/vc-tabs/src/TabBarTabsNode.jsx +++ b/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
{rst}
+ return ( +
{rst}
+ ) }, } diff --git a/components/vc-tabs/src/index.js b/components/vc-tabs/src/index.js index 1db249af8..d646f05ac 100755 --- a/components/vc-tabs/src/index.js +++ b/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' diff --git a/components/vc-tabs/src/utils.js b/components/vc-tabs/src/utils.js index 4502b5a6f..68b694ced 100644 --- a/components/vc-tabs/src/utils.js +++ b/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 +} diff --git a/components/vc-time-picker/Header.jsx b/components/vc-time-picker/Header.jsx index 8a64c7aff..529fb1636 100644 --- a/components/vc-time-picker/Header.jsx +++ b/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 () + return ( + + {clearIcon || } + + ) }, getProtoValue () { @@ -176,7 +183,7 @@ const Header = { const invalidClass = invalid ? `${prefixCls}-input-invalid` : '' return ( {this.$slots.addon} @@ -267,6 +271,7 @@ export default { autoFocus, inputReadOnly, sOpen, sValue, onFocus, onBlur, } = this const popupClassName = this.getPopupClassName() + const inputIcon = getComponentFromProp(this, 'inputIcon') return ( - + {inputIcon || } ) diff --git a/components/vc-time-picker/assets/index/Header.less b/components/vc-time-picker/assets/index/Header.less index 7ad3d9fd6..5234bed15 100644 --- a/components/vc-time-picker/assets/index/Header.less +++ b/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; } } diff --git a/components/vc-time-picker/index.js b/components/vc-time-picker/index.js index d1c7e6427..c462da2ec 100644 --- a/components/vc-time-picker/index.js +++ b/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'