@onewelcome/react-lib-components 8.1.2 → 8.3.0

package/src/components/DataGrid/DataGridBody/DataGridRow/DataGridRow.tsx

@@ -14,7 +14,7 @@
  *    limitations under the License.
  */
 
-import React, { ComponentPropsWithRef, useState, Fragment, ForwardRefRenderFunction } from "react";
+import React, { ComponentPropsWithRef, useState, Fragment, Ref, ReactElement } from "react";
 import { HeaderCell } from "../../datagrid.interfaces";
 import classes from "./DataGridRow.module.scss";
 import { IconButton } from "../../../Button/IconButton";
@@ -22,13 +22,22 @@ import { Icon, Icons } from "../../../Icon/Icon";
 import { DataGridCell } from "../DataGridCell/DataGridCell";
 import { DataGridDrawer } from "../DataGridDrawer/DataGridDrawer";
 import { generateID } from "../../../../util/helper";
+import { useNestedRow } from "./useNestedRow";
 
-export interface Props extends ComponentPropsWithRef<"tr"> {
+export interface Props<T> extends ComponentPropsWithRef<"tr"> {
+  item?: T;
   headers?: HeaderCell[];
   isLoading?: boolean;
   spacing?: React.CSSProperties;
   searchValue?: string;
   disableContextMenuColumn?: boolean;
+  nestedRowProps?: {
+    rowTemplate?: ({ item, index }: { item: T; index: number }) => ReactElement;
+    indentationLevel?: number;
+    indentationLevels?: { level: number; isLastChild: boolean }[];
+    enableNestedRow?: boolean;
+    nestedItemsKey?: keyof T;
+  };
   expandableRowProps?: {
     enableExpandableRow: boolean;
     expandableRowContent: React.ReactNode;
@@ -38,8 +47,9 @@ export interface Props extends ComponentPropsWithRef<"tr"> {
   };
 }
 
-const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (
+const DataGridRowComponent = <T,>(
   {
+    item,
     children,
     className,
     headers,
@@ -48,9 +58,10 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     spacing,
     expandableRowProps,
     disableContextMenuColumn,
+    nestedRowProps,
     ...rest
-  },
-  ref
+  }: Props<T>,
+  ref: Ref<HTMLTableRowElement>
 ) => {
   const {
     enableExpandableRow = false,
@@ -59,15 +70,73 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     drawerId = `ID-${generateID()}`,
     expandableRowContent
   } = expandableRowProps || {};
+  const {
+    indentationLevels,
+    indentationLevel = 0,
+    nestedItemsKey,
+    enableNestedRow,
+    rowTemplate
+  } = nestedRowProps || {};
   const [isRowExpanded, setIsRowExpanded] = useState(false);
+  const { renderNestedRowConnectors, renderNestedRow, getNestedChildSpacing, hasNestedChildren } =
+    useNestedRow({
+      indentationLevels,
+      indentationLevel,
+      item,
+      nestedItemsKey,
+      rowTemplate,
+      isRowExpanded,
+      enableNestedRow,
+      rowProps: {
+        searchValue,
+        headers,
+        spacing,
+        disableContextMenuColumn
+      }
+    });
+
+  const classNames = [classes["row"]];
+  const rowBorderClass = enableNestedRow
+    ? classes[`border-${indentationLevel}`]
+    : classes[`border`];
+
+  className && classNames.push(className);
+  enableExpandableRow
+    ? !isRowExpanded && classNames.push(classes["border-drawer"])
+    : classNames.push(rowBorderClass);
+  isLoading && classNames.push(classes["loading"]);
+
+  const getPrefixButton = (hasNestedChildren: boolean) =>
+    hasNestedChildren ? (
+      <IconButton
+        id={expandButtonId}
+        title={expandButtonTitle}
+        aria-expanded={isRowExpanded}
+        onClick={() => setIsRowExpanded(!isRowExpanded)}
+      >
+        <Icon size="0.75rem" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />
+      </IconButton>
+    ) : null;
+
   const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
+    const childSpacing = enableNestedRow ? getNestedChildSpacing(spacing, index) : spacing;
+
+    const prefixElement =
+      enableNestedRow && index === 0 ? (
+        <>
+          {getPrefixButton(!!hasNestedChildren)}
+          {renderNestedRowConnectors()}
+        </>
+      ) : null;
+
     if (child) {
       const cellWithSpacing = React.cloneElement(child, {
         searchValue,
-        spacing: spacing,
+        spacing: childSpacing,
         cellIndex: index,
         columnLength: headers?.length,
-        disableContextMenuColumn
+        disableContextMenuColumn,
+        prefixElement
       });
 
       const visible = headers && headers.length > index ? !headers[index].hidden : true;
@@ -76,13 +145,6 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
     return null;
   });
 
-  const classNames = [classes["row"]];
-  className && classNames.push(className);
-  enableExpandableRow
-    ? !isRowExpanded && classNames.push(classes["border-drawer"])
-    : classNames.push(classes["border"]);
-  isLoading && classNames.push(classes["loading"]);
-
   return (
     <Fragment>
       <tr {...rest} ref={ref} className={classNames.join(" ")}>
@@ -90,7 +152,9 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
           <DataGridCell
             className={classes["expand-button-cell"]}
             onClick={() => setIsRowExpanded(!isRowExpanded)}
-            style={{ width: "1px" }}
+            style={{
+              width: "1px"
+            }}
           >
             <IconButton
               id={expandButtonId}
@@ -118,8 +182,11 @@ const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props>
           </td>
         </tr>
       )}
+      {enableNestedRow && renderNestedRow()}
     </Fragment>
   );
 };
 
-export const DataGridRow = React.forwardRef(DataGridRowComponent);
+export const DataGridRow = React.forwardRef(DataGridRowComponent) as <T extends {}>(
+  p: Props<T> & { ref?: Ref<HTMLTableRowElement> }
+) => ReactElement;

package/src/components/DataGrid/DataGridBody/DataGridRow/useNestedRow.tsx

@@ -0,0 +1,143 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React, { ReactElement } from "react";
+import classes from "./DataGridRow.module.scss";
+import { HeaderCell } from "../../datagrid.interfaces";
+
+export interface UseNestedRowProps<T> {
+  indentationLevels?: { level: number; isLastChild: boolean }[];
+  item?: T;
+  nestedItemsKey?: keyof T;
+  rowTemplate?: ({ item, index }: { item: T; index: number }) => ReactElement;
+  isRowExpanded?: boolean;
+  indentationLevel: number;
+  enableNestedRow?: boolean;
+  rowProps: {
+    searchValue?: string;
+    headers?: HeaderCell[];
+    spacing?: React.CSSProperties;
+    disableContextMenuColumn?: boolean;
+  };
+}
+
+export const useNestedRow = <T,>({
+  indentationLevels,
+  item,
+  nestedItemsKey,
+  rowTemplate,
+  isRowExpanded,
+  indentationLevel,
+  enableNestedRow,
+  rowProps: { searchValue, headers, spacing, disableContextMenuColumn }
+}: UseNestedRowProps<T>) => {
+  const hasNestedChildren = item && nestedItemsKey && item[nestedItemsKey];
+
+  const getNestedChildSpacing = (spacing: React.CSSProperties | undefined, index: number) => {
+    const expandButtonWidth = 46;
+    const nestedChildOffset = !hasNestedChildren ? expandButtonWidth : 0;
+
+    const connectorWidth = 68;
+    const nestedChildIndentation = `${nestedChildOffset + indentationLevel * connectorWidth}`;
+
+    const gap = 4;
+    const notIndentedWithNoChildrenOffset =
+      indentationLevel === 0 && !hasNestedChildren ? expandButtonWidth + gap : gap;
+    const childIndentation = `${indentationLevel ? nestedChildIndentation : notIndentedWithNoChildrenOffset}px`;
+
+    if (spacing) {
+      return {
+        ...spacing,
+        paddingLeft: index === 0 ? childIndentation : spacing.paddingLeft
+      };
+    }
+    return {
+      paddingLeft: index === 0 ? childIndentation : ""
+    };
+  };
+
+  const renderNestedRowConnectors = () => {
+    if (indentationLevels) {
+      return indentationLevels.map(({ level, isLastChild }) =>
+        renderNestedRowConnector(level, isLastChild, indentationLevels.length)
+      );
+    }
+
+    return null;
+  };
+
+  const renderNestedRowConnector = (level: number, isLastChild: boolean, levelsLength: number) => {
+    const offsetLeftClass = classes[`offset-left-${level - 1}`];
+
+    if (level === levelsLength) {
+      const variant = isLastChild ? "line" : "t-shape";
+
+      return (
+        <div
+          key={level}
+          data-testid="dataGridRowConnector"
+          className={`${classes["connector"]} ${classes[variant]} ${offsetLeftClass}`}
+        />
+      );
+    } else if (!isLastChild) {
+      return (
+        <div
+          key={level}
+          data-testid="dataGridRowConnector"
+          className={`${classes["connector"]} ${classes["vertical"]}  ${offsetLeftClass}`}
+        />
+      );
+    }
+    return null;
+  };
+
+  const renderNestedRow = () => {
+    if (rowTemplate && item && nestedItemsKey && item[nestedItemsKey] && isRowExpanded) {
+      const nestedItemsArray: T[] = item[nestedItemsKey] as T[];
+      const getIndentationLevel = (index: number) => ({
+        level: indentationLevel + 1,
+        isLastChild: index + 1 === nestedItemsArray.length
+      });
+
+      return nestedItemsArray.map((item, index) => {
+        return React.cloneElement(rowTemplate({ item, index }), {
+          searchValue,
+          headers,
+          spacing,
+          disableContextMenuColumn,
+          item,
+          nestedRowProps: {
+            rowTemplate,
+            enableNestedRow,
+            nestedItemsKey,
+            indentationLevel: indentationLevel + 1,
+            indentationLevels:
+              indentationLevels && nestedItemsArray
+                ? [...indentationLevels, getIndentationLevel(index)]
+                : [getIndentationLevel(index)]
+          }
+        });
+      });
+    }
+  };
+
+  return {
+    renderNestedRow,
+    renderNestedRowConnectors,
+    getNestedChildSpacing,
+    hasNestedChildren
+  };
+};

package/src/components/DataGrid/DataGridFilters/DataGridFilterPopover.tsx

@@ -87,6 +87,9 @@ export const DataGridFilterPopover = ({
     }
   }, [isOpen]);
 
+  const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+  const disableAddNew = columnMetadata?.disableAddNew;
+
   return (
     <Popover
       tabIndex={-1}
@@ -153,16 +156,18 @@ export const DataGridFilterPopover = ({
               )
             }
             selectProps={{
-              addNew: {
-                label: addNewValueLabel,
-                onAddNew: value => {
-                  if (value) {
-                    setValues(prev => [...prev, value]);
-                    setPickedValues(prev => [...prev, value]);
-                  }
-                },
-                btnProps: { title: addNewValueButtonTitle, type: "button" }
-              },
+              addNew: disableAddNew
+                ? undefined
+                : {
+                    label: addNewValueLabel,
+                    onAddNew: value => {
+                      if (value) {
+                        setValues(prev => [...prev, value]);
+                        setPickedValues(prev => [...prev, value]);
+                      }
+                    },
+                    btnProps: { title: addNewValueButtonTitle, type: "button" }
+                  },
               search: {
                 enabled: true,
                 renderThreshold: 0

package/src/components/DataGrid/DataGridFilters/DataGridFilters.interfaces.ts

@@ -57,6 +57,7 @@ export interface DataGridColumnMetadata {
   headline: string;
   operators?: string[];
   defaultValues?: string[];
+  disableAddNew?: boolean;
 }
 
 export interface PopoverTranslations {

package/src/components/DataGrid/DataGridFilters/DataGridToolbar.module.scss

@@ -16,6 +16,8 @@
 
 @use "../../../mixins.module.scss";
 
+@include mixins.searchInputPointer("search", ".wrapper");
+
 .wrapper {
   display: flex;
   align-items: flex-start;

package/src/components/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -24,6 +24,7 @@ export interface Props extends ComponentPropsWithRef<"thead"> {
   initialSort?: Sort;
   onSort?: OnSortFunction;
   enableExpandableRow?: boolean;
+  enableNestedRows?: boolean;
   disableContextMenuColumn?: boolean;
   enableMultiSorting?: boolean;
   spacing?: React.CSSProperties;
@@ -38,6 +39,7 @@ const DataGridHeaderComponent: ForwardRefRenderFunction<HTMLTableSectionElement,
     headers,
     disableContextMenuColumn,
     enableExpandableRow,
+    enableNestedRows,
     enableMultiSorting,
     spacing,
     ...rest