react-finderselect/dist/index.modern.js

A nice and cute select which will let the user to search inside the select options writing what he want to find

import React from 'react';

var styles = {"fsContainer":"_31K9T","fsInputContainer":"_3xO4j","fsOptionsListContainer":"_17Xct","fsOptionsList":"_2zRUX","fsOption":"_3jVCS","even":"_DN2qA","fsOptionExtraInfo":"_1h4ZN","fsLabelInput":"_2Yv_u","fsExtendIcon":"_3j53b"};

var removeAccents = function removeAccents(str) {
  return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
};

var getInnerText = function getInnerText(e) {
  var elem = e.cloneNode(true);

  for (var i = elem.childNodes.length - 1; i >= 0; i--) {
    if (elem.childNodes[i].tagName) elem.removeChild(elem.childNodes[i]);
  }

  var innerText = elem['innerText' in elem ? 'innerText' : 'textContent'];
  return innerText;
};

var isEven = function isEven(num) {
  return num % 2 === 0;
};

var FinderSelect = function FinderSelect(_ref) {
  var data = _ref.data,
      label = _ref.label,
      value = _ref.value,
      extraInfo = _ref.extraInfo,
      name = _ref.name,
      className = _ref.className,
      placeholder = _ref.placeholder,
      onClick = _ref.onClick,
      onChange = _ref.onChange;

  var handleInputFocus = function handleInputFocus(e) {
    try {
      var labelInput = e.target;

      try {
        if (onClick) onClick(labelInput);
      } catch (e) {
        console.log(e);
      }

      var ul = labelInput.parentNode.parentNode.getElementsByClassName('fsOptionsList')[0];
      ul.style.display = '';
      return Promise.resolve();
    } catch (e) {
      return Promise.reject(e);
    }
  };

  var handleInputOnBlur = function handleInputOnBlur(e) {
    try {
      var labelInput = e.target;
      var ul = labelInput.parentNode.parentNode.getElementsByClassName('fsOptionsList')[0];
      ul.style.display = 'none';
      var valueInput = labelInput.parentNode.getElementsByClassName('fsValueInput')[0];
      var lis = ul.getElementsByClassName('fsOption');
      var match = false;

      for (var i = 0; i < lis.length; i++) {
        var li = lis[i];
        var liText = getInnerText(li);

        if (liText === labelInput.value) {
          match = true;
        }
      }

      if (!match) {
        labelInput.value = '';
        valueInput.value = '';
        doSearch(e);
      }

      return Promise.resolve();
    } catch (e) {
      return Promise.reject(e);
    }
  };

  var doSearch = function doSearch(e, reset) {
    if (reset === void 0) {
      reset = false;
    }

    var labelInput = e.target;
    var whereSearch = labelInput.parentNode.parentNode.getElementsByClassName('fsOption');
    var whatSearch = reset ? '' : removeAccents(labelInput.value.toLowerCase());

    for (var i = 0; i < whereSearch.length; i++) {
      var li = whereSearch[i];
      var liText = removeAccents(getInnerText(li).toLowerCase());

      if (whatSearch.length === 0 || liText.indexOf(whatSearch) > -1) {
        li.hidden = false;
      } else {
        li.hidden = true;
      }
    }
  };

  var handleLiOnMouseDown = function handleLiOnMouseDown(e) {
    var label = getInnerText(e.target);
    var value = e.target.getElementsByClassName('fsOptionValue')[0].innerHTML;
    var labelInput = e.target.parentNode.parentNode.parentNode.getElementsByClassName('fsLabelInput')[0];
    var valueInput = e.target.parentNode.parentNode.parentNode.getElementsByClassName('fsValueInput')[0];
    labelInput.value = label;
    valueInput.value = value;

    try {
      if (onChange) onChange(valueInput);
    } catch (e) {
      console.log(e);
    }
  };

  var handleExtendIconMouseDown = function handleExtendIconMouseDown(e) {
    var labelInput = e.target.parentNode.getElementsByClassName('fsLabelInput')[0];
    var ulVisible = e.target.parentNode.parentNode.getElementsByClassName('fsOptionsList')[0].style.display !== 'none';

    if (!ulVisible) {
      e.preventDefault();
      labelInput.focus();
    }
  };

  var options = data.map(function (e, i) {
    var style = {
      display: e.display === false ? 'none' : ''
    };
    var even = isEven(i) ? styles.even : '';
    return /*#__PURE__*/React.createElement("li", {
      key: i,
      onMouseDown: handleLiOnMouseDown,
      style: style,
      className: name + "LI fsOption " + styles.fsOption + " " + even
    }, e[label], /*#__PURE__*/React.createElement("span", {
      className: "fsOptionValue",
      hidden: true
    }, e[value]), /*#__PURE__*/React.createElement("p", {
      className: styles.fsOptionExtraInfo + " fsOptionExtraInfo"
    }, e[extraInfo]));
  });
  return /*#__PURE__*/React.createElement("div", {
    className: name + "Div fsContainer " + styles.fsContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: "fsInputContainer " + styles.fsInputContainer
  }, /*#__PURE__*/React.createElement("input", {
    className: name + "LabelInput fsLabelInput " + styles.fsLabelInput + " " + (className ? className : ''),
    placeholder: placeholder ? placeholder : '',
    onChange: doSearch,
    onFocus: handleInputFocus,
    onBlur: handleInputOnBlur
  }), /*#__PURE__*/React.createElement("div", {
    onMouseDown: handleExtendIconMouseDown,
    className: styles.fsExtendIcon + " fsExtendIcon"
  }), /*#__PURE__*/React.createElement("input", {
    name: name ? name : '',
    className: name + " " + name + "LabelInput fsValueInput",
    type: "hidden"
  })), /*#__PURE__*/React.createElement("div", {
    className: styles.fsOptionsListContainer
  }, /*#__PURE__*/React.createElement("ul", {
    style: {
      display: 'none'
    },
    className: name + "UL fsOptionsList " + styles.fsOptionsList
  }, options)));
};

export default FinderSelect;
//# sourceMappingURL=index.modern.js.map