@lotte-innovate/ui-component-test 0.0.128 → 0.0.130
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/lib/components/Grid/Pagination.mjs +2 -0
- package/dist/lib/components/Grid/Pagination.mjs.map +1 -0
- package/dist/lib/components/Grid/index.js +2 -2
- package/dist/lib/components/Grid/index.mjs +1 -1
- package/dist/lib/components/Grid/useGrid.js +30 -19
- package/dist/lib/components/Grid/useGrid.mjs +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/dist/lib/components/Grid/NumberingPagination.mjs +0 -2
- package/dist/lib/components/Grid/NumberingPagination.mjs.map +0 -1
@@ -0,0 +1,2 @@
|
|
1
|
+
import{jsxs as e,jsx as n}from"react/jsx-runtime";import{IconButton as t}from"../IconButton/index.mjs";import{DoubleArrowLeftIcon as a,ChevronLeftIcon as r,ChevronRightIcon as o,DoubleArrowRightIcon as i}from"@radix-ui/react-icons";import l from"../TextField/index.mjs";import c from"../Select/index.mjs";import{MAIN_COLOR as d}from"../../color/constants.mjs";function g(g){var s,u=g.table,m=null!==(s=u.options.color)&&void 0!==s?s:d;return e("div",{className:"flex items-center gap-2",children:[n(t,{className:"rounded border p-1",color:m,onClick:function(){return u.firstPage()},disabled:!u.getCanPreviousPage(),children:n(a,{})}),n(t,{className:"rounded border p-1",color:m,onClick:function(){return u.previousPage()},disabled:!u.getCanPreviousPage(),children:n(r,{})}),n(t,{className:"rounded border p-1",color:m,onClick:function(){return u.nextPage()},disabled:!u.getCanNextPage(),children:n(o,{})}),n(t,{className:"rounded border p-1",color:m,onClick:function(){return u.lastPage()},disabled:!u.getCanNextPage(),children:n(i,{})}),e("span",{className:"flex items-center gap-1",children:[n("div",{children:"Page"}),e("strong",{children:[u.getState().pagination.pageIndex+1," of ",u.getPageCount().toLocaleString()]})]}),e("span",{className:"flex items-center gap-1",children:["| Go to page:",n(l.Root,{type:"number",color:m,min:"1",max:u.getPageCount(),defaultValue:u.getState().pagination.pageIndex+1,onChange:function(e){var n=e.target.value?Number(e.target.value)-1:0;u.setPageIndex(n)},className:"w-16 rounded border p-1"})]}),e(c.Root,{color:m,value:String(u.getState().pagination.pageSize),defaultValue:String(u.getState().pagination.pageSize),onValueChange:function(e){u.setPageSize(Number(e))},children:[n(c.Trigger,{}),n(c.Content,{children:[10,20,30,40,50].map((function(e){return n(c.Item,{value:String(e),children:e},e)}))})]})]})}export{g as default};
|
2
|
+
//# sourceMappingURL=Pagination.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Pagination.mjs","sources":["../../../lib/components/Grid/Pagination.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport IconButton from '../IconButton';\nimport { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from '@radix-ui/react-icons';\nimport TextField from '../TextField';\nimport Select from '../Select';\nimport { MAIN_COLOR } from '../../../lib/color/constants';\nfunction Pagination(_a) {\n var _b;\n var table = _a.table;\n var color = (_b = table.options.color) !== null && _b !== void 0 ? _b : MAIN_COLOR;\n return (_jsxs(\"div\", { className: \"flex items-center gap-2\", children: [_jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () { return table.firstPage(); }, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () { return table.previousPage(); }, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, {}) }), _jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () { return table.nextPage(); }, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () { return table.lastPage(); }, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, {}) }), _jsxs(\"span\", { className: \"flex items-center gap-1\", children: [_jsx(\"div\", { children: \"Page\" }), _jsxs(\"strong\", { children: [table.getState().pagination.pageIndex + 1, \" of \", table.getPageCount().toLocaleString()] })] }), _jsxs(\"span\", { className: \"flex items-center gap-1\", children: [\"| Go to page:\", _jsx(TextField.Root, { type: \"number\", color: color, min: \"1\", max: table.getPageCount(), defaultValue: table.getState().pagination.pageIndex + 1, onChange: function (e) {\n var page = e.target.value ? Number(e.target.value) - 1 : 0;\n table.setPageIndex(page);\n }, className: \"w-16 rounded border p-1\" })] }), _jsxs(Select.Root, { color: color, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {\n table.setPageSize(Number(e));\n }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 40, 50].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] })] }));\n}\nexport default Pagination;\n"],"names":["Pagination","_a","_b","table","color","options","MAIN_COLOR","_jsxs","className","children","_jsx","IconButton","onClick","firstPage","disabled","getCanPreviousPage","DoubleArrowLeftIcon","previousPage","ChevronLeftIcon","nextPage","getCanNextPage","ChevronRightIcon","lastPage","DoubleArrowRightIcon","getState","pagination","pageIndex","getPageCount","toLocaleString","TextField","Root","type","min","max","defaultValue","onChange","e","page","target","value","Number","setPageIndex","Select","String","pageSize","onValueChange","setPageSize","Trigger","Content","map","Item"],"mappings":"wWAMA,SAASA,EAAWC,GAChB,IAAIC,EACAC,EAAQF,EAAGE,MACXC,EAAuC,QAA9BF,EAAKC,EAAME,QAAQD,aAA0B,IAAPF,EAAgBA,EAAKI,EACxE,OAAQC,EAAM,MAAO,CAAEC,UAAW,0BAA2BC,SAAU,CAACC,EAAKC,EAAY,CAAEH,UAAW,qBAAsBJ,MAAOA,EAAOQ,QAAS,WAAc,OAAOT,EAAMU,WAAc,EAAEC,UAAWX,EAAMY,qBAAsBN,SAAUC,EAAKM,EAAqB,MAAQN,EAAKC,EAAY,CAAEH,UAAW,qBAAsBJ,MAAOA,EAAOQ,QAAS,WAAc,OAAOT,EAAMc,cAAe,EAAIH,UAAWX,EAAMY,qBAAsBN,SAAUC,EAAKQ,EAAiB,CAAE,KAAMR,EAAKC,EAAY,CAAEH,UAAW,qBAAsBJ,MAAOA,EAAOQ,QAAS,WAAc,OAAOT,EAAMgB,YAAeL,UAAWX,EAAMiB,iBAAkBX,SAAUC,EAAKW,EAAkB,CAAE,KAAMX,EAAKC,EAAY,CAAEH,UAAW,qBAAsBJ,MAAOA,EAAOQ,QAAS,WAAc,OAAOT,EAAMmB,YAAeR,UAAWX,EAAMiB,iBAAkBX,SAAUC,EAAKa,EAAsB,CAAA,KAAQhB,EAAM,OAAQ,CAAEC,UAAW,0BAA2BC,SAAU,CAACC,EAAK,MAAO,CAAED,SAAU,SAAWF,EAAM,SAAU,CAAEE,SAAU,CAACN,EAAMqB,WAAWC,WAAWC,UAAY,EAAG,OAAQvB,EAAMwB,eAAeC,uBAA0BrB,EAAM,OAAQ,CAAEC,UAAW,0BAA2BC,SAAU,CAAC,gBAAiBC,EAAKmB,EAAUC,KAAM,CAAEC,KAAM,SAAU3B,MAAOA,EAAO4B,IAAK,IAAKC,IAAK9B,EAAMwB,eAAgBO,aAAc/B,EAAMqB,WAAWC,WAAWC,UAAY,EAAGS,SAAU,SAAUC,GACnyC,IAAIC,EAAOD,EAAEE,OAAOC,MAAQC,OAAOJ,EAAEE,OAAOC,OAAS,EAAI,EACzDpC,EAAMsC,aAAaJ,EACtB,EAAE7B,UAAW,+BAAkCD,EAAMmC,EAAOZ,KAAM,CAAE1B,MAAOA,EAAOmC,MAAOI,OAAOxC,EAAMqB,WAAWC,WAAWmB,UAAWV,aAAcS,OAAOxC,EAAMqB,WAAWC,WAAWmB,UAAWC,cAAe,SAAUT,GACjOjC,EAAM2C,YAAYN,OAAOJ,GAC7C,EAAmB3B,SAAU,CAACC,EAAKgC,EAAOK,QAAS,CAAE,GAAGrC,EAAKgC,EAAOM,QAAS,CAAEvC,SAAU,CAAC,GAAI,GAAI,GAAI,GAAI,IAAIwC,KAAI,SAAUL,GAAY,OAAQlC,EAAKgC,EAAOQ,KAAM,CAAEX,MAAOI,OAAOC,GAAWnC,SAAUmC,GAAYA,EAAa,WAChO"}
|
@@ -7,7 +7,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
|
|
7
7
|
import { cn } from '../../../lib/utils/utils';
|
8
8
|
import { bgColorStyle } from '../../../lib/constants';
|
9
9
|
import { cva } from 'class-variance-authority';
|
10
|
-
import
|
10
|
+
import Pagination from './Pagination';
|
11
11
|
export var GridVariants = cva("", {
|
12
12
|
variants: {
|
13
13
|
color: bgColorStyle(),
|
@@ -54,6 +54,6 @@ function Grid(_a) {
|
|
54
54
|
.getRowModel()
|
55
55
|
.rows.map(function (row) { return (_jsx(Table.Row, { children: row.getVisibleCells().map(function (cell) { return (_jsx(Table.Cell, { style: {
|
56
56
|
width: cell.column.getSize(),
|
57
|
-
}, className: "h-[30px]", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); }) })] }), _jsx("div", { className: "h-2" }), ((_d = table.options) === null || _d === void 0 ? void 0 : _d.enableRowPagination) && _jsx(
|
57
|
+
}, className: "h-[30px]", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); }) })] }), _jsx("div", { className: "h-2" }), ((_d = table.options) === null || _d === void 0 ? void 0 : _d.enableRowPagination) && _jsx(Pagination, { table: table })] }) }));
|
58
58
|
}
|
59
59
|
export default Grid;
|
@@ -1,3 +1,3 @@
|
|
1
1
|
"use client";
|
2
|
-
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{flexRender as t}from"@tanstack/react-table";import n from"../Table/index.mjs";import{ChevronUpIcon as i,ChevronDownIcon as r}from"@radix-ui/react-icons";import{cn as l}from"../../utils/utils.mjs";import{bgColorStyle as a}from"../../constants.mjs";import{cva as c}from"class-variance-authority";import s from"./
|
2
|
+
import{jsx as e,jsxs as o}from"react/jsx-runtime";import{flexRender as t}from"@tanstack/react-table";import n from"../Table/index.mjs";import{ChevronUpIcon as i,ChevronDownIcon as r}from"@radix-ui/react-icons";import{cn as l}from"../../utils/utils.mjs";import{bgColorStyle as a}from"../../constants.mjs";import{cva as c}from"class-variance-authority";import s from"./Pagination.mjs";var d=c("",{variants:{color:a()},defaultVariants:{color:"red"}});function u(a){var c,u,m,p=a.table;return e("div",{style:{direction:p.options.columnResizeDirection},children:o("div",{className:"overflow-x-auto",children:[o(n.Root,{style:{},appearance:null===(c=p.options)||void 0===c?void 0:c.appearance,radius:null===(u=p.options)||void 0===u?void 0:u.radius,children:[e(n.Header,{children:p.getHeaderGroups().map((function(a){return e(n.Row,{children:a.headers.map((function(a){var c;return o(n.ColumnHeaderCell,{colSpan:a.colSpan,style:{width:a.getSize()},children:[a.isPlaceholder?null:o("div",{className:a.column.getCanSort()?"flex cursor-pointer select-none":"",onClick:a.column.getToggleSortingHandler(),title:a.column.getCanSort()?"asc"===a.column.getNextSortingOrder()?"Sort ascending":"desc"===a.column.getNextSortingOrder()?"Sort descending":"Clear sort":void 0,children:[t(a.column.columnDef.header,a.getContext()),"asc"==a.column.getIsSorted()?e(i,{}):"desc"==a.column.getIsSorted()?e(r,{}):null]}),e("div",{onDoubleClick:function(){return a.column.resetSize()},onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler(),className:l("absolute top-0 h-full w-[3px] bg-slateA-3 cursor-col-resize select-none touch-none right-0 opacity-0 hover:opacity-100",p.options.columnResizeDirection,a.column.getIsResizing()?d({color:p.options.color}):""),style:{transform:a.column.getIsResizing()?"translateX(".concat(("rtl"===p.options.columnResizeDirection?-1:1)*(null!==(c=p.getState().columnSizingInfo.deltaOffset)&&void 0!==c?c:0),"px)"):""}})]},a.id)}))},a.id)}))}),e(n.Body,{children:p.getRowModel().rows.map((function(o){return e(n.Row,{children:o.getVisibleCells().map((function(o){return e(n.Cell,{style:{width:o.column.getSize()},className:"h-[30px]",children:t(o.column.columnDef.cell,o.getContext())},o.id)}))},o.id)}))})]}),e("div",{className:"h-2"}),(null===(m=p.options)||void 0===m?void 0:m.enableRowPagination)&&e(s,{table:p})]})})}export{d as GridVariants,u as default};
|
3
3
|
//# sourceMappingURL=index.mjs.map
|
@@ -58,25 +58,36 @@ export var useGrid = function (_a) {
|
|
58
58
|
} });
|
59
59
|
}
|
60
60
|
}, [props.enableExpanding]);
|
61
|
-
useEffect(
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
61
|
+
// useEffect(() => {
|
62
|
+
// if (props.enableRowSelection) {
|
63
|
+
// columnsData?.unshift({
|
64
|
+
// id: 'select',
|
65
|
+
// header: ({ table }: any) => (
|
66
|
+
// <div className="header-checkbox">
|
67
|
+
// <IndeterminateCheckbox
|
68
|
+
// {...{
|
69
|
+
// checked: table.getIsAllRowsSelected() || table.getIsSomeRowsSelected(),
|
70
|
+
// indeterminate: table.getIsSomeRowsSelected(),
|
71
|
+
// onChange: table.getToggleAllRowsSelectedHandler(),
|
72
|
+
// }}
|
73
|
+
// />
|
74
|
+
// </div>
|
75
|
+
// ),
|
76
|
+
// cell: ({ row }: any) => (
|
77
|
+
// <div className="px-1" style={{ paddingLeft: `${row.depth * 10}px` }}>
|
78
|
+
// <IndeterminateCheckbox
|
79
|
+
// {...{
|
80
|
+
// checked:
|
81
|
+
// row.getIsSelected() || row.getIsSomeSelected() || row.getIsAllSubRowsSelected(),
|
82
|
+
// indeterminate: row.getIsSomeSelected() && !row.getIsAllSubRowsSelected(),
|
83
|
+
// onChange: row.getToggleSelectedHandler(),
|
84
|
+
// }}
|
85
|
+
// />
|
86
|
+
// </div>
|
87
|
+
// ),
|
88
|
+
// });
|
89
|
+
// }
|
90
|
+
// }, [props.enableRowSelection]);
|
80
91
|
var reactTableProps = __assign(__assign({ state: { sorting: sorting, rowSelection: rowSelection, expanded: expanded } }, props), { data: props.data, columns: columnsData, color: (_c = props.color) !== null && _c !== void 0 ? _c : theme.themeColor, paginateExpandedRows: true, enableExpanding: !!props.enableExpanding, getSubRows: function (row) { return row.subRows; }, onExpandedChange: setExpanded, onSortingChange: setSorting, onRowSelectionChange: setRowSelection, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel() });
|
81
92
|
if (props.enableRowPagination) {
|
82
93
|
reactTableProps['getPaginationRowModel'] = getPaginationRowModel();
|
@@ -1,3 +1,3 @@
|
|
1
1
|
"use client";
|
2
|
-
import{jsxs as e,jsx as
|
2
|
+
import{jsxs as e,jsx as o,Fragment as n}from"react/jsx-runtime";import{createColumnHelper as t,getSortedRowModel as r,getCoreRowModel as a,getExpandedRowModel as i,getPaginationRowModel as l,useReactTable as c}from"@tanstack/react-table";import d,{useEffect as p}from"react";import{IconButton as s}from"../IconButton/index.mjs";import{ChevronDownIcon as u,ChevronRightIcon as g}from"@radix-ui/react-icons";import"../Checkbox/index.mjs";import{useTheme as m}from"../../theme/ThemeProvider.mjs";var f=function(){return f=Object.assign||function(e){for(var o,n=1,t=arguments.length;n<t;n++)for(var r in o=arguments[n])Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);return e},f.apply(this,arguments)},x=function(e,o){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&o.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(t=Object.getOwnPropertySymbols(e);r<t.length;r++)o.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(e,t[r])&&(n[t[r]]=e[t[r]])}return n},h=function(h){var w,b,v=x(h,[]),y=m().theme,O=d.useState([]),E=O[0],j=O[1],S=d.useState({}),C=S[0],R=S[1],P=d.useState({}),M=P[0],k=P[1],I=t(),N=null===(w=null==v?void 0:v.columns)||void 0===w?void 0:w.map((function(e){return I.accessor(e.id,f({},e))}));p((function(){if(v.enableExpanding){var t=N[0].cell;N[0]=f(f({},N[0]),{cell:function(r){var a;return e("div",{className:"flex",style:{paddingLeft:"".concat(10*r.row.depth,"px")},children:[r.row.getCanExpand()?o(s,{onClick:r.row.getToggleExpandedHandler(),appearance:"ghost",className:"h-3 w-3",color:null!==(a=r.color)&&void 0!==a?a:y.themeColor,children:r.row.getIsExpanded()?o(u,{}):o(g,{})}):o(n,{}),o("div",{children:t?t(r):r.getValue()})]})}})}}),[v.enableExpanding]);var T=f(f({state:{sorting:E,rowSelection:M,expanded:C}},v),{data:v.data,columns:N,color:null!==(b=v.color)&&void 0!==b?b:y.themeColor,paginateExpandedRows:!0,enableExpanding:!!v.enableExpanding,getSubRows:function(e){return e.subRows},onExpandedChange:R,onSortingChange:j,onRowSelectionChange:k,getSortedRowModel:r(),getCoreRowModel:a(),getExpandedRowModel:i()});return v.enableRowPagination&&(T.getPaginationRowModel=l()),c(T)};export{h as useGrid};
|
3
3
|
//# sourceMappingURL=useGrid.mjs.map
|