text: import React, { Component } from 'react';
  import classNames from 'classnames';
  import { Tag, Icon } from 'antd';
  
  import styles from './index.less';
  
  const { CheckableTag } = Tag;
  
  const TagSelectOption = ({ children, checked, onChange, value }) => (
    <CheckableTag
      checked={checked}
      key={value}
      onChange={state => onChange(value, state)}
    >
      {children}
    </CheckableTag>
  );
  
  TagSelectOption.isTagSelectOption = true;
  
  class TagSelect extends Component {
    state = {
      expand: false,
      checkedTags: this.props.defaultValue || [],
    };
  
    onSelectAll = (checked) => {
      const { onChange } = this.props;
      let checkedTags = [];
      if (checked) {
        checkedTags = this.getAllTags();
      }
  
      this.setState({ checkedTags });
  
      if (onChange) {
        onChange(checkedTags);
      }
    }
  
    getAllTags() {
      let { children } = this.props;
      children = React.Children.toArray(children);
      const checkedTags = children
        .filter(child => this.isTagSelectOption(child))
        .map(child => child.props.value);
      return checkedTags;
    }
  
    handleTagChange = (value, checked) => {
      const { onChange } = this.props;
      const { checkedTags } = this.state;
  
      const index = checkedTags.indexOf(value);
      if (checked && index === -1) {
        checkedTags.push(value);
      } else if (!checked && index > -1) {
        checkedTags.splice(index, 1);
      }
  
      this.setState({ checkedTags });
  
      if (onChange) {
        onChange(checkedTags);
      }
    }
  
    handleExpand = () => {
      this.setState({
        expand: !this.state.expand,
      });
    }
  
    isTagSelectOption = (node) => {
      return node && node.type && (
        node.type.isTagSelectOption || node.type.displayName === 'TagSelectOption'
      );
    }
  
    render() {
      const { checkedTags, expand } = this.state;
      const { children, className, style, expandable } = this.props;
  
      const checkedAll = this.getAllTags().length === checkedTags.length;
  
      const cls = classNames(styles.tagSelect, className, {
        [styles.hasExpandTag]: expandable,
        [styles.expanded]: expand,
      });
      return (
        <div className={cls} style={style}>
          <CheckableTag
            checked={checkedAll}
            key="tag-select-__all__"
            onChange={this.onSelectAll}
          >
            全部
          </CheckableTag>
          {
            checkedTags && React.Children.map(children, (child) => {
                if (this.isTagSelectOption(child)) {
                  return React.cloneElement(child, {
                    key: `tag-select-${child.props.value}`,
                    checked: checkedTags.indexOf(child.props.value) > -1,
                    onChange: this.handleTagChange,
                  });
                }
                return child;
              })
          }
          {
            expandable && (
              <a className={styles.trigger} onClick={this.handleExpand}>
                {expand ? '收起' : '展开'} <Icon type={expand ? 'up' : 'down'} />
              </a>
            )
          }
        </div>
      );
    }
  }
  
  TagSelect.Option = TagSelectOption;
  
  export default TagSelect;
  