Поиск в ExtendedRow с реагированием на дизайн муравья - PullRequest
Новая
       25

Поиск в ExtendedRow с реагированием на дизайн муравья

0 голосов
/ 25 октября 2019

У меня есть поле поиска в заголовке таблицы, и мне нужно выполнить поиск внутри моего extendedRow. Сегодня я могу найти только элементы, которые принадлежат к заголовку.

Пример того, как мой код сегодня: 

getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
  <div style={{ padding: 8 }}>
    <Input
      ref={node => {
        this.searchInput = node;
      }}
      placeholder={`Search ${dataIndex}`}
      value={selectedKeys[0]}
      onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
      onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
      style={{ width: 188, marginBottom: 8, display: 'block' }}
    />
    <Button
      type="primary"
      onClick={() => this.handleSearch(selectedKeys, confirm)}
      icon="search"
      size="small"
      style={{ width: 90, marginRight: 8 }}
    >
      Search
    </Button>
    <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
      Limpar
    </Button>
  </div>
),
filterIcon: filtered => (
  <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
  record[dataIndex]
    .toString()
    .toLowerCase()
    .includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
  if (visible) {
    setTimeout(() => this.searchInput.select());
  }
},
render: text => (
  <Highlighter
    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
    searchWords={[this.state.searchText]}
    autoEscape
    textToHighlight={text.toString()}
  />
)});

Мне нужно, чтобы это было похоже на это изображение:

ПРИМЕР ПОИСКА

...