@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
113 lines (44 loc) • 4.41 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";import _slicedToArray from "@babel/runtime/helpers/slicedToArray";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n position: relative;\n\n .color-picker {\n &__row {\n display: flex;\n align-items: center;\n }\n\n &__item {\n display: inline-flex;\n width: 20px;\n height: 20px;\n\n border-radius: 4px;\n margin: 5px;\n\n cursor: pointer;\n\n box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);\n }\n }\n\n .ql-custom {\n &__dropdown {\n transition: opacity 0.5s ease-in-out;\n max-width: 220px;\n\n background: white;\n\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 1501;\n padding: 5px 5px;\n\n box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);\n\n border-radius: 4px;\n\n &.show {\n visibility: visible;\n opacity: 1;\n }\n\n &.hide {\n visibility: hidden;\n opacity: 0;\n }\n }\n\n &__btn {\n width: 118px !important;\n height: 48px !important;\n border-radius: 4px;\n background: #f0faff !important;\n\n font-size: 16px;\n font-weight: bold;\n font-stretch: normal;\n font-style: normal;\n line-height: 1.25;\n letter-spacing: normal;\n text-align: center;\n color: #1998d5 !important;\n\n margin: 0 0 0 16px;\n }\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import { Icon } from "../../../atoms";
import styled from "styled-components";
var FontBackgroundColor = function FontBackgroundColor() {return /*#__PURE__*/React.createElement(Icon, { name: "fill-drip" });};
var FontColor = function FontColor() {return /*#__PURE__*/React.createElement(Icon, { name: "font" });};
var CustomColorPickerWrapper = styled.div(_templateObject());
var ColorPicker = function ColorPicker(props) {var
tooltip = props.tooltip,colorList = props.colorList,columnCount = props.columnCount,icon = props.icon;var _React$useState =
React.useState(false),_React$useState2 = _slicedToArray(_React$useState, 2),isShowDropdown = _React$useState2[0],toggleDropdown = _React$useState2[1];
var contentBlock = null;
var handleClickOutside = function handleClickOutside(event) {
if (isShowDropdown &&
contentBlock &&
!contentBlock.contains(event.target)) {
toggleDropdown(false);
}
};
var selectColor = function selectColor(color) {
toggleDropdown(false);
props.onSelectColor(color);
};
window.addEventListener("click", handleClickOutside);
var rowCount = Math.ceil(colorList.length / columnCount);
return /*#__PURE__*/React.createElement(CustomColorPickerWrapper, { className: "ql-formats color-picker", ref: function ref(item) {
contentBlock = item;
} }, /*#__PURE__*/
React.createElement(Tooltip, { title: tooltip }, /*#__PURE__*/
React.createElement(IconButton, { disableRipple: true, className: "ql-formats ql-text-color", onClick: function onClick() {return toggleDropdown(!isShowDropdown);} },
icon === "font color" && /*#__PURE__*/React.createElement(FontColor, null),
icon === "font background color" && /*#__PURE__*/React.createElement(FontBackgroundColor, null))), /*#__PURE__*/
React.createElement("div", { className: "ql-custom__dropdown ".concat(isShowDropdown ? "show" : "hide") }, _toConsumableArray(Array(rowCount)).map(function (item, key) {return /*#__PURE__*/React.createElement("div", { key: key, className: "color-picker__row" }, colorList.
slice(key * columnCount, key * columnCount + columnCount).
map(function (_ref, index) {var color = _ref.color,label = _ref.label;return /*#__PURE__*/React.createElement("div", { key: label, className: "color-picker__item", style: { background: color }, onClick: function onClick() {return selectColor(color);} });}));})));
};
ColorPicker.defaultProps = {
colorList: [],
columnCount: 3,
onSelectColor: function onSelectColor(color) {return {};},
tooltip: "Color"
};
export default ColorPicker;
//# sourceMappingURL=colorPicker.js.map