DocSpace-client/packages/asc-web-common/components/AdvancedSelector/AdvancedSelector.js

import React from 'react';
import PropTypes from 'prop-types';
import Selector from './sub-components/Selector';
import utils from '@appserver/components/utils';
import Backdrop from '@appserver/components/backdrop';
import DropDown from '@appserver/components/drop-down';
import Aside from '@appserver/components/aside';

import throttle from 'lodash/throttle';
const { desktop } = utils.device;

const displayTypes = ['dropdown', 'aside', 'auto'];
const sizes = ['compact', 'full'];

class AdvancedSelector extends React.Component {
  constructor(props) {
    super(props);

    this.ref = React.createRef();

    this.state = {
      displayType: this.getTypeByWidth(),
    };

    this.throttledResize = throttle(this.resize, 300);
  }

  componentDidMount() {
    if (this.props.isOpen) {
      window.addEventListener('resize', this.throttledResize);
    }
  }

  resize = () => {
    if (this.props.displayType !== 'auto') return;

    const type = this.getTypeByWidth();

    if (type === this.state.displayType) return;

    this.setState({ displayType: type });
  };

  onClose = (e) => {
    //console.log("onClose");
    //this.setState({ isOpen: false });
    this.props.onCancel && this.props.onCancel(e);
  };

  componentDidUpdate(prevProps) {
    if (this.props.isOpen !== prevProps.isOpen) {
      //console.log(`ADSelector componentDidUpdate isOpen=${this.props.isOpen}`);
      if (this.props.isOpen) {
        this.resize();
        window.addEventListener('resize', this.throttledResize);
      } else {
        this.throttledResize.cancel();
        window.removeEventListener('resize', this.throttledResize);
      }
    }

    if (this.props.displayType !== prevProps.displayType) {
      //console.log(`ADSelector componentDidUpdate displayType=${this.props.displayType}`);
      this.setState({ displayType: this.getTypeByWidth() });
    }
  }

  componentWillUnmount() {
    if (this.throttledResize) {
      this.throttledResize && this.throttledResize.cancel();
      window.removeEventListener('resize', this.throttledResize);
    }
  }

  getTypeByWidth = () => {
    const displayType =
      this.props.displayType !== 'auto'
        ? this.props.displayType
        : window.innerWidth < desktop.match(/\d+/)[0]
        ? 'aside'
        : 'dropdown';

    //console.log("AdvancedSelector2 displayType", displayType);

    return displayType;
  };

  render() {
    const { displayType } = this.state;
    const { isOpen, id, className, style, withoutAside, theme } = this.props;

    //console.log(`AdvancedSelector render() isOpen=${isOpen} displayType=${displayType}`);

    return (
      <div ref={this.ref} id={id} className={className} style={style}>
        {displayType === 'dropdown' ? (
          <DropDown
            theme={theme}
            open={isOpen}
            className="dropdown-container"
            clickOutsideAction={this.onClose}>
            <Selector theme={theme} {...this.props} displayType={displayType} />
          </DropDown>
        ) : withoutAside ? (
          <Selector theme={theme} {...this.props} displayType={displayType} />
        ) : (
          <>
            <Backdrop
              theme={theme}
              onClick={this.onClose}
              visible={isOpen}
              zIndex={310}
              isAside={true}
            />
            <Aside theme={theme} visible={isOpen} scale={false} className="aside-container">
              <Selector theme={theme} {...this.props} displayType={displayType} />
            </Aside>
          </>
        )}
      </div>
    );
  }
}

AdvancedSelector.propTypes = {
  id: PropTypes.string,
  className: PropTypes.oneOf([PropTypes.string, PropTypes.array]),
  style: PropTypes.object,
  options: PropTypes.array,
  selectedOptions: PropTypes.array,
  groups: PropTypes.array,
  selectedGroups: PropTypes.array,

  value: PropTypes.string,
  placeholder: PropTypes.string,
  selectAllLabel: PropTypes.string,
  buttonLabel: PropTypes.string,

  size: PropTypes.oneOf(sizes),
  displayType: PropTypes.oneOf(displayTypes),

  maxHeight: PropTypes.number,

  isMultiSelect: PropTypes.bool,
  isDisabled: PropTypes.bool,
  selectedAll: PropTypes.bool,
  isOpen: PropTypes.bool,
  allowGroupSelection: PropTypes.bool,
  allowCreation: PropTypes.bool,
  allowAnyClickClose: PropTypes.bool,
  hasNextPage: PropTypes.bool,
  isNextPageLoading: PropTypes.bool,
  withoutAside: PropTypes.bool,

  onSearchChanged: PropTypes.func,
  onSelect: PropTypes.func,
  onGroupChange: PropTypes.func,
  onCancel: PropTypes.func,
  onAddNewClick: PropTypes.func,
  loadNextPage: PropTypes.func,
};

AdvancedSelector.defaultProps = {
  isMultiSelect: false,
  size: 'full',
  buttonLabel: 'Add members',
  selectAllLabel: 'Select all',
  allowGroupSelection: false,
  allowAnyClickClose: true,
  displayType: 'auto',
  options: [],
};

export default AdvancedSelector;