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, showInput: true }); } 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, defaultSearch, 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 || defaultSearch) && ( <input className="search-input" placeholder="请输入您想搜索的内容" value={!searchText ? (showInput ? '' : defaultSearch) : searchText} onChange={e => this.onSearch(e.target.value)} onKeyUp={e => this.onSearchKey(e)} /> )} {!showInput && !defaultSearch && <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)} /> ); } }