@star-insure/sdk 4.3.5 → 4.4.0

package/dist/types/misc/index.d.ts

@@ -27,6 +27,15 @@ export declare type TPageHeaderAction = {
     type?: 'button' | 'submit';
     hidden?: boolean;
     shortcutKey?: string;
+    actions?: TPageHeaderInnerAction[];
+};
+export declare type TPageHeaderInnerAction = {
+    title: string;
+    as?: 'button' | 'a' | 'Link';
+    href?: string;
+    target?: '_self' | '_blank';
+    onClick?: Function;
+    hidden?: boolean;
 };
 export declare type Environment = 'production' | 'staging' | 'testing' | 'local';
 export declare type Breadcrumb = {

package/package.json

@@ -2,7 +2,7 @@
     "name": "@star-insure/sdk",
     "description": "The SDK for Star Insure client apps with shared helper functions and TypeScript definitions.",
     "author": "alexclark_nz",
-    "version": "4.3.5",
+    "version": "4.4.0",
     "license": "MIT",
     "repository": {
         "type": "git",

package/src/components/filter/Action.tsx

@@ -2,14 +2,26 @@ import React from "react";
 import { Tooltip } from 'react-tooltip';
 import { Link, router } from "@inertiajs/react";
 import { TPageHeaderAction } from "../../types";
+import {useClickOutside} from "../../lib";
 
-export default function Action({ title, href, as = 'Link', target = '_self', type, onClick = () => {}, shortcutKey }: TPageHeaderAction) {
+export default function Action({ title, href, as = 'Link', target = '_self', type, onClick = () => {}, shortcutKey, actions }: TPageHeaderAction) {
     const className =
         'bg-white rounded-full font-bold px-4 py-1.5 text-sm whitespace-nowrap hover:bg-gray-100 hover:border-gray-400 transition-colors border border-gray-300';
 
     const tooltipId = `action-${title}`;
     const tooltipContent = shortcutKey ? `Ctrl + ${shortcutKey}` : undefined;
 
+    const actionButtonRef = React.useRef(null);
+    const isActionsButton = actions && actions.length > 0;
+    const actionsButtonClassName = 'relative cursor-pointer ' + className;
+    const [isInnerActionVisible, setIsInnerActionVisible] = React.useState(false);
+
+    const toggleActionsMenu = () => {
+        setIsInnerActionVisible(!isInnerActionVisible);
+    };
+
+    useClickOutside(actionButtonRef, () => setIsInnerActionVisible(false));
+
     function runAction() {
         if (as === 'Link' && href) {
             return router.get(href);
@@ -47,6 +59,43 @@ export default function Action({ title, href, as = 'Link', target = '_self', typ
         };
     }, [shortcutKey]);
 
+    if (isActionsButton) {
+        return (
+            <>
+                {tooltipContent && <Tooltip id={tooltipId} className="z-10" />}
+                <div
+                    ref={actionButtonRef}
+                    data-tooltip-id={tooltipId}
+                    data-tooltip-content={tooltipContent}
+                    className={actionsButtonClassName}
+                    onClick={toggleActionsMenu}>
+                        {title}
+                        {isInnerActionVisible && (
+                            <div className="absolute top-[120%] right-[-20%] z-10">
+                                <div className="flex flex-col gap-2 bg-white rounded-lg shadow-xl p-3">
+                                    {actions && actions.map((action, index) => {
+                                        if (action.hidden) return null;
+
+                                        return (
+                                            <Action
+                                                key={index}
+                                                title={action.title}
+                                                as={action.as}
+                                                href={action.href}
+                                                target={action.target}
+                                                onClick={action.onClick}
+                                                type={'button'}
+                                            />
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        )}
+                </div>
+            </>
+        );
+    }
+
     if (as === 'Link' && href) {
         return (
             <>

package/src/types/misc/index.ts

@@ -32,6 +32,16 @@ export type TPageHeaderAction = {
     type?: 'button' | 'submit';
     hidden?: boolean;
     shortcutKey?: string;
+    actions?: TPageHeaderInnerAction[];
+};
+
+export type TPageHeaderInnerAction = {
+    title: string;
+    as?: 'button' | 'a' | 'Link';
+    href?: string;
+    target?: '_self' | '_blank';
+    onClick?: Function;
+    hidden?: boolean;
 };
 
 export type Environment = 'production' | 'staging' | 'testing' | 'local';