ant-design-vue/components/list/Item.jsx

144 lines
4.0 KiB
React
Raw Normal View History

2018-06-16 13:30:41 +00:00
import PropTypes from '../_util/vue-types'
import classNames from 'classnames'
import { getSlotOptions, getComponentFromProp, isEmptyElement } from '../_util/props-util'
import { Col } from '../grid'
import { ListGridType } from './index'
export const ListItemProps = {
prefixCls: PropTypes.string,
extra: PropTypes.any,
actions: PropTypes.arrayOf(PropTypes.any),
grid: ListGridType,
}
export const ListItemMetaProps = {
avatar: PropTypes.any,
description: PropTypes.any,
prefixCls: PropTypes.string,
title: PropTypes.any,
}
export const Meta = {
functional: true,
name: 'AListItemMeta',
__ANT_LIST_ITEM_META: true,
render (h, context) {
const { props, slots, listeners } = context
const slotsMap = slots()
const {
prefixCls = 'ant-list',
} = props
const avatar = props.avatar || slotsMap.avatar
const title = props.title || slotsMap.title
const description = props.description || slotsMap.description
const content = (
<div class={`${prefixCls}-item-meta-content`}>
{title && <h4 class={`${prefixCls}-item-meta-title`}>{title}</h4>}
{description && <div class={`${prefixCls}-item-meta-description`}>{description}</div>}
</div>
)
return (
<div {...{ on: listeners }} class={`${prefixCls}-item-meta`}>
{avatar && <div class={`${prefixCls}-item-meta-avatar`}>{avatar}</div>}
{(title || description) && content}
</div>
)
},
}
function getGrid (grid, t) {
return grid[t] && Math.floor(24 / grid[t])
}
export default {
name: 'AListItem',
Meta,
props: ListItemProps,
inject: {
listContext: { default: {}},
},
render () {
const { grid } = this.listContext
const { prefixCls = 'ant-list', $slots, $listeners } = this
const classString = `${prefixCls}-item`
const extra = getComponentFromProp(this, 'extra')
const actions = getComponentFromProp(this, 'actions')
const metaContent = []
const otherContent = []
;($slots.default || []).forEach((element) => {
if (!isEmptyElement(element)) {
if (getSlotOptions(element).__ANT_LIST_ITEM_META) {
metaContent.push(element)
} else {
otherContent.push(element)
}
}
})
const contentClassString = classNames(`${prefixCls}-item-content`, {
[`${prefixCls}-item-content-single`]: (metaContent.length < 1),
})
const content = otherContent.length > 0 ? (
<div class={contentClassString}>
{otherContent}
</div>) : null
let actionsContent
if (actions && actions.length > 0) {
const actionsContentItem = (action, i) => (
<li key={`${prefixCls}-item-action-${i}`}>
{action}
{i !== (actions.length - 1) && <em class={`${prefixCls}-item-action-split`}/>}
</li>
)
actionsContent = (
<ul class={`${prefixCls}-item-action`}>
{actions.map((action, i) => actionsContentItem(action, i))}
</ul>
)
}
const extraContent = (
<div class={`${prefixCls}-item-extra-wrap`}>
<div class={`${prefixCls}-item-main`}>
{metaContent}
{content}
{actionsContent}
</div>
<div class={`${prefixCls}-item-extra`}>{extra}</div>
</div>
)
const mainContent = grid ? (
<Col
span={getGrid(grid, 'column')}
xs={getGrid(grid, 'xs')}
sm={getGrid(grid, 'sm')}
md={getGrid(grid, 'md')}
lg={getGrid(grid, 'lg')}
xl={getGrid(grid, 'xl')}
xxl={getGrid(grid, 'xxl')}
>
<div {...{ on: $listeners }} class={classString}>
{extra && extraContent}
{!extra && metaContent}
{!extra && content}
{!extra && actionsContent}
</div>
</Col>
) : (
<div {...{ on: $listeners }} class={classString}>
{extra && extraContent}
{!extra && metaContent}
{!extra && content}
{!extra && actionsContent}
</div>
)
return mainContent
},
}