collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
45 lines (44 loc) • 2.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShareBlock = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const context_1 = require("../../context");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const CopyCode_1 = require("nice-ui/lib/1-inline/CopyCode");
const CopyInput_1 = require("nice-ui/lib/2-inline-block/CopyInput");
const PillButton_1 = require("nice-ui/lib/2-inline-block/PillButton");
const useWindowSize_1 = tslib_1.__importDefault(require("react-use/lib/useWindowSize"));
const QrCode_1 = require("nice-ui/lib/2-inline-block/QrCode");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const use_t_1 = require("use-t");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const Text_1 = require("nice-ui/lib/1-inline/Text");
const nano_theme_1 = require("nano-theme");
const ShareBlock = ({ id }) => {
const [t] = (0, use_t_1.useT)();
const state = (0, context_1.useDemos)();
const file = (0, useBehaviorSubject_1.useBehaviorSubject)(state.file$);
const { width } = (0, useWindowSize_1.default)();
const theme = (0, nano_theme_1.useTheme)();
const isSmall = width < 1000;
if (!file)
return null;
const url = state.url(id);
return (React.createElement("div", null,
React.createElement("div", { style: { padding: '24px 16px 16px', background: theme.g(0.98), borderRadius: 16 } },
React.createElement(CopyInput_1.CopyInput, { label: t('Demo link'), value: url }),
React.createElement(Space_1.Space, null),
React.createElement("div", { style: { border: '1px solid rgba(0,0,0,.1)', borderRadius: '8px', overflow: 'hidden' } },
React.createElement(QrCode_1.QrCode, { data: url })),
React.createElement(Space_1.Space, null),
React.createElement("div", { style: { display: 'flex', justifyContent: 'space-around' } },
React.createElement(CopyCode_1.CopyCode, { size: -1, value: id }))),
React.createElement(Space_1.Space, { size: 6 }),
React.createElement(MiniTitle_1.MiniTitle, null, t('Share')),
React.createElement(Text_1.Text, { as: 'p', size: -1 }, t('Share this link with others to collaborate on this document.')),
React.createElement(Space_1.Space, { size: -1 }),
React.createElement("div", { style: { marginLeft: -8 } },
React.createElement(PillButton_1.PillButton, { a: true, active: true, to: url, external: true }, t('Open in new tab')))));
};
exports.ShareBlock = ShareBlock;