@makeen.io/material-ui-kit
Version:
Makeen UI components kit. Based on material-ui.
130 lines (57 loc) • 6.37 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject11() {var data = _taggedTemplateLiteral(["\n width: 140px;\n justify-content: flex-start;\n"]);_templateObject11 = function _templateObject11() {return data;};return data;}function _templateObject10() {var data = _taggedTemplateLiteral(["\n width: 25px;\n height: 25px;\n border-radius: 4px;\n border: 1px solid rgba(0, 0, 0, 0.3);\n background: ", ";\n"]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = _taggedTemplateLiteral(["\n top: 0;\n left: 50%;\n clip-path: polygon(50% 0, 0 100%, 100% 100%);\n transform: translateY(-100%) translateX(-50%);\n "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = _taggedTemplateLiteral(["\n width: 10px;\n height: 25px;\n top: 50%;\n right: 100%;\n clip-path: polygon(0 50%, 100% 0, 100% 100%);\n transform: translateY(-50%) translateX(0);\n "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = _taggedTemplateLiteral(["\n width: 10px;\n height: 25px;\n top: 50%;\n left: 100%;\n clip-path: polygon(100% 50%, 0 0, 0 100%);\n transform: translateY(-50%) translateX(0);\n "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = _taggedTemplateLiteral(["\n bottom: 0;\n left: 50%;\n clip-path: polygon(50% 100%, 0 0, 100% 0);\n transform: translateY(100%) translateX(-50%);\n "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteral(["\n top: calc(100% + 10px);\n left: 50%;\n transform: translateX(-50%);\n "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteral(["\n top: 50%;\n left: calc(100% + 10px);\n transform: translateY(-50%);\n "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteral(["\n top: 50%;\n right: calc(100% + 10px);\n transform: translateY(-50%);\n "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteral(["\n bottom: calc(100% + 10px);\n left: 50%;\n transform: translateX(-50%);\n "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteral(["\n position: absolute;\n display: inline-block;\n background: white;\n border-radius: 5px;\n box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.27);\n z-index: 1000;\n width: 220px;\n\n filter: drop-shadow(0px -2px 2px rgba(0, 0, 0, 0.27));\n\n input {\n border-radius: 4px;\n }\n\n ", "\n &:after {\n position: absolute;\n content: \"\";\n width: 25px;\n height: 10px;\n background-color: white;\n\n ", "\n }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import { Button, RawColorPicker, Toggle } from "../../atoms";
import styled, { css } from "styled-components";
export var positions;
(function (positions) {
positions["top"] = "top";
positions["bottom"] = "bottom";
positions["left"] = "left";
positions["right"] = "right";
})(positions || (positions = {}));
var PickerWrapper = styled.div(_templateObject(),
function (_ref) {var position = _ref.position;
switch (position) {
case positions.top:
return css(_templateObject2());
case positions.left:
return css(_templateObject3());
case positions.right:
return css(_templateObject4());
default:
return css(_templateObject5());}
},
function (_ref2) {var position = _ref2.position;
switch (position) {
case positions.top:
return css(_templateObject6());
case positions.left:
return css(_templateObject7());
case positions.right:
return css(_templateObject8());
default:
return css(_templateObject9());}
});
var Swatch = styled.div(_templateObject10(),
function (_ref3) {var selectedColor = _ref3.selectedColor;return selectedColor;});
var ButtonWrapper = styled(Button)(_templateObject11());
export default (function (_ref4) {var children = _ref4.children,color = _ref4.color,_ref4$defaultColor = _ref4.defaultColor,defaultColor = _ref4$defaultColor === void 0 ? "azure" : _ref4$defaultColor,_ref4$position = _ref4.position,position = _ref4$position === void 0 ? positions.bottom : _ref4$position,props = _objectWithoutProperties(_ref4, ["children", "color", "defaultColor", "position"]);
var colorVar = color !== null && color !== void 0 ? color : defaultColor;
return /*#__PURE__*/React.createElement(Toggle, null, /*#__PURE__*/
React.createElement("div", { style: {
position: "relative",
display: "inline-block"
} }, /*#__PURE__*/
React.createElement(Toggle.Button, null, /*#__PURE__*/
React.createElement(ButtonWrapper
// variant="outlined"
, {
// variant="outlined"
buttonTheme: "outline", palette: "primary", removeSideMargin: true, size: "large", startIcon: /*#__PURE__*/React.createElement(Swatch, { selectedColor: color !== null && color !== void 0 ? color : defaultColor }) }, colorVar.includes("#") ?
colorVar.substring(1).toUpperCase() :
colorVar)), /*#__PURE__*/
React.createElement(Toggle.Content, null, /*#__PURE__*/
React.createElement(PickerWrapper, { position: position },
children, /*#__PURE__*/
React.createElement(RawColorPicker, _extends({}, props, { color: color !== null && color !== void 0 ? color : defaultColor }))))));
});
//# sourceMappingURL=index.js.map