react-email-builder
Version:
A simple React drag and drop email builder.
121 lines (120 loc) • 6.23 kB
JavaScript
"use strict";
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BlockEditor = void 0;
const react_1 = __importStar(require("react"));
const hooks_1 = require("../../hooks");
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 Button_1 = require("../../controls/Button");
const Select_1 = require("../../controls/Select");
function BlockEditor() {
const { block, column, columns } = (0, hooks_1.useSelectedBlock)();
const config = (0, hooks_1.useEmailBuilderConfig)();
const type = block?.type;
const blockConfig = (0, react_1.useMemo)(() => {
return config.blocks.find((b) => b.type === type);
}, [config, type]);
if (block) {
return (react_1.default.createElement(Editor, { key: block.id, block: block, blockConfig: blockConfig, column: column, columns: columns }));
}
return null;
}
exports.BlockEditor = BlockEditor;
function Editor({ block, blockConfig, column, columns }) {
const EditorComponent = blockConfig?.editorComponent;
const isPlaceholder = block.type === 'placeholder';
const setState = (0, hooks_1.useSetEmailBuilderState)();
const setBlock = (0, hooks_1.useBlockEditor)(block.id);
const style = block.style || {};
const setStyle = (newStyle) => {
setBlock((prev) => ({
...prev,
style: {
...prev.style,
...newStyle
}
}));
};
return (react_1.default.createElement("div", { style: { paddingBottom: 64 } },
react_1.default.createElement("div", { style: { padding: 16 } }, blockConfig ? blockConfig.name : 'No content'),
EditorComponent ? (react_1.default.createElement(FormSection_1.FormSection, { name: "Attributes", defaultOpen: true },
react_1.default.createElement(EditorComponent, { block: block }))) : null,
isPlaceholder ? null : (react_1.default.createElement(FormSection_1.FormSection, { name: "Block attributes", defaultOpen: true },
block.type !== 'columns' ? (react_1.default.createElement(Field_1.Field, { label: "Background color" },
react_1.default.createElement(ColorPicker_1.ColorPicker, { color: style.bgColor, onChange: (bgColor) => {
setStyle({ bgColor });
} }))) : null,
react_1.default.createElement(PaddingInput_1.PaddingInput, { value: style.padding, onChange: (padding) => {
setStyle({ padding });
} }))),
isPlaceholder || columns || column ? null : (react_1.default.createElement(FormSection_1.FormSection, { name: "Section attributes", defaultOpen: true },
react_1.default.createElement(Field_1.Field, { label: "Background color" },
react_1.default.createElement(ColorPicker_1.ColorPicker, { color: style.sectionBgColor, onChange: (sectionBgColor) => {
setStyle({ sectionBgColor });
} })),
react_1.default.createElement(Field_1.Field, { label: "Fill parent width" },
react_1.default.createElement(Select_1.Select, { value: style.full || 'yes', options: [
{ value: 'yes', label: 'Yes' },
{ value: 'no', label: 'No' }
], onChange: (full) => {
setStyle({ full: full === 'no' ? 'no' : undefined });
} })))),
columns && column ? (react_1.default.createElement(ColumnEditor, { column: column, columns: columns })) : null,
columns ? (react_1.default.createElement(FormSection_1.FormSection, { name: "Columns attributes", defaultOpen: true },
react_1.default.createElement(Button_1.Button, { onClick: () => {
setState((prev) => ({
...prev,
selectedId: columns.id
}));
} }, "Edit columns"))) : null));
}
function ColumnEditor({ column, columns }) {
const setAttrs = (0, hooks_1.useBlockAttrsEditor)(columns);
const setColumnAttrs = (attrs) => {
setAttrs({
columns: columns.attrs.columns.map((col) => col.id === column.id
? {
...col,
attrs: {
...col.attrs,
...attrs
}
}
: col)
});
};
const attrs = column.attrs || {};
return (react_1.default.createElement(FormSection_1.FormSection, { name: "Column attributes", defaultOpen: true },
react_1.default.createElement(Field_1.Field, { label: "Background color" },
react_1.default.createElement(ColorPicker_1.ColorPicker, { color: attrs.bgColor, onChange: (bgColor) => {
setColumnAttrs({ bgColor });
} })),
react_1.default.createElement(PaddingInput_1.PaddingInput, { value: attrs.padding, onChange: (padding) => {
setColumnAttrs({ padding });
} })));
}