@o/ui

"use strict"; var __importStar = (this && this.__importStar) || function (mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k]; result["default"] = mod; return result; }; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); const use_store_1 = require("@o/use-store"); const gloss_1 = require("gloss"); const React = __importStar(require("react")); const react_shadow_1 = __importDefault(require("react-shadow")); const RoundButtonSmall_1 = require("../buttons/RoundButtonSmall"); const Highlight_1 = require("../Highlight"); const Space_1 = require("../Space"); const DateFormat_1 = require("../text/DateFormat"); const Text_1 = require("../text/Text"); const View_1 = require("../View/View"); const Thread_1 = require("./Thread"); function ThreadMessage({ date, participants, body }) { return (React.createElement(Message, null, React.createElement(Text_1.Text, { fontWeight: 500, size: 0.9, alpha: 0.8 }, React.createElement(DateFormat_1.DateFormat, { date: new Date(date) })), React.createElement(Space_1.Space, null), React.createElement(MessageHeader, null, participants .filter(x => x.type === 'from') .map(({ name, email }, index) => (React.createElement(React.Fragment, { key: index }, React.createElement(RoundButtonSmall_1.RoundButtonSmall, { key: index, tooltip: email, tooltipProps: { noHoverOnChildren: false, } }, name), React.createElement(Space_1.Space, null))))), React.createElement(MailBody, null, body))); } exports.ThreadMessage = ThreadMessage; const Message = gloss_1.gloss(gloss_1.Box); const Paragraph = gloss_1.gloss(Highlight_1.HighlightText, { className: 'markdown', marginBottom: '0.35rem', userSelect: 'auto', }); const MessageHeader = gloss_1.gloss({ flexDirection: 'row', }); const Block = gloss_1.gloss({ display: 'block', '& div': { display: 'block', }, }); const MailBody = ({ children, ...props }) => { const rootNode = React.useRef(null); const forceUpdate = use_store_1.useForceUpdate(); React.useEffect(() => { if (!rootNode.current) { setTimeout(forceUpdate); } }, []); Thread_1.useCaptureLinks(rootNode.current); return (React.createElement(View_1.View, { color: "#151515", background: "#fff", borderRadius: 10, overflow: "hidden", padding: true }, React.createElement(react_shadow_1.default.div, { style: { pointerEvents: 'inherit' } }, React.createElement("div", { ref: rootNode }, React.createElement(Block, Object.assign({ className: "gmail-body" }, props, { dangerouslySetInnerHTML: { __html: children } })), React.createElement("style", { dangerouslySetInnerHTML: { __html: ` :host { all: initial; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Droid Sans', 'Helvetica Neue', sans-serif; }

          gmail-body {
            user-select: text;
          }

          .gmail-body table {
            table-layout: fixed;
            width: 100%;
          }
          .gmail-body tbody {
            vertical-align: middle;
            border-color: inherit;
          }
          .gmail-body td,
          .gmail-body tr,
          .gmail-body table,
          .gmail-body tbody {
            border-collapse: separate;
            border-spacing: 0px;
            vertical-align: inherit;
          }
          .gmail-body p {
            line-height: 11pt;
          }
        `,
                } })))));

}; //# sourceMappingURL=ThreadMessage.js.map