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

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

@@ -0,0 +1,116 @@
+/*
+ * 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.
+ */
+
+@use "../../../mixins.module.scss";
+@use "../../../functions" as *;
+
+.filter-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 1.5rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
+  border-radius: 3.125rem;
+  background-color: var(--color-blue-grey100);
+
+  &:hover {
+    background-color: var(--color-blue-grey200);
+  }
+
+  &:active {
+    background-color: var(--color-primary100);
+  }
+
+  .filter-button {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.375rem;
+    background: none;
+    border: none;
+    padding: 0 0.25rem;
+    cursor: pointer;
+
+    &:only-child {
+      margin-right: -0.25rem;
+    }
+
+    @include mixins.focusVisibleOutline($outlineOffset: 0);
+  }
+
+  .remove-button {
+    border-radius: 1.25rem;
+  }
+
+  .caption {
+    font-size: var(--font-size-data-grid);
+    line-height: var(--data-grid-line-height);
+    margin: 0;
+    font-weight: 400;
+
+    &.bold {
+      font-weight: 600;
+    }
+  }
+
+  .remove-icon {
+    font-size: relativeToBaseFontSize(0.6);
+  }
+}
+
+.column-select-option {
+  text-transform: capitalize;
+}
+
+.popover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1rem 0.75rem;
+  min-width: 40rem;
+
+  .controls {
+    width: 100%;
+    display: flex;
+    gap: 1rem;
+
+    & > *:first-child {
+      flex-grow: 1.8;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+
+    & > *:nth-child(2) {
+      flex-grow: 1;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+
+    & > *:last-child {
+      flex-basis: 15rem;
+      flex-grow: 1.8;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
+}

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

@@ -0,0 +1,161 @@
+/*
+ * 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 { createPortal } from "react-dom";
+import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
+import {
+  DataGridColumnMetadata,
+  Filter,
+  FilterEditorMode,
+  FiltersState,
+  PopoverTranslations,
+  TagTranslations
+} from "./DataGridFilters.interfaces";
+import { generateID } from "../../../util/helper";
+import { DataGridFilterTag } from "./DataGridFilterTag";
+import { DataGridFilterPopover } from "./DataGridFilterPopover";
+import { useDataGridFilter } from "./DataGridFilterService";
+
+export type Props = {
+  mode: FilterEditorMode;
+  domRoot?: HTMLElement;
+  filter?: Filter;
+  columnsMetadata: DataGridColumnMetadata[];
+  onFilterAdd?: (filter: Filter) => void;
+  onFilterEdit?: (filter: Filter) => void;
+  onFilterDelete?: (id: string) => void;
+  tagTranslations?: TagTranslations;
+  popoverTranslations?: PopoverTranslations;
+  customEditTagContent?: React.ReactElement;
+  filterState: FiltersState;
+};
+
+export const DataGridFilter = ({
+  mode,
+  filter,
+  domRoot,
+  columnsMetadata,
+  onFilterAdd,
+  onFilterEdit,
+  onFilterDelete,
+  tagTranslations,
+  popoverTranslations,
+  customEditTagContent,
+  filterState
+}: Props) => {
+  const wrappingDivRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+
+  const [filterOpen, setFilterOpen] = useState(false);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+  const {
+    resetFields,
+    operator,
+    setOperator,
+    operators,
+    setOperators,
+    column,
+    setColumn,
+    values,
+    setValues,
+    pickedValues,
+    setPickedValues,
+    initialiseFilterValues,
+    allowedColumnsMetaData
+  } = useDataGridFilter(mode, columnsMetadata, filterState);
+
+  const onFilterSubmit = () => {
+    if (mode === "ADD") {
+      const id = generateID();
+      onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });
+    } else if (mode === "EDIT" && filter) {
+      const { id } = filter;
+      onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });
+    }
+
+    resetFields();
+    setFilterOpen(false);
+  };
+
+  const onFilterRemove = () => {
+    if (!filter) {
+      return;
+    }
+
+    const { id } = filter;
+    onFilterDelete && onFilterDelete(id);
+
+    resetFields();
+    setFilterOpen(false);
+  };
+  const onFilterOpen = () => {
+    setFilterOpen(!filterOpen);
+    if (!filterOpen) {
+      initialiseFilterValues(filter);
+    }
+  };
+
+  if (mode === "ADD") {
+    const hasAvailableFilters = columnsMetadata.some(
+      value =>
+        !value.allowSingleFilterOnly || !filterState.filters.some(f => f.column === value.name)
+    );
+    if (!hasAvailableFilters) {
+      return <></>;
+    }
+  }
+
+  return (
+    <Fragment>
+      <DataGridFilterTag
+        mode={mode}
+        onFilterOpen={onFilterOpen}
+        onFilterRemove={onFilterRemove}
+        triggerRef={triggerRef}
+        ref={wrappingDivRef}
+        filter={filter}
+        translations={tagTranslations}
+        customEditTagContent={customEditTagContent}
+        columnsMetadata={columnsMetadata}
+      />
+      {createPortal(
+        <DataGridFilterPopover
+          popoverRef={popoverRef}
+          anchorRef={wrappingDivRef}
+          isOpen={filterOpen}
+          translations={popoverTranslations}
+          column={column}
+          columnsMetadata={allowedColumnsMetaData}
+          values={values}
+          pickedValues={pickedValues}
+          operator={operator}
+          operators={operators}
+          onFilterSubmit={onFilterSubmit}
+          resetFields={resetFields}
+          setFilterOpen={setFilterOpen}
+          setColumn={setColumn}
+          setOperator={setOperator}
+          setOperators={setOperators}
+          setValues={setValues}
+          setPickedValues={setPickedValues}
+        />,
+        root
+      )}
+    </Fragment>
+  );
+};

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

@@ -0,0 +1,172 @@
+/*
+ * 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 from "react";
+import classes from "./DataGridFilter.module.scss";
+import { Button } from "../../Button/Button";
+import { Option } from "../../Form/Select/SingleSelect/Option";
+import { SelectWrapper } from "../../Form/Wrapper/SelectWrapper/SelectWrapper";
+import { Popover } from "../../Popover/Popover";
+import { DataGridFilterValueSelect } from "./DataGridFilterValueSelect";
+import {
+  DataGridColumnMetadata,
+  DefaultOperators,
+  FilterOperator,
+  PopoverTranslations
+} from "./DataGridFilters.interfaces";
+import { useRepeatFocus } from "../../../hooks/useRepeatFocus";
+
+export type Props = {
+  popoverRef: React.RefObject<HTMLDivElement>;
+  anchorRef?: React.RefObject<HTMLDivElement>;
+  isOpen: boolean;
+  column: string;
+  columnsMetadata: DataGridColumnMetadata[];
+  values: string[];
+  pickedValues: string[];
+  operator: FilterOperator | null;
+  operators: FilterOperator[];
+  onFilterSubmit: () => void;
+  resetFields: () => void;
+  setFilterOpen: (value: React.SetStateAction<boolean>) => void;
+  setColumn: (column: React.SetStateAction<string>) => void;
+  setOperator: (operator: React.SetStateAction<FilterOperator | null>) => void;
+  setOperators: (operators: React.SetStateAction<FilterOperator[]>) => void;
+  setValues: (values: React.SetStateAction<string[]>) => void;
+  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
+  translations?: PopoverTranslations;
+};
+
+export const DataGridFilterPopover = ({
+  popoverRef,
+  anchorRef,
+  isOpen,
+  column,
+  columnsMetadata,
+  values,
+  pickedValues,
+  operator,
+  operators,
+  onFilterSubmit,
+  resetFields,
+  setFilterOpen,
+  setColumn,
+  setOperator,
+  setOperators,
+  setValues,
+  setPickedValues,
+  translations
+}: Props) => {
+  const {
+    columnSelectLabel = "Filter by",
+    operatorSelectLabel = "Operator",
+    submitButtonTitle = "Apply",
+    cancelButtonTitle = "Cancel"
+  } = translations || {};
+  useRepeatFocus(popoverRef);
+
+  const isValueRequired = operator && !operator.allowEmptyValues;
+  const hasValidationError = Boolean(isValueRequired && pickedValues.length === 0);
+
+  return (
+    <Popover
+      tabIndex={-1}
+      anchorEl={anchorRef}
+      ref={popoverRef}
+      show={isOpen}
+      placement={{ horizontal: "left", vertical: "bottom" }}
+      transformOrigin={{ horizontal: "left", vertical: "top" }}
+    >
+      {isOpen && (
+        <div className={classes["popover"]}>
+          <div className={classes["controls"]}>
+            <SelectWrapper
+              selectProps={{ selectButtonProps: { autoFocus: true } }}
+              label={columnSelectLabel}
+              value={column}
+              name={"column"}
+              onChange={e => {
+                setColumn(e.target.value);
+                const columnMetadata = columnsMetadata.find(({ name }) => name === e.target.value);
+
+                if (columnMetadata?.operators) {
+                  setOperator(columnMetadata.operators[0]);
+                  setOperators(columnMetadata.operators);
+                } else {
+                  setOperator(Object.values(DefaultOperators)[0]);
+                  setOperators(Object.values(DefaultOperators));
+                }
+
+                if (columnMetadata?.defaultValues) {
+                  setPickedValues([]);
+                  setValues(columnMetadata.defaultValues);
+                } else {
+                  setPickedValues([]);
+                  setValues([]);
+                }
+              }}
+            >
+              {columnsMetadata.map(({ name, headline }) => (
+                <Option className={classes["column-select-option"]} key={name} value={name}>
+                  {headline}
+                </Option>
+              ))}
+            </SelectWrapper>
+            <SelectWrapper
+              label={operatorSelectLabel}
+              value={operator?.name || ""}
+              name={"operator"}
+              onChange={e => {
+                const selectedOperator = operators.find(op => op.name === e.target.value);
+                setOperator(selectedOperator || null);
+              }}
+            >
+              {operators.map(operator => (
+                <Option key={operator.name} value={operator.name}>
+                  {operator.name}
+                </Option>
+              ))}
+            </SelectWrapper>
+            <DataGridFilterValueSelect
+              column={column}
+              columnsMetadata={columnsMetadata}
+              values={values}
+              pickedValues={pickedValues}
+              setValues={setValues}
+              setPickedValues={setPickedValues}
+              translations={translations}
+              operator={operator}
+            />
+          </div>
+          <div className={classes["actions"]}>
+            <Button onClick={onFilterSubmit} disabled={hasValidationError}>
+              {submitButtonTitle}
+            </Button>
+            <Button
+              variant="text"
+              onClick={() => {
+                resetFields();
+                setFilterOpen(false);
+              }}
+            >
+              {cancelButtonTitle}
+            </Button>
+          </div>
+        </div>
+      )}
+    </Popover>
+  );
+};

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

@@ -0,0 +1,124 @@
+/*
+ * 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 { useState } from "react";
+import {
+  DataGridColumnMetadata,
+  DefaultOperators,
+  Filter,
+  FilterEditorMode,
+  FilterOperator,
+  FiltersState
+} from "./DataGridFilters.interfaces";
+
+export const useDataGridFilter = (
+  mode: FilterEditorMode,
+  columnsMetadata: DataGridColumnMetadata[],
+  filterState: FiltersState
+) => {
+  const [column, setColumn] = useState("");
+  const [operator, setOperator] = useState<FilterOperator | null>(null);
+  const [operators, setOperators] = useState<FilterOperator[]>(Object.values(DefaultOperators));
+  const [values, setValues] = useState<string[]>([]);
+  const [pickedValues, setPickedValues] = useState<string[]>([]);
+  const [allowedColumnsMetaData, setAllowedColumnsMetaData] = useState<DataGridColumnMetadata[]>(
+    []
+  );
+
+  //user can extend the list of picked values with custom ones. We need to make sure that the default list includes the user created values.
+  const mergeCustomValuesWithPredefined = (values: string[], pickedValues: string[]) => {
+    return Array.from(new Set([...values, ...pickedValues]));
+  };
+
+  const resetFields = () => {
+    setColumn("");
+    setOperator(null);
+    setValues([]);
+    setPickedValues([]);
+  };
+
+  const initialiseFilterValues = (filter?: Filter) => {
+    const allowedColumnMetaData = getAllowedColumnsMetadata(filter);
+
+    if (mode === "ADD") {
+      const firstColumnMetadata = allowedColumnMetaData[0];
+
+      if (!firstColumnMetadata) {
+        resetFields();
+        setAllowedColumnsMetaData([]);
+        return;
+      }
+
+      setColumn(firstColumnMetadata.name);
+      setOperator(
+        firstColumnMetadata.operators
+          ? firstColumnMetadata.operators[0]
+          : Object.values(DefaultOperators)[0]
+      );
+      firstColumnMetadata.operators && setOperators(firstColumnMetadata.operators);
+      firstColumnMetadata.defaultValues && setValues(firstColumnMetadata.defaultValues);
+    }
+
+    if (mode === "EDIT" && filter) {
+      const { column, operator, value } = filter;
+      const columnMetadata = columnsMetadata.find(({ name }) => name === column);
+
+      if (!columnMetadata) {
+        return;
+      }
+
+      const { defaultValues, operators } = columnMetadata;
+
+      setColumn(column);
+      setOperator(operator);
+      operators && setOperators(operators);
+      setPickedValues(value);
+      setValues(mergeCustomValuesWithPredefined(defaultValues || [], value));
+    }
+
+    setAllowedColumnsMetaData(allowedColumnMetaData);
+  };
+
+  const getAllowedColumnsMetadata = (filter?: Filter) => {
+    return columnsMetadata.filter(value => {
+      if (!value.allowSingleFilterOnly) {
+        return true;
+      }
+
+      return !filterState.filters.find(v => {
+        return mode === "ADD"
+          ? v.column == value.name
+          : v.column == value.name && v.column != filter?.column;
+      });
+    });
+  };
+
+  return {
+    resetFields,
+    initialiseFilterValues,
+    operator,
+    setOperator,
+    operators,
+    setOperators,
+    column,
+    setColumn,
+    values,
+    setValues,
+    pickedValues,
+    setPickedValues,
+    allowedColumnsMetaData
+  };
+};