@makeen.io/material-ui-kit/distr/atoms/RawColorPicker/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject3() {var data = _taggedTemplateLiteral(["\n  margin: 10px;\n"]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n  padding: 10px 10px 16px 10px;\n  border-bottom: 1px solid\n    ", ";\n\n  span.title {\n    display: inline-block;\n    margin-bottom: 5px;\n    color: ", ";\n  }\n\n  .colors {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, 18px);\n    grid-auto-rows: 18px;\n    gap: 8px;\n  }\n\n  .swatch {\n    border-radius: 4px;\n    border: 1px solid rgba(0, 0, 0, 0.3);\n  }\n"]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n  position: relative;\n  display: ", ";\n  background: white;\n  border-radius: 5px;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import IconButton from "@material-ui/core/IconButton";
import AddIcon from "@material-ui/icons/Add";
import { Button } from "./..";
import { SketchPicker } from "react-color";
import styled from "styled-components";
var PickerWrapper = styled.div(_templateObject(),

function (_ref) {var expanded = _ref.expanded;return expanded ? "inline-block" : "none";});






var PaletteWrapper = styled.div(_templateObject2(),


function (_ref2) {var theme = _ref2.theme;return theme.palette.RawColorPicker.borderColor;},




function (_ref3) {var theme = _ref3.theme;return theme.palette.RawColorPicker.titleColor;});














var SaveColorButtonWrapper = styled.div(_templateObject3());


var Palette = function Palette(_ref4) {var _ref4$colors = _ref4.colors,colors = _ref4$colors === void 0 ? [] : _ref4$colors,onExpand = _ref4.onExpand,onSelect = _ref4.onSelect,title = _ref4.title;
  return /*#__PURE__*/React.createElement(PaletteWrapper, null,
  title ? /*#__PURE__*/React.createElement("span", { className: "title" }, title) : null, /*#__PURE__*/
  React.createElement("div", { className: "colors" },
  colors.map(function (background, i) {return /*#__PURE__*/React.createElement("div", { className: "swatch", key: background + i, style: { background: background }, onClick: function onClick() {return onSelect(background);} });}),
  onExpand && /*#__PURE__*/React.createElement(IconButton, { onClick: onExpand, size: "small" }, /*#__PURE__*/
  React.createElement(AddIcon, { fontSize: "inherit" }))));
};
var RawColorPicker = function RawColorPicker(_ref5) {var children = _ref5.children,color = _ref5.color,_ref5$defaultColor = _ref5.defaultColor,defaultColor = _ref5$defaultColor === void 0 ? "azure" : _ref5$defaultColor,onAdd = _ref5.onAdd,expanded = _ref5.expanded,props = _objectWithoutProperties(_ref5, ["children", "color", "defaultColor", "onAdd", "expanded"]);
  return /*#__PURE__*/React.createElement(PickerWrapper, { expanded: expanded }, /*#__PURE__*/
  React.createElement(SketchPicker, _extends({}, props, { color: color !== null && color !== void 0 ? color : defaultColor, styles: {
      default: {
        picker: {
          background: "none",
          borderBottomLeftRadius: 0,
          borderBottomRightRadius: 0,
          boxShadow: "none"
        }
      }
    }, presetColors: [] })),
  children,
  onAdd && /*#__PURE__*/React.createElement(SaveColorButtonWrapper, null, /*#__PURE__*/
  React.createElement(Button, { buttonTheme: "main", fullWidth: true, onClick: onAdd, palette: "primary", removeSideMargin: true, size: "small" }, "Save color")));
};
RawColorPicker.Palette = Palette;
export default RawColorPicker;
//# sourceMappingURL=index.js.map