@sikka/hawa 0.0.201 → 0.0.203

package/package.json

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

package/src/blocks/Payment/CheckoutForm.tsx

@@ -65,12 +65,19 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
         <div className="mb-2 text-center text-xl font-semibold">
           {props.texts.orderDetails}
         </div>
-        <HawaTable
-          direction={isArabic ? "rtl" : "ltr"}
-          columns={["Product", "Price"]}
-          rows={props.products}
-          end={["Total", props.total]}
-        />
+        <div className="rounded border border-gray-300">
+          <HawaTable
+            direction={isArabic ? "rtl" : "ltr"}
+            columns={[
+              { hidden: false, value: "Product" },
+              { hidden: true, value: "ID" },
+              { hidden: false, value: "Price" },
+            ]}
+            borders="inner"
+            rows={props.products}
+            bordersWidth="1"
+          />
+        </div>
       </div>
       <div>
         <div className="my-2 text-center text-xl font-semibold">

package/src/blocks/Payment/Confirmation.tsx

@@ -65,7 +65,10 @@ export const ConfirmationPage: React.FunctionComponent<
         {props.products && (
           <HawaTable
             direction={isArabic ? "rtl" : "ltr"}
-            columns={["Product", "Price"]}
+            columns={[
+              { hidden: false, value: "Product" },
+              { hidden: false, value: "Price" },
+            ]}
             rows={props.products}
             // end={["Total", props.total]}
           />

package/src/blocks/Referral/ReferralStats.tsx

@@ -38,14 +38,6 @@ export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
       <div className="mt-3">
         <div className="mb-1">Sign ups</div>
         <div className="rounded">
-          {/* <HawaTable
-            columns={["date", "email", "amount"]}
-            rows={[
-              ["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
-              ["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
-              ["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
-            ]}
-          /> */}
           <ReferralSignUpCard
             date="2020/10/11 @ 9:45 pm"
             email="zakher@sikka.io"

package/src/elements/HawaSelect.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx"
 import React from "react"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
@@ -7,6 +8,7 @@ type OptionTypes = {
   getStyles: any
   innerProps: any
   innerRef: any
+  size?: "small" | "normal" | "large"
 }
 const Option: React.FunctionComponent<OptionTypes> = ({
   cx,
@@ -14,11 +16,12 @@ const Option: React.FunctionComponent<OptionTypes> = ({
   getStyles,
   innerProps,
   innerRef,
+  size = "normal",
   ...props
 }) => (
   <div
     ref={innerRef}
-    className="m-2 flex flex-row items-center justify-between rounded p-1 px-3 hover:bg-buttonPrimary-500 hover:text-white"
+    className="m-2 flex flex-row items-center justify-between rounded  p-1 px-3 hover:bg-buttonPrimary-500 hover:text-white"
     {...innerProps}
   >
     {children}
@@ -31,6 +34,7 @@ type ControlTypes = {
   getStyles: any
   innerProps: any
   innerRef: any
+  size?: "small" | "normal" | "large"
 }
 const Control: React.FunctionComponent<ControlTypes> = ({
   cx,
@@ -38,12 +42,21 @@ const Control: React.FunctionComponent<ControlTypes> = ({
   getStyles,
   innerProps,
   innerRef,
+  size = "normal",
   ...props
 }) => {
+  let sizeStyles = {
+    small: "h-7 text-xs",
+    normal: "h-10  text-sm",
+    large: "",
+  }
   return (
     <div
       ref={innerRef}
-      className="flex h-10 w-full rounded border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+      className={clsx(
+        sizeStyles[size],
+        "flex  w-full rounded border border-gray-300 bg-gray-50 text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+      )}
       {...innerProps}
       // {...props}
     >
@@ -93,10 +106,11 @@ type SelectTypes = {
   value?: any
   children?: any
   getOptionLabel?: any
+  // size?
 }
 export const HawaSelect: React.FunctionComponent<SelectTypes> = (props) => {
   return (
-    <div className="mb-3">
+    <div className="">
       {props.label && (
         <label className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300">
           {props.label}

package/src/elements/HawaTable.tsx

@@ -1,7 +1,8 @@
-import React from "react"
-import { BsThreeDotsVertical } from "react-icons/bs"
+import React, { useEffect, useState } from "react"
+import { BsChevronRight, BsThreeDotsVertical } from "react-icons/bs"
 import clsx from "clsx"
 import { HawaMenu } from "./HawaMenu"
+import useTable from "../hooks/useTable"
 
 type TableTypes = {
   columns: any[string]
@@ -37,6 +38,20 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
   bordersWidth = "1",
   ...props
 }) => {
+  const [perPage, setPerPage] = useState(10)
+  const [enteredPage, setEnteredPage] = useState(null)
+  const [page, setPage] = useState(1)
+
+  const { slice, range } = useTable(props.rows ?? [], page, perPage)
+  useEffect(() => {
+    if (slice?.length < 1 && page !== 1) {
+      setPage(page - 1)
+    }
+    if (enteredPage) {
+      setPage(enteredPage)
+    }
+  }, [slice, page])
+
   let isRTL = direction === "rtl"
 
   let sizeStyles = {
@@ -91,9 +106,8 @@ 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
+            slice?.map((singleRow: any, rowIndex: any) => {
+              let lastRow = rowIndex == slice?.length - 1
 
               return (
                 <tr
@@ -109,9 +123,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
                       : ""
                   )}
                 >
-                  {singleRow.map((r: any, i: any) => {
+                  {singleRow?.map((r: any, i: any) => {
                     let firstCell = i === 0
-                    let lastCell = i === singleRow.length - 1
+                    let lastCell = i === singleRow?.length - 1
                     let isRTLLastCell =
                       isRTL && lastRow && lastCell && !props.actions
                     let isRTLFirstCell = isRTL && lastRow && firstCell
@@ -192,7 +206,7 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
             })
           ) : (
             <tr className="bg-transparent">
-              <td colSpan={props.columns.length}>
+              <td colSpan={20}>
                 <div
                   className={clsx(
                     "w-full rounded-b bg-white p-5 text-center",
@@ -205,7 +219,176 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
             </tr>
           )}
         </tbody>
+        <div></div>
       </table>
+      <div className="mt-2 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 ">
+            {/* Previous Page Button */}
+            <div
+              className={clsx(
+                "flex h-6 w-6 rotate-180 items-center justify-center rounded bg-gray-100 p-1  text-xs hover:bg-layoutPrimary-700 "
+              )}
+              onClick={() =>
+                page <= 1 ? setPage(range.length) : setPage(page - 1)
+              }
+            >
+              <BsChevronRight />
+            </div>
+            {/* Numbered Pagination */}
+            <div className="flex flex-row items-center  overflow-clip rounded  transition-all">
+              {/* The first page */}
+              {range.length > 6 &&
+                range.map((el, index) => {
+                  if (index <= 0) {
+                    return (
+                      <button
+                        key={index}
+                        className={clsx(
+                          "w-10 p-1 text-xs hover:bg-gray-200",
+                          page === el
+                            ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                            : "bg-gray-100"
+                        )}
+                        onClick={() => setPage(el)}
+                      >
+                        {el}
+                      </button>
+                    )
+                  }
+                })}
+              {/* The Current Page / Input  */}
+              {range?.length > 6 && (
+                <input
+                  type={"text"}
+                  className=" w-10  bg-gray-100 p-1 text-center text-xs"
+                  defaultValue={
+                    page !== 0 || page !== range.length - 1 ? page : "..."
+                  }
+                  value={
+                    page == 1 || page == range.length
+                      ? "..."
+                      : enteredPage
+                      ? enteredPage
+                      : page
+                  }
+                  onChange={(e) => setEnteredPage(parseInt(e.target.value))}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      setPage(enteredPage)
+                      setEnteredPage(null)
+                    }
+                  }}
+                />
+              )}
+              {/* The last page */}
+              {range?.length > 6 &&
+                range.map((el, index) => {
+                  if (index >= range.length - 1) {
+                    return (
+                      <button
+                        key={index}
+                        className={clsx(
+                          "w-10 p-1 text-xs hover:bg-gray-200",
+                          page === el
+                            ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                            : "bg-gray-100"
+                        )}
+                        onClick={() => setPage(el)}
+                      >
+                        {el}
+                      </button>
+                    )
+                  }
+                })}
+
+              {/* All Pages if less than 6 pages */}
+              {range?.length <= 6 &&
+                range.map((el, index) => {
+                  return (
+                    <button
+                      key={index}
+                      className={clsx(
+                        "w-10 p-1 text-xs hover:bg-gray-200",
+                        page === el
+                          ? "bg-buttonPrimary-500 text-white hover:bg-buttonPrimary-500"
+                          : "bg-gray-100"
+                      )}
+                      onClick={() => setPage(el)}
+                    >
+                      {el}
+                    </button>
+                  )
+                })}
+            </div>
+            {/* Next Page Button */}
+            <div
+              onClick={() =>
+                page >= range.length ? setPage(1) : setPage(page + 1)
+              }
+              className={clsx(
+                "flex h-6 w-6 items-center  justify-center rounded bg-gray-100 p-1 text-xs hover:bg-layoutPrimary-700 "
+              )}
+            >
+              <BsChevronRight />
+            </div>
+          </div>
+        ) : (
+          <div></div>
+        )}
+        {/* Pagination Settings */}
+        <div className="w-fit ">
+          <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>
+      </div>
     </div>
   )
 }

package/src/hooks/useTable.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react"
+
+const calculateRange = (data, rowsPerPage) => {
+  const range = []
+  const num = Math.ceil(data?.length / rowsPerPage)
+  let i = 1
+  for (let i = 1; i <= num; i++) {
+    range.push(i)
+  }
+  return range
+}
+
+const sliceData = (data, page, rowsPerPage) => {
+  return data?.slice((page - 1) * rowsPerPage, page * rowsPerPage)
+}
+
+const useTable = (data, page, rowsPerPage) => {
+  const [tableRange, setTableRange] = useState([])
+  const [slice, setSlice] = useState([])
+
+  useEffect(() => {
+    const range = calculateRange(data, rowsPerPage)
+    setTableRange([...range])
+
+    const slice = sliceData(data, page, rowsPerPage)
+    setSlice([...slice])
+  }, [data, setTableRange, page, setSlice, rowsPerPage])
+
+  return { slice, range: tableRange }
+}
+
+export default useTable