update 3.4.0

Author: tangjinzhou

components/_util/interopDefault.js

@@ -0,0 +1,4 @@
+// https://github.com/moment/moment/issues/3650
+export default function interopDefault (m) {
+  return m.default || m
+}

components/affix/index.jsx

@@ -128,6 +128,20 @@ export default {
       }
       this.setState({ placeholderStyle: placeholderStyle })
     },
+    syncPlaceholderStyle (e) {
+      const { affixStyle } = this
+      if (!affixStyle) {
+        return
+      }
+      this.$refs.placeholderNode.style.cssText = ''
+      this.setAffixStyle(e, {
+        ...affixStyle,
+        width: this.$refs.placeholderNode.offsetWidth + 'px',
+      })
+      this.setPlaceholderStyle({
+        width: this.$refs.placeholderNode.offsetWidth + 'px',
+      })
+    },
 
     updatePosition (e) {
       let { offsetTop } = this
@@ -200,6 +214,9 @@ export default {
         }
         this.setPlaceholderStyle(null)
       }
+      if (e.type === 'resize') {
+        this.syncPlaceholderStyle(e)
+      }
     },
     setTargetEventListeners (getTarget) {
       const target = getTarget()
@@ -233,7 +250,7 @@ export default {
       attrs: omit($props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']),
     }
     return (
-      <div {...props} style={placeholderStyle}>
+      <div {...props} style={placeholderStyle} ref='placeholderNode'>
         <div class={className} ref='fixedNode' style={affixStyle}>
           {$slots.default}
         </div>

components/alert/index.en-US.md

@@ -3,6 +3,7 @@
 
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
+| afterClose | Called when close animation is finished | () => void | - |
 | banner | Whether to show as banner | boolean | false |
 | closable | Whether Alert can be closed | boolean | - |
 | closeText | Close text to show | string\|slot | - |
@@ -15,4 +16,5 @@
 ### events
 | Events Name | Description | Arguments |
 | --- | --- | --- |
-| close | Callback when Alert is closed | Function |
+| close | Callback when Alert is closed | (e: MouseEvent) => void |
+

components/alert/index.jsx

@@ -5,7 +5,7 @@ import BaseMixin from '../_util/BaseMixin'
 import PropTypes from '../_util/vue-types'
 import getTransitionProps from '../_util/getTransitionProps'
 import { getComponentFromProp } from '../_util/props-util'
-
+function noop () { }
 export const AlertProps = {
   /**
    * Type of Alert styles, options:`success`, `info`, `warning`, `error`
@@ -21,6 +21,8 @@ export const AlertProps = {
   description: PropTypes.any,
   /** Callback when close Alert */
   // onClose?: React.MouseEventHandler<HTMLAnchorElement>;
+  /** Trigger when animation ending of Alert */
+  afterClose: PropTypes.func.def(noop),
   /** Whether to show icon */
   showIcon: PropTypes.bool,
   iconType: PropTypes.string,
@@ -57,6 +59,7 @@ export default {
         closed: true,
         closing: true,
       })
+      this.afterClose()
     },
   },
 

components/alert/index.zh-CN.md

@@ -3,6 +3,7 @@
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| afterClose | 关闭动画结束后的回掉 | () => void | - |
 | banner | 是否用作顶部公告 | boolean | false |
 | closable | 默认不显示关闭按钮 | boolean | 无 |
 | closeText | 自定义关闭按钮 | string\|slot | 无 |
@@ -15,4 +16,4 @@
 ### 事件
 | 事件名称 | 说明 | 回调参数 |
 | --- | --- | --- |
-| close | 关闭时触发的回调函数 | Function |
+| close | 关闭时触发的回调函数 | (e: MouseEvent) => void |

components/button/button.jsx

@@ -18,8 +18,15 @@ export default {
       },
       clicked: false,
       sLoading: !!this.loading,
+      hasTwoCNChar: false,
     }
   },
+  mounted () {
+    this.fixTwoCNChar()
+  },
+  updated () {
+    this.fixTwoCNChar()
+  },
   watch: {
     loading (val) {
       clearTimeout(this.delayTimeout)
@@ -32,7 +39,8 @@ export default {
   },
   computed: {
     classes () {
-      const { prefixCls, type, shape, size, sLoading, ghost, clicked, sizeMap } = this
+      const { prefixCls, type, shape, size, hasTwoCNChar,
+        sLoading, ghost, clicked, sizeMap } = this
       const sizeCls = sizeMap[size] || ''
       return {
         [`${prefixCls}`]: true,
@@ -42,6 +50,7 @@ export default {
         [`${prefixCls}-loading`]: sLoading,
         [`${prefixCls}-clicked`]: clicked,
         [`${prefixCls}-background-ghost`]: ghost || type === 'ghost',
+        [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
       }
     },
     iconType () {
@@ -50,6 +59,18 @@ export default {
     },
   },
   methods: {
+    fixTwoCNChar () {
+      // Fix for HOC usage like <FormatMessage />
+      const node = this.$el
+      const buttonText = node.textContent || node.innerText
+      if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
+        if (!this.hasTwoCNChar) {
+          this.hasTwoCNChar = true
+        }
+      } else if (this.hasTwoCNChar) {
+        this.hasTwoCNChar = false
+      }
+    },
     handleClick (event) {
       this.clicked = true
       clearTimeout(this.timeout)
@@ -67,9 +88,16 @@ export default {
       }
       return child
     },
+    isNeedInserted () {
+      const { loading, icon, $slots } = this
+      const iconType = loading ? 'loading' : icon
+      return $slots.default && $slots.default.length === 1 && (!iconType || iconType === 'loading')
+    },
   },
   render () {
-    const { htmlType, classes, disabled, handleClick, iconType, $slots, $attrs, $listeners } = this
+    const { htmlType, classes,
+      disabled, handleClick, iconType,
+      $slots, $attrs, $listeners } = this
     const buttonProps = {
       props: {
       },
@@ -84,8 +112,7 @@ export default {
         click: handleClick,
       },
     }
-    const needInserted = $slots.default && $slots.default.length === 1 && (!iconType || iconType === 'loading')
-    const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], needInserted) : $slots.default
+    const kids = $slots.default && $slots.default.length === 1 ? this.insertSpace($slots.default[0], this.isNeedInserted()) : $slots.default
     return (
       <button {...buttonProps}>
         {iconType ? <Icon type={iconType}></Icon> : null}

components/button/style/mixin.less

@@ -54,11 +54,14 @@
 .button-variant-danger(@color; @background; @border) {
   .button-color(@color; @background; @border);
 
-  &:hover,
-  &:focus {
+  &:hover {
     .button-color(@btn-primary-color; ~`colorPalette("@{color}", 5)`; ~`colorPalette("@{color}", 5)`);
   }
 
+  &:focus {
+    .button-color(~`colorPalette("@{color}", 5)`; #fff; ~`colorPalette("@{color}", 5)`);
+  }
+
   &:active,
   &.active {
     .button-color(@btn-primary-color; ~`colorPalette("@{color}", 7)`; ~`colorPalette("@{color}", 7)`);
@@ -108,6 +111,7 @@
   display: inline-block;
   > .@{btnClassName} {
     position: relative;
+    line-height: @btn-height-base - 2px;
 
     &:hover,
     &:focus,
@@ -124,10 +128,12 @@
   // size
   &-lg > .@{btnClassName} {
     .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
+    line-height: @btn-height-lg - 2px;
   }
 
   &-sm > .@{btnClassName} {
     .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @btn-border-radius-sm);
+    line-height: @btn-height-sm - 2px;
     > .@{iconfont-css-prefix} {
       font-size: @font-size-base;
     }
@@ -198,7 +204,8 @@
   &:focus,
   &:active,
   &.active {
-    background: #fff;
+    background: @btn-default-bg;
+    text-decoration: none;
   }
 }
 

components/calendar/Header.jsx

@@ -16,6 +16,7 @@ export const HeaderProps = {
   // onValueChange: PropTypes.(value: moment.Moment) => void,
   // onTypeChange: PropTypes.(type: string) => void,
   value: PropTypes.any,
+  validRange: PropTypes.array,
 }
 
 export default {
@@ -28,9 +29,20 @@ export default {
   // private calenderHeaderNode: HTMLDivElement;
   methods: {
     getYearSelectElement (year) {
-      const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen } = this
-      const start = year - yearSelectOffset
-      const end = start + yearSelectTotal
+      const {
+        yearSelectOffset,
+        yearSelectTotal,
+        locale,
+        prefixCls,
+        fullscreen,
+        validRange,
+      } = this
+      let start = year - yearSelectOffset
+      let end = start + yearSelectTotal
+      if (validRange) {
+        start = validRange[0].get('year')
+        end = validRange[1].get('year') + 1
+      }
       const suffix = locale.year === '年' ? '年' : ''
 
       const options = []
@@ -63,10 +75,20 @@ export default {
     },
 
     getMonthSelectElement (month, months) {
-      const { prefixCls, fullscreen } = this
+      const { prefixCls, fullscreen, validRange, value } = this
       const options = []
-
-      for (let index = 0; index < 12; index++) {
+      let start = 0
+      let end = 12
+      if (validRange) {
+        const [rangeStart, rangeEnd] = validRange
+        const currentYear = value.get('year')
+        if (rangeEnd.get('year') === currentYear) {
+          end = rangeEnd.get('month') + 1
+        } else {
+          start = rangeStart.get('month')
+        }
+      }
+      for (let index = start; index < end; index++) {
         options.push(<Option key={`${index}`}>{months[index]}</Option>)
       }
 
@@ -85,8 +107,21 @@ export default {
     },
 
     onYearChange  (year) {
-      const newValue = this.value.clone()
+      const { value, validRange } = this
+      const newValue = value.clone()
       newValue.year(parseInt(year, 10))
+      // switch the month so that it remains within range when year changes
+      if (validRange) {
+        const [start, end] = validRange
+        const newYear = newValue.get('year')
+        const newMonth = newValue.get('month')
+        if (newYear === end.get('year') && newMonth > end.get('month')) {
+          newValue.month(end.get('month'))
+        }
+        if (newYear === start.get('year') && newMonth < start.get('month')) {
+          newValue.month(start.get('month'))
+        }
+      }
       this.$emit('valueChange', newValue)
     },
 

components/calendar/index.en-US.md

@@ -31,6 +31,7 @@ customize the progress dot by setting a scoped slot
 | mode | The display mode of the calendar | `month` \| `year` | `month` |
 | monthCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | function(date: moment) | - |
 | monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell | function(date: moment) | - |
+| validRange | to set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
 | value(v-model) | The current selected date | [moment](http://momentjs.com/) | current date |
 
 ### events