@plurid/plurid-ui-components-react 0.0.0-21 → 0.0.0-22

package/distribution/index.js

@@ -2585,6 +2585,306 @@ const universal = {
     varia: varia
 };
 
+const StyledDashboardsRenderer = styled__default.default.div`
+    display: grid;
+    grid-template-columns: ${({fullRenderArea: fullRenderArea, compactSelectors: compactSelectors}) => {
+    if (fullRenderArea) {
+        return "1fr";
+    }
+    return compactSelectors ? "60px auto" : "1fr 4fr";
+}};
+    min-height: 700px;
+`;
+
+const StyledNoDashboardRender = styled__default.default.div`
+    display: grid;
+    place-content: center;
+`;
+
+const StyledSidebar = styled__default.default.div`
+`;
+
+const StyledSelectors = styled__default.default.div`
+    height: 100%;
+    display: grid;
+    justify-content: space-between;
+    grid-template-columns: 1fr;
+    grid-template-rows: ${({helpItemsCount: helpItemsCount}) => `120px auto ${45 * helpItemsCount}px`};
+
+    background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
+    box-shadow: inset -3px 0px 3px 0px ${({theme: theme}) => theme.boxShadowUmbraColor};
+
+    ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    li {
+        cursor: pointer;
+        padding: 0.7rem 1.4rem;
+        user-select: none;
+    }
+`;
+
+const StyledBranding = styled__default.default.div`
+    display: grid;
+    place-content: center;
+    grid-gap: 0.5rem;
+    height: 100%;
+    font-size: 0.9rem;
+    text-align: center;
+    user-select: none;
+
+    img {
+        cursor: pointer;
+    }
+`;
+
+const StyledHelp = styled__default.default.div`
+    li {
+        font-size: 0.9rem;
+    }
+`;
+
+const StyledHelpItem = styled__default.default.li`
+    display: grid;
+    align-items: center;
+    grid-gap: 0.5rem;
+    grid-template-columns: ${({compactSelectors: compactSelectors}) => compactSelectors ? "16px" : "16px auto 16px"};
+    min-height: 45px;
+`;
+
+const StyledSelector = styled__default.default.li`
+    background-color: ${({theme: theme, selected: selected}) => selected ? theme.backgroundColorPrimary : "initial"};
+
+    :hover {
+        background-color: ${({theme: theme}) => theme.backgroundColorPrimary};
+    }
+
+    display: grid;
+    grid-template-columns: ${({compactSelectors: compactSelectors}) => compactSelectors ? "16px" : "16px auto"};
+    grid-gap: 0.7rem;
+    min-height: 45px;
+    align-items: center;
+    position: relative;
+`;
+
+const StyledSelectorRelativeLabel = styled__default.default.div`
+    position: absolute;
+    left: 50px;
+    z-index: 9999;
+    min-height: 45px;
+    display: grid;
+    align-items: center;
+    padding-right: 0.5rem;
+    background-color: ${({theme: theme}) => theme.backgroundColorPrimaryAlpha};
+`;
+
+const Selector = properties => {
+    const {data: data, selectedDashboard: selectedDashboard, compactSelectors: compactSelectors, theme: theme, setSelectedDashboard: setSelectedDashboard, rendererID: rendererID} = properties;
+    const {id: id, icon: icon, label: label} = data;
+    const Icon = icon;
+    const selected = id === selectedDashboard;
+    const [mouseOver, setMouseOver] = React.useState(false);
+    React.useEffect((() => {
+        let mounted = true;
+        if (mouseOver) {
+            setTimeout((() => {
+                if (!mounted) {
+                    return;
+                }
+                setMouseOver(false);
+            }), 2e3);
+        }
+        return () => {
+            mounted = false;
+        };
+    }), [ mouseOver ]);
+    const selectorIcon = !icon ? React__default.default.createElement(pluridIconsReact.PluridIconSpace, {
+        theme: theme
+    }) : typeof icon === "function" ? React__default.default.createElement(Icon, {
+        theme: theme
+    }) : React__default.default.createElement(React__default.default.Fragment, null, icon);
+    return React__default.default.createElement(StyledSelector, {
+        key: (rendererID || "") + id,
+        onClick: () => setSelectedDashboard(id),
+        onMouseEnter: () => setMouseOver(true),
+        onMouseLeave: () => setMouseOver(false),
+        theme: theme,
+        selected: selected,
+        compactSelectors: compactSelectors
+    }, selectorIcon, !compactSelectors && React__default.default.createElement("div", null, label), compactSelectors && mouseOver && React__default.default.createElement(StyledSelectorRelativeLabel, {
+        theme: theme
+    }, label));
+};
+
+const Sidebar = properties => {
+    const {dashboards: dashboards, theme: theme, compactSelectors: compactSelectors, setCompactSelectors: setCompactSelectors, selectedDashboard: selectedDashboard, setSelectedDashboard: setSelectedDashboard, identonym: identonym, usageType: usageType, openManual: openManual, logout: logout, rendererID: rendererID, brandingName: brandingName, brandingNameStyle: brandingNameStyle, brandingLogo: brandingLogo} = properties;
+    const openManualCount = openManual ? 1 : 0;
+    const usageTypeCount = usageType === "PRIVATE_USAGE" ? 1 : 0;
+    const helpItemsCount = openManualCount + usageTypeCount;
+    const [mouseOverSelectors, setMouseOverSelectors] = React.useState(false);
+    const branding = React__default.default.createElement(StyledBranding, {
+        compactSelectors: compactSelectors
+    }, !compactSelectors && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", null, brandingLogo && React__default.default.createElement("img", {
+        src: brandingLogo,
+        alt: "icon",
+        height: 40,
+        onClick: () => {
+            setCompactSelectors(true);
+            setMouseOverSelectors(false);
+        }
+    })), brandingName && React__default.default.createElement("div", {
+        style: brandingNameStyle
+    }, brandingName)), compactSelectors && mouseOverSelectors && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement(pluridIconsReact.PluridIconArrowRight, {
+        atClick: () => setCompactSelectors(false)
+    }), React__default.default.createElement("div", null, "ㅤ")));
+    const selectors = React__default.default.createElement("ul", null, dashboards.map((dashboard => React__default.default.createElement(Selector, {
+        key: dashboard.id,
+        data: dashboard,
+        compactSelectors: compactSelectors,
+        theme: theme,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        rendererID: rendererID
+    }))));
+    const help = React__default.default.createElement(StyledHelp, null, mouseOverSelectors && React__default.default.createElement("ul", null, openManual && React__default.default.createElement(StyledHelpItem, {
+        onClick: () => openManual(),
+        compactSelectors: compactSelectors
+    }, React__default.default.createElement(pluridIconsReact.PluridIconDocuments, null), !compactSelectors && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", null, "manual"), React__default.default.createElement(pluridIconsReact.PluridIconExternalLink, null))), usageType === "PRIVATE_USAGE" && logout && React__default.default.createElement(StyledHelpItem, {
+        onClick: () => logout(),
+        compactSelectors: compactSelectors
+    }, React__default.default.createElement(pluridIconsReact.PluridIconExit, null), !compactSelectors && React__default.default.createElement(React__default.default.Fragment, null, React__default.default.createElement("div", null, "logout (", identonym, ")"), React__default.default.createElement("div", null)))));
+    return React__default.default.createElement(StyledSidebar, {
+        theme: theme
+    }, React__default.default.createElement(StyledSelectors, {
+        onMouseEnter: () => setMouseOverSelectors(true),
+        onMouseLeave: () => setMouseOverSelectors(false),
+        theme: theme,
+        compactSelectors: compactSelectors,
+        helpItemsCount: helpItemsCount
+    }, branding, selectors, help));
+};
+
+const StyledRenderArea = styled__default.default.div`
+`;
+
+const RenderArea = properties => {
+    const {dashboards: dashboards, selectedDashboard: selectedDashboard, renderView: renderView, fullRenderArea: fullRenderArea, theme: theme, setSelectedDashboard: setSelectedDashboard, setRenderView: setRenderView, setFullRenderArea: setFullRenderArea} = properties;
+    const dashboard = dashboards.find((dashboard => dashboard.id === selectedDashboard));
+    if (!dashboard) {
+        return React__default.default.createElement(React__default.default.Fragment, null);
+    }
+    const resolveView = () => {
+        const dashboard = dashboards.find((dashboard => dashboard.id === selectedDashboard));
+        if (!dashboard) {
+            return;
+        }
+        const renderViewInDashboard = dashboard.renderers[renderView];
+        if (renderViewInDashboard) {
+            return renderView;
+        }
+        if (dashboard.defaultRender) {
+            return dashboard.defaultRender;
+        }
+        return Object.keys(dashboard.renderers)[0];
+    };
+    const renderID = resolveView();
+    React.useEffect((() => {
+        if (renderID && renderID !== renderView) {
+            setRenderView(renderID);
+        }
+    }), [ renderID ]);
+    if (!renderID) {
+        return React__default.default.createElement(React__default.default.Fragment, null);
+    }
+    const DashboardRender = dashboard.renderers[renderID];
+    if (!DashboardRender) {
+        return React__default.default.createElement(React__default.default.Fragment, null);
+    }
+    return React__default.default.createElement(StyledRenderArea, {
+        theme: theme
+    }, React__default.default.createElement(DashboardRender, {
+        theme: theme,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        renderView: renderView,
+        setRenderView: setRenderView,
+        fullRenderArea: fullRenderArea,
+        setFullRenderArea: setFullRenderArea
+    }));
+};
+
+const DashboardsRenderer$1 = properties => {
+    const {dashboards: dashboards, theme: theme, rendererID: rendererID, identonym: identonym, usageType: usageType, brandingName: brandingName, brandingNameStyle: brandingNameStyle, brandingLogo: brandingLogo, activeDashboard: activeDashboard, activeRender: activeRender, compactSelectors: compactSelectorsProperty, fullRenderArea: fullRenderAreaProperty, noDashboardRender: noDashboardRender, atDashboardChange: atDashboardChange, atUIChange: atUIChange, openManual: openManual, logout: logout} = properties;
+    const [compactSelectors, setCompactSelectors] = React.useState(compactSelectorsProperty !== null && compactSelectorsProperty !== void 0 ? compactSelectorsProperty : false);
+    const [fullRenderArea, setFullRenderArea] = React.useState(fullRenderAreaProperty !== null && fullRenderAreaProperty !== void 0 ? fullRenderAreaProperty : false);
+    const [selectedDashboard, setSelectedDashboard] = React.useState(activeDashboard || "");
+    const [renderView, setRenderView] = React.useState(activeRender || "");
+    React.useEffect((() => {
+        if (!activeDashboard) {
+            return;
+        }
+        if (selectedDashboard === activeDashboard) {
+            return;
+        }
+        setSelectedDashboard(activeDashboard);
+    }), [ activeDashboard ]);
+    React.useEffect((() => {
+        if (atDashboardChange) {
+            atDashboardChange(renderView);
+        }
+    }), [ renderView ]);
+    React.useEffect((() => {
+        if (typeof compactSelectorsProperty === "boolean") {
+            setCompactSelectors(compactSelectorsProperty);
+        }
+        if (typeof fullRenderAreaProperty === "boolean") {
+            setFullRenderArea(fullRenderAreaProperty);
+        }
+    }), [ compactSelectorsProperty, fullRenderAreaProperty ]);
+    React.useEffect((() => {
+        if (atUIChange) {
+            atUIChange("compactSelectors", compactSelectors);
+        }
+    }), [ compactSelectors ]);
+    React.useEffect((() => {
+        if (atUIChange) {
+            atUIChange("fullRenderArea", fullRenderArea);
+        }
+    }), [ fullRenderArea ]);
+    return React__default.default.createElement(StyledDashboardsRenderer, {
+        theme: theme,
+        compactSelectors: compactSelectors,
+        fullRenderArea: fullRenderArea
+    }, !fullRenderArea && React__default.default.createElement(Sidebar, {
+        dashboards: dashboards,
+        theme: theme,
+        compactSelectors: compactSelectors,
+        setCompactSelectors: setCompactSelectors,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        identonym: identonym,
+        usageType: usageType,
+        openManual: openManual,
+        logout: logout,
+        rendererID: rendererID,
+        brandingName: brandingName,
+        brandingNameStyle: brandingNameStyle,
+        brandingLogo: brandingLogo
+    }), selectedDashboard && React__default.default.createElement(RenderArea, {
+        dashboards: dashboards,
+        selectedDashboard: selectedDashboard,
+        setSelectedDashboard: setSelectedDashboard,
+        renderView: renderView,
+        setRenderView: setRenderView,
+        fullRenderArea: fullRenderArea,
+        setFullRenderArea: setFullRenderArea,
+        theme: theme
+    }), !selectedDashboard && noDashboardRender && React__default.default.createElement(StyledNoDashboardRender, null, noDashboardRender));
+};
+
 const StyledEntityView = styled__default.default.div`
     position: relative;
     height: 100%;
@@ -2832,6 +3132,7 @@ const EntityView$1 = React.forwardRef(((properties, reference) => {
 }));
 
 const containers = {
+    DashboardsRenderer: DashboardsRenderer$1,
     EntityView: EntityView$1
 };
 
@@ -3980,10 +4281,12 @@ var index = Object.assign(Object.assign(Object.assign(Object.assign(Object.assig
 
 const {buttons: {LinkButton: LinkButton, PureButton: PureButton, RefreshButton: RefreshButton}, form: {FormLeftRight: FormLeftRight, FormObliterate: FormObliterate, Formbutton: Formbutton, Formitem: Formitem, Formline: Formline}, general: {GlobalStyles: GlobalStyles}, inputs: {Dropdown: Dropdown, EntityPill: EntityPill, EntityPillGroup: EntityPillGroup, InputBox: InputBox, InputDescriptor: InputDescriptor, InputLine: InputLine, InputSwitch: InputSwitch, Itemsline: Itemsline, Select: Select, Slider: Slider, Switch: Switch, Textline: Textline}, markers: {HR: HR, ProgressCircle: ProgressCircle, Spinner: Spinner, Tooltip: Tooltip}, typography: {Heading: Heading, Paragraph: Paragraph}, varia: {CopyableLine: CopyableLine, NewPageLink: NewPageLink, ScrollableLine: ScrollableLine, TextItem: TextItem}} = universal;
 
-const {containers: {EntityView: EntityView}, head: {Head: Head}, notifications: {Notification: Notification, Notifications: Notifications}, sitting: {SittingTray: SittingTray}, toolbars: {HorizontalToolbarButton: HorizontalToolbarButton, ToolbarControls: ToolbarControls, ToolbarGeneral: ToolbarGeneral, ToolbarSpecific: ToolbarSpecific, VerticalToolbarButton: VerticalToolbarButton}} = pluridal;
+const {containers: {DashboardsRenderer: DashboardsRenderer, EntityView: EntityView}, head: {Head: Head}, notifications: {Notification: Notification, Notifications: Notifications}, sitting: {SittingTray: SittingTray}, toolbars: {HorizontalToolbarButton: HorizontalToolbarButton, ToolbarControls: ToolbarControls, ToolbarGeneral: ToolbarGeneral, ToolbarSpecific: ToolbarSpecific, VerticalToolbarButton: VerticalToolbarButton}} = pluridal;
 
 exports.CopyableLine = CopyableLine;
 
+exports.DashboardsRenderer = DashboardsRenderer;
+
 exports.Dropdown = Dropdown;
 
 exports.EntityPill = EntityPill;