@sikka/hawa 0.0.200 → 0.0.202
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/styles.css +3 -0
- package/es/index.es.js +1 -1
- package/lib/index.js +1 -1
- package/package.json +1 -1
- package/src/blocks/Payment/CheckoutForm.tsx +13 -6
- package/src/blocks/Payment/Confirmation.tsx +4 -1
- package/src/blocks/Referral/ReferralStats.tsx +0 -8
- package/src/elements/HawaMenu.tsx +1 -0
- package/src/elements/HawaTable.tsx +65 -47
- package/src/styles.css +3 -0
package/package.json
CHANGED
|
@@ -65,12 +65,19 @@ export const CheckoutForm: React.FunctionComponent<CheckoutFormTypes> = (
|
|
|
65
65
|
<div className="mb-2 text-center text-xl font-semibold">
|
|
66
66
|
{props.texts.orderDetails}
|
|
67
67
|
</div>
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
68
|
+
<div className="rounded border border-gray-300">
|
|
69
|
+
<HawaTable
|
|
70
|
+
direction={isArabic ? "rtl" : "ltr"}
|
|
71
|
+
columns={[
|
|
72
|
+
{ hidden: false, value: "Product" },
|
|
73
|
+
{ hidden: true, value: "ID" },
|
|
74
|
+
{ hidden: false, value: "Price" },
|
|
75
|
+
]}
|
|
76
|
+
borders="inner"
|
|
77
|
+
rows={props.products}
|
|
78
|
+
bordersWidth="1"
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
74
81
|
</div>
|
|
75
82
|
<div>
|
|
76
83
|
<div className="my-2 text-center text-xl font-semibold">
|
|
@@ -65,7 +65,10 @@ export const ConfirmationPage: React.FunctionComponent<
|
|
|
65
65
|
{props.products && (
|
|
66
66
|
<HawaTable
|
|
67
67
|
direction={isArabic ? "rtl" : "ltr"}
|
|
68
|
-
columns={[
|
|
68
|
+
columns={[
|
|
69
|
+
{ hidden: false, value: "Product" },
|
|
70
|
+
{ hidden: false, value: "Price" },
|
|
71
|
+
]}
|
|
69
72
|
rows={props.products}
|
|
70
73
|
// end={["Total", props.total]}
|
|
71
74
|
/>
|
|
@@ -38,14 +38,6 @@ export const ReferralStats: React.FunctionComponent<TReferralStats> = ({
|
|
|
38
38
|
<div className="mt-3">
|
|
39
39
|
<div className="mb-1">Sign ups</div>
|
|
40
40
|
<div className="rounded">
|
|
41
|
-
{/* <HawaTable
|
|
42
|
-
columns={["date", "email", "amount"]}
|
|
43
|
-
rows={[
|
|
44
|
-
["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
|
|
45
|
-
["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
|
|
46
|
-
["2020/10/11 @ 9:45 pm", "sadsd", "dsodk"],
|
|
47
|
-
]}
|
|
48
|
-
/> */}
|
|
49
41
|
<ReferralSignUpCard
|
|
50
42
|
date="2020/10/11 @ 9:45 pm"
|
|
51
43
|
email="zakher@sikka.io"
|
|
@@ -3,8 +3,6 @@ import { BsThreeDotsVertical } from "react-icons/bs"
|
|
|
3
3
|
import clsx from "clsx"
|
|
4
4
|
import { HawaMenu } from "./HawaMenu"
|
|
5
5
|
|
|
6
|
-
// TODO: make action column width max fit
|
|
7
|
-
|
|
8
6
|
type TableTypes = {
|
|
9
7
|
columns: any[string]
|
|
10
8
|
actions?: ActionItems[][]
|
|
@@ -55,22 +53,32 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
|
|
|
55
53
|
>
|
|
56
54
|
<thead className=" text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
|
|
57
55
|
<tr>
|
|
58
|
-
{props.columns.map((col: any, i: any) =>
|
|
56
|
+
{props.columns.map((col: any, i: any) => {
|
|
57
|
+
if (col.hidden) {
|
|
58
|
+
return
|
|
59
|
+
} else {
|
|
60
|
+
return (
|
|
61
|
+
<th
|
|
62
|
+
key={i}
|
|
63
|
+
scope="col"
|
|
64
|
+
colSpan={2}
|
|
65
|
+
className={clsx(
|
|
66
|
+
sizeStyles[size],
|
|
67
|
+
i !== 0 && (borders === "cols" || borders === "all")
|
|
68
|
+
? `border-l border-l-[${bordersWidth}px]`
|
|
69
|
+
: ""
|
|
70
|
+
)}
|
|
71
|
+
>
|
|
72
|
+
{col.value}
|
|
73
|
+
</th>
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
})}
|
|
77
|
+
{props.actions && size !== "small" ? (
|
|
59
78
|
<th
|
|
60
|
-
key={i}
|
|
61
79
|
scope="col"
|
|
62
|
-
className={clsx(
|
|
63
|
-
sizeStyles[size],
|
|
64
|
-
i !== 0 && (borders === "cols" || borders === "all")
|
|
65
|
-
? `border-l border-l-[${bordersWidth}px]`
|
|
66
|
-
: ""
|
|
67
|
-
)}
|
|
80
|
+
className={clsx(sizeStyles[size], "w-[calc(1%)] text-center")}
|
|
68
81
|
>
|
|
69
|
-
{col}
|
|
70
|
-
</th>
|
|
71
|
-
))}
|
|
72
|
-
{props.actions && size !== "small" ? (
|
|
73
|
-
<th scope="col" className={clsx(sizeStyles[size], "text-center")}>
|
|
74
82
|
{props.actionsText}
|
|
75
83
|
</th>
|
|
76
84
|
) : null}
|
|
@@ -84,7 +92,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
|
|
|
84
92
|
{/* Table Rows */}
|
|
85
93
|
{props.rows ? (
|
|
86
94
|
props.rows.map((singleRow: any, rowIndex: any) => {
|
|
95
|
+
console.log("single row is ", singleRow)
|
|
87
96
|
let lastRow = rowIndex == props.rows.length - 1
|
|
97
|
+
|
|
88
98
|
return (
|
|
89
99
|
<tr
|
|
90
100
|
key={rowIndex}
|
|
@@ -109,40 +119,45 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
|
|
|
109
119
|
let isLTRLastCell =
|
|
110
120
|
!isRTL && lastRow && lastCell && !props.actions
|
|
111
121
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
122
|
+
if (r.hidden) {
|
|
123
|
+
return
|
|
124
|
+
} else {
|
|
125
|
+
return (
|
|
126
|
+
<td
|
|
127
|
+
colSpan={2}
|
|
128
|
+
key={i}
|
|
129
|
+
className={clsx(
|
|
130
|
+
sizeStyles[size],
|
|
131
|
+
highlightFirst && firstCell
|
|
132
|
+
? "font-bold"
|
|
133
|
+
: "font-normal",
|
|
134
|
+
isRTLFirstCell
|
|
135
|
+
? "rounded-bl-none rounded-br"
|
|
136
|
+
: isRTLLastCell
|
|
137
|
+
? "rounded-br-none rounded-bl"
|
|
138
|
+
: isLTRFirstCell
|
|
139
|
+
? "rounded-br-none rounded-bl"
|
|
140
|
+
: isLTRLastCell
|
|
141
|
+
? "rounded-bl-none rounded-br"
|
|
142
|
+
: "",
|
|
129
143
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
(borders === "cols" || borders === "inner")
|
|
133
|
-
? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
|
|
134
|
-
: !firstCell &&
|
|
135
|
-
props.actions &&
|
|
144
|
+
!firstCell &&
|
|
145
|
+
!lastCell &&
|
|
136
146
|
(borders === "cols" || borders === "inner")
|
|
137
|
-
|
|
138
|
-
|
|
147
|
+
? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
|
|
148
|
+
: !firstCell &&
|
|
149
|
+
props.actions &&
|
|
150
|
+
(borders === "cols" || borders === "inner")
|
|
151
|
+
? `border-l border-l-[${bordersWidth}px] border-r border-r-[${bordersWidth}px]`
|
|
152
|
+
: ""
|
|
139
153
|
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
154
|
+
// customColor ? `bg-${customColor}` : "bg-white"
|
|
155
|
+
)}
|
|
156
|
+
>
|
|
157
|
+
{r.value}
|
|
158
|
+
</td>
|
|
159
|
+
)
|
|
160
|
+
}
|
|
146
161
|
// }
|
|
147
162
|
})}
|
|
148
163
|
{props.actions && size !== "small" ? (
|
|
@@ -151,7 +166,9 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
|
|
|
151
166
|
className={clsx(
|
|
152
167
|
isRTL && lastRow ? "rounded-br-none rounded-bl" : "",
|
|
153
168
|
!isRTL && lastRow ? "rounded-bl-none rounded-br" : ""
|
|
169
|
+
// "w-fit bg-red-400"
|
|
154
170
|
)}
|
|
171
|
+
colSpan={1}
|
|
155
172
|
>
|
|
156
173
|
<div className="flex items-center justify-center">
|
|
157
174
|
<HawaMenu
|
|
@@ -175,7 +192,8 @@ export const HawaTable: React.FunctionComponent<TableTypes> = ({
|
|
|
175
192
|
})
|
|
176
193
|
) : (
|
|
177
194
|
<tr className="bg-transparent">
|
|
178
|
-
|
|
195
|
+
{/* {console.log('props', props.columns.length)} */}
|
|
196
|
+
<td colSpan={20}>
|
|
179
197
|
<div
|
|
180
198
|
className={clsx(
|
|
181
199
|
"w-full rounded-b bg-white p-5 text-center",
|