collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
37 lines (36 loc) • 1.6 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.JsonBlockToolbar = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const flexible_input_1 = require("flexible-input");
const Flex_1 = require("nice-ui/lib/3-list-item/Flex");
const JsonBlockTabs_1 = require("../JsonBlockTabs");
const css = {
pointer: (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.mono.mid,
col: nano_theme_1.theme.color.sem.blue[0],
fz: '12px',
d: 'flex',
pd: '1px 0 0',
alignItems: 'center',
}),
};
const JsonBlockToolbar = ({ state }) => {
const path = (0, useBehaviorSubject_1.useBehaviorSubject)(state.path$);
const handlePointerChange = (e) => {
let txt = e.target.value;
if (txt && txt[0] !== '/')
txt = '/' + txt;
state.setPath(txt);
};
return (React.createElement(Flex_1.Flex, { style: { flexDirection: 'row', alignItems: 'center' } },
React.createElement(JsonBlockTabs_1.JsonBlockTabs, { state: state }),
React.createElement(Space_1.Space, { horizontal: true, size: 2 }),
React.createElement("div", { className: css.pointer },
React.createElement(flexible_input_1.FlexibleInput, { value: path, onChange: handlePointerChange, typeahead: path ? '' : '/path' }))));
};
exports.JsonBlockToolbar = JsonBlockToolbar;