@oneuptime/common 7.0.3148 → 7.0.3153

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -0,0 +1,54 @@
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
+import Button, { ButtonStyleType } from "../Button/Button";
+import IconProp from "../../../Types/Icon/IconProp";
+import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
+
+export interface ComponentProps {
+  children: Array<ReactElement> | ReactElement;
+}
+
+const MoreMenu: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const { ref, isComponentVisible, setIsComponentVisible } =
+    useComponentOutsideClick(false);
+
+  const [isDropdownVisible, setDropdownVisible] = useState<boolean>(false);
+
+  useEffect(() => {
+    setDropdownVisible(isComponentVisible);
+  }, [isComponentVisible]);
+
+  return (
+    <div className="relative inline-block text-left">
+      <div>
+        <Button
+          icon={IconProp.More}
+          buttonStyle={ButtonStyleType.ICON}
+          onClick={() => {
+            setIsComponentVisible(!isDropdownVisible);
+          }}
+        />
+      </div>
+
+      {isComponentVisible && (
+        <div
+          ref={ref}
+          className="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+          role="menu"
+          aria-orientation="vertical"
+          aria-labelledby="menu-button"
+        >
+          {props.children}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MoreMenu;

package/UI/Components/MoreMenu/MoreMenuItem.tsx

@@ -0,0 +1,37 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import IconProp from "../../../Types/Icon/IconProp";
+import Icon from "../Icon/Icon";
+
+export interface ComponentProps {
+  icon?: IconProp | undefined;
+  text: string;
+  onClick: () => void;
+  rightElement?: Array<ReactElement> | ReactElement | undefined;
+}
+
+const MoreMenuItem: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <a
+      className="cursor-pointer group flex items-center px-4 py-2 text-sm text-gray-700 hover:text-gray-900 hover:bg-gray-50"
+      role="menuitem"
+      onClick={() => {
+        props.onClick();
+      }}
+    >
+      {props.icon && (
+        <Icon
+          icon={props.icon}
+          className="mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500"
+        />
+      )}
+      <div className="flex justify-between">
+        <div>{props.text}</div>
+        <div>{props.rightElement}</div>
+      </div>
+    </a>
+  );
+};
+
+export default MoreMenuItem;

package/UI/Components/MoreMenu/MoreMenuSection.tsx

@@ -0,0 +1,22 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import MoreMenuDivider from "./Divider";
+export interface ComponentProps {
+  title: string;
+  children: Array<ReactElement> | ReactElement;
+}
+
+const MoreMenuSection: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <div>
+      <div className="text-gray-400 text-sm font-medium">
+        {props.title.toLocaleUpperCase()}
+      </div>
+      {props.children}
+      <MoreMenuDivider />
+    </div>
+  );
+};
+
+export default MoreMenuSection;

package/UI/Components/Toggle/Toggle.tsx

@@ -4,6 +4,9 @@ import React, {
   useEffect,
   useState,
 } from "react";
+import Tooltip from "../Tooltip/Tooltip";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   onChange: (value: boolean) => void;
@@ -16,6 +19,7 @@ export interface ComponentProps {
   description?: string | undefined;
   error?: string | undefined;
   dataTestId?: string | undefined;
+  tooltip?: string | undefined;
 }
 
 const Toggle: FunctionComponent<ComponentProps> = (
@@ -100,6 +104,16 @@ const Toggle: FunctionComponent<ComponentProps> = (
             {props.description}
           </span>
         </span>
+        {props.tooltip && (
+          <Tooltip key={1} text={props.tooltip || "Not available"}>
+            <div className="ml-1">
+              <Icon
+                className="cursor-pointer w-4 h-4 mt-1 text-gray-400"
+                icon={IconProp.Help}
+              />
+            </div>
+          </Tooltip>
+        )}
       </div>
       {props.error && (
         <p data-testid="error-message" className="mt-1 text-sm text-red-400">