react-email-builder
Version:
A simple React drag and drop email builder.
36 lines (35 loc) • 1.45 kB
JavaScript
import React, { useCallback } from 'react';
import { getCss } from '../../utils';
import { Blocks } from '../Blocks';
import { useEmailBuilderState, useSetEmailBuilderState } from '../../hooks';
export function MainArea() {
const css = getCss('MainArea', (ns) => ({
root: ns(),
header: ns('header'),
body: ns('body'),
email: ns('email-page')
}));
const state = useEmailBuilderState();
const style = state.style || {};
const setState = useSetEmailBuilderState();
const clearSelected = useCallback((e) => {
if (e.target === e.currentTarget) {
setState((prev) => prev.selectedId
? {
...prev,
selectedId: undefined
}
: prev);
}
}, [setState]);
const nil = undefined;
return (React.createElement("div", { className: css.root },
React.createElement("div", { className: css.header }),
React.createElement("div", { className: css.body, onClick: clearSelected },
React.createElement("div", { className: css.email, onClick: clearSelected, style: {
paddingTop: style.padding?.[0] ?? nil,
paddingBottom: style.padding?.[2] ?? nil,
backgroundColor: state.draggingType ? '#fff' : style.bgColor
} },
React.createElement(Blocks, { onClick: clearSelected })))));
}