feat: switch && timeline && skeleton

components/skeleton/Avatar.jsx

@@ -12,7 +12,6 @@ export const SkeletonAvatarProps = PropTypes.shape(skeletonAvatarProps).loose;
 
 const Avatar = {
   props: initDefaultProps(skeletonAvatarProps, {
-    prefixCls: 'ant-skeleton-avatar',
     size: 'large',
   }),
   render() {

components/skeleton/Paragraph.jsx

@@ -12,9 +12,7 @@ const skeletonParagraphProps = {
 export const SkeletonParagraphProps = PropTypes.shape(skeletonParagraphProps);
 
 const Paragraph = {
-  props: initDefaultProps(skeletonParagraphProps, {
-    prefixCls: 'ant-skeleton-paragraph',
-  }),
+  props: skeletonParagraphProps,
   methods: {
     getWidth(index) {
       const { width, rows = 2 } = this;

components/skeleton/Title.jsx

@@ -9,9 +9,7 @@ const skeletonTitleProps = {
 export const SkeletonTitleProps = PropTypes.shape(skeletonTitleProps);
 
 const Title = {
-  props: initDefaultProps(skeletonTitleProps, {
-    prefixCls: 'ant-skeleton-title',
-  }),
+  props: skeletonTitleProps,
   render() {
     const { prefixCls, width } = this.$props;
     const zWidth = typeof width === 'number' ? `${width}px` : width;

components/skeleton/demo/index.vue

@@ -16,6 +16,8 @@ const md = {
 
   - 网络较慢，需要长时间等待加载处理的情况下。
   - 图文信息内容较多的列表/卡片中。
+  - 只适合用在第一次加载数据的场景。
+  - 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
             ## 代码演示`,
   us: `# Skeleton
 
@@ -25,6 +27,8 @@ const md = {
 
   - When resource needs long time to load, like low network speed.
   - The component contains much information. Such as List or Card.
+  - Only works when loading data at first time.
+  - Could be replaced by Spin in all situation, but provide better user experience then spin if it works.
   ## Examples
   `,
 };

components/skeleton/index.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps, hasProp } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 import Avatar, { SkeletonAvatarProps } from './Avatar';
 import Title, { SkeletonTitleProps } from './Title';
 import Paragraph, { SkeletonParagraphProps } from './Paragraph';
@@ -63,13 +64,25 @@ function getParagraphBasicProps(hasAvatar, hasTitle) {
 const Skeleton = {
   name: 'ASkeleton',
   props: initDefaultProps(SkeletonProps, {
-    prefixCls: 'ant-skeleton',
     avatar: false,
     title: true,
     paragraph: true,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   render() {
-    const { loading, prefixCls, avatar, title, paragraph, active } = this.$props;
+    const {
+      prefixCls: customizePrefixCls,
+      loading,
+      avatar,
+      title,
+      paragraph,
+      active,
+    } = this.$props;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+
     if (loading || !hasProp(this, 'loading')) {
       const hasAvatar = !!avatar || avatar === '';
       const hasTitle = !!title;
@@ -80,6 +93,7 @@ const Skeleton = {
       if (hasAvatar) {
         const avatarProps = {
           props: {
+            prefixCls: `${prefixCls}-avatar`,
             ...getAvatarBasicProps(hasTitle, hasParagraph),
             ...getComponentProps(avatar),
           },
@@ -99,6 +113,7 @@ const Skeleton = {
         if (hasTitle) {
           const titleProps = {
             props: {
+              prefixCls: `${prefixCls}-title`,
               ...getTitleBasicProps(hasAvatar, hasParagraph),
               ...getComponentProps(title),
             },
@@ -112,6 +127,7 @@ const Skeleton = {
         if (hasParagraph) {
           const paragraphProps = {
             props: {
+              prefixCls: `${prefixCls}-paragraph`,
               ...getParagraphBasicProps(hasAvatar, hasTitle),
               ...getComponentProps(paragraph),
             },

components/steps/index.jsx

@@ -2,6 +2,7 @@ import PropTypes from '../_util/vue-types';
 import { initDefaultProps, getOptionProps } from '../_util/props-util';
 import VcSteps from '../vc-steps';
 import Icon from '../icon';
+import { ConfigConsumerProps } from '../config-provider';
 
 const getStepsProps = (defaultProps = {}) => {
   const props = {
@@ -21,14 +22,19 @@ const getStepsProps = (defaultProps = {}) => {
 const Steps = {
   name: 'ASteps',
   props: getStepsProps({
-    prefixCls: 'ant-steps',
-    iconPrefix: 'ant',
     current: 0,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   Step: { ...VcSteps.Step, name: 'AStep' },
   render() {
     const props = getOptionProps(this);
-    const { prefixCls } = props;
+    const { prefixCls: customizePrefixCls, iconPrefix: customizeIconPrefixCls } = props;
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('steps', customizePrefixCls);
+    const iconPrefix = getPrefixCls('', customizeIconPrefixCls);
+
     const icons = {
       finish: <Icon type="check" class={`${prefixCls}-finish-icon`} />,
       error: <Icon type="close" class={`${prefixCls}-error-icon`} />,
@@ -36,6 +42,8 @@ const Steps = {
     const stepsProps = {
       props: {
         icons,
+        iconPrefix,
+        prefixCls,
         ...props,
       },
       on: this.$listeners,

components/switch/index.en-US.md

@@ -14,10 +14,10 @@
 ### Events
 | Events Name | Description | Arguments |
 | --- | --- | --- |
-| change | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) |
+| change | trigger when the checked state is changing | Function(checked: boolean, event: Event) |  |
+| click | trigger when clicked | Function(checked: boolean, event: Event) |  |
 
 ## Methods
-
 | Name | Description |
 | ---- | ----------- |
 | blur() | remove focus |

components/switch/index.jsx

@@ -3,6 +3,7 @@ import { getOptionProps, getComponentFromProp } from '../_util/props-util';
 import VcSwitch from '../vc-switch';
 import Wave from '../_util/wave';
 import Icon from '../icon';
+import { ConfigConsumerProps } from '../config-provider';
 
 const Switch = {
   name: 'ASwitch',
@@ -11,7 +12,7 @@ const Switch = {
     event: 'change',
   },
   props: {
-    prefixCls: PropTypes.string.def('ant-switch'),
+    prefixCls: PropTypes.string,
     // size=default and size=large are the same
     size: PropTypes.oneOf(['small', 'default', 'large']),
     disabled: PropTypes.bool,
@@ -23,6 +24,9 @@ const Switch = {
     autoFocus: PropTypes.bool,
     loading: PropTypes.bool,
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   methods: {
     focus() {
       this.$refs.refSwitchNode.focus();
@@ -33,7 +37,10 @@ const Switch = {
   },
 
   render() {
-    const { prefixCls, size, loading, disabled, ...restProps } = getOptionProps(this);
+    const { prefixCls: customizePrefixCls, size, loading, disabled, ...restProps } = getOptionProps(this);
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('switch', customizePrefixCls);
+
     const classes = {
       [`${prefixCls}-small`]: size === 'small',
       [`${prefixCls}-loading`]: loading,

components/switch/index.zh-CN.md

@@ -14,7 +14,8 @@
 ### 事件
 | 事件名称 | 说明 | 回调参数 |
 | --- | --- | --- |
-| change | 变化时回调函数 | Function(checked:Boolean) |
+| change | 变化时回调函数 | Function(checked:Boolean, event: Event) |
+| click | 点击时回调函数 | Function(checked: boolean, event: Event) |  |
 
 ## 方法
 

components/timeline/Timeline.jsx

@@ -9,6 +9,7 @@ import {
 import { cloneElement } from '../_util/vnode';
 import TimelineItem from './TimelineItem';
 import Icon from '../icon';
+import { ConfigConsumerProps } from '../config-provider';
 
 export const TimelineProps = {
   prefixCls: PropTypes.string,
@@ -22,11 +23,16 @@ export const TimelineProps = {
 export default {
   name: 'ATimeline',
   props: initDefaultProps(TimelineProps, {
-    prefixCls: 'ant-timeline',
     reverse: false,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   render() {
-    const { prefixCls, reverse, mode, ...restProps } = getOptionProps(this);
+    const { prefixCls: customizePrefixCls, reverse, mode, ...restProps } = getOptionProps(this);
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('timeline', customizePrefixCls);
+
     const pendingDot = getComponentFromProp(this, 'pendingDot');
     const pending = getComponentFromProp(this, 'pending');
     const pendingNode = typeof pending === 'boolean' ? null : pending;

components/timeline/TimelineItem.jsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import PropTypes from '../_util/vue-types';
 import { getOptionProps, initDefaultProps, getComponentFromProp } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 
 export const TimeLineItemProps = {
   prefixCls: PropTypes.string,
@@ -12,12 +13,17 @@ export const TimeLineItemProps = {
 export default {
   name: 'ATimelineItem',
   props: initDefaultProps(TimeLineItemProps, {
-    prefixCls: 'ant-timeline',
     color: 'blue',
     pending: false,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   render() {
-    const { prefixCls, color = '', pending } = getOptionProps(this);
+    const { prefixCls: customizePrefixCls, color = '', pending } = getOptionProps(this);
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('timeline', customizePrefixCls);
+
     const dot = getComponentFromProp(this, 'dot');
     const itemClassName = classNames({
       [`${prefixCls}-item`]: true,