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

172 lines
4.3 KiB
TypeScript
Raw Normal View History

2020-10-18 14:03:57 +00:00
import { defineComponent, inject, App } from 'vue';
2020-08-31 08:53:19 +00:00
import classNames from '../_util/classNames';
import PropTypes, { withUndefined } from '../_util/vue-types';
2019-01-12 03:33:27 +00:00
import { initDefaultProps, hasProp } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider';
2020-10-18 14:03:57 +00:00
import Avatar, { SkeletonAvatarProps, ISkeletonAvatarProps } from './Avatar';
import Title, { SkeletonTitleProps, ISkeletonTitleProps } from './Title';
import Paragraph, { SkeletonParagraphProps, ISkeletonParagraphProps } from './Paragraph';
2018-12-10 03:34:51 +00:00
export const SkeletonProps = {
active: PropTypes.looseBool,
loading: PropTypes.looseBool,
2018-12-10 03:34:51 +00:00
prefixCls: PropTypes.string,
children: PropTypes.any,
avatar: withUndefined(
PropTypes.oneOfType([PropTypes.string, SkeletonAvatarProps, PropTypes.looseBool]),
),
title: withUndefined(
PropTypes.oneOfType([PropTypes.looseBool, PropTypes.string, SkeletonTitleProps]),
),
paragraph: withUndefined(
PropTypes.oneOfType([PropTypes.looseBool, PropTypes.string, SkeletonParagraphProps]),
),
2019-01-12 03:33:27 +00:00
};
2018-12-10 03:34:51 +00:00
2020-10-18 14:03:57 +00:00
function getComponentProps<T>(prop: T | boolean | undefined): T | {} {
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
}
2020-10-18 14:03:57 +00:00
function getAvatarBasicProps(hasTitle: boolean, hasParagraph: boolean): ISkeletonAvatarProps {
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
}
2020-10-18 14:03:57 +00:00
function getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): ISkeletonTitleProps {
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
}
2020-10-18 14:03:57 +00:00
function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): ISkeletonParagraphProps {
const basicProps: ISkeletonParagraphProps = {};
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
}
2020-10-18 14:03:57 +00:00
const Skeleton = defineComponent({
2018-12-10 03:34:51 +00:00
name: 'ASkeleton',
props: initDefaultProps(SkeletonProps, {
avatar: false,
title: true,
paragraph: true,
}),
2020-06-08 09:31:13 +00:00
setup() {
return {
configProvider: inject('configProvider', defaultConfigProvider),
2020-06-08 09:31:13 +00:00
};
2019-03-18 12:35:24 +00:00
},
2019-01-12 03:33:27 +00:00
render() {
2019-03-18 12:35:24 +00:00
const {
prefixCls: customizePrefixCls,
loading,
avatar,
title,
paragraph,
active,
} = this.$props;
2020-10-18 14:03:57 +00:00
const { getPrefixCls } = this.configProvider;
2019-03-18 12:35:24 +00:00
const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
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 = {
2020-06-08 09:40:27 +00:00
prefixCls: `${prefixCls}-avatar`,
...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 = {
2020-06-08 09:40:27 +00:00
prefixCls: `${prefixCls}-title`,
...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 = {
2020-06-08 09:40:27 +00:00
prefixCls: `${prefixCls}-paragraph`,
...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
}
2020-10-18 14:03:57 +00:00
return this.$slots.default?.();
2018-12-10 03:34:51 +00:00
},
2020-10-18 14:03:57 +00:00
});
2018-12-10 03:34:51 +00:00
/* istanbul ignore next */
2020-10-18 14:03:57 +00:00
Skeleton.install = function(app: App) {
2020-06-08 09:31:13 +00:00
app.component(Skeleton.name, Skeleton);
2020-10-13 11:14:56 +00:00
return app;
2019-01-12 03:33:27 +00:00
};
2020-10-18 14:03:57 +00:00
2019-01-12 03:33:27 +00:00
export default Skeleton;