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

package/src/components/Table/BaseTable.js

@@ -1,306 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,295 +0,0 @@
-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;