From 1713581576351a13e3f155d39255c780c82dace7 Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Mon, 18 Mar 2019 20:35:24 +0800 Subject: [PATCH] feat: switch && timeline && skeleton --- components/skeleton/Avatar.jsx | 1 - components/skeleton/Paragraph.jsx | 4 +--- components/skeleton/Title.jsx | 4 +--- components/skeleton/demo/index.vue | 4 ++++ components/skeleton/index.jsx | 20 ++++++++++++++++++-- components/steps/index.jsx | 14 +++++++++++--- components/switch/index.en-US.md | 4 ++-- components/switch/index.jsx | 11 +++++++++-- components/switch/index.zh-CN.md | 3 ++- components/timeline/Timeline.jsx | 10 ++++++++-- components/timeline/TimelineItem.jsx | 10 ++++++++-- 11 files changed, 64 insertions(+), 21 deletions(-) diff --git a/components/skeleton/Avatar.jsx b/components/skeleton/Avatar.jsx index 426a02dce..4fd269726 100644 --- a/components/skeleton/Avatar.jsx +++ b/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() { diff --git a/components/skeleton/Paragraph.jsx b/components/skeleton/Paragraph.jsx index 9c2a22fc7..bc903cafa 100644 --- a/components/skeleton/Paragraph.jsx +++ b/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; diff --git a/components/skeleton/Title.jsx b/components/skeleton/Title.jsx index bd6d6ce31..2bc922a44 100644 --- a/components/skeleton/Title.jsx +++ b/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; diff --git a/components/skeleton/demo/index.vue b/components/skeleton/demo/index.vue index 8ad5846db..cc37b9e16 100644 --- a/components/skeleton/demo/index.vue +++ b/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 `, }; diff --git a/components/skeleton/index.jsx b/components/skeleton/index.jsx index 11544dbe4..7329934b7 100644 --- a/components/skeleton/index.jsx +++ b/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), }, diff --git a/components/steps/index.jsx b/components/steps/index.jsx index 49e5d2e5a..7d38b2bfd 100644 --- a/components/steps/index.jsx +++ b/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: , error: , @@ -36,6 +42,8 @@ const Steps = { const stepsProps = { props: { icons, + iconPrefix, + prefixCls, ...props, }, on: this.$listeners, diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md index 11011f5e8..4bd283ed9 100644 --- a/components/switch/index.en-US.md +++ b/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 | diff --git a/components/switch/index.jsx b/components/switch/index.jsx index fbc207921..7e55ae7c4 100644 --- a/components/switch/index.jsx +++ b/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, diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 5d750acd4..bb25420d4 100644 --- a/components/switch/index.zh-CN.md +++ b/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) | | ## 方法 diff --git a/components/timeline/Timeline.jsx b/components/timeline/Timeline.jsx index b16b1d260..1ef7b8867 100644 --- a/components/timeline/Timeline.jsx +++ b/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; diff --git a/components/timeline/TimelineItem.jsx b/components/timeline/TimelineItem.jsx index 6684eb5cd..239de18cd 100644 --- a/components/timeline/TimelineItem.jsx +++ b/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,