glide-design-system/dist/components/multi-select/SelectField.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

"use strict";

require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.string.includes.js");
var _react = _interopRequireWildcard(require("react"));
var _MultiSelectModule = _interopRequireDefault(require("./MultiSelect.module.css"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const SelectField = _ref => {
  let {
    options,
    setCheckedData,
    value,
    unslectedOptions,
    setUnselectedItems,
    checkedData,
    cancelOption,
    onChange,
    s
  } = _ref;
  const checkBoxRefs = (0, _react.useRef)([]);
  const selectAllRef = (0, _react.useRef)();
  const [hovered, setHovered] = (0, _react.useState)(null);
  const [code, setCode] = (0, _react.useState)("");
  const [checkedItems, setCheckedItems] = (0, _react.useState)();
  const [searchItems, setSearchItems] = (0, _react.useState)(null);
  const [state, setState] = (0, _react.useState)();
  const [filteredData, setFilterdData] = (0, _react.useState)(options);
  const addSelectAll = {
    value: "Select All",
    label: "Select All"
  };
  const selectFields = [addSelectAll, ...options];
  (0, _react.useEffect)(() => {
    if (unslectedOptions === "All") {
      setCheckedItems([]);
      setCheckedData([]);
      onChange([]);
    }
    const matchedOption = [];
    if (value && !unslectedOptions) {
      options === null || options === void 0 ? void 0 : options.forEach(option => {
        if (option !== null && option !== void 0 && option.value && value !== null && value !== void 0 && value.includes(option.value)) {
          matchedOption.push(option);
        }
      });
      setCheckedData(matchedOption);
      setCheckedItems(value);
    } else if (unslectedOptions !== "All") {
      const data = [];
      checkedData === null || checkedData === void 0 ? void 0 : checkedData.forEach(option => {
        if (option !== null && option !== void 0 && option.value && (option === null || option === void 0 ? void 0 : option.value) !== unslectedOptions) {
          matchedOption.push(option);
          setCheckedData(matchedOption);
        }
        checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.forEach(option => {
          if (option !== unslectedOptions && option !== (data === null || data === void 0 ? void 0 : data.includes(option))) {
            data.push(option);
          }
        });
      });
      setCheckedItems(data);
    } else if (unslectedOptions === "All") {
      setUnselectedItems('al');
      setCheckedItems([]);
      setCheckedData([]);
      // onChange("");
    }

    checkBoxRefs.current = Array(selectFields === null || selectFields === void 0 ? void 0 : selectFields.length).fill().map((_, i) => (checkBoxRefs === null || checkBoxRefs === void 0 ? void 0 : checkBoxRefs.current[i]) || /*#__PURE__*/_react.default.createRef());
  }, [selectFields === null || selectFields === void 0 ? void 0 : selectFields.length, options === null || options === void 0 ? void 0 : options.length, filteredData === null || filteredData === void 0 ? void 0 : filteredData.length, unslectedOptions]);
  const selectField = index => {
    var _checkBoxRefs$current;
    checkBoxRefs === null || checkBoxRefs === void 0 || (_checkBoxRefs$current = checkBoxRefs.current[index]) === null || _checkBoxRefs$current === void 0 || (_checkBoxRefs$current = _checkBoxRefs$current.current) === null || _checkBoxRefs$current === void 0 ? void 0 : _checkBoxRefs$current.click();
  };
  const onCheckboxChange = (event, option, lable) => {
    var _event$target;
    const isChecked = event === null || event === void 0 || (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.checked;
    let updatedItems;
    if (option === "Select All") {
      var _updatedItems;
      if (isChecked) {
        setCheckedData(filteredData === null || filteredData === void 0 ? void 0 : filteredData.map(option => option));
        updatedItems = filteredData === null || filteredData === void 0 ? void 0 : filteredData.map(option => option === null || option === void 0 ? void 0 : option.value);
        setCheckedItems(filteredData === null || filteredData === void 0 ? void 0 : filteredData.map(option => option === null || option === void 0 ? void 0 : option.value));
      } else {
        setCheckedItems([]);
        setCheckedData([]);
      }
      if ((_updatedItems = updatedItems) !== null && _updatedItems !== void 0 && _updatedItems.includes("Select All")) {
        // onChange(updatedItems?.slice(1));
      } else {
        // onChange(updatedItems);
      }
    } else {
      setCheckedData(prevItems => {
        var _updatedItems2;
        if (isChecked) {
          updatedItems = [...prevItems, lable];
        } else {
          updatedItems = prevItems === null || prevItems === void 0 ? void 0 : prevItems.filter(item => (item === null || item === void 0 ? void 0 : item.value) !== (lable === null || lable === void 0 ? void 0 : lable.value));
        }
        if (updatedItems.includes("Select All")) {}
        const allItemsChecked = filteredData.every(item => updatedItems.includes(item.value));
        if (allItemsChecked) {} else {
          updatedItems = updatedItems.filter(item => item !== "Select All");
        }
        if ((_updatedItems2 = updatedItems) !== null && _updatedItems2 !== void 0 && _updatedItems2.includes("Select All")) {
          // onChange(updatedItems?.slice(1));
        } else {
          // onChange(updatedItems);
        }
        return updatedItems;
      });
      setCheckedItems(prevItems => {
        var _updatedItems3;
        if (isChecked) {
          updatedItems = [...prevItems, option];
        } else {
          updatedItems = prevItems === null || prevItems === void 0 ? void 0 : prevItems.filter(item => item !== option);
        }
        if (updatedItems.includes("Select All")) {}
        const allItemsChecked = filteredData.every(item => updatedItems.includes(item.value));
        if (allItemsChecked) {} else {
          updatedItems = updatedItems.filter(item => item !== "Select All");
        }
        if ((_updatedItems3 = updatedItems) !== null && _updatedItems3 !== void 0 && _updatedItems3.includes("Select All")) {
          // onChange(updatedItems?.slice(1));
        } else {
          // onChange(updatedItems);
        }
        return updatedItems;
      });
    }
  };
  const searchItemsHandler = (e, options) => {
    var _e$target, _e$target2;
    setSearchItems(e === null || e === void 0 || (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
    let filteredOptions;
    const searchLower = e === null || e === void 0 || (_e$target2 = e.target) === null || _e$target2 === void 0 || (_e$target2 = _e$target2.value) === null || _e$target2 === void 0 ? void 0 : _e$target2.toLowerCase();
    filteredOptions = options === null || options === void 0 ? void 0 : options.filter(option => {
      var _option$label;
      return option === null || option === void 0 || (_option$label = option.label) === null || _option$label === void 0 || (_option$label = _option$label.toLowerCase()) === null || _option$label === void 0 ? void 0 : _option$label.includes(searchLower);
    });
    setFilterdData(filteredOptions);
    return filteredOptions;
  };

  //   function containsOptions(options, searchItems) {

  //     if (!searchItems) {
  //       return options;
  //     }
  //     const searchLower = searchItems?.toLowerCase();
  //     const filteredOptions = options?.filter((option) => {
  //       return option?.label?.toLowerCase()?.includes(searchLower);
  //     });
  //     setFilterdData(filteredOptions)
  //     return filteredOptions;
  //   }

  const selectAllHandler = () => {
    selectAllRef === null || selectAllRef === void 0 ? void 0 : selectAllRef.current.click();
  };
  (0, _react.useEffect)(() => {
    setFilterdData(options);
  }, [options]);
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      borderBottom: "1px solid #D7D7D7"
    }
  }, /*#__PURE__*/_react.default.createElement("input", {
    style: {
      marginLeft: "10px",
      border: "none",
      outline: "none",
      width: "auto",
      minHeight: "30px",
      alignSelf: "center"
    },
    placeholder: "Search...",
    onFocus: e => e.target.style.border = "none",
    onBlur: e => e.target.style.borderBottom = "none",
    type: "text",
    onChange: e => {
      searchItemsHandler(e, options);
    },
    value: searchItems
  })), (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) !== 0 && !searchItems && /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: "flex",
      gap: "4px",
      alignItems: "center",
      cursor: "pointer"
      // Add transition for smooth effect
    },

    onMouseEnter: e => e.target.style.backgroundColor = "#F3F3F3" // Change background color on hover
    ,
    onMouseLeave: e => e.target.style.backgroundColor = "transparent" // Revert back to initial color on mouse leave
  }, /*#__PURE__*/_react.default.createElement("input", {
    value: "Select All",
    ref: selectAllRef,
    style: {
      marginLeft: "10px"
    },
    type: "checkbox",
    onChange: e => {
      onCheckboxChange(e, "Select All");
    },
    checked: (checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.length) === (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length)
  }), /*#__PURE__*/_react.default.createElement("div", {
    onClick: selectAllHandler,
    style: {
      marginTop: "3px",
      width: "100%"
    }
  }, "Select All")), (filteredData === null || filteredData === void 0 ? void 0 : filteredData.length) !== 0 ? filteredData === null || filteredData === void 0 ? void 0 : filteredData.map((option, index) => {
    return /*#__PURE__*/_react.default.createElement("div", {
      key: index,
      value: option.code
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "".concat(_MultiSelectModule.default.countryCodeContainer, " ").concat(hovered === index ? _MultiSelectModule.default.optionColorHover : _MultiSelectModule.default.optionColorNotHover, " "),
      onMouseEnter: () => setHovered(index),
      onMouseLeave: () => setHovered(null)
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: "100%",
        display: "flex",
        alignContent: "center",
        cursor: "pointer",
        transition: "ease-in-out"
      },
      className: (option === null || option === void 0 ? void 0 : option.value) === code ? _MultiSelectModule.default.optionsListSelected : _MultiSelectModule.default.optionsListUnselected
    }, /*#__PURE__*/_react.default.createElement("input", {
      ref: checkBoxRefs === null || checkBoxRefs === void 0 ? void 0 : checkBoxRefs.current[index],
      type: "checkbox",
      id: option === null || option === void 0 ? void 0 : option.id
      //   name={name}
      ,
      value: option === null || option === void 0 ? void 0 : option.value
      // checked={
      //   checkedItems?.includes(option?.value) &&
      //   option?.value !== unslectedOptions
      // }
      ,
      checked: checkedItems === null || checkedItems === void 0 ? void 0 : checkedItems.includes(option === null || option === void 0 ? void 0 : option.value),
      onChange: e => {
        onCheckboxChange(e, option === null || option === void 0 ? void 0 : option.value, option);
      }
    }), /*#__PURE__*/_react.default.createElement("div", {
      style: {
        width: "100%",
        margin: "4px"
      },
      onClick: () => {
        selectField(index);
      },
      htmlFor: option === null || option === void 0 ? void 0 : option.value
    }, option === null || option === void 0 ? void 0 : option.label))));
  }) : /*#__PURE__*/_react.default.createElement("div", {
    style: {
      textAlign: "center",
      paddingTop: "8px",
      paddingBottom: "8px",
      color: "black"
    }
  }, "No options"));
};
var _default = SelectField;
exports.default = _default;