react-email-builder
Version:
A simple React drag and drop email builder.
156 lines (155 loc) • 6.06 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColorPalette = void 0;
const clsx_1 = __importDefault(require("clsx"));
const react_1 = __importStar(require("react"));
const react_colorful_1 = require("react-colorful");
const preset_1 = require("./preset");
const utils_1 = require("../../utils");
function ColorPalette({ color: propColor, onChange, onSelect }) {
const css = useCss();
const color = (propColor || '#000000').toUpperCase();
return (react_1.default.createElement("div", { className: css.root },
react_1.default.createElement("div", { className: css.colors }, (0, preset_1.getPresetColors)().map((val) => (react_1.default.createElement("div", { key: val, className: (0, clsx_1.default)(css.color, {
[css.active]: val === color
}), onClick: () => {
onChange(val);
onSelect?.();
} },
react_1.default.createElement("div", { style: { backgroundColor: val } }))))),
react_1.default.createElement(Input, { color: color, onChange: onChange }),
react_1.default.createElement(react_colorful_1.HexColorPicker, { color: color, onChange: onChange, style: { width: '100%', height: 150 } })));
}
exports.ColorPalette = ColorPalette;
function useCss() {
return (0, utils_1.getCss)('ColorPalette', (ns) => ({
root: ns(),
colors: ns('colors'),
color: ns('color'),
active: ns('active'),
form: ns('form'),
mode: ns('mode'),
input: ns('input'),
selected: ns('selected'),
preview: ns('preview')
}));
}
function Input({ color, onChange }) {
const [mode, setMode] = (0, react_1.useState)('hex');
const [focused, setFocused] = (0, react_1.useState)(false);
const [input, setInput] = (0, react_1.useState)('');
const css = useCss();
(0, react_1.useEffect)(() => {
if (!focused) {
if (color) {
setInput(mode === 'hex' ? color.toUpperCase() : hex2rgb(color));
}
else {
setInput('');
}
}
}, [mode, focused, color]);
return (react_1.default.createElement("div", { className: css.form },
react_1.default.createElement("div", { className: css.mode },
react_1.default.createElement("div", { className: mode === 'hex' ? css.selected : '', onClick: () => {
setMode('hex');
} }, "HEX"),
react_1.default.createElement("div", { className: mode === 'rgb' ? css.selected : '', onClick: () => {
setMode('rgb');
} }, "RGB")),
react_1.default.createElement("div", { className: css.input },
react_1.default.createElement("input", { placeholder: "\u8BF7\u8F93\u5165", value: input, onFocus: () => {
setFocused(true);
}, onBlur: () => {
setFocused(false);
}, onChange: (e) => {
const value = e.target.value;
const newColor = parseColor(value);
setInput(value);
if (newColor) {
onChange(newColor);
}
} })),
react_1.default.createElement("div", { className: css.preview },
react_1.default.createElement("div", { style: { backgroundColor: color } }))));
}
function parseColor(color) {
const val = color
.trim()
.replace(/rgba?/i, '')
.replace(/[^0-9a-fA-F,.\s%]/g, '');
const arr = val.split(/[\s,]+/);
let result;
if (arr.length > 1 || val.includes('%')) {
const hex = (s) => {
let n = 0;
if (s) {
if (s.endsWith('%')) {
n = Math.round(((+s.slice(0, -1) || 0) * 255) / 100);
}
else {
n = Math.round(+s || 0);
}
}
if (n < 0) {
n = 0;
}
if (n > 255) {
n = 255;
}
const h = n.toString(16);
return h.length < 2 ? '0' + h : h;
};
result = '#' + hex(arr[0]) + hex(arr[1]) + hex(arr[2]);
}
else {
if (val.length === 3) {
const [r, g, b] = val.split('');
result = '#' + r + r + g + g + b + b;
}
else if (val.length === 6) {
result = '#' + val;
}
}
return result?.toUpperCase();
}
function hex2rgb(color) {
const hex = parseColor(color);
if (hex) {
const num = (s) => parseInt(s, 16) || 0;
return ('rgb(' +
num(hex.slice(1, 3)) +
', ' +
num(hex.slice(3, 5)) +
', ' +
num(hex.slice(5)) +
')');
}
return 'rgb(0, 0, 0)';
}