@wulperstudio/cms/node/components/InputBoxColor/InputBoxColor.js

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireDefault(require("react"));
var _reactColor = require("react-color");
var _material = require("@mui/material");
var _InputBox = require("../InputBox");
var _base = require("../../base");
var _styled = require("./styled");
var _jsxRuntime = require("react/jsx-runtime");
/* eslint-disable no-unused-vars */

var InputBoxColor = function InputBoxColor(_ref) {
  var active = _ref.active,
    colorDefault = _ref.colorDefault,
    colorSelected = _ref.colorSelected,
    size = _ref.size,
    RootProps = _ref.RootProps,
    variant = _ref.variant,
    label = _ref.label,
    backgroundColor = _ref.backgroundColor,
    borderColor = _ref.borderColor,
    bodyProps = _ref.bodyProps,
    labelProps = _ref.labelProps;
  var _React$useState = _react["default"].useState(colorDefault || '#000'),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    valueInputColor = _React$useState2[0],
    setValueInputColor = _React$useState2[1];
  var _React$useState3 = _react["default"].useState(null),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    anchorEl = _React$useState4[0],
    setAnchorEl = _React$useState4[1];
  var open = Boolean(anchorEl);
  var handleClose = function handleClose() {
    setAnchorEl(null);
    colorSelected(valueInputColor);
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, Object.assign({}, RootProps, {
    children: [variant === 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, Object.assign({
      variant: variant
    }, labelProps, {
      children: label
    })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_base.WrapperInputVariant, {
      variant: variant || 'divider',
      size: "auto",
      backgroundColor: backgroundColor,
      children: [variant !== 'labelOut' && label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.InputLabel, Object.assign({
        variant: variant || 'divider'
      }, labelProps, {
        children: label
      })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styled.WrapperBody, Object.assign({}, bodyProps, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBox.InputBox, {
          active: active,
          size: size,
          onClick: function onClick(e) {
            return setAnchorEl(e.currentTarget);
          },
          borderColor: borderColor,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.InputBoxColorShow, {
            sx: {
              backgroundColor: colorDefault
            }
          })
        }), anchorEl && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Popover, {
          open: open,
          anchorEl: anchorEl,
          onClose: handleClose,
          anchorOrigin: {
            vertical: 'center',
            horizontal: 'right'
          },
          transformOrigin: {
            vertical: 'top',
            horizontal: 'left'
          },
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styled.Cover, {
            onClick: function onClick(event) {
              event.stopPropagation();
              handleClose();
              colorSelected(valueInputColor);
            }
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactColor.SketchPicker, {
            color: valueInputColor,
            onChange: function onChange(col, event) {
              event.stopPropagation();
              setValueInputColor(col.hex);
              colorSelected(col.hex);
            }
          })]
        })]
      }))]
    })]
  }));
};
var _default = exports["default"] = InputBoxColor;