ilanus
6 years ago
committed by
偏右
偏右
11 changed files with 188 additions and 207 deletions
@ -1,57 +0,0 @@ |
|||
import * as React from 'react'; |
|||
import classNames from 'classnames'; |
|||
|
|||
export interface CommentEditorProps { |
|||
avatar: React.ReactNode; |
|||
className?: string; |
|||
editorStyle?: React.CSSProperties; |
|||
headStyle?: React.CSSProperties; |
|||
innerStyle?: React.CSSProperties; |
|||
prefixCls?: string; |
|||
style?: React.CSSProperties; |
|||
content: React.ReactNode; |
|||
} |
|||
|
|||
export default (props: CommentEditorProps) => { |
|||
const { |
|||
avatar, |
|||
className, |
|||
content, |
|||
editorStyle, |
|||
headStyle, |
|||
innerStyle, |
|||
prefixCls = 'ant-comment', |
|||
style, |
|||
...others |
|||
} = props; |
|||
const classString = classNames(`${prefixCls}-editor`, className); |
|||
|
|||
const avatarDom = typeof avatar === 'string' |
|||
? <img src={avatar} /> |
|||
: avatar; |
|||
|
|||
const headDom = ( |
|||
<div className={`${prefixCls}-header`} style={headStyle}> |
|||
<span className={`${prefixCls}-header-avatar`}> |
|||
{avatarDom} |
|||
</span> |
|||
</div> |
|||
); |
|||
|
|||
const contentDom = ( |
|||
<div className={`${prefixCls}-content`} style={editorStyle}> |
|||
<div className={`${prefixCls}-content-wrapper`}> |
|||
{content} |
|||
</div> |
|||
</div> |
|||
); |
|||
|
|||
return ( |
|||
<div {...others} className={classString} style={style}> |
|||
<div className={`${prefixCls}-inner`} style={innerStyle}> |
|||
{headDom} |
|||
{contentDom} |
|||
</div> |
|||
</div> |
|||
); |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
--- |
|||
order: 4 |
|||
title: |
|||
zh-CN: 基本评论 |
|||
en-US: Custom direction comment |
|||
--- |
|||
|
|||
## zh-CN |
|||
|
|||
一个基本的评论组件，带有作者、头像、时间和操作。 |
|||
|
|||
## en-US |
|||
|
|||
A basic comment with author, avatar, time and actions. |
|||
|
|||
````jsx |
|||
import { Comment, Icon, Tooltip, Avatar } from 'antd'; |
|||
import moment from 'moment'; |
|||
|
|||
function ExampleComment({ direction = 'left' }) { |
|||
return ( |
|||
<Comment |
|||
direction={direction} |
|||
avatar={ |
|||
<Tooltip title="Han Solo"> |
|||
<Avatar |
|||
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" |
|||
alt="Han Solo" |
|||
/> |
|||
</Tooltip> |
|||
} |
|||
content={ |
|||
<p>Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.</p> |
|||
} |
|||
/> |
|||
) |
|||
} |
|||
|
|||
class App extends React.Component { |
|||
render() { |
|||
return ( |
|||
<React.Fragment> |
|||
<ExampleComment /> |
|||
<ExampleComment direction="right" /> |
|||
</React.Fragment> |
|||
); |
|||
} |
|||
} |
|||
|
|||
ReactDOM.render(<App />, mountNode); |
|||
```` |
|||