@secondstaxorg/sscomp 2.1.19 → 2.1.22
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/index.es.js +1 -1
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +133 -99
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
- package/types/components/TablePrimary/type.d.ts +1 -1
package/dist/index.js
CHANGED
|
@@ -27110,7 +27110,8 @@ const Table = styled.table`
|
|
|
27110
27110
|
}
|
|
27111
27111
|
`;
|
|
27112
27112
|
|
|
27113
|
-
const _jsxFileName$p = "Z:\\DevCenter\\SSX\\Projects\\Component library\\sscomp\\src\\components\\TablePrimary\\index.tsx"; function _nullishCoalesce$2(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain$c(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
27113
|
+
const _jsxFileName$p = "Z:\\DevCenter\\SSX\\Projects\\Component library\\sscomp\\src\\components\\TablePrimary\\index.tsx"; function _nullishCoalesce$2(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain$c(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
|
|
27114
|
+
// import CaretDown from "./CaretDown";
|
|
27114
27115
|
|
|
27115
27116
|
|
|
27116
27117
|
|
|
@@ -27118,7 +27119,11 @@ const _jsxFileName$p = "Z:\\DevCenter\\SSX\\Projects\\Component library\\sscomp\
|
|
|
27118
27119
|
|
|
27119
27120
|
const CaretDown = ({direction}) => {
|
|
27120
27121
|
return (
|
|
27121
|
-
React$1.createElement('svg', { style: {transform
|
|
27122
|
+
React$1.createElement('svg', { style: {transform: `rotate(${direction === 'up' ? '180deg' : '0deg'})`, width: 15}, fill: "currentColor",
|
|
27123
|
+
xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 14}}
|
|
27124
|
+
, React$1.createElement('path', {
|
|
27125
|
+
d: "M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 16}})
|
|
27126
|
+
)
|
|
27122
27127
|
)
|
|
27123
27128
|
};
|
|
27124
27129
|
|
|
@@ -27126,135 +27131,164 @@ const CaretDown = ({direction}) => {
|
|
|
27126
27131
|
* Default SSX table component
|
|
27127
27132
|
*/
|
|
27128
27133
|
const TablePrimary = (props) => {
|
|
27129
|
-
const {thead,children,tbody,clickedRow,showPagination,itemsPerPage,paginatedItems,sortBy} = props;
|
|
27130
|
-
const [
|
|
27131
|
-
const [
|
|
27132
|
-
const [
|
|
27133
|
-
const [
|
|
27134
|
-
const [sortDirection,setSortDirection] = React$1.useState('desc');
|
|
27135
|
-
|
|
27136
|
-
React$1.useEffect(()=>{
|
|
27137
|
-
if (sortBy && thead.some(item => item.dataKey === sortBy)){
|
|
27138
|
-
sortByColumn(sortBy);
|
|
27139
|
-
}
|
|
27140
|
-
},[sortBy]);
|
|
27134
|
+
const {thead, children, tbody, clickedRow, showPagination, itemsPerPage, paginatedItems, sortBy} = props;
|
|
27135
|
+
const [dataToShow, setDataToShow] = React$1.useState([]);
|
|
27136
|
+
const [masterData, setMasterData] = React$1.useState([]);
|
|
27137
|
+
const [sortedCol, setSortedCol] = React$1.useState('');
|
|
27138
|
+
const [sortDirection, setSortDirection] = React$1.useState('desc');
|
|
27141
27139
|
|
|
27142
|
-
|
|
27143
|
-
if (tbody){
|
|
27144
|
-
|
|
27140
|
+
React$1.useEffect(() => {
|
|
27141
|
+
if (tbody) {
|
|
27142
|
+
// setTbodyOri(tbody)
|
|
27143
|
+
// setDataToShow(tbody)
|
|
27144
|
+
setMasterData(tbody);
|
|
27145
27145
|
}
|
|
27146
|
-
},[tbody])
|
|
27146
|
+
}, [tbody]);
|
|
27147
27147
|
|
|
27148
|
-
|
|
27149
|
-
if (
|
|
27150
|
-
|
|
27151
|
-
}
|
|
27152
|
-
if (column === sortedCol){
|
|
27153
|
-
if (tbody && tbody.length > 0){
|
|
27154
|
-
const sortedItems = [...tbody]
|
|
27155
|
-
sortedItems.sort((a:any,b:any) => a[column].localeCompare(b[column]))
|
|
27156
|
-
let revSort = sortedItems.reverse()
|
|
27157
|
-
setTbodyOri(revSort)
|
|
27158
|
-
// setSortedCol('')
|
|
27159
|
-
}
|
|
27160
|
-
return
|
|
27161
|
-
}else if(column !== sortedCol){
|
|
27162
|
-
setSortedCol(column)
|
|
27163
|
-
if (tbody && tbody.length > 0){
|
|
27164
|
-
const sortedItems = [...tbody]
|
|
27165
|
-
sortedItems.sort((a:any,b:any) => a[column].localeCompare(b[column]))
|
|
27166
|
-
setTbodyOri(sortedItems)
|
|
27167
|
-
}
|
|
27168
|
-
return
|
|
27148
|
+
React$1.useEffect(() => {
|
|
27149
|
+
if (sortBy && thead.some(item => item.dataKey === sortBy)) {
|
|
27150
|
+
sortByColumn(sortBy);
|
|
27169
27151
|
}
|
|
27170
|
-
}
|
|
27152
|
+
}, [sortBy]);
|
|
27171
27153
|
|
|
27172
27154
|
|
|
27173
|
-
function sortByColumn(column) {
|
|
27174
|
-
let sorted
|
|
27155
|
+
/*function sortByColumn(column: string) {
|
|
27156
|
+
let sorted
|
|
27175
27157
|
|
|
27176
27158
|
//check if the column is a date column
|
|
27177
|
-
const colIsDate = thead.some(item => (item.dataKey === column && item.isDate))
|
|
27159
|
+
const colIsDate = thead.some(item => (item.dataKey === column && item.isDate))
|
|
27178
27160
|
|
|
27179
27161
|
if (sortedCol !== column){
|
|
27180
27162
|
if (colIsDate){
|
|
27181
|
-
sorted =
|
|
27182
|
-
}else
|
|
27183
|
-
sorted =
|
|
27163
|
+
sorted = masterData.sort((a:any,b:any) => new Date(b[column]).getTime().toString().localeCompare(new Date(a[column]).getTime().toString()))
|
|
27164
|
+
}else{
|
|
27165
|
+
sorted = masterData.sort((a:any,b:any) => a[column].localeCompare(b[column]))
|
|
27184
27166
|
}
|
|
27185
|
-
setSortDirection('asc')
|
|
27186
|
-
setSortedCol(column)
|
|
27187
|
-
}else
|
|
27167
|
+
setSortDirection('asc')
|
|
27168
|
+
setSortedCol(column)
|
|
27169
|
+
}else{
|
|
27188
27170
|
if (sortDirection === 'desc') {
|
|
27189
27171
|
if (colIsDate){
|
|
27190
|
-
sorted =
|
|
27191
|
-
}else
|
|
27192
|
-
sorted =
|
|
27172
|
+
sorted = masterData.sort((a:any,b:any) => new Date(b[column]).getTime().toString().localeCompare(new Date(a[column]).getTime().toString()))
|
|
27173
|
+
}else{
|
|
27174
|
+
sorted = masterData.sort((a:any,b:any) => a[column].localeCompare(b[column]))
|
|
27193
27175
|
}
|
|
27194
|
-
setSortDirection('asc')
|
|
27195
|
-
setSortedCol(column)
|
|
27196
|
-
}else
|
|
27176
|
+
setSortDirection('asc')
|
|
27177
|
+
setSortedCol(column)
|
|
27178
|
+
}else{
|
|
27197
27179
|
if (colIsDate){
|
|
27198
|
-
sorted =
|
|
27199
|
-
}else
|
|
27200
|
-
sorted =
|
|
27180
|
+
sorted = masterData.sort((a:any,b:any) => String(new Date(a[column]).getTime()).localeCompare(String(new Date(b[column]).getTime())))
|
|
27181
|
+
}else{
|
|
27182
|
+
sorted = masterData.sort((a:any,b:any) => b[column].localeCompare(a[column]))
|
|
27201
27183
|
}
|
|
27202
|
-
setSortDirection('desc')
|
|
27203
|
-
setSortedCol(column)
|
|
27184
|
+
setSortDirection('desc')
|
|
27185
|
+
setSortedCol(column)
|
|
27204
27186
|
}
|
|
27205
27187
|
}
|
|
27206
|
-
setDataToShow(sorted)
|
|
27207
|
-
|
|
27188
|
+
// setDataToShow(sorted)
|
|
27189
|
+
setTbodyOri(sorted)
|
|
27190
|
+
}*/
|
|
27208
27191
|
|
|
27209
|
-
|
|
27210
|
-
|
|
27211
|
-
|
|
27192
|
+
function sortByColumn(column) {
|
|
27193
|
+
const colIsDate = thead.some(item => item.dataKey === column && item.isDate);
|
|
27194
|
+
let sorted = [...masterData]; // clone so we don't mutate state directly
|
|
27195
|
+
|
|
27196
|
+
if (sortedCol !== column) {
|
|
27197
|
+
// New column clicked → sort ascending first
|
|
27198
|
+
if (colIsDate) {
|
|
27199
|
+
sorted.sort((a, b) =>
|
|
27200
|
+
new Date(a[column]).getTime() - new Date(b[column]).getTime()
|
|
27201
|
+
);
|
|
27202
|
+
} else {
|
|
27203
|
+
sorted.sort((a, b) =>
|
|
27204
|
+
String(a[column]).localeCompare(String(b[column]))
|
|
27205
|
+
);
|
|
27206
|
+
}
|
|
27207
|
+
setSortDirection("asc");
|
|
27208
|
+
setSortedCol(column);
|
|
27209
|
+
} else {
|
|
27210
|
+
// Same column clicked → toggle direction
|
|
27211
|
+
if (sortDirection === "asc") {
|
|
27212
|
+
if (colIsDate) {
|
|
27213
|
+
sorted.sort((a, b) =>
|
|
27214
|
+
new Date(b[column]).getTime() - new Date(a[column]).getTime()
|
|
27215
|
+
);
|
|
27216
|
+
} else {
|
|
27217
|
+
sorted.sort((a, b) =>
|
|
27218
|
+
String(b[column]).localeCompare(String(a[column]))
|
|
27219
|
+
);
|
|
27220
|
+
}
|
|
27221
|
+
setSortDirection("desc");
|
|
27222
|
+
} else {
|
|
27223
|
+
if (colIsDate) {
|
|
27224
|
+
sorted.sort((a, b) =>
|
|
27225
|
+
new Date(a[column]).getTime() - new Date(b[column]).getTime()
|
|
27226
|
+
);
|
|
27227
|
+
} else {
|
|
27228
|
+
sorted.sort((a, b) =>
|
|
27229
|
+
String(a[column]).localeCompare(String(b[column]))
|
|
27230
|
+
);
|
|
27231
|
+
}
|
|
27232
|
+
setSortDirection("asc");
|
|
27233
|
+
}
|
|
27212
27234
|
}
|
|
27213
|
-
|
|
27235
|
+
setMasterData(sorted); // store sorted full dataset
|
|
27236
|
+
}
|
|
27214
27237
|
|
|
27215
27238
|
return (
|
|
27216
27239
|
React$1.createElement(React$1.Fragment, null
|
|
27217
|
-
, React$1.createElement(TableContainer$1, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber:
|
|
27218
|
-
, React$1.createElement(Table, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber:
|
|
27219
|
-
, React$1.createElement('thead', {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber:
|
|
27220
|
-
, React$1.createElement('tr', { className: "rounded-row paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber:
|
|
27221
|
-
, thead.map((item,index) => (
|
|
27222
|
-
React$1.createElement('th', { key: index, onClick: ()=>{
|
|
27240
|
+
, React$1.createElement(TableContainer$1, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 132}}
|
|
27241
|
+
, React$1.createElement(Table, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 133}}
|
|
27242
|
+
, React$1.createElement('thead', {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 134}}
|
|
27243
|
+
, React$1.createElement('tr', { className: "rounded-row paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 135}}
|
|
27244
|
+
, thead.map((item, index) => (
|
|
27245
|
+
React$1.createElement('th', { key: index, onClick: () => {
|
|
27223
27246
|
sortByColumn(item.dataKey);
|
|
27224
|
-
}, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber:
|
|
27247
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 137}}
|
|
27248
|
+
, React$1.createElement('span', { className: "thead-label", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 140}}, item.label, " " , sortedCol === item.dataKey &&
|
|
27249
|
+
React$1.createElement(CaretDown, { direction: sortDirection === 'asc' ? 'up' : 'down', __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 141}}))
|
|
27250
|
+
)
|
|
27225
27251
|
))
|
|
27226
27252
|
)
|
|
27227
27253
|
)
|
|
27228
|
-
, React$1.createElement('tbody', { className: "rounded-row paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber:
|
|
27254
|
+
, React$1.createElement('tbody', { className: "rounded-row paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 146}}
|
|
27229
27255
|
, children
|
|
27230
|
-
, !children &&
|
|
27231
|
-
|
|
27232
|
-
|
|
27233
|
-
clickedRow
|
|
27234
|
-
|
|
27235
|
-
|
|
27236
|
-
|
|
27237
|
-
,
|
|
27238
|
-
|
|
27239
|
-
|
|
27240
|
-
|
|
27241
|
-
|
|
27242
|
-
|
|
27243
|
-
|
|
27244
|
-
)
|
|
27245
|
-
|
|
27246
|
-
|
|
27247
|
-
|
|
27248
|
-
|
|
27249
|
-
|
|
27256
|
+
, !children && masterData && masterData.map((item, index) => {
|
|
27257
|
+
return (
|
|
27258
|
+
React$1.createElement('tr', { key: index, className: clickedRow && 'clickable', onClick: () => {
|
|
27259
|
+
if (clickedRow) {
|
|
27260
|
+
clickedRow(item);
|
|
27261
|
+
}
|
|
27262
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 150}}
|
|
27263
|
+
, thead.map((cellItem, index) => (
|
|
27264
|
+
React$1.createElement('td', { key: index,
|
|
27265
|
+
className: (index == thead.length - 1 && clickedRow) ? 'with-arrow' : '', __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 156}}
|
|
27266
|
+
, React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 158}}
|
|
27267
|
+
, _nullishCoalesce$2(_optionalChain$c([cellItem, 'access', _ => _.component, 'optionalCall', _2 => _2(item)]), () => ( item[cellItem.dataKey]))
|
|
27268
|
+
/*{item[cellItem.dataKey]}*/
|
|
27269
|
+
)
|
|
27270
|
+
, (index == thead.length - 1 && clickedRow) &&
|
|
27271
|
+
React$1.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16" , fill: "none",
|
|
27272
|
+
xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 163}}
|
|
27273
|
+
, React$1.createElement('path', {
|
|
27274
|
+
d: "M10.3592 7.52685L6.58584 3.76019C6.52387 3.6977 6.45013 3.64811 6.36889 3.61426C6.28765 3.58041 6.20052 3.56299 6.11251 3.56299C6.0245 3.56299 5.93736 3.58041 5.85612 3.61426C5.77488 3.64811 5.70115 3.6977 5.63917 3.76019C5.51501 3.8851 5.44531 4.05406 5.44531 4.23019C5.44531 4.40631 5.51501 4.57528 5.63917 4.70019L8.93917 8.03352L5.63917 11.3335C5.51501 11.4584 5.44531 11.6274 5.44531 11.8035C5.44531 11.9796 5.51501 12.1486 5.63917 12.2735C5.70092 12.3365 5.77455 12.3866 5.8558 12.421C5.93705 12.4553 6.0243 12.4732 6.11251 12.4735C6.20071 12.4732 6.28797 12.4553 6.36922 12.421C6.45047 12.3866 6.5241 12.3365 6.58584 12.2735L10.3592 8.50685C10.4268 8.44443 10.4808 8.36866 10.5178 8.28432C10.5547 8.19999 10.5738 8.10892 10.5738 8.01685C10.5738 7.92479 10.5547 7.83372 10.5178 7.74938C10.4808 7.66505 10.4268 7.58928 10.3592 7.52685Z" ,
|
|
27275
|
+
fill: "#A4BBDD", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 165}})
|
|
27276
|
+
)
|
|
27277
|
+
|
|
27278
|
+
)
|
|
27279
|
+
))
|
|
27280
|
+
)
|
|
27281
|
+
)})
|
|
27250
27282
|
)
|
|
27251
27283
|
)
|
|
27252
27284
|
)
|
|
27253
|
-
, showPagination && itemsPerPage && itemsPerPage > 0 &&
|
|
27254
|
-
React$1.createElement(Pagination, { itemsPerPage: itemsPerPage, items:
|
|
27255
|
-
setTbodyItems(arr)
|
|
27256
|
-
|
|
27257
|
-
|
|
27285
|
+
, showPagination && itemsPerPage && itemsPerPage > 0 && masterData &&
|
|
27286
|
+
React$1.createElement(Pagination, { itemsPerPage: itemsPerPage, items: masterData, paginatedItems: (arr) => {
|
|
27287
|
+
// setTbodyItems(arr)
|
|
27288
|
+
setMasterData(arr);
|
|
27289
|
+
setDataToShow(arr);
|
|
27290
|
+
if (paginatedItems) paginatedItems(arr);
|
|
27291
|
+
}, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 178}})
|
|
27258
27292
|
|
|
27259
27293
|
)
|
|
27260
27294
|
)
|