@secondstaxorg/sscomp 2.1.13 → 2.1.15

package/dist/index.js

@@ -27057,6 +27057,11 @@ const Table = styled.table`
     line-height: 19px;
     font-family: Circular Book Medium, sans-serif;*/
   }
+    th .thead-label{
+        width:100%;
+        display: flex;
+        justify-content: space-between;
+    }
   tbody tr{
     background: ${theme.colors.white};
   }
@@ -27105,42 +27110,85 @@ const Table = styled.table`
   }
 `;
 
-const _jsxFileName$p = "D:\\SSX\\Projects\\SSX Comps\\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; }
+const _jsxFileName$p = "D:\\SSX\\Projects\\SSX Comps\\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; }// import CaretDown from "./CaretDown";
+
+
+
+
+
+const CaretDown = ({direction}) => {
+    return (
+        React$1.createElement('svg', { style: {transform:`rotate(${direction === 'up' ? '180deg' : '0deg'})`,width:15}, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512"   , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 13}}, React$1.createElement('path', { 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: 13}}))
+    )
+};
+
 /**
  * Default SSX table component
  */
 const TablePrimary = (props) => {
-    const {thead,children,tbody,clickedRow,showPagination,itemsPerPage,paginatedItems} = props;
+    const {thead,children,tbody,clickedRow,showPagination,itemsPerPage,paginatedItems,sortBy} = props;
     const [tbodyItems,setTbodyItems] = React$1.useState([]);
-    const [tbodyOri,setTbodyOri] = React$1.useState(undefined);
+    const [tbodyOri,setTbodyOri] = React$1.useState(_nullishCoalesce$2(tbody, () => ( [])));
+    const [dataToShow,setDataToShow] = React$1.useState(_nullishCoalesce$2(tbody, () => ( [])));
     const [sortedCol,setSortedCol] = React$1.useState('');
+    const [sortDirection,setSortDirection] = React$1.useState('desc');
 
     React$1.useEffect(()=>{
-        setTbodyOri(tbody);
-    },[tbody]);
+        if (sortBy && thead.some(item => item.dataKey === sortBy)){
+            sortByColumn(sortBy);
+        }
+    },[sortBy]);
 
-    function sortByColumn(column){
+    /*useEffect(()=>{
         if (tbody){
-            if(typeof (tbody )[0][column] !== 'string') return
+            thead
+        }
+    },[tbody])*/
+
+    /*function sortByColumn(column:string){
+        if (tbody){
+            if(typeof (tbody as any)[0][column] !== 'string') return
         }
         if (column === sortedCol){
             if (tbody && tbody.length > 0){
-                const sortedItems = [...tbody];
-                sortedItems.sort((a,b) => a[column].localeCompare(b[column]));
-                let revSort = sortedItems.reverse();
-                setTbodyOri(revSort);
-                setSortedCol('');
+                const sortedItems = [...tbody]
+                sortedItems.sort((a:any,b:any) => a[column].localeCompare(b[column]))
+                let revSort = sortedItems.reverse()
+                setTbodyOri(revSort)
+                // setSortedCol('')
             }
             return
         }else if(column !== sortedCol){
-            setSortedCol(column);
+            setSortedCol(column)
             if (tbody && tbody.length > 0){
-                const sortedItems = [...tbody];
-                sortedItems.sort((a,b) => a[column].localeCompare(b[column]));
-                setTbodyOri(sortedItems);
+                const sortedItems = [...tbody]
+                sortedItems.sort((a:any,b:any) => a[column].localeCompare(b[column]))
+                setTbodyOri(sortedItems)
             }
             return
         }
+    }*/
+
+
+    function sortByColumn(column) {
+        let sorted;
+
+        if (sortedCol !== column){
+            sorted = tbodyOri.sort((a,b) => a[column].localeCompare(b[column]));
+            setSortDirection('asc');
+            setSortedCol(column);
+        }else {
+            if (sortDirection === 'desc') {
+                sorted = tbodyOri.sort((a,b) => a[column].localeCompare(b[column]));
+                setSortDirection('asc');
+                setSortedCol(column);
+            }else {
+                sorted = tbodyOri.sort((a,b) => b[column].localeCompare(a[column]));
+                setSortDirection('desc');
+                setSortedCol(column);
+            }
+        }
+        setDataToShow(sorted);
     }
 
     React$1.useEffect(()=>{
@@ -27151,33 +27199,33 @@ const TablePrimary = (props) => {
 
     return (
         React$1.createElement(React$1.Fragment, null
-            , React$1.createElement(TableContainer$1, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 51}}
-                , React$1.createElement(Table, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 52}}
-                    , React$1.createElement('thead', {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 53}}
-                    , React$1.createElement('tr', { className: "rounded-row paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 54}}
+            , React$1.createElement(TableContainer$1, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 94}}
+                , React$1.createElement(Table, {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 95}}
+                    , React$1.createElement('thead', {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 96}}
+                    , React$1.createElement('tr', { className: "rounded-row paragraph2Medium" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 97}}
                         , thead.map((item,index) => (
                             React$1.createElement('th', { key: index, onClick: ()=>{
                                 sortByColumn(item.dataKey);
-                            }, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 56}}, item.label)
+                            }, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 99}}, React$1.createElement('span', { className: "thead-label", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 101}}, item.label, " " , sortedCol === item.dataKey && React$1.createElement(CaretDown, { direction: sortDirection === 'asc' ? 'up' : 'down', __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 101}})))
                         ))
                     )
                     )
-                    , React$1.createElement('tbody', { className: "rounded-row paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 62}}
+                    , React$1.createElement('tbody', { className: "rounded-row paragraph2Regular" , __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 105}}
                     , children
-                    , !children && tbodyItems && tbodyItems.map((item,index) => (
+                    , !children && dataToShow && dataToShow.map((item,index) => (
                         React$1.createElement('tr', { key: index, className: clickedRow && 'clickable', onClick: ()=>{
                             if (clickedRow) {
                                 clickedRow(item);
-                            }}, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 65}}
+                            }}, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 108}}
                             , thead.map((cellItem,index) => (
-                                React$1.createElement('td', { key: index, className: (index == thead.length - 1 && clickedRow) ? 'with-arrow' : '', __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 70}}
-                                , React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 71}}
+                                React$1.createElement('td', { key: index, className: (index == thead.length - 1 && clickedRow) ? 'with-arrow' : '', __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 113}}
+                                , React$1.createElement('span', {__self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 114}}
                                     , _nullishCoalesce$2(_optionalChain$c([cellItem, 'access', _ => _.component, 'optionalCall', _2 => _2(item)]), () => ( item[cellItem.dataKey]))
                                     /*{item[cellItem.dataKey]}*/
                                 )
                                     , (index == thead.length - 1 && clickedRow) &&
-                                        React$1.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 76}}
-                                            , React$1.createElement('path', { 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"                                                                                     , fill: "#A4BBDD", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 77}})
+                                        React$1.createElement('svg', { width: "16", height: "16", viewBox: "0 0 16 16"   , fill: "none", xmlns: "http://www.w3.org/2000/svg", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 119}}
+                                            , React$1.createElement('path', { 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"                                                                                     , fill: "#A4BBDD", __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 120}})
                                         )
                                     
                                 )
@@ -27191,7 +27239,7 @@ const TablePrimary = (props) => {
                 React$1.createElement(Pagination, { itemsPerPage: itemsPerPage, items: tbodyOri, paginatedItems: (arr)=>{
                     setTbodyItems(arr);
                     paginatedItems(arr);
-                }, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 88}})
+                }, __self: undefined, __source: {fileName: _jsxFileName$p, lineNumber: 131}})
             
         )
     )