@sikka/hawa 0.0.205 → 0.0.206

package/src/elements/HawaTable.tsx

@@ -1,24 +1,33 @@
 import React, { useEffect, useState } from "react"
-import { BsChevronRight, BsThreeDotsVertical } from "react-icons/bs"
+import { BsChevronRight, BsFilter, BsPlus, BsThreeDots } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
 import useTable from "../hooks/useTable"
-
+import { HawaTextField } from "./HawaTextField"
+import { HawaButton } from "./HawaButton"
+import { FaSearch } from "react-icons/fa"
+// TODO: translate header tools and make it more customizable
+// TODO: pass the onSearch handler to the parent
 type TableTypes = {
   columns: any[string]
   actions?: ActionItems[][]
   direction?: "rtl" | "ltr"
   rows?: any[any]
-  noDataText?: any
   handleActionClick?: any
   end?: any
   size?: "normal" | "small"
   highlightFirst?: boolean
   customColor?: string
   clickable?: boolean
-  actionsText?: string
+  texts?: {
+    actions?: string
+    noData?: any
+    items?: string
+    page?: string
+  }
   bordersWidth?: string
   onActionClicked?: any
+  headerTools?: boolean
   borders?: "all" | "cols" | "rows" | "outer" | "inner"
 }
 type ActionItems = {
@@ -42,14 +51,17 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   const [enteredPage, setEnteredPage] = useState(null)
   const [page, setPage] = useState(1)
 
-  const { slice, range } = useTable(props.rows ?? [], page, perPage)
-  useEffect(() => {
+  const { slice, range } = useTable(props.rows, page, perPage)
+  const changePage = () => {
     if (slice?.length < 1 && page !== 1) {
       setPage(page - 1)
     }
     if (enteredPage) {
       setPage(enteredPage)
     }
+  }
+  useEffect(() => {
+    changePage()
   }, [slice, page])
 
   let isRTL = direction === "rtl"
@@ -60,168 +72,189 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   }
 
   return (
-    <div className="relative">
-      <table
-        className={clsx(
-          "w-full rounded bg-layoutPrimary-500 text-left text-sm text-gray-500 dark:text-gray-400"
+    <div className="relative flex flex-col gap-2 ">
+      <div className="rounded bg-gray-200">
+        {props.headerTools && (
+          <div className="flex flex-row items-center justify-between px-4 py-2">
+            <div className="w-1/2">
+              <HawaTextField
+                icon={<FaSearch color="gray" />}
+                placeholder={"Search"}
+                width="full"
+                margin="none"
+              />
+            </div>
+            <div className="flex flex-row items-center justify-between gap-2">
+              <HawaButton startIcon={<BsPlus />}>Add Item</HawaButton>
+              <HawaButton startIcon={<BsChevronRight />}>Actions</HawaButton>
+              <HawaButton startIcon={<BsFilter />} endIcon={<BsChevronRight />}>
+                Filter
+              </HawaButton>
+            </div>
+          </div>
         )}
-      >
-        <thead className="  text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
-          <tr>
-            {props.columns.map((col: any, i: any) => {
-              if (col.hidden) {
-                return
-              } else {
+        <table
+          className={clsx(
+            "w-full rounded bg-gray-300 text-left text-sm text-gray-500 dark:text-gray-400"
+          )}
+        >
+          <thead className="  text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              {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
+                  scope="col"
+                  className={clsx(sizeStyles[size], "w-[calc(1%)] text-center")}
+                >
+                  {props.texts?.actions ?? "Actions"}
+                </th>
+              ) : null}
+            </tr>
+          </thead>
+          <tbody
+            className={
+              customColor && props.rows ? `bg-${customColor}` : "bg-transparent"
+            }
+          >
+            {/* Table Rows */}
+            {props.rows ? (
+              slice?.map((singleRow: any, rowIndex: any) => {
+                let lastRow = rowIndex == slice?.length - 1
                 return (
-                  <th
-                    key={i}
-                    scope="col"
-                    colSpan={2}
+                  <tr
+                    key={rowIndex}
                     className={clsx(
-                      sizeStyles[size],
-                      i !== 0 && (borders === "cols" || borders === "all")
-                        ? `border-l border-l-[${bordersWidth}px]`
+                      " dark:border-gray-700 dark:bg-gray-800",
+                      props.clickable ? "hover:bg-gray-100" : "",
+                      !lastRow &&
+                        (borders === "all" ||
+                          borders === "rows" ||
+                          borders === "inner")
+                        ? `border-b border-b-[${bordersWidth}px]`
                         : ""
                     )}
                   >
-                    {col.value}
-                  </th>
-                )
-              }
-            })}
-            {props.actions && size !== "small" ? (
-              <th
-                scope="col"
-                className={clsx(sizeStyles[size], "w-[calc(1%)] text-center")}
-              >
-                {props.actionsText}
-              </th>
-            ) : null}
-          </tr>
-        </thead>
-        <tbody
-          className={
-            customColor && props.rows ? `bg-${customColor}` : "bg-transparent"
-          }
-        >
-          {/* Table Rows */}
-          {props.rows ? (
-            slice?.map((singleRow: any, rowIndex: any) => {
-              let lastRow = rowIndex == slice?.length - 1
+                    {singleRow?.map((r: any, i: any) => {
+                      let firstCell = i === 0
+                      let lastCell = i === singleRow?.length - 1
+                      let isRTLLastCell =
+                        isRTL && lastRow && lastCell && !props.actions
+                      let isRTLFirstCell = isRTL && lastRow && firstCell
+                      let isLTRFirstCell = !isRTL && lastRow && firstCell
+                      let isLTRLastCell =
+                        !isRTL && lastRow && lastCell && !props.actions
 
-              return (
-                <tr
-                  key={rowIndex}
-                  className={clsx(
-                    " dark:border-gray-700 dark:bg-gray-800",
-                    props.clickable ? "hover:bg-gray-100" : "",
-                    !lastRow &&
-                      (borders === "all" ||
-                        borders === "rows" ||
-                        borders === "inner")
-                      ? `border-b border-b-[${bordersWidth}px]`
-                      : ""
-                  )}
-                >
-                  {singleRow?.map((r: any, i: any) => {
-                    let firstCell = i === 0
-                    let lastCell = i === singleRow?.length - 1
-                    let isRTLLastCell =
-                      isRTL && lastRow && lastCell && !props.actions
-                    let isRTLFirstCell = isRTL && lastRow && firstCell
-                    let isLTRFirstCell = !isRTL && lastRow && firstCell
-                    let isLTRLastCell =
-                      !isRTL && lastRow && lastCell && !props.actions
-
-                    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"
-                              : "",
+                      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.value}
-                        </td>
-                      )
-                    }
-                    // }
-                  })}
-                  {props.actions && size !== "small" ? (
-                    <td
-                      align={isRTL ? "right" : "left"}
-                      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"
-                          }
-                          direction={direction}
-                        >
-                          <div className="flex w-fit  items-center justify-center rounded  p-2 hover:bg-gray-200">
-                            <BsThreeDotsVertical />
-                          </div>
-                        </HawaMenu>
-                      </div>
-                    </td>
-                  ) : null}
-                </tr>
-              )
-            })
-          ) : (
-            <tr className="bg-transparent">
-              <td colSpan={20}>
-                <div
-                  className={clsx(
-                    "w-full rounded-b bg-white p-5 text-center",
-                    customColor ? `bg-${customColor}` : "bg-white"
-                  )}
-                >
-                  {props.noDataText}
-                </div>
-              </td>
-            </tr>
-          )}
-        </tbody>
-        <div></div>
-      </table>
-      <div className="mt-2 flex flex-row items-center justify-between ">
+                              // customColor ? `bg-${customColor}` : "bg-white"
+                            )}
+                          >
+                            {r.value}
+                          </td>
+                        )
+                      }
+                    })}
+                    {props.actions && size !== "small" ? (
+                      <td
+                        align={isRTL ? "right" : "left"}
+                        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"
+                            }
+                            direction={direction}
+                          >
+                            <div className="flex w-fit  items-center justify-center rounded  p-2 hover:bg-gray-200">
+                              <BsThreeDots />
+                            </div>
+                          </HawaMenu>
+                        </div>
+                      </td>
+                    ) : null}
+                  </tr>
+                )
+              })
+            ) : (
+              <tr className="bg-transparent">
+                <td colSpan={20}>
+                  <div
+                    className={clsx(
+                      "w-full rounded-b bg-white p-5 text-center",
+                      customColor ? `bg-${customColor}` : "bg-white"
+                    )}
+                  >
+                    {props.texts?.noData ?? "No Data"}
+                  </div>
+                </td>
+              </tr>
+            )}
+          </tbody>
+          <div></div>
+        </table>
+      </div>
+      <div className="flex flex-row items-center justify-between ">
         {/* Pagination Pages  */}
         {range.length > 1 ? (
           <div className="flex w-fit  flex-row items-stretch justify-center gap-2 overflow-clip rounded ">
@@ -338,57 +371,39 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
           <div></div>
         )}
         {/* Pagination Settings */}
-        <div className="w-fit ">
-          {/* TODO: Hide it when props.pagination is true */}
-          <select
-            value={perPage}
-            className="h-6 rounded text-xs"
-            onChange={(e) => {
-              setPerPage(parseInt(e.target.value))
-            }}
-          >
-            <option value={10} style={{ fontSize: 10 }}>
-              10 Items
-            </option>
-            <option value={20} style={{ fontSize: 10 }}>
-              20 Items
-            </option>
-            <option value={30} style={{ fontSize: 10 }}>
-              30 Items
-            </option>
-            <option value={50} style={{ fontSize: 10 }}>
-              50 Items
-            </option>
-            <option value={100} style={{ fontSize: 10 }}>
-              100 Items
-            </option>
-          </select>
-          {/* <HawaSelect
-            // label="Per Page"
-            isCreatable={false}
-            isMulti={false}
-            isSearchable={false}
-            isClearable={false}
-            options={[
-              { value: 2, label: "2" },
-              { value: 7, label: "7" },
-              { value: 10, label: "10" },
-              { value: 20, label: "20" },
-            ]}
-            onChange={(e: any) => {
-              // field.onChange(e.value)
-              console.log("changing to ", e.value)
-              setPage(1)
-              setPerPage(e.value)
-            }}
-            onInputChange={(e: any) => {
-              // field.onChange(e.value)
-              console.log("changing to ", e.value)
-              setPage(1)
-              setPerPage(e.value)
-            }}
-          /> */}
-        </div>
+        {props.rows ? (
+          <div className="flex w-fit flex-row items-center gap-2 ">
+            <div className="text-xs ">
+              {props.rows.length} {props.texts?.items ?? "Items"}
+            </div>
+
+            <select
+              value={perPage}
+              className="h-6 rounded text-xs"
+              onChange={(e) => {
+                setPerPage(parseInt(e.target.value))
+              }}
+            >
+              <option value={10} style={{ fontSize: 10 }}>
+                10 / {props.texts?.page ?? "Page"}
+              </option>
+              <option value={20} style={{ fontSize: 10 }}>
+                20 / {props.texts?.page ?? "Page"}
+              </option>
+              <option value={30} style={{ fontSize: 10 }}>
+                30 / {props.texts?.page ?? "Page"}
+              </option>
+              <option value={50} style={{ fontSize: 10 }}>
+                50 / {props.texts?.page ?? "Page"}
+              </option>
+              <option value={100} style={{ fontSize: 10 }}>
+                100 / {props.texts?.page ?? "Page"}
+              </option>
+            </select>
+          </div>
+        ) : (
+          <div></div>
+        )}
       </div>
     </div>
   )

package/src/elements/HawaTabs.tsx

@@ -35,8 +35,6 @@ export const HawaTabs: React.FunctionComponent<TabsTypes> = ({
     full: "w-full min-w-full",
     normal: "w-fit",
   }
-  console.log("selected i : ", selectedOption)
-  console.log("selected object : ", props.options[selectedOption])
   let orientationStyle = {
     vertical: {
       container: "flex flex-row",

package/src/elements/HawaTextField.tsx

@@ -1,7 +1,8 @@
 import React from "react"
 import clsx from "clsx"
+// TODO: make icon based on direction
+// TODO: Preferebly usse context to pass direction rtl | ltr
 
-import { FaSearch } from "react-icons/fa"
 type TextFieldTypes = {
   margin?: "none" | "normal" | "large"
   width?: "small" | "normal" | "full"
@@ -69,15 +70,15 @@ export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
         />
       ) : (
         <div className="relative">
-          <input
-            {...props}
-            className={clsx(defaultInputStyle, props.icon ? "pr-10" : "")}
-          />
           {props.icon && (
-            <div className="absolute top-1/2 right-3 -translate-y-1/2">
+            <div className="absolute top-1/2 left-3 -translate-y-1/2">
               {props.icon}
             </div>
           )}
+          <input
+            {...props}
+            className={clsx(defaultInputStyle, props.icon ? "pl-10" : "")}
+          />
         </div>
       )}
 

package/src/elements/index.ts

@@ -20,7 +20,7 @@ export * from "./HawaTabs"
 export * from "./HawaModal"
 export * from "./HawaMenu"
 export * from "./HawaCopyrights"
-export * from "./HawaTimeline"
+export * from "./HawaStepper"
 export * from "./Breadcrumb"
 export * from "./HawaStats"
 export * from "./HawaSpinner"

package/src/hooks/useBreakpoint.ts

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react"
 
 const useBreakpoint = () => {
-  // console.log("window is ")
   const [breakpoint, setBreakpoint] = useState(window?.innerWidth)
   const resize = () => {
     setBreakpoint(window?.innerWidth)
@@ -10,9 +9,9 @@ const useBreakpoint = () => {
   useEffect(() => {
     if (typeof window !== "undefined") {
       // Client-side-only code
-      
+
       window?.addEventListener("resize", resize)
-  
+
       return () => {
         window?.removeEventListener("resize", resize)
       }

package/src/hooks/useTable.ts

@@ -19,11 +19,13 @@ const useTable = (data, page, rowsPerPage) => {
   const [slice, setSlice] = useState([])
 
   useEffect(() => {
-    const range = calculateRange(data, rowsPerPage)
-    setTableRange([...range])
+    if (data) {
+      const range = calculateRange(data, rowsPerPage)
+      setTableRange([...range])
 
-    const slice = sliceData(data, page, rowsPerPage)
-    setSlice([...slice])
+      const slice = sliceData(data, page, rowsPerPage)
+      setSlice([...slice])
+    }
   }, [data, setTableRange, page, setSlice, rowsPerPage])
 
   return { slice, range: tableRange }