@star-insure/sdk 4.3.4 → 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.4",
+    "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/components/forms/DateOfBirthField.tsx

@@ -69,16 +69,26 @@ export default function DateOfBirthField({
   const isValidDate =
     year && month && day && !isNaN(Date.parse(`${year}-${month}-${day}`));
 
+  const styleReq = {
+    backgroundPosition: 'top 10px right 3px, center right 10px',
+  }
+
+  const style = {
+    backgroundPosition: 'right 0.5rem center',
+    paddingRight: '1.5rem'
+  }
+
   return (
     <span className="flex flex-col gap-2">
-      <span className="flex space-x-4 border border-gray-300 rounded-lg bg-white">
+      <span className="flex w-full border border-gray-300 rounded-lg bg-white">
         <select
           name={`${name}_day`}
           id={`${id}_day`}
           value={day}
-          className="flex-grow focus:outline-none border-0"
+          className="flex-grow focus:outline-none border-0 !mr-[3px] lg:pl-4 xl:pl-2"
           onChange={handleChange}
           required={isRequired}
+          style={isRequired ? styleReq : style}
         >
           <option value="">Day</option>
           {dayOptions.map(option => (
@@ -91,9 +101,10 @@ export default function DateOfBirthField({
           name={`${name}_month`}
           id={`${id}_month`}
           value={month}
-          className="flex-grow focus:outline-none border-0"
+          className="flex-grow focus:outline-none border-0 !mr-[3px] lg:pl-4 xl:pl-2"
           onChange={handleChange}
           required={isRequired}
+          style={isRequired ? styleReq : style}
         >
           <option value="">Month</option>
           {monthOptions.map(option => (
@@ -106,9 +117,10 @@ export default function DateOfBirthField({
           name={`${name}_year`}
           id={`${id}_year`}
           value={year}
-          className="flex-grow focus:outline-none border-0"
+          className="flex-grow focus:outline-none border-0 !mr-[3px] lg:pl-4 xl:pl-2"
           onChange={handleChange}
           required={isRequired}
+          style={isRequired ? styleReq : style}
         >
           <option value="">Year</option>
           {yearOptions.map(option => (

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';