feat: add list component

Author: tangjinzhou

components/_util/props-util.js

@@ -59,6 +59,9 @@ const getSlots = (ele) => {
   return slots
 }
 const getSlotOptions = (ele) => {
+  if (ele.fnOptions) { // 函数式组件
+    return ele.fnOptions
+  }
   let componentOptions = ele.componentOptions
   if (ele.$vnode) {
     componentOptions = ele.$vnode.componentOptions

components/index.js

@@ -60,7 +60,7 @@ import { default as InputNumber } from './input-number'
 
 import { default as Layout } from './layout'
 
-// import { default as List } from './list'
+import { default as List } from './list'
 
 import { default as LocaleProvider } from './locale-provider'
 
@@ -163,6 +163,9 @@ const components = [
   Layout.Footer,
   Layout.Sider,
   Layout.Content,
+  List,
+  List.Item,
+  List.Item.Meta,
   LocaleProvider,
   Menu,
   Menu.Item,
@@ -247,6 +250,7 @@ export {
   Input,
   InputNumber,
   Layout,
+  List,
   LocaleProvider,
   Menu,
   Modal,

components/list/Item.jsx

@@ -0,0 +1,143 @@
+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
+  },
+}