@eccenca/gui-elements 6.3.0 → 22.0.0-rc.6

package/src/components/Iframe/Iframe.tsx

@@ -0,0 +1,89 @@
+/*
+    shows iframe and spinner as long as it is not loaded
+*/
+
+import React, { useState, useEffect } from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {TestableComponent} from "../interfaces";
+import Spinner from "../Spinner/Spinner";
+
+export interface IframeProps extends TestableComponent {
+    // additional class names
+    className?: string;
+    // <iframe> elements must have a unique title property
+    title: string;
+    // iframe source url
+    src: string;
+    // Set height that iframe should use, roughly based on viewport height
+    useViewportHeight?: "quarter" | "third" | "half" | "full";
+    // use full space that is provided by parent element (requires non-"static" position)
+    useAvailableSpace?: boolean;
+    /**
+     * Use height calculated from iframe content.
+     * Currently this only works when the iframe content is not changed after the onLoad event by lazy loading, etc.
+     * It also takes not height changes into account that are based on resized viewport
+     */
+    useContentHeight?: boolean;
+    // Set iframe background color, need to be a valid CSS color definition
+    backgroundColor?: string;
+    // native (forwarded) properties of HTML iframe element
+    htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">
+}
+
+export const Iframe = React.forwardRef<HTMLIFrameElement, IframeProps>(({
+    title,
+    className = "",
+    useViewportHeight,
+    useAvailableSpace = false,
+    useContentHeight = false,
+    backgroundColor = "",
+    htmlIframeProps = {},
+    ...otherReactProps
+}: IframeProps, ref) => {
+    const [isLoaded, setIsLoaded] = useState<boolean>(false);
+    const [contentHeight, setContentHeight] = useState<number | undefined>(undefined);
+    const newRef = React.useRef<HTMLIFrameElement>(null);
+    useEffect(() => {
+        const iframeRef = ref??newRef;
+        if(iframeRef && "current" in iframeRef && iframeRef.current) {
+            if (!!backgroundColor && isLoaded) {
+                const iframeDocStyle = iframeRef?.current?.contentDocument?.documentElement?.style;
+                const iframeBodyStyle = iframeRef?.current?.contentDocument?.body?.style;
+                if (iframeDocStyle && iframeBodyStyle) {
+                    iframeDocStyle.backgroundColor = backgroundColor;
+                    iframeBodyStyle.backgroundColor = backgroundColor;
+                }
+            }
+            setContentHeight(iframeRef.current.contentWindow?.document?.body?.scrollHeight);
+        }
+    }, [ref, isLoaded, backgroundColor]);
+    const classNames = `${eccgui}-iframe` +
+        (!!useViewportHeight ? ` ${eccgui}-iframe--${useViewportHeight}height` : "") +
+        (!!useAvailableSpace ? ` ${eccgui}-iframe--useavailablespace` : "");
+    const { onLoad = (e: any)=>{}, style, ...otherOriginalIframeProps } = htmlIframeProps;
+    return (
+        <div className={classNames}>
+            {!isLoaded && <Spinner />}
+            <iframe
+                className={className??undefined}
+                ref={ref??newRef}
+                title={title}
+                {...otherOriginalIframeProps}
+                {...otherReactProps}
+                onLoad={(e) => { setIsLoaded(true); onLoad(e); }}
+                style={{
+                    ...(style??{}),
+                    ...(!isLoaded ? {
+                        visibility: "hidden",
+                        position: "absolute",
+                        left: "-10000em",
+                    } as React.CSSProperties : {}),
+                    ...((useContentHeight && !!contentHeight) ? {
+                        height: `${contentHeight}px`,
+                    } : {})
+                }}
+                scrolling={(useContentHeight && !!contentHeight) ? "no" : "yes"}
+            />
+        </div>
+    );
+});

package/src/components/Iframe/IframeModal.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import SimpleDialog, { SimpleDialogProps } from "../Dialog/SimpleDialog";
+import IconButton from "../Icon/IconButton";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Iframe, IframeProps } from "./Iframe";
+
+export interface IframeModalProps extends Omit<SimpleDialogProps, "children"> {
+    // The title of the dialog
+    title: string;
+    // iframe source url
+    src: string;
+    // Dialog is initailly displayed in fullscreen size
+    startFullscreen?: boolean;
+    // Forward properties to Iframe component
+    compIframeProps?: Omit<IframeProps, "title" | "src" | "htmlIframeProps"> & React.RefAttributes<HTMLIFrameElement>;
+    // native (forwarded) properties of HTL iframe element
+    htmlIframeProps?: Omit<React.IframeHTMLAttributes<HTMLIFrameElement>, "title" | "className" | "src">
+}
+
+/** Modal that contains an iframe and supports full screen mode. */
+export function IframeModal({
+    title,
+    src,
+    className="",
+    startFullscreen = false,
+    compIframeProps = {},
+    htmlIframeProps = {},
+    headerOptions,
+    size = "large",
+    ...otherSimpleDialogProps
+}: IframeModalProps) {
+    const [displayFullscreen, setDisplayFullscreen] = React.useState<boolean>(startFullscreen);
+    const {
+        useViewportHeight,
+        useAvailableSpace,
+        useContentHeight,
+        ref,
+        ...otherCompIframeProps
+    } = compIframeProps;
+    const internalRef = React.useRef<HTMLIFrameElement>(null);
+    const iframeRef = ref ?? internalRef;
+
+    return (
+        <SimpleDialog
+            hasBorder
+            title={title}
+            headerOptions={(
+                <>
+                    <IconButton
+                        name={displayFullscreen ? "toggler-minimize" : "toggler-maximize"}
+                        onClick={()=>setDisplayFullscreen(!displayFullscreen)}
+                    />
+                    <>
+                        {headerOptions}
+                    </>
+                </>
+            )}
+            className={
+                `${eccgui}-iframemodal` +
+                (className ? ` ${className}` : "")
+            }
+            size={displayFullscreen ? "fullscreen" : size}
+            {...otherSimpleDialogProps}
+        >
+            <Iframe
+                title={title}
+                src={src}
+                useAvailableSpace={(!useViewportHeight && !useContentHeight) ? true : useAvailableSpace}
+                useContentHeight={useContentHeight}
+                useViewportHeight={useViewportHeight}
+                htmlIframeProps={htmlIframeProps}
+                {...otherCompIframeProps}
+                ref={ref??iframeRef}
+            />
+        </SimpleDialog>
+    )
+}

package/src/components/Iframe/iframe.scss

@@ -0,0 +1,49 @@
+.#{eccgui}-iframe iframe {
+    width: 100%;
+}
+
+// provide calc value to remove header + card title + white space from viewport height
+// app header minus two spacings minus card header
+$eccgui-iframereduction: "#{mini-units(8)} - #{$eccgui-size-card-spacing} - #{$button-height}";
+
+.#{eccgui}-iframe--quarterheight {
+    height: calc(25vh - #{$eccgui-iframereduction});
+}
+
+.#{eccgui}-iframe--thirdheight {
+    height: calc(33vh - #{$eccgui-iframereduction});
+}
+
+.#{eccgui}-iframe--halfheight {
+    height: calc(50vh - #{$eccgui-iframereduction});
+}
+
+.#{eccgui}-iframe--fullheight {
+    height: calc(100vh - #{$eccgui-iframereduction});
+}
+
+.#{eccgui}-iframe--useavailablespace {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    height: auto;
+}
+
+iframe {
+    .#{eccgui}-iframe--quarterheight > &,
+    .#{eccgui}-iframe--thirdheight > &,
+    .#{eccgui}-iframe--halfheight > &,
+    .#{eccgui}-iframe--fullheight > &,
+    .#{eccgui}-iframe--useavailablespace > & {
+        height: 100%;
+    }
+}
+
+.#{eccgui}-iframemodal {
+    .#{eccgui}-card__content {
+        position: relative;
+    }
+}

package/src/components/Label/Label.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Tooltip from "../Tooltip/Tooltip";
+import Icon from "../Icon/Icon";
+
+function Label({
+    children,
+    className = "",
+    disabled,
+    text,
+    info,
+    tooltip,
+    tooltipProperties,
+    isLayoutForElement = "label",
+    ...otherProps
+}: any) {
+    let htmlElementstring = isLayoutForElement;
+    htmlElementstring = disabled && htmlElementstring === "label" ? "span" : htmlElementstring;
+    const labelElement = React.createElement(htmlElementstring);
+
+    return text ? (
+        <labelElement.type
+            className={`${eccgui}-label` + (className ? " " + className : "") + (disabled ? ` ${eccgui}-label--disabled` : "")}
+            {...otherProps}
+            htmlFor={disabled ? "" : otherProps.htmlFor}
+        >
+            <span className={`${eccgui}-label__text`}>{text}</span>
+            {info && <span className={`${eccgui}-label__info`}>{info}</span>}
+            {tooltip && (
+                <span className={`${eccgui}-label__tooltip`}>
+                    <Tooltip content={tooltip} disabled={disabled} {...tooltipProperties}>
+                        <Icon name="item-info" small />
+                    </Tooltip>
+                </span>
+            )}
+            {children && <span className={`${eccgui}-label__other`}>{children}</span>}
+        </labelElement.type>
+    ) : (
+        <></>
+    );
+}
+
+export default Label;

package/src/components/Label/label.scss

@@ -0,0 +1,75 @@
+$eccgui-size-typo-label: $eccgui-size-typo-caption !default;
+$eccgui-size-typo-label-lineheight: $eccgui-size-typo-caption-lineheight !default;
+$eccgui-color-label-text: $eccgui-color-workspace-text;
+$eccgui-color-label-info: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted);
+
+.#{$eccgui}-label {
+    display: block;
+    font-size: $eccgui-size-typo-label;
+    line-height: $eccgui-size-typo-label-lineheight;
+    color: $eccgui-color-label-text;
+    vertical-align: middle;
+
+    .#{$eccgui}-typography__overflowtext--passdown > & {
+        display: flex;
+        align-items: flex-start;
+        max-width: 100%;
+    }
+}
+
+.#{$eccgui}-label--disabled {
+    opacity: $eccgui-opacity-disabled;
+}
+
+.#{$eccgui}-label__text {
+    .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
+        display: block;
+        min-width: 0;
+        max-width: none;
+        flex-grow: 0;
+        flex-shrink: 1;
+    }
+}
+
+.#{$eccgui}-label__info {
+    color: $eccgui-color-label-info;
+    &:before {
+        content: "(";
+    }
+    &:after {
+        content: ")";
+    }
+
+    .#{$eccgui}-label__text + & {
+        margin-left: $eccgui-size-inline-whitespace / 2;
+    }
+
+    .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
+        display: block;
+        min-width: 0;
+        max-width: none;
+        flex-grow: 0;
+        flex-shrink: 1;
+    }
+}
+
+.#{$eccgui}-label__tooltip {
+    color: $eccgui-color-label-info;
+
+    .#{$eccgui}-label__text + &,
+    .#{$eccgui}-label__info + & {
+        margin-left: $eccgui-size-inline-whitespace / 2;
+    }
+
+    .#{$eccgui}-typography__overflowtext--passdown > .#{$eccgui}-label > & {
+        min-width: 0;
+        max-width: none;
+        flex-grow: 0;
+        flex-shrink: 0;
+    }
+}
+
+.#{$eccgui}-label__other {
+    display: inline-block;
+    margin-left: $eccgui-size-inline-whitespace;
+}

package/src/components/Link/Link.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import {Link as CarbonLink} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { openInNewTab } from "../../common/utils/openInNewTab";
+
+function Link({ className = "", children, href, onClick,  ...otherProps }: any) {
+    return (
+      <CarbonLink
+        className={`${eccgui}-link ` + className}
+        {...otherProps}
+        href={href}
+        onClick={(e: React.MouseEvent<HTMLElement>) => openInNewTab(e, onClick, href)}
+      >
+        {children}
+      </CarbonLink>
+    );
+}
+
+export default Link;

package/src/components/Link/link.scss

@@ -0,0 +1,6 @@
+@import "~carbon-components/scss/components/link/link";
+
+.#{$prefix}--link {
+    font-size: 1em;
+    line-height: inherit;
+}

package/src/components/List/List.tsx

@@ -0,0 +1,46 @@
+import Button from "../Button/Button";
+import React, {useEffect} from "react";
+
+interface ListProps <T>{
+    items: T[]
+    /** Renders the item. */
+    itemRenderer: (item: T) => React.ReactNode
+    /** The ID/key of an item. */
+    itemId: (item: T) => string
+    /** Limit the numbers of shown (and rendered) components. */
+    limitOptions?: {
+        initialMax: number
+        stepSize: number
+    }
+    moreLabel?: string
+}
+
+/** A generic list component with support of various performance/scalability improvements. */
+function List<T>({items, itemRenderer, itemId, limitOptions, moreLabel = "Show more..."}: ListProps<T>) {
+    // The number of items to show in the list, undefined means unlimited
+    const [nrOfItemsToShow, setNrOfItemsToShow] = React.useState<number | undefined>(limitOptions?.initialMax ?? undefined)
+
+    useEffect(() => {
+        setNrOfItemsToShow(limitOptions?.initialMax ?? undefined)
+    }, [items.length, limitOptions?.initialMax])
+
+    const onShowMore = () => {
+        if(limitOptions) {
+            setNrOfItemsToShow(current => (current ?? 0)  + limitOptions.stepSize)
+        }
+    }
+
+    return <ol>
+        {
+            (nrOfItemsToShow ? items.slice(0, nrOfItemsToShow) : items)
+                .map(item => {
+                    return <li key={itemId(item)}>
+                        {itemRenderer(item)}
+                    </li>
+                })
+        }
+        {nrOfItemsToShow != null && nrOfItemsToShow < items.length && <Button onClick={onShowMore} fill={true}>{moreLabel}</Button>}
+    </ol>
+}
+
+export default List

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Menu as BlueprintMenu } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function Menu({children, className='', ...restProps}: any) {
+    return <BlueprintMenu {...restProps} className={`${eccgui}-menu__list ` + className}>{children}</BlueprintMenu>;
+}
+
+export default Menu;

package/src/components/Menu/MenuDivider.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MenuDivider as BlueprintMenuDivider } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+function MenuDivider({children, className='', ...restProps}: any) {
+    return <BlueprintMenuDivider {...restProps} className={`${eccgui}-menu__divider ` + className}>{children}</BlueprintMenuDivider>;
+}
+
+export default MenuDivider;

package/src/components/Menu/MenuItem.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {MenuItem as BlueprintMenuItem, MenuItemProps} from "@blueprintjs/core";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
+import Icon from '../Icon/Icon';
+import { openInNewTab } from '../../common/utils/openInNewTab';
+import {ValidIconName} from "../Icon/canonicalIconNames";
+
+interface IProps {
+    children?: React.ReactNode | React.ReactNode[]
+    className?: string
+    icon?: ValidIconName | string[]
+    // Props defined by the Blueprint component that should be forwarded
+    internalProps?: Partial<MenuItemProps> & React.AnchorHTMLAttributes<HTMLAnchorElement>
+    // FIXME: For backward compatibility, should be avoided in all code bases
+    [key: string]: any
+}
+
+/** A single item in a Menu. */
+function MenuItem({
+                      children,
+                      className = '',
+                      icon,
+                      internalProps,
+                      onClick,
+                      href,
+                      ...restProps
+                  }: IProps) {
+    const actualHref = internalProps?.href ?? href;
+    const onClickHandler = internalProps?.onClick ?? onClick;
+    return (
+        <BlueprintMenuItem
+            {...internalProps}
+            {...restProps}
+            href={actualHref}
+            onClick={(e) => openInNewTab(e, onClickHandler, actualHref)}
+            className={`${eccgui}-menu__item ` + className}
+            icon={
+                icon ? <Icon name={icon} /> : false
+            }
+        >
+            {children}
+        </BlueprintMenuItem>
+    );
+}
+
+export default MenuItem;

package/src/components/Menu/menu.scss

@@ -0,0 +1,79 @@
+// uses button colors, we can remove it if we decide to use the blueprint buttons
+$button-intents: (
+    "primary": (
+        $pt-intent-primary,
+        $blue2,
+        $blue1,
+    ),
+    "success": (
+        $pt-intent-success,
+        $green2,
+        $green1,
+    ),
+    "warning": (
+        $pt-intent-warning,
+        $orange2,
+        $orange1,
+    ),
+    "danger": (
+        $pt-intent-danger,
+        $red2,
+        $red1,
+    ),
+) !default;
+$minimal-button-background-color-hover: rgba($gray4, 0.3) !default;
+$minimal-button-background-color-active: rgba($gray2, 0.3) !default;
+$dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default;
+$dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default;
+
+// $half-grid-size: $pt-grid-size / 2 !default;
+// $menu-item-border-radius: $pt-border-radius - 1 !default;
+// $menu-item-line-height-factor: 1.4;
+// $menu-item-line-height: round($pt-font-size * $menu-item-line-height-factor);
+// $menu-item-line-height-large: round($pt-font-size-large * $menu-item-line-height-factor);
+$menu-min-width: 0 !default;
+// $menu-item-padding: ($pt-button-height - $pt-icon-size-standard) / 2 !default;
+// $menu-item-padding-large: ($pt-button-height-large - $pt-icon-size-large) / 2 !default;
+// $menu-item-padding-vertical: ($pt-button-height - $menu-item-line-height) / 2 !default;
+// $menu-item-padding-vertical-large: ($pt-button-height-large - $menu-item-line-height-large) / 2 !default;
+$menu-background-color: transparent !default;
+// $dark-menu-background-color: $dark-gray4 !default;
+// $menu-item-color-hover: $minimal-button-background-color-hover !default;
+// $menu-item-color-active: $minimal-button-background-color-active !default;
+// $dark-menu-item-color-hover: $dark-minimal-button-background-color-hover !default;
+// $dark-menu-item-color-active: $dark-minimal-button-background-color-active !default;
+
+@import "~@blueprintjs/core/src/components/menu/menu";
+
+.#{$ns}-menu {
+    padding: 0;
+
+    .#{$ns}-popover-content > & {
+        padding: $eccgui-size-inline-whitespace / 2;
+        min-width: 10em;
+        max-width: 20em;
+    }
+}
+
+.#{$prefix}--side-nav--rail {
+    .#{$ns}-menu-item {
+        white-space: nowrap;
+        max-width: calc(#{2*$menu-item-padding} + 20px); // padding + normal icon width
+    }
+
+    .#{$ns}-text-overflow-ellipsis {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        opacity: $eccgui-opacity-invisible;
+    }
+
+    &:hover {
+        .#{$ns}-menu-item {
+            max-width: none;
+        }
+        .#{$ns}-text-overflow-ellipsis {
+            opacity: $eccgui-opacity-regular;
+            transition: opacity 0.11s;
+        }
+    }
+}

package/src/components/Notification/Notification.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Toast as BlueprintToast, Classes as BlueprintClassNames } from "@blueprintjs/core";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ClassNames as IntentClassNames} from "../../common/Intent";
+import Icon from "./../Icon/Icon";
+
+function Notification({
+    actions,
+    children,
+    className,
+    message,
+    success = false,
+    warning = false,
+    danger = false,
+    neutral = false,
+    fullWidth = false,
+    iconName = "state-info",
+    timeout,
+    ...otherProps
+}: any) {
+    let intentLevel: string = IntentClassNames.INFO;
+    let iconSymbol = iconName;
+    switch (true) {
+        case success:
+            intentLevel = IntentClassNames.SUCCESS;
+            iconSymbol = "state-success";
+            break;
+        case warning:
+            intentLevel = IntentClassNames.WARNING;
+            iconSymbol = "state-warning";
+            break;
+        case danger:
+            intentLevel = IntentClassNames.DANGER;
+            iconSymbol = "state-danger";
+            break;
+        case neutral:
+            intentLevel = IntentClassNames.NEUTRAL;
+            break;
+    }
+
+    const content = actions ? (
+        <div className={`${eccgui}-notification__content`}>
+            <div className={`${eccgui}-notification__messagebody`}>{message ? message : children}</div>
+            <div className={`${eccgui}-notification__actions`}>{actions}</div>
+        </div>
+    ) : message ? (
+        message
+    ) : (
+        children
+    );
+
+    return (
+        <BlueprintToast
+            className={
+                `${eccgui}-notification ` +
+                intentLevel +
+                (className ? ` ${className}` : "") +
+                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") +
+                (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)
+            }
+            message={content}
+            timeout={timeout ? timeout : 0}
+            icon={!!iconSymbol ? <Icon name={iconSymbol} className={BlueprintClassNames.ICON} /> : undefined}
+            {...otherProps}
+        />
+    );
+}
+
+export default Notification;

package/src/components/Notification/Toast.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Notification from "./Notification";
+
+function Toast({ children, className, timeout = 10000, ...otherProps }: any) {
+    return (
+        <Notification
+            className={`${eccgui}-notification--toast` + (className ? " " + className : "")}
+            timeout={timeout}
+            {...otherProps}
+        >
+            {children}
+        </Notification>
+    );
+}
+
+export default Toast;