app-base-web/src/library/tag-group/index.js

web development common base package.

import React from 'react';
import { Tag } from 'antd';
import dic from '../util-dic'
import array from '../util-array'

const { CheckableTag } = Tag;
export default class TagGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      options: this.props.options,
      dic: this.props.dic,//{ app:"",type:""},
      value: this.props.selected || [] //必须为数组
    }
  }
  onChange(id, checked) {
    let value = this.state.value;
    if (checked == true) {
      value.push(id);
    } else {
      array.remove(value, id);
    }
    this.setState({ value });
    this.props.onChange && this.props.onChange(value, id, checked);
  }
  init() {
    const rows = [];
    if (this.state.dic) {
      let data;
      if (this.state.dic.subType) {
        data = dic.list(this.state.dic.app, this.state.dic.type, this.state.dic.subType);
      } else {
        data = dic.list(this.state.dic.app, this.state.dic.type);
      }
      if (!data) return rows;
      data.map((item, index) => {
        rows.push(<CheckableTag
          key={item.value}
          checked={array.getIndex(this.state.value, item.value) > -1}
          onChange={checked => this.onChange(item.value, checked)}
        >{item.zh_CN}</CheckableTag>);
      })
    } else {
      this.state.options.map((item, index) => {
        if (item instanceof Object) {
          rows.push(<CheckableTag
            key={item.id}
            checked={array.getIndex(this.state.value, item.id) > -1}
            onChange={checked => this.onChange(item.id, checked)}
          >{item.name}</CheckableTag>);
        } else {
          rows.push(<CheckableTag
            key={item}
            checked={array.getIndex(this.state.value, item) > -1}
            onChange={checked => this.onChange(item, checked)}
          >{item}</CheckableTag>);
        }
      })
    }
    return rows;
  }
  render() {
    return (
      <span className="app-taggroup">
        {this.init()}
      </span>);

  }
}