json-joy
Version:
Collection of libraries for building collaborative editing apps.
85 lines (84 loc) • 3.89 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UrlDisplayLayout = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const FixedColumn_1 = require("nice-ui/lib/3-list-item/FixedColumn");
const styles_1 = require("nice-ui/lib/styles");
const BasicButton_1 = tslib_1.__importDefault(require("nice-ui/lib/2-inline-block/BasicButton"));
const Iconista_1 = require("nice-ui/lib/icons/Iconista");
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const BasicTooltip_1 = require("nice-ui/lib/4-card/BasicTooltip");
const use_t_1 = require("use-t");
const Favicon_1 = require("../../../components/Favicon");
const util_1 = require("../../../web/util");
const CopyButton_1 = require("./CopyButton");
const iconColumn = 40;
const iconClass = (0, nano_theme_1.rule)({
d: 'flex',
ai: 'center',
jc: 'center',
w: '32px',
h: '32px',
mr: '-4px 0',
bg: 'rgba(250,250,250,.9)',
bdrad: '15px',
'& img': {
bdrad: '2px',
},
});
const domainClass = (0, nano_theme_1.rule)({
...styles_1.fonts.get('ui', 'mid', 1),
fz: '14px',
maxW: '100%',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
});
const linkClass = (0, nano_theme_1.rule)({
...styles_1.fonts.get('ui', 'bold', 1),
fz: '16px',
pd: `0 0 0 ${iconColumn}px`,
maxW: '100%',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
});
const buttonGroupClass = (0, nano_theme_1.rule)({
w: '60px',
d: 'flex',
ai: 'center',
flexDirection: 'row-reverse',
mr: '-4px',
pd: '0',
});
const UrlDisplayLayout = ({ url, title }) => {
const [t] = (0, use_t_1.useT)();
const [domain, domainTruncated] = React.useMemo(() => {
const parsed = (0, util_1.parseUrl)(url);
const domain = parsed?.hostname || '';
const domainTruncated = domain && domain.length > 32 ? `${domain.slice(0, 32)}...` : domain;
return [domain, domainTruncated];
}, [url]);
return (React.createElement(React.Fragment, null,
React.createElement(Split_1.Split, { style: { width: '100%', maxWidth: '100%' } },
React.createElement("div", { style: { maxWidth: 'calc(100% - 100px)' } },
React.createElement(FixedColumn_1.FixedColumn, { left: iconColumn, style: { alignItems: 'center' } },
React.createElement("div", null,
React.createElement("div", { className: iconClass },
React.createElement(Favicon_1.Favicon, { domain: domain, url: url }))),
React.createElement("div", { className: domainClass }, title ? (React.createElement(React.Fragment, null,
React.createElement("strong", null, title),
" \u2022 ",
domainTruncated)) : (domainTruncated))),
React.createElement("div", null,
React.createElement("div", { className: linkClass },
React.createElement("a", { href: url, target: "_blank", rel: "noopener noreferrer" }, url)))),
React.createElement("div", { className: buttonGroupClass },
React.createElement(CopyButton_1.CopyButton, { width: 48, height: 48, round: true, onCopy: () => url, tooltip: { anchor: {} } }),
React.createElement(BasicTooltip_1.BasicTooltip, { nowrap: true, renderTooltip: () => t('Open') },
React.createElement(BasicButton_1.default, { width: 48, height: 48, round: true, to: url, target: "_blank", rel: "noopener noreferrer" },
React.createElement(Iconista_1.Iconista, { width: 16, height: 16, set: 'lucide', icon: "external-link" })))))));
};
exports.UrlDisplayLayout = UrlDisplayLayout;