@gpa-gemstone/react-table 1.2.57 → 1.2.59

package/lib/Table.d.ts

@@ -1,99 +0,0 @@
-import * as React from 'react';
-export interface Column<T> {
-    key: string;
-    label: string | React.ReactNode;
-    field?: keyof T;
-    headerStyle?: React.CSSProperties;
-    rowStyle?: React.CSSProperties;
-    content?(item: T, key: string, field: keyof T | undefined, style: React.CSSProperties, index: number): React.ReactNode;
-}
-export interface TableProps<T> {
-    /**
-     * List of Collumns in this Table
-     */
-    cols: Column<T>[];
-    /**
-     * List of T objects used to generate rows
-     */
-    data: T[];
-    onClick?: (data: {
-        colKey: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, event: any) => void;
-    /**
-     * Key of the collumn to sort by
-     */
-    sortKey: string;
-    /**
-     * Boolen to indicate whether the sort is ascending or descending
-     */
-    ascending: boolean;
-    onSort(data: {
-        colKey: string;
-        colField?: keyof T;
-        ascending: boolean;
-    }, event: any): void;
-    tableClass?: string;
-    tableStyle?: React.CSSProperties;
-    theadStyle?: React.CSSProperties;
-    theadClass?: string;
-    tbodyStyle?: React.CSSProperties;
-    tbodyClass?: string;
-    selected?(data: T): boolean;
-    onDragStart?: ((data: {
-        colKey: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, e: any) => void);
-    rowStyle?: React.CSSProperties;
-    keySelector?: (data: T) => string;
-    /**
-     * Optional Element to display in the last row of the Table
-     * use this for displaying warnings when the Table content gets cut off
-     */
-    lastRow?: string | React.ReactNode;
-}
-export default function Table<T>(props: TableProps<T>): JSX.Element;
-interface IRowProps<T> {
-    Data: T[];
-    Cols: Column<T>[];
-    RowStyle?: React.CSSProperties;
-    BodyStyle?: React.CSSProperties;
-    BodyClass?: string;
-    Click: (data: {
-        colKey: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    DragStart?: ((data: {
-        colKey: string;
-        colField?: keyof T;
-        row: T;
-        data: T[keyof T] | null;
-        index: number;
-    }, e: any) => void);
-    Selected?: ((data: T) => boolean);
-    KeySelector?: (data: T) => string;
-}
-export declare function Rows<T>(props: IRowProps<T>): JSX.Element | null;
-interface IHeaderProps<T> {
-    Class?: string;
-    Style?: React.CSSProperties;
-    Cols: Column<T>[];
-    SortKey: string;
-    Ascending: boolean;
-    Click: (data: {
-        colKey: string;
-        colField?: keyof T;
-        ascending: boolean;
-    }, event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-}
-export declare function Header<T>(props: IHeaderProps<T>): JSX.Element;
-export {};

package/lib/Table.js

@@ -1,94 +0,0 @@
-"use strict";
-//  ******************************************************************************************************
-//  Table.tsx - Gbtc
-//
-//  Copyright © 2018, Grid Protection Alliance.  All Rights Reserved.
-//
-//  Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
-//  the NOTICE file distributed with this work for additional information regarding copyright ownership.
-//  The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
-//  file except in compliance with the License. You may obtain a copy of the License at:
-//
-//      http://opensource.org/licenses/MIT
-//
-//  Unless agreed to in writing, the subject software distributed under the License is distributed on an
-//  "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
-//  License for the specific language governing permissions and limitations.
-//
-//  Code Modification History:
-//  ----------------------------------------------------------------------------------------------------
-//  08/02/2018 - Billy Ernest
-//       Generated original version of source code.
-//
-//  ******************************************************************************************************
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Table;
-exports.Rows = Rows;
-exports.Header = Header;
-const gpa_symbols_1 = require("@gpa-gemstone/gpa-symbols");
-const React = require("react");
-function Table(props) {
-    return (React.createElement("table", { className: props.tableClass !== undefined ? props.tableClass : '', style: props.tableStyle },
-        React.createElement(Header, { Class: props.theadClass, Style: props.theadStyle, Cols: props.cols, SortKey: props.sortKey, Ascending: props.ascending, Click: (d, e) => handleSort(d, e) }),
-        React.createElement(Rows, { DragStart: props.onDragStart, Data: props.data, Cols: props.cols, RowStyle: props.rowStyle, BodyStyle: props.tbodyStyle, BodyClass: props.tbodyClass, Click: (data, e) => (props.onClick === undefined ? null : props.onClick(data, e)), Selected: props.selected, KeySelector: props.keySelector }),
-        props.lastRow !== undefined ? React.createElement("tr", { style: (props.rowStyle !== undefined) ? Object.assign({}, props.rowStyle) : {}, key: -1 }, props.lastRow) : null));
-    function handleSort(data, event) {
-        if (data.colKey !== null)
-            props.onSort(data, event);
-    }
-}
-function Rows(props) {
-    if (props.Data.length === 0)
-        return null;
-    const rows = props.Data.map((item, rowIndex) => {
-        const cells = props.Cols.map((colData) => {
-            return React.createElement(Cell, { key: colData.key, Style: colData.rowStyle, DataKey: colData.key, DataField: colData.field, Object: item, RowIndex: rowIndex, Content: colData.content, Click: (data, e) => props.Click(data, e), DragStart: props.DragStart });
-        });
-        const style = (props.RowStyle !== undefined) ? Object.assign({}, props.RowStyle) : {};
-        if (style.cursor === undefined)
-            style.cursor = 'pointer';
-        if (props.Selected !== undefined && props.Selected(item))
-            style.backgroundColor = 'yellow';
-        function ToKey(index, data) {
-            if (props.KeySelector === undefined)
-                return index.toString();
-            return props.KeySelector(data);
-        }
-        return (React.createElement("tr", { style: style, key: ToKey(rowIndex, item) }, cells));
-    });
-    return (React.createElement("tbody", { style: props.BodyStyle, className: props.BodyClass }, rows));
-}
-function Cell(props) {
-    const css = (props.Style !== undefined) ? Object.assign({}, props.Style) : {};
-    if (props.DragStart !== undefined)
-        css.cursor = "grab";
-    const getFieldValue = () => props.DataField !== undefined ? props.Object[props.DataField] : null;
-    const getFieldContent = () => props.Content !== undefined ? props.Content(props.Object, props.DataKey, props.DataField, css, props.RowIndex) : getFieldValue();
-    return (React.createElement("td", { style: css, onClick: (e) => props.Click({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e), draggable: props.DragStart !== undefined, onDragStart: (e) => { if (props.DragStart !== undefined)
-            props.DragStart({ colKey: props.DataKey, colField: props.DataField, row: props.Object, data: getFieldValue(), index: props.RowIndex }, e); } }, getFieldContent()));
-}
-function Header(props) {
-    return (React.createElement("thead", { className: props.Class, style: props.Style },
-        React.createElement("tr", null, props.Cols.map((col) => React.createElement(HeaderCell, { key: col.key, HeaderStyle: col.headerStyle, DataKey: col.key, Click: (e) => props.Click({ colKey: col.key, colField: col.field, ascending: props.Ascending }, e), Label: col.label, SortKey: props.SortKey, Ascending: props.Ascending })))));
-}
-function HeaderCell(props) {
-    const style = (props.HeaderStyle !== undefined) ? props.HeaderStyle : {};
-    if (style.cursor === undefined && props.DataKey !== null) {
-        style.cursor = 'pointer';
-    }
-    if (style.position === undefined) {
-        style.position = 'relative';
-    }
-    return (React.createElement("th", { style: style, onClick: (e) => props.Click(e) },
-        React.createElement(RenderAngleIcon, { SortKey: props.SortKey, Key: props.DataKey, Ascending: props.Ascending }),
-        React.createElement("div", { style: { marginLeft: (props.SortKey === props.DataKey ? 25 : 0) } }, props.Label)));
-}
-function RenderAngleIcon(props) {
-    const AngleIcon = (a) => a.ascending ? gpa_symbols_1.SVGIcons.ArrowDropUp : gpa_symbols_1.SVGIcons.ArrowDropDown;
-    if (props.SortKey === null)
-        return null;
-    if (props.SortKey !== props.Key)
-        return null;
-    return React.createElement("div", { style: { position: 'absolute', width: 25 } },
-        React.createElement(AngleIcon, { ascending: props.Ascending }));
-}