@0xchain/table 1.1.0-beta.18 → 1.1.0-beta.19
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/LICENSE +21 -0
- package/dist/index.js +472 -302
- package/package.json +38 -22
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-present 0xchain
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.js
CHANGED
|
@@ -1,414 +1,584 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx
|
|
3
|
-
import { Table
|
|
4
|
-
import * as
|
|
5
|
-
import
|
|
6
|
-
import { startOfDay
|
|
7
|
-
import { twMerge
|
|
8
|
-
import { DatePicker
|
|
9
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@0xchain/ui/table";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import React__default, { useState, useEffect } from "react";
|
|
6
|
+
import { startOfDay, endOfDay } from "date-fns";
|
|
7
|
+
import { twMerge } from "tailwind-merge";
|
|
8
|
+
import { DatePicker } from "antd";
|
|
9
|
+
import dayjs from "dayjs";
|
|
10
10
|
import "dayjs/locale/en";
|
|
11
11
|
import "dayjs/locale/zh-cn";
|
|
12
12
|
import "dayjs/locale/zh-tw";
|
|
13
13
|
import "dayjs/locale/ja";
|
|
14
14
|
import "dayjs/locale/ko";
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import { Popover
|
|
22
|
-
import { useLocale
|
|
23
|
-
import { X
|
|
24
|
-
import * as
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import { useParams
|
|
29
|
-
import { Checkbox
|
|
30
|
-
import { useDebounceFn
|
|
31
|
-
import
|
|
32
|
-
import
|
|
33
|
-
const
|
|
34
|
-
function
|
|
35
|
-
className
|
|
36
|
-
onChange
|
|
37
|
-
...
|
|
15
|
+
import enUSPicker from "antd/es/date-picker/locale/en_US";
|
|
16
|
+
import zhCNPicker from "antd/es/date-picker/locale/zh_CN";
|
|
17
|
+
import zhTWPicker from "antd/es/date-picker/locale/zh_TW";
|
|
18
|
+
import jaJPPicker from "antd/es/date-picker/locale/ja_JP";
|
|
19
|
+
import koKRPicker from "antd/es/date-picker/locale/ko_KR";
|
|
20
|
+
import ImageBar from "@0xchain/image";
|
|
21
|
+
import { Popover, PopoverTrigger, PopoverContent } from "@0xchain/ui/popover";
|
|
22
|
+
import { useLocale, useTranslations } from "next-intl";
|
|
23
|
+
import { X, Search } from "lucide-react";
|
|
24
|
+
import * as Slider from "@radix-ui/react-slider";
|
|
25
|
+
import NumberLike from "@0xchain/number-like";
|
|
26
|
+
import Translation from "@0xchain/translation";
|
|
27
|
+
import request from "@0xchain/request";
|
|
28
|
+
import { useParams } from "next/navigation";
|
|
29
|
+
import { Checkbox } from "@0xchain/ui/checkbox";
|
|
30
|
+
import { useDebounceFn } from "ahooks";
|
|
31
|
+
import Empty from "@0xchain/empty";
|
|
32
|
+
import Loading from "@0xchain/loading";
|
|
33
|
+
const CalendarIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADWSURBVHgB7ZPhDcIgEIUP0wEcQTdwAxjBERzBDcSJdAPbDdwANznBQnIih6TQP02/hJDmwb274wqwaBDRuDVVd3TksLKbivSd1zRzn9PvQognzeSA7VG0gqPfe7sGksnF71dIk9IljJ1QPt5YonfV9HZIhQme1ONYHeR5Vep5A/tQ+xo9ZSCRn5hSZM5Awe+oVhEb9PA9RVMIU5Q0GGxfNVTgW6zC9yZz0EQ/jinRYliDVrBjmhvBkvEMzF7B+gZ/mb2CD7aHZ2zPiRps7bphOx4uJiyCNyogpaxjuzr+AAAAAElFTkSuQmCC";
|
|
34
|
+
function DatePickerWithRange({
|
|
35
|
+
className,
|
|
36
|
+
onChange,
|
|
37
|
+
...props
|
|
38
38
|
}) {
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
39
|
+
const locale = useLocale();
|
|
40
|
+
const [open, setOpen] = React.useState(false);
|
|
41
|
+
const containerRef = React.useRef(null);
|
|
42
|
+
const [panelRange, setPanelRange] = React.useState(null);
|
|
43
|
+
const dpLocaleMap = {
|
|
44
|
+
en: enUSPicker,
|
|
45
|
+
"zh-hans": zhCNPicker,
|
|
46
|
+
"zh-hant": zhTWPicker,
|
|
47
|
+
ja: jaJPPicker,
|
|
48
|
+
ko: koKRPicker
|
|
49
|
+
};
|
|
50
|
+
const dayjsLocaleKeyMap = {
|
|
46
51
|
en: "en",
|
|
47
52
|
"zh-hans": "zh-cn",
|
|
48
53
|
"zh-hant": "zh-tw",
|
|
49
54
|
ja: "ja",
|
|
50
55
|
ko: "ko"
|
|
51
56
|
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, [
|
|
55
|
-
const
|
|
56
|
-
if (!
|
|
57
|
-
|
|
57
|
+
React.useEffect(() => {
|
|
58
|
+
dayjs.locale(dayjsLocaleKeyMap[locale] ?? "en");
|
|
59
|
+
}, [locale]);
|
|
60
|
+
const closePopover = (selectedDate) => {
|
|
61
|
+
if (!selectedDate) {
|
|
62
|
+
onChange("", "");
|
|
63
|
+
cancelPopover();
|
|
58
64
|
return;
|
|
59
65
|
}
|
|
60
|
-
const [
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
const [from, to] = selectedDate;
|
|
67
|
+
const start = from ? startOfDay(from.toDate()) : void 0;
|
|
68
|
+
const end = to ? endOfDay(to.toDate()) : void 0;
|
|
69
|
+
onChange(start ? Math.floor(start.getTime() / 1e3) : "", end ? Math.floor(end.getTime() / 1e3) : "");
|
|
70
|
+
cancelPopover();
|
|
71
|
+
};
|
|
72
|
+
const cancelPopover = () => {
|
|
73
|
+
setOpen(false);
|
|
74
|
+
};
|
|
75
|
+
const togglePopover = (flag) => {
|
|
76
|
+
if (!flag) {
|
|
77
|
+
closePopover(panelRange);
|
|
78
|
+
} else {
|
|
79
|
+
setOpen(true);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
const onAntdCalendarChange = (vals) => {
|
|
83
|
+
if (!vals) {
|
|
84
|
+
setPanelRange(null);
|
|
69
85
|
return;
|
|
70
86
|
}
|
|
71
|
-
const [
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
87
|
+
const [s, e] = vals;
|
|
88
|
+
setPanelRange([s, e]);
|
|
89
|
+
};
|
|
90
|
+
const onAntdChange = (vals) => {
|
|
91
|
+
if (!vals || !vals[0] || !vals[1]) {
|
|
92
|
+
setPanelRange(null);
|
|
93
|
+
onChange("", "");
|
|
94
|
+
cancelPopover();
|
|
76
95
|
return;
|
|
77
96
|
}
|
|
78
|
-
const
|
|
79
|
-
|
|
97
|
+
const sDate = startOfDay(vals[0].toDate());
|
|
98
|
+
const eDate = endOfDay(vals[1].toDate());
|
|
99
|
+
onChange(Math.floor(sDate.getTime() / 1e3), Math.floor(eDate.getTime() / 1e3));
|
|
100
|
+
setPanelRange([vals[0], vals[1]]);
|
|
101
|
+
cancelPopover();
|
|
80
102
|
};
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
84
|
-
|
|
103
|
+
return /* @__PURE__ */ jsx("div", { className: twMerge(className), ...props, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: togglePopover, children: [
|
|
104
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("i", { className: "w-4 h-4 p-[2px] cursor-pointer flex items-center justify-center bg-[#000] rounded-sm", children: /* @__PURE__ */ jsx(ImageBar, { src: CalendarIcon, width: 12, height: 12 }) }) }),
|
|
105
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "center", side: "right", children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "relative", children: /* @__PURE__ */ jsx(
|
|
106
|
+
DatePicker.RangePicker,
|
|
85
107
|
{
|
|
86
|
-
open:
|
|
108
|
+
open: true,
|
|
87
109
|
size: "small",
|
|
88
|
-
locale:
|
|
89
|
-
allowClear:
|
|
90
|
-
value:
|
|
91
|
-
onCalendarChange:
|
|
92
|
-
onChange:
|
|
93
|
-
getPopupContainer: () =>
|
|
110
|
+
locale: dpLocaleMap[locale],
|
|
111
|
+
allowClear: false,
|
|
112
|
+
value: panelRange ?? [dayjs(), dayjs()],
|
|
113
|
+
onCalendarChange: onAntdCalendarChange,
|
|
114
|
+
onChange: onAntdChange,
|
|
115
|
+
getPopupContainer: () => containerRef.current,
|
|
94
116
|
style: { position: "absolute", opacity: 0, width: 0, height: 0, pointerEvents: "none" },
|
|
95
|
-
disabledDate: (
|
|
117
|
+
disabledDate: (current) => {
|
|
118
|
+
return current && current > dayjs().endOf("day");
|
|
119
|
+
}
|
|
96
120
|
}
|
|
97
121
|
) }) })
|
|
98
122
|
] }) });
|
|
99
123
|
}
|
|
100
|
-
const
|
|
101
|
-
function
|
|
102
|
-
const [
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
124
|
+
const AmountIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADZSURBVHgB7ZTbDcIwDEVvUAfoCN2AjsAI3YBu0jABGYER2KAjABPABrBBcMARFkjNo/krR7IaWfZ1nDoB/gRQfmGt7enToAw3pdThu4BFQajAS7sSvh3ZwOsj2QVprMk6ofULNWHsmytZg0hcLOc4TCh4FEVqhMVrIT6idELqhnySbHk/ETfkHKlPbsnuLDBMiLuYFjm4u2E/bIW/E/4ecyABLXZa8/H5zjRKQEInFtywxU0MsUIcD2QSWyCb5RVInvcqMs7/ZHerzygNz74Wz0f0mM4pZLAInpppFh6wLb8LAAAAAElFTkSuQmCC";
|
|
125
|
+
function Amount({ onChange, filterKey }) {
|
|
126
|
+
const [open, setOpen] = useState(false);
|
|
127
|
+
const t = useTranslations("common");
|
|
128
|
+
const [min, setMin] = useState("");
|
|
129
|
+
const [max, setMax] = useState("");
|
|
130
|
+
const [sliderValues, setSliderValues] = useState([0.01, 1e10]);
|
|
131
|
+
const handleSliderChange = (values) => {
|
|
132
|
+
setSliderValues(values);
|
|
133
|
+
setMin(values[0].toString());
|
|
134
|
+
setMax(values[1].toString());
|
|
135
|
+
};
|
|
136
|
+
const handleFromChange = (e) => {
|
|
137
|
+
const value = e.target.value;
|
|
138
|
+
if (value === "" || /^\d*\.?\d{0,8}$/.test(value) && !value.startsWith(".")) {
|
|
139
|
+
setMin(value);
|
|
140
|
+
const numValue = parseFloat(value) || 0;
|
|
141
|
+
setSliderValues([numValue, sliderValues[1]]);
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
const handleToChange = (e) => {
|
|
145
|
+
const value = e.target.value;
|
|
146
|
+
if (value === "" || /^\d*\.?\d{0,8}$/.test(value) && !value.startsWith(".")) {
|
|
147
|
+
setMax(value);
|
|
148
|
+
const numValue = parseFloat(value);
|
|
149
|
+
setSliderValues([sliderValues[0], numValue]);
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
const handleConfirm = () => {
|
|
153
|
+
onChange(min, max);
|
|
154
|
+
setOpen(false);
|
|
155
|
+
};
|
|
156
|
+
const handleCancel = () => {
|
|
157
|
+
setOpen(false);
|
|
158
|
+
};
|
|
159
|
+
const handleMinBlur = (e) => {
|
|
160
|
+
const value = e.target.value;
|
|
161
|
+
if (value === "0") {
|
|
162
|
+
setMin("0.01");
|
|
110
163
|
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
f([d[0], T]);
|
|
164
|
+
};
|
|
165
|
+
const handleMaxBlur = (e) => {
|
|
166
|
+
const value = e.target.value;
|
|
167
|
+
if (value === "0") {
|
|
168
|
+
setMax("0.01");
|
|
117
169
|
}
|
|
118
|
-
}, B = () => {
|
|
119
|
-
a(y, b), m(!1);
|
|
120
|
-
}, n = () => {
|
|
121
|
-
m(!1);
|
|
122
|
-
}, o = (p) => {
|
|
123
|
-
p.target.value === "0" && k("0.01");
|
|
124
|
-
}, h = (p) => {
|
|
125
|
-
p.target.value === "0" && g("0.01");
|
|
126
170
|
};
|
|
127
|
-
return /* @__PURE__ */
|
|
128
|
-
/* @__PURE__ */
|
|
129
|
-
/* @__PURE__ */
|
|
130
|
-
/* @__PURE__ */
|
|
131
|
-
/* @__PURE__ */
|
|
132
|
-
/* @__PURE__ */
|
|
171
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
172
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-[#000] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(ImageBar, { src: AmountIcon, width: 12, height: 12, objectFit: "contain" }) }) }),
|
|
173
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "bg-card", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
|
|
174
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
|
|
175
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.amount" }) }),
|
|
176
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-foreground text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }) })
|
|
133
177
|
] }),
|
|
134
|
-
/* @__PURE__ */
|
|
135
|
-
/* @__PURE__ */
|
|
136
|
-
/* @__PURE__ */
|
|
137
|
-
/* @__PURE__ */
|
|
178
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between gap-2 py-3", children: [
|
|
179
|
+
/* @__PURE__ */ jsxs("fieldset", { className: "w-1/2 h-full", children: [
|
|
180
|
+
/* @__PURE__ */ jsx("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "form", parentKey: "common.filter.amount" }) }),
|
|
181
|
+
/* @__PURE__ */ jsx("input", { type: "text", inputMode: "decimal", pattern: "[0-9]*\\.?[0-9]{0,8}", onBlur: handleMinBlur, placeholder: t("filter.amount.min"), className: "w-full h-full bg-card text-sm border-1 border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: min, onChange: handleFromChange })
|
|
138
182
|
] }),
|
|
139
|
-
/* @__PURE__ */
|
|
140
|
-
/* @__PURE__ */
|
|
141
|
-
/* @__PURE__ */
|
|
183
|
+
/* @__PURE__ */ jsxs("fieldset", { className: "w-1/2 h-full", children: [
|
|
184
|
+
/* @__PURE__ */ jsx("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "to", parentKey: "common.filter.amount" }) }),
|
|
185
|
+
/* @__PURE__ */ jsx("input", { type: "text", inputMode: "decimal", pattern: "[0-9]*\\.?[0-9]{0,8}", onBlur: handleMaxBlur, placeholder: t("filter.amount.max"), className: "w-full h-full bg-card text-sm border-1 border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: max, onChange: handleToChange })
|
|
142
186
|
] })
|
|
143
187
|
] }),
|
|
144
|
-
/* @__PURE__ */
|
|
145
|
-
/* @__PURE__ */
|
|
146
|
-
|
|
188
|
+
/* @__PURE__ */ jsxs("div", { className: " w-full pb-4", children: [
|
|
189
|
+
/* @__PURE__ */ jsxs(
|
|
190
|
+
Slider.Root,
|
|
147
191
|
{
|
|
148
192
|
className: "w-full relative flex items-center justify-center h-1 grow bg-background rounded-sm touch-pan-y select-none",
|
|
149
|
-
value:
|
|
150
|
-
onValueChange:
|
|
193
|
+
value: sliderValues,
|
|
194
|
+
onValueChange: handleSliderChange,
|
|
151
195
|
max: 1e10,
|
|
152
196
|
min: 0.01,
|
|
153
197
|
step: 1,
|
|
154
198
|
children: [
|
|
155
|
-
/* @__PURE__ */
|
|
156
|
-
/* @__PURE__ */
|
|
157
|
-
/* @__PURE__ */
|
|
199
|
+
/* @__PURE__ */ jsx(Slider.Track, { className: "h-1 rounded-full bg-primary", children: /* @__PURE__ */ jsx(Slider.Range, { className: "h-1 absolute bg-primary rounded-full" }) }),
|
|
200
|
+
/* @__PURE__ */ jsx(Slider.Thumb, { className: "block w-3 h-3 bg-primary rounded-full cursor-pointer touch-none", "aria-label": "Min value" }),
|
|
201
|
+
/* @__PURE__ */ jsx(Slider.Thumb, { className: "block w-3 h-3 bg-primary rounded-full cursor-pointer touch-none", "aria-label": "Max value" })
|
|
158
202
|
]
|
|
159
203
|
}
|
|
160
204
|
),
|
|
161
|
-
/* @__PURE__ */
|
|
162
|
-
/* @__PURE__ */
|
|
163
|
-
/* @__PURE__ */
|
|
205
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-gray-500 mt-2", children: [
|
|
206
|
+
/* @__PURE__ */ jsx(NumberLike, { addonBefore: filterKey === "valueUSD" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "$" }) : void 0, number: "0.01", minimumFractionDigits: 2, notation: "compact", maximumFractionDigits: 20 }),
|
|
207
|
+
/* @__PURE__ */ jsx(NumberLike, { addonBefore: filterKey === "valueUSD" ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "$" }) : void 0, number: "10000000000", notation: "compact", maximumFractionDigits: 2 })
|
|
164
208
|
] })
|
|
165
209
|
] }),
|
|
166
|
-
/* @__PURE__ */
|
|
167
|
-
/* @__PURE__ */
|
|
168
|
-
/* @__PURE__ */
|
|
210
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center", children: [
|
|
211
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border border-border rounded-lg ml-3 cursor-pointer", onClick: handleCancel, children: t("button.cancel") }),
|
|
212
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded-lg ml-3 cursor-pointer", onClick: handleConfirm, children: t("button.confirm") })
|
|
169
213
|
] })
|
|
170
214
|
] }) })
|
|
171
215
|
] });
|
|
172
216
|
}
|
|
173
|
-
const
|
|
174
|
-
function
|
|
175
|
-
const [
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
217
|
+
const TokenIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFFSURBVHgB5VVRccMwDFV2A+AxCIOZwQyhDGYGC4OGQcegYzAIgZANgcsgY6DJd9Kquk4Te9ef9t3pkpOf/CTFigHuAojoyPZkAY+YyAYyD/8BbdDyRksIVWIU9MrZStY9mSUzvB7fPdmoxLYlAlYFvsvGF/hdsRAee98rn+PWSXWjbhGvC9ySgJc+Z3w57BWvZ9+wJBKYuMkE/7WOhUOSjFGVujmBlglTbi3jM5h8L04kokv5j/xs+fmVEpqmOWR8P3AOiX1OFx4SkQNcASIimT1BPcySiJT6AvWQNn3PMtTpclABFW8vkeS4jlAusF07J0Zls4P1Anri7ZoAq4Zql5uRhP+m+AOsRZx4FRgr63SGPLhx6gc8R9HfuMXTi2oOEyfhq4RYLPb7A0/vjkD2yZsbxa0XKkxKC3m4Fvibxso3cHP4BWMxfN1YKiXJAAAAAElFTkSuQmCC";
|
|
218
|
+
function Address({ onChange }) {
|
|
219
|
+
const [open, setOpen] = useState(false);
|
|
220
|
+
const t = useTranslations("common");
|
|
221
|
+
const [address, setAddress] = useState("");
|
|
222
|
+
const handleAddressChange = (e) => {
|
|
223
|
+
const value = e.target.value;
|
|
224
|
+
if (value === "" || /^[a-zA-Z0-9]*$/.test(value)) {
|
|
225
|
+
setAddress(value);
|
|
226
|
+
}
|
|
182
227
|
};
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
228
|
+
const handleConfirm = () => {
|
|
229
|
+
onChange(address);
|
|
230
|
+
setOpen(false);
|
|
231
|
+
};
|
|
232
|
+
const handleCancel = () => {
|
|
233
|
+
setOpen(false);
|
|
234
|
+
};
|
|
235
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
236
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-[#000] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(ImageBar, { src: TokenIcon, width: 12, height: 12, objectFit: "contain" }) }) }),
|
|
237
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "bg-card", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
|
|
238
|
+
/* @__PURE__ */ jsxs("fieldset", { className: "w-full h-full", children: [
|
|
239
|
+
/* @__PURE__ */ jsxs("label", { className: "w-full h-full text-sm flex items-center justify-between", children: [
|
|
240
|
+
t("filter.address.label"),
|
|
241
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-f text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }) })
|
|
190
242
|
] }),
|
|
191
|
-
/* @__PURE__ */
|
|
192
|
-
/* @__PURE__ */
|
|
193
|
-
/* @__PURE__ */
|
|
243
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full relative text-sm ", children: [
|
|
244
|
+
/* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
|
|
245
|
+
/* @__PURE__ */ jsx("input", { placeholder: t("filter.amount.label"), type: "text", pattern: "[a-zA-Z0-9]*", className: "pl-6 w-full h-full bg-card text-sm border-1 border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: address, onChange: handleAddressChange })
|
|
194
246
|
] })
|
|
195
247
|
] }),
|
|
196
|
-
/* @__PURE__ */
|
|
197
|
-
/* @__PURE__ */
|
|
198
|
-
/* @__PURE__ */
|
|
248
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
|
|
249
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border rounded ml-3 cursor-pointer", onClick: handleCancel, children: t("button.cancel") }),
|
|
250
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: handleConfirm, children: t("button.confirm") })
|
|
199
251
|
] })
|
|
200
252
|
] }) })
|
|
201
253
|
] });
|
|
202
254
|
}
|
|
203
|
-
const
|
|
204
|
-
params: {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
255
|
+
const getHotTokenList = (params) => {
|
|
256
|
+
return request.get(`/api/v2/tokens/hot-list`, { params: { ...params, limit: 100, page: 1 } });
|
|
257
|
+
};
|
|
258
|
+
const searchToken = (search) => {
|
|
259
|
+
return request.get(`/api/token/list/verified`, {
|
|
260
|
+
params: {
|
|
261
|
+
search,
|
|
262
|
+
page: 1,
|
|
263
|
+
size: 100
|
|
264
|
+
}
|
|
265
|
+
});
|
|
266
|
+
};
|
|
267
|
+
function Token({ onChange }) {
|
|
268
|
+
const { chain } = useParams();
|
|
269
|
+
const t = useTranslations("common.filter.amount");
|
|
270
|
+
const [open, setOpen] = useState(false);
|
|
271
|
+
const [token, setToken] = useState("");
|
|
272
|
+
const [tokenList, setTokenList] = useState([]);
|
|
273
|
+
const [selectedToken, setSelectedToken] = useState([]);
|
|
274
|
+
const handleCancel = () => {
|
|
275
|
+
setOpen(false);
|
|
276
|
+
};
|
|
277
|
+
const handleConfirm = () => {
|
|
278
|
+
onChange(selectedToken);
|
|
279
|
+
setOpen(false);
|
|
280
|
+
};
|
|
281
|
+
const tokenChange = (item) => {
|
|
282
|
+
if (selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress)) {
|
|
283
|
+
setSelectedToken(selectedToken.filter((token2) => token2.tokenAddress !== item.tokenAddress));
|
|
284
|
+
} else {
|
|
285
|
+
setSelectedToken([...selectedToken, item]);
|
|
286
|
+
}
|
|
287
|
+
};
|
|
288
|
+
const loadData = useDebounceFn(async () => {
|
|
289
|
+
const res = await getHotTokenList({
|
|
290
|
+
chain,
|
|
291
|
+
text: token,
|
|
221
292
|
limit: 100,
|
|
222
293
|
page: 1
|
|
223
294
|
});
|
|
224
|
-
|
|
295
|
+
setTokenList(res?.data || []);
|
|
225
296
|
}, { wait: 300 });
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
}, [
|
|
229
|
-
|
|
230
|
-
/* @__PURE__ */
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
/* @__PURE__ */
|
|
297
|
+
useEffect(() => {
|
|
298
|
+
loadData.run();
|
|
299
|
+
}, [chain, token]);
|
|
300
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
301
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-[#000] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(ImageBar, { src: TokenIcon, width: 12, height: 12, objectFit: "contain" }) }) }),
|
|
302
|
+
/* @__PURE__ */ jsxs(PopoverContent, { className: "py-5 bg-card", children: [
|
|
303
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
|
|
304
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
|
|
305
|
+
/* @__PURE__ */ jsx("span", { className: "text-base text-foreground", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.token" }) }),
|
|
306
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-foreground text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-foreground" }) })
|
|
235
307
|
] }),
|
|
236
|
-
/* @__PURE__ */
|
|
237
|
-
/* @__PURE__ */
|
|
238
|
-
/* @__PURE__ */
|
|
308
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full relative text-sm py-3", children: [
|
|
309
|
+
/* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
|
|
310
|
+
/* @__PURE__ */ jsx("input", { type: "text", placeholder: t("label"), className: "pl-6 w-full h-full bg-card text-sm border border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: token, onChange: (e) => setToken(e.target.value) })
|
|
239
311
|
] })
|
|
240
312
|
] }),
|
|
241
|
-
/* @__PURE__ */
|
|
242
|
-
/* @__PURE__ */
|
|
243
|
-
/* @__PURE__ */
|
|
244
|
-
/* @__PURE__ */
|
|
313
|
+
/* @__PURE__ */ jsx("ul", { className: "max-h-30 min-h-30 overflow-y-auto overflow-x-hidden w-full", children: tokenList?.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex h-10 flex-row items-center gap-3 hover:bg-background hover:rounded-sm p-2 cursor-pointer overflow-hidden", onClick: () => tokenChange(item), children: [
|
|
314
|
+
/* @__PURE__ */ jsx(ImageBar, { src: item.iconUrl, objectFit: "contain", alt: item.tokenSymbol, className: "rounded-full w-4 h-4 min-w-4 min-h-4 flex-shrink-0" }),
|
|
315
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: [
|
|
316
|
+
/* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.tokenSymbol }),
|
|
245
317
|
" ",
|
|
246
|
-
/* @__PURE__ */
|
|
318
|
+
/* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: item.tokenName })
|
|
247
319
|
] }),
|
|
248
|
-
/* @__PURE__ */
|
|
249
|
-
] },
|
|
250
|
-
/* @__PURE__ */
|
|
251
|
-
/* @__PURE__ */
|
|
252
|
-
/* @__PURE__ */
|
|
320
|
+
/* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Checkbox, { className: twMerge("w-4 h-4 cursor-pointer border border-gray-300 rounded-sm", selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) ? "bg-primary" : "bg-card"), checked: selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) }) })
|
|
321
|
+
] }, index)) }),
|
|
322
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
|
|
323
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border rounded ml-3 cursor-pointer", onClick: handleCancel, children: /* @__PURE__ */ jsx(Translation, { value: "button.cancel", parentKey: "common" }) }),
|
|
324
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: handleConfirm, children: /* @__PURE__ */ jsx(Translation, { value: "button.confirm", parentKey: "common" }) })
|
|
253
325
|
] })
|
|
254
326
|
] })
|
|
255
327
|
] });
|
|
256
328
|
}
|
|
257
|
-
function
|
|
258
|
-
const { chain
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
329
|
+
function TokenSearch({ onChange }) {
|
|
330
|
+
const { chain = "" } = useParams();
|
|
331
|
+
const t = useTranslations("common.filter.amount");
|
|
332
|
+
const [open, setOpen] = useState(false);
|
|
333
|
+
const [token, setToken] = useState("");
|
|
334
|
+
const [tokenList, setTokenList] = useState([]);
|
|
335
|
+
const [selectedToken, setSelectedToken] = useState([]);
|
|
336
|
+
const handleCancel = () => {
|
|
337
|
+
onChange([]);
|
|
338
|
+
setToken("");
|
|
339
|
+
setSelectedToken([]);
|
|
340
|
+
setOpen(false);
|
|
341
|
+
};
|
|
342
|
+
const handleConfirm = () => {
|
|
343
|
+
onChange(selectedToken);
|
|
344
|
+
setOpen(false);
|
|
345
|
+
};
|
|
346
|
+
const tokenChange = (item) => {
|
|
347
|
+
if (selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress)) {
|
|
348
|
+
setSelectedToken(selectedToken.filter((token2) => token2.tokenAddress !== item.tokenAddress));
|
|
349
|
+
} else {
|
|
350
|
+
setSelectedToken([...selectedToken, item]);
|
|
351
|
+
}
|
|
352
|
+
};
|
|
353
|
+
const loadData = async () => {
|
|
354
|
+
const res = await searchToken(token);
|
|
355
|
+
setTokenList(res?.data?.content || []);
|
|
268
356
|
};
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
}, [
|
|
272
|
-
|
|
273
|
-
/* @__PURE__ */
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
/* @__PURE__ */
|
|
357
|
+
useEffect(() => {
|
|
358
|
+
loadData();
|
|
359
|
+
}, [chain, token]);
|
|
360
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
361
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-[#000] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(ImageBar, { src: TokenIcon, width: 12, height: 12, objectFit: "contain" }) }) }),
|
|
362
|
+
/* @__PURE__ */ jsxs(PopoverContent, { className: "py-5 bg-card", children: [
|
|
363
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-card", children: [
|
|
364
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
|
|
365
|
+
/* @__PURE__ */ jsx("span", { className: "text-base text-foreground", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.token" }) }),
|
|
366
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-foreground text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-foreground" }) })
|
|
278
367
|
] }),
|
|
279
|
-
/* @__PURE__ */
|
|
280
|
-
/* @__PURE__ */
|
|
281
|
-
/* @__PURE__ */
|
|
368
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full relative bg-card text-sm py-3", children: [
|
|
369
|
+
/* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
|
|
370
|
+
/* @__PURE__ */ jsx("input", { type: "text", placeholder: t("label"), className: "pl-6 w-full h-full bg-card text-sm border border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: token, onChange: (e) => setToken(e.target.value) })
|
|
282
371
|
] })
|
|
283
372
|
] }),
|
|
284
|
-
/* @__PURE__ */
|
|
285
|
-
/* @__PURE__ */
|
|
286
|
-
/* @__PURE__ */
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
] },
|
|
289
|
-
/* @__PURE__ */
|
|
290
|
-
/* @__PURE__ */
|
|
291
|
-
/* @__PURE__ */
|
|
373
|
+
/* @__PURE__ */ jsx("ul", { className: "max-h-50 min-h-25 overflow-y-auto overflow-x-hidden w-full", children: tokenList?.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex h-10 flex-row items-center gap-3 hover:bg-background hover:rounded-sm p-2 cursor-pointer overflow-hidden", onClick: () => tokenChange(item), children: [
|
|
374
|
+
/* @__PURE__ */ jsx(ImageBar, { src: item.iconUrl, objectFit: "contain", alt: item.tokenName, className: "rounded-full w-4 h-4 min-w-4 min-h-4 flex-shrink-0" }),
|
|
375
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: item.tokenName }),
|
|
376
|
+
/* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Checkbox, { className: twMerge("w-4 h-4 cursor-pointer border border-gray-300 rounded-sm", selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) ? "bg-primary" : "bg-white"), checked: selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) }) })
|
|
377
|
+
] }, index)) }),
|
|
378
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
|
|
379
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border rounded ml-3 cursor-pointer", onClick: handleCancel, children: /* @__PURE__ */ jsx(Translation, { value: "button.cancel", parentKey: "common" }) }),
|
|
380
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: handleConfirm, children: /* @__PURE__ */ jsx(Translation, { value: "button.confirm", parentKey: "common" }) })
|
|
292
381
|
] })
|
|
293
382
|
] })
|
|
294
383
|
] });
|
|
295
384
|
}
|
|
296
|
-
const
|
|
297
|
-
|
|
385
|
+
const SortIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHtSURBVHgB7ZfBalNBFIb/M7cmaBGuT2BcCNZVHsG+QWNw3Qw00qyMT5DbJ9Buiujipnsl+gZ5A3EjLu8bNIIVzSVzOhNaKGnTe86EQhf5IARyD8M388/cMwHW3CEIK/Bs/6RhTG3kh2n6T/bz6P4BIoiWaPRP0gf/69/9CI2L35ybbf/68HAMJQaRbJb1wWWB+WAmyYMclERJbPVOd5jRv+ZRw69ODiVqibAPCPRuaQFhZ6v3tw8Fagmie9liDFdrMAiyuA2J5/t/OkRmV1CaJiSPRSwxnxmZgbSeCS+ksYgl5jOriGERaSwiiRBDmBn0pMbUR1VFIgmW7YNlNJ92p02sKkHkfiASBopy87S4qWYDAmq1MptOaxPv/BhKqJwdFkePJlgjQNRF83yUug284ZnuiAZKxkHPtgqsKvHp+POQEH1CJon7/cRau3RfyE4Hk3pDXiL9h/TG9i57TzC+IZ6iKg6RRNe233uTMSIoHW1X1Yh7R8nG+i/VeWdw5aYMqO6YH/MvHWNI1qL9yu112pWrEFDdJ17b9tA3kq+C0uJ85USob1YJIwxeVJRlkhiiJaxtTdjNls+Sabi3+/IYCqJu2137agzHh9c8KsIbEkqi/3ckMBmuxqKKYWWJEItz1DoX8RHxW20MaxY5AxD/nDkC92cTAAAAAElFTkSuQmCC";
|
|
386
|
+
const formatValue = (value) => {
|
|
387
|
+
if (value === null || value === void 0) {
|
|
388
|
+
return "";
|
|
389
|
+
}
|
|
390
|
+
if (typeof value === "object") {
|
|
391
|
+
return JSON.stringify(value);
|
|
392
|
+
}
|
|
393
|
+
return value;
|
|
394
|
+
};
|
|
395
|
+
const formatFilterValue = (filterValues) => {
|
|
396
|
+
const obj = {
|
|
298
397
|
filters: {}
|
|
299
398
|
};
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
399
|
+
Object.keys(filterValues).forEach((key) => {
|
|
400
|
+
if (key === "timestamp") {
|
|
401
|
+
obj.filters.startTime = filterValues.timestamp.start;
|
|
402
|
+
obj.filters.endTime = filterValues.timestamp.end;
|
|
403
|
+
} else if (key === "fromAddress") {
|
|
404
|
+
obj.filters.fromAddress = filterValues.fromAddress.address;
|
|
405
|
+
} else if (key === "toAddress") {
|
|
406
|
+
obj.filters.toAddress = filterValues.toAddress.address;
|
|
407
|
+
} else if (key === "valueUsd") {
|
|
408
|
+
obj.filters.minValueUsd = filterValues.valueUsd.min;
|
|
409
|
+
obj.filters.maxValueUsd = filterValues.valueUsd.max;
|
|
410
|
+
} else if (key === "amount") {
|
|
411
|
+
obj.filters.minAmount = filterValues.amount.min;
|
|
412
|
+
obj.filters.maxAmount = filterValues.amount.max;
|
|
413
|
+
} else if (key === "token") {
|
|
414
|
+
obj.filters.tokenList = filterValues.token.map((item) => item.tokenAddress);
|
|
415
|
+
} else if (key === "tokenSearch") {
|
|
416
|
+
obj.filters.tokenList = filterValues.tokenSearch.map((item) => item.tokenAddress);
|
|
417
|
+
} else if (key === "inputAmount") {
|
|
418
|
+
obj.filters.minInputAmount = filterValues.inputAmount.min;
|
|
419
|
+
obj.filters.maxInputAmount = filterValues.inputAmount.max;
|
|
420
|
+
} else if (key === "outputAmount") {
|
|
421
|
+
obj.filters.minOutputAmount = filterValues.outputAmount.min;
|
|
422
|
+
obj.filters.maxOutputAmount = filterValues.outputAmount.max;
|
|
423
|
+
} else if (key === "fee") {
|
|
424
|
+
obj.filters.minFee = filterValues.fee.min;
|
|
425
|
+
obj.filters.maxFee = filterValues.fee.max;
|
|
426
|
+
}
|
|
427
|
+
});
|
|
428
|
+
return obj.filters;
|
|
303
429
|
};
|
|
304
|
-
function
|
|
305
|
-
const [
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
430
|
+
function CustomTable({ data, columns, headerClassName, bodyClassName, rowClassName, tableClassName, showHeader = true, renderChildren, onFilterChange, loading, onSortChange, defaultOrder, defaultSortKey, emptyClassName, ...props }) {
|
|
431
|
+
const [filterValues, setFilterValues] = useState(null);
|
|
432
|
+
const [resetKey, setResetKey] = useState({});
|
|
433
|
+
const [sortKey, setSortKey] = useState(defaultSortKey || null);
|
|
434
|
+
const [sortOrder, setSortOrder] = useState(defaultOrder || null);
|
|
435
|
+
const handleFilterChange = (columnKey, value) => {
|
|
436
|
+
setFilterValues((prev) => ({
|
|
437
|
+
...prev,
|
|
438
|
+
[columnKey]: value
|
|
309
439
|
}));
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
440
|
+
};
|
|
441
|
+
const removeFilter = (columnKey) => {
|
|
442
|
+
setFilterValues((prev) => {
|
|
443
|
+
const newValues = { ...prev };
|
|
444
|
+
delete newValues[columnKey];
|
|
445
|
+
return newValues;
|
|
446
|
+
});
|
|
447
|
+
setResetKey((prev) => ({
|
|
448
|
+
...prev,
|
|
449
|
+
[columnKey]: (prev[columnKey] || 0) + 1
|
|
317
450
|
}));
|
|
318
|
-
}
|
|
319
|
-
|
|
451
|
+
};
|
|
452
|
+
const renderFilter = (column) => {
|
|
453
|
+
switch (column.filter) {
|
|
320
454
|
case "timeRange":
|
|
321
|
-
return /* @__PURE__ */
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
455
|
+
return /* @__PURE__ */ jsx(DatePickerWithRange, { onChange: (start, end) => {
|
|
456
|
+
if (start && end) {
|
|
457
|
+
handleFilterChange(column.key, { start, end });
|
|
458
|
+
column.filterProps?.onChange?.({ start, end });
|
|
459
|
+
} else {
|
|
460
|
+
removeFilter(column.key);
|
|
461
|
+
}
|
|
462
|
+
} }, resetKey[column.key]);
|
|
325
463
|
case "address":
|
|
326
|
-
return /* @__PURE__ */
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
464
|
+
return /* @__PURE__ */ jsx(Address, { onChange: (address) => {
|
|
465
|
+
if (address) {
|
|
466
|
+
handleFilterChange(column.key, { address });
|
|
467
|
+
column.filterProps?.onChange?.({ address });
|
|
468
|
+
} else {
|
|
469
|
+
removeFilter(column.key);
|
|
470
|
+
}
|
|
471
|
+
} }, resetKey[column.key]);
|
|
330
472
|
case "amount":
|
|
331
|
-
return /* @__PURE__ */
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
473
|
+
return /* @__PURE__ */ jsx(Amount, { filterKey: column.key, onChange: (min, max) => {
|
|
474
|
+
const obj = {};
|
|
475
|
+
if (min) {
|
|
476
|
+
obj.min = min;
|
|
477
|
+
}
|
|
478
|
+
if (max) {
|
|
479
|
+
obj.max = max;
|
|
480
|
+
}
|
|
481
|
+
if (Object.keys(obj).length > 0) {
|
|
482
|
+
handleFilterChange(column.key, obj);
|
|
483
|
+
column.filterProps?.onChange?.(obj);
|
|
484
|
+
} else {
|
|
485
|
+
removeFilter(column.key);
|
|
486
|
+
}
|
|
487
|
+
} }, resetKey[column.key]);
|
|
336
488
|
case "token":
|
|
337
|
-
return /* @__PURE__ */
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
489
|
+
return /* @__PURE__ */ jsx(Token, { onChange: (token) => {
|
|
490
|
+
if (token) {
|
|
491
|
+
handleFilterChange(column.key, token);
|
|
492
|
+
column.filterProps?.onChange?.(token);
|
|
493
|
+
} else {
|
|
494
|
+
removeFilter(column.key);
|
|
495
|
+
}
|
|
496
|
+
} }, resetKey[column.key]);
|
|
341
497
|
case "tokenSearch":
|
|
342
|
-
return /* @__PURE__ */
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
498
|
+
return /* @__PURE__ */ jsx(TokenSearch, { onChange: (token) => {
|
|
499
|
+
if (token) {
|
|
500
|
+
handleFilterChange(column.key, token);
|
|
501
|
+
column.filterProps?.onChange?.(token);
|
|
502
|
+
} else {
|
|
503
|
+
removeFilter(column.key);
|
|
504
|
+
}
|
|
505
|
+
} }, resetKey[column.key]);
|
|
346
506
|
default:
|
|
347
507
|
return null;
|
|
348
508
|
}
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
|
|
509
|
+
};
|
|
510
|
+
const renderAmount = (value) => {
|
|
511
|
+
if (value.min && !value.max) return `≥ ${value.min}`;
|
|
512
|
+
if (!value.min && value.max) return `≤ ${value.max}`;
|
|
513
|
+
return `${value.min} - ${value.max}`;
|
|
514
|
+
};
|
|
515
|
+
const renderFilterValue = (column, value) => {
|
|
516
|
+
if (!value) return null;
|
|
517
|
+
switch (column.filter) {
|
|
352
518
|
case "timeRange":
|
|
353
|
-
return `${
|
|
519
|
+
return `${dayjs(value.start * 1e3).format("YYYY-MM-DD") || ""} - ${dayjs(value.end * 1e3).format("YYYY-MM-DD") || ""}`;
|
|
354
520
|
case "address":
|
|
355
|
-
return
|
|
521
|
+
return value.address;
|
|
356
522
|
case "amount":
|
|
357
|
-
return
|
|
523
|
+
return renderAmount(value);
|
|
358
524
|
case "token":
|
|
359
|
-
return
|
|
525
|
+
return value.map((item) => item.tokenName).join(", ");
|
|
360
526
|
case "tokenSearch":
|
|
361
|
-
return
|
|
527
|
+
return value.map((item) => item.tokenName).join(", ");
|
|
362
528
|
default:
|
|
363
529
|
return null;
|
|
364
530
|
}
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
531
|
+
};
|
|
532
|
+
const handleSort = (key) => {
|
|
533
|
+
const so = sortOrder === "asc" ? "desc" : "asc";
|
|
534
|
+
setSortKey(key);
|
|
535
|
+
setSortOrder(so);
|
|
536
|
+
onSortChange?.(key, so);
|
|
537
|
+
};
|
|
538
|
+
const showColumn = columns.filter((column) => !column.hidden);
|
|
539
|
+
const showFilter = showColumn.some((column) => column.filter);
|
|
540
|
+
useEffect(() => {
|
|
541
|
+
if (filterValues !== null) {
|
|
542
|
+
onFilterChange?.(filterValues);
|
|
543
|
+
}
|
|
544
|
+
}, [filterValues]);
|
|
545
|
+
return /* @__PURE__ */ jsxs("div", { className: "overflow-auto min-w-full relative", ...props, children: [
|
|
546
|
+
/* @__PURE__ */ jsx(Loading, { loading }),
|
|
547
|
+
showFilter && filterValues && Object.keys(filterValues).length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-row gap-3 flex-nowrap overflow-x-auto scrollbar-hide pb-3", children: showColumn.map((column) => {
|
|
548
|
+
if (!filterValues) return null;
|
|
549
|
+
const filterValue = filterValues?.[column.key];
|
|
550
|
+
if (!filterValue) return null;
|
|
551
|
+
if (Array.isArray(filterValue) && filterValue.length === 0) return null;
|
|
552
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-nowrap gap-2 bg-card px-3 py-1 rounded-full border-1 border-border max-w-full min-w-0 overflow-hidden", children: [
|
|
553
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground shrink-0", children: [
|
|
554
|
+
column.label,
|
|
379
555
|
":"
|
|
380
556
|
] }),
|
|
381
|
-
/* @__PURE__ */
|
|
382
|
-
/* @__PURE__ */
|
|
557
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 truncate", children: renderFilterValue(column, filterValue) }) }),
|
|
558
|
+
/* @__PURE__ */ jsx(
|
|
383
559
|
"button",
|
|
384
560
|
{
|
|
385
|
-
onClick: () =>
|
|
561
|
+
onClick: () => removeFilter(column.key),
|
|
386
562
|
className: "shrink-0 hover:bg-background rounded-full p-1",
|
|
387
|
-
children: /* @__PURE__ */
|
|
563
|
+
children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3 cursor-pointer" })
|
|
388
564
|
}
|
|
389
565
|
)
|
|
390
|
-
] },
|
|
566
|
+
] }, column.key);
|
|
391
567
|
}) }),
|
|
392
|
-
/* @__PURE__ */
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
] }) },
|
|
400
|
-
|
|
401
|
-
/* @__PURE__ */
|
|
402
|
-
/* @__PURE__ */ e(E, { className: v("border-r-0 border-l-0 border-t-0 border-b border-border hover:bg-background", A), children: F.map((s, u) => {
|
|
403
|
-
var j;
|
|
404
|
-
return /* @__PURE__ */ e(K, { className: v("text-left min-w-fit py-4", s.align === "center" && "text-center", s.align === "right" && "text-right", "whitespace-nowrap", (j = s.className) == null ? void 0 : j.call(s, s, r, a[r])), style: { width: s.width }, children: s.render ? s.render(t[s.key], t, r) : Fe(t[s.key]) }, u);
|
|
405
|
-
}) }, r),
|
|
406
|
-
b && /* @__PURE__ */ e(E, { className: "border-b-0", children: /* @__PURE__ */ e(K, { colSpan: F.length, className: "p-0", children: b(t, r) }) })
|
|
407
|
-
] }, r)) : /* @__PURE__ */ e(E, { className: "hover:bg-transparent data-[state=selected]:bg-transparent", children: /* @__PURE__ */ e(K, { colSpan: F.length, className: "w-full text-center", children: /* @__PURE__ */ e(ye, { className: v("w-full h-38", R) }) }) }) })
|
|
568
|
+
/* @__PURE__ */ jsxs(Table, { className: twMerge("", tableClassName), children: [
|
|
569
|
+
showHeader && /* @__PURE__ */ jsx(TableHeader, { className: twMerge("border-b border-border", headerClassName), children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-0 hover:bg-transparent", children: showColumn.map((column, index) => /* @__PURE__ */ jsx(TableHead, { className: twMerge("text-left", "whitespace-nowrap"), style: { width: column.width }, children: /* @__PURE__ */ jsxs("div", { className: twMerge("flex items-center gap-1 min-w-fit w-full whitespace-nowrap", column.align === "center" && "justify-center", column.align === "right" && "justify-end", column.className?.(column, index)), children: [
|
|
570
|
+
column.label,
|
|
571
|
+
column.filter && renderFilter(column),
|
|
572
|
+
column.sort && /* @__PURE__ */ jsx(ImageBar, { src: SortIcon, alt: "sort", className: twMerge("w-4 h-4 cursor-pointer", sortKey === column.key && "opacity-100", sortOrder === "desc" && "rotate-180"), onClick: () => handleSort(column.key) })
|
|
573
|
+
] }) }, index)) }) }),
|
|
574
|
+
/* @__PURE__ */ jsx(TableBody, { className: twMerge("[&_tr:last-child]:border-b-0", bodyClassName), children: data?.length > 0 ? data.map((row, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
|
|
575
|
+
/* @__PURE__ */ jsx(TableRow, { className: twMerge("border-r-0 border-l-0 border-t-0 border-b border-border hover:bg-background", rowClassName), children: showColumn.map((column, columnIndex) => /* @__PURE__ */ jsx(TableCell, { className: twMerge("text-left min-w-fit py-4", column.align === "center" && "text-center", column.align === "right" && "text-right", "whitespace-nowrap", column.className?.(column, index, data[index])), style: { width: column.width }, children: column.render ? column.render(row[column.key], row, index) : formatValue(row[column.key]) }, columnIndex)) }, index),
|
|
576
|
+
renderChildren && /* @__PURE__ */ jsx(TableRow, { className: "border-b-0", children: /* @__PURE__ */ jsx(TableCell, { colSpan: showColumn.length, className: "p-0", children: renderChildren(row, index) }) })
|
|
577
|
+
] }, index)) : /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent data-[state=selected]:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: showColumn.length, className: "w-full text-center", children: /* @__PURE__ */ jsx(Empty, { className: twMerge("w-full h-38", emptyClassName) }) }) }) })
|
|
408
578
|
] })
|
|
409
579
|
] });
|
|
410
580
|
}
|
|
411
581
|
export {
|
|
412
|
-
|
|
413
|
-
|
|
582
|
+
CustomTable as default,
|
|
583
|
+
formatFilterValue
|
|
414
584
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@0xchain/table",
|
|
3
|
-
"version": "1.1.0-beta.
|
|
3
|
+
"version": "1.1.0-beta.19",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -17,31 +17,47 @@
|
|
|
17
17
|
"dist",
|
|
18
18
|
"!**/*.tsbuildinfo"
|
|
19
19
|
],
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
"
|
|
25
|
-
"react-dom": "19.1.1",
|
|
26
|
-
"tailwind-merge": "3.3.1",
|
|
27
|
-
"lucide-react": "0.539.0",
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@radix-ui/react-slider": "1.3.6",
|
|
22
|
+
"ahooks": "3.9.5",
|
|
23
|
+
"antd": "6.1.1",
|
|
24
|
+
"date-fns": "4.1.0",
|
|
28
25
|
"dayjs": "1.11.19",
|
|
29
|
-
"
|
|
26
|
+
"lucide-react": "0.539.0",
|
|
30
27
|
"next": "16.1.6",
|
|
28
|
+
"next-intl": "4.8.2",
|
|
29
|
+
"react": "19.1.1",
|
|
30
|
+
"react-dom": "19.1.1",
|
|
31
|
+
"tailwind-merge": "3.3.1"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
31
34
|
"@0xchain/next-themes": "1.0.0",
|
|
32
|
-
"date-fns": "4.1.0",
|
|
33
|
-
"antd": "6.1.1",
|
|
34
|
-
"ahooks": "3.9.5",
|
|
35
35
|
"@radix-ui/react-slider": "1.3.6",
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
36
|
+
"ahooks": "3.9.5",
|
|
37
|
+
"antd": "6.1.1",
|
|
38
|
+
"date-fns": "4.1.0",
|
|
39
|
+
"dayjs": "1.11.19",
|
|
40
|
+
"lucide-react": "0.539.0",
|
|
41
|
+
"next": "16.1.6",
|
|
42
|
+
"next-intl": "4.8.2",
|
|
43
|
+
"react": "19.1.1",
|
|
44
|
+
"react-dom": "19.1.1",
|
|
45
|
+
"rollup-plugin-preserve-use-client": "3.0.1",
|
|
46
|
+
"tailwind-merge": "3.3.1"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@0xchain/ui": "1.1.0-beta.19",
|
|
50
|
+
"@0xchain/image": "1.1.0-beta.19",
|
|
51
|
+
"@0xchain/translation": "1.1.0-beta.19",
|
|
52
|
+
"@0xchain/request": "1.1.0-beta.19",
|
|
53
|
+
"@0xchain/empty": "1.1.0-beta.19",
|
|
54
|
+
"@0xchain/loading": "1.1.0-beta.19",
|
|
55
|
+
"@0xchain/number-like": "1.1.0-beta.19"
|
|
56
|
+
},
|
|
57
|
+
"nx": {
|
|
58
|
+
"tags": [
|
|
59
|
+
"type:ui"
|
|
60
|
+
]
|
|
45
61
|
},
|
|
46
62
|
"publishConfig": {
|
|
47
63
|
"access": "public"
|