@eccenca/gui-elements 22.0.1 → 22.1.0

package/src/components/MultiSelect/MultiSelect.tsx

@@ -0,0 +1,373 @@
+import React from "react";
+import {Intent as BlueprintIntent} from "@blueprintjs/core";
+import {IItemRendererProps, MultiSelect as BlueprintMultiSelect, MultiSelectProps} from "@blueprintjs/select";
+import MenuItem from "../Menu/MenuItem";
+import Highlighter from "../Typography/Highlighter";
+import Button from "../Button/Button";
+import OverflowText from "../Typography/OverflowText";
+import {HTMLInputProps} from "@blueprintjs/core/src/common/props";
+import {removeExtraSpaces} from "../../common/utils/stringUtils";
+
+export interface SelectedParamsType<T> {
+    newlySelected: T;
+    selectedItems: T[];
+    createdItems: Partial<T>[];
+}
+
+interface IProps<T> extends Pick<MultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
+    /**
+     * Returns the unique ID of an item. This will be used for equality of items.
+     */
+    itemId: (item: T) => string;
+    /**
+     * Returns the label of an item.
+     * this would be used in the item selection list as well as the multi-select input
+     */
+    itemLabel: (item: T) => string;
+    /**
+     * When set to true will set the multi-select value with all the items provided
+     */
+    prePopulateWithItems?: boolean;
+    /**
+     *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
+     */
+    onSelection?: (params: SelectedParamsType<T>) => void;
+    /**
+     * Props to spread to `Popover`. Note that `content` cannot be changed.
+     */
+    popoverProps?: MultiSelectProps<T>["popoverProps"];
+    /**
+     * Props to spread to `TagInput`. Use `query` and `onQueryChange` to control the input.
+     */
+    tagInputProps?: MultiSelectProps<T>["tagInputProps"];
+
+    /** Additional properties for the (query) input field of the multi-selection. */
+    inputProps?: HTMLInputProps;
+
+    /**
+     * prop to listen for query changes, when text is entered in the multi-select input
+     */
+    runOnQueryChange?: (query: string) => Promise<T[] | undefined>;
+    /**
+     * Whether the component should take up the full width of its container.
+     * This overrides `popoverProps.fill` and `tagInputProps.fill`.
+     */
+    fullWidth?: boolean;
+    /**
+     * text content to render when filtering items returns zero results.
+     * If omitted, "No results." will be rendered in this case.
+     */
+    noResultText?: string;
+    /**
+     * text content to render when a new item non-existing in filtered items is about to be created .
+     * If omitted, "No results." will be rendered in this case.
+     */
+    newItemCreationText?: string;
+    /**
+     * Allows to creates new item from a given query. If this is not provided then no new items can be created.
+     */
+    createNewItemFromQuery?: (query: string) => T
+    /**
+     * Items that were newly created and not taken from the list will be post-fixed with this string.
+     */
+    newItemPostfix?: string
+    /**
+     * The input element is displayed with primary color scheme.
+     */
+    hasStatePrimary?: boolean;
+    /**
+     * The input element is displayed with success (some type of green) color scheme.
+     */
+    hasStateSuccess?: boolean;
+    /**
+     * The input element is displayed with success (some type of orange) color scheme.
+     */
+    hasStateWarning?: boolean;
+    /**
+     * The input element is displayed with success (some type of red) color scheme.
+     */
+    hasStateDanger?: boolean;
+    /**
+     * Disables the input element
+     */
+    disabled?: boolean;
+}
+
+function MultiSelect<T>({
+    items,
+    prePopulateWithItems,
+    itemId,
+    itemLabel,
+    onSelection,
+    popoverProps,
+    tagInputProps,
+    inputProps,
+    runOnQueryChange,
+    fullWidth = true,
+    noResultText = "No results.",
+    newItemCreationText = "Add new item",
+    newItemPostfix = " (new item)",
+    hasStatePrimary,
+    hasStateDanger,
+    hasStateSuccess,
+    hasStateWarning,
+    disabled,
+    createNewItemFromQuery,
+    ...otherProps
+}: IProps<T>) {
+    const [createdItems, setCreatedItems] = React.useState<T[]>([]);
+    const [itemsCopy, setItemsCopy] = React.useState<T[]>([...items]);
+    const [filteredItemList, setFilteredItemList] = React.useState<T[]>([]);
+    const [selectedItems, setSelectedItems] = React.useState<T[]>(() => (prePopulateWithItems ? [...items] : []));
+    const [query, setQuery] = React.useState<string | undefined>(undefined);
+    //currently focused element in popover list
+    const [focusedItem, setFocusedItem] = React.useState<T | null>(null);
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    let intent;
+    switch (true) {
+        case hasStatePrimary:
+            intent = BlueprintIntent.PRIMARY;
+            break;
+        case hasStateSuccess:
+            intent = BlueprintIntent.SUCCESS;
+            break;
+        case hasStateWarning:
+            intent = BlueprintIntent.WARNING;
+            break;
+        case hasStateDanger:
+            intent = BlueprintIntent.DANGER;
+            break;
+        default:
+            break;
+    }
+
+    /** update items copy when the items change
+     *  e.g for auto-complete when query change
+     */
+    React.useEffect(() => {
+        setItemsCopy([...items, ...createdItems]);
+        setFilteredItemList([...items, ...createdItems]);
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [items.map((item) => itemId(item)).join("|")]);
+
+    React.useEffect(() => {
+        onSelection &&
+            onSelection({
+                newlySelected: selectedItems.slice(-1)[0],
+                createdItems,
+                selectedItems,
+            });
+        /* eslint-disable react-hooks/exhaustive-deps */
+    }, [
+        onSelection,
+        selectedItems.map((item) => itemId(item)).join("|"),
+        createdItems.map((item) => itemId(item)).join("|"),
+    ]);
+
+    /**
+     * using the equality prop specified checks if an item has already been selected
+     * @param matcher
+     * @returns
+     */
+    const itemHasBeenSelectedAlready = (matcher: string) => {
+        return !!selectedItems.find((item) => itemId(item) === matcher);
+    };
+
+    /**
+     * removes already selected item from the selectedItems
+     * @param matcher
+     */
+    const removeItemSelection = (matcher: string) => {
+        setSelectedItems((items) => items.filter((item) => itemId(item) !== matcher));
+    };
+
+    /**
+     * selects and deselects an item from selection list
+     * if the item exists it removes it instead
+     * @param item
+     */
+    const onItemSelect = (item: T) => {
+        if (itemHasBeenSelectedAlready(itemId(item))) {
+            removeItemSelection(itemId(item));
+        } else {
+            setSelectedItems((items) => [...items, item]);
+        }
+        inputRef.current?.select()
+    };
+
+    /**
+     * search through item list using "label prop" and update the items popover
+     * @param query
+     */
+    const onQueryChange = async (query: string) => {
+        if (query.length) {
+            setQuery(query);
+            setFilteredItemList([])
+            const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query)));
+            setFilteredItemList(() =>
+                [...(resultFromQuery ?? itemsCopy), ...createdItems].filter(item =>
+                    itemLabel(item).toLowerCase().includes(query.toLowerCase())
+                )
+            );
+        }
+    };
+
+    // Renders the entries of the (search) options list
+    const optionRenderer = (label: string) => {
+        return <Highlighter label={label} searchValue={query} />;
+    };
+
+    /**
+     * defines how an item in the item list is displayed
+     */
+    const onItemRenderer = (item: T, { handleClick, modifiers }: IItemRendererProps) => {
+        if (!modifiers.matchesPredicate) {
+            return null;
+        }
+        let label = itemLabel(item)
+        if(createdItems.find(created => itemId(created) === itemId(item))) {
+            label += newItemPostfix
+        }
+        return (
+            <MenuItem
+                active={modifiers.active}
+                key={itemId(item)}
+                icon={itemHasBeenSelectedAlready(itemId(item)) ? "state-checked" : "state-unchecked"}
+                onClick={handleClick}
+                text={optionRenderer(label)}
+                shouldDismissPopover={false}
+            />
+        );
+    };
+
+    /**
+     * clear all selected items in the multi-select input
+     */
+    const handleClear = () => {
+        setSelectedItems([]);
+        setFilteredItemList(itemsCopy);
+    };
+
+    /**
+     * remove a specific item from the multi-select input
+     * @param label
+     * @param index
+     */
+    const removeTagFromSelectionViaIndex = (label: React.ReactNode, index: number) => {
+        setSelectedItems([...selectedItems.slice(0, index), ...selectedItems.slice(index + 1)]);
+        setCreatedItems(items => items.filter(item => itemLabel(item) !== label));
+    };
+
+    /**
+     * Utility function to create a new Item. createNewItemFromQuery is assumed to be defined!
+     */
+    const createNewItem = (query: string): T => {
+        const newItem = createNewItemFromQuery!!(query);
+        //set new items
+        setCreatedItems((items) => [...items, newItem]);
+        setQuery("");
+        itemsCopy.push(newItem);
+        return newItem;
+    };
+
+    /**
+     * added functionality to create new item when there are no matching items on enter keypress
+     * @param event
+     */
+    const handleOnKeyUp = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Enter" && !filteredItemList.length && !!query && createNewItemFromQuery) {
+            createNewItem(query);
+        }
+        inputRef.current?.focus();
+    };
+
+    /**
+     * added functionality to either create new item
+     * when there are no matching items or select an item on tab keypress
+     * @param event
+     */
+    const handleOnKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+        if (event.key === "Tab" && !!query) {
+            event.preventDefault();
+            focusedItem ? onItemSelect(focusedItem) : onItemSelect(createNewItem(query));
+            setQuery("");
+            setTimeout(() => inputRef.current?.focus());
+        }
+    };
+
+    /**
+     * create new item handler, displays the new item selector and creates a new item when selected
+     * @param label '
+     * @param active
+     * @param handleClick
+     * @returns
+     */
+    const newItemRenderer = (label: string, active: boolean, handleClick: React.MouseEventHandler<HTMLElement>) => {
+        if (!createNewItemFromQuery) return undefined;
+        const clickHandler = (e: React.MouseEvent<HTMLElement>) => {
+            createNewItem(label);
+            handleClick(e);
+        };
+        return (
+            <MenuItem
+                id={"new-item"}
+                icon="item-add-artefact"
+                active={active}
+                key={label}
+                onClick={clickHandler}
+                text={<OverflowText>{`${newItemCreationText} '${label}'`}</OverflowText>}
+            />
+        );
+    };
+
+    const clearButton =
+        selectedItems.length > 0 ? (
+            <Button icon="operation-clear" data-test-id="clear-all-items" minimal={true} onClick={handleClear} />
+        ) : undefined;
+
+    return (
+        <BlueprintMultiSelect<T>
+            {...otherProps}
+            query={query}
+            onQueryChange={onQueryChange}
+            items={filteredItemList}
+            onItemSelect={onItemSelect}
+            itemRenderer={onItemRenderer}
+            itemsEqual={(a: T, b: T) => itemId(a) === itemId(b)}
+            selectedItems={selectedItems}
+            noResults={<MenuItem disabled={true} text={noResultText} />}
+            tagRenderer={item => itemLabel(item)}
+            createNewItemRenderer={newItemRenderer}
+            onActiveItemChange={(activeItem) => setFocusedItem(activeItem)}
+            fill={fullWidth}
+            createNewItemFromQuery={createNewItemFromQuery}
+            tagInputProps={{
+                inputProps: {
+                    id: "item",
+                    autoComplete: "off",
+                    ...inputProps
+                },
+                inputRef: inputRef,
+                intent,
+                addOnBlur: true,
+                onKeyDown: handleOnKeyDown,
+                onKeyUp: handleOnKeyUp,
+                onRemove: removeTagFromSelectionViaIndex,
+                rightElement: disabled ? undefined : clearButton,
+                tagProps: { minimal: true },
+                disabled,
+                ...tagInputProps,
+            }}
+            popoverProps={{
+                minimal: true,
+                position: "bottom-left",
+                hasBackdrop: true,
+                ...popoverProps,
+                defaultIsOpen: true,
+            }}
+        />
+    );
+}
+
+export default MultiSelect;

package/src/components/Notification/Notification.stories.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { LoremIpsum } from 'react-lorem-ipsum';
+
+import Notification from "./Notification";
+import HtmlContentBlock from "./../Typography/HtmlContentBlock";
+import Button from "./../Button/Button";
+import Spacing from "./../Separation/Spacing";
+
+export default {
+    title: "Components/Notification",
+    component: Notification,
+    argTypes: {
+        className: {
+            description: "A space-delimited list of class names.",
+            control: "text",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "string" },
+            }
+        },
+        onDismiss: {
+            description: "Callback invoked when the toast is dismissed, either by the user or by the timeout.",
+            control: "none",
+            table: {
+                defaultValue: { summary: undefined },
+                type: { summary: "(didTimeoutExpire: boolean) => void" },
+            }
+        },
+        timeout: {
+            description: "Milliseconds to wait before automatically dismissing toast. Providing a value less than or equal to 0 will disable the timeout.",
+            control: "number",
+            table: {
+                defaultValue: { summary: 0 },
+                type: { summary: "number" },
+            }
+        },
+        message: {
+            control: "none",
+        },
+    },
+} as ComponentMeta<typeof Notification>;
+
+const TemplateFull: ComponentStory<typeof Notification> = (args) => (
+    <Notification {...args} />
+);
+
+export const ExampleWithMessage = TemplateFull.bind({});
+ExampleWithMessage.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+};
+
+export const ExampleWithChildren = TemplateFull.bind({});
+ExampleWithChildren.args = {
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={1} random={false} />
+            <LoremIpsum p={1} avgSentencesPerParagraph={4} random={false} />
+        </HtmlContentBlock>
+    ),
+    onDismiss: false, // workaround for undefined function in Storybook
+};
+
+export const ExampleNeutralMessage = TemplateFull.bind({});
+ExampleNeutralMessage.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+    neutral: true,
+};
+
+export const ExampleWithActions = TemplateFull.bind({});
+ExampleWithActions.args = {
+    message: <LoremIpsum p={1} avgSentencesPerParagraph={2} random={false} />,
+    onDismiss: false, // workaround for undefined function in Storybook
+    danger: true,
+    actions: [
+        <Button text="Something" key="b1" />,
+        <Spacing size="tiny" vertical />,
+        <Button text="Important" hasStateDanger key="b2" />
+    ]
+};

package/src/components/Notification/Notification.tsx

@@ -1,9 +1,65 @@
 import React from "react";
-import { Toast as BlueprintToast, Classes as BlueprintClassNames } from "@blueprintjs/core";
+import {
+    Toast as BlueprintToast,
+    ToastProps as BlueprintToastProps,
+    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";
+import { ValidIconName } from "./../Icon/canonicalIconNames";
 
+export interface NotificationProps extends Omit<BlueprintToastProps, "message" | "action" | "icon" | "intent">, React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Extra user action elements
+     */
+    actions?: JSX.Element | JSX.Element[];
+    /**
+     * Notification message that can be used as alternative to children elements.
+     */
+    message?: JSX.Element | string;
+    /**
+     * Notification has a neutral color scheme.
+     */
+    neutral?: boolean;
+    /**
+     * Notification is a success info.
+     * This defines the colorization and the icon symbol.
+     */
+    success?: boolean;
+    /**
+     * Notification is a warning alert.
+     * This defines the colorization and the icon symbol.
+     */
+    warning?: boolean;
+    /**
+     * Notification is a danger alert.
+     * This defines the colorization and the icon symbol.
+     */
+    danger?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Depracation notice: Property name will removed in futire versions.
+     * Please use `flexWidth`.
+     * @depracted
+     */
+    fullWidth?: boolean;
+    /**
+     * Notification uses the the given space more flexible.
+     * Default notifcation is displayed in min and max limits.
+     * Those limits are removed by setting this property to `true`.
+     */
+    flexWidth?: boolean;
+    /**
+     * Icon used as depiction that is displayed with the notification.
+     */
+    iconName?: ValidIconName;
+}
+
+/**
+ * Displays a notification message, optionally combined with depiction and further action buttons.
+ * By default it uses colorization of an blueish info alert.
+ */
 function Notification({
     actions,
     children,
@@ -13,11 +69,12 @@ function Notification({
     warning = false,
     danger = false,
     neutral = false,
-    fullWidth = false,
+    fullWidth = false, // deprecated
+    flexWidth = false,
     iconName = "state-info",
     timeout,
     ...otherProps
-}: any) {
+}: NotificationProps) {
     let intentLevel: string = IntentClassNames.INFO;
     let iconSymbol = iconName;
     switch (true) {
@@ -55,7 +112,8 @@ function Notification({
                 `${eccgui}-notification ` +
                 intentLevel +
                 (className ? ` ${className}` : "") +
-                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") +
+                (fullWidth ? ` ${eccgui}-notification--fullwidth` : "") + // deprecated
+                (flexWidth ? ` ${eccgui}-notification--flexwidth` : "") +
                 (otherProps.onDismiss ? "" : ` ${eccgui}-notification--static`)
             }
             message={content}

package/src/components/Notification/notification.scss

@@ -55,6 +55,7 @@
     }
 }
 
+.#{$eccgui}-notification--flexwidth,
 .#{$eccgui}-notification--fullwidth {
     min-width: 0;
     max-width: none;
@@ -77,7 +78,7 @@
     flex-grow: 0;
     flex-shrink: 0;
 
-    .#{$ns}-button {
+    .#{$ns}-button:not([class*="intent"]) {
         color: inherit;
     }
 }

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -18,7 +18,7 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
      * Use multiple columns.
      * Currently only lists using 1 and 2 columns are supported.
      */
-    columns?: number;
+    columns?: 1 | 2;
 }
 
 /**
@@ -42,12 +42,12 @@ function OverviewItemList({
                 (densityHigh ? `${eccgui}-overviewitem__list--highdensity ` : '') +
                 (hasDivider ? `${eccgui}-overviewitem__list--hasdivider ` : '') +
                 (hasSpacing ? `${eccgui}-overviewitem__list--hasspacing ` : '') +
-                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // TODO: add number
+                (columns > 1 ? `${eccgui}-overviewitem__list--hascolumns ` : '') + // FIXME: Support numbers > 2
                 className
             }
         >
             {
-                React.Children.map(children, (child, i) => {
+                React.Children.map(children, (child) => {
                     return <li>{ child }</li>
                 })
             }

package/src/components/RadioButton/radiobutton.scss

@@ -7,6 +7,10 @@
             box-shadow: none;
         }
 
+        input:focus ~ .#{$ns}-control-indicator {
+            outline-offset: 1px;
+        }
+
         input:disabled ~ .#{$ns}-control-indicator,
         input:disabled:checked ~ .#{$ns}-control-indicator
         {

package/src/components/Spinner/Spinner.tsx

@@ -28,7 +28,7 @@ export interface SpinnerProps extends Partial<BlueprintOverlayProps & Omit<Bluep
 function Spinner({
     className = "",
     color = "inherit",
-    description = "Loading indicator", // currently unsupported (TODO)
+    description = "Loading indicator", // currently unsupported (FIXME)
     position = "local",
     size,
     stroke,
@@ -41,6 +41,7 @@ function Spinner({
             const timeoutId = setTimeout(() => setShowSpinner(true), delay);
             return () => clearTimeout(timeoutId);
         }
+        return;
     }, [showSpinner, delay]);
     const availableIntent = ["primary", "success", "warning", "danger", "inherit"];
     const internSizes = {

package/src/components/Switch/switch.scss

@@ -2,3 +2,4 @@
     currently not used, we need to control switch layout in
     ../Checkbox/checkbox.scss for now
 */
+// FIXME: scss styles