@tipp/ui 1.0.45 → 1.0.47
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/drawer.js +2 -2
- package/dist/atoms/field-error-wrapper.js +2 -2
- package/dist/atoms/index.js +54 -54
- package/dist/atoms/pagination.js +3 -3
- package/dist/charts/index.js +3 -3
- package/dist/chunk-27COZ7JE.js +123 -0
- package/dist/chunk-27COZ7JE.js.map +1 -0
- package/dist/chunk-3HCVB462.js +123 -0
- package/dist/chunk-3HCVB462.js.map +1 -0
- package/dist/chunk-3N6DZ5K5.js +72 -0
- package/dist/chunk-3N6DZ5K5.js.map +1 -0
- package/dist/chunk-7TKVFGWB.js +72 -0
- package/dist/chunk-7TKVFGWB.js.map +1 -0
- package/dist/chunk-ANDMT45Z.js +123 -0
- package/dist/chunk-ANDMT45Z.js.map +1 -0
- package/dist/chunk-AUICOKM7.js +123 -0
- package/dist/chunk-AUICOKM7.js.map +1 -0
- package/dist/chunk-BZTI5I3W.js +123 -0
- package/dist/chunk-BZTI5I3W.js.map +1 -0
- package/dist/chunk-FUSEDVWI.js +130 -0
- package/dist/chunk-FUSEDVWI.js.map +1 -0
- package/dist/chunk-GSYJMQZP.js +123 -0
- package/dist/chunk-GSYJMQZP.js.map +1 -0
- package/dist/chunk-HMHRKLU7.js +123 -0
- package/dist/chunk-HMHRKLU7.js.map +1 -0
- package/dist/chunk-IQ7JV3NX.js +72 -0
- package/dist/chunk-IQ7JV3NX.js.map +1 -0
- package/dist/chunk-IUT2HS6J.js +130 -0
- package/dist/chunk-IUT2HS6J.js.map +1 -0
- package/dist/chunk-JEQAAME2.js +123 -0
- package/dist/chunk-JEQAAME2.js.map +1 -0
- package/dist/chunk-R6BKHIPF.js +123 -0
- package/dist/chunk-R6BKHIPF.js.map +1 -0
- package/dist/chunk-RWVITRNU.js +123 -0
- package/dist/chunk-RWVITRNU.js.map +1 -0
- package/dist/chunk-TVXYMNVM.js +123 -0
- package/dist/chunk-TVXYMNVM.js.map +1 -0
- package/dist/chunk-UXJHGE4F.js +124 -0
- package/dist/chunk-UXJHGE4F.js.map +1 -0
- package/dist/chunk-VEUQBCIM.js +72 -0
- package/dist/chunk-VEUQBCIM.js.map +1 -0
- package/dist/chunk-W26QXSFH.js +124 -0
- package/dist/chunk-W26QXSFH.js.map +1 -0
- package/dist/chunk-WEY4HIWE.js +123 -0
- package/dist/chunk-WEY4HIWE.js.map +1 -0
- package/dist/chunk-ZNZU4IY4.js +123 -0
- package/dist/chunk-ZNZU4IY4.js.map +1 -0
- package/dist/index.cjs +11 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +24 -13
- package/dist/index.css.map +1 -1
- package/dist/index.js +71 -71
- package/dist/molecules/date-picker/index.js +2 -2
- package/dist/molecules/expand-table/index.cjs +11 -5
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +27 -27
- package/dist/molecules/expand-table/row.cjs +6 -4
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.d.cts +1 -0
- package/dist/molecules/expand-table/row.d.ts +1 -0
- package/dist/molecules/expand-table/row.js +24 -24
- package/dist/molecules/index.cjs +11 -5
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +29 -29
- package/dist/molecules/navigation.js +24 -24
- package/dist/types/react-table.d.cjs.map +1 -1
- package/dist/types/react-table.d.d.cts +2 -0
- package/dist/types/react-table.d.d.ts +2 -0
- package/dist/types/react-table.d.js.map +1 -1
- package/package.json +1 -1
- package/src/molecules/expand-table/index.tsx +5 -2
- package/src/molecules/expand-table/row.tsx +6 -2
- package/src/types/react-table.d.ts +2 -0
package/dist/index.js
CHANGED
|
@@ -1,31 +1,41 @@
|
|
|
1
|
-
import {
|
|
2
|
-
useThemeContext
|
|
3
|
-
} from "./chunk-MMGP4GEQ.js";
|
|
4
|
-
import {
|
|
5
|
-
uiProps
|
|
6
|
-
} from "./chunk-NVKNDAIN.js";
|
|
7
1
|
import "./chunk-PSINRHYW.js";
|
|
8
|
-
import {
|
|
9
|
-
EchartDefaultProps
|
|
10
|
-
} from "./chunk-2QFSCWES.js";
|
|
11
2
|
import {
|
|
12
3
|
HorizontalBarChart
|
|
13
4
|
} from "./chunk-SGMO4KBC.js";
|
|
14
5
|
import "./chunk-KHHXN3CH.js";
|
|
15
6
|
import {
|
|
16
7
|
Navigation
|
|
17
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-7A7J457W.js";
|
|
9
|
+
import {
|
|
10
|
+
uiProps
|
|
11
|
+
} from "./chunk-NVKNDAIN.js";
|
|
18
12
|
import {
|
|
19
13
|
DatePicker
|
|
20
|
-
} from "./chunk-
|
|
14
|
+
} from "./chunk-G4FN6FJG.js";
|
|
21
15
|
import {
|
|
22
16
|
ExpandTable,
|
|
23
17
|
createColumnHelper
|
|
24
|
-
} from "./chunk-
|
|
25
|
-
import "./chunk-
|
|
26
|
-
import
|
|
27
|
-
|
|
18
|
+
} from "./chunk-TVXYMNVM.js";
|
|
19
|
+
import "./chunk-7TKVFGWB.js";
|
|
20
|
+
import {
|
|
21
|
+
useThemeContext
|
|
22
|
+
} from "./chunk-MMGP4GEQ.js";
|
|
23
|
+
import {
|
|
24
|
+
EchartDefaultProps
|
|
25
|
+
} from "./chunk-2QFSCWES.js";
|
|
28
26
|
import "./chunk-2ANGYYEV.js";
|
|
27
|
+
import {
|
|
28
|
+
TextField
|
|
29
|
+
} from "./chunk-JPIZP2PZ.js";
|
|
30
|
+
import {
|
|
31
|
+
Separator
|
|
32
|
+
} from "./chunk-HYITAA4J.js";
|
|
33
|
+
import {
|
|
34
|
+
Skeleton
|
|
35
|
+
} from "./chunk-5H3YPCZK.js";
|
|
36
|
+
import {
|
|
37
|
+
Spinner
|
|
38
|
+
} from "./chunk-FR2GDOU2.js";
|
|
29
39
|
import {
|
|
30
40
|
Strong
|
|
31
41
|
} from "./chunk-74DX4CU7.js";
|
|
@@ -42,8 +52,14 @@ import {
|
|
|
42
52
|
TextArea
|
|
43
53
|
} from "./chunk-ILRUXI2E.js";
|
|
44
54
|
import {
|
|
45
|
-
|
|
46
|
-
} from "./chunk-
|
|
55
|
+
Quote
|
|
56
|
+
} from "./chunk-YO3BQW6S.js";
|
|
57
|
+
import {
|
|
58
|
+
RadioCards
|
|
59
|
+
} from "./chunk-6IVCARWS.js";
|
|
60
|
+
import {
|
|
61
|
+
RadioGroup
|
|
62
|
+
} from "./chunk-6DJOIRMF.js";
|
|
47
63
|
import {
|
|
48
64
|
Radio
|
|
49
65
|
} from "./chunk-FPD73OHW.js";
|
|
@@ -60,14 +76,8 @@ import {
|
|
|
60
76
|
Select
|
|
61
77
|
} from "./chunk-3JRNKBMN.js";
|
|
62
78
|
import {
|
|
63
|
-
|
|
64
|
-
} from "./chunk-
|
|
65
|
-
import {
|
|
66
|
-
Skeleton
|
|
67
|
-
} from "./chunk-5H3YPCZK.js";
|
|
68
|
-
import {
|
|
69
|
-
Spinner
|
|
70
|
-
} from "./chunk-FR2GDOU2.js";
|
|
79
|
+
Inset
|
|
80
|
+
} from "./chunk-XQOL7UBI.js";
|
|
71
81
|
import {
|
|
72
82
|
Kbd
|
|
73
83
|
} from "./chunk-TULWX7D6.js";
|
|
@@ -76,7 +86,7 @@ import {
|
|
|
76
86
|
} from "./chunk-XQOZWYUA.js";
|
|
77
87
|
import {
|
|
78
88
|
Pagination
|
|
79
|
-
} from "./chunk-
|
|
89
|
+
} from "./chunk-HXJPG3ZO.js";
|
|
80
90
|
import {
|
|
81
91
|
Popover
|
|
82
92
|
} from "./chunk-5AVBYDPB.js";
|
|
@@ -84,14 +94,23 @@ import {
|
|
|
84
94
|
Progress
|
|
85
95
|
} from "./chunk-365QMK4D.js";
|
|
86
96
|
import {
|
|
87
|
-
|
|
88
|
-
} from "./chunk-
|
|
97
|
+
EllipsisTooltip
|
|
98
|
+
} from "./chunk-4IKPNQV5.js";
|
|
89
99
|
import {
|
|
90
|
-
|
|
91
|
-
} from "./chunk-
|
|
100
|
+
Tooltip
|
|
101
|
+
} from "./chunk-ACVANQJ4.js";
|
|
92
102
|
import {
|
|
93
|
-
|
|
94
|
-
} from "./chunk-
|
|
103
|
+
Em
|
|
104
|
+
} from "./chunk-2DZ2Y3JI.js";
|
|
105
|
+
import {
|
|
106
|
+
FieldErrorWrapper
|
|
107
|
+
} from "./chunk-CNQ7RNNY.js";
|
|
108
|
+
import {
|
|
109
|
+
Typo
|
|
110
|
+
} from "./chunk-O3XTRD7R.js";
|
|
111
|
+
import {
|
|
112
|
+
Flex
|
|
113
|
+
} from "./chunk-25HMMI7R.js";
|
|
95
114
|
import {
|
|
96
115
|
Form
|
|
97
116
|
} from "./chunk-2CVXGGI5.js";
|
|
@@ -105,8 +124,14 @@ import {
|
|
|
105
124
|
HoverCard
|
|
106
125
|
} from "./chunk-O3T3TM3V.js";
|
|
107
126
|
import {
|
|
108
|
-
|
|
109
|
-
} from "./chunk-
|
|
127
|
+
Checkbox
|
|
128
|
+
} from "./chunk-JEHDCZQU.js";
|
|
129
|
+
import {
|
|
130
|
+
Code
|
|
131
|
+
} from "./chunk-OHMOP5PV.js";
|
|
132
|
+
import {
|
|
133
|
+
Collapse
|
|
134
|
+
} from "./chunk-KGLIAFTI.js";
|
|
110
135
|
import {
|
|
111
136
|
Container
|
|
112
137
|
} from "./chunk-Q37G2GS6.js";
|
|
@@ -121,14 +146,14 @@ import {
|
|
|
121
146
|
Drawer,
|
|
122
147
|
Root,
|
|
123
148
|
Trigger
|
|
124
|
-
} from "./chunk-
|
|
125
|
-
import {
|
|
126
|
-
ThemeProvider
|
|
127
|
-
} from "./chunk-BVBX6IJ3.js";
|
|
149
|
+
} from "./chunk-ONYSO7Y2.js";
|
|
128
150
|
import {
|
|
129
151
|
ToastContainer,
|
|
130
152
|
toast
|
|
131
153
|
} from "./chunk-NJ2U2TVS.js";
|
|
154
|
+
import {
|
|
155
|
+
ThemeProvider
|
|
156
|
+
} from "./chunk-BVBX6IJ3.js";
|
|
132
157
|
import {
|
|
133
158
|
IconButton
|
|
134
159
|
} from "./chunk-O3DNDMV3.js";
|
|
@@ -136,23 +161,14 @@ import {
|
|
|
136
161
|
DropdownMenu
|
|
137
162
|
} from "./chunk-4WFMOFN2.js";
|
|
138
163
|
import {
|
|
139
|
-
|
|
140
|
-
} from "./chunk-
|
|
141
|
-
import {
|
|
142
|
-
Tooltip
|
|
143
|
-
} from "./chunk-ACVANQJ4.js";
|
|
144
|
-
import {
|
|
145
|
-
Em
|
|
146
|
-
} from "./chunk-2DZ2Y3JI.js";
|
|
147
|
-
import {
|
|
148
|
-
FieldErrorWrapper
|
|
149
|
-
} from "./chunk-CHHLIPDN.js";
|
|
164
|
+
Badge
|
|
165
|
+
} from "./chunk-ALOPZ54P.js";
|
|
150
166
|
import {
|
|
151
|
-
|
|
152
|
-
} from "./chunk-
|
|
167
|
+
Blockquote
|
|
168
|
+
} from "./chunk-YGL6SWKN.js";
|
|
153
169
|
import {
|
|
154
|
-
|
|
155
|
-
} from "./chunk-
|
|
170
|
+
Box
|
|
171
|
+
} from "./chunk-4Y5BEXVN.js";
|
|
156
172
|
import {
|
|
157
173
|
Button
|
|
158
174
|
} from "./chunk-AQX7DQLI.js";
|
|
@@ -168,15 +184,6 @@ import {
|
|
|
168
184
|
import {
|
|
169
185
|
CheckboxGroup
|
|
170
186
|
} from "./chunk-IQEEPHOY.js";
|
|
171
|
-
import {
|
|
172
|
-
Checkbox
|
|
173
|
-
} from "./chunk-JEHDCZQU.js";
|
|
174
|
-
import {
|
|
175
|
-
Code
|
|
176
|
-
} from "./chunk-OHMOP5PV.js";
|
|
177
|
-
import {
|
|
178
|
-
Collapse
|
|
179
|
-
} from "./chunk-KGLIAFTI.js";
|
|
180
187
|
import {
|
|
181
188
|
BarChartIcon,
|
|
182
189
|
BookmarkFilledIcon,
|
|
@@ -205,6 +212,8 @@ import {
|
|
|
205
212
|
PlusIcon,
|
|
206
213
|
TrashIcon
|
|
207
214
|
} from "./chunk-TSVWEPRP.js";
|
|
215
|
+
import "./chunk-BSTJBBEX.js";
|
|
216
|
+
import "./chunk-NDUKDKGB.js";
|
|
208
217
|
import {
|
|
209
218
|
AlertDialog
|
|
210
219
|
} from "./chunk-J242TTFH.js";
|
|
@@ -214,15 +223,6 @@ import {
|
|
|
214
223
|
import {
|
|
215
224
|
Avatar
|
|
216
225
|
} from "./chunk-CZEGRZBK.js";
|
|
217
|
-
import {
|
|
218
|
-
Badge
|
|
219
|
-
} from "./chunk-ALOPZ54P.js";
|
|
220
|
-
import {
|
|
221
|
-
Blockquote
|
|
222
|
-
} from "./chunk-YGL6SWKN.js";
|
|
223
|
-
import {
|
|
224
|
-
Box
|
|
225
|
-
} from "./chunk-4Y5BEXVN.js";
|
|
226
226
|
import "./chunk-N552FDTV.js";
|
|
227
227
|
export {
|
|
228
228
|
AlertDialog,
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
DatePicker
|
|
3
|
-
} from "../../chunk-
|
|
3
|
+
} from "../../chunk-G4FN6FJG.js";
|
|
4
|
+
import "../../chunk-25HMMI7R.js";
|
|
4
5
|
import "../../chunk-HLOY6BIP.js";
|
|
5
6
|
import "../../chunk-O3DNDMV3.js";
|
|
6
|
-
import "../../chunk-25HMMI7R.js";
|
|
7
7
|
import "../../chunk-TSVWEPRP.js";
|
|
8
8
|
import "../../chunk-N552FDTV.js";
|
|
9
9
|
export {
|
|
@@ -199,19 +199,21 @@ function Row(props) {
|
|
|
199
199
|
style: { gridTemplateColumns: gridColTemp },
|
|
200
200
|
type: "button",
|
|
201
201
|
children: row.getVisibleCells().map((cell) => {
|
|
202
|
-
var _a, _b;
|
|
202
|
+
var _a, _b, _c;
|
|
203
203
|
const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
|
|
204
|
+
const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
|
|
204
205
|
return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
|
|
205
206
|
"div",
|
|
206
207
|
{
|
|
207
208
|
className: "td",
|
|
208
209
|
style: {
|
|
209
|
-
|
|
210
|
-
flexGrow: autoSize ? 1 : void 0
|
|
210
|
+
// width: autoSize ? undefined : cell.column.getSize(),
|
|
211
|
+
flexGrow: autoSize ? 1 : void 0,
|
|
212
|
+
justifyContent
|
|
211
213
|
},
|
|
212
214
|
children: [
|
|
213
215
|
(0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
|
|
214
|
-
((
|
|
216
|
+
((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
215
217
|
cell.column.columnDef.meta.OpenBtn,
|
|
216
218
|
{
|
|
217
219
|
data: row.original,
|
|
@@ -238,6 +240,7 @@ function Row(props) {
|
|
|
238
240
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
239
241
|
function ExpandTable(props) {
|
|
240
242
|
const { data, columns, ExpandComp, placeholder, onRowClick } = props;
|
|
243
|
+
const defaultAlign = "left";
|
|
241
244
|
const [sorting, setSorting] = (0, import_react4.useState)([]);
|
|
242
245
|
const { getRowModel, getHeaderGroups } = (0, import_react_table2.useReactTable)({
|
|
243
246
|
data: data || [],
|
|
@@ -265,9 +268,11 @@ function ExpandTable(props) {
|
|
|
265
268
|
className: "tr",
|
|
266
269
|
style: { gridTemplateColumns: gridColTemp },
|
|
267
270
|
children: headerGroup.headers.map((header) => {
|
|
271
|
+
var _a;
|
|
268
272
|
const sortable = header.column.getCanSort();
|
|
269
273
|
const sortedState = header.column.getIsSorted();
|
|
270
|
-
|
|
274
|
+
const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
|
|
275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
|
|
271
276
|
"button",
|
|
272
277
|
{
|
|
273
278
|
onClick: header.column.getToggleSortingHandler(),
|
|
@@ -313,6 +318,7 @@ function ExpandTable(props) {
|
|
|
313
318
|
Row,
|
|
314
319
|
{
|
|
315
320
|
ExpandComp,
|
|
321
|
+
defaultAlign,
|
|
316
322
|
gridColTemp,
|
|
317
323
|
onRowClick,
|
|
318
324
|
row
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecules/expand-table/index.tsx","../../../src/atoms/flex.tsx","../../../src/atoms/typo.tsx","../../../src/atoms/collapse.tsx","../../../src/icons/down.tsx","../../../src/icons/up.tsx","../../../src/molecules/expand-table/row.tsx"],"sourcesContent":["import type {\n ColumnDef,\n SortingState,\n RowData,\n Row as RowType,\n} 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, RowType as Row };\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","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n switch (variant) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowDownIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowDownIcon.displayName = 'ArrowDownIcon';\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowUpIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowUpIcon.displayName = 'ArrowUpIcon';\n","import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n minWidth: autoSize ? undefined : cell.column.getSize(),\n flexGrow: autoSize ? 1 : undefined,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {cell.column.columnDef.meta?.OpenBtn ? (\n <cell.column.columnDef.meta.OpenBtn\n data={row.original}\n open={open}\n setIsOpen={setOpen}\n />\n ) : null}\n </div>\n );\n })}\n </button>\n {ExpandComp ? (\n <Collapse open={open} >\n <div className=\"expand-comp-wrapper\">\n <ExpandComp row={row} />\n </div>\n </Collapse>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":["import_react_table","import_react","import_themes","RadixText","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/molecules/expand-table/index.tsx","../../../src/atoms/flex.tsx","../../../src/atoms/typo.tsx","../../../src/atoms/collapse.tsx","../../../src/icons/down.tsx","../../../src/icons/up.tsx","../../../src/molecules/expand-table/row.tsx"],"sourcesContent":["import type {\n ColumnDef,\n SortingState,\n RowData,\n Row as RowType,\n} 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, RowType as Row };\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 const defaultAlign = 'left';\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 const justifyContent =\n header.column.columnDef.meta?.align || defaultAlign;\n\n return (\n <div className={`${justifyContent} 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 defaultAlign={defaultAlign}\n gridColTemp={gridColTemp}\n key={`row_${row.id}`}\n onRowClick={onRowClick}\n row={row}\n />\n );\n })}\n </div>\n </div>\n );\n}\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import type { TextProps as RadixTextProps } from '@radix-ui/themes';\nimport { Text as RadixText } from '@radix-ui/themes';\nimport React, { useMemo, forwardRef } from 'react';\n\nexport type TypoProps = RadixTextProps & {\n variant?: 'body' | 'caption' | 'subtitle';\n};\n\nexport const Typo = forwardRef<HTMLSpanElement, TypoProps>(\n (props: TypoProps, ref): React.ReactNode => {\n const { size, variant, children, ...rest } = props;\n\n const radixSize = useMemo<RadixTextProps['size']>(() => {\n if (size !== undefined) return size;\n switch (variant) {\n case 'caption':\n return '1';\n case 'subtitle':\n return '3';\n case 'body':\n default:\n return '2';\n }\n }, [size, variant]);\n\n return (\n <RadixText {...rest} ref={ref} size={radixSize}>\n {children}\n </RadixText>\n );\n }\n);\n\nTypo.displayName = 'Typo';\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowDownIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowDownIcon.displayName = 'ArrowDownIcon';\n","import * as React from 'react';\nimport type { IconProps } from './types';\n\nexport const TriangleArrowUpIcon = React.forwardRef<SVGSVGElement, IconProps>(\n ({ color = 'currentColor', ...props }, forwardedRef) => {\n return (\n <svg\n fill=\"none\"\n height=\"7\"\n viewBox=\"0 0 8 7\"\n width=\"8\"\n xmlns=\"http://www.w3.org/2000/svg\"\n {...props}\n ref={forwardedRef}\n >\n <path\n d=\"M0.891555 6.1875L7.10845 6.1875C7.80261 6.1875 8.1771 5.37328 7.72534 4.84623L4.6169 1.21971C4.29263 0.841403 3.70737 0.841403 3.3831 1.21971L0.274659 4.84623C-0.177095 5.37328 0.197393 6.1875 0.891555 6.1875Z\"\n fill={color}\n />\n </svg>\n );\n }\n);\n\nTriangleArrowUpIcon.displayName = 'ArrowUpIcon';\n","import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n defaultAlign: 'left' | 'right' | 'center';\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n const justifyContent =\n cell.column.columnDef.meta?.align || props.defaultAlign;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n // width: autoSize ? undefined : cell.column.getSize(),\n flexGrow: autoSize ? 1 : undefined,\n justifyContent,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {cell.column.columnDef.meta?.OpenBtn ? (\n <cell.column.columnDef.meta.OpenBtn\n data={row.original}\n open={open}\n setIsOpen={setOpen}\n />\n ) : null}\n </div>\n );\n })}\n </button>\n {ExpandComp ? (\n <Collapse open={open}>\n <div className=\"expand-comp-wrapper\">\n <ExpandComp row={row} />\n </div>\n </Collapse>\n ) : null}\n </div>\n );\n}\n"],"mappings":"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","names":["import_react_table","import_react","import_themes","RadixText","import_react","import_jsx_runtime","React","import_jsx_runtime","React","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -1,67 +1,67 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ExpandTable,
|
|
3
3
|
createColumnHelper
|
|
4
|
-
} from "../../chunk-
|
|
5
|
-
import "../../chunk-
|
|
6
|
-
import "../../chunk-BSTJBBEX.js";
|
|
7
|
-
import "../../chunk-NDUKDKGB.js";
|
|
4
|
+
} from "../../chunk-TVXYMNVM.js";
|
|
5
|
+
import "../../chunk-7TKVFGWB.js";
|
|
8
6
|
import "../../chunk-2ANGYYEV.js";
|
|
7
|
+
import "../../chunk-JPIZP2PZ.js";
|
|
8
|
+
import "../../chunk-HYITAA4J.js";
|
|
9
|
+
import "../../chunk-5H3YPCZK.js";
|
|
10
|
+
import "../../chunk-FR2GDOU2.js";
|
|
9
11
|
import "../../chunk-74DX4CU7.js";
|
|
10
12
|
import "../../chunk-OYM4XCHQ.js";
|
|
11
13
|
import "../../chunk-YJ7ZFOYL.js";
|
|
12
14
|
import "../../chunk-5ZITU5L7.js";
|
|
13
15
|
import "../../chunk-ILRUXI2E.js";
|
|
14
|
-
import "../../chunk-
|
|
16
|
+
import "../../chunk-YO3BQW6S.js";
|
|
17
|
+
import "../../chunk-6IVCARWS.js";
|
|
18
|
+
import "../../chunk-6DJOIRMF.js";
|
|
15
19
|
import "../../chunk-FPD73OHW.js";
|
|
16
20
|
import "../../chunk-ZKZDVS7G.js";
|
|
17
21
|
import "../../chunk-MUNMDHRF.js";
|
|
18
22
|
import "../../chunk-TVDKGMBI.js";
|
|
19
23
|
import "../../chunk-3JRNKBMN.js";
|
|
20
|
-
import "../../chunk-
|
|
21
|
-
import "../../chunk-5H3YPCZK.js";
|
|
22
|
-
import "../../chunk-FR2GDOU2.js";
|
|
24
|
+
import "../../chunk-XQOL7UBI.js";
|
|
23
25
|
import "../../chunk-TULWX7D6.js";
|
|
24
26
|
import "../../chunk-XQOZWYUA.js";
|
|
25
|
-
import "../../chunk-
|
|
27
|
+
import "../../chunk-HXJPG3ZO.js";
|
|
26
28
|
import "../../chunk-5AVBYDPB.js";
|
|
27
29
|
import "../../chunk-365QMK4D.js";
|
|
28
|
-
import "../../chunk-
|
|
29
|
-
import "../../chunk-
|
|
30
|
-
import "../../chunk-
|
|
30
|
+
import "../../chunk-4IKPNQV5.js";
|
|
31
|
+
import "../../chunk-ACVANQJ4.js";
|
|
32
|
+
import "../../chunk-2DZ2Y3JI.js";
|
|
33
|
+
import "../../chunk-CNQ7RNNY.js";
|
|
34
|
+
import "../../chunk-O3XTRD7R.js";
|
|
35
|
+
import "../../chunk-25HMMI7R.js";
|
|
31
36
|
import "../../chunk-2CVXGGI5.js";
|
|
32
37
|
import "../../chunk-EGEQY3KT.js";
|
|
33
38
|
import "../../chunk-HLOY6BIP.js";
|
|
34
39
|
import "../../chunk-O3T3TM3V.js";
|
|
35
|
-
import "../../chunk-
|
|
40
|
+
import "../../chunk-JEHDCZQU.js";
|
|
41
|
+
import "../../chunk-OHMOP5PV.js";
|
|
42
|
+
import "../../chunk-KGLIAFTI.js";
|
|
36
43
|
import "../../chunk-Q37G2GS6.js";
|
|
37
44
|
import "../../chunk-VTJZMOSP.js";
|
|
38
45
|
import "../../chunk-P6B2PNYI.js";
|
|
39
|
-
import "../../chunk-
|
|
40
|
-
import "../../chunk-BVBX6IJ3.js";
|
|
46
|
+
import "../../chunk-ONYSO7Y2.js";
|
|
41
47
|
import "../../chunk-NJ2U2TVS.js";
|
|
48
|
+
import "../../chunk-BVBX6IJ3.js";
|
|
42
49
|
import "../../chunk-O3DNDMV3.js";
|
|
43
50
|
import "../../chunk-4WFMOFN2.js";
|
|
44
|
-
import "../../chunk-
|
|
45
|
-
import "../../chunk-
|
|
46
|
-
import "../../chunk-
|
|
47
|
-
import "../../chunk-CHHLIPDN.js";
|
|
48
|
-
import "../../chunk-25HMMI7R.js";
|
|
49
|
-
import "../../chunk-O3XTRD7R.js";
|
|
51
|
+
import "../../chunk-ALOPZ54P.js";
|
|
52
|
+
import "../../chunk-YGL6SWKN.js";
|
|
53
|
+
import "../../chunk-4Y5BEXVN.js";
|
|
50
54
|
import "../../chunk-AQX7DQLI.js";
|
|
51
55
|
import "../../chunk-B6XJN6EC.js";
|
|
52
56
|
import "../../chunk-CAIVA7UA.js";
|
|
53
57
|
import "../../chunk-MIMJ7LON.js";
|
|
54
58
|
import "../../chunk-IQEEPHOY.js";
|
|
55
|
-
import "../../chunk-JEHDCZQU.js";
|
|
56
|
-
import "../../chunk-OHMOP5PV.js";
|
|
57
|
-
import "../../chunk-KGLIAFTI.js";
|
|
58
59
|
import "../../chunk-TSVWEPRP.js";
|
|
60
|
+
import "../../chunk-BSTJBBEX.js";
|
|
61
|
+
import "../../chunk-NDUKDKGB.js";
|
|
59
62
|
import "../../chunk-J242TTFH.js";
|
|
60
63
|
import "../../chunk-EAXUQEO5.js";
|
|
61
64
|
import "../../chunk-CZEGRZBK.js";
|
|
62
|
-
import "../../chunk-ALOPZ54P.js";
|
|
63
|
-
import "../../chunk-YGL6SWKN.js";
|
|
64
|
-
import "../../chunk-4Y5BEXVN.js";
|
|
65
65
|
import "../../chunk-N552FDTV.js";
|
|
66
66
|
export {
|
|
67
67
|
ExpandTable,
|
|
@@ -71,19 +71,21 @@ function Row(props) {
|
|
|
71
71
|
style: { gridTemplateColumns: gridColTemp },
|
|
72
72
|
type: "button",
|
|
73
73
|
children: row.getVisibleCells().map((cell) => {
|
|
74
|
-
var _a, _b;
|
|
74
|
+
var _a, _b, _c;
|
|
75
75
|
const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
|
|
76
|
+
const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
|
|
76
77
|
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
77
78
|
"div",
|
|
78
79
|
{
|
|
79
80
|
className: "td",
|
|
80
81
|
style: {
|
|
81
|
-
|
|
82
|
-
flexGrow: autoSize ? 1 : void 0
|
|
82
|
+
// width: autoSize ? undefined : cell.column.getSize(),
|
|
83
|
+
flexGrow: autoSize ? 1 : void 0,
|
|
84
|
+
justifyContent
|
|
83
85
|
},
|
|
84
86
|
children: [
|
|
85
87
|
(0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
|
|
86
|
-
((
|
|
88
|
+
((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
87
89
|
cell.column.columnDef.meta.OpenBtn,
|
|
88
90
|
{
|
|
89
91
|
data: row.original,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecules/expand-table/row.tsx","../../../src/atoms/collapse.tsx"],"sourcesContent":["import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n
|
|
1
|
+
{"version":3,"sources":["../../../src/molecules/expand-table/row.tsx","../../../src/atoms/collapse.tsx"],"sourcesContent":["import {\n type Row as TanstackRow,\n type RowData,\n flexRender,\n} from '@tanstack/react-table';\nimport React, { useCallback, useState } from 'react';\nimport { Collapse } from '../../atoms';\n\nexport type ExpandComp<Datum> = React.FC<{ row: TanstackRow<Datum> }>;\nexport type OnRowClick<Datum> = (data: Datum) => void;\n\ninterface RowProps<Datum extends RowData> {\n row: TanstackRow<Datum>;\n ExpandComp?: ExpandComp<Datum>;\n onRowClick?: OnRowClick<Datum>;\n gridColTemp: string;\n defaultAlign: 'left' | 'right' | 'center';\n}\n\nexport function Row<Datum extends RowData>(\n props: RowProps<Datum>\n): React.ReactNode {\n const { row, ExpandComp, gridColTemp } = props;\n const [open, setOpen] = useState(false);\n\n const onClickRow = useCallback(() => {\n props.onRowClick?.(row.original);\n setOpen((prev) => !prev);\n }, [props, row.original]);\n\n return (\n <div\n className={`tr-wrapper ${ExpandComp ? 'expandable' : ''}`}\n key={`tr-wrapper_${row.id}`}\n >\n <button\n className=\"tr\"\n key={`tr_${row.id}`}\n onClick={onClickRow}\n style={{ gridTemplateColumns: gridColTemp }}\n type=\"button\"\n >\n {row.getVisibleCells().map((cell) => {\n const autoSize = cell.column.columnDef.meta?.autoSize;\n const justifyContent =\n cell.column.columnDef.meta?.align || props.defaultAlign;\n\n return (\n <div\n className=\"td\"\n key={cell.id}\n style={{\n // width: autoSize ? undefined : cell.column.getSize(),\n flexGrow: autoSize ? 1 : undefined,\n justifyContent,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n {cell.column.columnDef.meta?.OpenBtn ? (\n <cell.column.columnDef.meta.OpenBtn\n data={row.original}\n open={open}\n setIsOpen={setOpen}\n />\n ) : null}\n </div>\n );\n })}\n </button>\n {ExpandComp ? (\n <Collapse open={open}>\n <div className=\"expand-comp-wrapper\">\n <ExpandComp row={row} />\n </div>\n </Collapse>\n ) : null}\n </div>\n );\n}\n","import React, { useEffect, useRef, useState } from 'react';\n\nexport interface CollapseProps {\n children: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n /** 닫힘 상태일 때 높이 값이 필요할 시 사용 */\n closedHeight?: string;\n}\n\nexport function Collapse(props: CollapseProps): React.ReactNode {\n const { children, closedHeight = '0' } = props;\n const [open, setOpen] = useState(() => {\n return props.open || props.defaultOpen || false;\n });\n\n useEffect(() => {\n if (props.open === undefined) return;\n setOpen(props.open);\n }, [props.open]);\n\n const ref = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!ref.current) return;\n ref.current.style.maxHeight = open\n ? `${ref.current.scrollHeight}px`\n : closedHeight;\n }, [closedHeight, open]);\n\n return (\n <div className=\"collapse\" ref={ref}>\n {children}\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAIO;AACP,IAAAA,gBAA6C;;;ACL7C,mBAAmD;AA+B/C;AArBG,SAAS,SAAS,OAAuC;AAC9D,QAAM,EAAE,UAAU,eAAe,IAAI,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,MAAM;AACrC,WAAO,MAAM,QAAQ,MAAM,eAAe;AAAA,EAC5C,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,MAAM,SAAS;AAAW;AAC9B,YAAQ,MAAM,IAAI;AAAA,EACpB,GAAG,CAAC,MAAM,IAAI,CAAC;AAEf,QAAM,UAAM,qBAAuB,IAAI;AAEvC,8BAAU,MAAM;AACd,QAAI,CAAC,IAAI;AAAS;AAClB,QAAI,QAAQ,MAAM,YAAY,OAC1B,GAAG,IAAI,QAAQ,YAAY,OAC3B;AAAA,EACN,GAAG,CAAC,cAAc,IAAI,CAAC;AAEvB,SACE,4CAAC,SAAI,WAAU,YAAW,KACvB,UACH;AAEJ;;;ADaY,IAAAC,sBAAA;AA7BL,SAAS,IACd,OACiB;AACjB,QAAM,EAAE,KAAK,YAAY,YAAY,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAS,KAAK;AAEtC,QAAM,iBAAa,2BAAY,MAAM;AAzBvC;AA0BI,gBAAM,eAAN,+BAAmB,IAAI;AACvB,YAAQ,CAAC,SAAS,CAAC,IAAI;AAAA,EACzB,GAAG,CAAC,OAAO,IAAI,QAAQ,CAAC;AAExB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,cAAc,aAAa,eAAe,EAAE;AAAA,MAGvD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YAEV,SAAS;AAAA,YACT,OAAO,EAAE,qBAAqB,YAAY;AAAA,YAC1C,MAAK;AAAA,YAEJ,cAAI,gBAAgB,EAAE,IAAI,CAAC,SAAS;AA1C7C;AA2CU,oBAAM,YAAW,UAAK,OAAO,UAAU,SAAtB,mBAA4B;AAC7C,oBAAM,mBACJ,UAAK,OAAO,UAAU,SAAtB,mBAA4B,UAAS,MAAM;AAE7C,qBACE;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBAEV,OAAO;AAAA;AAAA,oBAEL,UAAU,WAAW,IAAI;AAAA,oBACzB;AAAA,kBACF;AAAA,kBAEC;AAAA,uDAAW,KAAK,OAAO,UAAU,MAAM,KAAK,WAAW,CAAC;AAAA,sBACxD,UAAK,OAAO,UAAU,SAAtB,mBAA4B,WAC3B;AAAA,sBAAC,KAAK,OAAO,UAAU,KAAK;AAAA,sBAA3B;AAAA,wBACC,MAAM,IAAI;AAAA,wBACV;AAAA,wBACA,WAAW;AAAA;AAAA,oBACb,IACE;AAAA;AAAA;AAAA,gBAdC,KAAK;AAAA,cAeZ;AAAA,YAEJ,CAAC;AAAA;AAAA,UA9BI,MAAM,IAAI,EAAE;AAAA,QA+BnB;AAAA,QACC,aACC,6CAAC,YAAS,MACR,uDAAC,SAAI,WAAU,uBACb,uDAAC,cAAW,KAAU,GACxB,GACF,IACE;AAAA;AAAA;AAAA,IA1CC,cAAc,IAAI,EAAE;AAAA,EA2C3B;AAEJ;","names":["import_react","import_jsx_runtime"]}
|
|
@@ -10,6 +10,7 @@ interface RowProps<Datum extends RowData> {
|
|
|
10
10
|
ExpandComp?: ExpandComp<Datum>;
|
|
11
11
|
onRowClick?: OnRowClick<Datum>;
|
|
12
12
|
gridColTemp: string;
|
|
13
|
+
defaultAlign: 'left' | 'right' | 'center';
|
|
13
14
|
}
|
|
14
15
|
declare function Row<Datum extends RowData>(props: RowProps<Datum>): react__default.ReactNode;
|
|
15
16
|
|
|
@@ -10,6 +10,7 @@ interface RowProps<Datum extends RowData> {
|
|
|
10
10
|
ExpandComp?: ExpandComp<Datum>;
|
|
11
11
|
onRowClick?: OnRowClick<Datum>;
|
|
12
12
|
gridColTemp: string;
|
|
13
|
+
defaultAlign: 'left' | 'right' | 'center';
|
|
13
14
|
}
|
|
14
15
|
declare function Row<Datum extends RowData>(props: RowProps<Datum>): react__default.ReactNode;
|
|
15
16
|
|
|
@@ -1,63 +1,63 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Row
|
|
3
|
-
} from "../../chunk-
|
|
3
|
+
} from "../../chunk-7TKVFGWB.js";
|
|
4
4
|
import "../../chunk-2ANGYYEV.js";
|
|
5
|
+
import "../../chunk-JPIZP2PZ.js";
|
|
6
|
+
import "../../chunk-HYITAA4J.js";
|
|
7
|
+
import "../../chunk-5H3YPCZK.js";
|
|
8
|
+
import "../../chunk-FR2GDOU2.js";
|
|
5
9
|
import "../../chunk-74DX4CU7.js";
|
|
6
10
|
import "../../chunk-OYM4XCHQ.js";
|
|
7
11
|
import "../../chunk-YJ7ZFOYL.js";
|
|
8
12
|
import "../../chunk-5ZITU5L7.js";
|
|
9
13
|
import "../../chunk-ILRUXI2E.js";
|
|
10
|
-
import "../../chunk-
|
|
14
|
+
import "../../chunk-YO3BQW6S.js";
|
|
15
|
+
import "../../chunk-6IVCARWS.js";
|
|
16
|
+
import "../../chunk-6DJOIRMF.js";
|
|
11
17
|
import "../../chunk-FPD73OHW.js";
|
|
12
18
|
import "../../chunk-ZKZDVS7G.js";
|
|
13
19
|
import "../../chunk-MUNMDHRF.js";
|
|
14
20
|
import "../../chunk-TVDKGMBI.js";
|
|
15
21
|
import "../../chunk-3JRNKBMN.js";
|
|
16
|
-
import "../../chunk-
|
|
17
|
-
import "../../chunk-5H3YPCZK.js";
|
|
18
|
-
import "../../chunk-FR2GDOU2.js";
|
|
22
|
+
import "../../chunk-XQOL7UBI.js";
|
|
19
23
|
import "../../chunk-TULWX7D6.js";
|
|
20
24
|
import "../../chunk-XQOZWYUA.js";
|
|
21
|
-
import "../../chunk-
|
|
25
|
+
import "../../chunk-HXJPG3ZO.js";
|
|
22
26
|
import "../../chunk-5AVBYDPB.js";
|
|
23
27
|
import "../../chunk-365QMK4D.js";
|
|
24
|
-
import "../../chunk-
|
|
25
|
-
import "../../chunk-
|
|
26
|
-
import "../../chunk-
|
|
28
|
+
import "../../chunk-4IKPNQV5.js";
|
|
29
|
+
import "../../chunk-ACVANQJ4.js";
|
|
30
|
+
import "../../chunk-2DZ2Y3JI.js";
|
|
31
|
+
import "../../chunk-CNQ7RNNY.js";
|
|
32
|
+
import "../../chunk-O3XTRD7R.js";
|
|
33
|
+
import "../../chunk-25HMMI7R.js";
|
|
27
34
|
import "../../chunk-2CVXGGI5.js";
|
|
28
35
|
import "../../chunk-EGEQY3KT.js";
|
|
29
36
|
import "../../chunk-HLOY6BIP.js";
|
|
30
37
|
import "../../chunk-O3T3TM3V.js";
|
|
31
|
-
import "../../chunk-
|
|
38
|
+
import "../../chunk-JEHDCZQU.js";
|
|
39
|
+
import "../../chunk-OHMOP5PV.js";
|
|
40
|
+
import "../../chunk-KGLIAFTI.js";
|
|
32
41
|
import "../../chunk-Q37G2GS6.js";
|
|
33
42
|
import "../../chunk-VTJZMOSP.js";
|
|
34
43
|
import "../../chunk-P6B2PNYI.js";
|
|
35
|
-
import "../../chunk-
|
|
36
|
-
import "../../chunk-BVBX6IJ3.js";
|
|
44
|
+
import "../../chunk-ONYSO7Y2.js";
|
|
37
45
|
import "../../chunk-NJ2U2TVS.js";
|
|
46
|
+
import "../../chunk-BVBX6IJ3.js";
|
|
38
47
|
import "../../chunk-O3DNDMV3.js";
|
|
39
48
|
import "../../chunk-4WFMOFN2.js";
|
|
40
|
-
import "../../chunk-
|
|
41
|
-
import "../../chunk-
|
|
42
|
-
import "../../chunk-
|
|
43
|
-
import "../../chunk-CHHLIPDN.js";
|
|
44
|
-
import "../../chunk-25HMMI7R.js";
|
|
45
|
-
import "../../chunk-O3XTRD7R.js";
|
|
49
|
+
import "../../chunk-ALOPZ54P.js";
|
|
50
|
+
import "../../chunk-YGL6SWKN.js";
|
|
51
|
+
import "../../chunk-4Y5BEXVN.js";
|
|
46
52
|
import "../../chunk-AQX7DQLI.js";
|
|
47
53
|
import "../../chunk-B6XJN6EC.js";
|
|
48
54
|
import "../../chunk-CAIVA7UA.js";
|
|
49
55
|
import "../../chunk-MIMJ7LON.js";
|
|
50
56
|
import "../../chunk-IQEEPHOY.js";
|
|
51
|
-
import "../../chunk-JEHDCZQU.js";
|
|
52
|
-
import "../../chunk-OHMOP5PV.js";
|
|
53
|
-
import "../../chunk-KGLIAFTI.js";
|
|
54
57
|
import "../../chunk-TSVWEPRP.js";
|
|
55
58
|
import "../../chunk-J242TTFH.js";
|
|
56
59
|
import "../../chunk-EAXUQEO5.js";
|
|
57
60
|
import "../../chunk-CZEGRZBK.js";
|
|
58
|
-
import "../../chunk-ALOPZ54P.js";
|
|
59
|
-
import "../../chunk-YGL6SWKN.js";
|
|
60
|
-
import "../../chunk-4Y5BEXVN.js";
|
|
61
61
|
import "../../chunk-N552FDTV.js";
|
|
62
62
|
export {
|
|
63
63
|
Row
|