nice-ui
Version:
React design system, components, and utilities
96 lines (95 loc) • 7.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.IconDetails = void 0;
const React = require("react");
const context_1 = require("../context");
const nano_theme_1 = require("nano-theme");
const FormRow_1 = require("../../../../../../3-list-item/FormRow");
const usePromise_1 = require("../../../../../../hooks/usePromise");
const TextBlock_1 = require("../../../../../../5-block/TextBlock");
const Space_1 = require("../../../../../../3-list-item/Space");
const IconPreview_1 = require("./IconPreview");
const Separator_1 = require("../../../../../../3-list-item/Separator");
const Flex_1 = require("../../../../../../3-list-item/Flex");
const Breadcrumbs_1 = require("../../../../../../3-list-item/Breadcrumbs");
const Code_1 = require("../../../../../../1-inline/Code");
const Split_1 = require("../../../../../../3-list-item/Split");
const Link_1 = require("../../../../../../1-inline/Link");
const cdn_1 = require("../cdn");
const blockClass = (0, nano_theme_1.rule)({
minW: 'calc(min(300px, 70vw))',
maxW: 'calc(min(800px, 90vw))',
w: '100vw',
pd: '16px',
});
const IconDetails = ({ set, icon }) => {
const state = (0, context_1.useIconsGrid)();
const [src] = (0, usePromise_1.usePromise)(state.getIconSrc(set, icon), [set, icon]);
const [svgFormat, setSvgFormat] = React.useState('svg');
const [dataEncoding, setDataEncoding] = React.useState('utf-8');
const [imageEncoding, setImageEncoding] = React.useState('html');
const [cdn, setCdn] = React.useState('jsdelivr');
let svgText = '';
if (src) {
svgText = src;
if (svgFormat === 'iconista')
svgText = `import Iconista from 'iconista';\n\n<Iconista set="${set}" icon="${icon}" width="16" height="16" />`;
else if (svgFormat === 'react')
svgText = `import * as React from 'react';\n\nexport interface IconProps extends React.SVGProps<SVGSVGElement> {}\n\nexport const Icon: React.FC<IconProps> = (props) => (\n ${src.replace('<svg ', '<svg {...props} ')}\n);\n`;
}
let dataUrl = '';
if (src) {
if (dataEncoding === 'utf-8')
dataUrl = 'data:image/svg+xml;charset=utf-8,' + src;
else if (dataEncoding === 'url-encoded')
dataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(src);
else if (dataEncoding === 'base64')
dataUrl = 'data:image/svg+xml;base64,' + btoa(src);
}
return (React.createElement("div", { className: blockClass },
React.createElement(IconPreview_1.IconPreview, { set: set, icon: icon }),
React.createElement(Space_1.Space, { size: 8 }),
!!svgText && (React.createElement(React.Fragment, null,
React.createElement(FormRow_1.FormRow, { title: 'SVG', description: svgFormat === 'svg' ? ('Copy-paste this directly into your HTML or your React component') : svgFormat === 'iconista' ? (React.createElement(React.Fragment, null,
"Install",
' ',
React.createElement(Code_1.Code, { gray: true, alt: true }, "iconista"),
' ',
"package. It exports a React components which lazy-loads any icon as",
' ',
React.createElement(Code_1.Code, { gray: true, alt: true }, '<svg>'),
' ',
"element.")) : (void 0) },
React.createElement(TextBlock_1.TextBlock, { select: true, lang: svgFormat === 'svg' ? 'html' : 'typescript', src: svgText }),
React.createElement(Flex_1.Flex, { style: { columnGap: 8, padding: '8px 0 0' } },
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: svgFormat === 'svg', onClick: () => setSvgFormat('svg') }, "SVG"),
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: svgFormat === 'iconista', onClick: () => setSvgFormat('iconista') }, "Iconista"),
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: svgFormat === 'react', onClick: () => setSvgFormat('react') }, "React"))),
React.createElement(Space_1.Space, { size: 4 }))),
React.createElement(FormRow_1.FormRow, { title: 'Image' },
React.createElement(TextBlock_1.TextBlock, { select: true, lang: imageEncoding, src: imageEncoding === 'html'
? `<img src="${state.href(set, icon)}" width="16" height="16" />`
: `})` }),
React.createElement(Flex_1.Flex, { style: { columnGap: 8, padding: '8px 0 0' } },
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: imageEncoding === 'html', onClick: () => setImageEncoding('html') }, "HTML"),
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: imageEncoding === 'markdown', onClick: () => setImageEncoding('markdown') }, "Markdown"))),
React.createElement(Space_1.Space, { size: 8 }),
React.createElement(Separator_1.Separator, null),
React.createElement(Space_1.Space, { size: 8 }),
React.createElement(FormRow_1.FormRow, { title: React.createElement(Split_1.Split, null,
React.createElement("div", null, 'CDN'),
React.createElement(Link_1.Link, { a: true, to: state.href(set, icon, 'jsdelivr'), external: true }, "Open new tab")) },
React.createElement(TextBlock_1.TextBlock, { select: true, src: state.href(set, icon, cdn) }),
React.createElement(Flex_1.Flex, { style: { columnGap: 8, padding: '8px 0 0' } }, [...cdn_1.cdns].map(([id, def]) => (React.createElement(Breadcrumbs_1.Breadcrumb, { key: id, compact: true, selected: id === cdn, onClick: () => setCdn(id) }, def.name))))),
!!dataUrl && (React.createElement(React.Fragment, null,
React.createElement(Space_1.Space, { size: 4 }),
React.createElement(FormRow_1.FormRow, { title: React.createElement(Split_1.Split, null,
React.createElement("div", null, 'Data URL'),
React.createElement(Link_1.Link, { a: true, to: dataUrl, external: true }, "Open new tab")) },
React.createElement(TextBlock_1.TextBlock, { select: true, src: dataUrl }),
React.createElement(Flex_1.Flex, { style: { columnGap: 8, padding: '8px 0 0' } },
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: dataEncoding === 'utf-8', onClick: () => setDataEncoding('utf-8') }, "UTF-8"),
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: dataEncoding === 'url-encoded', onClick: () => setDataEncoding('url-encoded') }, "UTF-8 & URL-encoded"),
React.createElement(Breadcrumbs_1.Breadcrumb, { compact: true, selected: dataEncoding === 'base64', onClick: () => setDataEncoding('base64') }, "Base64")))))));
};
exports.IconDetails = IconDetails;