@gpa-gemstone/react-table 1.2.56 → 1.2.58

package/lib/AdjustableTable/Column.d.ts

@@ -1,59 +1,20 @@
 import * as React from 'react';
-export interface IColumnProps<T> {
-    /**
-     * a unique Key for this Collumn
-     */
-    Key: string;
-    /**
-     * Flag indicating whether sorting by this Collumn is allowed
-     */
-    AllowSort?: boolean;
-    /**
-     * Optional - the Field to be used
-     */
-    Field?: keyof T;
-    /**
-     * The Default style for the th element
-     */
-    HeaderStyle?: React.CSSProperties;
-    /**
-     * The Default style for the td element
-     */
-    RowStyle?: React.CSSProperties;
-    /**
-     * Determines the Content to be displayed
-     * @param d the data to be turned into content
-     * @returns the content displayed
-     */
-    Content?: (d: {
-        item: T;
-        key: string;
-        field: keyof T | undefined;
-        index: number;
-        style?: React.CSSProperties;
-    }) => React.ReactNode;
-}
-export default function Column<T>(props: React.PropsWithChildren<IColumnProps<T>>): JSX.Element;
+import * as ReactTableProps from './Types';
+export declare function AdjustableColumn<T>(props: React.PropsWithChildren<ReactTableProps.IColumn<T>>): JSX.Element;
+export declare function Column<T>(props: React.PropsWithChildren<ReactTableProps.IColumn<T>>): JSX.Element;
 export interface IHeaderWrapperProps {
-    setWidth: (w: number, a: boolean, u: boolean) => void;
     onSort: React.MouseEventHandler<HTMLTableCellElement>;
+    startAdjustment?: React.MouseEventHandler<HTMLDivElement>;
     sorted: boolean;
     asc: boolean;
     style: React.CSSProperties;
     allowSort?: boolean;
     colKey: string;
-    width?: number;
-    enabled: boolean;
-    extraWidth: number;
 }
-export declare function ColumnHeaderWrapper(props: React.PropsWithChildren<IHeaderWrapperProps>): JSX.Element | null;
+export declare function ColumnHeaderWrapper(props: React.PropsWithChildren<IHeaderWrapperProps>): JSX.Element;
 export interface IDataWrapperProps {
-    setWidth: (w: number, a: boolean, u: boolean) => void;
-    width?: number;
-    enabled: boolean;
     dragStart?: (e: React.DragEvent) => void;
     onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
     style: React.CSSProperties;
-    extraWidth: number;
 }
-export declare function ColumnDataWrapper(props: React.PropsWithChildren<IDataWrapperProps>): JSX.Element | null;
+export declare function ColumnDataWrapper(props: React.PropsWithChildren<IDataWrapperProps>): JSX.Element;

package/lib/AdjustableTable/Column.js

@@ -21,78 +21,57 @@
 //       Generated original version of source code.
 //  05/31/2024 - C. Lackner
 //       Refactored to fix sizing issues.
+//  12/04/2024 - G. Santos
+//       Refactored to fix performance issues.
 //
 //  ******************************************************************************************************
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Column;
+exports.AdjustableColumn = AdjustableColumn;
+exports.Column = Column;
 exports.ColumnHeaderWrapper = ColumnHeaderWrapper;
 exports.ColumnDataWrapper = ColumnDataWrapper;
 const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
 const React = require("react");
+function AdjustableColumn(props) {
+    return React.createElement(React.Fragment, null, props.children);
+}
 function Column(props) {
     return React.createElement(React.Fragment, null, props.children);
 }
 function ColumnHeaderWrapper(props) {
-    var _a, _b, _c, _d, _e, _f;
-    const thref = React.useRef(null);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    style.position = (_c = style.position) !== null && _c !== void 0 ? _c : 'relative';
-    style.borderTop = (_d = style.borderTop) !== null && _d !== void 0 ? _d : 'none';
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (style.cursor === undefined && ((_e = props.allowSort) !== null && _e !== void 0 ? _e : true)) {
-        style.cursor = 'pointer';
-    }
-    React.useLayoutEffect(() => {
-        var _a;
-        if (thref.current == null)
-            return;
-        const w = (_a = thref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
-            return;
-        props.setWidth(w, isAuto, isUndefined);
-    });
+    var _a;
+    const [showBorder, setShowBorder] = React.useState(false);
+    const onHover = React.useCallback(() => { setShowBorder(true); }, []);
+    const onLeave = React.useCallback(() => { setShowBorder(false); }, []);
+    const onClickBorder = React.useCallback((e) => {
+        if (props.startAdjustment != null)
+            props.startAdjustment(e);
+    }, [props.startAdjustment]);
     const onClick = React.useCallback((e) => {
         var _a;
         if ((_a = props.allowSort) !== null && _a !== void 0 ? _a : true)
             props.onSort(e);
     }, [props.onSort, props.allowSort]);
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return React.createElement("th", { ref: thref, style: style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); } },
+    const preventPropagation = React.useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    return React.createElement("th", { style: props.style, onClick: onClick, onDrag: (e) => { e.stopPropagation(); }, id: props.colKey },
+        props.startAdjustment == null ? React.createElement(React.Fragment, null) :
+            React.createElement("div", { style: {
+                    width: 5,
+                    height: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    opacity: showBorder ? 1 : 0,
+                    background: '#e9ecef',
+                    cursor: 'col-resize',
+                }, onMouseEnter: onHover, onMouseLeave: onLeave, onMouseDown: onClickBorder, onClick: preventPropagation }),
         props.sorted ? React.createElement("div", { style: { position: 'absolute', width: 25 } }, props.asc ? React.createElement(gpa_symbols_1.ReactIcons.ArrowDropUp, null) : React.createElement(gpa_symbols_1.ReactIcons.ArrowDropDown, null)) : null,
         React.createElement("div", { style: {
                 marginLeft: (props.sorted ? 25 : 0),
-            } }, (_f = props.children) !== null && _f !== void 0 ? _f : props.colKey));
+            } }, (_a = props.children) !== null && _a !== void 0 ? _a : props.colKey));
 }
 function ColumnDataWrapper(props) {
-    var _a, _b;
-    const tdref = React.useRef(null);
-    const style = (props.style !== undefined) ? Object.assign({}, props.style) : {};
-    style.overflowX = (_a = style.overflowX) !== null && _a !== void 0 ? _a : 'hidden';
-    style.display = (_b = style.display) !== null && _b !== void 0 ? _b : 'inline-block';
-    const isAuto = style.width == 'auto';
-    const isUndefined = style.width === undefined;
-    if ((style.width == undefined || style.width == 'auto') && props.width !== undefined) {
-        style.width = (props.width) + props.extraWidth;
-    }
-    if (props.dragStart !== undefined)
-        style.cursor = "grab";
-    React.useLayoutEffect(() => {
-        var _a;
-        if (tdref.current == null)
-            return;
-        const w = (_a = tdref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
-        if (props.width !== undefined && (w === undefined || w == (props.width + props.extraWidth)))
-            return;
-        props.setWidth(w, isAuto, isUndefined);
-    });
-    if (props.width != undefined && !props.enabled)
-        return null;
-    return (React.createElement("td", { ref: tdref, style: style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
+    return (React.createElement("td", { style: props.style, onClick: props.onClick, draggable: props.dragStart !== undefined, onDragStart: props.dragStart }, props.children));
 }

package/lib/AdjustableTable/Table.d.ts

@@ -1,117 +1,3 @@
 import * as React from 'react';
-interface TableProps<T> {
-    /**
-    * List of T objects used to generate rows
-    */
-    Data: T[];
-    /**
-    * Callback when the user clicks on a data entry
-    * @param data contains the data including the columnKey
-    * @param event the onClick Event to allow propagation as needed
-    * @returns
-    */
-    OnClick?: (data: {
-        colKey?: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /**
-    * Key of the collumn to sort by
-    */
-    SortKey: string;
-    /**
-    * Boolen to indicate whether the sort is ascending or descending
-    */
-    Ascending: boolean;
-    /**
-    * Callback when the data should be sorted
-    * @param data the information of the collumn including the Key of the collumn
-    * @param event The onCLick event to allow Propagation as needed
-    */
-    OnSort(data: {
-        colKey: string;
-        colField?: keyof T;
-        ascending: boolean;
-    }, event: React.MouseEvent<HTMLElement, MouseEvent>): void;
-    /**
-    * Class of the table component
-    */
-    TableClass?: string;
-    /**
-    * style of the table component
-    */
-    TableStyle?: React.CSSProperties;
-    /**
-    * style of the thead component
-    */
-    TheadStyle?: React.CSSProperties;
-    /**
-    * Class of the thead component
-    */
-    TheadClass?: string;
-    /**
-    * style of the tbody component
-    * Note: Display style overwritten to "block"
-    */
-    TbodyStyle?: React.CSSProperties;
-    /**
-    * Class of the tbody component
-    */
-    TbodyClass?: string;
-    /**
-    * style of the tfoot component
-    */
-    TfootStyle?: React.CSSProperties;
-    /**
-    * Class of the tfoot component
-    */
-    TfootClass?: string;
-    /**
-    * determines if a row should be styled as selected
-    * @param data the item to be checked
-    * @returns true if the row should be styled as selected
-    */
-    Selected?: (data: T, index: number) => boolean;
-    /**
-    *
-    * @param data the information of the row including the item of the row
-    * @param e the event triggering this
-    * @returns
-    */
-    OnDragStart?: (data: {
-        colKey?: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, e: React.DragEvent<Element>) => void;
-    /**
-    * The default style for the tr element
-    */
-    RowStyle?: React.CSSProperties;
-    /**
-    * a Function that retrieves a unique key used for React key properties
-    * @param data the item to be turned into a key
-    * @returns a unique Key
-    */
-    KeySelector: (data: T, index?: number) => string | number;
-    /**
-    * Optional Element to display in the last row of the Table
-    * use this for displaying warnings when the Table content gets cut off.
-    * Data appears in the tfoot element
-    */
-    LastRow?: string | React.ReactNode;
-    /**
-    * Optional Element to display on upper Right corner
-    */
-    LastColumn?: string | React.ReactNode;
-    /**
-    * Optional Callback that gets called when there is not enough space to display columns
-    * @param disabled takes in string of disabled keys
-    */
-    ReduceWidthCallback?: (disabled: string[]) => void;
-}
-export default function AdjustableTable<T>(props: React.PropsWithChildren<TableProps<T>>): JSX.Element;
-export {};
+import * as ReactTableProps from './Types';
+export declare function AdjustableTable<T>(props: React.PropsWithChildren<ReactTableProps.ITable<T>>): JSX.Element;