Merge pull request #186 from EyeSeeTea/development

Release 2.3.0
EyeSeeTea · Dec 15, 2020 · 19c46dc · 19c46dc
2 parents d59771c + 3f0284c
commit 19c46dc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
         "type": "git",
         "url": "git+https://github.com/eyeseetea/d2-ui-components.git"
     },
-    "version": "2.2.0",
+    "version": "2.3.0",
     "main": "index.js",
     "types": "index.d.ts",
     "peerDependencies": {
@@ -27,6 +27,7 @@
         "@dhis2/d2-i18n-extract": "^1.0.7",
         "@dhis2/d2-i18n-generate": "^1.0.18",
         "@material-ui/core": "4.9.4",
+        "@types/classnames": "^2.2.11",
         "@types/enzyme": "^3.1.17",
         "@types/jest": "^24.0.3",
         "@types/lodash": "^4.14.144",

diff --git a/src/data-table/ObjectsTable.tsx b/src/data-table/ObjectsTable.tsx
@@ -1,5 +1,6 @@
 import React, { useState, ReactNode, MouseEvent, useCallback, useMemo } from "react";
 import _ from "lodash";
+import classnames from "classnames";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
 import DetailsIcon from "@material-ui/icons/Details";
 import { SearchBox } from "..";
@@ -35,6 +36,7 @@ export interface ObjectsTableProps<T extends ReferenceObject> extends DataTableP
     searchBoxColumns?: (keyof T)[];
     onActionButtonClick?(event: MouseEvent<unknown>): void;
     actionButtonLabel?: ReactNode;
+    className?: string;
 }
 
 export function ObjectsTable<T extends ReferenceObject = TableObject>(props: ObjectsTableProps<T>) {
@@ -52,6 +54,7 @@ export function ObjectsTable<T extends ReferenceObject = TableObject>(props: Obj
         sideComponents: parentSideComponents,
         resetKey = "",
         childrenKeys = [],
+        className,
         ...rest
     } = props;
     const classes = useStyles();
@@ -96,13 +99,13 @@ export function ObjectsTable<T extends ReferenceObject = TableObject>(props: Obj
         () => (
             <React.Fragment>
                 {showSearchBox && (
-                    <div key={"objects-table-search-box"} className={classes.searchBox}>
-                        <SearchBox
-                            value={searchValue}
-                            hintText={searchBoxLabel || "Search items"}
-                            onChange={handleSearchChange}
-                        />
-                    </div>
+                    <SearchBox
+                        key={"objects-table-search-box"}
+                        className={classes.searchBox}
+                        value={searchValue}
+                        hintText={searchBoxLabel || "Search items"}
+                        onChange={handleSearchChange}
+                    />
                 )}
                 {parentFilterComponents}
             </React.Fragment>
@@ -140,7 +143,7 @@ export function ObjectsTable<T extends ReferenceObject = TableObject>(props: Obj
             : parentRows;
 
     return (
-        <div className={classes.root}>
+        <div className={classnames([classes.root, className])}>
             <DataTable
                 rows={rows}
                 actions={actions}

diff --git a/src/search-box/SearchBox.tsx b/src/search-box/SearchBox.tsx
@@ -2,11 +2,13 @@ import TextField from "@material-ui/core/TextField";
 import _ from "lodash";
 import React, { useCallback, useState, useEffect } from "react";
 import i18n from "../utils/i18n";
+
 export interface SearchBoxProps {
     value?: string;
     debounce?: number;
     onChange(value: string): void;
     hintText?: string;
+    className?: string;
 }
 
 const styles = {
@@ -18,6 +20,7 @@ export const SearchBox: React.FC<SearchBoxProps> = ({
     hintText = i18n.t("Search by name"),
     onChange,
     debounce: debounceTime = 400,
+    className,
 }) => {
     const [stateValue, updateStateValue] = useState(value);
     useEffect(() => updateStateValue(value), [value]);
@@ -47,6 +50,7 @@ export const SearchBox: React.FC<SearchBoxProps> = ({
             onChange={onKeyUp}
             placeholder={hintText}
             data-test="search"
+            className={className}
         />
     );
 };

diff --git a/yarn.lock b/yarn.lock
@@ -1223,6 +1223,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/classnames@^2.2.11":
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/@types/classnames/-/classnames-2.2.11.tgz#2521cc86f69d15c5b90664e4829d84566052c1cf"
+  integrity sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"