@deep-foundation/deepcase
Version:
[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-
53 lines • 6.31 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Box, Flex, HStack, Link, Text } from '@chakra-ui/react';
import React, { useState } from 'react';
import { IconContext } from "react-icons";
import { BsCheck2, BsCheck2All } from 'react-icons/bs';
import Linkify from 'react-linkify';
import { MessageTextArea } from './cyto-message-textarea';
import { CytoReactLinkAvatar } from './cyto-react-avatar';
import { useChackraColor } from './get-color';
const BubbleArrowRight = (_a) => {
var { width = "12pt", height = "12pt", fill = "rgba(0,0,0, 0.5)", stroke = "transparent", strokeOpacity = 0.5, strokeWidth = 0 } = _a, props = __rest(_a, ["width", "height", "fill", "stroke", "strokeOpacity", "strokeWidth"]);
const [invisible, setInvisible] = useState(true);
return _jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: { isolation: "isolate" }, viewBox: "0 0 12 12", width: width, height: height }, props, { children: [_jsx("defs", { children: _jsx("clipPath", { id: "bubble-arrow-right", children: _jsx("path", { d: "M0 0H12V12H0z" }) }) }), _jsx("g", { clipPath: "url(#bubble-arrow-right)", children: _jsx("path", { d: "M6.991.597Q7 5.126 7.817 6.928q.817 1.802 3.519 3.887c.223.171.177.342-.101.38q-3.837.525-6.033-.275-2.196-.801-4.679-2.822L6.991.597z", fill: fill, vectorEffect: "non-scaling-stroke", strokeWidth: strokeWidth, stroke: stroke, strokeOpacity: strokeOpacity, strokeLinecap: "square", strokeMiterlimit: 3 }) })] }));
};
const BubbleArrowLeft = (_a) => {
var { width = "12pt", height = "12pt", fill = "rgba(0,0,0, 0.5)", stroke = "transparent", strokeOpacity = 0.5, strokeWidth = 0 } = _a, props = __rest(_a, ["width", "height", "fill", "stroke", "strokeOpacity", "strokeWidth"]);
const [invisible, setInvisible] = useState(true);
return _jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", style: { isolation: "isolate" }, viewBox: "0 0 12 12", width: width, height: height }, props, { children: [_jsx("defs", { children: _jsx("clipPath", { id: "bubble-arrow-left", children: _jsx("path", { d: "M0 0H12V12H0z" }) }) }), _jsx("g", { clipPath: "url(#bubble-arrow-left)", children: _jsx("path", { d: "M5.009.597Q5 5.126 4.183 6.928 3.366 8.73.664 10.815c-.223.171-.177.342.101.38q3.837.525 6.033-.275 2.196-.801 4.679-2.822L5.009.597z", fill: fill, vectorEffect: "non-scaling-stroke", strokeWidth: strokeWidth, stroke: stroke, strokeOpacity: strokeOpacity, strokeLinecap: "square", strokeMiterlimit: 3 }) })] }));
};
const Done = React.memo(() => {
return (_jsx(IconContext.Provider, { value: { color: "blue" }, children: _jsx("div", { children: _jsx(BsCheck2, {}) }) }));
});
const DoneAllOpacity = React.memo(() => {
return (_jsx(IconContext.Provider, { value: { color: "blue" }, children: _jsx("div", { children: _jsx(BsCheck2All, {}) }) }));
});
const DoneAll = React.memo(() => {
return (_jsx(IconContext.Provider, { value: { color: "primary" }, children: _jsx("div", { children: _jsx(BsCheck2All, {}) }) }));
});
export const CytoReactMessage = React.memo(({ text = 'Однообразные мелькают Все с той же болью дни мои, Как будто розы опадают И умирают соловьи. Но и она печальна тоже, Мне приказавшая любовь, И под ее атласной кожей Бежит отравленная кровь.', align = 'left', arrow = align, fill = align === 'right' ? '#dcdcdc' : '#cce4ff', color = '#000', src, emoji = '💀', name, stage = 'none', flexDivProps = {}, messageDivProps = {}, answerButton, }) => {
const gray900 = useChackraColor('gray.900');
const _stage = (stage === 'sended' ? _jsx(Done, {}) :
stage === 'received' ? _jsx(DoneAllOpacity, {}) :
stage === 'viewed' ? _jsx(DoneAll, {}) :
null);
return (_jsx(_Fragment, { children: _jsxs(Flex, { maxW: 'sm', direction: 'column', alignItems: 'flex-end', children: [_jsxs(HStack, { maxW: 'sm', display: 'flex', alignItems: 'flex-end', spacing: 2, children: [arrow === 'left' && _jsx(CytoReactLinkAvatar, { emoji: emoji, name: name, src: src }), _jsx(Box, Object.assign({}, flexDivProps, { sx: Object.assign(Object.assign({}, flexDivProps.style), { width: 'calc(100% - 55px)', display: 'flex', alignItems: align === 'right' ? 'flex-end' : 'flex-start', justifyContent: align === 'right' ? 'flex-end' : 'flex-start' }), children: _jsxs(Box, Object.assign({ padding: '0.5rem 0.75rem', position: 'relative', w: 'auto', maxW: '100%', wordWrap: 'break-word', wordBreak: 'break-word', borderRadius: '2xl', boxSizing: 'border-box', sx: {
clear: 'both',
'hyphens': 'auto',
} }, messageDivProps, { style: Object.assign(Object.assign({}, messageDivProps.style), { backgroundColor: fill }), children: [_jsx(Linkify, { componentDecorator: (decoratedHref, decoratedText, key) => _jsx(Link, { href: decoratedHref, children: decoratedText, onClick: (event) => {
event.stopPropagation();
} }, key), children: _jsx(Text, { fontSize: 'sm', color: gray900, children: text }) }), arrow === 'left' && _jsx(BubbleArrowLeft, { fill: fill, style: { position: 'absolute', left: -6, bottom: 0 } }), arrow === 'right' && _jsx(BubbleArrowRight, { fill: fill, style: { position: 'absolute', right: -6, bottom: 0 } })] })) })), align === 'right' && _jsx(CytoReactLinkAvatar, { emoji: emoji, name: name, src: src })] }), answerButton, _jsx(MessageTextArea, {})] }) }));
});
//# sourceMappingURL=cyto-react-message.js.map