index.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Icon } from 'antd';
  4. import Assets from '@src/components/Assets';
  5. import Select from '../Select';
  6. import CheckboxItem from '../CheckboxItem';
  7. import { Icon as GIcon } from '../Icon';
  8. import { Button } from '../Button';
  9. export default class UserAction extends Component {
  10. constructor(props) {
  11. super(props);
  12. this.state = { showInput: false, searchText: '' };
  13. }
  14. onAction(key) {
  15. const { onAction } = this.props;
  16. if (onAction) onAction(key);
  17. }
  18. onAll(checked) {
  19. const { onAll } = this.props;
  20. if (onAll) onAll(checked);
  21. }
  22. onSearchKey(e) {
  23. if (e.keyCode === 13) {
  24. const { onSearch } = this.props;
  25. if (onSearch) onSearch(this.state.searchText);
  26. }
  27. }
  28. onSearch(value) {
  29. this.setState({ searchText: value, showInput: true });
  30. }
  31. onFilter(key, value) {
  32. const { filterMap = {}, onFilter } = this.props;
  33. filterMap[key] = value;
  34. if (onFilter) onFilter(filterMap);
  35. }
  36. onSort(key, value) {
  37. const { onSort, sortMap = {} } = this.props;
  38. sortMap[key] = value;
  39. if (onSort) onSort(sortMap);
  40. }
  41. render() {
  42. const {
  43. allCheckbox,
  44. allChecked,
  45. defaultSearch,
  46. help,
  47. btnList = [],
  48. search,
  49. selectList = [],
  50. sortList = [],
  51. sortMap = [],
  52. right,
  53. left,
  54. } = this.props;
  55. const { showInput, searchText } = this.state;
  56. return (
  57. <div className="user-action">
  58. {left && <div className="left">{left}</div>}
  59. {allCheckbox && (
  60. <div className="all">
  61. <CheckboxItem theme="white" checked={allChecked} onClick={value => this.onAll(value)} />
  62. 全选
  63. </div>
  64. )}
  65. <div hidden={btnList.length === 0} className="button-list">
  66. {btnList.map(btn => {
  67. return (
  68. <Button disabled={btn.disabled} radius size="small" onClick={() => this.onAction(btn.key)}>
  69. {btn.title}{' '}
  70. {btn.tag === 'vip' && <Assets name={btn.disabled ? 'VIP_small_gray' : 'VIP_small_yellow'} />}
  71. </Button>
  72. );
  73. })}
  74. {help && (
  75. <div className="help">
  76. <Icon type="question-circle" theme="filled" onClick={() => this.onAction('help')} />
  77. </div>
  78. )}
  79. </div>
  80. <div hidden={selectList.length === 0 && sortList.length === 0} className="item-list">
  81. {selectList.map(item => {
  82. return (
  83. <div className={`item select-item ${item.right ? 'right' : ''}`}>
  84. <span>{item.label}</span>
  85. {item.select && this.renderSelect(item)}
  86. {item.children && item.children.map(child => this.renderSelect(child))}
  87. </div>
  88. );
  89. })}
  90. {sortList.map(item => {
  91. return (
  92. <div className={`item sort-item ${item.right ? 'right' : ''}`}>
  93. {item.label}
  94. {item.fixed ? (
  95. sortMap[item.key] ? (
  96. <GIcon active name="arrow-down" onClick={() => this.onSort(item.key, '')} />
  97. ) : (
  98. <GIcon name="arrow-up" onClick={() => this.onSort(item.key, 'desc')} />
  99. )
  100. ) : sortMap[item.key] ? (
  101. <Assets
  102. name={sortMap[item.key] === 'asc' ? 'seqencing2_up_select' : 'seqencing2_down_select'}
  103. onClick={() => this.onSort(item.key, sortMap[item.key] === 'asc' ? 'desc' : '')}
  104. />
  105. ) : (
  106. <Assets name="seqencing2_normal" onClick={() => this.onSort(item.key, 'asc')} />
  107. )}
  108. </div>
  109. );
  110. })}
  111. </div>
  112. {search && (
  113. <div className="search">
  114. {(showInput || defaultSearch) && (
  115. <input
  116. className="search-input"
  117. placeholder="请输入您想搜索的内容"
  118. value={!searchText ? (showInput ? '' : defaultSearch) : searchText}
  119. onChange={e => this.onSearch(e.target.value)}
  120. onKeyUp={e => this.onSearchKey(e)}
  121. />
  122. )}
  123. {!showInput && !defaultSearch && <Icon type="search" onClick={() => this.setState({ showInput: true })} />}
  124. </div>
  125. )}
  126. {right && (
  127. <div
  128. className={`right ${
  129. btnList.length === 0 && selectList.length === 0 && sortList.length === 0 ? 'only' : ''
  130. }`}
  131. >
  132. {right}
  133. </div>
  134. )}
  135. </div>
  136. );
  137. }
  138. renderSelect(item) {
  139. const { filterMap = {} } = this.props;
  140. return (
  141. <Select
  142. size="small"
  143. theme="default"
  144. value={filterMap[item.key]}
  145. placeholder={item.placeholder}
  146. list={item.be ? item.selectMap[filterMap[item.be]] || [] : item.select}
  147. onChange={({ key }) => this.onFilter(item.key, key)}
  148. />
  149. );
  150. }
  151. }