collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
117 lines (116 loc) • 4.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tick = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const constants_1 = require("../constants");
const Code_1 = require("nice-ui/lib/1-inline/Code");
const context_1 = require("../../context");
const sidColor_1 = require("../../../util/sidColor");
const blockClass = (0, nano_theme_1.rule)({
pos: 'relative',
});
const css = {
wrap: (0, nano_theme_1.rule)({
pos: 'relative',
}),
block: blockClass,
item: (0, nano_theme_1.drule)({
pos: 'relative',
z: 1,
h: constants_1.TIMELINE_HEIGHT + 'px',
bxz: 'border-box',
op: 0.6,
marr: constants_1.TICK_MARGIN + 'px',
cur: 'pointer',
'&:active:hover': {
op: 1,
},
}),
selected: (0, nano_theme_1.rule)({
z: 2,
bdrad: '2px',
op: 0.9,
mar: '-4px 0 -4px -1px',
h: constants_1.TIMELINE_HEIGHT + 8 + 'px',
out: '1px solid rgba(0,0,0,.8)',
}),
id: (0, nano_theme_1.drule)({
pos: 'absolute',
t: '-24px',
l: '-4px',
d: 'none',
ws: 'nowrap',
bdrad: '3px',
z: 2,
[`.${blockClass.trim()}:hover &`]: {
d: 'block',
z: 111,
},
}),
marker: (0, nano_theme_1.rule)({
pos: 'absolute',
t: '-22px',
l: '-4px',
ws: 'nowrap',
bdrad: '3px',
z: 1,
}),
};
const Tick = ({ id, patch, selected, marker, tickWidth, noHover, scrubbing }) => {
const state = (0, context_1.useLogState)();
const theme = (0, nano_theme_1.useTheme)();
const color = (0, sidColor_1.sidColor)(id.sid);
return (React.createElement("div", { className: css.wrap, style: {
margin: scrubbing ? '-150px 0' : undefined,
padding: scrubbing ? '150px 0' : undefined,
zIndex: scrubbing ? 99999999 : undefined,
}, onMouseUp: noHover || scrubbing
? undefined
: () => {
state.pin(patch
? state.pinned$.getValue() === patch
? null
: patch
: state.pinned$.getValue() === 'start'
? null
: 'start');
}, onMouseEnter: scrubbing
? () => {
if (!patch) {
if (state.pinned$.getValue() !== 'start')
state.pin('start');
}
else {
if (state.pinned$.getValue() !== patch)
state.pin(patch);
}
}
: undefined },
React.createElement("div", { className: css.block },
React.createElement("div", { key: id.sid + '.' + id.time, className: css.item({
w: tickWidth + (selected ? 2 : 0) + 'px',
'&:hover': noHover
? {}
: {
w: tickWidth + 2 + 'px',
bdrad: '2px',
op: 0.8,
mar: '-5px 0 -5px -1px',
h: constants_1.TIMELINE_HEIGHT + 10 + 'px',
},
}) + (selected ? css.selected : ''), style: {
background: color,
} }),
React.createElement("div", { className: css.id({
bg: theme.g(1, 0.9),
}), style: { display: selected ? 'block' : undefined } },
React.createElement(Code_1.Code, { noBg: true, size: -2 },
id.sid > 1000 ? '…' + (id.sid + '').slice(-4) : id.sid,
".",
id.time)),
!!marker && (React.createElement("div", { className: css.marker },
React.createElement(Code_1.Code, { noBg: true, size: -3, gray: true }, marker))))));
};
exports.Tick = Tick;