@shakthillc/components/lib/AttributePicker/AttributePicker.js

React generic components for shakthi products

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _AttributePickerModule = require("./AttributePicker.module.css");

var _AttributePickerModule2 = _interopRequireDefault(_AttributePickerModule);

var _Popup = require("./../Popup/Popup");

var _Popup2 = _interopRequireDefault(_Popup);

var _CheckBoxGroup = require("../CheckBoxGroup/CheckBoxGroup");

var _CheckBoxGroup2 = _interopRequireDefault(_CheckBoxGroup);

var _Icon = require("@material-ui/core/Icon");

var _Icon2 = _interopRequireDefault(_Icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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 = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      userOptions = _useState2[0],
      setOptions = _useState2[1];

  var isFirstRun = (0, _react.useRef)(true);
  (0, _react.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 _react2.default.createElement(
    "div",
    { className: _AttributePickerModule2.default.containerr },
    _react2.default.createElement(
      "div",
      { className: _AttributePickerModule2.default.button, onClick: togglePopup, style: inlineStyle },
      isPopupOpen ? _react2.default.createElement(
        "span",
        { className: _AttributePickerModule2.default.spantext },
        "Save"
      ) : _react2.default.createElement(
        _Icon2.default,
        {
          style: { color: iconColor, fontSize: 32, verticalAlign: "middle" }
        },
        "view_column"
      ),
      _react2.default.createElement(
        _Icon2.default,
        {
          style: { color: iconColor, fontSize: 20, verticalAlign: "middle" }
        },
        "arrow_drop_down"
      )
    ),
    isPopupOpen ? _react2.default.createElement(
      "div",
      { className: _AttributePickerModule2.default.list, onClick: removeClose },
      _react2.default.createElement(_CheckBoxGroup2.default, {
        options: options,
        onChange: function onChange(data) {
          setOptions(Object.assign([], data));
        }
      })
    ) : null
  );
};

exports.default = (0, _Popup2.default)(AttributePicker);