sourcecode/front/project/www/components/UserAction/index.js

import React, { Component } from 'react';
import './index.less';
import { Icon } from 'antd';
import Assets from '@src/components/Assets';
import Select from '../Select';
import CheckboxItem from '../CheckboxItem';
import { Icon as GIcon } from '../Icon';
import { Button } from '../Button';

export default class UserAction extends Component {
  constructor(props) {
    super(props);
    this.state = { showInput: false, searchText: '' };
  }

  onAction(key) {
    const { onAction } = this.props;
    if (onAction) onAction(key);
  }

  onAll(checked) {
    const { onAll } = this.props;
    if (onAll) onAll(checked);
  }

  onSearchKey(e) {
    if (e.keyCode === 13) {
      const { onSearch } = this.props;
      if (onSearch) onSearch(this.state.searchText);
    }
  }

  onSearch(value) {
    this.setState({ searchText: value });
  }

  onFilter(key, value) {
    const { filterMap = {}, onFilter } = this.props;
    filterMap[key] = value;
    if (onFilter) onFilter(filterMap);
  }

  onSort(key, value) {
    const { onSort, sortMap = {} } = this.props;
    sortMap[key] = value;
    if (onSort) onSort(sortMap);
  }

  render() {
    const {
      allCheckbox,
      allChecked,
      help,
      btnList = [],
      search,
      selectList = [],
      sortList = [],
      sortMap = [],
      right,
      left,
    } = this.props;
    const { showInput, searchText } = this.state;
    return (
      <div className="user-action">
        {left && <div className="left">{left}</div>}
        {allCheckbox && (
          <div className="all">
            <CheckboxItem theme="white" checked={allChecked} onClick={value => this.onAll(value)} />
            全选
          </div>
        )}
        <div hidden={btnList.length === 0} className="button-list">
          {btnList.map(btn => {
            return (
              <Button disabled={btn.disabled} radius size="small" onClick={() => this.onAction(btn.key)}>
                {btn.title}{' '}
                {btn.tag === 'vip' && <Assets name={btn.disabled ? 'VIP_small_gray' : 'VIP_small_yellow'} />}
              </Button>
            );
          })}
          {help && (
            <div className="help">
              <Icon type="question-circle" theme="filled" onClick={() => this.onAction('help')} />
            </div>
          )}
        </div>
        <div hidden={selectList.length === 0 && sortList.length === 0} className="item-list">
          {selectList.map(item => {
            return (
              <div className={`item select-item ${item.right ? 'right' : ''}`}>
                <span>{item.label}</span>
                {item.select && this.renderSelect(item)}
                {item.children && item.children.map(child => this.renderSelect(child))}
              </div>
            );
          })}
          {sortList.map(item => {
            return (
              <div className={`item sort-item ${item.right ? 'right' : ''}`}>
                {item.label}
                {item.fixed ? (
                  sortMap[item.key] ? (
                    <GIcon active name="arrow-down" onClick={() => this.onSort(item.key, '')} />
                  ) : (
                    <GIcon name="arrow-up" onClick={() => this.onSort(item.key, 'desc')} />
                  )
                ) : sortMap[item.key] ? (
                  <Assets
                    name={sortMap[item.key] === 'asc' ? 'seqencing2_up_select' : 'seqencing2_down_select'}
                    onClick={() => this.onSort(item.key, sortMap[item.key] === 'asc' ? 'desc' : '')}
                  />
                ) : (
                  <Assets name="seqencing2_normal" onClick={() => this.onSort(item.key, 'asc')} />
                )}
              </div>
            );
          })}
        </div>
        {search && (
          <div className="search">
            {showInput && (
              <input
                className="search-input"
                placeholder="请输入您想搜索的内容"
                value={searchText}
                onChange={e => this.onSearch(e.target.value)}
                onKeyUp={e => this.onSearchKey(e)}
              />
            )}
            {!showInput && <Icon type="search" onClick={() => this.setState({ showInput: true })} />}
          </div>
        )}
        {right && (
          <div
            className={`right ${
              btnList.length === 0 && selectList.length === 0 && sortList.length === 0 ? 'only' : ''
            }`}
          >
            {right}
          </div>
        )}
      </div>
    );
  }

  renderSelect(item) {
    const { filterMap = {} } = this.props;
    return (
      <Select
        size="small"
        theme="default"
        value={filterMap[item.key]}
        placeholder={item.placeholder}
        list={item.be ? item.selectMap[filterMap[item.be]] || [] : item.select}
        onChange={({ key }) => this.onFilter(item.key, key)}
      />
    );
  }
}