@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

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

@@ -0,0 +1,192 @@
+/*
+ * 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, { ComponentPropsWithRef, useState, Fragment, Ref, ReactElement } from "react";
+import { HeaderCell } from "../../datagrid.interfaces";
+import classes from "./DataGridRow.module.scss";
+import { IconButton } from "../../../Button/IconButton";
+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<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;
+    expandButtonTitle?: string;
+    expandButtonId?: string;
+    drawerId?: string;
+  };
+}
+
+const DataGridRowComponent = <T,>(
+  {
+    item,
+    children,
+    className,
+    headers,
+    searchValue,
+    isLoading,
+    spacing,
+    expandableRowProps,
+    disableContextMenuColumn,
+    nestedRowProps,
+    ...rest
+  }: Props<T>,
+  ref: Ref<HTMLTableRowElement>
+) => {
+  const {
+    enableExpandableRow = false,
+    expandButtonId = `ID-${generateID()}`,
+    expandButtonTitle = "Expand row",
+    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: childSpacing,
+        cellIndex: index,
+        columnLength: headers?.length,
+        disableContextMenuColumn,
+        prefixElement
+      });
+
+      const visible = headers && headers.length > index ? !headers[index].hidden : true;
+      return visible && cellWithSpacing;
+    }
+    return null;
+  });
+
+  return (
+    <Fragment>
+      <tr {...rest} ref={ref} className={classNames.join(" ")}>
+        {enableExpandableRow && (
+          <DataGridCell
+            className={classes["expand-button-cell"]}
+            onClick={() => setIsRowExpanded(!isRowExpanded)}
+            style={{
+              width: "1px"
+            }}
+          >
+            <IconButton
+              id={expandButtonId}
+              title={expandButtonTitle}
+              aria-expanded={isRowExpanded}
+              aria-controls={drawerId}
+            >
+              <Icon size="0.75rem" icon={isRowExpanded ? Icons.ChevronUp : Icons.ChevronDown} />
+            </IconButton>
+          </DataGridCell>
+        )}
+        {visibleCells}
+      </tr>
+      {enableExpandableRow && (
+        <tr className={`${classes["row"]} ${isRowExpanded ? classes["border-drawer"] : ""}`}>
+          <td colSpan={visibleCells.length + 1}>
+            <DataGridDrawer
+              id={drawerId}
+              role="region"
+              aria-labelledby={expandButtonId}
+              isExpanded={isRowExpanded}
+            >
+              {expandableRowContent}
+            </DataGridDrawer>
+          </td>
+        </tr>
+      )}
+      {enableNestedRow && renderNestedRow()}
+    </Fragment>
+  );
+};
+
+export const DataGridRow = React.forwardRef(DataGridRowComponent) as <T extends object>(
+  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/DataGridBody/__snapshots__/DataGridBody.test.tsx.snap

@@ -0,0 +1,262 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DataGridBody should render renders without crashing 1`] = `
+[
+  <tr
+    class="row border"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Paweł
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Napieracz
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        12.12.1990
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Paweł-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Paweł"
+            tabindex="0"
+            title="Actions for Paweł"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Paweł
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+  <tr
+    class="row border"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Michał
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Górski
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        12.12.1994
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Michał-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Michał"
+            tabindex="0"
+            title="Actions for Michał"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Michał
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+  <tr
+    class="row border"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Daniel
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Velden
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        12.12.199x
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Daniel-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Daniel"
+            tabindex="0"
+            title="Actions for Daniel"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Daniel
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+  <tr
+    class="row border"
+  >
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Jasha
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        Joachimsthal
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        12.12.198x
+      </span>
+    </td>
+    <td
+      class="cell "
+    >
+      <span
+        class="typography_style_body text"
+      >
+        <div
+          class="context-menu"
+        >
+          <button
+            aria-controls="consent_menu_Jasha-menu"
+            aria-expanded="false"
+            aria-haspopup="true"
+            class="button icon-button text default button-m"
+            id="consent_menu_Jasha"
+            tabindex="0"
+            title="Actions for Jasha"
+            type="button"
+          >
+            <span
+              aria-hidden="true"
+              class="icon icon-ellipsis-alt "
+              data-icon="true"
+            />
+            <span
+              class="sr-only"
+            >
+              Actions for Jasha
+            </span>
+          </button>
+        </div>
+      </span>
+    </td>
+  </tr>,
+]
+`;

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

@@ -0,0 +1,65 @@
+/*
+ * 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, { Fragment, useRef, useState } from "react";
+import { DataGridFilterTag } from "./DataGridFilterTag";
+import { createPortal } from "react-dom";
+import { DateTimePicker } from "./DateTimePicker/DateTimePicker";
+import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
+import { DateTimeFilter } from "./DataGridFilters.interfaces";
+
+type Props = {
+  domRoot?: HTMLElement;
+  dateFilterValue?: DateTimeFilter;
+  onDateFilterValueChange?: (dateTimeFilter: DateTimeFilter) => void;
+};
+
+export const DataGridDateFilter = ({
+  domRoot,
+  dateFilterValue,
+  onDateFilterValueChange
+}: Props) => {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+  const [isOpen, setIsOpen] = useState(false);
+  const [tagCaption, setTagCaption] = useState("Last 30 seconds");
+
+  return (
+    <Fragment>
+      <DataGridFilterTag
+        triggerRef={triggerRef}
+        ref={wrappingDivRef}
+        dateTagCaption={tagCaption}
+        mode={"ADD_DATE"}
+        onFilterOpen={() => setIsOpen(true)}
+      />
+      {createPortal(
+        <DateTimePicker
+          popoverRef={popoverRef}
+          onTagCaptionChange={setTagCaption}
+          anchorRef={wrappingDivRef}
+          isOpen={isOpen}
+          setPickerOpen={setIsOpen}
+          dateFilterValue={dateFilterValue}
+          onDateFilterValueChange={onDateFilterValueChange}
+        />,
+        root
+      )}
+    </Fragment>
+  );
+};