react-email-builder
Version:
A simple React drag and drop email builder.
93 lines (92 loc) • 4.11 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.Sidebar = void 0;
const clsx_1 = __importDefault(require("clsx"));
const react_1 = __importStar(require("react"));
const utils_1 = require("../../utils");
const BlockIcons_1 = require("../BlockIcons");
const hooks_1 = require("../../hooks");
const BlockEditor_1 = require("../BlockEditor");
const PageEditor_1 = require("../PageEditor");
function Sidebar({ right }) {
const css = (0, utils_1.getCss)('Sidebar', (ns) => ({
left: (0, clsx_1.default)(ns(), ns('left')),
right: (0, clsx_1.default)(ns(), ns('right')),
header: ns('header'),
body: ns('body'),
tabs: ns('tabs'),
tab: ns('tab'),
active: ns('tab-active')
}));
const setState = (0, hooks_1.useSetEmailBuilderState)();
const tab = (0, hooks_1.useEmailBuilderState)().tab || 'blocks';
const tabs = [
{ key: 'blocks', label: 'Blocks' },
{ key: 'settings', label: 'Settings' },
{ key: 'page', label: 'Page' }
];
return (react_1.default.createElement("div", { className: right ? css.right : css.left },
react_1.default.createElement("div", { className: css.header },
react_1.default.createElement("ul", { className: css.tabs }, tabs.map((item) => (react_1.default.createElement("div", { key: item.key, className: (0, clsx_1.default)(css.tab, {
[css.active]: item.key === tab
}), onClick: () => {
if (item.key !== tab) {
setState((prev) => ({
...prev,
tab: item.key
}));
}
} }, item.label))))),
react_1.default.createElement("div", { className: css.body },
react_1.default.createElement(SidebarContent, { visible: tab === 'blocks' },
react_1.default.createElement(BlockIcons_1.BlockIcons, null)),
react_1.default.createElement(SidebarContent, { visible: tab === 'settings' },
react_1.default.createElement(BlockEditor_1.BlockEditor, null)),
react_1.default.createElement(SidebarContent, { visible: tab === 'page' },
react_1.default.createElement(PageEditor_1.PageEditor, null)))));
}
exports.Sidebar = Sidebar;
function SidebarContent({ visible, children }) {
const [created, setCreated] = (0, react_1.useState)(visible);
const style = (0, react_1.useMemo)(() => ({
position: 'absolute',
top: 0,
right: 0,
bottom: 0,
left: 0,
overflow: 'auto',
display: visible ? 'block' : 'none'
}), [visible]);
(0, react_1.useEffect)(() => {
if (visible) {
setCreated(true);
}
}, [visible]);
return created || visible ? react_1.default.createElement("div", { style: style }, children) : null;
}