cr tabs & tag & time-picker & slider

Author: tangjinzhou

components/slider/index.jsx

@@ -115,8 +115,8 @@ const Slider = {
       ...restProps
     } = getOptionProps(this);
     const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const tooltipPrefixCls = getPrefixCls('skeleton', customizeTooltipPrefixCls);
+    const prefixCls = getPrefixCls('slider', customizePrefixCls);
+    const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
     if (range) {
       const vcRangeProps = {
         props: {

components/tabs/__tests__/__snapshots__/demo.test.js.snap

@@ -300,7 +300,9 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
   <div class="ant-tabs-content ant-tabs-content-animated ant-tabs-top-content" style="margin-left: -100%;">
     <div role="tabpanel" aria-hidden="true" class="ant-tabs-tabpane ant-tabs-tabpane-inactive"></div>
     <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">
-      <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
+      <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div><span><i aria-label="icon: android" class="anticon anticon-android"><svg viewBox="64 64 896 896" data-icon="android" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M448.3 225.2c-18.6 0-32 13.4-32 31.9s13.5 31.9 32 31.9c18.6 0 32-13.4 32-31.9.1-18.4-13.4-31.9-32-31.9zm393.9 96.4c-13.8-13.8-32.7-21.5-53.2-21.5-3.9 0-7.4.4-10.7 1v-1h-3.6c-5.5-30.6-18.6-60.5-38.1-87.4-18.7-25.7-43-47.9-70.8-64.9l25.1-35.8v-3.3c0-.8.4-2.3.7-3.8.6-2.4 1.4-5.5 1.4-8.9 0-18.5-13.5-31.9-32-31.9-9.8 0-19.5 5.7-25.9 15.4l-29.3 42.1c-30-9.8-62.4-15-93.8-15-31.3 0-63.7 5.2-93.8 15L389 79.4c-6.6-9.6-16.1-15.4-26-15.4-18.6 0-32 13.4-32 31.9 0 6.2 2.5 12.8 6.7 17.4l22.6 32.3c-28.7 17-53.5 39.4-72.2 65.1-19.4 26.9-32 56.8-36.7 87.4h-5.5v1c-3.2-.6-6.7-1-10.7-1-20.3 0-39.2 7.5-53.1 21.3-13.8 13.8-21.5 32.6-21.5 53v235c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 3.9 0 7.4-.4 10.7-1v93.5c0 29.2 23.9 53.1 53.2 53.1H331v58.3c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 20.3 0 39.2-7.5 53.1-21.3 13.8-13.8 21.5-32.6 21.5-53v-58.2H544v58.1c0 20.3 7.5 39.1 21.4 52.9 13.8 13.8 32.8 21.5 53.2 21.5 20.4 0 39.2-7.5 53.1-21.6 13.8-13.8 21.5-32.6 21.5-53v-58.2h31.9c29.3 0 53.2-23.8 53.2-53.1v-91.4c3.2.6 6.7 1 10.7 1 20.3 0 39.2-7.5 53.1-21.3 13.8-13.8 21.5-32.6 21.5-53v-235c-.1-20.3-7.6-39-21.4-52.9zM246 609.6c0 6.8-3.9 10.6-10.7 10.6-6.8 0-10.7-3.8-10.7-10.6V374.5c0-6.8 3.9-10.6 10.7-10.6 6.8 0 10.7 3.8 10.7 10.6v235.1zm131.1-396.8c37.5-27.3 85.3-42.3 135-42.3s97.5 15.1 135 42.5c32.4 23.7 54.2 54.2 62.7 87.5H314.4c8.5-33.4 30.5-64 62.7-87.7zm39.3 674.7c-.6 5.6-4.4 8.7-10.5 8.7-6.8 0-10.7-3.8-10.7-10.6v-58.2h21.2v60.1zm202.3 8.7c-6.8 0-10.7-3.8-10.7-10.6v-58.2h21.2v60.1c-.6 5.6-4.3 8.7-10.5 8.7zm95.8-132.6H309.9V364h404.6v399.6zm85.2-154c0 6.8-3.9 10.6-10.7 10.6-6.8 0-10.7-3.8-10.7-10.6V374.5c0-6.8 3.9-10.6 10.7-10.6 6.8 0 10.7 3.8 10.7 10.6v235.1zM576.1 225.2c-18.6 0-32 13.4-32 31.9s13.5 31.9 32 31.9c18.6 0 32.1-13.4 32.1-32-.1-18.6-13.4-31.8-32.1-31.8z"></path></svg></i>
+      Tab 2
+    </span>
       Tab 2
       <div tabindex="0" role="presentation" style="width: 0px; height: 0px; overflow: hidden; position: absolute;"></div>
     </div>

components/tabs/demo/custom-tab-bar.md

@@ -17,7 +17,7 @@ Customized bar of tab.
     <a-tab-pane tab="Tab 2" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
     <a-tab-pane tab="Tab 3" key="3">Content of Tab Pane 3</a-tab-pane>
     <template slot="renderTabBar" slot-scope="props, DefaultTabBar">
-      <component :is="DefaultTabBar" {...props} />
+      <component :is="DefaultTabBar" v-bind="props" :style="{ zIndex: 1, background: '#fff' }" />
     </template>
   </a-tabs>
 </div>

components/tabs/tabs.jsx

@@ -1,7 +1,7 @@
 import Icon from '../icon';
 import VcTabs, { TabPane } from '../vc-tabs/src';
 import TabContent from '../vc-tabs/src/TabContent';
-import isFlexSupported from '../_util/isFlexSupported';
+import { isFlexSupported } from '../_util/styleChecker';
 import PropTypes from '../_util/vue-types';
 import { getComponentFromProp, getOptionProps, filterEmpty } from '../_util/props-util';
 import { cloneElement } from '../_util/vnode';
@@ -36,7 +36,7 @@ export default {
   mounted() {
     const NO_FLEX = ' no-flex';
     const tabNode = this.$el;
-    if (tabNode && !isFlexSupported() && tabNode.className.indexOf(NO_FLEX) === -1) {
+    if (tabNode && !isFlexSupported && tabNode.className.indexOf(NO_FLEX) === -1) {
       tabNode.className += NO_FLEX;
     }
   },

components/tag/CheckableTag.jsx

@@ -1,18 +1,23 @@
+import PropTypes from '../_util/vue-types';
+import { ConfigConsumerProps } from '../config-provider';
+
 export default {
   name: 'ACheckableTag',
   model: {
     prop: 'checked',
   },
   props: {
-    prefixCls: {
-      default: 'ant-tag',
-      type: String,
-    },
+    prefixCls: PropTypes.string,
     checked: Boolean,
   },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
   computed: {
     classes() {
-      const { prefixCls, checked } = this;
+      const { checked, prefixCls: customizePrefixCls } = this;
+      const getPrefixCls = this.configProvider.getPrefixCls;
+      const prefixCls = getPrefixCls('tag', customizePrefixCls);
       return {
         [`${prefixCls}`]: true,
         [`${prefixCls}-checkable`]: true,

components/tag/Tag.jsx

@@ -5,6 +5,7 @@ import omit from 'omit.js';
 import Wave from '../_util/wave';
 import { hasProp } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
+import { ConfigConsumerProps } from '../config-provider';
 
 export default {
   name: 'ATag',
@@ -14,12 +15,15 @@ export default {
     event: 'close.visible',
   },
   props: {
-    prefixCls: PropTypes.string.def('ant-tag'),
+    prefixCls: PropTypes.string,
     color: PropTypes.string,
     closable: PropTypes.bool.def(false),
     visible: PropTypes.bool,
     afterClose: PropTypes.func,
   },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
   data() {
     let _visible = true;
     if (hasProp(this, 'visible')) {
@@ -75,8 +79,8 @@ export default {
       };
     },
 
-    getTagClassName() {
-      const { prefixCls, color } = this.$props;
+    getTagClassName(prefixCls) {
+      const { color } = this.$props;
       const isPresetColor = this.isPresetColor(color);
       return {
         [prefixCls]: true,
@@ -92,13 +96,15 @@ export default {
   },
 
   render() {
-    const { prefixCls } = this.$props;
+    const { prefixCls: customizePrefixCls } = this.$props;
+    const getPrefixCls = this.configProvider.getPrefixCls;
+    const prefixCls = getPrefixCls('tag', customizePrefixCls);
     const { _visible: visible } = this.$data;
     const tag = (
       <div
         v-show={visible}
         {...{ on: omit(this.$listeners, ['close']) }}
-        class={this.getTagClassName()}
+        class={this.getTagClassName(prefixCls)}
         style={this.getTagStyle()}
       >
         {this.$slots.default}

components/time-picker/__tests__/__snapshots__/index.test.js.snap

@@ -1,9 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TimePicker not render clean icon when allowClear is false 1`] = `
-<span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"><i aria-label="icon: clock-circle" class="ant-time-picker-clock-icon anticon anticon-clock-circle"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span><i aria-label="icon: close-circle" class="ant-time-picker-clear anticon anticon-close-circle"><svg viewBox="64 64 896 896" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
-    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path>
-  </svg></i></span>
-`;
+exports[`TimePicker not render clean icon when allowClear is false 1`] = `<span class="ant-time-picker"><input type="text" placeholder="Select time" id="" class="ant-time-picker-input"><span class="ant-time-picker-icon"><i aria-label="icon: clock-circle" class="ant-time-picker-clock-icon anticon anticon-clock-circle"><svg viewBox="64 64 896 896" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></i></span></span>`;
 
 exports[`TimePicker renders addon correctly 1`] = `<div class="ant-time-picker-panel-addon"><button type="button">Ok</button></div>`;

components/time-picker/index.jsx

@@ -154,7 +154,7 @@ const TimePicker = {
 
     getAllowClear() {
       const { allowClear, allowEmpty } = this.$props;
-      if ('allowClear' in this.$props) {
+      if (hasProp(this, 'allowClear')) {
         return allowClear;
       }
       return allowEmpty;
@@ -207,6 +207,7 @@ const TimePicker = {
         props: {
           ...generateShowHourMinuteSecond(format),
           ...props,
+          allowEmpty: this.getAllowClear(),
           prefixCls,
           getPopupContainer: getPopupContainer || getContextPopupContainer,
           format,

components/tree/demo/customized-icon.md

@@ -16,7 +16,7 @@ You can customize icons for different nodes.
     defaultExpandAll
     :defaultSelectedKeys="['0-0-0']"
   >
-    <a-icon type="down" slot="switcherIcon" class="test" />
+    <a-icon type="down" slot="switcherIcon" />
     <a-icon slot="smile" type="smile-o" />
     <a-icon slot="meh" type="smile-o" />
     <template slot="custom" slot-scope="{selected}">

types/time-picker.d.ts

@@ -17,7 +17,7 @@ export declare class TimePicker extends AntdComponent {
    * @default true
    * @type boolean
    */
-  allowEmpty: boolean;
+  allowClear: boolean;
 
   /**
    * get focus when component mounted
@@ -132,6 +132,8 @@ export declare class TimePicker extends AntdComponent {
    */
   popupClassName: string;
 
+  popupStyle: object;
+
   /**
    * interval between seconds in picker
    * @default 1