144 lines
4.0 KiB
React
144 lines
4.0 KiB
React
|
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
|
||
|
},
|
||
|
}
|