react-email-builder
Version:
A simple React drag and drop email builder.
55 lines (54 loc) • 2.93 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.PageEditor = void 0;
const react_1 = __importDefault(require("react"));
const FormSection_1 = require("../../controls/FormSection");
const Field_1 = require("../../controls/Field");
const ColorPicker_1 = require("../../controls/ColorPicker");
const PaddingInput_1 = require("../../controls/PaddingInput");
const hooks_1 = require("../../hooks");
const SizeInput_1 = require("../../controls/SizeInput");
const utils_1 = require("../../utils");
const Select_1 = require("../../controls/Select");
function PageEditor() {
const state = (0, hooks_1.useEmailBuilderState)();
const setState = (0, hooks_1.useSetEmailBuilderState)();
const style = state.style || {};
const setStyle = (newStyle) => {
setState((prev) => ({
...prev,
style: {
...style,
...newStyle
}
}));
};
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("div", { style: { padding: 16 } }, "Page"),
react_1.default.createElement(FormSection_1.FormSection, { name: "Page attributes", defaultOpen: true },
react_1.default.createElement(Field_1.Field, { label: "Text color" },
react_1.default.createElement(ColorPicker_1.ColorPicker, { color: style.color, onChange: (color) => {
setStyle({ color });
} })),
react_1.default.createElement(Field_1.Field, { label: "Font size" },
react_1.default.createElement(SizeInput_1.SizeInput, { value: style.fontSize, defaultValue: 14, unit: "px", onChange: (fontSize) => {
setStyle({ fontSize });
} })),
react_1.default.createElement(Field_1.Field, { label: "Font family" },
react_1.default.createElement(Select_1.Select, { options: fontList, value: style.fontFamily, placeholder: "unset", clearable: true, onChange: (fontFamily) => {
setStyle({ fontFamily });
} })),
react_1.default.createElement(Field_1.Field, { label: "Background color" },
react_1.default.createElement(ColorPicker_1.ColorPicker, { color: style.bgColor, onChange: (bgColor) => {
setStyle({ bgColor });
} })),
react_1.default.createElement(PaddingInput_1.PaddingInput, { hideHorizontal: true, value: style.padding, onChange: (padding) => {
setStyle({ padding });
} }))));
}
exports.PageEditor = PageEditor;