@onewelcome/react-lib-components 6.7.0 → 7.0.0

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

@@ -0,0 +1,105 @@
+/*
+ * 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";
+
+.filter-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.75rem 0.25rem 0.5rem;
+  border-radius: 3.125rem;
+  background-color: var(--color-blue-grey100);
+
+  .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;
+    }
+
+    &:hover {
+      border-radius: 0.125rem;
+      background-color: var(--color-black10);
+    }
+
+    &:active {
+      background-color: var(--color-blue-grey400);
+    }
+
+    @include mixins.focusVisibleOutline($outlineOffset: 0);
+  }
+
+  .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: 0.6rem;
+  }
+}
+
+.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;
+
+    & > *:last-child,
+    *:first-child {
+      flex-grow: 1.8;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+
+    & > *:nth-child(2) {
+      flex-grow: 1;
+      flex-shrink: 0;
+      margin-top: 0;
+    }
+  }
+
+  .actions {
+    display: flex;
+    gap: 1rem;
+  }
+}

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

@@ -0,0 +1,150 @@
+/*
+ * 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, createRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useGetDomRoot } from "../../../hooks/useGetDomRoot";
+import {
+  DataGridColumnMetadata,
+  Filter,
+  FilterEditorMode,
+  FiltersAction,
+  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[];
+  dispatch: React.Dispatch<FiltersAction>;
+  onFilterAdd?: (filter: Filter) => void;
+  onFilterEdit?: (filter: Filter) => void;
+  onFilterDelete?: (id: string) => void;
+  tagTranslations?: TagTranslations;
+  popoverTranslations?: PopoverTranslations;
+};
+
+export const DataGridFilter = ({
+  mode,
+  filter,
+  domRoot,
+  columnsMetadata,
+  dispatch,
+  onFilterAdd,
+  onFilterEdit,
+  onFilterDelete,
+  tagTranslations,
+  popoverTranslations
+}: Props) => {
+  const wrappingDivRef = createRef<HTMLDivElement>();
+  const [filterOpen, setFilterOpen] = useState(false);
+  const { root } = useGetDomRoot(domRoot, wrappingDivRef);
+  const {
+    resetFields,
+    operator,
+    setOperator,
+    operators,
+    setOperators,
+    column,
+    setColumn,
+    values,
+    setValues,
+    pickedValues,
+    setPickedValues,
+    initialiseFilterValues
+  } = useDataGridFilter(mode, columnsMetadata);
+
+  const onFilterSubmit = () => {
+    if (mode === "ADD") {
+      const id = generateID();
+
+      dispatch({
+        type: "add",
+        payload: { id, column, operator, value: pickedValues }
+      });
+      onFilterAdd && onFilterAdd({ id, column, operator, value: pickedValues });
+    } else if (mode === "EDIT" && filter) {
+      const { id } = filter;
+
+      dispatch({
+        type: "edit",
+        payload: { id, column, operator, value: pickedValues }
+      });
+      onFilterEdit && onFilterEdit({ id, column, operator, value: pickedValues });
+    }
+
+    resetFields();
+    setFilterOpen(false);
+  };
+
+  const onFilterRemove = () => {
+    if (!filter) {
+      return;
+    }
+    const { id } = filter;
+
+    dispatch({ type: "remove", payload: { id } });
+    onFilterDelete && onFilterDelete(id);
+
+    resetFields();
+    setFilterOpen(false);
+  };
+  const onFilterOpen = () => {
+    setFilterOpen(!filterOpen);
+    if (!filterOpen) {
+      initialiseFilterValues(filter);
+    }
+  };
+
+  return (
+    <Fragment>
+      <DataGridFilterTag
+        mode={mode}
+        onFilterOpen={onFilterOpen}
+        onFilterRemove={onFilterRemove}
+        triggerRef={wrappingDivRef}
+        filter={filter}
+      />
+      {createPortal(
+        <DataGridFilterPopover
+          anchorRef={wrappingDivRef}
+          isOpen={filterOpen}
+          column={column}
+          columnsMetadata={columnsMetadata}
+          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,181 @@
+/*
+ * 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 { MultiOption } from "../../Form/Select/MultiSelect/MultiOption";
+import { MultiSelectWrapper } from "../../Form/Wrapper/MultiSelectWrapper/MultiSelectWrapper";
+import { SelectWrapper } from "../../Form/Wrapper/SelectWrapper/SelectWrapper";
+import { Popover } from "../../Popover/Popover";
+import {
+  DataGridColumnMetadata,
+  DefaultOperators,
+  PopoverTranslations
+} from "./DataGridFilters.interfaces";
+
+export type Props = {
+  anchorRef?: React.RefObject<HTMLOrSVGElement>;
+  isOpen: boolean;
+  column: string;
+  columnsMetadata: DataGridColumnMetadata[];
+  values: string[];
+  pickedValues: string[];
+  operator: string;
+  operators: string[];
+  onFilterSubmit: () => void;
+  resetFields: () => void;
+  setFilterOpen: (value: React.SetStateAction<boolean>) => void;
+  setColumn: (column: React.SetStateAction<string>) => void;
+  setOperator: (operator: React.SetStateAction<string>) => void;
+  setOperators: (operators: React.SetStateAction<string[]>) => void;
+  setValues: (values: React.SetStateAction<string[]>) => void;
+  setPickedValues: (pickedValues: React.SetStateAction<string[]>) => void;
+  translations?: PopoverTranslations;
+};
+
+export const DataGridFilterPopover = ({
+  anchorRef,
+  isOpen,
+  column,
+  columnsMetadata,
+  values,
+  pickedValues,
+  operator,
+  operators,
+  onFilterSubmit,
+  resetFields,
+  setFilterOpen,
+  setColumn,
+  setOperator,
+  setOperators,
+  setValues,
+  setPickedValues,
+  translations
+}: Props) => {
+  const {
+    columnSelectLabel = "Filter by",
+    operatorSelectLabel = "Operator",
+    valueSelectLabel = "Value",
+    addNewValueLabel = "Create new",
+    addNewValueButtonTitle = "Add new select value",
+    submitButtonTitle = "Apply",
+    cancelButtonTitle = "Cancel"
+  } = translations || {};
+  return (
+    <Popover
+      anchorEl={anchorRef}
+      show={isOpen}
+      placement={{ horizontal: "left", vertical: "bottom" }}
+      transformOrigin={{ horizontal: "left", vertical: "top" }}
+    >
+      <div className={classes["popover"]}>
+        <div className={classes["controls"]}>
+          <SelectWrapper
+            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={"operator"}
+            onChange={e => setOperator(e.target.value)}
+          >
+            {operators.map(operator => (
+              <Option key={operator} value={operator}>
+                {operator}
+              </Option>
+            ))}
+          </SelectWrapper>
+          <MultiSelectWrapper
+            label={valueSelectLabel}
+            name={"value"}
+            value={pickedValues}
+            onChange={e =>
+              setPickedValues(
+                [...Array.from(e.target.options)]
+                  .filter(option => option.selected)
+                  .map(option => option.value)
+              )
+            }
+            selectProps={{
+              addNew: {
+                label: addNewValueLabel,
+                onAddNew: value => {
+                  if (value) {
+                    setValues(prev => [...prev, value]);
+                    setPickedValues(prev => [...prev, value]);
+                  }
+                },
+                btnProps: { title: addNewValueButtonTitle, type: "button" }
+              },
+              search: {
+                enabled: true,
+                renderThreshold: 0
+              }
+            }}
+          >
+            {values.map(value => (
+              <MultiOption key={value} value={value}>
+                {value}
+              </MultiOption>
+            ))}
+          </MultiSelectWrapper>
+        </div>
+        <div className={classes["actions"]}>
+          <Button onClick={onFilterSubmit}>{submitButtonTitle}</Button>
+          <Button
+            variant="text"
+            onClick={() => {
+              resetFields();
+              setFilterOpen(false);
+            }}
+          >
+            {cancelButtonTitle}
+          </Button>
+        </div>
+      </div>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,97 @@
+/*
+ * 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
+} from "./DataGridFilters.interfaces";
+
+export const useDataGridFilter = (
+  mode: FilterEditorMode,
+  columnsMetadata: DataGridColumnMetadata[]
+) => {
+  const [column, setColumn] = useState("");
+  const [operator, setOperator] = useState("");
+  const [operators, setOperators] = useState<string[]>(Object.values(DefaultOperators));
+  const [values, setValues] = useState<string[]>([]);
+  const [pickedValues, setPickedValues] = useState<string[]>([]);
+
+  //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("");
+    setValues([]);
+    setPickedValues([]);
+  };
+
+  const initialiseFilterValues = (filter?: Filter) => {
+    if (mode === "ADD") {
+      const firstColumnMetadata = columnsMetadata[0];
+
+      if (!firstColumnMetadata) {
+        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));
+    }
+  };
+
+  return {
+    resetFields,
+    initialiseFilterValues,
+    operator,
+    setOperator,
+    operators,
+    setOperators,
+    column,
+    setColumn,
+    values,
+    setValues,
+    pickedValues,
+    setPickedValues
+  };
+};

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

@@ -0,0 +1,91 @@
+/*
+ * 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, ForwardRefRenderFunction, Fragment } from "react";
+import { Icon, Icons } from "../../Icon/Icon";
+import { RemoveButton } from "../../Tag/RemoveButton";
+import { Typography } from "../../Typography/Typography";
+import classes from "./DataGridFilter.module.scss";
+import { Filter, FilterEditorMode, TagTranslations } from "./DataGridFilters.interfaces";
+
+export interface DataGridFilterTagProps extends ComponentPropsWithRef<"div"> {
+  triggerRef: React.Ref<HTMLDivElement>;
+  filter?: Filter;
+  mode: FilterEditorMode;
+  onFilterRemove: () => void;
+  onFilterOpen: () => void;
+  translations?: TagTranslations;
+}
+
+const EditTagContent = ({ filter }: { filter: Filter }) => {
+  const { column, operator, value } = filter;
+
+  return (
+    <Fragment>
+      {column} {operator} {value.length > 0 && <b>{value[0]}</b>}
+      {value.length >= 2 && (
+        <>
+          {" "}
+          or <b> {value.length - 1} other</b>
+        </>
+      )}
+    </Fragment>
+  );
+};
+
+export const DataGridFilterTagComponent: ForwardRefRenderFunction<
+  HTMLDivElement,
+  DataGridFilterTagProps
+> = (
+  {
+    triggerRef,
+    filter,
+    mode,
+    onFilterRemove,
+    onFilterOpen,
+    translations,
+
+    ...rest
+  }: DataGridFilterTagProps,
+  ref
+) => {
+  const { addButtonCaption = "Add filter" } = translations || {};
+  const shouldRenderAddTag = mode === "ADD";
+  const shouldRenderEditTag = mode === "EDIT" && filter;
+
+  return (
+    <div {...rest} ref={triggerRef} className={classes["filter-wrapper"]}>
+      <button type="button" className={classes["filter-button"]} onClick={onFilterOpen}>
+        {shouldRenderAddTag && (
+          <Fragment>
+            <Icon icon={Icons.AddCircle} />
+            <Typography variant="body" className={classes["caption"]}>
+              {addButtonCaption}
+            </Typography>
+          </Fragment>
+        )}
+        {shouldRenderEditTag && (
+          <Typography variant="body" className={classes["caption"]}>
+            <EditTagContent filter={filter} />
+          </Typography>
+        )}
+      </button>
+      {shouldRenderEditTag && <RemoveButton onRemove={onFilterRemove} />}
+    </div>
+  );
+};
+
+export const DataGridFilterTag = React.forwardRef(DataGridFilterTagComponent);

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

@@ -0,0 +1,84 @@
+/*
+ * 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.
+ */
+
+export interface Filter {
+  id: string;
+  column: string;
+  operator: string;
+  value: string[];
+}
+
+export type FiltersAction =
+  | {
+      type: "add";
+      payload: Filter;
+    }
+  | {
+      type: "edit";
+      payload: Filter;
+    }
+  | {
+      type: "remove";
+      payload: { id: string };
+    }
+  | {
+      type: "clear";
+    };
+
+export type FiltersState = {
+  filters: Filter[];
+};
+
+export type FilterEditorMode = "ADD" | "EDIT";
+
+export enum DefaultOperators {
+  is = "is",
+  isNot = "is not",
+  contains = "contains",
+  doesNotContain = "does not contain",
+  isEmpty = "is empty"
+}
+
+export interface DataGridColumnMetadata {
+  name: string;
+  headline: string;
+  operators?: string[];
+  defaultValues?: string[];
+}
+
+export interface PopoverTranslations {
+  columnSelectLabel?: string;
+  operatorSelectLabel?: string;
+  valueSelectLabel?: string;
+  addNewValueLabel?: string;
+  addNewValueButtonTitle?: string;
+  submitButtonTitle?: string;
+  cancelButtonTitle?: string;
+}
+
+export interface TagTranslations {
+  addButtonCaption?: string;
+}
+
+export interface ToolbarTranslations {
+  clearButtonCaption?: string;
+}
+
+export interface FiltersTranslations {
+  toolbar?: ToolbarTranslations;
+  tag?: TagTranslations;
+  popover?: PopoverTranslations;
+}