@spothero/ui 15.10.8 → 16.0.0-beta.0

package/styles/v1/components/Table/Table.jsx

@@ -1,367 +0,0 @@
-import find from 'lodash/find';
-import isFunction from 'lodash/isFunction';
-import isNumber from 'lodash/isNumber';
-import isObject from 'lodash/isObject';
-import map from 'lodash/map';
-import some from 'lodash/some';
-import sortBy from 'lodash/sortBy';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import TableHeading from './TableHeading';
-import TableCell from './TableCell';
-import TableFooter from './TableFooter';
-import TableSortSelector from './TableSortSelector';
-import TableSortType from './TableSortType';
-import deprecate from 'v1/utils/deprecate';
-
-deprecate({
-    name: 'Table',
-    newName: 'Table',
-    changes: [
-        '---- Props ----',
-        'In order to accomplish the same functionality as using `footerMessage`, now use the `<Tfoot />` component in the table structure instead of passing in as a prop',
-        'Pagination and Sorting are not yet supported in the v2 Table component',
-        '---- Changes in v2 component  ----',
-        'New v2 Table component is now a paired-down in functionality compaired to v1 version',
-        '`containerClassName`, `headers`, `data`, `currentPage`, `sortOrder`, `sortDataKey`, `totalDataRowCount`, `rowSize`, `showFooterMessage`, `footerMessage`, `pageSize`, `sorting`, `onPageChange`, `onSortChange`, and `noDataAvailableMessage` are not yet supported in the v2 Table component',
-        '---- Additional Information ----',
-        'new props are documented at: https://chakra-ui.com/docs/data-display/table',
-    ],
-});
-
-const PAGE_SIZE_MIN = 1;
-const PAGE_SIZE_MAX = 25;
-
-export default class Table extends Component {
-    static propTypes = {
-        /** Additional class(es) to add to the Table. */
-        className: PropTypes.string,
-        /** Additional class(es) to add to the container of the Table. */
-        containerClassName: PropTypes.string,
-        /** An array of header data for each column. */
-        headers: PropTypes.arrayOf(
-            PropTypes.shape({
-                /** The header label. */
-                label: PropTypes.string.isRequired,
-                /** The header data key which identifies the column for other processes (such as sorting, etc). Each data key should be unique. */
-                dataKey: PropTypes.string.isRequired,
-                /** Additional class(es) to add to the header cell. */
-                className: PropTypes.string,
-                /** Determines whether or not table can sort by header cell dataKey. */
-                isSortable: PropTypes.bool,
-                /** A function to render a custom layout for the header cell. The function is passed the `TableHeadingPropTypes` as props. */
-                render: PropTypes.func,
-            })
-        ).isRequired,
-        /** An array of objects that captures table data for each row. An object can have key/value pairs or a key/object pair. The keys should match the `dataKey` from each column. A key/object pair can contain `value (String, required)`, `className (String)`, and `render (Function)`. The `render` function is passed `TableCellPropTypes` as props. You can also pass an object with a `customRowRender` function that will allow you to render custom row layouts (see examples). */
-        data: PropTypes.arrayOf(PropTypes.object),
-        /** The default page of data to display when the component is mounted. */
-        currentPage: PropTypes.number,
-        /** Determines if table data will be sorted in ascending or descending order. */
-        sortOrder: PropTypes.oneOf([TableSortType.ASC, TableSortType.DESC]),
-        /** The header data key the table will be sorted on. */
-        sortDataKey: PropTypes.string,
-        /** The total number of rows expected in the table. This determines if pagination should be shown and properly lays out pagination controls. */
-        totalDataRowCount: PropTypes.number,
-        /** Determines the default height of each row of data on larger viewports. */
-        rowSize: PropTypes.oneOf(['normal', 'large']),
-        /** Determines if table footer message should be shown. */
-        showFooterMessage: PropTypes.bool,
-        /** A custom message to display in the table footer. */
-        footerMessage: PropTypes.node,
-        /** The number of rows to display per page. For performance reasons, the max pageSize is 25.
-         *
-         * @param {Object} props - The props for the component.
-         * @param {String} propName - The name of the prop being tested against.
-         * @param {String} componentName - The name of the component.
-         * @returns {Error} - An error if the prop isn't a number or not between 1 and 25.
-         */
-        pageSize: (props, propName, componentName) => {
-            if (!isNumber(props[propName])) {
-                return new Error(
-                    `Invalid type of ${propName} supplied to ${componentName}. Must be a number. Validation failed.`
-                );
-            }
-
-            if (
-                props[propName] < PAGE_SIZE_MIN ||
-                props[propName] > PAGE_SIZE_MAX
-            ) {
-                return new Error(
-                    `Invalid prop ${propName} supplied to ${componentName}. Number must be between 1 and 25. Validation failed.`
-                );
-            }
-        },
-        /** A custom sorting function or an array of the dataKey(s) of the header(s) to sort the table by. If multiple are provided then sort order will be determined by column using the first key, then the second, and so on to sort the data with multiple keys in mind. See <a href="https://lodash.com/docs#sortBy" target="_blank">sortBy</a>.  */
-        sorting: PropTypes.oneOfType([
-            PropTypes.func,
-            PropTypes.arrayOf(PropTypes.string),
-        ]),
-        /**
-         * A function to call when a page change occurs.
-         *
-         * @param {Number} currentPage - The currently visible page.
-         * @param {Number} previousPage - The last page that was visible.
-         */
-        onPageChange: PropTypes.func,
-        /**
-         * A function to call when a header sort occurs.
-         *
-         * @param {Number} dataKey - The header's dataKey.
-         * @param {Number} sortOrder - The sort order to use (ASC or DESC).
-         */
-        onSortChange: PropTypes.func,
-        /** A custom message to display when there is no data available for the table. */
-        noDataAvailableMessage: PropTypes.node,
-    };
-    static defaultProps = {
-        currentPage: 1,
-        totalDataRowCount: 0,
-        rowSize: 'normal',
-        pageSize: 25,
-        noDataAvailableMessage: 'No data available at this time.',
-        showFooterMessage: true,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {
-            headers,
-            currentPage,
-            totalDataRowCount,
-            pageSize,
-            sortOrder,
-            sortDataKey,
-        } = props;
-
-        this._HEADERS = headers;
-
-        this.state = {
-            sortOrder,
-            sortDataKey,
-            currentPage,
-            totalPages: Math.ceil(totalDataRowCount / pageSize),
-        };
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {onPageChange, onSortChange, totalDataRowCount, pageSize} = this.props;
-        const {
-            currentPage: previousCurrentPage,
-            sortOrder: previousSortOrder,
-            sortDataKey: previousSortDataKey,
-        } = prevState;
-        const {totalPages, currentPage, sortOrder, sortDataKey} = this.state;
-
-        if (totalDataRowCount !== prevProps.totalDataRowCount || pageSize !== prevProps.pageSize) {
-            this.setState({
-                totalPages: Math.ceil(totalDataRowCount / pageSize)
-            })
-        }
-
-        if (previousCurrentPage !== currentPage && onPageChange) {
-            onPageChange({
-                totalPages,
-                currentPage,
-                previousPage: previousCurrentPage,
-            });
-        }
-
-        if (
-            (previousSortOrder !== sortOrder ||
-                previousSortDataKey !== sortDataKey) &&
-            onSortChange
-        ) {
-            onSortChange({
-                sortOrder,
-                dataKey: sortDataKey,
-            });
-        }
-    }
-
-    _onPageChange = ({value}) => {
-        this.setState({
-            currentPage: parseInt(value, 10),
-        });
-    };
-
-    _onPreviousPage = evt => {
-        this.setState((prevState, props) => {
-            return {
-                currentPage: prevState.currentPage - 1,
-            };
-        });
-    };
-
-    _onNextPage = evt => {
-        this.setState((prevState, props) => {
-            return {
-                currentPage: prevState.currentPage + 1,
-            };
-        });
-    };
-
-    _onSortChange = ({dataKey, sortOrder}) => {
-        this.setState({
-            sortOrder,
-            sortDataKey: dataKey,
-        });
-    };
-
-    _renderHeadings = () => {
-        const {sortOrder, sortDataKey} = this.state;
-
-        return (
-            <thead className="TableHead">
-                <tr>
-                    {this._HEADERS.map(header => {
-                        const {render, ...headerProps} = header;
-                        const {dataKey, isSortable} = headerProps;
-                        const Heading = render ? render : TableHeading;
-
-                        if (isSortable) {
-                            headerProps.onSortClick = this._onSortChange;
-                            headerProps.sortOrder =
-                                dataKey === sortDataKey ? sortOrder : null;
-                        }
-
-                        return <Heading key={dataKey} {...headerProps} />;
-                    })}
-                </tr>
-            </thead>
-        );
-    };
-
-    _renderRows = () => {
-        const {data, sorting, noDataAvailableMessage} = this.props;
-
-        if (!data.length) {
-            return (
-                <tbody className="TableBody Table-no-data">
-                    <tr>
-                        <td colSpan={this._HEADERS.length}>
-                            <div>{noDataAvailableMessage}</div>
-                        </td>
-                    </tr>
-                </tbody>
-            );
-        }
-
-        let sortedData = data;
-
-        if (sorting) {
-            const sort = isFunction(sorting) ? [sorting] : [...sorting];
-
-            sortedData = sortBy(data, sort);
-        }
-
-        return (
-            <tbody className="TableBody">
-                {sortedData.map(({className: rowClass, ...row}, i) => {
-                    if (row.customRowRender) {
-                        return row.customRowRender({key: i, row});
-                    } else {
-                        return (
-                            <tr key={i} className={rowClass}>
-                                {map(row, (cell, dataKey) => {
-                                    const {className, value} = cell;
-                                    const Cell =
-                                        isObject(cell) && cell.render
-                                            ? cell.render
-                                            : TableCell;
-                                    const key = `${i}-${dataKey}`;
-                                    const label = find(this._HEADERS, {dataKey})
-                                        .label;
-                                    const cellValue = isObject(cell)
-                                        ? value
-                                        : cell;
-
-                                    return (
-                                        <Cell
-                                            key={key}
-                                            className={className}
-                                            headingLabel={label}
-                                            value={cellValue}
-                                        />
-                                    );
-                                })}
-                            </tr>
-                        );
-                    }
-                })}
-            </tbody>
-        );
-    };
-
-    _renderFooter = () => {
-        const {
-            rowSize,
-            pageSize,
-            data,
-            totalDataRowCount,
-            showFooterMessage,
-            footerMessage,
-        } = this.props;
-        const {currentPage, totalPages} = this.state;
-
-        return (
-            <TableFooter
-                rowSize={rowSize}
-                pageSize={pageSize}
-                totalDataRowCount={totalDataRowCount}
-                currentPage={currentPage}
-                totalPages={totalPages}
-                currentPageLength={data.length}
-                showMessage={showFooterMessage}
-                message={footerMessage}
-                onPageChange={this._onPageChange}
-                onPreviousPage={this._onPreviousPage}
-                onNextPage={this._onNextPage}
-            />
-        );
-    };
-
-    _renderTableSortDropdown = () => {
-        const {sortOrder, sortDataKey} = this.state;
-        const hasSortableHeaders = some(this._HEADERS, 'isSortable');
-
-        if (!hasSortableHeaders) {
-            return null;
-        }
-
-        return (
-            <TableSortSelector
-                headers={this._HEADERS}
-                sortOrder={sortOrder}
-                sortDataKey={sortDataKey}
-                onSortChange={this._onSortChange}
-            />
-        );
-    };
-
-    render() {
-        const {containerClassName, className, rowSize} = this.props;
-        const containerClasses = classNames(
-            'Table-container',
-            containerClassName
-        );
-        const tableClasses = classNames(
-            'Table',
-            {'Table-large': rowSize === 'large'},
-            className
-        );
-
-        return (
-            <div className={containerClasses}>
-                {this._renderTableSortDropdown()}
-                <table className={tableClasses}>
-                    {this._renderHeadings()}
-                    {this._renderRows()}
-                </table>
-                {this._renderFooter()}
-            </div>
-        );
-    }
-}