Table update

common-pages/src/SelectionPopup.tsx

@@ -25,17 +25,17 @@ import { GenericSlice, Search} from "@gpa-gemstone/react-interactive";
 import { Application, OpenXDA, SystemCenter } from "@gpa-gemstone/application-typings";
 import SelectPopup from "./StandardSelectPopup";
 import {DefaultSearch} from './SearchBar';
-import { Column } from "@gpa-gemstone/react-table";
 
 interface U { ID: number|string }
 
+// Pass columns in via children
+
 interface IProps<T extends U> {
     Slice: GenericSlice<T>,
     Selection: T[],
     OnClose: (selected: T[], conf: boolean ) => void
     Show: boolean,
     Type?: 'single'|'multiple',
-    Columns: Column<T>[],
     Title: string,
     GetEnum: (setOptions: (options: IOptions[]) => void, field: Search.IField<T>) => () => void,
     GetAddlFields: (setAddlFields: (cols: Search.IField<T>[]) => void) => () => void,

common-pages/src/StandardSelectPopup.tsx

@@ -20,12 +20,12 @@
 //       Generated original version of source code.
 // ******************************************************************************************************
 
-import Table, { Column } from "@gpa-gemstone/react-table";
+import { ReactTable } from "@gpa-gemstone/react-table";
 import * as React from 'react';
 import { useDispatch, useSelector } from "react-redux";
 import { GenericSlice, Modal } from "@gpa-gemstone/react-interactive";
 import _ = require("lodash");
-import { CrossMark } from "@gpa-gemstone/gpa-symbols";
+import { ReactIcons } from "@gpa-gemstone/gpa-symbols";
 import { Dispatch } from "@reduxjs/toolkit";
 
 interface U { ID: number|string }
@@ -37,7 +37,6 @@ interface IProps<T extends U> {
     Show: boolean,
     Searchbar: (children: React.ReactNode) => React.ReactNode,
     Type?: 'single'|'multiple',
-    Columns: Column<T>[],
     Title: string,
     MinSelection?: number,
     children?: React.ReactNode
@@ -60,16 +59,15 @@ export default function SelectPopup<T extends U>(props: IProps<T>) {
     }, [props.Selection])
 
     function AddCurrentList() {
-        let updatedData: any[];
-        updatedData = (selectedData as any[]).concat(data);
-        setSelectedData(_.uniqBy((updatedData as T[]), (d) => d.ID));
+        const updatedData = selectedData.concat(data);
+        setSelectedData(_.uniqBy(updatedData, (d) => d.ID));
     }
 
     return (<>
         <Modal Show={props.Show} Title={props.Title} ShowX={true} Size={'xlg'} CallBack={(conf) => props.OnClose(selectedData, conf)} 
         DisableConfirm={props.MinSelection !== undefined && selectedData.length < props.MinSelection} 
         ConfirmShowToolTip={props.MinSelection !== undefined && selectedData.length < props.MinSelection}
-        ConfirmToolTipContent={<p>{CrossMark} At least {props.MinSelection} items must be selected. </p>}
+        ConfirmToolTipContent={<p><ReactIcons.CrossMark/> At least {props.MinSelection} items must be selected. </p>}
         >
             <div className="row">
                 <div className="col">
@@ -89,53 +87,54 @@ export default function SelectPopup<T extends U>(props: IProps<T>) {
                                 </fieldset>
                             </li>: null}
                         {React.Children.map(props.children, (e) => {
-                            if (React.isValidElement(e)) return e;
+                            if (React.isValidElement(e)) {
+                                if (((e as React.ReactElement<any>).type === ReactTable.AdjustableColumn) || 
+                                    ((e as React.ReactElement<any>).type === ReactTable.Column)) return null;
+                                return e;
+                            }
                             return null;
                         })}
                     </>)}
                 </div>
             </div>
             <div className="row">
                 <div className="col" style={{ width: (props.Type === undefined || props.Type === 'single' ? '100%' : '60%') } }>
-                    <Table<T>
-                        cols={props.Columns}
-                        tableClass="table table-hover"
-                        data={data}
-                        sortKey={sortField as string}
-                        ascending={ascending}
-                        onSort={(d) => {
+                    <ReactTable.Table<T>
+                        TableClass="table table-hover"
+                        Data={data}
+                        SortKey={sortField as string}
+                        Ascending={ascending}
+                        OnSort={(d) => {
                             if (d.colKey === "Scroll")
                                 return;
-
                             if (d.colKey === sortField)
                                 dispatch(props.Slice.Sort({SortField: sortField, Ascending: ascending}));
                             else {
                                 dispatch(props.Slice.Sort({SortField: d.colField as keyof T, Ascending: true}));
                             }
                         }}
-                        onClick={(d) => {
+                        OnClick={(d) => {
                             if (props.Type === undefined || props.Type === 'single')
                                 setSelectedData([d.row])
                             else
                                 setSelectedData((s) => [...s.filter(item => item.ID !== d.row.ID), d.row])
                         }}
-                        theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
-                        tbodyStyle={{ display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }}
-                        rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
-                        selected={(item) => selectedData.findIndex(d => d.ID === item.ID) > -1 }
-                    />
+                        Selected={(item) => selectedData.findIndex(d => d.ID === item.ID) > -1 }
+                        KeySelector={item => item.ID}
+                    >
+                        {props.children}
+                    </ReactTable.Table>
                 </div>
                 {props.Type === 'multiple' ? <div className="col" style={{ width: '40%' }}>
                     <div style={{ width: '100%' }}>
                         <h3> Current Selection </h3>
                     </div>
-                    <Table
-                        cols={props.Columns}
-                        tableClass="table table-hover"
-                        data={selectedData}
-                        sortKey={sortKeySelected}
-                        ascending={ascendingSelected}
-                        onSort={(d) => {
+                    <ReactTable.Table<T>
+                        TableClass="table table-hover"
+                        Data={selectedData}
+                        SortKey={sortKeySelected}
+                        Ascending={ascendingSelected}
+                        OnSort={(d) => {
                             if (d.colKey === sortKeySelected) {
                                 const ordered = _.orderBy<T[]>(selectedData, [d.colKey], [(!ascendingSelected ? "asc" : "desc")]) as any;
                                 setAscendingSelected(!ascendingSelected);
@@ -148,12 +147,12 @@ export default function SelectPopup<T extends U>(props: IProps<T>) {
                                 setSortKeySelected(d.colKey);
                             }
                         }}
-                        onClick={(d) => setSelectedData([...selectedData.filter(item => item.ID !== d.row.ID)])}
-                        theadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
-                        tbodyStyle={{ display: 'block', overflowY: 'scroll', maxHeight: '400px', width: '100%' }}
-                        rowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
-                        selected={(item) => false}
-                    />
+                        OnClick={(d) => setSelectedData([...selectedData.filter(item => item.ID !== d.row.ID)])}
+                        Selected={() => false}
+                        KeySelector={item => item.ID}
+                    >
+                        {props.children}
+                    </ReactTable.Table>
                 </div> : null}
             </div>
         </Modal>