@wulperstudio/cms
Version:
Wulper Studio Library Components CMS
93 lines • 3.38 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
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, _extends({}, RootProps, {
children: [variant === 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, _extends({
variant: variant
}, labelProps, {
children: label
})), /*#__PURE__*/_jsxs(WrapperInputVariant, {
variant: variant || 'divider',
size: "auto",
backgroundColor: backgroundColor,
children: [variant !== 'labelOut' && label && /*#__PURE__*/_jsx(InputLabel, _extends({
variant: variant || 'divider'
}, labelProps, {
children: label
})), /*#__PURE__*/_jsxs(WrapperBody, _extends({}, 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;