collaborative-ui/lib/BinaryBlock/index.js

React component library for building real-time collaborative editing applications.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.BinaryBlock = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const Split_1 = require("nice-ui/lib/3-list-item/Split");
const CopyButton_1 = require("../CopyButton");
const nano_theme_1 = require("nano-theme");
const CodeblockLayout_1 = require("../CodeblockLayout");
const use_t_1 = require("use-t");
const liteClass = (0, nano_theme_1.rule)({
    op: 0.25,
});
const css = {
    block: (0, nano_theme_1.rule)({
        pos: 'relative',
        pd: 0,
        mr: 0,
        pre: {
            mr: 0,
            fz: '12px',
        },
    }),
    size: (0, nano_theme_1.rule)({
        fz: '12px',
        pos: 'absolute',
        b: '8px',
        r: '12px',
        us: 'none',
        pe: 'none',
    }),
};
const BinaryBlock = ({ uint8, header, compact }) => {
    const [t] = (0, use_t_1.useT)();
    const theme = (0, nano_theme_1.useTheme)();
    const ascii = true;
    const octets = React.useMemo(() => {
        const nodes = [];
        const length = uint8.length;
        for (let i = 0; i < length; i++) {
            const octet = uint8[i];
            if (ascii && octet >= 32 && octet <= 126) {
                nodes.push(' ' + String.fromCharCode(octet));
            }
            else {
                const node = octet < 16 ? '0' + octet.toString(16) : octet.toString(16);
                if (ascii) {
                    nodes.push(React.createElement("span", { className: liteClass }, node));
                }
                else {
                    nodes.push(node);
                }
            }
            nodes.push((i % 8 !== 7 ? ' ' : '') + (i % 8 === 7 && i % 16 !== 15 ? '     ' : '') + (i % 16 === 15 ? '\n' : ''));
        }
        return nodes;
    }, [uint8]);
    return (React.createElement("div", { className: css.block },
        React.createElement(CodeblockLayout_1.CodeblockLayout, null,
            React.createElement(Split_1.Split, null,
                React.createElement("div", null, header),
                React.createElement(CopyButton_1.CopyButton, { onCopy: () => [...uint8].map((c) => c.toString(16).padStart(2, '0')).join(' ') })),
            React.createElement("div", { style: { margin: compact ? '-24px 0 -4px' : '-20px 0 0' } }, React.createElement('pre', {}, ...octets))),
        React.createElement("div", { className: css.size, style: { color: theme.g(0, 0.3) } },
            uint8.length.toLocaleString(),
            " ",
            t('bytes'))));
};
exports.BinaryBlock = BinaryBlock;