@tipp/ui 1.0.2 → 1.0.4
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/atoms/avatar.d.cts +1 -1
- package/dist/atoms/avatar.d.ts +1 -1
- package/dist/atoms/check-box.d.cts +1 -1
- package/dist/atoms/check-box.d.ts +1 -1
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.js +63 -63
- package/dist/atoms/pagination.js +2 -2
- package/dist/chart/chart.cjs +21 -1
- package/dist/chart/chart.cjs.map +1 -1
- package/dist/chart/chart.d.cts +4 -1
- package/dist/chart/chart.d.ts +4 -1
- package/dist/chart/chart.js +19 -1
- package/dist/chart/chart.js.map +1 -1
- package/dist/chunk-YBFIP7FD.js +119 -0
- package/dist/chunk-YBFIP7FD.js.map +1 -0
- package/dist/index.css +7906 -7905
- package/dist/index.js +77 -77
- package/dist/molecules/expand-table/index.js +31 -31
- package/dist/molecules/expand-table/row.js +28 -28
- package/dist/molecules/index.js +31 -31
- package/package.json +4 -1
- package/src/chart/chart.tsx +23 -3
package/dist/atoms/avatar.d.cts
CHANGED
|
@@ -5,7 +5,7 @@ type AvatarProps = Omit<AvatarProps$1, 'size'> & {
|
|
|
5
5
|
size?: 'small' | 'medium' | 'large' | 'full';
|
|
6
6
|
};
|
|
7
7
|
declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps$1, "size"> & {
|
|
8
|
-
size?: "small" | "
|
|
8
|
+
size?: "small" | "large" | "medium" | "full" | undefined;
|
|
9
9
|
} & React.RefAttributes<HTMLImageElement>>;
|
|
10
10
|
|
|
11
11
|
export { Avatar, type AvatarProps };
|
package/dist/atoms/avatar.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ type AvatarProps = Omit<AvatarProps$1, 'size'> & {
|
|
|
5
5
|
size?: 'small' | 'medium' | 'large' | 'full';
|
|
6
6
|
};
|
|
7
7
|
declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarProps$1, "size"> & {
|
|
8
|
-
size?: "small" | "
|
|
8
|
+
size?: "small" | "large" | "medium" | "full" | undefined;
|
|
9
9
|
} & React.RefAttributes<HTMLImageElement>>;
|
|
10
10
|
|
|
11
11
|
export { Avatar, type AvatarProps };
|
|
@@ -5,7 +5,7 @@ type CheckboxProps = Omit<CheckboxProps$1, 'size'> & {
|
|
|
5
5
|
size?: 'small' | 'medium' | 'large';
|
|
6
6
|
};
|
|
7
7
|
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps$1, "size"> & {
|
|
8
|
-
size?: "small" | "
|
|
8
|
+
size?: "small" | "large" | "medium" | undefined;
|
|
9
9
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
|
|
11
11
|
export { Checkbox, type CheckboxProps };
|
|
@@ -5,7 +5,7 @@ type CheckboxProps = Omit<CheckboxProps$1, 'size'> & {
|
|
|
5
5
|
size?: 'small' | 'medium' | 'large';
|
|
6
6
|
};
|
|
7
7
|
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps$1, "size"> & {
|
|
8
|
-
size?: "small" | "
|
|
8
|
+
size?: "small" | "large" | "medium" | undefined;
|
|
9
9
|
} & React.RefAttributes<HTMLButtonElement>>;
|
|
10
10
|
|
|
11
11
|
export { Checkbox, type CheckboxProps };
|
package/dist/atoms/index.js
CHANGED
|
@@ -2,33 +2,9 @@ import "../chunk-MASTHXWN.js";
|
|
|
2
2
|
import {
|
|
3
3
|
DatePicker
|
|
4
4
|
} from "../chunk-IIBITN2G.js";
|
|
5
|
-
import {
|
|
6
|
-
Switch
|
|
7
|
-
} from "../chunk-OYM4XCHQ.js";
|
|
8
|
-
import {
|
|
9
|
-
TabNav
|
|
10
|
-
} from "../chunk-YJ7ZFOYL.js";
|
|
11
|
-
import {
|
|
12
|
-
Tabs
|
|
13
|
-
} from "../chunk-5ZITU5L7.js";
|
|
14
|
-
import {
|
|
15
|
-
TextArea
|
|
16
|
-
} from "../chunk-ILRUXI2E.js";
|
|
17
5
|
import {
|
|
18
6
|
TextField
|
|
19
7
|
} from "../chunk-JPIZP2PZ.js";
|
|
20
|
-
import {
|
|
21
|
-
ScrollArea
|
|
22
|
-
} from "../chunk-ZKZDVS7G.js";
|
|
23
|
-
import {
|
|
24
|
-
Section
|
|
25
|
-
} from "../chunk-MUNMDHRF.js";
|
|
26
|
-
import {
|
|
27
|
-
SegmentedControl
|
|
28
|
-
} from "../chunk-TVDKGMBI.js";
|
|
29
|
-
import {
|
|
30
|
-
Select
|
|
31
|
-
} from "../chunk-355MU6BH.js";
|
|
32
8
|
import {
|
|
33
9
|
Separator
|
|
34
10
|
} from "../chunk-HYITAA4J.js";
|
|
@@ -42,17 +18,17 @@ import {
|
|
|
42
18
|
Strong
|
|
43
19
|
} from "../chunk-74DX4CU7.js";
|
|
44
20
|
import {
|
|
45
|
-
|
|
46
|
-
} from "../chunk-
|
|
21
|
+
Switch
|
|
22
|
+
} from "../chunk-OYM4XCHQ.js";
|
|
47
23
|
import {
|
|
48
|
-
|
|
49
|
-
} from "../chunk-
|
|
24
|
+
TabNav
|
|
25
|
+
} from "../chunk-YJ7ZFOYL.js";
|
|
50
26
|
import {
|
|
51
|
-
|
|
52
|
-
} from "../chunk-
|
|
27
|
+
Tabs
|
|
28
|
+
} from "../chunk-5ZITU5L7.js";
|
|
53
29
|
import {
|
|
54
|
-
|
|
55
|
-
} from "../chunk-
|
|
30
|
+
TextArea
|
|
31
|
+
} from "../chunk-ILRUXI2E.js";
|
|
56
32
|
import {
|
|
57
33
|
Quote
|
|
58
34
|
} from "../chunk-YO3BQW6S.js";
|
|
@@ -66,17 +42,17 @@ import {
|
|
|
66
42
|
Radio
|
|
67
43
|
} from "../chunk-FPD73OHW.js";
|
|
68
44
|
import {
|
|
69
|
-
|
|
70
|
-
} from "../chunk-
|
|
45
|
+
ScrollArea
|
|
46
|
+
} from "../chunk-ZKZDVS7G.js";
|
|
71
47
|
import {
|
|
72
|
-
|
|
73
|
-
} from "../chunk-
|
|
48
|
+
Section
|
|
49
|
+
} from "../chunk-MUNMDHRF.js";
|
|
74
50
|
import {
|
|
75
|
-
|
|
76
|
-
} from "../chunk-
|
|
51
|
+
SegmentedControl
|
|
52
|
+
} from "../chunk-TVDKGMBI.js";
|
|
77
53
|
import {
|
|
78
|
-
|
|
79
|
-
} from "../chunk-
|
|
54
|
+
Select
|
|
55
|
+
} from "../chunk-355MU6BH.js";
|
|
80
56
|
import {
|
|
81
57
|
Inset
|
|
82
58
|
} from "../chunk-XQOL7UBI.js";
|
|
@@ -84,17 +60,20 @@ import {
|
|
|
84
60
|
Kbd
|
|
85
61
|
} from "../chunk-TULWX7D6.js";
|
|
86
62
|
import {
|
|
87
|
-
|
|
88
|
-
} from "../chunk-
|
|
63
|
+
Link
|
|
64
|
+
} from "../chunk-XQOZWYUA.js";
|
|
89
65
|
import {
|
|
90
|
-
|
|
91
|
-
} from "../chunk-
|
|
66
|
+
Pagination
|
|
67
|
+
} from "../chunk-OZLC6KYP.js";
|
|
92
68
|
import {
|
|
93
|
-
|
|
94
|
-
} from "../chunk-
|
|
69
|
+
IconButton
|
|
70
|
+
} from "../chunk-O3DNDMV3.js";
|
|
95
71
|
import {
|
|
96
|
-
|
|
97
|
-
} from "../chunk-
|
|
72
|
+
Popover
|
|
73
|
+
} from "../chunk-5AVBYDPB.js";
|
|
74
|
+
import {
|
|
75
|
+
Progress
|
|
76
|
+
} from "../chunk-365QMK4D.js";
|
|
98
77
|
import {
|
|
99
78
|
DropdownMenu
|
|
100
79
|
} from "../chunk-YTZSKMX3.js";
|
|
@@ -109,25 +88,22 @@ import {
|
|
|
109
88
|
} from "../chunk-2DZ2Y3JI.js";
|
|
110
89
|
import {
|
|
111
90
|
FieldErrorWrapper
|
|
112
|
-
} from "../chunk-
|
|
113
|
-
import {
|
|
114
|
-
Flex
|
|
115
|
-
} from "../chunk-25HMMI7R.js";
|
|
91
|
+
} from "../chunk-CNQ7RNNY.js";
|
|
116
92
|
import {
|
|
117
93
|
Typo
|
|
118
94
|
} from "../chunk-O3XTRD7R.js";
|
|
119
95
|
import {
|
|
120
|
-
|
|
121
|
-
} from "../chunk-
|
|
96
|
+
Flex
|
|
97
|
+
} from "../chunk-25HMMI7R.js";
|
|
122
98
|
import {
|
|
123
|
-
|
|
124
|
-
} from "../chunk-
|
|
99
|
+
Grid
|
|
100
|
+
} from "../chunk-EGEQY3KT.js";
|
|
125
101
|
import {
|
|
126
|
-
|
|
127
|
-
} from "../chunk-
|
|
102
|
+
Heading
|
|
103
|
+
} from "../chunk-HLOY6BIP.js";
|
|
128
104
|
import {
|
|
129
|
-
|
|
130
|
-
} from "../chunk-
|
|
105
|
+
HoverCard
|
|
106
|
+
} from "../chunk-O3T3TM3V.js";
|
|
131
107
|
import {
|
|
132
108
|
CheckboxCards
|
|
133
109
|
} from "../chunk-MIMJ7LON.js";
|
|
@@ -140,10 +116,18 @@ import {
|
|
|
140
116
|
import {
|
|
141
117
|
Code
|
|
142
118
|
} from "../chunk-OHMOP5PV.js";
|
|
143
|
-
import "../chunk-MMAV5BRZ.js";
|
|
144
119
|
import {
|
|
145
|
-
|
|
146
|
-
} from "../chunk-
|
|
120
|
+
Collapse
|
|
121
|
+
} from "../chunk-OCJNQGHN.js";
|
|
122
|
+
import {
|
|
123
|
+
Container
|
|
124
|
+
} from "../chunk-Q37G2GS6.js";
|
|
125
|
+
import {
|
|
126
|
+
DataList
|
|
127
|
+
} from "../chunk-VTJZMOSP.js";
|
|
128
|
+
import {
|
|
129
|
+
Dialog
|
|
130
|
+
} from "../chunk-P6B2PNYI.js";
|
|
147
131
|
import {
|
|
148
132
|
AspectRatio
|
|
149
133
|
} from "../chunk-EAXUQEO5.js";
|
|
@@ -156,6 +140,22 @@ import {
|
|
|
156
140
|
import {
|
|
157
141
|
Blockquote
|
|
158
142
|
} from "../chunk-YGL6SWKN.js";
|
|
143
|
+
import {
|
|
144
|
+
Box
|
|
145
|
+
} from "../chunk-4Y5BEXVN.js";
|
|
146
|
+
import {
|
|
147
|
+
Button
|
|
148
|
+
} from "../chunk-RET725VL.js";
|
|
149
|
+
import {
|
|
150
|
+
Callout
|
|
151
|
+
} from "../chunk-B6XJN6EC.js";
|
|
152
|
+
import {
|
|
153
|
+
Card
|
|
154
|
+
} from "../chunk-FYEASFUU.js";
|
|
155
|
+
import "../chunk-MMAV5BRZ.js";
|
|
156
|
+
import {
|
|
157
|
+
AlertDialog
|
|
158
|
+
} from "../chunk-J242TTFH.js";
|
|
159
159
|
import "../chunk-N552FDTV.js";
|
|
160
160
|
export {
|
|
161
161
|
AlertDialog,
|
package/dist/atoms/pagination.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Pagination
|
|
3
|
-
} from "../chunk-
|
|
3
|
+
} from "../chunk-OZLC6KYP.js";
|
|
4
4
|
import "../chunk-O3DNDMV3.js";
|
|
5
|
-
import "../chunk-25HMMI7R.js";
|
|
6
5
|
import "../chunk-O3XTRD7R.js";
|
|
6
|
+
import "../chunk-25HMMI7R.js";
|
|
7
7
|
import "../chunk-MMAV5BRZ.js";
|
|
8
8
|
import "../chunk-N552FDTV.js";
|
|
9
9
|
export {
|
package/dist/chart/chart.cjs
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __create = Object.create;
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
|
+
var __defProps = Object.defineProperties;
|
|
4
5
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
7
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
8
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
9
|
var __getProtoOf = Object.getPrototypeOf;
|
|
@@ -19,6 +21,7 @@ var __spreadValues = (a, b) => {
|
|
|
19
21
|
}
|
|
20
22
|
return a;
|
|
21
23
|
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
22
25
|
var __export = (target, all) => {
|
|
23
26
|
for (var name in all)
|
|
24
27
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -48,8 +51,10 @@ __export(chart_exports, {
|
|
|
48
51
|
chartTheme: () => chart_theme_default
|
|
49
52
|
});
|
|
50
53
|
module.exports = __toCommonJS(chart_exports);
|
|
54
|
+
var import_react = require("react");
|
|
51
55
|
var import_react_resize_detector = require("react-resize-detector");
|
|
52
56
|
var import_echarts_for_react = __toESM(require("echarts-for-react"), 1);
|
|
57
|
+
var import_lodash_es = require("lodash-es");
|
|
53
58
|
|
|
54
59
|
// src/chart/chart-theme.json
|
|
55
60
|
var chart_theme_default = {
|
|
@@ -197,7 +202,22 @@ function Chart(props) {
|
|
|
197
202
|
refreshMode: "debounce",
|
|
198
203
|
refreshRate: 100
|
|
199
204
|
});
|
|
200
|
-
|
|
205
|
+
const option = (0, import_react.useMemo)(() => {
|
|
206
|
+
const baseOption = {
|
|
207
|
+
textStyle: { fontFamily: "Noto Sans KR" },
|
|
208
|
+
tooltip: { textStyle: { fontSize: 16 } }
|
|
209
|
+
};
|
|
210
|
+
return (0, import_lodash_es.merge)(baseOption, props.option);
|
|
211
|
+
}, [props.option]);
|
|
212
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
213
|
+
import_echarts_for_react.default,
|
|
214
|
+
__spreadProps(__spreadValues({
|
|
215
|
+
style: { width, height },
|
|
216
|
+
theme: chart_theme_default
|
|
217
|
+
}, props), {
|
|
218
|
+
option
|
|
219
|
+
})
|
|
220
|
+
) });
|
|
201
221
|
}
|
|
202
222
|
// Annotate the CommonJS export names for ESM import in node:
|
|
203
223
|
0 && (module.exports = {
|
package/dist/chart/chart.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/chart/chart.tsx","../../src/chart/chart-theme.json"],"sourcesContent":["import React from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport ReactECharts from 'echarts-for-react';\nimport chartTheme from './chart-theme.json';\n\nexport { chartTheme };\n\nexport type ChartProps = React.ComponentProps<typeof ReactECharts
|
|
1
|
+
{"version":3,"sources":["../../src/chart/chart.tsx","../../src/chart/chart-theme.json"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport ReactECharts from 'echarts-for-react';\nimport type { EChartOption } from 'echarts';\nimport { merge } from 'lodash-es';\nimport chartTheme from './chart-theme.json';\n\nexport { chartTheme };\n\nexport type ChartProps = Omit<\n React.ComponentProps<typeof ReactECharts>,\n 'option'\n> & {\n option: EChartOption;\n};\n\nexport function Chart(props: ChartProps): JSX.Element {\n const { width, height, ref } = useResizeDetector({\n handleHeight: false,\n refreshMode: 'debounce',\n refreshRate: 100,\n });\n\n const option = useMemo(() => {\n const baseOption: EChartOption = {\n textStyle: { fontFamily: 'Noto Sans KR' },\n tooltip: { textStyle: { fontSize: 16 } },\n };\n return merge(baseOption, props.option);\n }, [props.option]);\n\n return (\n <div ref={ref} style={{ width: '100%', height: '100%' }}>\n <ReactECharts\n style={{ width, height }}\n theme={chartTheme}\n {...props}\n option={option}\n />\n </div>\n );\n}\n","{\n \"version\": 1,\n \"themeName\": \"customed\",\n \"theme\": {\n \"seriesCnt\": \"5\",\n \"backgroundColor\": \"rgba(0,0,0,0)\",\n \"titleColor\": \"#1c2024\",\n \"subtitleColor\": \"#8d8d8d\",\n \"textColorShow\": false,\n \"textColor\": \"#333\",\n \"markTextColor\": \"#ffffff\",\n \"color\": [\n \"#ffe629\",\n \"#3e63dd\",\n \"#ec9455\",\n \"#5bb98b\",\n \"#cb1d63\",\n \"#3ba272\",\n \"#fc8452\",\n \"#9a60b4\",\n \"#ea7ccc\"\n ],\n \"borderColor\": \"#8d8d8d\",\n \"borderWidth\": 0,\n \"visualMapColor\": [\"#bf444c\", \"#d88273\", \"#f6efa6\"],\n \"legendTextColor\": \"#1c2024\",\n \"kColor\": \"#eb5454\",\n \"kColor0\": \"#47b262\",\n \"kBorderColor\": \"#eb5454\",\n \"kBorderColor0\": \"#47b262\",\n \"kBorderWidth\": 1,\n \"lineWidth\": 2,\n \"symbolSize\": 4,\n \"symbol\": \"emptyCircle\",\n \"symbolBorderWidth\": 1,\n \"lineSmooth\": false,\n \"graphLineWidth\": 1,\n \"graphLineColor\": \"#aaa\",\n \"mapLabelColor\": \"#000\",\n \"mapLabelColorE\": \"rgb(100,0,0)\",\n \"mapBorderColor\": \"#444\",\n \"mapBorderColorE\": \"#444\",\n \"mapBorderWidth\": 0.5,\n \"mapBorderWidthE\": 1,\n \"mapAreaColor\": \"#eee\",\n \"mapAreaColorE\": \"rgba(255,215,0,0.8)\",\n \"axes\": [\n {\n \"type\": \"all\",\n \"name\": \"通用坐标轴\",\n \"axisLineShow\": true,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": true,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": true,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"category\",\n \"name\": \"类目坐标轴\",\n \"axisLineShow\": true,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": true,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": false,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"value\",\n \"name\": \"数值坐标轴\",\n \"axisLineShow\": false,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": false,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": true,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"log\",\n \"name\": \"对数坐标轴\",\n \"axisLineShow\": false,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": false,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": true,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"time\",\n \"name\": \"时间坐标轴\",\n \"axisLineShow\": true,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": true,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": false,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n }\n ],\n \"axisSeperateSetting\": true,\n \"toolboxColor\": \"#8d8d8d\",\n \"toolboxEmphasisColor\": \"#1c2024\",\n \"tooltipAxisColor\": \"#cccccc\",\n \"tooltipAxisWidth\": 1,\n \"timelineLineColor\": \"#dae1f5\",\n \"timelineLineWidth\": 2,\n \"timelineItemColor\": \"#a4b1d7\",\n \"timelineItemColorE\": \"#ffffff\",\n \"timelineCheckColor\": \"#316bf3\",\n \"timelineCheckBorderColor\": \"#ffffff\",\n \"timelineItemBorderWidth\": 1,\n \"timelineControlColor\": \"#a4b1d7\",\n \"timelineControlBorderColor\": \"#a4b1d7\",\n \"timelineControlBorderWidth\": 1,\n \"timelineLabelColor\": \"#a4b1d7\"\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,mCAAkC;AAClC,+BAAyB;AAEzB,uBAAsB;;;ACJtB;AAAA,EACE,SAAW;AAAA,EACX,WAAa;AAAA,EACb,OAAS;AAAA,IACP,WAAa;AAAA,IACb,iBAAmB;AAAA,IACnB,YAAc;AAAA,IACd,eAAiB;AAAA,IACjB,eAAiB;AAAA,IACjB,WAAa;AAAA,IACb,eAAiB;AAAA,IACjB,OAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,aAAe;AAAA,IACf,aAAe;AAAA,IACf,gBAAkB,CAAC,WAAW,WAAW,SAAS;AAAA,IAClD,iBAAmB;AAAA,IACnB,QAAU;AAAA,IACV,SAAW;AAAA,IACX,cAAgB;AAAA,IAChB,eAAiB;AAAA,IACjB,cAAgB;AAAA,IAChB,WAAa;AAAA,IACb,YAAc;AAAA,IACd,QAAU;AAAA,IACV,mBAAqB;AAAA,IACrB,YAAc;AAAA,IACd,gBAAkB;AAAA,IAClB,gBAAkB;AAAA,IAClB,eAAiB;AAAA,IACjB,gBAAkB;AAAA,IAClB,gBAAkB;AAAA,IAClB,iBAAmB;AAAA,IACnB,gBAAkB;AAAA,IAClB,iBAAmB;AAAA,IACnB,cAAgB;AAAA,IAChB,eAAiB;AAAA,IACjB,MAAQ;AAAA,MACN;AAAA,QACE,MAAQ;AAAA,QACR,MAAQ;AAAA,QACR,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,eAAiB;AAAA,QACjB,gBAAkB;AAAA,QAClB,eAAiB;AAAA,QACjB,gBAAkB,CAAC,SAAS;AAAA,QAC5B,eAAiB;AAAA,QACjB,gBAAkB,CAAC,yBAAyB,uBAAuB;AAAA,MACrE;AAAA,MACA;AAAA,QACE,MAAQ;AAAA,QACR,MAAQ;AAAA,QACR,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,eAAiB;AAAA,QACjB,gBAAkB;AAAA,QAClB,eAAiB;AAAA,QACjB,gBAAkB,CAAC,SAAS;AAAA,QAC5B,eAAiB;AAAA,QACjB,gBAAkB,CAAC,yBAAyB,uBAAuB;AAAA,MACrE;AAAA,MACA;AAAA,QACE,MAAQ;AAAA,QACR,MAAQ;AAAA,QACR,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,eAAiB;AAAA,QACjB,gBAAkB;AAAA,QAClB,eAAiB;AAAA,QACjB,gBAAkB,CAAC,SAAS;AAAA,QAC5B,eAAiB;AAAA,QACjB,gBAAkB,CAAC,yBAAyB,uBAAuB;AAAA,MACrE;AAAA,MACA;AAAA,QACE,MAAQ;AAAA,QACR,MAAQ;AAAA,QACR,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,eAAiB;AAAA,QACjB,gBAAkB;AAAA,QAClB,eAAiB;AAAA,QACjB,gBAAkB,CAAC,SAAS;AAAA,QAC5B,eAAiB;AAAA,QACjB,gBAAkB,CAAC,yBAAyB,uBAAuB;AAAA,MACrE;AAAA,MACA;AAAA,QACE,MAAQ;AAAA,QACR,MAAQ;AAAA,QACR,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,cAAgB;AAAA,QAChB,eAAiB;AAAA,QACjB,eAAiB;AAAA,QACjB,gBAAkB;AAAA,QAClB,eAAiB;AAAA,QACjB,gBAAkB,CAAC,SAAS;AAAA,QAC5B,eAAiB;AAAA,QACjB,gBAAkB,CAAC,yBAAyB,uBAAuB;AAAA,MACrE;AAAA,IACF;AAAA,IACA,qBAAuB;AAAA,IACvB,cAAgB;AAAA,IAChB,sBAAwB;AAAA,IACxB,kBAAoB;AAAA,IACpB,kBAAoB;AAAA,IACpB,mBAAqB;AAAA,IACrB,mBAAqB;AAAA,IACrB,mBAAqB;AAAA,IACrB,oBAAsB;AAAA,IACtB,oBAAsB;AAAA,IACtB,0BAA4B;AAAA,IAC5B,yBAA2B;AAAA,IAC3B,sBAAwB;AAAA,IACxB,4BAA8B;AAAA,IAC9B,4BAA8B;AAAA,IAC9B,oBAAsB;AAAA,EACxB;AACF;;;ADtGM;AAjBC,SAAS,MAAM,OAAgC;AACpD,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAI,gDAAkB;AAAA,IAC/C,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,EACf,CAAC;AAED,QAAM,aAAS,sBAAQ,MAAM;AAC3B,UAAM,aAA2B;AAAA,MAC/B,WAAW,EAAE,YAAY,eAAe;AAAA,MACxC,SAAS,EAAE,WAAW,EAAE,UAAU,GAAG,EAAE;AAAA,IACzC;AACA,eAAO,wBAAM,YAAY,MAAM,MAAM;AAAA,EACvC,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,SACE,4CAAC,SAAI,KAAU,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO,GACpD;AAAA,IAAC,yBAAAA;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,OAAO,OAAO;AAAA,MACvB,OAAO;AAAA,OACH,QAHL;AAAA,MAIC;AAAA;AAAA,EACF,GACF;AAEJ;","names":["ReactECharts"]}
|
package/dist/chart/chart.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import ReactECharts from 'echarts-for-react';
|
|
3
|
+
import { EChartOption } from 'echarts';
|
|
3
4
|
|
|
4
5
|
var version = 1;
|
|
5
6
|
var themeName = "customed";
|
|
@@ -170,7 +171,9 @@ var chartTheme = {
|
|
|
170
171
|
theme: theme
|
|
171
172
|
};
|
|
172
173
|
|
|
173
|
-
type ChartProps = React__default.ComponentProps<typeof ReactECharts
|
|
174
|
+
type ChartProps = Omit<React__default.ComponentProps<typeof ReactECharts>, 'option'> & {
|
|
175
|
+
option: EChartOption;
|
|
176
|
+
};
|
|
174
177
|
declare function Chart(props: ChartProps): JSX.Element;
|
|
175
178
|
|
|
176
179
|
export { Chart, type ChartProps, chartTheme };
|
package/dist/chart/chart.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
2
|
import ReactECharts from 'echarts-for-react';
|
|
3
|
+
import { EChartOption } from 'echarts';
|
|
3
4
|
|
|
4
5
|
var version = 1;
|
|
5
6
|
var themeName = "customed";
|
|
@@ -170,7 +171,9 @@ var chartTheme = {
|
|
|
170
171
|
theme: theme
|
|
171
172
|
};
|
|
172
173
|
|
|
173
|
-
type ChartProps = React__default.ComponentProps<typeof ReactECharts
|
|
174
|
+
type ChartProps = Omit<React__default.ComponentProps<typeof ReactECharts>, 'option'> & {
|
|
175
|
+
option: EChartOption;
|
|
176
|
+
};
|
|
174
177
|
declare function Chart(props: ChartProps): JSX.Element;
|
|
175
178
|
|
|
176
179
|
export { Chart, type ChartProps, chartTheme };
|
package/dist/chart/chart.js
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
|
+
__spreadProps,
|
|
2
3
|
__spreadValues
|
|
3
4
|
} from "../chunk-N552FDTV.js";
|
|
4
5
|
|
|
5
6
|
// src/chart/chart.tsx
|
|
7
|
+
import { useMemo } from "react";
|
|
6
8
|
import { useResizeDetector } from "react-resize-detector";
|
|
7
9
|
import ReactECharts from "echarts-for-react";
|
|
10
|
+
import { merge } from "lodash-es";
|
|
8
11
|
|
|
9
12
|
// src/chart/chart-theme.json
|
|
10
13
|
var chart_theme_default = {
|
|
@@ -152,7 +155,22 @@ function Chart(props) {
|
|
|
152
155
|
refreshMode: "debounce",
|
|
153
156
|
refreshRate: 100
|
|
154
157
|
});
|
|
155
|
-
|
|
158
|
+
const option = useMemo(() => {
|
|
159
|
+
const baseOption = {
|
|
160
|
+
textStyle: { fontFamily: "Noto Sans KR" },
|
|
161
|
+
tooltip: { textStyle: { fontSize: 16 } }
|
|
162
|
+
};
|
|
163
|
+
return merge(baseOption, props.option);
|
|
164
|
+
}, [props.option]);
|
|
165
|
+
return /* @__PURE__ */ jsx("div", { ref, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
|
|
166
|
+
ReactECharts,
|
|
167
|
+
__spreadProps(__spreadValues({
|
|
168
|
+
style: { width, height },
|
|
169
|
+
theme: chart_theme_default
|
|
170
|
+
}, props), {
|
|
171
|
+
option
|
|
172
|
+
})
|
|
173
|
+
) });
|
|
156
174
|
}
|
|
157
175
|
export {
|
|
158
176
|
Chart,
|
package/dist/chart/chart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/chart/chart.tsx","../../src/chart/chart-theme.json"],"sourcesContent":["import React from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport ReactECharts from 'echarts-for-react';\nimport chartTheme from './chart-theme.json';\n\nexport { chartTheme };\n\nexport type ChartProps = React.ComponentProps<typeof ReactECharts
|
|
1
|
+
{"version":3,"sources":["../../src/chart/chart.tsx","../../src/chart/chart-theme.json"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\nimport ReactECharts from 'echarts-for-react';\nimport type { EChartOption } from 'echarts';\nimport { merge } from 'lodash-es';\nimport chartTheme from './chart-theme.json';\n\nexport { chartTheme };\n\nexport type ChartProps = Omit<\n React.ComponentProps<typeof ReactECharts>,\n 'option'\n> & {\n option: EChartOption;\n};\n\nexport function Chart(props: ChartProps): JSX.Element {\n const { width, height, ref } = useResizeDetector({\n handleHeight: false,\n refreshMode: 'debounce',\n refreshRate: 100,\n });\n\n const option = useMemo(() => {\n const baseOption: EChartOption = {\n textStyle: { fontFamily: 'Noto Sans KR' },\n tooltip: { textStyle: { fontSize: 16 } },\n };\n return merge(baseOption, props.option);\n }, [props.option]);\n\n return (\n <div ref={ref} style={{ width: '100%', height: '100%' }}>\n <ReactECharts\n style={{ width, height }}\n theme={chartTheme}\n {...props}\n option={option}\n />\n </div>\n );\n}\n","{\n \"version\": 1,\n \"themeName\": \"customed\",\n \"theme\": {\n \"seriesCnt\": \"5\",\n \"backgroundColor\": \"rgba(0,0,0,0)\",\n \"titleColor\": \"#1c2024\",\n \"subtitleColor\": \"#8d8d8d\",\n \"textColorShow\": false,\n \"textColor\": \"#333\",\n \"markTextColor\": \"#ffffff\",\n \"color\": [\n \"#ffe629\",\n \"#3e63dd\",\n \"#ec9455\",\n \"#5bb98b\",\n \"#cb1d63\",\n \"#3ba272\",\n \"#fc8452\",\n \"#9a60b4\",\n \"#ea7ccc\"\n ],\n \"borderColor\": \"#8d8d8d\",\n \"borderWidth\": 0,\n \"visualMapColor\": [\"#bf444c\", \"#d88273\", \"#f6efa6\"],\n \"legendTextColor\": \"#1c2024\",\n \"kColor\": \"#eb5454\",\n \"kColor0\": \"#47b262\",\n \"kBorderColor\": \"#eb5454\",\n \"kBorderColor0\": \"#47b262\",\n \"kBorderWidth\": 1,\n \"lineWidth\": 2,\n \"symbolSize\": 4,\n \"symbol\": \"emptyCircle\",\n \"symbolBorderWidth\": 1,\n \"lineSmooth\": false,\n \"graphLineWidth\": 1,\n \"graphLineColor\": \"#aaa\",\n \"mapLabelColor\": \"#000\",\n \"mapLabelColorE\": \"rgb(100,0,0)\",\n \"mapBorderColor\": \"#444\",\n \"mapBorderColorE\": \"#444\",\n \"mapBorderWidth\": 0.5,\n \"mapBorderWidthE\": 1,\n \"mapAreaColor\": \"#eee\",\n \"mapAreaColorE\": \"rgba(255,215,0,0.8)\",\n \"axes\": [\n {\n \"type\": \"all\",\n \"name\": \"通用坐标轴\",\n \"axisLineShow\": true,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": true,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": true,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"category\",\n \"name\": \"类目坐标轴\",\n \"axisLineShow\": true,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": true,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": false,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"value\",\n \"name\": \"数值坐标轴\",\n \"axisLineShow\": false,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": false,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": true,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"log\",\n \"name\": \"对数坐标轴\",\n \"axisLineShow\": false,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": false,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": true,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n },\n {\n \"type\": \"time\",\n \"name\": \"时间坐标轴\",\n \"axisLineShow\": true,\n \"axisLineColor\": \"#6E7079\",\n \"axisTickShow\": true,\n \"axisTickColor\": \"#6E7079\",\n \"axisLabelShow\": true,\n \"axisLabelColor\": \"#6E7079\",\n \"splitLineShow\": false,\n \"splitLineColor\": [\"#E0E6F1\"],\n \"splitAreaShow\": false,\n \"splitAreaColor\": [\"rgba(250,250,250,0.2)\", \"rgba(210,219,238,0.2)\"]\n }\n ],\n \"axisSeperateSetting\": true,\n \"toolboxColor\": \"#8d8d8d\",\n \"toolboxEmphasisColor\": \"#1c2024\",\n \"tooltipAxisColor\": \"#cccccc\",\n \"tooltipAxisWidth\": 1,\n \"timelineLineColor\": \"#dae1f5\",\n \"timelineLineWidth\": 2,\n \"timelineItemColor\": \"#a4b1d7\",\n \"timelineItemColorE\": \"#ffffff\",\n \"timelineCheckColor\": \"#316bf3\",\n \"timelineCheckBorderColor\": \"#ffffff\",\n \"timelineItemBorderWidth\": 1,\n \"timelineControlColor\": \"#a4b1d7\",\n \"timelineControlBorderColor\": \"#a4b1d7\",\n \"timelineControlBorderWidth\": 1,\n \"timelineLabelColor\": \"#a4b1d7\"\n }\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import {
|
|
2
|
+
TriangleArrowDownIcon
|
|
3
|
+
} from "./chunk-BSTJBBEX.js";
|
|
4
|
+
import {
|
|
5
|
+
TriangleArrowUpIcon
|
|
6
|
+
} from "./chunk-NDUKDKGB.js";
|
|
7
|
+
import {
|
|
8
|
+
Row
|
|
9
|
+
} from "./chunk-PBPRWY2V.js";
|
|
10
|
+
import {
|
|
11
|
+
Typo
|
|
12
|
+
} from "./chunk-O3XTRD7R.js";
|
|
13
|
+
import {
|
|
14
|
+
Flex
|
|
15
|
+
} from "./chunk-25HMMI7R.js";
|
|
16
|
+
|
|
17
|
+
// src/molecules/expand-table/index.tsx
|
|
18
|
+
import {
|
|
19
|
+
flexRender,
|
|
20
|
+
getCoreRowModel,
|
|
21
|
+
useReactTable,
|
|
22
|
+
getSortedRowModel,
|
|
23
|
+
createColumnHelper
|
|
24
|
+
} from "@tanstack/react-table";
|
|
25
|
+
import { useMemo, useState } from "react";
|
|
26
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
27
|
+
function ExpandTable(props) {
|
|
28
|
+
const { data, columns, ExpandComp, placeholder, onRowClick } = props;
|
|
29
|
+
const [sorting, setSorting] = useState([]);
|
|
30
|
+
const { getRowModel, getHeaderGroups } = useReactTable({
|
|
31
|
+
data: data || [],
|
|
32
|
+
columns,
|
|
33
|
+
getCoreRowModel: getCoreRowModel(),
|
|
34
|
+
getSortedRowModel: getSortedRowModel(),
|
|
35
|
+
state: {
|
|
36
|
+
sorting
|
|
37
|
+
},
|
|
38
|
+
onSortingChange: setSorting
|
|
39
|
+
});
|
|
40
|
+
const gridColTemp = useMemo(() => {
|
|
41
|
+
return columns.map((col) => {
|
|
42
|
+
var _a;
|
|
43
|
+
if ((_a = col.meta) == null ? void 0 : _a.autoSize)
|
|
44
|
+
return "1fr";
|
|
45
|
+
return `${col.size || 150}px`;
|
|
46
|
+
}).join(" ");
|
|
47
|
+
}, [columns]);
|
|
48
|
+
const rowModels = getRowModel();
|
|
49
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
|
|
50
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
className: "tr",
|
|
54
|
+
style: { gridTemplateColumns: gridColTemp },
|
|
55
|
+
children: headerGroup.headers.map((header) => {
|
|
56
|
+
const sortable = header.column.getCanSort();
|
|
57
|
+
const sortedState = header.column.getIsSorted();
|
|
58
|
+
return /* @__PURE__ */ jsx("div", { className: "th", children: /* @__PURE__ */ jsxs(
|
|
59
|
+
"button",
|
|
60
|
+
{
|
|
61
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
62
|
+
style: sortable ? { cursor: "pointer" } : void 0,
|
|
63
|
+
type: "button",
|
|
64
|
+
children: [
|
|
65
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
|
|
66
|
+
header.column.columnDef.header,
|
|
67
|
+
header.getContext()
|
|
68
|
+
) }),
|
|
69
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
70
|
+
Flex,
|
|
71
|
+
{
|
|
72
|
+
direction: "column",
|
|
73
|
+
style: { marginLeft: "var(--space-2)" },
|
|
74
|
+
children: [
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
TriangleArrowUpIcon,
|
|
77
|
+
{
|
|
78
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
79
|
+
}
|
|
80
|
+
),
|
|
81
|
+
/* @__PURE__ */ jsx(
|
|
82
|
+
TriangleArrowDownIcon,
|
|
83
|
+
{
|
|
84
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
) : null
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
) }, header.id);
|
|
93
|
+
})
|
|
94
|
+
},
|
|
95
|
+
headerGroup.id
|
|
96
|
+
)) }),
|
|
97
|
+
/* @__PURE__ */ jsxs("div", { className: "tbody", children: [
|
|
98
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { color: "gray", mb: "6", mt: "6", variant: "body", children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
99
|
+
rowModels.rows.map((row) => {
|
|
100
|
+
return /* @__PURE__ */ jsx(
|
|
101
|
+
Row,
|
|
102
|
+
{
|
|
103
|
+
ExpandComp,
|
|
104
|
+
gridColTemp,
|
|
105
|
+
onRowClick,
|
|
106
|
+
row
|
|
107
|
+
},
|
|
108
|
+
`row_${row.id}`
|
|
109
|
+
);
|
|
110
|
+
})
|
|
111
|
+
] })
|
|
112
|
+
] });
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export {
|
|
116
|
+
createColumnHelper,
|
|
117
|
+
ExpandTable
|
|
118
|
+
};
|
|
119
|
+
//# sourceMappingURL=chunk-YBFIP7FD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/expand-table/index.tsx"],"sourcesContent":["import type { ColumnDef, SortingState, RowData } from '@tanstack/react-table';\nimport type { CSSProperties } from 'react';\nimport {\n flexRender,\n getCoreRowModel,\n useReactTable,\n getSortedRowModel,\n createColumnHelper,\n} from '@tanstack/react-table';\nimport React, { useMemo, useState } from 'react';\nimport { Flex, Typo } from '../../atoms';\nimport { TriangleArrowDownIcon } from '../../icons/down';\nimport { TriangleArrowUpIcon } from '../../icons/up';\nimport { Row, type ExpandComp, type OnRowClick } from './row';\n\nexport type { ExpandComp, OnRowClick, ColumnDef };\nexport { createColumnHelper };\n\nexport interface ExpandTableProps<Datum extends RowData> {\n /** 렌더할 데이터 배열 */\n data?: Datum[];\n /** 테이블 컬럼의 메타 데이터 */\n columns: ColumnDef<Datum>[];\n /** Row의 open이 true인 경우 하단의 collapse에 렌더할 컴포넌트 */\n ExpandComp?: ExpandComp<Datum>;\n /** 데이테가 없을 시 화면에 표시할 컴포넌트 */\n placeholder?: React.ReactNode;\n /** 행 클릭 시 실행할 콜백 */\n onRowClick?: OnRowClick<Datum>;\n rowStyle?: CSSProperties;\n}\n\nexport function ExpandTable<Datum extends RowData>(\n props: ExpandTableProps<Datum>\n): React.ReactNode {\n const { data, columns, ExpandComp, placeholder, onRowClick } = props;\n\n const [sorting, setSorting] = useState<SortingState>([]);\n const { getRowModel, getHeaderGroups } = useReactTable({\n data: data || [],\n columns,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n sorting,\n },\n onSortingChange: setSorting,\n });\n\n const gridColTemp = useMemo<string>(() => {\n return columns\n .map((col) => {\n if (col.meta?.autoSize) return '1fr';\n return `${col.size || 150}px`;\n })\n .join(' ');\n }, [columns]);\n\n const rowModels = getRowModel();\n\n return (\n <div className=\"expand-table\">\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div\n className=\"tr\"\n key={headerGroup.id}\n style={{ gridTemplateColumns: gridColTemp }}\n >\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n\n return (\n <div className=\"th\" key={header.id}>\n <button\n onClick={header.column.getToggleSortingHandler()}\n style={sortable ? { cursor: 'pointer' } : undefined}\n type=\"button\"\n >\n <Typo variant=\"body\">\n {flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n </Typo>\n {sortable ? (\n <Flex\n direction=\"column\"\n style={{ marginLeft: 'var(--space-2)' }}\n >\n <TriangleArrowUpIcon\n color={\n sortedState === 'asc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n <TriangleArrowDownIcon\n color={\n sortedState === 'desc'\n ? 'var(--iris-10)'\n : 'var(--iris-6)'\n }\n />\n </Flex>\n ) : null}\n </button>\n </div>\n );\n })}\n </div>\n ))}\n </div>\n <div className=\"tbody\">\n {/* 데이터가 없을 시 표시되는 노드 */}\n {rowModels.rows.length === 0 && (\n <div className=\"tr\" key=\"expand_placeholder\">\n <Flex align=\"center\" justify=\"center\">\n {placeholder || (\n <Typo color=\"gray\" mb=\"6\" mt=\"6\" variant=\"body\">\n 데이터가 없습니다\n </Typo>\n )}\n </Flex>\n </div>\n )}\n\n {/* 행을 렌더하는 로직 */}\n {rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\n gridColTemp={gridColTemp}\n key={`row_${row.id}`}\n onRowClick={onRowClick}\n row={row}\n />\n );\n })}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,SAAS,gBAAgB;AAuErB,cAOE,YAPF;AAhDb,SAAS,YACd,OACiB;AACjB,QAAM,EAAE,MAAM,SAAS,YAAY,aAAa,WAAW,IAAI;AAE/D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAuB,CAAC,CAAC;AACvD,QAAM,EAAE,aAAa,gBAAgB,IAAI,cAAc;AAAA,IACrD,MAAM,QAAQ,CAAC;AAAA,IACf;AAAA,IACA,iBAAiB,gBAAgB;AAAA,IACjC,mBAAmB,kBAAkB;AAAA,IACrC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,EACnB,CAAC;AAED,QAAM,cAAc,QAAgB,MAAM;AACxC,WAAO,QACJ,IAAI,CAAC,QAAQ;AAnDpB;AAoDQ,WAAI,SAAI,SAAJ,mBAAU;AAAU,eAAO;AAC/B,aAAO,GAAG,IAAI,QAAQ,GAAG;AAAA,IAC3B,CAAC,EACA,KAAK,GAAG;AAAA,EACb,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,YAAY,YAAY;AAE9B,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA,wBAAC,SAAI,WAAU,SACZ,0BAAgB,EAAE,IAAI,CAAC,gBACtB;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QAEV,OAAO,EAAE,qBAAqB,YAAY;AAAA,QAEzC,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACnC,gBAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,gBAAM,cAAc,OAAO,OAAO,YAAY;AAE9C,iBACE,oBAAC,SAAI,WAAU,MACb;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,OAAO,OAAO,wBAAwB;AAAA,cAC/C,OAAO,WAAW,EAAE,QAAQ,UAAU,IAAI;AAAA,cAC1C,MAAK;AAAA,cAEL;AAAA,oCAAC,QAAK,SAAQ,QACX;AAAA,kBACC,OAAO,OAAO,UAAU;AAAA,kBACxB,OAAO,WAAW;AAAA,gBACpB,GACF;AAAA,gBACC,WACC;AAAA,kBAAC;AAAA;AAAA,oBACC,WAAU;AAAA,oBACV,OAAO,EAAE,YAAY,iBAAiB;AAAA,oBAEtC;AAAA;AAAA,wBAAC;AAAA;AAAA,0BACC,OACE,gBAAgB,QACZ,mBACA;AAAA;AAAA,sBAER;AAAA,sBACA;AAAA,wBAAC;AAAA;AAAA,0BACC,OACE,gBAAgB,SACZ,mBACA;AAAA;AAAA,sBAER;AAAA;AAAA;AAAA,gBACF,IACE;AAAA;AAAA;AAAA,UACN,KAjCuB,OAAO,EAkChC;AAAA,QAEJ,CAAC;AAAA;AAAA,MA5CI,YAAY;AAAA,IA6CnB,CACD,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,SAEZ;AAAA,gBAAU,KAAK,WAAW,KACzB,oBAAC,SAAI,WAAU,MACb,8BAAC,QAAK,OAAM,UAAS,SAAQ,UAC1B,yBACC,oBAAC,QAAK,OAAM,QAAO,IAAG,KAAI,IAAG,KAAI,SAAQ,QAAO,+DAEhD,GAEJ,KAPsB,oBAQxB;AAAA,MAID,UAAU,KAAK,IAAI,CAAC,QAAQ;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK,OAAO,IAAI,EAAE;AAAA,QAGpB;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|