ant-design-vue/components/skeleton/index.jsx

151 lines
3.6 KiB
Vue
Raw Normal View History

2019-01-12 03:33:27 +00:00
import classNames from 'classnames';
import PropTypes from '../_util/vue-types';
import { initDefaultProps, hasProp } from '../_util/props-util';
import Avatar, { SkeletonAvatarProps } from './Avatar';
import Title, { SkeletonTitleProps } from './Title';
import Paragraph, { SkeletonParagraphProps } from './Paragraph';
2018-12-10 03:34:51 +00:00
export const SkeletonProps = {
active: PropTypes.bool,
loading: PropTypes.bool,
prefixCls: PropTypes.string,
children: PropTypes.any,
2019-01-12 03:33:27 +00:00
avatar: PropTypes.oneOfType([PropTypes.string, SkeletonAvatarProps, PropTypes.bool]),
title: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, SkeletonTitleProps]),
paragraph: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, SkeletonParagraphProps]),
};
2018-12-10 03:34:51 +00:00
2019-01-12 03:33:27 +00:00
function getComponentProps(prop) {
2018-12-10 03:34:51 +00:00
if (prop && typeof prop === 'object') {
2019-01-12 03:33:27 +00:00
return prop;
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
return {};
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
function getAvatarBasicProps(hasTitle, hasParagraph) {
2018-12-10 03:34:51 +00:00
if (hasTitle && !hasParagraph) {
2019-01-12 03:33:27 +00:00
return { shape: 'square' };
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
return { shape: 'circle' };
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
function getTitleBasicProps(hasAvatar, hasParagraph) {
2018-12-10 03:34:51 +00:00
if (!hasAvatar && hasParagraph) {
2019-01-12 03:33:27 +00:00
return { width: '38%' };
2018-12-10 03:34:51 +00:00
}
if (hasAvatar && hasParagraph) {
2019-01-12 03:33:27 +00:00
return { width: '50%' };
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
return {};
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
function getParagraphBasicProps(hasAvatar, hasTitle) {
const basicProps = {};
2018-12-10 03:34:51 +00:00
// Width
if (!hasAvatar || !hasTitle) {
2019-01-12 03:33:27 +00:00
basicProps.width = '61%';
2018-12-10 03:34:51 +00:00
}
// Rows
if (!hasAvatar && hasTitle) {
2019-01-12 03:33:27 +00:00
basicProps.rows = 3;
2018-12-10 03:34:51 +00:00
} else {
2019-01-12 03:33:27 +00:00
basicProps.rows = 2;
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
return basicProps;
2018-12-10 03:34:51 +00:00
}
const Skeleton = {
name: 'ASkeleton',
props: initDefaultProps(SkeletonProps, {
prefixCls: 'ant-skeleton',
avatar: false,
title: true,
paragraph: true,
}),
2019-01-12 03:33:27 +00:00
render() {
const { loading, prefixCls, avatar, title, paragraph, active } = this.$props;
2018-12-10 03:34:51 +00:00
if (loading || !hasProp(this, 'loading')) {
2019-01-12 03:33:27 +00:00
const hasAvatar = !!avatar || avatar === '';
const hasTitle = !!title;
const hasParagraph = !!paragraph;
2018-12-10 03:34:51 +00:00
// Avatar
2019-01-12 03:33:27 +00:00
let avatarNode;
2018-12-10 03:34:51 +00:00
if (hasAvatar) {
const avatarProps = {
props: {
...getAvatarBasicProps(hasTitle, hasParagraph),
...getComponentProps(avatar),
},
2019-01-12 03:33:27 +00:00
};
2018-12-10 03:34:51 +00:00
avatarNode = (
<div class={`${prefixCls}-header`}>
<Avatar {...avatarProps} />
</div>
2019-01-12 03:33:27 +00:00
);
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
let contentNode;
2018-12-10 03:34:51 +00:00
if (hasTitle || hasParagraph) {
// Title
2019-01-12 03:33:27 +00:00
let $title;
2018-12-10 03:34:51 +00:00
if (hasTitle) {
const titleProps = {
props: {
...getTitleBasicProps(hasAvatar, hasParagraph),
...getComponentProps(title),
},
2019-01-12 03:33:27 +00:00
};
2018-12-10 03:34:51 +00:00
2019-01-12 03:33:27 +00:00
$title = <Title {...titleProps} />;
2018-12-10 03:34:51 +00:00
}
// Paragraph
2019-01-12 03:33:27 +00:00
let paragraphNode;
2018-12-10 03:34:51 +00:00
if (hasParagraph) {
const paragraphProps = {
props: {
...getParagraphBasicProps(hasAvatar, hasTitle),
...getComponentProps(paragraph),
},
2019-01-12 03:33:27 +00:00
};
2018-12-10 03:34:51 +00:00
2019-01-12 03:33:27 +00:00
paragraphNode = <Paragraph {...paragraphProps} />;
2018-12-10 03:34:51 +00:00
}
contentNode = (
<div class={`${prefixCls}-content`}>
{$title}
{paragraphNode}
</div>
2019-01-12 03:33:27 +00:00
);
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
const cls = classNames(prefixCls, {
[`${prefixCls}-with-avatar`]: hasAvatar,
[`${prefixCls}-active`]: active,
});
2018-12-10 03:34:51 +00:00
return (
<div class={cls}>
{avatarNode}
{contentNode}
</div>
2019-01-12 03:33:27 +00:00
);
2018-12-10 03:34:51 +00:00
}
2019-01-12 03:33:27 +00:00
return this.$slots.default && this.$slots.default[0];
2018-12-10 03:34:51 +00:00
},
2019-01-12 03:33:27 +00:00
};
2018-12-10 03:34:51 +00:00
/* istanbul ignore next */
2019-01-12 03:33:27 +00:00
Skeleton.install = function(Vue) {
Vue.component(Skeleton.name, Skeleton);
};
export default Skeleton;