Added AccordionV2 and CollapseV2 components to replace MUI's Acco…

…rdion and Collapse components (#3762) * Added component to replace MUI's Accordion component * minor ui fix * Added AccordionV2 and CollapseV2 * removed comments * patient registration fields alignment fix * fixed accordion max height issue
ohcnetwork · Oct 26, 2022 · d3506fb · d3506fb
1 parent 0c00f1d
commit d3506fb
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 172 deletions.
diff --git a/src/Components/Common/components/AccordionV2.tsx b/src/Components/Common/components/AccordionV2.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+
+export default function AccordionV2(props: {
+  children: JSX.Element | JSX.Element[];
+  expandIcon?: JSX.Element;
+  title: JSX.Element | JSX.Element[] | string;
+  className?: string;
+  expanded?: boolean;
+}) {
+  const [toggle, setToggle] = useState(props.expanded as boolean);
+  const contentEl = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <div className={props.className}>
+      <div className="flex justify-between">
+        <button
+          type="button"
+          className="w-full grid justify-start"
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          <>{props.title}</>
+        </button>
+        <button
+          type="button"
+          className={
+            toggle
+              ? "transition-all rotate-180 duration-300 ease-in-out"
+              : "transition"
+          }
+          onClick={() => {
+            setToggle((prev) => !prev);
+          }}
+        >
+          {props.expandIcon ? (
+            props.expandIcon
+          ) : (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={2}
+              stroke="currentColor"
+              className="w-5 h-5"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 8.25l-7.5 7.5-7.5-7.5"
+              />
+            </svg>
+          )}
+        </button>
+      </div>
+      <div
+        className="transition-all ease-in-out duration-500 overflow-hidden"
+        ref={contentEl}
+        style={
+          toggle
+            ? {
+                maxHeight: contentEl.current
+                  ? contentEl.current.scrollHeight * 2
+                  : "0px",
+              }
+            : { maxHeight: "0px" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Common/components/CollapseV2.tsx b/src/Components/Common/components/CollapseV2.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+
+export default function CollapseV2(props: {
+  children: JSX.Element | JSX.Element[];
+  opened: boolean;
+  className?: string;
+}) {
+  const content = React.useRef<HTMLDivElement>(null);
+  const [innerDivState, setInnerDivState] = useState(false);
+  const [outerDivState, setOuterDivState] = useState(false);
+
+  useEffect(() => {
+    if (props.opened) {
+      setOuterDivState(props.opened);
+      setTimeout(() => {
+        setInnerDivState(props.opened);
+      }, 1);
+    } else {
+      setInnerDivState(props.opened);
+      setTimeout(() => {
+        setOuterDivState(props.opened);
+      }, 300);
+    }
+  }, [props.opened]);
+
+  return (
+    <div
+      className="transition-all ease-in-out duration-300"
+      style={
+        outerDivState
+          ? {
+              display: "block",
+            }
+          : { display: "none" }
+      }
+    >
+      <div
+        className={`transition-all ease-in-out duration-300 overflow-hidden ${
+          props.className ? props.className : ""
+        }`}
+        ref={content}
+        style={
+          innerDivState
+            ? {
+                maxHeight: content.current?.scrollHeight,
+              }
+            : { maxHeight: "0px" }
+        }
+      >
+        {props.children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Common/components/ResponsiveMedicineTables.tsx b/src/Components/Common/components/ResponsiveMedicineTables.tsx
@@ -1,9 +1,5 @@
-import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-} from "@material-ui/core";
 import { useEffect, useState } from "react";
+import AccordionV2 from "./AccordionV2";
 
 function getWindowSize() {
   const { innerWidth, innerHeight } = window;
@@ -67,31 +63,11 @@ export default function ResponsiveMedicineTable(props: {
       ) : (
         <div className="rounded-md shadow-sm">
           {props.list.map((med: any, index: number) => (
-            <Accordion elevation={0} key={index}>
-              <AccordionSummary
-                className="overflow-hidden"
-                expandIcon={
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth={2}
-                    stroke="currentColor"
-                    className="w-5 h-5"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      d="M19.5 8.25l-7.5 7.5-7.5-7.5"
-                    />
-                  </svg>
-                }
-                aria-controls={`panel${index + 1}a-content`}
-                id={`panel${index + 1}a-header`}
-              >
+            <AccordionV2
+              title={
                 <div className="grid">
                   <div className="flex flex-col">
-                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full">
+                    <h3 className="text-sm font-medium overflow-hidden text-ellipsis w-full text-left">
                       {med[props.objectKeys[0]]}
                     </h3>
                   </div>
@@ -106,35 +82,40 @@ export default function ResponsiveMedicineTable(props: {
                     ))}
                   </div>
                 </div>
-              </AccordionSummary>
-              <AccordionDetails className="border-t border-t-gray-400">
-                <div className="flex flex-col w-full">
-                  <div className="grid grid-cols-2 gap-3 w-full">
-                    {props.objectKeys.map((key, i) => {
-                      if (i !== 0 && i !== props.objectKeys.length - 1)
-                        return (
-                          <div>
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
+              }
+              className={
+                props.list.length - 1 === index
+                  ? "bg-white p-5 "
+                  : "bg-white p-5 border-b border-b-gray-400"
+              }
+              key={index}
+            >
+              <div className="flex flex-col w-full border-t border-t-gray-400 mt-3">
+                <div className="grid grid-cols-2 gap-3 w-full mt-3">
+                  {props.objectKeys.map((key, i) => {
+                    if (i !== 0 && i !== props.objectKeys.length - 1)
+                      return (
+                        <div>
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
 
-                      if (i === props.objectKeys.length - 1)
-                        return (
-                          <div className="col-span-2">
-                            <h4 className="font-semibold text-base">
-                              {props.theads[i]}
-                            </h4>{" "}
-                            <p>{med[key]}</p>
-                          </div>
-                        );
-                    })}
-                  </div>
+                    if (i === props.objectKeys.length - 1)
+                      return (
+                        <div className="col-span-2">
+                          <h4 className="font-semibold text-base">
+                            {props.theads[i]}
+                          </h4>{" "}
+                          <p>{med[key]}</p>
+                        </div>
+                      );
+                  })}
                 </div>
-              </AccordionDetails>
-            </Accordion>
+              </div>
+            </AccordionV2>
           ))}
         </div>
       )}

diff --git a/src/Components/Common/components/SelectMenu.tsx b/src/Components/Common/components/SelectMenu.tsx
@@ -12,6 +12,7 @@ type Props<T> = {
   selected?: T;
   label?: string;
   position?: string;
+  parentRelative?: boolean;
 };
 
 export default function SelectMenu<T>(props: Props<T>) {
@@ -34,7 +35,13 @@ export default function SelectMenu<T>(props: Props<T>) {
       {({ open }) => (
         <>
           <Listbox.Label className="sr-only">{props.label}</Listbox.Label>
-          <div className="relative">
+          <div
+            className={
+              props.parentRelative || props.parentRelative === undefined
+                ? "relative"
+                : ""
+            }
+          >
             <Listbox.Button className="w-full flex shadow-sm rounded bg-gray-50 hover:bg-gray-200 focus:ring-primary-500 border focus:ring-1 ring-gray-400 focus:border-primary-500 border-gray-400 transition-all duration-200 ease-in-out">
               <div className="relative z-0 flex w-full">
                 <div className="relative flex-1 flex items-center py-2 pl-3 pr-4 border border-transparent rounded-l focus:outline-none focus:z-10">