@tipp/ui 0.1.8 → 0.1.10
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/index.cjs +6 -6
- package/dist/atoms/index.cjs.map +1 -1
- package/dist/atoms/index.d.cts +1 -1
- package/dist/atoms/index.d.ts +1 -1
- package/dist/atoms/index.js +57 -57
- package/dist/atoms/text.cjs +3 -3
- package/dist/atoms/text.cjs.map +1 -1
- package/dist/atoms/text.d.cts +4 -4
- package/dist/atoms/text.d.ts +4 -4
- package/dist/atoms/text.js +3 -3
- package/dist/atoms/typo.cjs +78 -0
- package/dist/atoms/typo.cjs.map +1 -0
- package/dist/atoms/typo.d.cts +9 -0
- package/dist/atoms/typo.d.ts +9 -0
- package/dist/atoms/typo.js +8 -0
- package/dist/atoms/typo.js.map +1 -0
- package/dist/chunk-5U2NU566.js +31 -0
- package/dist/chunk-5U2NU566.js.map +1 -0
- package/dist/chunk-DMV3DYHO.js +31 -0
- package/dist/chunk-DMV3DYHO.js.map +1 -0
- package/dist/chunk-FUSP6J72.js +112 -0
- package/dist/chunk-FUSP6J72.js.map +1 -0
- package/dist/chunk-LRYHWH4A.js +27 -0
- package/dist/chunk-LRYHWH4A.js.map +1 -0
- package/dist/chunk-S2YRXQZJ.js +112 -0
- package/dist/chunk-S2YRXQZJ.js.map +1 -0
- package/dist/chunk-UKJ64ZOX.js +1 -0
- package/dist/chunk-UKJ64ZOX.js.map +1 -0
- package/dist/chunk-WV6ZQLVD.js +112 -0
- package/dist/chunk-WV6ZQLVD.js.map +1 -0
- package/dist/chunk-XR5XS5FO.js +112 -0
- package/dist/chunk-XR5XS5FO.js.map +1 -0
- package/dist/icon.cjs +2 -0
- package/dist/icon.cjs.map +1 -1
- package/dist/icon.js +3 -1
- package/dist/index.cjs +8 -6
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +74 -72
- package/dist/molecules/expand-table/index.cjs +4 -4
- package/dist/molecules/expand-table/index.cjs.map +1 -1
- package/dist/molecules/expand-table/index.js +26 -26
- package/dist/molecules/expand-table/row.cjs +1 -1
- package/dist/molecules/expand-table/row.cjs.map +1 -1
- package/dist/molecules/expand-table/row.js +23 -23
- package/dist/molecules/index.cjs +4 -4
- package/dist/molecules/index.cjs.map +1 -1
- package/dist/molecules/index.js +26 -26
- package/package.json +1 -1
- package/src/atoms/index.ts +1 -1
- package/src/atoms/{text.tsx → typo.tsx} +2 -2
- package/src/icon.ts +1 -0
- package/src/molecules/expand-table/index.tsx +4 -4
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Row
|
|
3
|
+
} from "./chunk-ZE5G2S34.js";
|
|
4
|
+
import {
|
|
5
|
+
TriangleArrowDownIcon
|
|
6
|
+
} from "./chunk-BSTJBBEX.js";
|
|
7
|
+
import {
|
|
8
|
+
TriangleArrowUpIcon
|
|
9
|
+
} from "./chunk-NDUKDKGB.js";
|
|
10
|
+
import {
|
|
11
|
+
Typo
|
|
12
|
+
} from "./chunk-5U2NU566.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 { 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 rowModels = getRowModel();
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("div", { className: "tr", children: headerGroup.headers.map((header) => {
|
|
43
|
+
const sortable = header.column.getCanSort();
|
|
44
|
+
const sortedState = header.column.getIsSorted();
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
className: "th",
|
|
49
|
+
style: {
|
|
50
|
+
width: header.getSize()
|
|
51
|
+
},
|
|
52
|
+
children: /* @__PURE__ */ jsxs(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
56
|
+
style: sortable ? { cursor: "pointer" } : void 0,
|
|
57
|
+
type: "button",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
|
|
60
|
+
header.column.columnDef.header,
|
|
61
|
+
header.getContext()
|
|
62
|
+
) }),
|
|
63
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
64
|
+
Flex,
|
|
65
|
+
{
|
|
66
|
+
direction: "column",
|
|
67
|
+
style: { marginLeft: "var(--space-2)" },
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
TriangleArrowUpIcon,
|
|
71
|
+
{
|
|
72
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
TriangleArrowDownIcon,
|
|
77
|
+
{
|
|
78
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
) : null
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
},
|
|
88
|
+
header.id
|
|
89
|
+
);
|
|
90
|
+
}) }, headerGroup.id)) }),
|
|
91
|
+
/* @__PURE__ */ jsxs("div", { className: "tbody", children: [
|
|
92
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
93
|
+
rowModels.rows.map((row) => {
|
|
94
|
+
return /* @__PURE__ */ jsx(
|
|
95
|
+
Row,
|
|
96
|
+
{
|
|
97
|
+
ExpandComp,
|
|
98
|
+
onRowClick,
|
|
99
|
+
row
|
|
100
|
+
},
|
|
101
|
+
`row_${row.id}`
|
|
102
|
+
);
|
|
103
|
+
})
|
|
104
|
+
] })
|
|
105
|
+
] });
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export {
|
|
109
|
+
createColumnHelper,
|
|
110
|
+
ExpandTable
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=chunk-FUSP6J72.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, { 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 rowModels = getRowModel();\n\n return (\n <div className=\"expand-table\">\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div className=\"tr\" key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n return (\n <div\n className=\"th\"\n key={header.id}\n style={{\n width: header.getSize(),\n }}\n >\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 || <Typo>데이터가 없습니다</Typo>}\n </Flex>\n </div>\n )}\n\n {/* 행을 렌더하는 로직 */}\n {rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\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,gBAAgB;AA+DZ,cAOE,YAPF;AAxCb,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,YAAY,YAAY;AAE9B,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA,wBAAC,SAAI,WAAU,SACZ,0BAAgB,EAAE,IAAI,CAAC,gBACtB,oBAAC,SAAI,WAAU,MACZ,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACnC,YAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,YAAM,cAAc,OAAO,OAAO,YAAY;AAC9C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UAEV,OAAO;AAAA,YACL,OAAO,OAAO,QAAQ;AAAA,UACxB;AAAA,UAEA;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;AAAA;AAAA,QArCK,OAAO;AAAA,MAsCd;AAAA,IAEJ,CAAC,KA/CsB,YAAY,EAgDrC,CACD,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,SAEZ;AAAA,gBAAU,KAAK,WAAW,KACzB,oBAAC,SAAI,WAAU,MACb,8BAAC,QAAK,OAAM,UAAS,SAAQ,UAC1B,yBAAe,oBAAC,QAAK,+DAAS,GACjC,KAHsB,oBAIxB;AAAA,MAID,UAAU,KAAK,IAAI,CAAC,QAAQ;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK,OAAO,IAAI,EAAE;AAAA,QAGpB;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// src/icon.ts
|
|
2
|
+
import {
|
|
3
|
+
BookmarkIcon,
|
|
4
|
+
ExitIcon,
|
|
5
|
+
InfoCircledIcon,
|
|
6
|
+
ExclamationTriangleIcon,
|
|
7
|
+
MagnifyingGlassIcon,
|
|
8
|
+
DotsHorizontalIcon,
|
|
9
|
+
ChatBubbleIcon,
|
|
10
|
+
PlusIcon,
|
|
11
|
+
BookmarkFilledIcon,
|
|
12
|
+
MixerHorizontalIcon
|
|
13
|
+
} from "@radix-ui/react-icons";
|
|
14
|
+
|
|
15
|
+
export {
|
|
16
|
+
BookmarkIcon,
|
|
17
|
+
ExitIcon,
|
|
18
|
+
InfoCircledIcon,
|
|
19
|
+
ExclamationTriangleIcon,
|
|
20
|
+
MagnifyingGlassIcon,
|
|
21
|
+
DotsHorizontalIcon,
|
|
22
|
+
ChatBubbleIcon,
|
|
23
|
+
PlusIcon,
|
|
24
|
+
BookmarkFilledIcon,
|
|
25
|
+
MixerHorizontalIcon
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=chunk-LRYHWH4A.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n BookmarkIcon,\n ExitIcon,\n InfoCircledIcon,\n ExclamationTriangleIcon,\n MagnifyingGlassIcon,\n DotsHorizontalIcon,\n ChatBubbleIcon,\n PlusIcon,\n BookmarkFilledIcon,\n MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;","names":[]}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Row
|
|
3
|
+
} from "./chunk-ZE5G2S34.js";
|
|
4
|
+
import {
|
|
5
|
+
TriangleArrowDownIcon
|
|
6
|
+
} from "./chunk-BSTJBBEX.js";
|
|
7
|
+
import {
|
|
8
|
+
TriangleArrowUpIcon
|
|
9
|
+
} from "./chunk-NDUKDKGB.js";
|
|
10
|
+
import {
|
|
11
|
+
Typo
|
|
12
|
+
} from "./chunk-DMV3DYHO.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 { 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 rowModels = getRowModel();
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("div", { className: "tr", children: headerGroup.headers.map((header) => {
|
|
43
|
+
const sortable = header.column.getCanSort();
|
|
44
|
+
const sortedState = header.column.getIsSorted();
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
className: "th",
|
|
49
|
+
style: {
|
|
50
|
+
width: header.getSize()
|
|
51
|
+
},
|
|
52
|
+
children: /* @__PURE__ */ jsxs(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
56
|
+
style: sortable ? { cursor: "pointer" } : void 0,
|
|
57
|
+
type: "button",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
|
|
60
|
+
header.column.columnDef.header,
|
|
61
|
+
header.getContext()
|
|
62
|
+
) }),
|
|
63
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
64
|
+
Flex,
|
|
65
|
+
{
|
|
66
|
+
direction: "column",
|
|
67
|
+
style: { marginLeft: "var(--space-2)" },
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
TriangleArrowUpIcon,
|
|
71
|
+
{
|
|
72
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
TriangleArrowDownIcon,
|
|
77
|
+
{
|
|
78
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
) : null
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
},
|
|
88
|
+
header.id
|
|
89
|
+
);
|
|
90
|
+
}) }, headerGroup.id)) }),
|
|
91
|
+
/* @__PURE__ */ jsxs("div", { className: "tbody", children: [
|
|
92
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
93
|
+
rowModels.rows.map((row) => {
|
|
94
|
+
return /* @__PURE__ */ jsx(
|
|
95
|
+
Row,
|
|
96
|
+
{
|
|
97
|
+
ExpandComp,
|
|
98
|
+
onRowClick,
|
|
99
|
+
row
|
|
100
|
+
},
|
|
101
|
+
`row_${row.id}`
|
|
102
|
+
);
|
|
103
|
+
})
|
|
104
|
+
] })
|
|
105
|
+
] });
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export {
|
|
109
|
+
createColumnHelper,
|
|
110
|
+
ExpandTable
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=chunk-S2YRXQZJ.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, { 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 rowModels = getRowModel();\n\n return (\n <div className=\"expand-table\">\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div className=\"tr\" key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n return (\n <div\n className=\"th\"\n key={header.id}\n style={{\n width: header.getSize(),\n }}\n >\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 || <Typo>데이터가 없습니다</Typo>}\n </Flex>\n </div>\n )}\n\n {/* 행을 렌더하는 로직 */}\n {rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\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,gBAAgB;AA+DZ,cAOE,YAPF;AAxCb,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,YAAY,YAAY;AAE9B,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA,wBAAC,SAAI,WAAU,SACZ,0BAAgB,EAAE,IAAI,CAAC,gBACtB,oBAAC,SAAI,WAAU,MACZ,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACnC,YAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,YAAM,cAAc,OAAO,OAAO,YAAY;AAC9C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UAEV,OAAO;AAAA,YACL,OAAO,OAAO,QAAQ;AAAA,UACxB;AAAA,UAEA;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;AAAA;AAAA,QArCK,OAAO;AAAA,MAsCd;AAAA,IAEJ,CAAC,KA/CsB,YAAY,EAgDrC,CACD,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,SAEZ;AAAA,gBAAU,KAAK,WAAW,KACzB,oBAAC,SAAI,WAAU,MACb,8BAAC,QAAK,OAAM,UAAS,SAAQ,UAC1B,yBAAe,oBAAC,QAAK,+DAAS,GACjC,KAHsB,oBAIxB;AAAA,MAID,UAAU,KAAK,IAAI,CAAC,QAAQ;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YACC;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-UKJ64ZOX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Row
|
|
3
|
+
} from "./chunk-ZE5G2S34.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-DMV3DYHO.js";
|
|
7
|
+
import {
|
|
8
|
+
Flex
|
|
9
|
+
} from "./chunk-25HMMI7R.js";
|
|
10
|
+
import {
|
|
11
|
+
TriangleArrowDownIcon
|
|
12
|
+
} from "./chunk-BSTJBBEX.js";
|
|
13
|
+
import {
|
|
14
|
+
TriangleArrowUpIcon
|
|
15
|
+
} from "./chunk-NDUKDKGB.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 { 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 rowModels = getRowModel();
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("div", { className: "tr", children: headerGroup.headers.map((header) => {
|
|
43
|
+
const sortable = header.column.getCanSort();
|
|
44
|
+
const sortedState = header.column.getIsSorted();
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
className: "th",
|
|
49
|
+
style: {
|
|
50
|
+
width: header.getSize()
|
|
51
|
+
},
|
|
52
|
+
children: /* @__PURE__ */ jsxs(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
56
|
+
style: sortable ? { cursor: "pointer" } : void 0,
|
|
57
|
+
type: "button",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
|
|
60
|
+
header.column.columnDef.header,
|
|
61
|
+
header.getContext()
|
|
62
|
+
) }),
|
|
63
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
64
|
+
Flex,
|
|
65
|
+
{
|
|
66
|
+
direction: "column",
|
|
67
|
+
style: { marginLeft: "var(--space-2)" },
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
TriangleArrowUpIcon,
|
|
71
|
+
{
|
|
72
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
TriangleArrowDownIcon,
|
|
77
|
+
{
|
|
78
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
) : null
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
},
|
|
88
|
+
header.id
|
|
89
|
+
);
|
|
90
|
+
}) }, headerGroup.id)) }),
|
|
91
|
+
/* @__PURE__ */ jsxs("div", { className: "tbody", children: [
|
|
92
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
93
|
+
rowModels.rows.map((row) => {
|
|
94
|
+
return /* @__PURE__ */ jsx(
|
|
95
|
+
Row,
|
|
96
|
+
{
|
|
97
|
+
ExpandComp,
|
|
98
|
+
onRowClick,
|
|
99
|
+
row
|
|
100
|
+
},
|
|
101
|
+
`row_${row.id}`
|
|
102
|
+
);
|
|
103
|
+
})
|
|
104
|
+
] })
|
|
105
|
+
] });
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export {
|
|
109
|
+
createColumnHelper,
|
|
110
|
+
ExpandTable
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=chunk-WV6ZQLVD.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, { 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 rowModels = getRowModel();\n\n return (\n <div className=\"expand-table\">\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div className=\"tr\" key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n return (\n <div\n className=\"th\"\n key={header.id}\n style={{\n width: header.getSize(),\n }}\n >\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 || <Typo>데이터가 없습니다</Typo>}\n </Flex>\n </div>\n )}\n\n {/* 행을 렌더하는 로직 */}\n {rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\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,gBAAgB;AA+DZ,cAOE,YAPF;AAxCb,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,YAAY,YAAY;AAE9B,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA,wBAAC,SAAI,WAAU,SACZ,0BAAgB,EAAE,IAAI,CAAC,gBACtB,oBAAC,SAAI,WAAU,MACZ,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACnC,YAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,YAAM,cAAc,OAAO,OAAO,YAAY;AAC9C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UAEV,OAAO;AAAA,YACL,OAAO,OAAO,QAAQ;AAAA,UACxB;AAAA,UAEA;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;AAAA;AAAA,QArCK,OAAO;AAAA,MAsCd;AAAA,IAEJ,CAAC,KA/CsB,YAAY,EAgDrC,CACD,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,SAEZ;AAAA,gBAAU,KAAK,WAAW,KACzB,oBAAC,SAAI,WAAU,MACb,8BAAC,QAAK,OAAM,UAAS,SAAQ,UAC1B,yBAAe,oBAAC,QAAK,+DAAS,GACjC,KAHsB,oBAIxB;AAAA,MAID,UAAU,KAAK,IAAI,CAAC,QAAQ;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK,OAAO,IAAI,EAAE;AAAA,QAGpB;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Row
|
|
3
|
+
} from "./chunk-ZE5G2S34.js";
|
|
4
|
+
import {
|
|
5
|
+
Typo
|
|
6
|
+
} from "./chunk-5U2NU566.js";
|
|
7
|
+
import {
|
|
8
|
+
Flex
|
|
9
|
+
} from "./chunk-25HMMI7R.js";
|
|
10
|
+
import {
|
|
11
|
+
TriangleArrowDownIcon
|
|
12
|
+
} from "./chunk-BSTJBBEX.js";
|
|
13
|
+
import {
|
|
14
|
+
TriangleArrowUpIcon
|
|
15
|
+
} from "./chunk-NDUKDKGB.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 { 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 rowModels = getRowModel();
|
|
41
|
+
return /* @__PURE__ */ jsxs("div", { className: "expand-table", children: [
|
|
42
|
+
/* @__PURE__ */ jsx("div", { className: "thead", children: getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx("div", { className: "tr", children: headerGroup.headers.map((header) => {
|
|
43
|
+
const sortable = header.column.getCanSort();
|
|
44
|
+
const sortedState = header.column.getIsSorted();
|
|
45
|
+
return /* @__PURE__ */ jsx(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
className: "th",
|
|
49
|
+
style: {
|
|
50
|
+
width: header.getSize()
|
|
51
|
+
},
|
|
52
|
+
children: /* @__PURE__ */ jsxs(
|
|
53
|
+
"button",
|
|
54
|
+
{
|
|
55
|
+
onClick: header.column.getToggleSortingHandler(),
|
|
56
|
+
style: sortable ? { cursor: "pointer" } : void 0,
|
|
57
|
+
type: "button",
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx(Typo, { variant: "body", children: flexRender(
|
|
60
|
+
header.column.columnDef.header,
|
|
61
|
+
header.getContext()
|
|
62
|
+
) }),
|
|
63
|
+
sortable ? /* @__PURE__ */ jsxs(
|
|
64
|
+
Flex,
|
|
65
|
+
{
|
|
66
|
+
direction: "column",
|
|
67
|
+
style: { marginLeft: "var(--space-2)" },
|
|
68
|
+
children: [
|
|
69
|
+
/* @__PURE__ */ jsx(
|
|
70
|
+
TriangleArrowUpIcon,
|
|
71
|
+
{
|
|
72
|
+
color: sortedState === "asc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
TriangleArrowDownIcon,
|
|
77
|
+
{
|
|
78
|
+
color: sortedState === "desc" ? "var(--iris-10)" : "var(--iris-6)"
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
) : null
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
)
|
|
87
|
+
},
|
|
88
|
+
header.id
|
|
89
|
+
);
|
|
90
|
+
}) }, headerGroup.id)) }),
|
|
91
|
+
/* @__PURE__ */ jsxs("div", { className: "tbody", children: [
|
|
92
|
+
rowModels.rows.length === 0 && /* @__PURE__ */ jsx("div", { className: "tr", children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: placeholder || /* @__PURE__ */ jsx(Typo, { children: "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" }) }) }, "expand_placeholder"),
|
|
93
|
+
rowModels.rows.map((row) => {
|
|
94
|
+
return /* @__PURE__ */ jsx(
|
|
95
|
+
Row,
|
|
96
|
+
{
|
|
97
|
+
ExpandComp,
|
|
98
|
+
onRowClick,
|
|
99
|
+
row
|
|
100
|
+
},
|
|
101
|
+
`row_${row.id}`
|
|
102
|
+
);
|
|
103
|
+
})
|
|
104
|
+
] })
|
|
105
|
+
] });
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export {
|
|
109
|
+
createColumnHelper,
|
|
110
|
+
ExpandTable
|
|
111
|
+
};
|
|
112
|
+
//# sourceMappingURL=chunk-XR5XS5FO.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, { 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 rowModels = getRowModel();\n\n return (\n <div className=\"expand-table\">\n <div className=\"thead\">\n {getHeaderGroups().map((headerGroup) => (\n <div className=\"tr\" key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const sortable = header.column.getCanSort();\n const sortedState = header.column.getIsSorted();\n return (\n <div\n className=\"th\"\n key={header.id}\n style={{\n width: header.getSize(),\n }}\n >\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 || <Typo>데이터가 없습니다</Typo>}\n </Flex>\n </div>\n )}\n\n {/* 행을 렌더하는 로직 */}\n {rowModels.rows.map((row) => {\n return (\n <Row\n ExpandComp={ExpandComp}\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,gBAAgB;AA+DZ,cAOE,YAPF;AAxCb,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,YAAY,YAAY;AAE9B,SACE,qBAAC,SAAI,WAAU,gBACb;AAAA,wBAAC,SAAI,WAAU,SACZ,0BAAgB,EAAE,IAAI,CAAC,gBACtB,oBAAC,SAAI,WAAU,MACZ,sBAAY,QAAQ,IAAI,CAAC,WAAW;AACnC,YAAM,WAAW,OAAO,OAAO,WAAW;AAC1C,YAAM,cAAc,OAAO,OAAO,YAAY;AAC9C,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UAEV,OAAO;AAAA,YACL,OAAO,OAAO,QAAQ;AAAA,UACxB;AAAA,UAEA;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;AAAA;AAAA,QArCK,OAAO;AAAA,MAsCd;AAAA,IAEJ,CAAC,KA/CsB,YAAY,EAgDrC,CACD,GACH;AAAA,IACA,qBAAC,SAAI,WAAU,SAEZ;AAAA,gBAAU,KAAK,WAAW,KACzB,oBAAC,SAAI,WAAU,MACb,8BAAC,QAAK,OAAM,UAAS,SAAQ,UAC1B,yBAAe,oBAAC,QAAK,+DAAS,GACjC,KAHsB,oBAIxB;AAAA,MAID,UAAU,KAAK,IAAI,CAAC,QAAQ;AAC3B,eACE;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YAEA;AAAA,YACA;AAAA;AAAA,UAFK,OAAO,IAAI,EAAE;AAAA,QAGpB;AAAA,MAEJ,CAAC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}
|
package/dist/icon.cjs
CHANGED
|
@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
20
20
|
// src/icon.ts
|
|
21
21
|
var icon_exports = {};
|
|
22
22
|
__export(icon_exports, {
|
|
23
|
+
BookmarkFilledIcon: () => import_react_icons.BookmarkFilledIcon,
|
|
23
24
|
BookmarkIcon: () => import_react_icons.BookmarkIcon,
|
|
24
25
|
ChatBubbleIcon: () => import_react_icons.ChatBubbleIcon,
|
|
25
26
|
DotsHorizontalIcon: () => import_react_icons.DotsHorizontalIcon,
|
|
@@ -34,6 +35,7 @@ module.exports = __toCommonJS(icon_exports);
|
|
|
34
35
|
var import_react_icons = require("@radix-ui/react-icons");
|
|
35
36
|
// Annotate the CommonJS export names for ESM import in node:
|
|
36
37
|
0 && (module.exports = {
|
|
38
|
+
BookmarkFilledIcon,
|
|
37
39
|
BookmarkIcon,
|
|
38
40
|
ChatBubbleIcon,
|
|
39
41
|
DotsHorizontalIcon,
|
package/dist/icon.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n BookmarkIcon,\n ExitIcon,\n InfoCircledIcon,\n ExclamationTriangleIcon,\n MagnifyingGlassIcon,\n DotsHorizontalIcon,\n ChatBubbleIcon,\n PlusIcon,\n MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/icon.ts"],"sourcesContent":["export {\n BookmarkIcon,\n ExitIcon,\n InfoCircledIcon,\n ExclamationTriangleIcon,\n MagnifyingGlassIcon,\n DotsHorizontalIcon,\n ChatBubbleIcon,\n PlusIcon,\n BookmarkFilledIcon,\n MixerHorizontalIcon,\n} from '@radix-ui/react-icons';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAWO;","names":[]}
|
package/dist/icon.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import {
|
|
2
|
+
BookmarkFilledIcon,
|
|
2
3
|
BookmarkIcon,
|
|
3
4
|
ChatBubbleIcon,
|
|
4
5
|
DotsHorizontalIcon,
|
|
@@ -8,9 +9,10 @@ import {
|
|
|
8
9
|
MagnifyingGlassIcon,
|
|
9
10
|
MixerHorizontalIcon,
|
|
10
11
|
PlusIcon
|
|
11
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-LRYHWH4A.js";
|
|
12
13
|
import "./chunk-N552FDTV.js";
|
|
13
14
|
export {
|
|
15
|
+
BookmarkFilledIcon,
|
|
14
16
|
BookmarkIcon,
|
|
15
17
|
ChatBubbleIcon,
|
|
16
18
|
DotsHorizontalIcon,
|