@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.1

package/src/DataGrid/DataGridActions/DataGridActions.test.tsx

@@ -1,202 +0,0 @@
-/*
- * 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, { useEffect, useRef } from "react";
-import { DataGridActions, Props } from "./DataGridActions";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  headers: [],
-  onColumnToggled: jest.fn()
-};
-
-const createDataGridActions = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(<DataGridActions {...parameters} data-testid="dataGridActions" />);
-  const dataGridActions = queries.getByTestId("dataGridActions");
-
-  return {
-    ...queries,
-    dataGridActions
-  };
-};
-
-describe("DataGridActions should render", () => {
-  it("renders without crashing", () => {
-    const { container } = render(<DataGridActions {...defaultParams} />);
-
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it("renders all buttons", () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
-      ...params,
-      enableAddBtn: true,
-      enableColumnsBtn: true,
-      enableSearchBtn: true
-    }));
-
-    expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole("button");
-    expect(buttons).toHaveLength(5);
-    expect(buttons[0]).toHaveTextContent("Add item");
-    expect(buttons[1]).toHaveTextContent("Columns");
-    expect(buttons[2]).toHaveTextContent("Show/hide columns");
-    expect(buttons[3]).toHaveTextContent("Search");
-    expect(buttons[4]).toHaveTextContent("Search");
-  });
-
-  it("renders only add button", () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
-      ...params,
-      enableAddBtn: true
-    }));
-
-    expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole("button");
-    expect(buttons).toHaveLength(1);
-    expect(buttons[0]).toHaveTextContent("Add item");
-  });
-
-  it("renders only columns button", () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
-      ...params,
-      enableColumnsBtn: true
-    }));
-
-    expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole("button");
-    expect(buttons).toHaveLength(2);
-    expect(buttons[0]).toHaveTextContent("Columns");
-    expect(buttons[1]).toHaveTextContent("Show/hide columns");
-  });
-
-  it("renders only search button", () => {
-    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
-      ...params,
-      enableSearchBtn: true
-    }));
-
-    expect(dataGridActions).toBeDefined();
-    const buttons = getAllByRole("button");
-    expect(buttons).toHaveLength(2);
-    expect(buttons[0]).toHaveTextContent("Search");
-    expect(buttons[1]).toHaveTextContent("Search");
-  });
-
-  it("renders buttons with overwritten props", () => {
-    const addBtnProps = { children: "button1", title: "title1" };
-    const columnsBtnProps = { children: "button2", title: "title2" };
-    const searchBtnProps = { children: "button3", title: "title3" };
-    const searchIconBtnProps = { title: "title4" };
-    const { dataGridActions, getAllByRole } = createDataGridActions(params => ({
-      ...params,
-      enableAddBtn: true,
-      enableColumnsBtn: true,
-      enableSearchBtn: true,
-      addBtnProps,
-      columnsBtnProps,
-      searchBtnProps,
-      searchIconBtnProps
-    }));
-
-    expect(dataGridActions).toBeDefined();
-    const [addBtn, desktopColumnsBtn, mobileColumnsBtn, desktopSearchBtn, mobileSearchBtn] =
-      getAllByRole("button");
-    expect(addBtn).toHaveTextContent(addBtnProps.children);
-    expect(addBtn).toHaveAttribute("title", addBtnProps.title);
-    expect(desktopColumnsBtn).toHaveTextContent(columnsBtnProps.children);
-    expect(desktopColumnsBtn).toHaveAttribute("title", columnsBtnProps.title);
-    expect(mobileColumnsBtn).toHaveTextContent(columnsBtnProps.title);
-    expect(desktopSearchBtn).toHaveTextContent(searchBtnProps.children);
-    expect(desktopSearchBtn).toHaveAttribute("title", searchBtnProps.title);
-    expect(mobileSearchBtn).toHaveTextContent(searchIconBtnProps.title);
-  });
-});
-
-describe("DataGridActions should be interactive", () => {
-  it("clicking on columns button opens show/hide columns popover", async () => {
-    const toggleHeader = { name: "test", headline: "Label" };
-    const { getAllByRole, findByLabelText } = createDataGridActions(params => ({
-      ...params,
-      enableColumnsBtn: true,
-      headers: [toggleHeader]
-    }));
-
-    userEvent.click(getAllByRole("button")[0]);
-
-    const toggle = await findByLabelText(toggleHeader.headline);
-    expect(toggle).toBeDefined();
-    expect(toggle).toBeChecked();
-
-    userEvent.click(toggle);
-    expect(defaultParams.onColumnToggled).toBeCalledWith(toggleHeader.name);
-  });
-
-  it("clicking on add button runs callback", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = createDataGridActions(params => ({
-      ...params,
-      enableAddBtn: true,
-      addBtnProps: { onClick }
-    }));
-
-    userEvent.click(getAllByRole("button")[0]);
-
-    expect(onClick).toBeCalledTimes(1);
-  });
-
-  it("clicking on search button runs callback", () => {
-    const onClick = jest.fn();
-    const { getAllByRole } = createDataGridActions(params => ({
-      ...params,
-      enableSearchBtn: true,
-      searchBtnProps: { onClick }
-    }));
-
-    userEvent.click(getAllByRole("button")[0]);
-
-    expect(onClick).toBeCalledTimes(1);
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <DataGridActions {...defaultParams} data-ref="testing" enableAddBtn ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/DataGrid/DataGridActions/DataGridActions.tsx

@@ -1,140 +0,0 @@
-/*
- * 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,
-  useRef,
-  useState
-} from "react";
-import { Button, Props as ButtonProps } from "../../Button/Button";
-import { IconButton } from "../../Button/IconButton";
-import { Icon, Icons } from "../../Icon/Icon";
-import { HeaderCell, ColumnName } from "../datagrid.interfaces";
-import classes from "./DataGridActions.module.scss";
-import { DataGridColumnsToggle } from "./DataGridColumnsToggle";
-
-export interface Props extends ComponentPropsWithRef<"div"> {
-  enableAddBtn?: boolean;
-  enableColumnsBtn?: boolean;
-  enableSearchBtn?: boolean;
-  addBtnProps?: ButtonProps;
-  columnsBtnProps?: ButtonProps;
-  searchBtnProps?: ButtonProps;
-  searchIconBtnProps?: ButtonProps;
-  headers: HeaderCell[];
-  onColumnToggled: (colName: ColumnName) => void;
-}
-
-const DataGridActionsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    className,
-    enableAddBtn,
-    enableColumnsBtn,
-    enableSearchBtn,
-    addBtnProps = {},
-    columnsBtnProps = {},
-    searchBtnProps = {},
-    searchIconBtnProps = {},
-    headers,
-    onColumnToggled,
-    children,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const isHidden = !(enableAddBtn || enableColumnsBtn || enableSearchBtn);
-  const [showColsPopover, setShowColsPopover] = useState(false);
-  const showColumnBtn = useRef<HTMLButtonElement>(null);
-  const { children: addBtnChildren, ...restAddBtnProps } = addBtnProps;
-  const { children: columnsBtnChildren, ...restColumnsBtnProps } = columnsBtnProps;
-  const { children: searchBtnChildren, ...restSearchBtnProps } = searchBtnProps;
-
-  return isHidden ? null : (
-    <div {...rest} ref={ref} className={`${classes["actions"]} ${className ?? ""}`}>
-      <div className={classes["left-actions"]}>
-        {enableAddBtn && (
-          <Button
-            color="primary"
-            startIcon={<Icon icon={Icons.Plus} />}
-            title="Add item"
-            type="button"
-            variant="outline"
-            {...restAddBtnProps}
-          >
-            {addBtnChildren ?? "Add item"}
-          </Button>
-        )}
-      </div>
-      <div className={classes["right-actions"]}>
-        {enableColumnsBtn && (
-          <Fragment>
-            <Button
-              startIcon={<Icon icon={Icons.Change} />}
-              title="Show/hide columns"
-              variant="text"
-              {...restColumnsBtnProps}
-              className={`${classes["desktop"]} ${columnsBtnProps?.className ?? ""}`}
-              ref={showColumnBtn}
-              onClick={() => setShowColsPopover(true)}
-            >
-              {columnsBtnChildren ?? "Columns"}
-            </Button>
-            <IconButton
-              title="Show/hide columns"
-              {...columnsBtnProps}
-              onClick={() => setShowColsPopover(true)}
-              className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
-            >
-              <Icon icon={Icons.Change} />
-            </IconButton>
-            <DataGridColumnsToggle
-              aria-hidden={!showColsPopover}
-              open={showColsPopover}
-              headers={headers}
-              onClose={() => setShowColsPopover(false)}
-              onToggleClicked={onColumnToggled}
-              anchorEl={showColumnBtn}
-            />
-          </Fragment>
-        )}
-        {enableSearchBtn && (
-          <Fragment>
-            <Button
-              startIcon={<Icon icon={Icons.TableSearch} />}
-              title="Search"
-              variant="text"
-              {...restSearchBtnProps}
-              className={`${classes["desktop"]} ${searchBtnProps?.className ?? ""}`}
-            >
-              {searchBtnChildren ?? "Search"}
-            </Button>
-            <IconButton
-              title="Search"
-              {...searchIconBtnProps}
-              className={`${classes["mobile"]} ${columnsBtnProps?.className ?? ""}`}
-            >
-              <Icon icon={Icons.TableSearch} />
-            </IconButton>
-          </Fragment>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export const DataGridActions = React.forwardRef(DataGridActionsComponent);

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.test.tsx

@@ -1,99 +0,0 @@
-/*
- * 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, { useEffect, useRef } from "react";
-import { DataGridColumnsToggle, Props } from "./DataGridColumnsToggle";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const defaultParams: Props = {
-  open: true,
-  headers: [
-    { headline: "Name", name: "name" },
-    { headline: "Date", name: "date", hidden: true }
-  ],
-  onClose: jest.fn(),
-  onToggleClicked: jest.fn()
-};
-
-const createDataGridColumnsToggle = (params?: (defaultParams: Props) => Props) => {
-  let parameters: Props = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const queries = render(
-    <DataGridColumnsToggle {...parameters} data-testid="dataGridColumnsToggle" />
-  );
-  const dataGridColumnsToggle = queries.getByTestId("dataGridColumnsToggle");
-
-  return {
-    ...queries,
-    dataGridColumnsToggle
-  };
-};
-
-describe("DataGridColumnsToggle should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridColumnsToggle, getByLabelText, getByText } = createDataGridColumnsToggle();
-
-    expect(dataGridColumnsToggle).toBeDefined();
-    expect(getByText("Show columns")).toBeDefined();
-    expect(getByLabelText(defaultParams.headers[0].headline)).toBeChecked();
-    expect(getByLabelText(defaultParams.headers[1].headline)).not.toBeChecked();
-  });
-});
-
-describe("DataGridColumnsToggle should be interactive", () => {
-  it("clicking on close calls onClose callback", () => {
-    const { getByRole } = createDataGridColumnsToggle();
-
-    userEvent.click(getByRole("button"));
-
-    expect(defaultParams.onClose).toBeCalledTimes(1);
-  });
-
-  it("clicking outside of container (on backdrop layer) calls onClose callback", () => {
-    createDataGridColumnsToggle();
-
-    userEvent.click(document.querySelector(".backdrop")!);
-
-    expect(defaultParams.onClose).toBeCalledTimes(1);
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <DataGridColumnsToggle {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    render(<ExampleComponent propagateRef={refCheck} />);
-  });
-});

package/src/DataGrid/DataGridActions/DataGridColumnsToggle.tsx

@@ -1,104 +0,0 @@
-/*
- * 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, { ForwardRefRenderFunction, Fragment, useState } from "react";
-import { IconButton } from "../../Button/IconButton";
-import { Toggle } from "../../Form/Toggle/Toggle";
-import { Icon, Icons } from "../../Icon/Icon";
-import { Popover, Props as PopoverProps } from "../../Popover/Popover";
-import { Typography } from "../../Typography/Typography";
-import { generateID } from "../../util/helper";
-import { ColumnName, HeaderCell } from "../datagrid.interfaces";
-import classes from "./DataGridColumnsToggle.module.scss";
-import { createPortal } from "react-dom";
-
-export interface Props extends PopoverProps {
-  open: boolean;
-  headers: HeaderCell[];
-  titleLabel?: string;
-  closeButtonTitle?: string;
-  onClose: () => void;
-  onToggleClicked: (colName: ColumnName) => void;
-  domRoot?: HTMLElement;
-}
-
-const DataGridColumnsToggleComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  {
-    open,
-    headers,
-    titleLabel = "Show columns",
-    closeButtonTitle = "Close show columns dialog",
-    onClose,
-    onToggleClicked,
-    className,
-    domRoot = document.body,
-    ...rest
-  }: Props,
-  ref
-) => {
-  const [id] = useState(generateID());
-  const labelledId = id + "_header";
-
-  const toggles = headers.map(item => (
-    <Toggle
-      key={item.name}
-      name={item.name}
-      checked={!item.hidden}
-      onChange={() => onToggleClicked(item.name)}
-    >
-      {item.headline}
-    </Toggle>
-  ));
-
-  const handleBackdropClick = () => onClose();
-
-  return (
-    <Popover
-      {...rest}
-      ref={ref}
-      className={`${classes["popover"]} ${className}`}
-      show={open}
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby={labelledId}
-    >
-      {open &&
-        createPortal(
-          <div className={classes["backdrop"]} onClick={handleBackdropClick}></div>,
-          domRoot
-        )}
-      {open && (
-        <Fragment>
-          <div className={classes["header"]}>
-            <Typography id={labelledId} className={classes["title"]} tag="span" variant="h4">
-              {titleLabel}
-            </Typography>
-            <IconButton
-              onClick={onClose}
-              className={`${classes["close-btn"]}`}
-              title={closeButtonTitle}
-            >
-              <Icon icon={Icons.Times} />
-            </IconButton>
-          </div>
-          <div className={classes["content"]}>{toggles}</div>
-        </Fragment>
-      )}
-    </Popover>
-  );
-};
-
-export const DataGridColumnsToggle = React.forwardRef(DataGridColumnsToggleComponent);

package/src/DataGrid/DataGridBody/DataGridBody.test.tsx

@@ -1,139 +0,0 @@
-/*
- * 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, { useEffect, useRef } from "react";
-import { DataGridBody, Props } from "./DataGridBody";
-import { render, getAllByRole } from "@testing-library/react";
-import { DataGridRow } from "./DataGridRow";
-import { DataGridCell } from "./DataGridCell";
-import { ContextMenu } from "../../ContextMenu/ContextMenu";
-import { IconButton } from "../../Button/IconButton";
-import { Icon, Icons } from "../../Icon/Icon";
-import { ContextMenuItem } from "../../ContextMenu/ContextMenuItem";
-
-type DataType = { firstName: string; lastName: string; date: string };
-
-const defaultParams: Props<DataType> = {
-  children: ({ item }) => (
-    <DataGridRow key={item.firstName}>
-      <DataGridCell>{item.firstName}</DataGridCell>
-      <DataGridCell>{item.lastName}</DataGridCell>
-      <DataGridCell>{item.date}</DataGridCell>
-      <DataGridCell>
-        <ContextMenu
-          id={`consent_menu_${item.firstName}`}
-          trigger={
-            <IconButton title={`Actions for ${item.firstName}`} color="default">
-              <Icon icon={Icons.EllipsisAlt} />
-            </IconButton>
-          }
-        >
-          <ContextMenuItem>Item 1</ContextMenuItem>
-        </ContextMenu>
-      </DataGridCell>
-    </DataGridRow>
-  ),
-  headers: [
-    { name: "firstName", headline: "First name" },
-    { name: "lastName", headline: "Last name" },
-    { name: "date", headline: "Date" }
-  ],
-  data: [
-    { firstName: "Paweł", lastName: "Napieracz", date: "12.12.1990" },
-    { firstName: "Michał", lastName: "Górski", date: "12.12.1994" },
-    { firstName: "Daniel", lastName: "Velden", date: "12.12.199x" },
-    { firstName: "Jasha", lastName: "Joachimsthal", date: "12.12.198x" }
-  ]
-};
-
-const createDataGridBody = (params?: (defaultParams: Props<DataType>) => Props<DataType>) => {
-  let parameters = defaultParams;
-  if (params) {
-    parameters = params(defaultParams);
-  }
-  const container = document.createElement("table");
-  const queries = render(<DataGridBody {...parameters} data-testid="dataGridBody" />, {
-    container
-  });
-  const dataGridBody = queries.getByTestId("dataGridBody");
-
-  return {
-    ...queries,
-    dataGridBody
-  };
-};
-
-describe("DataGridBody should render", () => {
-  it("renders without crashing", () => {
-    const { dataGridBody } = createDataGridBody();
-
-    expect(dataGridBody).toBeDefined();
-    const rows = getAllByRole(dataGridBody, "row");
-    expect(rows).toMatchSnapshot();
-  });
-
-  it("renders loading state with only visible columns", () => {
-    const headers = [...defaultParams.headers];
-    headers[0] = { ...headers[0], hidden: true };
-    const { dataGridBody } = createDataGridBody(params => ({ ...params, headers }));
-
-    expect(dataGridBody).toBeDefined();
-    const rows = getAllByRole(dataGridBody, "row");
-    const firstRowCells = getAllByRole(rows[0], "cell");
-    expect(firstRowCells).toHaveLength(3);
-    expect(firstRowCells[0]).toHaveTextContent(defaultParams.data?.[0].lastName!);
-  });
-
-  it("renders empty state", () => {
-    const emptyLabel = "emptyLabel";
-    const { dataGridBody } = createDataGridBody(params => ({
-      ...params,
-      emptyLabel,
-      data: undefined
-    }));
-
-    const rows = getAllByRole(dataGridBody, "row");
-    const firstRowCells = getAllByRole(rows[0], "cell");
-    expect(firstRowCells).toHaveLength(1);
-    expect(firstRowCells[0]).toHaveAttribute("colspan", `${defaultParams.headers.length + 1}`);
-    expect(firstRowCells[0]).toHaveTextContent(emptyLabel);
-  });
-});
-
-describe("ref should work", () => {
-  it("should give back the proper data prop, this also checks if the component propagates ...rest properly", () => {
-    const ExampleComponent = ({
-      propagateRef
-    }: {
-      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
-    }) => {
-      const ref = useRef(null);
-
-      useEffect(() => {
-        propagateRef(ref);
-      }, [ref]);
-
-      return <DataGridBody {...defaultParams} data-ref="testing" ref={ref} />;
-    };
-
-    const refCheck = (ref: React.RefObject<HTMLElement>) => {
-      expect(ref.current).toHaveAttribute("data-ref", "testing");
-    };
-
-    const container = document.createElement("table");
-    render(<ExampleComponent propagateRef={refCheck} />, { container });
-  });
-});