@tipp/ui 1.0.48 → 1.0.49
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/chunk-MDBFTLD7.js +72 -0
- package/dist/chunk-MDBFTLD7.js.map +1 -0
- package/dist/chunk-N4GN6CKE.js +123 -0
- package/dist/chunk-N4GN6CKE.js.map +1 -0
- package/dist/chunk-PL37KFRJ.js +1 -0
- package/dist/chunk-PL37KFRJ.js.map +1 -0
- package/dist/chunk-T6KADTJZ.js +18 -0
- package/dist/chunk-T6KADTJZ.js.map +1 -0
- package/dist/index.cjs +16 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +75 -70
- package/dist/molecules/date-picker/index.js +2 -2
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +25 -25
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.js +24 -24
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +29 -29
- package/dist/molecules/navigation.js +24 -24
- package/dist/utils/get-cell-align.cjs +42 -0
- package/dist/utils/get-cell-align.cjs.map +1 -0
- package/dist/utils/get-cell-align.js +8 -0
- package/dist/utils/get-cell-align.js.map +1 -0
- package/dist/utils/index.cjs +44 -0
- package/dist/utils/index.cjs.map +1 -0
- package/dist/utils/index.js +9 -0
- package/dist/utils/index.js.map +1 -0
- package/package.json +3 -3
- package/src/index.ts +1 -0
- package/src/molecules/expand-table/row.tsx +2 -1
- package/src/utils/get-cell-align.ts +18 -0
- package/src/utils/index.ts +1 -0
package/dist/atoms/drawer.js
CHANGED
|
@@ -3,9 +3,9 @@ import {
|
|
|
3
3
|
Drawer,
|
|
4
4
|
Root,
|
|
5
5
|
Trigger
|
|
6
|
-
} from "../chunk-
|
|
7
|
-
import "../chunk-NJ2U2TVS.js";
|
|
6
|
+
} from "../chunk-NBJOYJAF.js";
|
|
8
7
|
import "../chunk-BVBX6IJ3.js";
|
|
8
|
+
import "../chunk-NJ2U2TVS.js";
|
|
9
9
|
import "../chunk-O3DNDMV3.js";
|
|
10
10
|
import "../chunk-N552FDTV.js";
|
|
11
11
|
export {
|
package/dist/atoms/index.js
CHANGED
|
@@ -1,16 +1,4 @@
|
|
|
1
1
|
import "../chunk-2ANGYYEV.js";
|
|
2
|
-
import {
|
|
3
|
-
TextField
|
|
4
|
-
} from "../chunk-JPIZP2PZ.js";
|
|
5
|
-
import {
|
|
6
|
-
Separator
|
|
7
|
-
} from "../chunk-HYITAA4J.js";
|
|
8
|
-
import {
|
|
9
|
-
Skeleton
|
|
10
|
-
} from "../chunk-5H3YPCZK.js";
|
|
11
|
-
import {
|
|
12
|
-
Spinner
|
|
13
|
-
} from "../chunk-FR2GDOU2.js";
|
|
14
2
|
import {
|
|
15
3
|
Strong
|
|
16
4
|
} from "../chunk-74DX4CU7.js";
|
|
@@ -27,14 +15,8 @@ import {
|
|
|
27
15
|
TextArea
|
|
28
16
|
} from "../chunk-ILRUXI2E.js";
|
|
29
17
|
import {
|
|
30
|
-
|
|
31
|
-
} from "../chunk-
|
|
32
|
-
import {
|
|
33
|
-
RadioCards
|
|
34
|
-
} from "../chunk-6IVCARWS.js";
|
|
35
|
-
import {
|
|
36
|
-
RadioGroup
|
|
37
|
-
} from "../chunk-6DJOIRMF.js";
|
|
18
|
+
TextField
|
|
19
|
+
} from "../chunk-JPIZP2PZ.js";
|
|
38
20
|
import {
|
|
39
21
|
Radio
|
|
40
22
|
} from "../chunk-FPD73OHW.js";
|
|
@@ -51,8 +33,14 @@ import {
|
|
|
51
33
|
Select
|
|
52
34
|
} from "../chunk-3JRNKBMN.js";
|
|
53
35
|
import {
|
|
54
|
-
|
|
55
|
-
} from "../chunk-
|
|
36
|
+
Separator
|
|
37
|
+
} from "../chunk-HYITAA4J.js";
|
|
38
|
+
import {
|
|
39
|
+
Skeleton
|
|
40
|
+
} from "../chunk-5H3YPCZK.js";
|
|
41
|
+
import {
|
|
42
|
+
Spinner
|
|
43
|
+
} from "../chunk-FR2GDOU2.js";
|
|
56
44
|
import {
|
|
57
45
|
Kbd
|
|
58
46
|
} from "../chunk-TULWX7D6.js";
|
|
@@ -61,7 +49,7 @@ import {
|
|
|
61
49
|
} from "../chunk-XQOZWYUA.js";
|
|
62
50
|
import {
|
|
63
51
|
Pagination
|
|
64
|
-
} from "../chunk-
|
|
52
|
+
} from "../chunk-FQYPUIFX.js";
|
|
65
53
|
import {
|
|
66
54
|
Popover
|
|
67
55
|
} from "../chunk-5AVBYDPB.js";
|
|
@@ -69,23 +57,14 @@ import {
|
|
|
69
57
|
Progress
|
|
70
58
|
} from "../chunk-365QMK4D.js";
|
|
71
59
|
import {
|
|
72
|
-
|
|
73
|
-
} from "../chunk-
|
|
74
|
-
import {
|
|
75
|
-
Tooltip
|
|
76
|
-
} from "../chunk-ACVANQJ4.js";
|
|
77
|
-
import {
|
|
78
|
-
Em
|
|
79
|
-
} from "../chunk-2DZ2Y3JI.js";
|
|
80
|
-
import {
|
|
81
|
-
FieldErrorWrapper
|
|
82
|
-
} from "../chunk-CNQ7RNNY.js";
|
|
60
|
+
Quote
|
|
61
|
+
} from "../chunk-YO3BQW6S.js";
|
|
83
62
|
import {
|
|
84
|
-
|
|
85
|
-
} from "../chunk-
|
|
63
|
+
RadioCards
|
|
64
|
+
} from "../chunk-6IVCARWS.js";
|
|
86
65
|
import {
|
|
87
|
-
|
|
88
|
-
} from "../chunk-
|
|
66
|
+
RadioGroup
|
|
67
|
+
} from "../chunk-6DJOIRMF.js";
|
|
89
68
|
import {
|
|
90
69
|
Form
|
|
91
70
|
} from "../chunk-2CVXGGI5.js";
|
|
@@ -99,14 +78,8 @@ import {
|
|
|
99
78
|
HoverCard
|
|
100
79
|
} from "../chunk-O3T3TM3V.js";
|
|
101
80
|
import {
|
|
102
|
-
|
|
103
|
-
} from "../chunk-
|
|
104
|
-
import {
|
|
105
|
-
Code
|
|
106
|
-
} from "../chunk-OHMOP5PV.js";
|
|
107
|
-
import {
|
|
108
|
-
Collapse
|
|
109
|
-
} from "../chunk-KGLIAFTI.js";
|
|
81
|
+
Inset
|
|
82
|
+
} from "../chunk-XQOL7UBI.js";
|
|
110
83
|
import {
|
|
111
84
|
Container
|
|
112
85
|
} from "../chunk-Q37G2GS6.js";
|
|
@@ -121,12 +94,12 @@ import {
|
|
|
121
94
|
Drawer,
|
|
122
95
|
Root,
|
|
123
96
|
Trigger
|
|
124
|
-
} from "../chunk-
|
|
97
|
+
} from "../chunk-NBJOYJAF.js";
|
|
98
|
+
import "../chunk-BVBX6IJ3.js";
|
|
125
99
|
import {
|
|
126
100
|
ToastContainer,
|
|
127
101
|
toast
|
|
128
102
|
} from "../chunk-NJ2U2TVS.js";
|
|
129
|
-
import "../chunk-BVBX6IJ3.js";
|
|
130
103
|
import {
|
|
131
104
|
IconButton
|
|
132
105
|
} from "../chunk-O3DNDMV3.js";
|
|
@@ -134,14 +107,23 @@ import {
|
|
|
134
107
|
DropdownMenu
|
|
135
108
|
} from "../chunk-4WFMOFN2.js";
|
|
136
109
|
import {
|
|
137
|
-
|
|
138
|
-
} from "../chunk-
|
|
110
|
+
EllipsisTooltip
|
|
111
|
+
} from "../chunk-4IKPNQV5.js";
|
|
139
112
|
import {
|
|
140
|
-
|
|
141
|
-
} from "../chunk-
|
|
113
|
+
Tooltip
|
|
114
|
+
} from "../chunk-ACVANQJ4.js";
|
|
142
115
|
import {
|
|
143
|
-
|
|
144
|
-
} from "../chunk-
|
|
116
|
+
Em
|
|
117
|
+
} from "../chunk-2DZ2Y3JI.js";
|
|
118
|
+
import {
|
|
119
|
+
FieldErrorWrapper
|
|
120
|
+
} from "../chunk-CHHLIPDN.js";
|
|
121
|
+
import {
|
|
122
|
+
Flex
|
|
123
|
+
} from "../chunk-25HMMI7R.js";
|
|
124
|
+
import {
|
|
125
|
+
Typo
|
|
126
|
+
} from "../chunk-O3XTRD7R.js";
|
|
145
127
|
import {
|
|
146
128
|
Button
|
|
147
129
|
} from "../chunk-AQX7DQLI.js";
|
|
@@ -157,6 +139,15 @@ import {
|
|
|
157
139
|
import {
|
|
158
140
|
CheckboxGroup
|
|
159
141
|
} from "../chunk-IQEEPHOY.js";
|
|
142
|
+
import {
|
|
143
|
+
Checkbox
|
|
144
|
+
} from "../chunk-JEHDCZQU.js";
|
|
145
|
+
import {
|
|
146
|
+
Code
|
|
147
|
+
} from "../chunk-OHMOP5PV.js";
|
|
148
|
+
import {
|
|
149
|
+
Collapse
|
|
150
|
+
} from "../chunk-KGLIAFTI.js";
|
|
160
151
|
import "../chunk-TSVWEPRP.js";
|
|
161
152
|
import {
|
|
162
153
|
AlertDialog
|
|
@@ -167,6 +158,15 @@ import {
|
|
|
167
158
|
import {
|
|
168
159
|
Avatar
|
|
169
160
|
} from "../chunk-CZEGRZBK.js";
|
|
161
|
+
import {
|
|
162
|
+
Badge
|
|
163
|
+
} from "../chunk-ALOPZ54P.js";
|
|
164
|
+
import {
|
|
165
|
+
Blockquote
|
|
166
|
+
} from "../chunk-YGL6SWKN.js";
|
|
167
|
+
import {
|
|
168
|
+
Box
|
|
169
|
+
} from "../chunk-4Y5BEXVN.js";
|
|
170
170
|
import "../chunk-N552FDTV.js";
|
|
171
171
|
export {
|
|
172
172
|
AlertDialog,
|
package/dist/atoms/pagination.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Pagination
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-O3XTRD7R.js";
|
|
5
|
-
import "../chunk-25HMMI7R.js";
|
|
3
|
+
} from "../chunk-FQYPUIFX.js";
|
|
6
4
|
import "../chunk-O3DNDMV3.js";
|
|
5
|
+
import "../chunk-25HMMI7R.js";
|
|
6
|
+
import "../chunk-O3XTRD7R.js";
|
|
7
7
|
import "../chunk-TSVWEPRP.js";
|
|
8
8
|
import "../chunk-N552FDTV.js";
|
|
9
9
|
export {
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Collapse
|
|
3
|
+
} from "./chunk-KGLIAFTI.js";
|
|
4
|
+
|
|
5
|
+
// src/molecules/expand-table/row.tsx
|
|
6
|
+
import {
|
|
7
|
+
flexRender
|
|
8
|
+
} from "@tanstack/react-table";
|
|
9
|
+
import { useCallback, useState } from "react";
|
|
10
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
11
|
+
function Row(props) {
|
|
12
|
+
const { row, ExpandComp, gridColTemp } = props;
|
|
13
|
+
const [open, setOpen] = useState(false);
|
|
14
|
+
const onClickRow = useCallback(() => {
|
|
15
|
+
var _a;
|
|
16
|
+
(_a = props.onRowClick) == null ? void 0 : _a.call(props, row.original);
|
|
17
|
+
setOpen((prev) => !prev);
|
|
18
|
+
}, [props, row.original]);
|
|
19
|
+
return /* @__PURE__ */ jsxs(
|
|
20
|
+
"div",
|
|
21
|
+
{
|
|
22
|
+
className: `tr-wrapper ${ExpandComp ? "expandable" : ""}`,
|
|
23
|
+
children: [
|
|
24
|
+
/* @__PURE__ */ jsx(
|
|
25
|
+
"button",
|
|
26
|
+
{
|
|
27
|
+
className: "tr",
|
|
28
|
+
onClick: onClickRow,
|
|
29
|
+
style: { gridTemplateColumns: gridColTemp },
|
|
30
|
+
type: "button",
|
|
31
|
+
children: row.getVisibleCells().map((cell) => {
|
|
32
|
+
var _a, _b, _c;
|
|
33
|
+
const autoSize = (_a = cell.column.columnDef.meta) == null ? void 0 : _a.autoSize;
|
|
34
|
+
const justifyContent = ((_b = cell.column.columnDef.meta) == null ? void 0 : _b.align) || props.defaultAlign;
|
|
35
|
+
return /* @__PURE__ */ jsxs(
|
|
36
|
+
"div",
|
|
37
|
+
{
|
|
38
|
+
className: "td",
|
|
39
|
+
style: {
|
|
40
|
+
// width: autoSize ? undefined : cell.column.getSize(),
|
|
41
|
+
flexGrow: autoSize ? 1 : void 0,
|
|
42
|
+
justifyContent
|
|
43
|
+
},
|
|
44
|
+
children: [
|
|
45
|
+
flexRender(cell.column.columnDef.cell, cell.getContext()),
|
|
46
|
+
((_c = cell.column.columnDef.meta) == null ? void 0 : _c.OpenBtn) ? /* @__PURE__ */ jsx(
|
|
47
|
+
cell.column.columnDef.meta.OpenBtn,
|
|
48
|
+
{
|
|
49
|
+
data: row.original,
|
|
50
|
+
open,
|
|
51
|
+
setIsOpen: setOpen
|
|
52
|
+
}
|
|
53
|
+
) : null
|
|
54
|
+
]
|
|
55
|
+
},
|
|
56
|
+
cell.id
|
|
57
|
+
);
|
|
58
|
+
})
|
|
59
|
+
},
|
|
60
|
+
`tr_${row.id}`
|
|
61
|
+
),
|
|
62
|
+
ExpandComp ? /* @__PURE__ */ jsx(Collapse, { open, children: /* @__PURE__ */ jsx("div", { className: "expand-comp-wrapper", children: /* @__PURE__ */ jsx(ExpandComp, { row }) }) }) : null
|
|
63
|
+
]
|
|
64
|
+
},
|
|
65
|
+
`tr-wrapper_${row.id}`
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export {
|
|
70
|
+
Row
|
|
71
|
+
};
|
|
72
|
+
//# sourceMappingURL=chunk-MDBFTLD7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/expand-table/row.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';\nimport type { CellAlign } from '../../utils/get-cell-align';\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: CellAlign;\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":";;;;;AAAA;AAAA,EAGE;AAAA,OACK;AACP,SAAgB,aAAa,gBAAgB;AA4CjC,SAWI,KAXJ;AA7BL,SAAS,IACd,OACiB;AACjB,QAAM,EAAE,KAAK,YAAY,YAAY,IAAI;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,aAAa,YAAY,MAAM;AA1BvC;AA2BI,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;AA3C7C;AA4CU,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,+BAAW,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,oBAAC,YAAS,MACR,8BAAC,SAAI,WAAU,uBACb,8BAAC,cAAW,KAAU,GACxB,GACF,IACE;AAAA;AAAA;AAAA,IA1CC,cAAc,IAAI,EAAE;AAAA,EA2C3B;AAEJ;","names":[]}
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Row
|
|
3
|
+
} from "./chunk-MDBFTLD7.js";
|
|
4
|
+
import {
|
|
5
|
+
TriangleArrowDownIcon
|
|
6
|
+
} from "./chunk-BSTJBBEX.js";
|
|
7
|
+
import {
|
|
8
|
+
TriangleArrowUpIcon
|
|
9
|
+
} from "./chunk-NDUKDKGB.js";
|
|
10
|
+
import {
|
|
11
|
+
Flex
|
|
12
|
+
} from "./chunk-25HMMI7R.js";
|
|
13
|
+
import {
|
|
14
|
+
Typo
|
|
15
|
+
} from "./chunk-O3XTRD7R.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 defaultAlign = "left";
|
|
30
|
+
const [sorting, setSorting] = useState([]);
|
|
31
|
+
const { getRowModel, getHeaderGroups } = useReactTable({
|
|
32
|
+
data: data || [],
|
|
33
|
+
columns,
|
|
34
|
+
getCoreRowModel: getCoreRowModel(),
|
|
35
|
+
getSortedRowModel: getSortedRowModel(),
|
|
36
|
+
state: {
|
|
37
|
+
sorting
|
|
38
|
+
},
|
|
39
|
+
onSortingChange: setSorting
|
|
40
|
+
});
|
|
41
|
+
const gridColTemp = useMemo(() => {
|
|
42
|
+
return columns.map((col) => {
|
|
43
|
+
var _a;
|
|
44
|
+
if ((_a = col.meta) == null ? void 0 : _a.autoSize)
|
|
45
|
+
return "1fr";
|
|
46
|
+
return `${col.size || 150}px`;
|
|
47
|
+
}).join(" ");
|
|
48
|
+
}, [columns]);
|
|
49
|
+
const rowModels = getRowModel();
|
|
50
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
|
|
51
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
className: "tr",
|
|
55
|
+
style: { gridTemplateColumns: gridColTemp },
|
|
56
|
+
children: headerGroup.headers.map((header) => {
|
|
57
|
+
var _a;
|
|
58
|
+
const sortable = header.column.getCanSort();
|
|
59
|
+
const sortedState = header.column.getIsSorted();
|
|
60
|
+
const justifyContent = ((_a = header.column.columnDef.meta) == null ? void 0 : _a.align) || defaultAlign;
|
|
61
|
+
return /* @__PURE__ */ jsx("div", { className: `${justifyContent} th`, children: /* @__PURE__ */ jsxs(
|
|
62
|
+
"button",
|
|
63
|
+
{
|
|
64
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
65
|
+
style: sortable ? { cursor: "pointer" } : void 0,
|
|
66
|
+
type: "button",
|
|
67
|
+
children: [
|
|
68
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
|
|
69
|
+
header.column.columnDef.header,
|
|
70
|
+
header.getContext()
|
|
71
|
+
) }),
|
|
72
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
73
|
+
Flex,
|
|
74
|
+
{
|
|
75
|
+
direction: "column",
|
|
76
|
+
style: { marginLeft: "var(--space-2)" },
|
|
77
|
+
children: [
|
|
78
|
+
/* @__PURE__ */ jsx(
|
|
79
|
+
TriangleArrowUpIcon,
|
|
80
|
+
{
|
|
81
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
82
|
+
}
|
|
83
|
+
),
|
|
84
|
+
/* @__PURE__ */ jsx(
|
|
85
|
+
TriangleArrowDownIcon,
|
|
86
|
+
{
|
|
87
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
) : null
|
|
93
|
+
]
|
|
94
|
+
}
|
|
95
|
+
) }, header.id);
|
|
96
|
+
})
|
|
97
|
+
},
|
|
98
|
+
headerGroup.id
|
|
99
|
+
)) }),
|
|
100
|
+
/* @__PURE__ */ jsxs("div", { className: "tbody", children: [
|
|
101
|
+
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"),
|
|
102
|
+
rowModels.rows.map((row) => {
|
|
103
|
+
return /* @__PURE__ */ jsx(
|
|
104
|
+
Row,
|
|
105
|
+
{
|
|
106
|
+
ExpandComp,
|
|
107
|
+
defaultAlign,
|
|
108
|
+
gridColTemp,
|
|
109
|
+
onRowClick,
|
|
110
|
+
row
|
|
111
|
+
},
|
|
112
|
+
`row_${row.id}`
|
|
113
|
+
);
|
|
114
|
+
})
|
|
115
|
+
] })
|
|
116
|
+
] });
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
export {
|
|
120
|
+
createColumnHelper,
|
|
121
|
+
ExpandTable
|
|
122
|
+
};
|
|
123
|
+
//# sourceMappingURL=chunk-N4GN6CKE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/molecules/expand-table/index.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"],"mappings":";;;;;;;;;;;;;;;;;AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAgB,SAAS,gBAAgB;AAyErB,cAOE,YAPF;AAlDb,SAAS,YACd,OACiB;AACjB,QAAM,EAAE,MAAM,SAAS,YAAY,aAAa,WAAW,IAAI;AAC/D,QAAM,eAAe;AACrB,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;AAxDpB;AAyDQ,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;AA1EjD;AA2Ec,gBAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,gBAAM,cAAc,OAAO,OAAO,YAAY;AAC9C,gBAAM,mBACJ,YAAO,OAAO,UAAU,SAAxB,mBAA8B,UAAS;AAEzC,iBACE,oBAAC,SAAI,WAAW,GAAG,cAAc,OAC/B;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,KAjC2C,OAAO,EAkCpD;AAAA,QAEJ,CAAC;AAAA;AAAA,MA9CI,YAAY;AAAA,IA+CnB,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,YACA;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK,OAAO,IAAI,EAAE;AAAA,QAGpB;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-PL37KFRJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
// src/utils/get-cell-align.ts
|
|
2
|
+
var getCellAlign = (arg) => {
|
|
3
|
+
const { dataType } = arg;
|
|
4
|
+
switch (dataType) {
|
|
5
|
+
case "number":
|
|
6
|
+
case "date":
|
|
7
|
+
case "time":
|
|
8
|
+
return "right";
|
|
9
|
+
case "string":
|
|
10
|
+
default:
|
|
11
|
+
return "left";
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export {
|
|
16
|
+
getCellAlign
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=chunk-T6KADTJZ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/get-cell-align.ts"],"sourcesContent":["import type { ColumnMeta } from '@tanstack/react-table';\n\nexport type CellDataType = 'number' | 'date' | 'time' | 'string' | 'button';\nexport type CellAlign = NonNullable<ColumnMeta<unknown, unknown>['align']>;\n\nexport const getCellAlign = (arg: { dataType: CellDataType }): CellAlign => {\n const { dataType } = arg;\n\n switch (dataType) {\n case 'number':\n case 'date':\n case 'time':\n return 'right';\n case 'string':\n default:\n return 'left';\n }\n};\n"],"mappings":";AAKO,IAAM,eAAe,CAAC,QAA+C;AAC1E,QAAM,EAAE,SAAS,IAAI;AAErB,UAAQ,UAAU;AAAA,IAChB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;","names":[]}
|
package/dist/index.cjs
CHANGED
|
@@ -149,6 +149,7 @@ __export(src_exports, {
|
|
|
149
149
|
Trigger: () => Trigger2,
|
|
150
150
|
Typo: () => Typo,
|
|
151
151
|
createColumnHelper: () => import_react_table2.createColumnHelper,
|
|
152
|
+
getCellAlign: () => getCellAlign,
|
|
152
153
|
toast: () => import_react_toastify2.toast,
|
|
153
154
|
uiProps: () => uiProps,
|
|
154
155
|
useThemeContext: () => import_themes51.useThemeContext
|
|
@@ -1380,6 +1381,20 @@ var EchartDefaultProps = {
|
|
|
1380
1381
|
tooltip: { textStyle: { fontSize: 16 } }
|
|
1381
1382
|
}
|
|
1382
1383
|
};
|
|
1384
|
+
|
|
1385
|
+
// src/utils/get-cell-align.ts
|
|
1386
|
+
var getCellAlign = (arg) => {
|
|
1387
|
+
const { dataType } = arg;
|
|
1388
|
+
switch (dataType) {
|
|
1389
|
+
case "number":
|
|
1390
|
+
case "date":
|
|
1391
|
+
case "time":
|
|
1392
|
+
return "right";
|
|
1393
|
+
case "string":
|
|
1394
|
+
default:
|
|
1395
|
+
return "left";
|
|
1396
|
+
}
|
|
1397
|
+
};
|
|
1383
1398
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1384
1399
|
0 && (module.exports = {
|
|
1385
1400
|
AlertDialog,
|
|
@@ -1472,6 +1487,7 @@ var EchartDefaultProps = {
|
|
|
1472
1487
|
Trigger,
|
|
1473
1488
|
Typo,
|
|
1474
1489
|
createColumnHelper,
|
|
1490
|
+
getCellAlign,
|
|
1475
1491
|
toast,
|
|
1476
1492
|
uiProps,
|
|
1477
1493
|
useThemeContext
|