qm-bus/src/GalleryBox/components/CategoryBar.js

千米公有云业务组件库

import React, { Component } from 'react'
import { Tree } from 'antd'
import { Relax } from 'iflux2'
import { QMIcon } from 'qm-ui'

import { expandedQL, cateQL, selectedQL, expandParentQL } from '../ql'
import { loadCategories } from '../webapi'
import Arrays from '../../util/qm-array'

const TreeNode = Tree.TreeNode
const noop = () => {}

@Relax
export default class CategoryBar extends Component {
  static defaultProps = {
    expanded: expandedQL,
    categories: cateQL,
    selected: selectedQL,
    initCategory: noop,
    onRefresh: noop,
    onFormReset: noop,
    elementOnChange: noop,
    expand: noop,
    expandParent: expandParentQL,
    elementInit: noop,
    initLeaves: noop,
  }

  componentDidMount() {
    this.props.elementInit({ index: 'cateId', value: '0', group: 'simple' })
    loadCategories().then(res => {
      let cates = res.data
      let leaves = []
      res.data.push({ id: 0, pid: -1, name: '我的媒体库' })
      cates = Arrays.tree(cates, 'id', 'pid', -1, v => {
        if (v.NODE_LEAF) {
          leaves.push(v.id)
        }
      })
      this.props.initCategory(cates)
      this.props.initLeaves(leaves)
    })
  }

  _onSelect(selectedKey) {
    if (selectedKey.length) {
      this.props.onFormReset('simple')
      this.props.expand(selectedKey[0])
      this.props.elementOnChange({
        index: 'cateId',

        source: { index: 'cateId', value: selectedKey[0], group: 'simple' },
      })
      this.props.onRefresh()
    } else {
      this.props.expand(this.props.selected[0])
    }
  }

  _onExpand(expandedKey) {
    this.props.expand(expandedKey)
  }

  render() {
    const loop = data =>
      data.map(it => {
        let item = it.toJS()
        if (item.childNodes && item.childNodes.length) {
          return (
            <TreeNode
              key={item.id}
              title={
                <span>
                  <QMIcon type="folder" />
                  {item.name}
                </span>
              }>
              {loop(it.get('childNodes')).toArray()}
            </TreeNode>
          )
        }
        return (
          <TreeNode
            key={item.id}
            title={
              <span>
                <QMIcon type="file" />
                {item.name}
              </span>
            }
          />
        )
      })
    return (
      <div className="folder-tree" style={{ height: 417 }}>
        <Tree
          onSelect={this._onSelect.bind(this)}
          onExpand={this._onExpand.bind(this)}
          expandedKeys={this.props.expanded}
          selectedKeys={this.props.selected}
          autoExpandParent={this.props.expandParent}
          defaultExpandAll={true}>
          {loop(this.props.categories).toArray()}
        </Tree>
      </div>
    )
  }
}