@eccenca/gui-elements 23.1.0-easynav.3 → 23.1.0-easynav.4

package/src/components/Icon/IconButton.tsx

@@ -5,7 +5,7 @@ import Icon from "./Icon";
 import { TestIconProps } from "./TestIcon";
 import {ValidIconName} from "./canonicalIconNames";
 
-interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
+export interface IconButtonProps extends Omit<ButtonProps, "icon" | "rightIcon" | "text" | "minimal" | "tooltip"> {
     /**
      * Canonical icon name, or an array of strings.
      * In case of the array the first valid icon name is used.

package/src/components/Icon/canonicalIconNames.tsx

@@ -62,6 +62,7 @@ export type ValidIconName =
     | "item-save"
     | "item-settings"
     | "item-shuffle"
+    | "item-skip-forward"
     | "item-start"
     | "item-stop"
     | "item-upload"
@@ -116,15 +117,20 @@ export type ValidIconName =
     | "state-unchecked"
     | "state-warning"
     | "toggler-caret"
+    | "toggler-caretright"
+    | "toggler-caretdown"
     | "toggler-maximize"
     | "toggler-minimize"
     | "toggler-moveleft"
     | "toggler-moveright"
+    | "toggler-rowexpand"
+    | "toggler-rowcollapse"
     | "toggler-showless"
     | "toggler-showmore"
     | "toggler-star-empty"
     | "toggler-star-filled"
     | "toggler-tree"
+    | "form-template"
     | "undefined";
 
 export type CarbonIconType = React.ComponentType<CarbonIconProps>;
@@ -198,6 +204,7 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "item-save": icons.Save,
     "item-settings": icons.Settings,
     "item-shuffle": icons.Shuffle,
+    "item-skip-forward": icons.SkipForwardFilled,
     "item-start": icons.PlayFilledAlt,
     "item-stop": icons.StopFilledAlt,
     "item-upload": icons.Upload,
@@ -258,16 +265,22 @@ const canonicalIconNames: Record<ValidIconName, CarbonIconType> = {
     "state-warning": icons.WarningAltFilled,
 
     "toggler-caret": icons.CaretSort,
+    "toggler-caretright": icons.CaretRight,
+    "toggler-caretdown": icons.CaretDown,
     "toggler-maximize": icons.Maximize,
     "toggler-minimize": icons.Minimize,
     "toggler-moveleft": icons.ChevronLeft,
     "toggler-moveright": icons.ChevronRight,
+    "toggler-rowexpand": icons.RowExpand,
+    "toggler-rowcollapse": icons.RowCollapse,
     "toggler-showless": icons.ChevronUp,
     "toggler-showmore": icons.ChevronDown,
     "toggler-star-empty": icons.Star,
     "toggler-star-filled": icons.StarFilled,
     "toggler-tree": icons.TreeViewAlt,
 
+    "form-template": icons.Parameter,
+
     undefined: icons.Undefined,
 };
 

package/src/components/Menu/menu.scss

@@ -55,6 +55,10 @@ $menu-background-color: transparent !default;
     }
 }
 
+span.#{$ns}-menu-item-icon:empty {
+    display: none;
+}
+
 .#{$prefix}--side-nav--rail {
     .#{$ns}-menu-item {
         white-space: nowrap;

package/src/components/OverviewItem/overviewitem.scss

@@ -176,9 +176,9 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
     justify-content: flex-end;
     align-items: center;
 
-    //.#{$eccgui}-overviewitem__description + & {
+    &:not(:first-child) {
         margin-left: mini-units(1);
-    //}
+    }
 }
 
 .#{$eccgui}-overviewitem__actions--hiddeninteractions {

package/src/components/Pagination/Pagination.tsx

@@ -26,6 +26,10 @@ export interface PaginationProps extends CarbonPaginationProps {
      * Hide prev/next arrows to navigate through the pages.
      */
     hideNavigationArrows?: boolean;
+    /**
+     * Element is displayed with dividing borders.
+     */
+    hideBorders?: boolean;
 }
 
 function Pagination({
@@ -34,6 +38,7 @@ function Pagination({
     hideInfoText = false,
     hidePageSelect = false,
     hideNavigationArrows = false,
+    hideBorders = false,
     ...otherProps
 }: PaginationProps) {
     return (
@@ -45,7 +50,8 @@ function Pagination({
                 (hidePageSizeConfiguration ? ` ${eccgui}-pagination--hidepagesize` : "") +
                 (hideInfoText ? ` ${eccgui}-pagination--hideinfotext` : "") +
                 (hidePageSelect ? ` ${eccgui}-pagination--hidepageselect` : "") +
-                (hideNavigationArrows ? ` ${eccgui}-pagination--hidenavigation` : "")
+                (hideNavigationArrows ? ` ${eccgui}-pagination--hidenavigation` : "") +
+                (hideBorders ? ` ${eccgui}-pagination--hideborders` : "")
             }
         />
     );
@@ -74,19 +80,33 @@ export const usePagination = ({
     initialPageSize,
 }: IPaginationOptions) => {
     const minSize = Math.min(...pageSizes);
-    const [pagination, setPagination] = useState<IPaginationDetails>({
+    const _pagination = React.useRef<IPaginationDetails>({
         total: 0,
         current: 1,
         limit: initialPageSize ? initialPageSize : minSize,
         minPageSize: minSize,
-    });
-    const onPaginationChange = ({ page, pageSize }: {page: any, pageSize: any}) => {
-        setPagination({ ...pagination, current: page, limit: pageSize });
-    };
+    })
+    const [pagination, _setPagination] = useState<IPaginationDetails>(_pagination.current);
+    const setPagination = React.useCallback((newPagination: IPaginationDetails) => {
+        // Check if pagination has actually changed
+        const current = _pagination.current
+        if (newPagination.current !== current.current ||
+            newPagination.minPageSize !== current.minPageSize ||
+            newPagination.limit !== current.limit ||
+            newPagination.total !== current.total) {
+            _pagination.current = newPagination
+            _setPagination(newPagination)
+        }
+    }, [])
+    const onPaginationChange = React.useCallback(({ page, pageSize }: {page: any, pageSize: any}) => {
+        setPagination({ ..._pagination.current, current: page, limit: pageSize });
+    }, [setPagination]);
     // When the total number of pageable items changes, this function must be called
-    const onTotalChange = (total: number): void => {
-        setPagination({ ...pagination, total: total, current: 1 });
-    };
+    const onTotalChange = React.useCallback((total: number): void => {
+        if(_pagination.current.total !== total) {
+            setPagination({ ..._pagination.current, total: total, current: 1 });
+        }
+    }, [setPagination]);
     const paginationElement = (
         <Pagination
             onChange={onPaginationChange}

package/src/components/Pagination/pagination.scss

@@ -46,3 +46,19 @@ span.#{$prefix}--pagination__text {
         display: none;
     }
 }
+
+.#{$eccgui}-pagination--hideborders {
+    border-top: none;
+
+    .#{$prefix}--select__item-count .#{$prefix}--select-input {
+        border-right: none;
+    }
+
+    .#{$prefix}--select__page-number .#{$prefix}--select-input {
+        border-left: none;
+    }
+
+    .#{$prefix}--pagination__button {
+        border-left: none;
+    }
+}

package/src/components/ProgressBar/index.ts

@@ -0,0 +1 @@
+export * from "./ProgressBar";

package/src/components/Switch/Switch.tsx

@@ -10,16 +10,20 @@ export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
      * Event handler for changed state.
      */
     onChange?: (value: boolean) => any
+    /**
+     * class names
+     */
+    className?: string;
 }
 
-function Switch({onChange, ...otherProps}: SwitchProps) {
+function Switch({onChange, className, ...otherProps}: SwitchProps) {
     const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
         const checked = !!(e as any).target?.checked
         onChange && onChange(checked);
     };
 
     return <BlueprintSwitch
-        className={`${eccgui}-switch`}
+        className={`${eccgui}-switch ${className}`}
         {...otherProps}
         onChange={handleChange}
     />

package/src/components/Table/Table.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import {
+    Table as CarbonTable,
+    TableProps as CarbonTableProps,
+    DataTableSize as CarbonDataTableSize,
+} from "carbon-components-react";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated
+export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted;
+
+export interface TableProps extends Omit<
+    CarbonTableProps,
+    "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
+>, React.TableHTMLAttributes<HTMLTableElement> {
+    /**
+     * Sets basically the height of a row inside the table.
+     * Please use only `small`, `medium` and `large`.
+     * `compact` and `tall` are deprecated.
+     */
+    size?: TableRowHeightSize;
+    /**
+     * All rows are divided by horizontal borders.
+     */
+    hasDivider?: boolean;
+    /**
+     * This will lead to a `colgroup` element within the `table` setting `with` styles for each column.
+     * The table is then displayed `fixed`.
+     * All values need to be valid CSS width expression, e.g. `30px`, `5rem`, `40%`.
+     * If you need to add more attributes to the `col` elements, e.g. class names, then you need to control `colgroup` and `fixed` table by yourself.
+     */
+    columnWidths?: string[];
+    /**
+     * Table is displayed without any own coloring.
+     * For example this can be used for sub tables inside other elements with already set background colors.
+     * Zebra styles won't work if this option is enabled!
+     */
+    colorless?: boolean;
+}
+
+export const tableRowHeightSizes: Record<string, CarbonDataTableSize> = {
+    // current values
+    "small": "xs",
+    "medium": "sm",
+    "large": "md",
+    // deprecated values
+    "compact": "xs",
+    "tall": "md",
+}
+
+function Table({
+    className = "",
+    size = "medium",
+    hasDivider = true,
+    columnWidths,
+    colorless,
+    children,
+    ...otherCarbonTableProps
+}: TableProps) {
+
+    let colLayout : boolean | JSX.Element = false;
+    if (!!columnWidths && columnWidths.length > 0) {
+        colLayout = (
+            <colgroup className={`${eccgui}-simpletable__layout`}>
+                {columnWidths.map((width,i) => <col key={i} style={{ width }}/>)}
+            </colgroup>
+        );
+    }
+
+    return (
+        <CarbonTable
+            className={
+                `${eccgui}-simpletable ${eccgui}-simpletable--${size}` +
+                (hasDivider ? ` ${eccgui}-simpletable--rowdivider` : "") +
+                (colLayout ? ` ${eccgui}-simpletable--haslayout` : "") +
+                (colorless ? ` ${eccgui}-simpletable--colorless` : "") +
+                (className ? ` ${className}` : "")
+            }
+            {...otherCarbonTableProps}
+            size={tableRowHeightSizes[size]}
+        >
+            {!!colLayout && colLayout}
+            {children}
+        </CarbonTable>
+    ) ;
+}
+
+export default Table;

package/src/components/Table/TableContainer.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import {
+    DataTable as CarbonDataTable,
+    DataTableProps as CarbonDataTableProps,
+    TableContainerProps as CarbonTableContainerProps
+} from "carbon-components-react";
+import { TableRowHeightSize,  tableRowHeightSizes } from "./Table";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+interface TableDataContainerProps extends Omit<
+    CarbonDataTableProps,
+    "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
+>, React.TableHTMLAttributes<HTMLTableElement> {
+    children(signature: any): JSX.Element;
+    size?: TableRowHeightSize;
+}
+interface TableSimpleContainerProps extends Omit<
+    CarbonTableContainerProps,
+    "description" | "stickyHeader" | "title" | "useStaticWidth"
+>, React.HTMLAttributes<HTMLDivElement> {
+    children?: JSX.Element;
+}
+
+export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
+
+function TableContainer({
+    className = "",
+    ...otherProps
+}: TableContainerProps) {
+
+    const otherDataTableProps = otherProps as TableDataContainerProps;
+
+    return !!otherDataTableProps.headers || !!otherDataTableProps.rows ? (
+        <CarbonDataTable.TableContainer className={`${eccgui}-simpletable__container ` + className}>
+            <CarbonDataTable
+                {...otherDataTableProps}
+                size={
+                    otherDataTableProps.size
+                        ? tableRowHeightSizes[otherDataTableProps.size]
+                        : tableRowHeightSizes.medium
+                }
+            />
+        </CarbonDataTable.TableContainer>
+    ) : (
+        <CarbonDataTable.TableContainer {...otherProps} className={`${eccgui}-simpletable__container ` + className} />
+    );
+}
+
+export default TableContainer;

package/src/components/Table/TableExpandHeader.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import {
+    TableExpandHeader as CarbonTableExpandHeader,
+    TableExpandHeaderProps as CarbonTableExpandHeaderProps,
+} from "carbon-components-react";
+import IconButton from "./../Icon/IconButton";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TableExpandHeaderProps extends Omit<
+    CarbonTableExpandHeaderProps,
+    "children" | "ariaLabel" | "enableExpando" | "expandIconDescription"
+>, React.ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
+     */
+    togglerText: string;
+};
+
+/**
+ * Adds a button to the table header that can trigger a function to expand/collapse all rows of the table.
+ */
+function TableExpandHeader ({
+    togglerText,
+    isExpanded,
+    onExpand,
+    className,
+    enableToggle,
+    ...otherCarbonTableExpandHeaderProps
+}: TableExpandHeaderProps) {
+
+    const toggleButton = isExpanded ?
+        React.cloneElement(<IconButton name="toggler-rowcollapse" text={togglerText} />, {onClick: onExpand}) :
+        React.cloneElement(<IconButton name="toggler-rowexpand" text={togglerText} />, {onClick: onExpand});
+
+    return (
+        <CarbonTableExpandHeader
+            className={
+                `${eccgui}-simpletable__headexpander` +
+                (!!className ? ` ${className}` : "")
+            }
+            isExpanded={isExpanded}
+            onExpand={onExpand}
+            enableToggle={false}
+            {...otherCarbonTableExpandHeaderProps}
+        >
+            { enableToggle && toggleButton }
+        </CarbonTableExpandHeader>
+    )
+}
+
+export default TableExpandHeader;

package/src/components/Table/TableExpandRow.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import {
+    TableExpandRowProps as CarbonTableExpandRowProps,
+} from "carbon-components-react";
+import {usePrefix as carbonPrefix} from "carbon-components-react/es/index"
+import IconButton from "./../Icon/IconButton";
+import { TableCell } from "./index";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+
+export interface TableExpandRowProps extends Omit<
+    CarbonTableExpandRowProps,
+    "ariaLabel" | "expandIconDescription"
+>, React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.
+     */
+    togglerText: string;
+};
+
+/**
+ * Table row that is suffixed by a cell containing a button to expand/collapse this row.
+ */
+function TableExpandRow ({
+    togglerText,
+    isExpanded,
+    isSelected,
+    onExpand,
+    className,
+    children,
+    ...otherCarbonTableExpandRowProps
+}: TableExpandRowProps) {
+
+    const carbonClassPrefix = carbonPrefix();
+
+    const toggleButton = isExpanded ?
+        React.cloneElement(<IconButton name="toggler-showless" text={togglerText} />, {onClick: onExpand}) :
+        React.cloneElement(<IconButton name="toggler-showmore" text={togglerText} />, {onClick: onExpand});
+
+    return (
+        <tr
+            className={
+                `${eccgui}-simpletable__row` +
+                ` ${carbonClassPrefix}--parent-row` +
+                (isExpanded ? ` ${carbonClassPrefix}--expandable-row` : "") +
+                (isSelected ? ` ${carbonClassPrefix}--data-table--selected` : "") +
+                (!!className ? ` ${className}` : "")
+            }
+            data-parent-row={true}
+            {...otherCarbonTableExpandRowProps}
+        >
+            <TableCell
+                className={
+                    `${eccgui}-simpletable__rowexpander` +
+                    ` ${carbonClassPrefix}--table-expand`
+                }
+            >
+                { toggleButton }
+            </TableCell>
+            { children }
+        </tr>
+    )
+}
+
+export default TableExpandRow;

package/src/components/Table/index.tsx

@@ -0,0 +1,41 @@
+import {
+    TableHead as CarbonTableHead,
+    TableBody as CarbonTableBody,
+    TableRow as CarbonTableRow,
+    TableExpandedRow as CarbonTableExpandedRow,
+    TableHeader, // as CarbonTableHeader,
+    TableCell as CarbonTableCell,
+} from "carbon-components-react";
+
+import TableContainer, { TableContainerProps } from "./TableContainer";
+import Table, { TableProps } from "./Table";
+import TableExpandHeader, { TableExpandHeaderProps } from "./TableExpandHeader";
+import TableExpandRow, { TableExpandRowProps } from "./TableExpandRow";
+
+// TODO, we may simple wrap to add own classes
+const TableHead = CarbonTableHead;
+const TableBody = CarbonTableBody;
+const TableRow = CarbonTableRow;
+const TableExpandedRow = CarbonTableExpandedRow;
+// const TableHeader = CarbonTableHeader;
+const TableCell = CarbonTableCell;
+
+export type {
+    TableContainerProps,
+    TableProps,
+    TableExpandHeaderProps,
+    TableExpandRowProps,
+};
+
+export {
+    TableContainer,
+    Table,
+    TableHead,
+    TableBody,
+    TableRow,
+    TableExpandRow,
+    TableExpandedRow,
+    TableHeader,
+    TableExpandHeader,
+    TableCell,
+};