@shakthillc/components/src/AttributePicker/AttributePicker.js

React generic components for shakthi products

import React, { useEffect, useState, useRef } from "react";
import style from "./AttributePicker.module.css";
import Popup from "./../Popup/Popup";
import CheckBoxGroup from "../CheckBoxGroup/CheckBoxGroup";
import Icon from "@material-ui/core/Icon";
const AttributePicker = ({
  isPopupOpen,
  togglePopup,
  removeClose,
  options = [],
  onChange,
  iconColor = "#005397",
  style: inlineStyle,
}) => {
  const [userOptions, setOptions] = useState([]);
  const isFirstRun = useRef(true);
  useEffect(() => {
    if (isFirstRun.current) {
      isFirstRun.current = false;
    } else {
      !isPopupOpen && handleChange();
    }
  }, [isPopupOpen]);
  const handleChange = (data) => {
    if (userOptions.length === 0) {
      let filterData = [];
      options.map((obj) => {
        obj.flag && filterData.push(obj.value);
      });
      onChange(filterData);
    } else {
      onChange(userOptions);
    }
  };
  return (
    <div className={style.containerr}>
      <div className={style.button} onClick={togglePopup} style={inlineStyle}>
        {isPopupOpen ? (
          <span className={style.spantext}>Save</span>
        ) : (
          <Icon
            style={{ color: iconColor, fontSize: 32, verticalAlign: "middle" }}
          >
            view_column
          </Icon>
        )}
        <Icon
          style={{ color: iconColor, fontSize: 20, verticalAlign: "middle" }}
        >
          arrow_drop_down
        </Icon>
      </div>
      {isPopupOpen ? (
        <div className={style.list} onClick={removeClose}>
          <CheckBoxGroup
            options={options}
            onChange={(data) => {
              setOptions(Object.assign([], data));
            }}
          />
        </div>
      ) : null}
    </div>
  );
};

export default Popup(AttributePicker);