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

Wulper Studio Library Components CMS

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/* eslint-disable no-unused-vars */
import React from 'react';
import { SketchPicker } from 'react-color';
import { Box, Popover } from '@mui/material';
import { InputBox } from '../InputBox';
import { InputLabel, WrapperInputVariant } from '../../base';
import { Cover, InputBoxColorShow, WrapperBody } from './styled';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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.useState(colorDefault || '#000'),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    valueInputColor = _React$useState2[0],
    setValueInputColor = _React$useState2[1];
  var _React$useState3 = React.useState(null),
    _React$useState4 = _slicedToArray(_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__*/_jsxs(Box, Object.assign({}, RootProps, {
    children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, Object.assign({
      variant: variant
    }, labelProps, {
      children: label
    })), /*#__PURE__*/_jsxs(WrapperInputVariant, {
      variant: variant || 'divider',
      size: "auto",
      backgroundColor: backgroundColor,
      children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, Object.assign({
        variant: variant || 'divider'
      }, labelProps, {
        children: label
      })), /*#__PURE__*/_jsxs(WrapperBody, Object.assign({}, bodyProps, {
        children: [/*#__PURE__*/_jsx(InputBox, {
          active: active,
          size: size,
          onClick: function onClick(e) {
            return setAnchorEl(e.currentTarget);
          },
          borderColor: borderColor,
          children: /*#__PURE__*/_jsx(InputBoxColorShow, {
            sx: {
              backgroundColor: colorDefault
            }
          })
        }), anchorEl && /*#__PURE__*/_jsxs(Popover, {
          open: open,
          anchorEl: anchorEl,
          onClose: handleClose,
          anchorOrigin: {
            vertical: 'center',
            horizontal: 'right'
          },
          transformOrigin: {
            vertical: 'top',
            horizontal: 'left'
          },
          children: [/*#__PURE__*/_jsx(Cover, {
            onClick: function onClick(event) {
              event.stopPropagation();
              handleClose();
              colorSelected(valueInputColor);
            }
          }), /*#__PURE__*/_jsx(SketchPicker, {
            color: valueInputColor,
            onChange: function onChange(col, event) {
              event.stopPropagation();
              setValueInputColor(col.hex);
              colorSelected(col.hex);
            }
          })]
        })]
      }))]
    })]
  }));
};
export default InputBoxColor;