redash/client/app/components/SelectItemsDialog.jsx

import { filter, debounce, find, isEmpty, size } from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Modal from 'antd/lib/modal';
import Input from 'antd/lib/input';
import List from 'antd/lib/list';
import Button from 'antd/lib/button';
import { wrap as wrapDialog, DialogPropType } from '@/components/DialogWrapper';
import { BigMessage } from '@/components/BigMessage';

import LoadingState from '@/components/items-list/components/LoadingState';
import notification from '@/services/notification';

class SelectItemsDialog extends React.Component {
  static propTypes = {
    dialog: DialogPropType.isRequired,
    dialogTitle: PropTypes.string,
    inputPlaceholder: PropTypes.string,
    selectedItemsTitle: PropTypes.string,
    searchItems: PropTypes.func.isRequired, // (searchTerm: string): Promise<Items[]> if `searchTerm === ''` load all
    itemKey: PropTypes.func, // (item) => string|number - return key of item (by default `id`)
    // left list
    // (item, { isSelected }) => {
    //   content: node, // item contents
    //   className: string = '', // additional class for item wrapper
    //   isDisabled: bool = false, // is item clickable or disabled
    // }
    renderItem: PropTypes.func,
    // right list; args/results save as for `renderItem`. if not specified - `renderItem` will be used
    renderStagedItem: PropTypes.func,
    save: PropTypes.func, // (selectedItems[]) => Promise<any>
    width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    extraFooterContent: PropTypes.node,
    showCount: PropTypes.bool,
  };

  static defaultProps = {
    dialogTitle: 'Add Items',
    inputPlaceholder: 'Search...',
    selectedItemsTitle: 'Selected items',
    itemKey: item => item.id,
    renderItem: () => '',
    renderStagedItem: null, // hidden by default
    save: items => items,
    width: '80%',
    extraFooterContent: null,
    showCount: false,
  };

  state = {
    searchTerm: '',
    loading: false,
    items: [],
    selected: [],
    saveInProgress: false,
  };

  // eslint-disable-next-line react/sort-comp
  loadItems = (searchTerm = '') => {
    this.setState({ searchTerm, loading: true }, () => {
      this.props.searchItems(searchTerm)
        .then((items) => {
          // If another search appeared while loading data - just reject this set
          if (this.state.searchTerm === searchTerm) {
            this.setState({ items, loading: false });
          }
        })
        .catch(() => {
          if (this.state.searchTerm === searchTerm) {
            this.setState({ items: [], loading: false });
          }
        });
    });
  };

  search = debounce(this.loadItems, 200);

  componentDidMount() {
    this.loadItems();
  }

  isSelected(item) {
    const key = this.props.itemKey(item);
    return !!find(this.state.selected, i => this.props.itemKey(i) === key);
  }

  toggleItem(item) {
    if (this.isSelected(item)) {
      const key = this.props.itemKey(item);
      this.setState(({ selected }) => ({
        selected: filter(selected, i => this.props.itemKey(i) !== key),
      }));
    } else {
      this.setState(({ selected }) => ({
        selected: [...selected, item],
      }));
    }
  }

  save() {
    this.setState({ saveInProgress: true }, () => {
      const selectedItems = this.state.selected;
      Promise.resolve(this.props.save(selectedItems))
        .then(() => {
          this.props.dialog.close(selectedItems);
        })
        .catch(() => {
          this.setState({ saveInProgress: false });
          notification.error('Failed to save some of selected items.');
        });
    });
  }

  renderItem(item, isStagedList) {
    const { renderItem, renderStagedItem } = this.props;
    const isSelected = this.isSelected(item);
    const render = isStagedList ? renderStagedItem : renderItem;

    const { content, className, isDisabled } = render(item, { isSelected });

    return (
      <List.Item
        className={classNames('p-l-10', 'p-r-10', { clickable: !isDisabled, disabled: isDisabled }, className)}
        onClick={isDisabled ? null : () => this.toggleItem(item)}
      >
        {content}
      </List.Item>
    );
  }

  render() {
    const { dialog, dialogTitle, inputPlaceholder } = this.props;
    const { selectedItemsTitle, renderStagedItem, width, showCount } = this.props;
    const { loading, saveInProgress, items, selected } = this.state;
    const hasResults = items.length > 0;
    return (
      <Modal
        {...dialog.props}
        className="select-items-dialog"
        width={width}
        title={dialogTitle}
        footer={(
          <div className="d-flex align-items-center">
            <span className="flex-fill m-r-5" style={{ textAlign: 'left', color: 'rgba(0, 0, 0, 0.5)' }}>{this.props.extraFooterContent}</span>
            <Button onClick={dialog.dismiss}>Cancel</Button>
            <Button onClick={() => this.save()} loading={saveInProgress} disabled={selected.length === 0} type="primary">
              Save
              {showCount && !isEmpty(selected) ? ` (${size(selected)})` : null}
            </Button>
          </div>
        )}
      >
        <div className="d-flex align-items-center m-b-10">
          <div className="flex-fill">
            <Input.Search
              defaultValue={this.state.searchTerm}
              onChange={event => this.search(event.target.value)}
              placeholder={inputPlaceholder}
              autoFocus
            />
          </div>
          {renderStagedItem && (
            <div className="w-50 m-l-20">
              <h5 className="m-0">{selectedItemsTitle}</h5>
            </div>
          )}
        </div>

        <div className="d-flex align-items-stretch" style={{ minHeight: '30vh', maxHeight: '50vh' }}>
          <div className="flex-fill scrollbox">
            {loading && <LoadingState className="" />}
            {!loading && !hasResults && (
              <BigMessage icon="fa-search" message="No items match your search." className="" />
            )}
            {!loading && hasResults && (
              <List
                size="small"
                dataSource={items}
                renderItem={item => this.renderItem(item, false)}
              />
            )}
          </div>
          {renderStagedItem && (
            <div className="w-50 m-l-20 scrollbox">
              {(selected.length > 0) && (
                <List
                  size="small"
                  dataSource={selected}
                  renderItem={item => this.renderItem(item, true)}
                />
              )}
            </div>
          )}
        </div>
      </Modal>
    );
  }
}

export default wrapDialog(SelectItemsDialog);