@symply.io/basic-components 1.6.11-alpha.6 → 1.7.0-alpha.2

package/VirtualGrid/types.d.ts

@@ -0,0 +1,106 @@
+import type { ReactNode, RefObject, MouseEvent, ReactElement, CSSProperties } from "react";
+import type { VirtualItem } from "@tanstack/react-virtual";
+declare type HexColor = `#${string}`;
+export declare type CustomVirtualGridRowBgColor = {
+    normal?: HexColor;
+    hover?: HexColor;
+};
+export declare type VirtualGridOrderType = "ASC" | "DESC" | "NONE";
+export declare type VirtualGridSortingProps = {
+    accessor: string;
+    order: VirtualGridOrderType;
+};
+declare type InitialVirtualGridStateProps = {
+    sortBy?: VirtualGridSortingProps;
+};
+export declare type VirtualGridColumnProps = {
+    headerTip?: string;
+    Header: ReactElement;
+    Body: ReactElement;
+    Footer?: ReactElement;
+    align?: "left" | "center" | "right";
+    accessor: string;
+    sortable?: boolean;
+    fixable?: "left" | "right";
+    width: number;
+};
+export declare type UseVirtualGridBaseProps<RowProps extends Record<string, any>> = {
+    data: Array<RowProps>;
+    columns: Array<VirtualGridColumnProps>;
+    initialState?: InitialVirtualGridStateProps;
+    disableSortBy?: boolean;
+    onSort?: (props: VirtualGridSortingProps) => unknown;
+};
+export declare type UseVirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = UseVirtualGridBaseProps<RowProps> & ExtendedProps;
+export declare type VirtualGridHeaderCellProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Pick<VirtualGridColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseVirtualGridProps<RowProps, ExtendedProps>, keyof UseVirtualGridBaseProps<RowProps>> & {
+    Cell: ReactElement;
+    title: string;
+    onSort: ({ accessor, }: Pick<VirtualGridSortingProps, "accessor">) => unknown;
+};
+export declare type VirtualGridBodyCellProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Pick<VirtualGridColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseVirtualGridProps<RowProps, ExtendedProps>, keyof UseVirtualGridBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type VirtualGridFooterCellProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Pick<VirtualGridColumnProps, "align" | "accessor" | "fixable" | "width"> & Omit<UseVirtualGridProps<RowProps, ExtendedProps>, keyof UseVirtualGridBaseProps<RowProps>> & {
+    Cell: ReactElement;
+};
+export declare type UseVirtualGridReturns<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    headers: Array<VirtualGridHeaderCellProps<RowProps, ExtendedProps>>;
+    footers: Array<VirtualGridFooterCellProps<RowProps, ExtendedProps>>;
+    columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+    onResetSorting: () => void;
+};
+export declare type VirtualGridHeaderProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    headers: Array<VirtualGridHeaderCellProps<RowProps, ExtendedProps>>;
+    headerBgColor?: CSSProperties["color"];
+    headerTextColor?: CSSProperties["color"];
+    noData?: boolean;
+};
+export declare type VirtualGridBodyProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+    rows: Array<RowProps>;
+    noDataText?: string;
+    onRowClick?: (row: RowProps) => unknown;
+    onContextMenu?: (event: MouseEvent<HTMLTableRowElement>, row: RowProps) => unknown;
+    onCustomizeRowBgColor?: ({ row, columns, }: {
+        row: RowProps;
+        columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+    }) => CustomVirtualGridRowBgColor;
+};
+export declare type VirtualGridBodyRowProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Omit<VirtualGridBodyProps<RowProps, ExtendedProps>, "noDataText"> & {
+    rowIndex: number;
+    virtualRow: VirtualItem;
+};
+export declare type VirtualGridFooterProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = {
+    footers?: Array<VirtualGridFooterCellProps<RowProps, ExtendedProps>>;
+    footerBgColor?: CSSProperties["color"];
+    footerTextColor?: CSSProperties["color"];
+    noData?: boolean;
+};
+export declare type VirtualGridCoreProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = Omit<VirtualGridHeaderProps<RowProps, ExtendedProps>, "noData"> & VirtualGridBodyProps<RowProps, ExtendedProps> & Omit<VirtualGridFooterProps<RowProps, ExtendedProps>, "noData"> & {
+    dense?: boolean;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export declare type VirtualGridProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> = VirtualGridCoreProps<RowProps, ExtendedProps> & {
+    estimateRowHeight?: number;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+};
+export interface GridVirtualizerContextProviderProps<RowProps extends Record<string, any>, ExtendedProps extends Record<string, any>> {
+    dense?: boolean;
+    children: ReactNode;
+    rows: Array<RowProps>;
+    estimateRowHeight?: number;
+    columns: Array<VirtualGridBodyCellProps<RowProps, ExtendedProps>>;
+}
+export interface IGridVirtualizerContext {
+    tableRef: RefObject<HTMLDivElement>;
+    virtualRows: Array<VirtualItem>;
+    leftShadowVisible: boolean;
+    rightShadowVisible: boolean;
+    getTotalSize: () => number;
+    onMeasureElement: (node: Element | null | undefined) => void;
+    onProcessShadowVisible: () => void;
+}
+export {};

package/VirtualGrid/types.js

@@ -0,0 +1 @@
+export {};

package/VirtualGrid/useVirtualGrid.d.ts

@@ -0,0 +1,3 @@
+import type { UseVirtualGridProps, UseVirtualGridReturns } from "./types";
+declare function useVirtualGrid<T extends Record<string, any>, F extends Record<string, any>>(props: UseVirtualGridProps<T, F>): UseVirtualGridReturns<T, F>;
+export default useVirtualGrid;

package/VirtualGrid/useVirtualGrid.js

@@ -0,0 +1,103 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState, useMemo, useCallback } from "react";
+function useVirtualGrid(props) {
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
+    if (!data) {
+        throw new Error('"data" is required but got null or undefined');
+    }
+    if (!columns) {
+        throw new Error('"columns" is required but got null or undefined');
+    }
+    var initialSortingProps = useMemo(function () {
+        var sortBy = (initialState || {}).sortBy;
+        var _a = sortBy || {}, accessor = _a.accessor, order = _a.order;
+        return {
+            accessor: accessor || "",
+            order: !!accessor ? order || "NONE" : "NONE",
+        };
+    }, [initialState]);
+    var _a = useState(initialSortingProps), sortingProps = _a[0], setSortingProps = _a[1];
+    var handleSort = useCallback(function (_a) {
+        var accessor = _a.accessor;
+        if (!disableSortBy) {
+            var newSortingProps = __assign({}, sortingProps);
+            if (accessor !== sortingProps.accessor ||
+                sortingProps.order === "NONE") {
+                newSortingProps = { accessor: accessor, order: "ASC" };
+            }
+            else if (sortingProps.order === "ASC") {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "DESC" });
+            }
+            else {
+                newSortingProps = __assign(__assign({}, sortingProps), { order: "NONE" });
+            }
+            if (onSort) {
+                onSort(__assign({}, newSortingProps));
+            }
+            setSortingProps(__assign({}, newSortingProps));
+        }
+    }, [disableSortBy, onSort, sortingProps]);
+    var onResetSorting = useCallback(function () {
+        if (onSort) {
+            onSort(__assign({}, initialSortingProps));
+        }
+        setSortingProps(__assign({}, initialSortingProps));
+    }, [initialSortingProps, onSort]);
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.accessor, order = sortingProps.order;
+        if (accessor !== field || order === "NONE") {
+            return "";
+        }
+        if (order === "ASC") {
+            return "↑";
+        }
+        return "↓";
+    }, [sortingProps]);
+    var rows = useMemo(function () { return data.map(function (d) { return d; }); }, [data]);
+    var cols = useMemo(function () {
+        return columns.map(function (col) {
+            var Body = col.Body;
+            return __assign(__assign({ Cell: cloneElement(Body || _jsx(_Fragment, {}), { column: col }) }, col), rest);
+        });
+    }, [columns, rest]);
+    var headers = useMemo(function () {
+        return columns.map(function (col) {
+            var Header = col.Header, accessor = col.accessor, sortable = col.sortable, headerTip = col.headerTip;
+            var canSortBy = sortable && !disableSortBy;
+            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), sortable: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
+        });
+    }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
+    var footers = useMemo(function () {
+        return columns.map(function (col) {
+            var Footer = col.Footer;
+            return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
+                    column: col,
+                    rows: rows,
+                }) }, col), rest);
+        });
+    }, [columns, rest, rows]);
+    return { headers: headers, footers: footers, columns: cols, rows: rows, onResetSorting: onResetSorting };
+}
+export default useVirtualGrid;

package/index.d.ts

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
@@ -57,3 +58,4 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualGrid } from "./VirtualGrid";

package/index.js

@@ -29,6 +29,7 @@ export * from "./TablePagination";
 export * from "./TextInput";
 export * from "./ToastPrompt";
 export * from "./VideoPlayerModal";
+export * from "./VirtualGrid";
 export { default as AlertDialog } from "./AlertDialog";
 export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
@@ -57,3 +58,4 @@ export { default as TabGroup } from "./TabGroup";
 export { default as TablePagination } from "./TablePagination";
 export { default as TextInput } from "./TextInput";
 export { default as VideoPlayerModal } from "./VideoPlayerModal";
+export { default as VirtualGrid } from "./VirtualGrid";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.6.11-alpha.6",
+  "version": "1.7.0-alpha.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/DataTable/TableCore/TableFooter.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { TableFooterProps, KvProps } from "../types";
-declare function TableFooter<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableFooterProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof TableFooter>;
-export default _default;

package/DataTable/TableCore/TableHeader.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import type { TableHeaderProps, KvProps } from "../types";
-declare function TableHeader<RowProps extends KvProps, ExtendedProps extends KvProps>(props: TableHeaderProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
-declare const _default: import("react").MemoExoticComponent<typeof TableHeader>;
-export default _default;

package/DataTable/TableCore/index.d.ts

@@ -1,3 +0,0 @@
-import type { KvProps, DataTableCoreProps } from "../types";
-declare function TableCore<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableCoreProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
-export default TableCore;

package/DataTable/VirtualizerContext.d.ts

@@ -1,3 +0,0 @@
-import type { KvProps, IVirtualizerContext, VirtualizerContextProviderProps } from "./types";
-export declare function VirtualizerContextProvider<RowProps extends KvProps, ExtendedProps extends KvProps>(props: VirtualizerContextProviderProps<RowProps, ExtendedProps>): import("react/jsx-runtime").JSX.Element;
-export declare const useTableVirtualizer: () => IVirtualizerContext;