react-awesome-multiselect/dist/index.js

React Awesome MultiSelect is a NPM Package which gave multiselect functionality with react ui component.

import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Form, Badge } from 'react-bootstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes, faArrowUp, faArrowDown, faCheck } from '@fortawesome/free-solid-svg-icons';
import 'bootstrap/dist/css/bootstrap.min.css';

var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}

var css = ".multi-select {\r\n    width: 50%;\r\n}\r\n\r\n.multi-select .multi-select-box {\r\n    border-radius: 5px;\r\n    background-color: #fff;\r\n    padding: 15px 10px;\r\n    width: 100%;\r\n    margin-bottom: 0;\r\n    border-bottom: 1px solid;\r\n}\r\n\r\n.multi-select .multi-select-box .badge {\r\n    background-color: var(--chip-color) !important;\r\n}\r\n\r\n.multi-select .multi-select-list {\r\n    max-height: 200px;\r\n    overflow-y: auto;\r\n    overflow-x: hidden;\r\n    display: var(--display-select);\r\n    background: var(--dropdown-color);\r\n}\r\n\r\n.multi-select .multi-select-list::-webkit-scrollbar {\r\n    background-color: #fff;\r\n    width: 6px;\r\n}\r\n\r\n.multi-select .multi-select-list::-webkit-scrollbar-track {\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); \r\n    border-radius: 10px;\r\n}\r\n\r\n.multi-select .multi-select-list::-webkit-scrollbar-thumb {\r\n    border-radius: 10px;\r\n    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); \r\n}\r\n\r\n.multi-select .multi-select-list .no-item-select {\r\n    height: 40px;\r\n    background-color: #6464d9;\r\n    color: white;\r\n}\r\n\r\n.multi-select .multi-select-list div {\r\n    padding: 8px 0;\r\n    font-size: 16px;\r\n    border-bottom: 1px solid #eee;\r\n}\r\n\r\n.multi-select .multi-select-list div label {\r\n    margin-left: 10px;\r\n    color: #fff;\r\n    width: 100%;\r\n    display: block;\r\n    cursor: pointer;\r\n}\r\n\r\n.item-select {\r\n    background-color: var(--item-color);\r\n}\r\n\r\n.cursor-pointer {\r\n    cursor: pointer !important;\r\n}\r\n\r\n@media only screen and (max-width: 767px) {\r\n    .multi-select {\r\n        width: 100%;\r\n    }\r\n\r\n    .multi-select .multi-select-box {\r\n        padding: 10px 5px;\r\n    }\r\n\r\n    .multi-select .multi-select-box span {\r\n        font-size: 10px !important;\r\n    }\r\n\r\n    .badge {\r\n        font-weight: 500;\r\n        padding: 0.3em 0.5em;\r\n        margin-right: 0 !important;\r\n    }\r\n\r\n    .badge .p-2 {\r\n        padding: 0 !important;\r\n    }\r\n}";
n(css,{});

var NoDataFound = function NoDataFound() {
  return /*#__PURE__*/React.createElement("div", {
    className: 'no-item-select'
  }, /*#__PURE__*/React.createElement("span", null, "No Option Available"));
};

var MultipleSelect = function MultipleSelect(_ref) {
  var _ref$list = _ref.list,
      list = _ref$list === void 0 ? [] : _ref$list,
      _ref$handleSelectCb = _ref.handleSelectCb,
      handleSelectCb = _ref$handleSelectCb === void 0 ? function () {} : _ref$handleSelectCb,
      _ref$selectedOptions = _ref.selectedOptions,
      selectedOptions = _ref$selectedOptions === void 0 ? [] : _ref$selectedOptions,
      _ref$listSelectColor = _ref.listSelectColor,
      listSelectColor = _ref$listSelectColor === void 0 ? "#ffb366" : _ref$listSelectColor,
      _ref$dropDownColor = _ref.dropDownColor,
      dropDownColor = _ref$dropDownColor === void 0 ? "#6464d9" : _ref$dropDownColor,
      _ref$chipColor = _ref.chipColor,
      chipColor = _ref$chipColor === void 0 ? "#6464d9" : _ref$chipColor,
      _ref$isCloseOnOutside = _ref.isCloseOnOutsideClick,
      isCloseOnOutsideClick = _ref$isCloseOnOutside === void 0 ? false : _ref$isCloseOnOutside,
      _ref$isTypeToSearch = _ref.isTypeToSearch,
      isTypeToSearch = _ref$isTypeToSearch === void 0 ? false : _ref$isTypeToSearch;

  var _useState = useState(selectedOptions || []),
      _useState2 = _slicedToArray(_useState, 2),
      field = _useState2[0],
      setField = _useState2[1];

  var _useState3 = useState([]),
      _useState4 = _slicedToArray(_useState3, 2),
      filteredList = _useState4[0],
      setFilteredList = _useState4[1];

  var _useState5 = useState(0),
      _useState6 = _slicedToArray(_useState5, 2),
      allClickCount = _useState6[0],
      setAllClickCount = _useState6[1];

  var _useState7 = useState([]),
      _useState8 = _slicedToArray(_useState7, 2),
      fieldName = _useState8[0],
      setFieldName = _useState8[1];

  var _useState9 = useState(false),
      _useState10 = _slicedToArray(_useState9, 2),
      showOptions = _useState10[0],
      setShowOptions = _useState10[1];

  var _useState11 = useState(''),
      _useState12 = _slicedToArray(_useState11, 2),
      searchValue = _useState12[0],
      setSearchValue = _useState12[1];

  var multiSelectRef = useRef(null);

  var handleClickOutside = function handleClickOutside(event) {
    if (multiSelectRef.current && !multiSelectRef.current.contains(event.target)) {
      setShowOptions(false);
    }
  };

  useEffect(function () {
    if (isCloseOnOutsideClick) {
      document.addEventListener('click', handleClickOutside, true);
      return function () {
        document.removeEventListener('click', handleClickOutside, true);
      };
    }
  }, [isCloseOnOutsideClick]);

  var handleSelect = function handleSelect(e, value, valueName) {
    var options = _toConsumableArray(field);

    var optionsName = _toConsumableArray(fieldName);

    var count = allClickCount;

    if (value === 'all') {
      if (count === 0) {
        list.forEach(function (el, i) {
          options[i] = el.id;
          optionsName[i] = el.displayValue;
        });
      } else {
        options = [];
        optionsName = [];
        count = 0;
      }
    } else {
      if (options.includes(value)) {
        var index = options.findIndex(function (el) {
          return el === value;
        });
        options.splice(index, options.length === 0 ? 0 : 1);
        optionsName.splice(index, optionsName.length === 0 ? 0 : 1);
      } else {
        options.push(value);
        optionsName.push(valueName);
      }
    }

    if (options.length === list.length) {
      count = 1;
    } else {
      count = 0;
    }

    setField(options);
    setFieldName(optionsName);
    handleSelectCb(options);
    setAllClickCount(count);
  };

  useEffect(function () {
    if (selectedOptions.length > 0) {
      var selectedName = [];
      list === null || list === void 0 ? void 0 : list.map(function (el, i) {
        if (selectedOptions.includes(el.id)) {
          selectedName.push(el.displayValue);
        }
      });
      setFieldName([].concat(selectedName));
    }
  }, [selectedOptions]);

  var handleSearch = function handleSearch(e) {
    var value = e.target.value;
    var filtered = list.filter(function (el) {
      return el.displayValue.toLowerCase().includes(value.toLowerCase());
    });
    setSearchValue(value);

    if (value) {
      setFilteredList(filtered);
    } else {
      setFilteredList([]);
    }
  };

  return /*#__PURE__*/React.createElement(Form.Group, {
    ref: multiSelectRef,
    className: "multi-select"
  }, /*#__PURE__*/React.createElement(Form.Label, {
    className: "multi-select-box"
  }, field.length === 0 ? /*#__PURE__*/React.createElement("span", null, "Select Options from list", /*#__PURE__*/React.createElement("small", {
    className: "text-muted mx-1"
  }, "(click arrow icon to ", showOptions ? 'close' : 'open', " list)")) : /*#__PURE__*/React.createElement(React.Fragment, null, fieldName.map(function (val, i) {
    return i <= 2 && /*#__PURE__*/React.createElement(Badge, {
      style: {
        '--chip-color': chipColor
      },
      className: "mx-1 p-2",
      key: i
    }, val, " ", /*#__PURE__*/React.createElement("div", {
      className: "vr mx-md-2 mx-1"
    }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
      onClick: function onClick(e) {
        return handleSelect(e, field[i], val);
      },
      icon: faTimes,
      className: "cursor-pointer"
    }));
  }), fieldName.length > 3 && /*#__PURE__*/React.createElement(Badge, {
    style: {
      '--chip-color': chipColor
    },
    className: "mx-1 p-2"
  }, "+", fieldName.length - 3, " more")), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
    onClick: function onClick() {
      return setShowOptions(!showOptions);
    },
    icon: showOptions ? faArrowUp : faArrowDown,
    className: "float-end mt-1 cursor-pointer"
  })), /*#__PURE__*/React.createElement(Form.Group, {
    style: {
      '--display-select': showOptions ? 'block' : 'none',
      '--dropdown-color': dropDownColor
    },
    className: "multi-select-list"
  }, list.length ? /*#__PURE__*/React.createElement(React.Fragment, null, isTypeToSearch && /*#__PURE__*/React.createElement("input", {
    type: "text",
    id: "search",
    className: "py-2 w-100",
    onChange: function onChange(e) {
      return handleSearch(e);
    },
    name: "search",
    placeholder: "Type to search"
  }), searchValue && filteredList.length === 0 ? /*#__PURE__*/React.createElement(NoDataFound, null) : filteredList.length === 0 && /*#__PURE__*/React.createElement("div", {
    style: {
      '--item-color': listSelectColor
    },
    className: field.length === list.length ? 'item-select' : ''
  }, /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    className: "d-none",
    id: "select-all",
    onChange: function onChange(e) {
      return handleSelect(e, "all", "all");
    },
    name: "ids",
    checked: field.length === list.length
  }), /*#__PURE__*/React.createElement("label", {
    htmlFor: "select-all"
  }, " ", "Select All", field.length === list.length && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
    icon: faCheck,
    className: "float-end mx-4 mt-2"
  }))), (searchValue ? filteredList : list).map(function (opt, i) {
    return /*#__PURE__*/React.createElement("div", {
      key: i,
      style: {
        '--item-color': listSelectColor
      },
      className: field.includes(opt.id) ? 'item-select' : ''
    }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
      type: "checkbox",
      className: "d-none",
      id: opt.displayValue + '_' + opt.id,
      onChange: function onChange(e) {
        return handleSelect(e, opt.id, opt.displayValue);
      },
      name: "ids",
      checked: field.includes(opt.id)
    }), /*#__PURE__*/React.createElement("label", {
      htmlFor: opt.displayValue + '_' + opt.id
    }, !!opt.avatar && /*#__PURE__*/React.createElement("img", {
      style: {
        borderRadius: "50px"
      },
      height: "30",
      width: "30",
      src: opt.avatar || "https://i.pravatar.cc/150?img=50",
      alt: "Avatar"
    }), " ", opt.displayValue, field.includes(opt.id) && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
      icon: faCheck,
      className: "float-end mx-4 mt-2"
    }))));
  })) : /*#__PURE__*/React.createElement(NoDataFound, null)));
};

MultipleSelect.propTypes = {
  list: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    displayValue: PropTypes.string.isRequired,
    avatar: PropTypes.string
  }).isRequired).isRequired,
  handleSelectCb: PropTypes.func.isRequired,
  selectedOptions: PropTypes.array.isRequired,
  listSelectColor: PropTypes.string,
  dropDownColor: PropTypes.string,
  chipColor: PropTypes.string,
  isCloseOnOutsideClick: PropTypes.bool,
  isTypeToSearch: PropTypes.bool
};

export { MultipleSelect as default };