collaborative-ui
Version:
React component library for building real-time collaborative editing applications.
53 lines (52 loc) • 3.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ExplorerSidenav = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const ExplorerMenu_1 = require("../ExplorerMenu");
const Space_1 = require("nice-ui/lib/3-list-item/Space");
const Separator_1 = require("nice-ui/lib/3-list-item/Separator");
const useBehaviorSubject_1 = require("nice-ui/lib/hooks/useBehaviorSubject");
const DropArea_1 = require("../DropArea");
const context_1 = require("../context");
const CreateButton_1 = require("../../molecules/CreateButton");
const MiniTitle_1 = require("nice-ui/lib/3-list-item/MiniTitle");
const constants_1 = require("nice-ui/lib/constants");
const TraceSelector_1 = require("../TraceSelector");
const Text_1 = require("nice-ui/lib/1-inline/Text");
const use_t_1 = require("use-t");
const ExplorerSidenav = () => {
const [t] = (0, use_t_1.useT)();
const state = (0, context_1.useExplorer)();
const files = (0, useBehaviorSubject_1.useBehaviorSubject)(state.files$);
const expanded = !files.length;
const width = expanded ? constants_1.NiceUiSizes.SidebarWidth + 100 : constants_1.NiceUiSizes.SidebarWidth;
return (React.createElement("div", { style: { display: 'flex', maxWidth: 400, width: '100%', alignItems: 'center', flexDirection: 'column' } },
React.createElement("div", { style: { width }, onClick: (e) => e.stopPropagation(), onKeyDown: () => { } },
expanded && (React.createElement(Text_1.Text, { as: 'h1', size: 16, font: "sans", kind: "bold", style: { textAlign: 'center', margin: '64px 0 0' } }, t('Explorer'))),
React.createElement("div", { style: { width } }, !expanded && (React.createElement(React.Fragment, null,
React.createElement(MiniTitle_1.MiniTitle, null, t('Open')),
React.createElement(Space_1.Space, { size: -1 }),
React.createElement(ExplorerMenu_1.ExplorerMenu, null),
React.createElement(Space_1.Space, { size: 6 }),
React.createElement(Separator_1.Separator, { hard: true }),
React.createElement(Space_1.Space, { size: 4 })))),
React.createElement("div", { style: { width, paddingTop: expanded ? 64 : 0 } },
React.createElement(MiniTitle_1.MiniTitle, null, t('New')),
React.createElement(Space_1.Space, { size: -1 }),
React.createElement(CreateButton_1.CreateButton, { round: true, primary: true, blue: true, block: true, fill: true, size: expanded ? 1 : 0, onClick: () => state.createNew() }, "Create")),
React.createElement(Space_1.Space, { size: expanded ? 4 : 2 }),
React.createElement("div", { style: { width } },
React.createElement(MiniTitle_1.MiniTitle, null, "File"),
React.createElement(Space_1.Space, { size: -1 }),
React.createElement(DropArea_1.DropArea, null)),
React.createElement(Space_1.Space, { size: expanded ? 4 : 2 }),
React.createElement("div", { style: { width } },
React.createElement(MiniTitle_1.MiniTitle, null, t('Traces')),
React.createElement("p", { style: { marginTop: 8 } },
React.createElement(Text_1.Text, { size: -2 }, expanded
? t('Load a trace to get started. Traces are pre-recorded editing sessions that you can replay and explore.')
: t('Load a trace to get started.'))),
React.createElement(TraceSelector_1.TraceSelector, { expanded: expanded, width: width })))));
};
exports.ExplorerSidenav = ExplorerSidenav;