@shakthillc/components/es/AttributePicker/AttributePicker.js

React generic components for shakthi products

import _Object$assign from "babel-runtime/core-js/object/assign";
import _slicedToArray from "babel-runtime/helpers/slicedToArray";
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";
var AttributePicker = function AttributePicker(_ref) {
  var isPopupOpen = _ref.isPopupOpen,
      togglePopup = _ref.togglePopup,
      removeClose = _ref.removeClose,
      _ref$options = _ref.options,
      options = _ref$options === undefined ? [] : _ref$options,
      onChange = _ref.onChange,
      _ref$iconColor = _ref.iconColor,
      iconColor = _ref$iconColor === undefined ? "#005397" : _ref$iconColor,
      inlineStyle = _ref.style;

  var _useState = useState([]),
      _useState2 = _slicedToArray(_useState, 2),
      userOptions = _useState2[0],
      setOptions = _useState2[1];

  var isFirstRun = useRef(true);
  useEffect(function () {
    if (isFirstRun.current) {
      isFirstRun.current = false;
    } else {
      !isPopupOpen && handleChange();
    }
  }, [isPopupOpen]);
  var handleChange = function handleChange(data) {
    if (userOptions.length === 0) {
      var filterData = [];
      options.map(function (obj) {
        obj.flag && filterData.push(obj.value);
      });
      onChange(filterData);
    } else {
      onChange(userOptions);
    }
  };
  return React.createElement(
    "div",
    { className: style.containerr },
    React.createElement(
      "div",
      { className: style.button, onClick: togglePopup, style: inlineStyle },
      isPopupOpen ? React.createElement(
        "span",
        { className: style.spantext },
        "Save"
      ) : React.createElement(
        Icon,
        {
          style: { color: iconColor, fontSize: 32, verticalAlign: "middle" }
        },
        "view_column"
      ),
      React.createElement(
        Icon,
        {
          style: { color: iconColor, fontSize: 20, verticalAlign: "middle" }
        },
        "arrow_drop_down"
      )
    ),
    isPopupOpen ? React.createElement(
      "div",
      { className: style.list, onClick: removeClose },
      React.createElement(CheckBoxGroup, {
        options: options,
        onChange: function onChange(data) {
          setOptions(_Object$assign([], data));
        }
      })
    ) : null
  );
};

export default Popup(AttributePicker);