collaborative-ui/lib/LogicalTimestamp/index.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.LogicalTimestamp = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const sidColor_1 = require("../util/sidColor");
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.theme.font.mono.bold,
    d: 'inline-block',
    fz: '12px',
    pdt: '1px',
});
const LogicalTimestamp = ({ sid = 0, time }) => {
    const [trim, setTrim] = React.useState(0);
    const isReservedSession = sid < 10000;
    const color = (0, sidColor_1.sidColor)(sid);
    return (React.createElement("code", { className: blockClass, onClick: () => setTrim((x) => x + 1), onKeyDown: () => { } },
        isReservedSession ? (React.createElement("span", { style: { opacity: 0.5 } }, sid + '')) : (!!(trim % 3) && React.createElement("span", { style: { opacity: 0.5 } }, trim % 3 === 1 ? '…' + (sid + '').slice(-4) : sid)),
        React.createElement("span", { style: {
                background: color,
                display: 'inline-block',
                width: 8,
                height: 8,
                borderRadius: 4,
                margin: !isReservedSession && !(trim % 3) ? '2px 4px 0 0' : '2px 4px 0',
            } }),
        time));
};
exports.LogicalTimestamp = LogicalTimestamp;