react-email-builder
Version:
A simple React drag and drop email builder.
92 lines (91 loc) • 5.49 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ButtonBlockEditor = void 0;
const react_1 = __importDefault(require("react"));
const Field_1 = require("../../../controls/Field");
const TextInput_1 = require("../../../controls/TextInput");
const hooks_1 = require("../../../hooks");
const ColorPicker_1 = require("../../../controls/ColorPicker");
const SizeInput_1 = require("../../../controls/SizeInput");
const PaddingInput_1 = require("../../../controls/PaddingInput");
const Select_1 = require("../../../controls/Select");
const utils_1 = require("../../../utils");
function ButtonBlockEditor({ block }) {
const attrs = block.attrs;
const setAttrs = (0, hooks_1.useBlockAttrsEditor)(block);
const { fonts } = (0, hooks_1.useEmailBuilderConfig)();
const fontList = fonts || (0, utils_1.getDefaultFonts)();
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Field_1.Field, { label: "Text", vertical: true },
react_1.default.createElement(TextInput_1.TextInput, { value: attrs.text, onChange: (text) => {
setAttrs({ text });
} })),
react_1.default.createElement(Field_1.Field, { label: "URL", vertical: true },
react_1.default.createElement(TextInput_1.TextInput, { textarea: true, value: attrs.url, onChange: (url) => {
setAttrs({ url });
} })),
react_1.default.createElement(Field_1.Field, { label: "Text color" },
react_1.default.createElement(ColorPicker_1.ColorPicker, { color: attrs.color, hideClear: true, onChange: (color) => {
setAttrs({ color });
} })),
react_1.default.createElement(Field_1.Field, { label: "Background color" },
react_1.default.createElement(ColorPicker_1.ColorPicker, { color: attrs.bgColor, hideClear: true, onChange: (bgColor) => {
setAttrs({ bgColor });
} })),
react_1.default.createElement(Field_1.Field, { label: "Font size" },
react_1.default.createElement(SizeInput_1.SizeInput, { unit: "px", value: attrs.fontSize, min: 0, onChange: (fontSize) => {
setAttrs({ fontSize });
} })),
react_1.default.createElement(Field_1.Field, { label: "Font family" },
react_1.default.createElement(Select_1.Select, { options: fontList, value: attrs.fontFamily, onChange: (fontFamily) => {
setAttrs({ fontFamily });
} })),
react_1.default.createElement(Field_1.Field, { label: "Font weight" },
react_1.default.createElement(Select_1.Select, { options: [
{ value: 'normal', label: 'Normal' },
{ value: 'bold', label: 'Bold' }
], value: attrs.fontWeight, onChange: (fontWeight) => {
setAttrs({ fontWeight: fontWeight });
} })),
react_1.default.createElement(Field_1.Field, { label: "Alignment" },
react_1.default.createElement(Select_1.Select, { options: [
{ value: 'left', label: 'Left' },
{ value: 'right', label: 'Right' },
{ value: 'center', label: 'Center' }
], value: attrs.align, onChange: (align) => {
setAttrs({ align: align });
} })),
react_1.default.createElement(Field_1.Field, { label: "Width" },
react_1.default.createElement(Select_1.Select, { options: [
{ value: 'yes', label: 'Full' },
{ value: 'no', label: 'Auto' }
], value: attrs.block, onChange: (block) => {
setAttrs({ block: block });
} })),
react_1.default.createElement(Field_1.Field, { label: "Border radius" },
react_1.default.createElement(SizeInput_1.SizeInput, { unit: "px", value: attrs.borderRadius, min: 0, onChange: (borderRadius) => {
setAttrs({ borderRadius });
} })),
react_1.default.createElement(Field_1.Field, { label: "Line height" },
react_1.default.createElement(SizeInput_1.SizeInput, { unit: "%", value: attrs.lineHeight, min: 0, step: 10, onChange: (lineHeight) => {
setAttrs({ lineHeight });
} })),
react_1.default.createElement(Field_1.Field, { label: "Letter spacing" },
react_1.default.createElement(SizeInput_1.SizeInput, { unit: "px", value: attrs.letterSpacing, min: 0, onChange: (letterSpacing) => {
setAttrs({ letterSpacing });
} })),
react_1.default.createElement(PaddingInput_1.PaddingInput, { value: attrs.padding, onChange: (padding) => {
setAttrs({ padding });
} }),
react_1.default.createElement(Field_1.Field, { label: "Open in new tab" },
react_1.default.createElement(Select_1.Select, { options: [
{ value: '_blank', label: 'Yes' },
{ value: '_self', label: 'No' }
], value: attrs.target, onChange: (target) => {
setAttrs({ target: target });
} }))));
}
exports.ButtonBlockEditor = ButtonBlockEditor;