github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

chore: refactor comment and icon

pull/2926/head
Amour1688 2020-09-18 12:15:01 +08:00
parent b5dd6c69b3
commit dea4866177
6 changed files with 117 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/_util/util.ts
View File

@ -1,11 +1,11 @@
export const isFunction = val => typeof val === 'function';
export const isFunction = (val: unknown): val is Function => typeof val === 'function';
export const isArray = Array.isArray;
export const isString = val => typeof val === 'string';
export const isSymbol = val => typeof val === 'symbol';
export const isObject = val => val !== null && typeof val === 'object';
export const isString = (val: unknown): val is string => typeof val === 'string';
export const isSymbol = (val: unknown): val is symbol => typeof val === 'symbol';
export const isObject = (val: unknown): val is object => val !== null && typeof val === 'object';
const onRE = /^on[^a-z]/;
const isOn = key => onRE.test(key);
const isOn = (key: string) => onRE.test(key);
const cacheStringFunction = fn => {
const cache = Object.create(null);
@ -20,16 +20,16 @@ const camelize = cacheStringFunction(str => {
});
const hyphenateRE = /\B([A-Z])/g;
const hyphenate = cacheStringFunction(str => {
const hyphenate = cacheStringFunction((str: string) => {
return str.replace(hyphenateRE, '-$1').toLowerCase();
});
const capitalize = cacheStringFunction(str => {
const capitalize = cacheStringFunction((str: string) => {
return str.charAt(0).toUpperCase() + str.slice(1);
});
const hasOwnProperty = Object.prototype.hasOwnProperty;
const hasOwn = (val, key) => hasOwnProperty.call(val, key);
const hasOwn = (val: object, key: string) => hasOwnProperty.call(val, key);
// change from vue sourcecode
function resolvePropValue(options, props, key, value) {

99
components/comment/index.jsx
View File

@ -1,99 +0,0 @@
import { inject } from 'vue';
import PropsTypes from '../_util/vue-types';
import { getComponent, getSlot } from '../_util/props-util';
import { ConfigConsumerProps } from '../config-provider';
export const CommentProps = {
actions: PropsTypes.array,
/** The element to display as the comment author. */
author: PropsTypes.any,
/** The element to display as the comment avatar - generally an antd Avatar */
avatar: PropsTypes.any,
/** The main content of the comment */
content: PropsTypes.any,
/** Comment prefix defaults to '.ant-comment' */
prefixCls: PropsTypes.string,
/** A datetime element containing the time to be displayed */
datetime: PropsTypes.any,
};
const Comment = {
name: 'AComment',
props: CommentProps,
setup() {
return {
configProvider: inject('configProvider', ConfigConsumerProps),
};
},
methods: {
getAction(actions) {
if (!actions || !actions.length) {
return null;
}
const actionList = actions.map((action, index) => <li key={`action-${index}`}>{action}</li>);
return actionList;
},
renderNested(prefixCls, children) {
return <div class={`${prefixCls}-nested`}>{children}</div>;
},
},
render() {
const { prefixCls: customizePrefixCls } = this.$props;
const getPrefixCls = this.configProvider.getPrefixCls;
const prefixCls = getPrefixCls('comment', customizePrefixCls);
const actions = getComponent(this, 'actions');
const author = getComponent(this, 'author');
const avatar = getComponent(this, 'avatar');
const content = getComponent(this, 'content');
const datetime = getComponent(this, 'datetime');
const avatarDom = (
<div class={`${prefixCls}-avatar`}>
{typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
</div>
);
const actionDom = actions ? (
<ul class={`${prefixCls}-actions`}>
{this.getAction(Array.isArray(actions) ? actions : [actions])}
</ul>
) : null;
const authorContent = (
<div class={`${prefixCls}-content-author`}>
{author && <span class={`${prefixCls}-content-author-name`}>{author}</span>}
{datetime && <span class={`${prefixCls}-content-author-time`}>{datetime}</span>}
</div>
);
const contentDom = (
<div class={`${prefixCls}-content`}>
{authorContent}
<div class={`${prefixCls}-content-detail`}>{content}</div>
{actionDom}
</div>
);
const comment = (
<div class={`${prefixCls}-inner`}>
{avatarDom}
{contentDom}
</div>
);
const children = getSlot(this);
return (
<div class={prefixCls}>
{comment}
{children && children.length ? this.renderNested(prefixCls, children) : null}
</div>
);
},
};
/* istanbul ignore next */
Comment.install = function(app) {
app.component(Comment.name, Comment);
};
export default Comment;

93
components/comment/index.tsx Normal file
View File

@ -0,0 +1,93 @@
import { inject, VNodeTypes, CSSProperties, App, SetupContext } from 'vue';
import classNames from '../_util/classNames';
import { ConfigConsumerProps } from '../config-provider';
export interface CommentProps {
/** List of action items rendered below the comment content */
actions?: Array<VNodeTypes>;
/** The element to display as the comment author. */
author?: VNodeTypes;
/** The element to display as the comment avatar - generally an antd Avatar */
avatar?: VNodeTypes;
/** The main content of the comment */
content: VNodeTypes;
/** Comment prefix defaults to '.ant-comment' */
prefixCls?: string;
/** Additional style for the comment */
style?: CSSProperties;
/** A datetime element containing the time to be displayed */
datetime?: VNodeTypes;
}
const Comment = (
{
actions,
author,
avatar,
content,
prefixCls: customizePrefixCls,
datetime,
...otherProps
}: CommentProps,
{ slots }: SetupContext,
) => {
const { getPrefixCls } = inject('configProvider', ConfigConsumerProps);
const renderNested = (prefixCls: string, nestedChildren: any) => {
return <div class={classNames(`${prefixCls}-nested`)}>{nestedChildren}</div>;
};
const prefixCls = getPrefixCls('comment', customizePrefixCls);
const avatarDom = avatar ? (
<div class={`${prefixCls}-avatar`}>
{typeof avatar === 'string' ? <img src={avatar} alt="comment-avatar" /> : avatar}
</div>
) : null;
const actionDom =
actions && actions.length ? (
<ul class={`${prefixCls}-actions`}>
{actions.map((action, index) => (
<li key={`action-${index}`}>{action}</li> // eslint-disable-line react/no-array-index-key
))}
</ul>
) : null;
const authorContent = (author || datetime) && (
<div class={`${prefixCls}-content-author`}>
{author && <span class={`${prefixCls}-content-author-name`}>{author}</span>}
{datetime && <span class={`${prefixCls}-content-author-time`}>{datetime}</span>}
</div>
);
const contentDom = (
<div class={`${prefixCls}-content`}>
{authorContent}
<div class={`${prefixCls}-content-detail`}>{content}</div>
{actionDom}
</div>
);
const cls = classNames(prefixCls);
const children = slots.default?.();
return (
<div {...otherProps} class={cls}>
<div class={`${prefixCls}-inner`}>
{avatarDom}
{contentDom}
</div>
{children ? renderNested(prefixCls, children) : null}
</div>
);
};
Comment.displayName = 'AComment';
/* istanbul ignore next */
Comment.install = function(app: App) {
app.component(Comment.name, Comment);
};
export default Comment;

16
components/icon/index.js
View File

@ -1,16 +0,0 @@
import warning from '../_util/warning';
const Icon = {
name: 'AIcon',
render() {
warning(false, 'Icon', 'Empty Icon');
return null;
},
};
/* istanbul ignore next */
Icon.install = function(app) {
app.component(Icon.name, Icon);
};
export default Icon;

16
components/icon/index.tsx Normal file
View File

@ -0,0 +1,16 @@
import { App } from 'vue';
import warning from '../_util/warning';
const Icon = () => {
warning(false, 'Icon', 'Empty Icon');
return null;
};
Icon.displayName = 'AIcon';
/* istanbul ignore next */
Icon.install = function(app: App) {
app.component(Icon.displayName, Icon);
};
export default Icon;

0
components/icon/style/index.js → components/icon/style/index.ts
View File