@sikka/hawa 0.0.199 → 0.0.201

package/lib/layout/HawaAppLayout.d.ts

@@ -23,7 +23,7 @@ type HawaAppLayoutTypes = {
 type MenuItems = {
     icon?: JSX.Element;
     label: string;
-    action?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>, item: string) => void;
+    action?: (e: any) => void;
     isButton?: boolean;
 };
 export declare const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.199",
+  "version": "0.0.201",
   "description": "SaaS Oriented UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/elements/HawaItemCard.tsx

@@ -18,10 +18,7 @@ interface ItemCardTypes {
 type THeaderActions = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  action?: (e: any) => void
   isButton?: boolean
 }
 export const HawaItemCard: React.FunctionComponent<ItemCardTypes> = ({

package/src/elements/HawaMenu.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import React, { ReactNode, useEffect, useRef, useState } from "react"
+
 // TODO: add width to decrease width
 
 interface TMenuTypes {
@@ -20,16 +21,15 @@ interface TMenuTypes {
     | "bottom-right"
     | "bottom-left"
   onClickOutside?: any
+  actionedItem?: any
   size?: "small" | "normal" | "large"
 }
 
 type MenuItems = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  // action?: (item: any) => void
+  action?: (e: any) => void
   isButton?: boolean
   element?: any
 }
@@ -43,6 +43,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
   size = "normal",
   children,
   onClickOutside,
+  actionedItem,
   position = "top-right",
 }) => {
   const [menuOpened, setMenuOpened] = useState(false)
@@ -196,7 +197,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                   </li>
                 ) : (
                   <li
-                    onClick={(e) => item.action(e, item.label)}
+                    onClick={() => item?.action(actionedItem)}
                     className={clsx(
                       item.isButton
                         ? "flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
@@ -205,7 +206,13 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     )}
                   >
                     {item.icon && (
-                      <div className="mr-2 rtl:ml-2">{item.icon}</div>
+                      <div
+                        className={
+                          size === "small" ? "mr-1 rtl:ml-1" : "mr-2 rtl:ml-2"
+                        }
+                      >
+                        {item.icon}
+                      </div>
                     )}
                     {item.label}
                   </li>

package/src/elements/HawaTable.tsx

@@ -2,8 +2,7 @@ import React from "react"
 import { BsThreeDotsVertical } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
-// TODO: make action click return row
-// TODO: make action column width max fit
+
 type TableTypes = {
   columns: any[string]
   actions?: ActionItems[][]
@@ -18,15 +17,13 @@ type TableTypes = {
   clickable?: boolean
   actionsText?: string
   bordersWidth?: string
+  onActionClicked?: any
   borders?: "all" | "cols" | "rows" | "outer" | "inner"
 }
 type ActionItems = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  action?: (e: any) => void
   isButton?: boolean
   element?: any
 }
@@ -56,22 +53,32 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
       >
         <thead className="  text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
           <tr>
-            {props.columns.map((col: any, i: any) => (
+            {props.columns.map((col: any, i: any) => {
+              if (col.hidden) {
+                return
+              } else {
+                return (
+                  <th
+                    key={i}
+                    scope="col"
+                    colSpan={2}
+                    className={clsx(
+                      sizeStyles[size],
+                      i !== 0 && (borders === "cols" || borders === "all")
+                        ? `border-l border-l-[${bordersWidth}px]`
+                        : ""
+                    )}
+                  >
+                    {col.value}
+                  </th>
+                )
+              }
+            })}
+            {props.actions && size !== "small" ? (
               <th
-                key={i}
                 scope="col"
-                className={clsx(
-                  sizeStyles[size],
-                  i !== 0 && (borders === "cols" || borders === "all")
-                    ? `border-l border-l-[${bordersWidth}px]`
-                    : ""
-                )}
+                className={clsx(sizeStyles[size], "w-[calc(1%)] text-center")}
               >
-                {col}
-              </th>
-            ))}
-            {props.actions && size !== "small" ? (
-              <th scope="col" className={clsx(sizeStyles[size], "text-center")}>
                 {props.actionsText}
               </th>
             ) : null}
@@ -85,7 +92,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
           {/* Table Rows */}
           {props.rows ? (
             props.rows.map((singleRow: any, rowIndex: any) => {
+              console.log("single row is ", singleRow)
               let lastRow = rowIndex == props.rows.length - 1
+
               return (
                 <tr
                   key={rowIndex}
@@ -110,40 +119,45 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                     let isLTRLastCell =
                       !isRTL && lastRow && lastCell && !props.actions
 
-                    return (
-                      <td
-                        key={i}
-                        className={clsx(
-                          sizeStyles[size],
-                          highlightFirst && firstCell
-                            ? "font-bold"
-                            : "font-normal",
-                          isRTLFirstCell
-                            ? "rounded-bl-none rounded-br"
-                            : isRTLLastCell
-                            ? "rounded-br-none rounded-bl"
-                            : isLTRFirstCell
-                            ? "rounded-br-none rounded-bl"
-                            : isLTRLastCell
-                            ? "rounded-bl-none rounded-br"
-                            : "",
+                    if (r.hidden) {
+                      return
+                    } else {
+                      return (
+                        <td
+                          colSpan={2}
+                          key={i}
+                          className={clsx(
+                            sizeStyles[size],
+                            highlightFirst && firstCell
+                              ? "font-bold"
+                              : "font-normal",
+                            isRTLFirstCell
+                              ? "rounded-bl-none rounded-br"
+                              : isRTLLastCell
+                              ? "rounded-br-none rounded-bl"
+                              : isLTRFirstCell
+                              ? "rounded-br-none rounded-bl"
+                              : isLTRLastCell
+                              ? "rounded-bl-none rounded-br"
+                              : "",
 
-                          !firstCell &&
-                            !lastCell &&
-                            (borders === "cols" || borders === "inner")
-                            ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
-                            : !firstCell &&
-                              props.actions &&
+                            !firstCell &&
+                              !lastCell &&
                               (borders === "cols" || borders === "inner")
-                            ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
-                            : ""
+                              ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
+                              : !firstCell &&
+                                props.actions &&
+                                (borders === "cols" || borders === "inner")
+                              ? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
+                              : ""
 
-                          // customColor ? `bg-${customColor}` : "bg-white"
-                        )}
-                      >
-                        {r}
-                      </td>
-                    )
+                            // customColor ? `bg-${customColor}` : "bg-white"
+                          )}
+                        >
+                          {r.value}
+                        </td>
+                      )
+                    }
                     // }
                   })}
                   {props.actions && size !== "small" ? (
@@ -152,11 +166,14 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                       className={clsx(
                         isRTL && lastRow ? "rounded-br-none rounded-bl" : "",
                         !isRTL && lastRow ? "rounded-bl-none rounded-br" : ""
+                        // "w-fit bg-red-400"
                       )}
+                      colSpan={1}
                     >
                       <div className="flex items-center justify-center">
                         <HawaMenu
                           size="small"
+                          actionedItem={[rowIndex, singleRow]}
                           menuItems={props.actions}
                           position={
                             direction === "rtl" ? "right-bottom" : "left-bottom"
@@ -192,28 +209,3 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
     </div>
   )
 }
-
-// const TableActionButton = (props) => {
-//   let smallAct = props.action?.toLowerCase()
-//   return (
-//     <HawaButton
-//       tooltipSize="small"
-//       buttonID={props.action + props.row}
-//       tooltipPosition="top-right"
-//       size="xs"
-//       variant="contained"
-//       tooltip={props.action}
-//       onClick={() => props.handleActionClick(smallAct)}
-//     >
-//       {smallAct === "delete" ? (
-//         <FaTrash />
-//       ) : smallAct === "view" ? (
-//         <FaExclamationCircle />
-//       ) : smallAct === "edit" ? (
-//         <FaPen />
-//       ) : (
-//         props.action
-//       )}
-//     </HawaButton>
-//   )
-// }

package/src/elements/InvoiceAccordion.tsx

@@ -26,8 +26,7 @@ type InvoiceAccordionTypes = {
     icon?: JSX.Element
     label: string
     action?: (
-      e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-      item: string
+      e: any
     ) => void
     isButton?: boolean
     element?: any

package/src/layout/HawaAppLayout.tsx

@@ -33,10 +33,7 @@ type HawaAppLayoutTypes = {
 type MenuItems = {
   icon?: JSX.Element
   label: string
-  action?: (
-    e: React.MouseEvent<HTMLLIElement, MouseEvent>,
-    item: string
-  ) => void
+  action?: (e: any) => void
   isButton?: boolean
 }
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({

package/src/styles.css

@@ -715,6 +715,9 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.mr-1 {
+  margin-right: 0.25rem;
+}
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -772,9 +775,6 @@ video {
 .mr-1\.5 {
   margin-right: 0.375rem;
 }
-.mr-1 {
-  margin-right: 0.25rem;
-}
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -938,6 +938,9 @@ video {
 .w-11 {
   width: 2.75rem;
 }
+.w-\[calc\(1\%\)\] {
+  width: calc(1%);
+}
 .w-1 {
   width: 0.25rem;
 }
@@ -2136,6 +2139,10 @@ body {
   --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
 }
 
+[dir="rtl"] .rtl\:ml-1 {
+  margin-left: 0.25rem;
+}
+
 [dir="rtl"] .rtl\:ml-2 {
   margin-left: 0.5rem;
 }