@churchapps/apphelper 0.1.0 → 0.1.2

package/src/components/ImageEditor.tsx

@@ -1,126 +1,126 @@
-import React, { useState, useEffect, useRef } from "react";
-import Cropper from "react-cropper";
-import "cropperjs/dist/cropper.css";
-import { InputBox, SmallButton } from ".";
-
-interface Props {
-  title?: string;
-  photoUrl: string;
-  aspectRatio: number;
-  onUpdate: (dataUrl?: string) => void;
-  onCancel?: () => void;
-  outputWidth?: number;
-  outputHeight?: number;
-  hideDelete?: boolean;
-}
-
-export function ImageEditor(props: Props) {
-  const [photoSrc, setPhotoSrc] = useState<string>("");
-  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
-  const cropperRef = useRef<HTMLImageElement>(null);
-  let timeout: any = null;
-
-  const handleSave = () => props.onUpdate(croppedImageDataUrl);
-
-  const handleDelete = () => props.onUpdate("");
-
-  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
-    e.preventDefault();
-    let files;
-    if (e.target) {
-      files = e.target.files;
-    }
-    const reader = new FileReader();
-    reader.onload = () => {
-      const url = reader.result.toString();
-      setPhotoSrc(url);
-      setCroppedImageDataUrl(url);
-      setTimeout(selectDefaultCropZone, 500);
-    };
-    reader.readAsDataURL(files[0]);
-  };
-
-  const selectDefaultCropZone = () => {
-    const imageElement: any = cropperRef?.current;
-    let cropper: any = imageElement?.cropper;
-    if (props.aspectRatio===0)
-    {
-      let containerData = cropper.getContainerData();
-      const imgWidth = cropper.getImageData().width;
-      const imgHeight = cropper.getImageData().height;
-      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
-      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
-      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
-    } else {
-      let desiredAspect = props.aspectRatio;
-      let containerData = cropper.getContainerData();
-      let imgAspect = cropper.getImageData().aspectRatio;
-      let scale = imgAspect / desiredAspect;
-      if (scale < 1) {
-        const imgWidth = cropper.getImageData().width;
-        let l = (containerData.width - imgWidth) / 2.0;
-        let t = (containerData.height - (containerData.height * scale)) / 2.0;
-        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
-      } else {
-        const imgHeight = cropper.getImageData().height;
-        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
-        let t = 0;
-        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
-      }
-    }
-
-  }
-
-  const handleCrop = () => {
-    if (timeout !== null) {
-      window.clearTimeout(timeout);
-      timeout = null;
-    }
-
-    timeout = window.setTimeout(() => {
-      if (cropperRef.current !== null) {
-        const imageElement: any = cropperRef?.current;
-        const cropper: any = imageElement?.cropper;
-
-        const url = cropper.getCroppedCanvas({ width: props.outputWidth || 400, height: props.outputHeight || 300 }).toDataURL("image/png", 0.4);
-        setCroppedImageDataUrl(url);
-      }
-    }, 200);
-  };
-
-  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
-
-  return (
-    <InputBox
-      id="cropperBox"
-      headerIcon=""
-      headerText={props.title}
-      ariaLabelDelete="deletePhoto"
-      saveText="Update"
-      saveFunction={handleSave}
-      cancelFunction={props.onCancel}
-      deleteFunction={(!props.hideDelete) && handleDelete}
-      headerActionContent={
-        <div>
-          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
-          <SmallButton
-            icon="upload"
-            text="Upload"
-            onClick={() => {
-              document.getElementById("fileUpload").click();
-            }}
-          />
-        </div>
-      }
-    >
-      <Cropper
-        ref={cropperRef}
-        src={photoSrc}
-        style={{ height: 240, width: "100%" }}
-        aspectRatio={props.aspectRatio}
-        guides={false}
-        crop={handleCrop}
-      />
-    </InputBox>
-  );
-}
+import React, { useState, useEffect, useRef } from "react";
+import Cropper from "react-cropper";
+import "cropperjs/dist/cropper.css";
+import { InputBox, SmallButton } from ".";
+
+interface Props {
+  title?: string;
+  photoUrl: string;
+  aspectRatio: number;
+  onUpdate: (dataUrl?: string) => void;
+  onCancel?: () => void;
+  outputWidth?: number;
+  outputHeight?: number;
+  hideDelete?: boolean;
+}
+
+export function ImageEditor(props: Props) {
+  const [photoSrc, setPhotoSrc] = useState<string>("");
+  const [croppedImageDataUrl, setCroppedImageDataUrl] = useState<string>("");
+  const cropperRef = useRef<HTMLImageElement>(null);
+  let timeout: any = null;
+
+  const handleSave = () => props.onUpdate(croppedImageDataUrl);
+
+  const handleDelete = () => props.onUpdate("");
+
+  const handleUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    let files;
+    if (e.target) {
+      files = e.target.files;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const url = reader.result.toString();
+      setPhotoSrc(url);
+      setCroppedImageDataUrl(url);
+      setTimeout(selectDefaultCropZone, 500);
+    };
+    reader.readAsDataURL(files[0]);
+  };
+
+  const selectDefaultCropZone = () => {
+    const imageElement: any = cropperRef?.current;
+    let cropper: any = imageElement?.cropper;
+    if (props.aspectRatio===0)
+    {
+      let containerData = cropper.getContainerData();
+      const imgWidth = cropper.getImageData().width;
+      const imgHeight = cropper.getImageData().height;
+      const effectiveWidth = (containerData.width > imgWidth) ? imgWidth : containerData.width;
+      const effectiveHeight = (containerData.height > imgHeight) ? imgHeight : containerData.height;
+      cropper.setCropBoxData({ width: effectiveWidth, height: effectiveHeight, left: (containerData.width - effectiveWidth) / 2.0 , top: (containerData.height - effectiveHeight) / 2.0 });
+    } else {
+      let desiredAspect = props.aspectRatio;
+      let containerData = cropper.getContainerData();
+      let imgAspect = cropper.getImageData().aspectRatio;
+      let scale = imgAspect / desiredAspect;
+      if (scale < 1) {
+        const imgWidth = cropper.getImageData().width;
+        let l = (containerData.width - imgWidth) / 2.0;
+        let t = (containerData.height - (containerData.height * scale)) / 2.0;
+        cropper.setCropBoxData({ width: imgWidth, height: imgWidth / desiredAspect, left: l, top: t });
+      } else {
+        const imgHeight = cropper.getImageData().height;
+        let l = (containerData.width - (imgHeight * desiredAspect)) / 2.0;
+        let t = cropper.canvasData.top;
+        cropper.setCropBoxData({ width: imgHeight * desiredAspect, height: imgHeight, left: l, top: t });
+      }
+    }
+
+  }
+
+  const handleCrop = () => {
+    if (timeout !== null) {
+      window.clearTimeout(timeout);
+      timeout = null;
+    }
+
+    timeout = window.setTimeout(() => {
+      if (cropperRef.current !== null) {
+        const imageElement: any = cropperRef?.current;
+        const cropper: any = imageElement?.cropper;
+
+        const url = cropper.getCroppedCanvas({ width: props.outputWidth || 400, height: props.outputHeight || 300 }).toDataURL("image/png", 0.4);
+        setCroppedImageDataUrl(url);
+      }
+    }, 200);
+  };
+
+  useEffect(() => { setPhotoSrc(props.photoUrl); }, [props.photoUrl]);
+
+  return (
+    <InputBox
+      id="cropperBox"
+      headerIcon=""
+      headerText={props.title}
+      ariaLabelDelete="deletePhoto"
+      saveText="Update"
+      saveFunction={handleSave}
+      cancelFunction={props.onCancel}
+      deleteFunction={(!props.hideDelete) && handleDelete}
+      headerActionContent={
+        <div>
+          <input type="file" onChange={handleUpload} id="fileUpload" accept="image/*" style={{ display: "none" }} />
+          <SmallButton
+            icon="upload"
+            text="Upload"
+            onClick={() => {
+              document.getElementById("fileUpload").click();
+            }}
+          />
+        </div>
+      }
+    >
+      <Cropper
+        ref={cropperRef}
+        src={photoSrc}
+        style={{ height: 240, width: "100%" }}
+        aspectRatio={props.aspectRatio}
+        guides={false}
+        crop={handleCrop}
+      />
+    </InputBox>
+  );
+}

package/src/components/InputBox.tsx

@@ -1,73 +1,73 @@
-import React from "react";
-import { Paper, Box, Typography, Stack, styled, Button, Icon, PaperProps } from "@mui/material";
-import { HelpIcon } from "./HelpIcon";
-
-interface Props {
-  id?: string;
-  children?: React.ReactNode;
-  headerIcon?: string;
-  headerText?: string;
-  help?: string;
-  saveText?: string;
-  headerActionContent?: React.ReactNode;
-  cancelFunction?: () => void;
-  deleteFunction?: () => void;
-  saveFunction: () => void;
-  "data-cy"?: string;
-  className?: string;
-  isSubmitting?: boolean;
-  ariaLabelDelete?: string;
-  ariaLabelSave?: string;
-  saveButtonType?: "submit" | "button";
-  mainContainerCssProps?: PaperProps;
-}
-
-const CustomContextBox = styled(Box)({
-  marginTop: 10,
-  overflowX: "hidden",
-  "& p": { color: "#666" },
-  "& label": { color: "#999" },
-  "& ul": { paddingLeft: 15 },
-  "& li": {
-    marginBottom: 10,
-    "& i": { marginRight: 5 }
-  },
-  "& td": {
-    "& i": { marginRight: 5 }
-  }
-})
-
-export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
-  let buttons = [];
-  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>Cancel</Button>);
-  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>Delete</Button>);
-  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || "save"}</Button>);
-
-  let classNames = ["inputBox"];
-  if (props.className) {
-    classNames.push(props.className);
-  }
-
-  return (
-    <Paper id={props.id} sx={{ padding: 2, marginBottom: 4 }} data-cy={props["data-cy"]} {...mainContainerCssProps}>
-      {props.help && <HelpIcon article={props.help} />}
-      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-cy="header">
-        <Box sx={{ display: "flex", alignItems: "center" }}>
-          {props.headerIcon && <Icon sx={{ color: "#1976d2" }}>{props.headerIcon}</Icon>}
-          {props.headerText && (
-            <Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color="primary">
-              {props.headerText}
-            </Typography>
-          )}
-        </Box>
-        <Box>
-          {props.headerActionContent}
-        </Box>
-      </Box>
-      <CustomContextBox>{props.children}</CustomContextBox>
-      <Stack direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
-        {buttons}
-      </Stack>
-    </Paper>
-  );
-}
+import React from "react";
+import { Paper, Box, Typography, Stack, styled, Button, Icon, PaperProps } from "@mui/material";
+import { HelpIcon } from "./HelpIcon";
+
+interface Props {
+  id?: string;
+  children?: React.ReactNode;
+  headerIcon?: string;
+  headerText?: string;
+  help?: string;
+  saveText?: string;
+  headerActionContent?: React.ReactNode;
+  cancelFunction?: () => void;
+  deleteFunction?: () => void;
+  saveFunction: () => void;
+  "data-cy"?: string;
+  className?: string;
+  isSubmitting?: boolean;
+  ariaLabelDelete?: string;
+  ariaLabelSave?: string;
+  saveButtonType?: "submit" | "button";
+  mainContainerCssProps?: PaperProps;
+}
+
+const CustomContextBox = styled(Box)({
+  marginTop: 10,
+  overflowX: "hidden",
+  "& p": { color: "#666" },
+  "& label": { color: "#999" },
+  "& ul": { paddingLeft: 15 },
+  "& li": {
+    marginBottom: 10,
+    "& i": { marginRight: 5 }
+  },
+  "& td": {
+    "& i": { marginRight: 5 }
+  }
+})
+
+export function InputBox({ mainContainerCssProps = {}, ...props }: Props) {
+  let buttons = [];
+  if (props.cancelFunction) buttons.push(<Button key="cancel" onClick={props.cancelFunction} color="warning" sx={{ "&:focus": { outline: "none" } }}>Cancel</Button>);
+  if (props.deleteFunction) buttons.push(<Button key="delete" id="delete" variant="outlined" aria-label={props.ariaLabelDelete} onClick={props.deleteFunction} color="error" sx={{ "&:focus": { outline: "none" } }}>Delete</Button>);
+  if (props.saveFunction) buttons.push(<Button key="save" type={props.saveButtonType || "button"} variant="contained" disableElevation aria-label={props.ariaLabelSave} onClick={props.saveFunction} disabled={props.isSubmitting} sx={{ "&:focus": { outline: "none" } }}>{props.saveText || "save"}</Button>);
+
+  let classNames = ["inputBox"];
+  if (props.className) {
+    classNames.push(props.className);
+  }
+
+  return (
+    <Paper id={props.id} sx={{ padding: 2, marginBottom: 4 }} data-cy={props["data-cy"]} {...mainContainerCssProps}>
+      {props.help && <HelpIcon article={props.help} />}
+      <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", position: "relative" }} data-cy="header">
+        <Box sx={{ display: "flex", alignItems: "center" }}>
+          {props.headerIcon && <Icon sx={{ color: "#1976d2" }}>{props.headerIcon}</Icon>}
+          {props.headerText && (
+            <Typography component="h2" sx={{ display: "inline-block", marginLeft: props.headerIcon ? 1 : 0 }} variant="h6" color="primary">
+              {props.headerText}
+            </Typography>
+          )}
+        </Box>
+        <Box>
+          {props.headerActionContent}
+        </Box>
+      </Box>
+      <CustomContextBox>{props.children}</CustomContextBox>
+      <Stack direction="row" sx={{ marginTop: 1 }} spacing={1} justifyContent="end">
+        {buttons}
+      </Stack>
+    </Paper>
+  );
+}

package/src/components/Loading.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { Dots } from "react-activity";
-import "react-activity/dist/library.css";
-
-interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
-
-export const Loading: React.FC<Props> = (props) => {
-
-  const getContents = () => {
-    const text = (props.loadingText) ? props.loadingText : "Loading"
-    const color = (props.color) ? props.color : "#222"
-    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
-    switch (props.size) {
-      case "sm":
-        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
-        break;
-      case "lg":
-        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
-        break;
-    }
-    return result;
-  }
-
-  return (
-    <div style={{ textAlign: "center", fontFamily: "Roboto" }}>
-      {getContents()}
-    </div>
-  )
-}
+import React from "react";
+import { Dots } from "react-activity";
+import "react-activity/dist/library.css";
+
+interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
+
+export const Loading: React.FC<Props> = (props) => {
+
+  const getContents = () => {
+    const text = (props.loadingText) ? props.loadingText : "Loading"
+    const color = (props.color) ? props.color : "#222"
+    let result = <><Dots speed={0.8} animating={true} size={32} color={color} /><p style={{ color: color }}>{text}</p></>
+    switch (props.size) {
+      case "sm":
+        result = <><Dots speed={0.8} animating={true} size={20} color={color} /><p style={{ fontSize: 12, color: color }}>{text}</p></>
+        break;
+      case "lg":
+        result = <><Dots speed={0.8} animating={true} size={48} color={color} /><p style={{ fontSize: 30, color: color }}>{text}</p></>
+        break;
+    }
+    return result;
+  }
+
+  return (
+    <div style={{ textAlign: "center", fontFamily: "Roboto" }}>
+      {getContents()}
+    </div>
+  )
+}

package/src/components/PersonAdd.tsx

@@ -1,75 +1,75 @@
-import React, { useState } from "react";
-import { ApiHelper } from "../helpers";
-import { PersonInterface } from "../interfaces"
-import { TextField, Button, Table, TableBody, TableRow, TableCell } from "@mui/material";
-import { SmallButton } from "./SmallButton";
-import { CreatePerson } from "./CreatePerson";
-
-interface Props {
-  addFunction: (person: PersonInterface) => void;
-  person?: PersonInterface;
-  getPhotoUrl: (person: PersonInterface) => string;
-  searchClicked?: () => void;
-  filterList?: string[];
-  includeEmail?: boolean;
-  actionLabel?: string;
-  showCreatePersonOnNotFound?: boolean;
-}
-
-export const PersonAdd: React.FC<Props> = ({ addFunction, getPhotoUrl, searchClicked, filterList = [], includeEmail = false, actionLabel, showCreatePersonOnNotFound = false }) => {
-  const [searchResults, setSearchResults] = useState<PersonInterface[]>([]);
-  const [searchText, setSearchText] = useState("");
-  const [hasSearched, setHasSearched] = useState<boolean>(false);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setHasSearched(false); setSearchText(e.currentTarget.value); }
-  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSearch(null); } }
-
-  const handleSearch = (e: React.MouseEvent) => {
-    if (e !== null) e.preventDefault();
-    let term = searchText.trim();
-    ApiHelper.post("/people/search", { term: term }, "MembershipApi")
-      .then((data: PersonInterface[]) => {
-        setHasSearched(true);
-        const filteredResult = data.filter(s => !filterList.includes(s.id))
-        setSearchResults(filteredResult);
-        if (searchClicked) {
-          searchClicked();
-        }
-      });
-  }
-  const handleAdd = (person: PersonInterface) => {
-    let sr: PersonInterface[] = [...searchResults];
-    const idx = sr.indexOf(person);
-    sr.splice(idx, 1);
-    setSearchResults(sr);
-    addFunction(person);
-  }
-
-  //<button className="text-success no-default-style" aria-label="addPerson" data-index={i} onClick={handleAdd}><Icon>person</Icon> Add</button>
-  let rows = [];
-  for (let i = 0; i < searchResults.length; i++) {
-    const sr = searchResults[i];
-
-    rows.push(
-      <TableRow key={sr.id}>
-        <TableCell><img src={getPhotoUrl(sr)} alt="avatar" /></TableCell>
-        <TableCell>{sr.name.display}{includeEmail && (<><br /><i style={{ color: "#999" }}>{sr.contactInfo.email}</i></>)}</TableCell>
-        <TableCell>
-          <SmallButton color="success" icon="person" text={actionLabel || "Add"} ariaLabel="addPerson" onClick={() => handleAdd(sr)} />
-        </TableCell>
-      </TableRow>
-    );
-  }
-
-  return (
-    <>
-      <TextField fullWidth name="personAddText" label="Person" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
-        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
-      />
-      {showCreatePersonOnNotFound && hasSearched && searchText && searchResults.length === 0 && (
-        <CreatePerson navigateOnCreate={false} onCreate={person => { setSearchText(""); setSearchResults([person]) }} />
-      )}
-      <Table size="small" id="householdMemberAddTable"><TableBody>{rows}</TableBody></Table>
-    </>
-  );
-}
+import React, { useState } from "react";
+import { ApiHelper } from "../helpers";
+import { PersonInterface } from "../interfaces"
+import { TextField, Button, Table, TableBody, TableRow, TableCell } from "@mui/material";
+import { SmallButton } from "./SmallButton";
+import { CreatePerson } from "./CreatePerson";
+
+interface Props {
+  addFunction: (person: PersonInterface) => void;
+  person?: PersonInterface;
+  getPhotoUrl: (person: PersonInterface) => string;
+  searchClicked?: () => void;
+  filterList?: string[];
+  includeEmail?: boolean;
+  actionLabel?: string;
+  showCreatePersonOnNotFound?: boolean;
+}
+
+export const PersonAdd: React.FC<Props> = ({ addFunction, getPhotoUrl, searchClicked, filterList = [], includeEmail = false, actionLabel, showCreatePersonOnNotFound = false }) => {
+  const [searchResults, setSearchResults] = useState<PersonInterface[]>([]);
+  const [searchText, setSearchText] = useState("");
+  const [hasSearched, setHasSearched] = useState<boolean>(false);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { e.preventDefault(); setHasSearched(false); setSearchText(e.currentTarget.value); }
+  const handleKeyDown = (e: React.KeyboardEvent<any>) => { if (e.key === "Enter") { e.preventDefault(); handleSearch(null); } }
+
+  const handleSearch = (e: React.MouseEvent) => {
+    if (e !== null) e.preventDefault();
+    let term = searchText.trim();
+    ApiHelper.post("/people/search", { term: term }, "MembershipApi")
+      .then((data: PersonInterface[]) => {
+        setHasSearched(true);
+        const filteredResult = data.filter(s => !filterList.includes(s.id))
+        setSearchResults(filteredResult);
+        if (searchClicked) {
+          searchClicked();
+        }
+      });
+  }
+  const handleAdd = (person: PersonInterface) => {
+    let sr: PersonInterface[] = [...searchResults];
+    const idx = sr.indexOf(person);
+    sr.splice(idx, 1);
+    setSearchResults(sr);
+    addFunction(person);
+  }
+
+  //<button className="text-success no-default-style" aria-label="addPerson" data-index={i} onClick={handleAdd}><Icon>person</Icon> Add</button>
+  let rows = [];
+  for (let i = 0; i < searchResults.length; i++) {
+    const sr = searchResults[i];
+
+    rows.push(
+      <TableRow key={sr.id}>
+        <TableCell><img src={getPhotoUrl(sr)} alt="avatar" /></TableCell>
+        <TableCell>{sr.name.display}{includeEmail && (<><br /><i style={{ color: "#999" }}>{sr.contactInfo.email}</i></>)}</TableCell>
+        <TableCell>
+          <SmallButton color="success" icon="person" text={actionLabel || "Add"} ariaLabel="addPerson" onClick={() => handleAdd(sr)} />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <>
+      <TextField fullWidth name="personAddText" label="Person" value={searchText} onChange={handleChange} onKeyDown={handleKeyDown}
+        InputProps={{ endAdornment: <Button variant="contained" id="searchButton" data-cy="search-button" onClick={handleSearch}>Search</Button> }}
+      />
+      {showCreatePersonOnNotFound && hasSearched && searchText && searchResults.length === 0 && (
+        <CreatePerson navigateOnCreate={false} onCreate={person => { setSearchText(""); setSearchResults([person]) }} />
+      )}
+      <Table size="small" id="householdMemberAddTable"><TableBody>{rows}</TableBody></Table>
+    </>
+  );
+}