@coreui/react-pro 5.0.0-alpha.2 → 5.0.0-beta.0

package/dist/esm/components/smart-table/CSmartTableHead.js

@@ -0,0 +1,140 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef, useRef, useState, useMemo, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import '../form/CForm.js';
+import { CFormCheck } from '../form/CFormCheck.js';
+import '../form/CFormControlValidation.js';
+import '../form/CFormControlWrapper.js';
+import '../form/CFormFeedback.js';
+import '../form/CFormFloating.js';
+import { CFormInput } from '../form/CFormInput.js';
+import '../form/CFormLabel.js';
+import '../form/CFormRange.js';
+import '../form/CFormSelect.js';
+import '../form/CFormSwitch.js';
+import '../form/CFormText.js';
+import '../form/CFormTextarea.js';
+import '../form/CInputGroup.js';
+import '../form/CInputGroupText.js';
+import '../table/CTable.js';
+import '../table/CTableBody.js';
+import '../table/CTableCaption.js';
+import '../table/CTableDataCell.js';
+import '../table/CTableFoot.js';
+import { CTableHead } from '../table/CTableHead.js';
+import { CTableHeaderCell } from '../table/CTableHeaderCell.js';
+import { CTableRow } from '../table/CTableRow.js';
+import { getColumns, getColumnGroups, getTableHeaderCellProps, getTableHeaderCellStyles, getColumnKey, getColumnLabel, getColumnValues, getColumnSorterState } from './utils.js';
+
+var CSmartTableHead = forwardRef(function (_a, ref) {
+    var columnFilter = _a.columnFilter, columnFilterState = _a.columnFilterState, columnSorter = _a.columnSorter, _b = _a.component, Component = _b === void 0 ? CTableHead : _b, columns = _a.columns, handleOnCustomFilterChange = _a.handleOnCustomFilterChange, handleFilterOnChange = _a.handleFilterOnChange, handleFilterOnInput = _a.handleFilterOnInput, handleSelectAllChecked = _a.handleSelectAllChecked, handleSort = _a.handleSort, items = _a.items, selectable = _a.selectable, selectAll = _a.selectAll, selectedAll = _a.selectedAll, _c = _a.showGroups, showGroups = _c === void 0 ? true : _c, sorterState = _a.sorterState, sortingIcon = _a.sortingIcon, sortingIconAscending = _a.sortingIconAscending, sortingIconDescending = _a.sortingIconDescending, rest = __rest(_a, ["columnFilter", "columnFilterState", "columnSorter", "component", "columns", "handleOnCustomFilterChange", "handleFilterOnChange", "handleFilterOnInput", "handleSelectAllChecked", "handleSort", "items", "selectable", "selectAll", "selectedAll", "showGroups", "sorterState", "sortingIcon", "sortingIconAscending", "sortingIconDescending"]);
+    var selectAllcheckboxRef = useRef(null);
+    var _d = useState(false), refresh = _d[0], setRefresh = _d[1];
+    var _columns = useMemo(function () { return getColumns(columns); }, [columns]);
+    var groups = useMemo(function () { return getColumnGroups(columns); }, [columns]);
+    useEffect(function () {
+        if (columnFilterState && Object.keys(columnFilterState).length === 0) {
+            setRefresh(true);
+        }
+    }, [columnFilterState]);
+    useEffect(function () {
+        setRefresh(true);
+    }, [items]);
+    useEffect(function () {
+        if (setRefresh) {
+            setRefresh(false);
+        }
+    }, [refresh]);
+    var columnSorterIcon = function (column) {
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 0) {
+            return React.createElement("span", { className: "opacity-25 float-end me-1" }, sortingIcon);
+        }
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 'asc') {
+            return React.createElement("span", { className: "float-end me-1" }, sortingIconAscending);
+        }
+        if (getColumnSorterState(getColumnKey(column), sorterState) === 'desc') {
+            return React.createElement("span", { className: "float-end me-1" }, sortingIconDescending);
+        }
+        return;
+    };
+    return (React.createElement(Component, __assign({}, rest, { ref: ref }),
+        showGroups &&
+            groups &&
+            groups.length > 0 &&
+            groups.map(function (row, index) { return (React.createElement(CTableRow, { key: index },
+                selectable && React.createElement(CTableHeaderCell, null),
+                row.map(function (cell, index) { return (React.createElement(CTableHeaderCell, __assign({ colSpan: cell.colspan }, getTableHeaderCellProps(cell), { key: index }), cell.label)); }))); }),
+        React.createElement(CTableRow, null,
+            selectable && (React.createElement(CTableHeaderCell, null, selectAll && (React.createElement(CFormCheck, { checked: typeof selectedAll === 'boolean' ? selectedAll : false, indeterminate: selectedAll === 'indeterminate' ? true : false, onChange: function () { return handleSelectAllChecked && handleSelectAllChecked(); }, ref: selectAllcheckboxRef })))),
+            _columns.map(function (column, index) {
+                var isSortable = columnSorter &&
+                    (typeof column === 'object'
+                        ? column.sorter === undefined
+                            ? true
+                            : column.sorter
+                        : true);
+                return (React.createElement(CTableHeaderCell, __assign({}, getTableHeaderCellProps(column), { style: getTableHeaderCellStyles(column, columnSorter), key: index }, (isSortable && {
+                    onClick: function () { return handleSort && handleSort(getColumnKey(column), index); },
+                    onKeyDown: function (event) {
+                        if (event.key === 'Enter') {
+                            handleSort && handleSort(getColumnKey(column), index);
+                        }
+                        if (event.key === 'ArrowUp') {
+                            event.preventDefault();
+                            handleSort && handleSort(getColumnKey(column), index, 'asc');
+                        }
+                        if (event.key === 'ArrowDown') {
+                            event.preventDefault();
+                            handleSort && handleSort(getColumnKey(column), index, 'desc');
+                        }
+                    },
+                    tabIndex: 0,
+                })),
+                    React.createElement("div", { className: "d-inline" }, getColumnLabel(column)),
+                    isSortable && columnSorterIcon(column)));
+            })),
+        columnFilter && (React.createElement(CTableRow, null,
+            selectable && React.createElement(CTableHeaderCell, null),
+            _columns.map(function (column, index) {
+                return (React.createElement(CTableHeaderCell, __assign({}, getTableHeaderCellProps(column), { key: index }), (typeof column === 'object'
+                    ? column.filter === undefined
+                        ? true
+                        : column.filter
+                    : true) ? (typeof column !== 'string' && typeof column.filter === 'function' ? (!refresh &&
+                    column.filter(getColumnValues(items, getColumnKey(column)), function (value) {
+                        return handleOnCustomFilterChange &&
+                            handleOnCustomFilterChange(getColumnKey(column), value);
+                    })) : (React.createElement(CFormInput, { size: "sm", onInput: function (event) {
+                        return handleFilterOnInput &&
+                            handleFilterOnInput(getColumnKey(column), event.target.value);
+                    }, onChange: function (event) {
+                        return handleFilterOnChange &&
+                            handleFilterOnChange(getColumnKey(column), event.target.value);
+                    }, value: columnFilterState && columnFilterState[getColumnKey(column)]
+                        ? columnFilterState[getColumnKey(column)]
+                        : '', "aria-label": "column name: '".concat(getColumnLabel(column), "' filter input") }))) : ('')));
+            })))));
+});
+CSmartTableHead.propTypes = {
+    columnFilter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+    columnFilterState: PropTypes.object,
+    columnSorter: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+    component: PropTypes.elementType,
+    children: PropTypes.node,
+    columns: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.any, PropTypes.string])).isRequired,
+    handleFilterOnChange: PropTypes.func,
+    handleFilterOnInput: PropTypes.func,
+    handleSelectAllChecked: PropTypes.func,
+    handleSort: PropTypes.func,
+    selectable: PropTypes.bool,
+    selectAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+    selectedAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+    sorterState: PropTypes.object,
+    sortingIcon: PropTypes.node,
+    sortingIconAscending: PropTypes.node,
+    sortingIconDescending: PropTypes.node,
+};
+CSmartTableHead.displayName = 'CSmartTableHead';
+
+export { CSmartTableHead };
+//# sourceMappingURL=CSmartTableHead.js.map

package/dist/esm/components/smart-table/CSmartTableHead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CSmartTableHead.js","sources":["../../../../src/components/smart-table/CSmartTableHead.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/components/smart-table/CSmartTableInterface.d.ts

@@ -0,0 +1,239 @@
+import { HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { CSmartPaginationProps } from '../smart-pagination/CSmartPagination';
+import { CTableProps } from '../table/CTable';
+import { CTableBodyProps } from '../table/CTableBody';
+import { CTableFootProps } from '../table/CTableFoot';
+import { CTableHeadProps } from '../table/CTableHead';
+import type { Column, ColumnFilter, ColumnFilterValue, FooterItem, Item, ItemsPerPageSelect, Pagination, Sorter, ScopedColumns, SorterValue, TableFilter } from './types';
+export interface CSmartTableProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Sets active page. If 'pagination' prop is enabled, activePage is set only initially.
+     */
+    activePage?: number;
+    /**
+     * When set, displays table cleaner above table, next to the table filter (or in place of table filter if `tableFilter` prop is not set)
+     * Cleaner resets `tableFilterValue`, `columnFilterValue`, `sorterValue`. If clean is possible it is clickable (`tabIndex="0"` `role="button"`, `color="danger"`), otherwise it is not clickable and transparent. Cleaner can be customized through the `cleaner` slot.
+     */
+    cleaner?: boolean;
+    /**
+     * Style table items as clickable.
+     */
+    clickableRows?: boolean;
+    /**
+     * When set, displays additional filter row between table header and items, allowing filtering by specific column.
+     * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic filtering inside component.
+     * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
+     */
+    columnFilter?: boolean | ColumnFilter;
+    /**
+     * Value of table filter. To set pass object where keys are column names and values are filter strings e.g.:
+     * `{ user: 'John', age: 12 }`
+     */
+    columnFilterValue?: ColumnFilterValue;
+    /**
+     * Prop for table columns configuration. If prop is not defined, table will display columns based on the first item keys, omitting keys that begins with underscore (e.g. '_classes')
+     *
+     * In columns prop each array item represents one column. Item might be specified in two ways:
+     * String: each item define column name equal to item value.
+     * Object: item is object with following keys available as column configuration:
+     * - key (required)(String) - define column name equal to item key.
+     * - label (String) - define visible label of column. If not defined, label will be generated automatically based on column name, by converting kebab-case and snake_case to individual words and capitalization of each word.
+     * - _classes (String/Array/Object) - adds classes to all cels in column
+     * - _style (String/Array/Object) - adds styles to the column header (useful for defining widths)
+     * - sorter (Boolean) - disables sorting of the column when set to false
+     * - filter (Boolean) - removes filter from column when set to false.
+     */
+    columns?: (string | Column)[];
+    /**
+     * Enables table sorting by column value. Sorting will be performed corectly only if values in column are of one type: string (case insensitive) or number.
+     *
+     * Sorter can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic sorting inside component.
+     * - resetable (Boolean) - If set to true clicking on sorter have three states: ascending, descending and null. That means that third click on sorter will reset sorting, and restore table to original order.
+     */
+    columnSorter?: boolean | Sorter;
+    /**
+     * ReactNode for passing custom CElementCover content.
+     *
+     * @since 4.9.0
+     */
+    elementCover?: ReactNode;
+    /**
+     * If `true` Displays table footer, which mirrors table header. (without column filter).
+     * Or Array of objects or strings, where each element represents one cell in the table footer.
+     *
+     * Example items:
+     * `['FooterCell', 'FooterCell', 'FooterCell']`
+     * or
+     * `[{ label: 'FooterCell', _props: { color: 'success' }, ...]`
+     */
+    footer?: boolean | (FooterItem | string)[];
+    /**
+     * Set to false to remove table header.
+     */
+    header?: boolean;
+    /**
+     * Array of objects, where each object represents one item - row in table. Additionally, you can add style classes to each row by passing them by '_props' key and to single cell by '_cellProps'.
+     *
+     * Example item:
+     * `{ name: 'John' , age: 12, _props: { color: 'success' }, _cellProps: { age: { className: 'fw-bold'}}}`
+     *
+     * @since 4.9.0
+     */
+    items?: Item[];
+    /**
+     * The total number of items. Use if you pass a portion of data from an external source to let know component what is the total number of items.
+     */
+    itemsNumber?: number;
+    /**
+     * Number of items per site, when pagination is enabled.
+     */
+    itemsPerPage?: number;
+    /**
+     * Label for items per page selector.
+     */
+    itemsPerPageLabel?: string;
+    /**
+     * Items per page selector options.
+     */
+    itemsPerPageOptions?: number[];
+    /**
+     * Adds select element over table, which is used for control items per page in pagination. If you want to customize this element, pass object with optional values:
+     * - external (Boolean) - disables automatic 'itemsPerPage' change.
+     */
+    itemsPerPageSelect?: boolean | ItemsPerPageSelect;
+    /**
+     * When set, table will have loading style: loading spinner and reduced opacity.
+     */
+    loading?: boolean;
+    /**
+     * ReactNode or string for passing custom noItemsLabel texts.
+     */
+    noItemsLabel?: string | ReactNode;
+    /**
+     * Page change callback.
+     */
+    onActivePageChange?: (value: number) => void;
+    /**
+     * Column filter change callback.
+     */
+    onColumnFilterChange?: (value: ColumnFilterValue) => void;
+    /**
+     * Filtered items change callback.
+     */
+    onFilteredItemsChange?: (items: Item[]) => void;
+    /**
+     * Pagination change callback.
+     */
+    onItemsPerPageChange?: (value: number) => void;
+    /**
+     * Row click callback.
+     */
+    onRowClick?: (item: Item, index: number, columnName: string, event: MouseEvent | boolean) => void;
+    /**
+     * Select all callback.
+     *
+     * @since 4.9.0
+     */
+    onSelectAll?: () => void;
+    /**
+     * Selected items change callback.
+     */
+    onSelectedItemsChange?: (items: Item[]) => void;
+    /**
+     * Sorter value change callback.
+     */
+    onSorterChange?: (value: SorterValue) => void;
+    /**
+     * Table filter change callback.
+     */
+    onTableFilterChange?: (value?: string) => void;
+    /**
+     * Enables default pagination. Set to true for default setup or pass an object with additional CPagination props. Default pagination will always have the computed number of pages that cannot be changed. The number of pages is generated based on the number of passed items and 'itemsPerPage' prop. If this restriction is an obstacle, you can make external CPagination instead.
+     */
+    pagination?: boolean | Pagination;
+    /**
+     * Properties to `CSmartPagination` component - https://coreui.io/react/docs/components/smart-pagination#csmartpagination
+     */
+    paginationProps?: CSmartPaginationProps;
+    /**
+     * Scoped columns.
+     */
+    scopedColumns?: ScopedColumns;
+    /**
+     * Add checkboxes to make table rows selectable.
+     */
+    selectable?: boolean;
+    /**
+     * Enables select all checkbox displayed in the header of the table.
+     *
+     * Can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic selection inside the component.
+     *
+     * @since 4.9.0
+     */
+    selectAll?: boolean | {
+        external?: boolean;
+    };
+    /**
+     * Array of selected objects, where each object represents one item - row in table.
+     *
+     * Example item: `{ name: 'John' , age: 12 }`
+     *
+     * @since 4.9.0
+     */
+    selected?: Item[];
+    /**
+     * State of the sorter. Name key is column name, direction can be 'asc' or 'desc'.
+     */
+    sorterValue?: SorterValue;
+    /**
+     * Sorter icon when items are unsorted.
+     */
+    sortingIcon?: ReactNode;
+    /**
+     * Sorter icon when items are sorted ascending.
+     */
+    sortingIconAscending?: ReactNode;
+    /**
+     * Sorter icon when items are sorted descending.
+     */
+    sortingIconDescending?: ReactNode;
+    /**
+     * Properties to `CTableBody` component - https://coreui.io/react/docs/components/table/#ctablebody
+     */
+    tableBodyProps?: CTableBodyProps;
+    /**
+     * Properties to `CTableFoot` component - https://coreui.io/react/docs/components/table/#ctablefoot
+     */
+    tableFootProps?: CTableFootProps;
+    /**
+     * When set, displays table filter above table, allowing filtering by specific column.
+     *
+     * Column filter can be customized, by passing prop as object with additional options as keys. Available options:
+     * - external (Boolean) - Disables automatic filtering inside component.
+     * - lazy (Boolean) - Set to true to trigger filter updates only on change event.
+     */
+    tableFilter?: boolean | TableFilter;
+    /**
+     * The element represents a caption for a component.
+     */
+    tableFilterLabel?: string;
+    /**
+     * Specifies a short hint that is visible in the search input.
+     */
+    tableFilterPlaceholder?: string;
+    /**
+     * Value of table filter.
+     */
+    tableFilterValue?: string;
+    /**
+     * Properties to `CTableHead` component - https://coreui.io/react/docs/components/table/#ctablehead
+     */
+    tableHeadProps?: CTableHeadProps;
+    /**
+     * Properties to `CTable` component - https://coreui.io/react/docs/components/table/#ctable
+     */
+    tableProps?: CTableProps;
+}

package/dist/esm/components/smart-table/CSmartTableItemsPerPageSelector.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+interface CSmartTableItemsPerPageSelectorProps extends HTMLAttributes<HTMLSelectElement> {
+    itemsPerPage?: number;
+    itemsPerPageLabel?: string;
+    itemsPerPageOptions?: number[];
+}
+export declare const CSmartTableItemsPerPageSelector: React.ForwardRefExoticComponent<CSmartTableItemsPerPageSelectorProps & React.RefAttributes<HTMLSelectElement>>;
+export {};

package/dist/esm/components/smart-table/index.d.ts

@@ -0,0 +1,2 @@
+import { CSmartTable } from './CSmartTable';
+export { CSmartTable };

package/dist/esm/components/smart-table/types.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { CTableDataCellProps } from '../table/CTableDataCell';
+import { CTableHeaderCellProps } from '../table/CTableHeaderCell';
+import { CTableRowProps } from '../table/CTableRow';
+export type Column = {
+    children?: Column[];
+    filter?: boolean | ((values: any[], onChange: (value: any) => void) => ReactNode);
+    group?: string;
+    key: string;
+    label?: string;
+    sorter?: boolean;
+    _style?: any;
+    _props?: CTableHeaderCellProps;
+    _colStyle?: any;
+    _colProps?: CTableDataCellProps;
+};
+export type ColumnFilter = {
+    lazy?: boolean;
+    external?: boolean;
+};
+export type ColumnFilterValue = {
+    [key: string]: any;
+};
+export type FooterItem = {
+    label?: string;
+    _props?: CTableDataCellProps;
+};
+export type Group = {
+    children?: Group[] | Column[];
+    colspan?: number;
+    deep?: number;
+    group?: string;
+    key: string;
+    label?: string;
+    _style?: any;
+    _props?: CTableHeaderCellProps;
+};
+export type Item = {
+    [key: string]: number | string | any;
+    _cellProps?: any;
+    _props?: CTableRowProps;
+    _selectable?: boolean;
+    _selected?: boolean;
+};
+export type ItemsPerPageSelect = {
+    external?: boolean;
+};
+export type Pagination = {
+    external?: boolean;
+};
+export type Sorter = {
+    resetable?: boolean;
+    external?: boolean;
+};
+export type ScopedColumns = {
+    [key: string]: any;
+    details?: (a: Item, b: number) => ReactNode;
+};
+export type SorterValue = {
+    column?: string;
+    state?: number | string;
+};
+export type TableFilter = {
+    lazy?: boolean;
+    external?: boolean;
+};

package/dist/esm/components/smart-table/utils.d.ts

@@ -0,0 +1,29 @@
+import type { Column, ColumnFilter, ColumnFilterValue, Group, Item, Sorter, SorterValue, TableFilter } from './types';
+export declare const filterColumns: (items: Item[], columnFilter: boolean | ColumnFilter | undefined, columnFilterState: ColumnFilterValue, itemsDataColumns: string[]) => Item[];
+export declare const filterTable: (items: Item[], tableFilter: boolean | TableFilter | undefined, tableFilterState: string, itemsDataColumns: string[]) => Item[];
+export declare const getClickedColumnName: (target: HTMLTextAreaElement, columnNames: string[], selectable: boolean | undefined) => string;
+export declare const getColumnKey: (column: Column | string) => string;
+export declare const getColumnLabel: (column: Column | string) => string;
+export declare const getColumnName: (column: string | Column) => string;
+export declare const getColumnNames: (columns: (string | Column)[] | undefined, items: Item[]) => string[];
+export declare const getColumns: (_columns: (Column | Group | string)[]) => (Column | string)[];
+export declare const countColumns: (columns: Column[], counter?: number) => number;
+export declare const getColumnGroups: (columns: (string | Column)[] | undefined) => {
+    children?: Column[] | Group[] | undefined;
+    colspan?: number | undefined;
+    group?: string | undefined;
+    key: string;
+    label?: string | undefined;
+    _style?: any;
+    _props?: import("../table/CTableHeaderCell").CTableHeaderCellProps | undefined;
+}[][];
+export declare const getColumnNamesFromItems: (items: Item[]) => string[];
+export declare const getColumnSorterState: (key: string, sorterState: SorterValue | undefined) => string | number;
+export declare const getColumnValues: (items: Item[], key: string) => any[];
+export declare const getTableDataCellProps: (column: Column | string, item: Item, colName: string) => {};
+export declare const getTableDataCellStyles: (column: Column | string, item: Item, colName: string) => {};
+export declare const getTableHeaderCellProps: (column: Column | string) => import("../table/CTableHeaderCell").CTableHeaderCellProps;
+export declare const getTableHeaderCellStyles: (column: Column | string, columnSorter: boolean | Sorter | undefined) => any;
+export declare const isSortable: (i: number, columns: (string | Column)[] | undefined, columnSorter: Sorter | boolean | undefined, itemsDataColumns: string[], columnNames: string[]) => boolean | undefined;
+export declare const pretifyName: (name: string) => string;
+export declare const sortItems: (columnSorter: boolean | Sorter | undefined, items: Item[], itemsDataColumns: string[], sorterState: SorterValue) => Item[];