@unbxd-ui/unbxd-react-components 0.2.104 → 0.2.107-beta.2

package/src/components/Table/BaseTable.js

@@ -0,0 +1,306 @@
+import React, { Fragment, useEffect, useState, useImperativeHandle, forwardRef } from "react";
+import PropTypes from "prop-types";
+import utils from "../../core/utils";
+import Checkbox from "../Form/Checkbox";
+
+const DEFAULT_CHECKBOX_CONFIG = {
+    enabled: false, 
+    showInHeader: true
+};
+
+const DefaultNoDataComponent = () => {
+    return (<div className="RCB-no-data">No data found</div>)
+};
+
+/* eslint-disable react/prop-types */
+
+const getTDValue = ({ columnValue, rowData = {}, columnConfig = {}, tdProps = {}}) => {
+    const { key, valueFormatter, ColumnComponent, componentProps = {} } = columnConfig;
+    let tdValue = columnValue;
+
+    if (typeof(valueFormatter) === "function") {
+        tdValue = valueFormatter({value: columnValue, record: rowData});
+    } else if (ColumnComponent) {
+        tdValue = <ColumnComponent record={rowData} {...componentProps} />
+    }
+
+    return <td key={key} {...tdProps}>{tdValue}</td>
+}
+
+const ExpandableTR = (props) => {
+    const { 
+        rowIndex, 
+        rowData, 
+        columnConfigs, 
+        isEven, 
+        ExpandedRowComponent, 
+        showCheckbox,
+        checkboxChangeCounter,
+        checkboxValue,
+        onSelectionChange
+    } = props;
+    const [ selected, setSelected ] = useState(checkboxValue || false);
+    const [ isExpanded, setIsExpanded ] = useState(false);
+
+    const onChange = (value) => {
+        setSelected(value);
+        onSelectionChange(rowData, value);
+    };
+
+    useEffect(() => {
+        setSelected(checkboxValue);
+    }, [checkboxChangeCounter, checkboxValue]);
+
+    const toggleExpanded = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    const className = "RCB-tr RCB-parent-row " + (isEven ? "RCB-even-tr" : "RCB-odd-tr");
+
+    return (<Fragment>
+        <tr className={className}>
+            {/* add column for expand toggle icon */}
+            {getTDValue({
+                columnValue: "",
+                columnConfig: {
+                    key: "expandIcon"
+                },
+                tdProps: {
+                    onClick: toggleExpanded,
+                    className: isExpanded ? "expand-open" : "expand-close"
+                }
+            })}
+            {showCheckbox && <td key={`checkbox-colum-${rowIndex}`}>
+                <Checkbox name={`checkbox${rowIndex}`} type="checkbox" className="table-checkbox" onChange={onChange} value={selected} />
+            </td>}
+            {columnConfigs.map(configObj => {
+                const { key } = configObj;
+                return getTDValue({
+                    columnValue: rowData[key],
+                    rowData,
+                    columnConfig: configObj,
+                    tdProps: {
+                        onClick: toggleExpanded
+                    }
+                });
+            })}
+        </tr>
+        {isExpanded && <tr className="RCB-expanded-row">
+            {/* +1 is to accomodate the expand toggle icon column */}
+            <td colSpan={columnConfigs.length + 1}>
+                <ExpandedRowComponent parentRecord={rowData} />
+            </td>
+        </tr>}
+    </Fragment>);
+};
+
+ExpandableTR.propTypes = {
+    ExpandedRowComponent: PropTypes.any.isRequired // TODO : check for a React Component
+};
+
+const TR = (props) => {
+    const { 
+        rowIndex, 
+        rowData, 
+        columnConfigs, 
+        isEven, 
+        showCheckbox,
+        checkboxChangeCounter,
+        checkboxValue,
+        onSelectionChange } = props;
+    const [ selected, setSelected ] = useState(checkboxValue || false);
+    const className = "RCB-tr " + (isEven ? "RCB-even-tr" : "RCB-odd-tr");
+
+    const onChange = (value) => {
+        setSelected(value);
+        onSelectionChange(rowData, value);
+    };
+
+    useEffect(() => {
+        setSelected(checkboxValue);
+    }, [checkboxChangeCounter, checkboxValue]);
+    
+    return (<tr className={className}>
+        {showCheckbox && <td key={`checkbox-colum-${rowIndex}`}>
+            <Checkbox name={`checkbox${rowIndex}`} type="checkbox" className="table-checkbox" onChange={onChange} value={selected} />
+        </td>}
+        {columnConfigs.map(configObj => {
+            const { key } = configObj;
+            return getTDValue({columnValue: rowData[key], rowData, columnConfig: configObj});
+        })}
+    </tr>);
+};
+
+let BaseTable = (props, ref) => {
+    const {
+        className,
+        records,
+        columnConfigs,
+        idAttribute,
+        checkboxConfig,
+        isExpandableTable,
+        ExpandedRowComponent,
+        noDataComponent,
+        sortByConfig,
+        resetPageNo
+    } = props;
+    const { enabled:showCheckbox, showInHeader } = {...DEFAULT_CHECKBOX_CONFIG, ...(checkboxConfig || {})};
+    const { sortBy, sortOrder } = sortByConfig;
+
+    const [ checkboxValue, setCheckboxValue ] = useState(false);
+    const [ checkboxChangeCounter, setChangeCounter ] = useState(0);
+    const [ selected, setSelected ] = useState([]);
+
+    const RowComponent = isExpandableTable ? ExpandableTR : TR;
+
+    const onSelectionChange = (record, checked) => {
+        if (checked) {
+            /* add to selected array */
+            setSelected([...selected, record]);
+        } else {
+            /* remove from selected array */
+            const newSelected = selected.filter(obj => {
+                return obj[idAttribute] !== record[idAttribute];
+            });
+
+            setSelected(newSelected);
+        }
+    };
+
+    const getSelectedRows = () => {
+        return selected;
+    };
+    
+    const updateCheckboxValue = (newValue) => {
+        setCheckboxValue(newValue);
+        setChangeCounter(checkboxChangeCounter + 1);
+    };
+
+    const resetSelected = () => {
+        updateCheckboxValue(false);
+        setSelected([]);
+    };
+
+    const toggleSelectAll = () => {
+        const checked = !checkboxValue;
+        updateCheckboxValue(checked);
+        
+        if (checked) {
+            setSelected(records);
+        } else {
+            setSelected([]);
+        }
+    };
+    
+    useImperativeHandle(ref, () => ({
+        getSelectedRows,
+        resetSelected,
+        resetPageNo
+    }));
+
+    if (records.length === 0) {
+        return noDataComponent;
+    } else {
+        return (<table className={`RCB-table ${className}`}>
+            <thead>
+                <tr>
+                    {/* add empty column for expand icon */}
+                    {isExpandableTable && <th key="expandIcon" className="RCB-th RCB-expand-column"></th>}
+                    {showCheckbox && (showInHeader ? <th key="headerCheckbox">
+                        <Checkbox name="headerCheckbox" type="checkbox" className="table-checkbox" 
+                            value={checkboxValue} onChange={toggleSelectAll} />
+                    </th> : <th/>)}
+                    {columnConfigs.map(columnObj => {
+                        const { key, label, sortable, headerClassName } = columnObj;
+                        let className = "RCB-th";
+                        let thAttrs = {};
+
+                        if (sortable) {
+                            className += " RCB-th-sortable";
+                            
+                            if (sortBy === key) {
+                                className += ` RCB-th-${sortOrder.toLowerCase()}`;
+                            } else {
+                                className += " RCB-th-sort";
+                            }
+
+                            thAttrs = {
+                                onClick: () => {
+                                    props.onSort(columnObj);
+                                }
+                            }
+                        }
+
+                        if (headerClassName) {
+                            className += ` ${headerClassName}`;
+                        }
+
+                        return (<th className={className} key={key} {...thAttrs}>{label}</th>);
+                    })}
+                </tr>
+            </thead>
+            <tbody>
+                {records.map((rowData, index)=> {
+                    return <RowComponent key={rowData[idAttribute]} 
+                                        isEven={utils.isEven(index)} rowIndex={index}
+                                        rowData={rowData} 
+                                        columnConfigs={columnConfigs} 
+                                        ExpandedRowComponent={ExpandedRowComponent}
+                                        showCheckbox={showCheckbox} checkboxValue={checkboxValue} checkboxChangeCounter={checkboxChangeCounter}
+                                        onSelectionChange={onSelectionChange} />
+                })}
+            </tbody>
+        </table>)
+    }
+};
+
+BaseTable = forwardRef(BaseTable);
+
+/* eslint-enable react/prop-types */
+
+BaseTable.propTypes = {
+    /** Pass any additional classNames to Table component */
+    className: PropTypes.string,
+    /** Array containing table row data */
+    records: function(props, propName) {
+        if (props["paginationType"] == "CLIENT") {
+            if (!props[propName]) {
+                return new Error("Please provide the table records for paginationType 'CLIENT'!");
+            }
+
+            if (Object.prototype.toString.call(props[propName]) !== "[object Array]") {
+                return new Error("'records' must be an array");
+            }
+        }
+    },
+    /** Array containing the table columns config */
+    columnConfigs: PropTypes.array.isRequired,
+    /** ID attribute key to use when rendering the dropdown items */
+    idAttribute: PropTypes.string,
+    /* Config to display checkbox in the first column of the table
+     *  { 
+         enabled: false, // turn this on to display checkbox in first column of the table
+         showInHeader: true // turn this off to not display the checkbox in the table header
+        }
+     */
+    checkboxConfig: PropTypes.object,
+    /** set to "true" if table rows are expandable */
+    isExpandableTable: PropTypes.bool,
+    /** Component to be rendered on expanding a row */
+    ExpandedRowComponent: PropTypes.oneOfType([
+        PropTypes.instanceOf(Element),
+        PropTypes.func
+    ]),
+    /** Component to be rendered if the table has no data */
+    noDataComponent: PropTypes.any
+}
+
+BaseTable.defaultProps = {
+    className: "",
+    records: [],
+    idAttribute: "id",
+    isExpandableTable: false,
+    noDataComponent: <DefaultNoDataComponent />
+};
+
+export default BaseTable;

package/src/components/Table/PaginationComponent.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Dropdown from "../Form/Dropdown";
+import utils from "../../core/utils";
+
+const PaginationComponent = (props) => {
+    const {
+        pageSizeList,
+        pageConfig,
+        onPageConfigChanged
+    } = props;
+
+    const { perPageCount, pageNo, total } = pageConfig;
+
+    const SelectionSummary = () => {
+        const pagIndex = utils.getPagIndex(pageConfig);
+        const { start, end } = pagIndex;
+        const startVal = start + 1;
+        const endVal = total < end ? total : end;
+        const summaryString = `${startVal}-${endVal}`;
+    
+        return (<div className="RCB-select-summary">{summaryString}<span className="RCB-select-arrow"></span></div>);
+    };
+
+    const onPerPageChanged = (perPageObj) => {
+        const perPage = +(perPageObj.id);
+        onPageConfigChanged({
+            ...pageConfig,
+            pageNo: 1,
+            perPageCount: perPage,
+        });
+    };
+
+    const changePage = (moveUnit, event) => {
+        event.preventDefault();
+        onPageConfigChanged({
+            ...pageConfig,
+            pageNo: pageNo + moveUnit
+        });
+    };
+
+    let isLeftNavDisbaled = (pageNo <= 1);
+    let isRightNavDisbaled = (pageNo >= Math.ceil(total / +perPageCount));
+
+    return (<div className="RCB-paginate-wrapper">
+        <Dropdown name="perPageCount"
+            showLabel={false} className="RCB-per-page-count" 
+            options={pageSizeList} 
+            onChange={onPerPageChanged} 
+            SelectionSummary={SelectionSummary} />{`of ${total}`}
+        <div className="RCB-paginate-nav">
+            <a href="javacsript:void(0)" className={`RCB-page-nav ${isLeftNavDisbaled ? "disabled" : ""}`}
+                onClick={(event) => changePage(-1,event)}>
+                {"<"}
+            </a>
+            <a href="javacsript:void(0)" className={`RCB-page-nav ${isRightNavDisbaled ? "disabled" : ""}`}
+                onClick={(event) => changePage(1,event)}>
+                {">"}
+            </a>
+        </div>
+    </div>);
+};
+
+PaginationComponent.propTypes = {
+    pageSizeList: PropTypes.arrayOf(PropTypes.shape({
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        name: PropTypes.string
+    })),
+    pageConfig: PropTypes.object,
+    onPageConfigChanged: PropTypes.func.isRequired
+};
+
+export default PaginationComponent;

package/src/components/Table/Table.js

@@ -0,0 +1,295 @@
+import React, { useState, useEffect, useImperativeHandle } from "react";
+import PropTypes from "prop-types";
+import BaseTable from "./BaseTable";
+import DataLoader from "../DataLoader";
+import PaginationComponent from "./PaginationComponent";
+import utils from "../../core/utils";
+import { forwardRef } from "react";
+
+const getPageRecords = (records = [], pageConfig = {}) => {
+    const pagIndex = utils.getPagIndex(pageConfig);
+    const { start, end } = pagIndex;
+    
+    return records.slice(start, end);
+};
+
+const sortNumbersASC = (a, b) => a - b;
+const sortNumbersDSC = (a, b) => b - a;
+const sortAlphaASC = (a, b) => a < b ? -1 : 1;
+const sortAlphaDSC = (a, b) => b < a ? -1 : 1;
+
+const getFilteredRecords = ({records = [], searchBy, searchByKey, sortByConfig}) => {
+    let filteredRecords = records;
+
+    if (searchBy) {
+        searchBy = searchBy.toLowerCase();
+
+        filteredRecords = records.filter(obj => {
+            const val = (obj[searchByKey] ? obj[searchByKey] : "").toLowerCase();
+            return (val.indexOf(searchBy) !== -1)
+        });
+    }
+
+    if (typeof(sortByConfig) === "object" && !utils.isObjectEmpty(sortByConfig)) {
+        const { sortBy, sortOrder, columnConfig } = sortByConfig;
+        const { valueFormatter } = columnConfig;
+        
+        filteredRecords = records.slice().sort((obj1, obj2) =>{
+            let rowValue1 = obj1[sortBy];
+            let rowValue2 = obj2[sortBy];
+
+            const sortValue1 = typeof(valueFormatter) === "function" ? 
+                                    valueFormatter({value: rowValue1, record: obj1}) : rowValue1;
+            const sortValue2 = typeof(valueFormatter) === "function" ? 
+                                    valueFormatter({value: rowValue2, record: obj2}) : rowValue2;
+
+            if (typeof(sortValue) === "number") {
+                return sortOrder === "ASC" ? sortNumbersASC(sortValue1, sortValue2) : sortNumbersDSC(sortValue1, sortValue2);
+            } else {
+                return sortOrder === "ASC" ? sortAlphaASC(sortValue1, sortValue2) : sortAlphaDSC(sortValue1, sortValue2); 
+            }
+        });
+    }
+
+    return filteredRecords;
+};
+
+export const REQUEST_KEYS = {
+    searchBy: "search",
+    sortBy: "sortBy",
+    sortOrder: "sortOrder",
+    sortASC: "ASC",
+    sortDSC: "DSC"
+};
+
+let Table = (props, ref) => {
+    const {
+        className,
+        wrapperClassName,
+        records,
+        columnConfigs,
+        idAttribute,
+        searchBy,
+        getRequestKeys,
+        showPaginateBar,
+        paginationPosition,
+        paginationType,
+        paginationBar,
+        requestId,
+        pageNoKey,
+        perPageKey,
+        pageSizeList,
+        isExpandableTable,
+        ExpandedRowComponent,
+        responseFormatter,
+        noDataComponent,
+        omitProps,
+        getUrlParams,
+        getRequestParams,
+        checkboxConfig,
+        ...restProps
+    } = props;
+    /* variables for server data */
+    const [ serverRecords, setServerRecords ] = useState([]);
+    const [ serverTotal, setServerTotal ] = useState(0);
+
+    /* variables for search, sort data */
+    const [ searchQuery, setSearchQuery ] = useState(searchBy);
+    const [ sortByConfig, setSortByConfig ] = useState({});
+    const { sortBy, sortOrder } = sortByConfig;
+
+    /* variables for pagination data */
+    const [ pageConfig, setPageConfig ] = useState({
+        perPageCount: pageSizeList[0].id,
+        pageNo: 1
+    });
+    const { perPageCount, pageNo } = pageConfig;
+    const omitParams = [pageNoKey, perPageKey, ...omitProps.split(",")]
+
+    let {  
+        searchBy:searchByKey,
+        sortBy:sortByKey,
+        sortOrder:sortOrderKey,
+        sortASC:ASCEnum,
+        sortDSC:DSCEnum
+    } = {...REQUEST_KEYS, ...getRequestKeys()};
+
+    let extraParams = utils.omit(restProps, omitParams);
+    let requestParams = {
+        ...getRequestParams(),
+        ...extraParams,
+        [pageNoKey]: pageNo,
+        [perPageKey]: perPageCount,
+        ...(searchQuery && {[searchByKey]: searchQuery}),
+        ...(sortBy && {[sortByKey]: sortBy}),
+        ...(sortOrder && {[sortOrderKey]: sortOrder === "DSC" ? DSCEnum : ASCEnum})
+    };
+
+    const requests = [{
+        requestId: requestId,
+        params: requestParams,
+        urlParams: getUrlParams()
+    }];
+
+    const onDataLoaded = ([response]) => {
+        let apiResponse = response;
+
+        if (typeof(responseFormatter) === "function") {
+            apiResponse = responseFormatter(response);
+        }
+
+        let { entries, total }  = apiResponse; 
+        entries = entries || [];
+
+        if (pageNo > 1 && entries.length === 0) {
+            /* current page does not have records, so fetch previous page */
+            setPageConfig({
+                ...pageConfig,
+                pageNo: pageNo - 1
+            });
+        }
+
+        setServerRecords(entries);
+        setServerTotal(total);
+    };
+
+    const resetPageNo = () => {
+        setPageConfig({
+            ...pageConfig,
+            pageNo: 1
+        });
+    };
+
+    useEffect(() => {
+        /* Search value changed: reset pageNo. */
+        resetPageNo();
+        setSearchQuery(searchBy);
+    }, [searchBy]);
+
+    const onSort = (columnConfig) => {
+        const newSortBy = columnConfig.key;
+        let newSortOrder = "ASC";
+
+        if (sortBy === newSortBy) {
+            /* clicked sort on the same column */
+            newSortOrder = sortOrder === "ASC" ? "DSC" : "ASC";
+        }
+
+        setSortByConfig({
+            sortBy: newSortBy,
+            sortOrder: newSortOrder,
+            columnConfig
+        });
+    };
+
+    const filteredRecords = getFilteredRecords({records, searchBy, searchByKey, sortByConfig});
+    const totalRecords = paginationType === "SERVER" ? serverTotal : filteredRecords.length;
+    const paginationProps = {
+        pageSizeList: pageSizeList,
+        onPageConfigChanged: setPageConfig,
+        pageConfig: {...pageConfig, total: totalRecords}
+    };
+
+    const paginationComponent = (<div className="RCB-paginate-bar">
+                                    {paginationBar ? React.cloneElement(paginationBar, paginationProps) 
+                                    : <PaginationComponent  {...paginationProps}/>}
+                                </div>);
+
+    let finalRecords = paginationType === "SERVER" ? serverRecords :
+                        (showPaginateBar ? getPageRecords(filteredRecords, pageConfig) : filteredRecords);
+
+    let wrappedComponent =  (<BaseTable ref={ref} records={finalRecords} columnConfigs={columnConfigs} checkboxConfig={checkboxConfig}
+                                    idAttribute={idAttribute} noDataComponent={noDataComponent}
+                                    sortByConfig={sortByConfig} onSort={onSort} resetPageNo={resetPageNo}
+                                    isExpandableTable={isExpandableTable} ExpandedRowComponent={ExpandedRowComponent} />);
+    
+    if (paginationType === "SERVER") {
+        wrappedComponent = (<DataLoader requests={requests} onDataLoaded={onDataLoaded}>
+            {wrappedComponent}
+        </DataLoader>)
+    }
+    
+    return (
+        <div className={className}>
+            {showPaginateBar && paginationPosition === "TOP" && totalRecords > 0 && paginationComponent}
+            <div className={wrapperClassName}>
+                {wrappedComponent}
+            </div>
+            {showPaginateBar && paginationPosition === "BOTTOM" && totalRecords > 0 && paginationComponent}
+        </div>
+    )
+};
+
+Table = forwardRef(Table);
+
+Table.propTypes = {
+    /** Extends Table properties */
+    ...BaseTable.propTypes,
+    /** search value to search data in the table */
+    searchBy: PropTypes.string,
+    /** list of supported page sizes  */
+    pageSizeList: PropTypes.array,
+    /** set to false to disable pagination bar */
+    showPaginateBar: PropTypes.bool,
+    /** location where the pagination component must be displayed */
+    paginationPosition: PropTypes.oneOf(["TOP", "BOTTOM"]),
+    /** CLIENT side pagination or SERVER side pagination */
+    paginationType: PropTypes.oneOf(["CLIENT", "SERVER"]),
+    /** You can provide a custom component for the pagination bar 
+     * if you want to add more content to the pagination bar other than the pagination widget.
+     * Make sure to include <PagniationComponent /> and pass on all the props sent to this custom component
+      */
+    paginationBar: PropTypes.any,
+    /** [SERVER side pagination] the ID of the request to call */
+    requestId: PropTypes.string,
+    /** [SERVER side pagination] key to send the page number value in, to the API */
+    pageNoKey: PropTypes.string,
+    /** [SERVER side pagination] key to send the page count value in, to the API */
+    perPageKey: PropTypes.string,
+     /** If paginationType is "SERVER", 
+     * component expects the response to be of the form
+     * { [pageNoKey]: <pageNo>, [perPageKey]: <pageSize>, total: <totalCount>, entries: [{}] }
+     * If your data is not in this format, use the responseFormatter to format the data to this structure.
+     * Input to this function is the response received from your API
+     *   */
+    responseFormatter: PropTypes.func,
+     /** If paginationType is "SERVER", 
+     * a comma separated list of the props to be omitted from being added to the API request */
+    omitProps: PropTypes.string,
+    /** If paginationType is "SERVER", function that is expected to return the key configs for the various request settings
+     * in the format { searchBy, sortBy, sortOrder }
+     */
+    getRequestKeys: PropTypes.func,
+    /** If paginationType is "SERVER", function that is expected to return the URL Params object */
+    getUrlParams: PropTypes.func,
+    /** If paginationType is "SERVER", function that is expected to return the Request Params object */
+    getRequestParams: PropTypes.func
+}
+
+Table.defaultProps = {
+    ...BaseTable.defaultProps,
+    pageSizeList: [{
+        id: "10",
+        name: "10"
+    }, {
+        id: "20",
+        name: "20"
+    }, {
+        id: "50",
+        name: "50"
+    }, {
+        id: "100",
+        name: "100"
+    }],
+    showPaginateBar: true,
+    paginationPosition: "TOP",
+    paginationType: "CLIENT",
+    pageNoKey: "page",
+    perPageKey: "count",
+    omitProps: "",
+    getRequestKeys: () => ({}),
+    getUrlParams: () => ({}),
+    getRequestParams: () => ({})
+};
+
+export default Table;