@rio-cloud/rio-uikit 1.11.0 → 1.12.0

package/lib/es/src/components/assetTree/AssetTree.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const head_1 = tslib_1.__importDefault(require("lodash/fp/head"));
+const isArray_1 = tslib_1.__importDefault(require("lodash/fp/isArray"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const tiny_invariant_1 = tslib_1.__importDefault(require("tiny-invariant"));
+const TreeCategory_1 = tslib_1.__importDefault(require("./TreeCategory"));
+const Resizer_1 = tslib_1.__importDefault(require("../resizer/Resizer"));
+const TreeSidebar_1 = tslib_1.__importDefault(require("./TreeSidebar"));
+const getWidthInBoundaries_1 = tslib_1.__importDefault(require("../../utils/getWidthInBoundaries"));
+const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../usePrevious"));
+const SmoothScrollbars_1 = tslib_1.__importDefault(require("../smoothScrollbars/SmoothScrollbars"));
+const DEFAULT_WIDTH = 350;
+const DEFAULT_MIN_WIDTH = 100;
+const DEFAULT_MAX_WIDTH = 0;
+const TreeMode = {
+    MODE_FLY: 'fly',
+    MODE_FLUID: 'fluid',
+};
+const getSidebarBodyRef = (sidebarRef) => (0, head_1.default)(sidebarRef?.current?.getElementsByClassName('AssetTreeBody'));
+const getCurrentCategoryElement = (children, currentCategoryId) => {
+    return (0, isArray_1.default)(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;
+};
+const renderTreesOffscreen = (children, categoryId) => {
+    return react_1.default.Children.map(children, child => {
+        const offscreenClasses = (0, classnames_1.default)('TreeOffscreenWrapper', child && child.props.id !== categoryId && 'position-offscreen pointer-events-none');
+        return (0, jsx_runtime_1.jsx)("div", { className: offscreenClasses, children: child });
+    });
+};
+// Check if the child is a React element and if it has the type TreeCategory
+const isTreeCategory = (child) => {
+    return react_1.default.isValidElement(child) && child.type === TreeCategory_1.default;
+};
+const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
+    const { className, resizable = true, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, height, bordered = false, currentCategoryId, isOpen = true, useOffscreen = false, fly = false, onCategoryChange = noop_1.default, onToggleTree = noop_1.default, onResizeEnd = noop_1.default, children = [], ...remainingProps } = props;
+    const getSidebarMode = (isFly) => (isFly ? TreeMode.MODE_FLY : TreeMode.MODE_FLUID);
+    const [treeWidth, setTreeWidth] = (0, react_1.useState)(width);
+    const [isResize, setIsResize] = (0, react_1.useState)(false);
+    const [sidebarMode, setSidebarMode] = (0, react_1.useState)(getSidebarMode(fly));
+    const sidebarRef = (0, react_1.useRef)(null);
+    const mergedRefs = (0, mergeRefs_1.default)([ref, sidebarRef]);
+    // Update internal state when props change
+    const previousWidth = (0, usePrevious_1.default)(width);
+    if (previousWidth !== width) {
+        setTreeWidth(width);
+    }
+    const [previousMode, setPreviousMode] = (0, react_1.useState)(fly);
+    if (previousMode !== fly) {
+        setSidebarMode(getSidebarMode(fly));
+        setPreviousMode(fly);
+    }
+    const childrenArray = react_1.default.Children.toArray(children);
+    // check for children type of TreeCategory and throw error in case
+    (0, tiny_invariant_1.default)(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type "TreeCategory"');
+    const classes = (0, classnames_1.default)('AssetTree', className, !isOpen && 'closed', bordered && 'border', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
+    const resizeLimitClasses = (0, classnames_1.default)('AssetTreeResizeLimit', isResize && 'display-block');
+    const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
+    const resizeLimitStyle = { left: resizeIndicatorPosition };
+    const firstChild = (0, head_1.default)(childrenArray);
+    const category = currentCategoryId ? getCurrentCategoryElement(childrenArray, currentCategoryId) : firstChild;
+    const style = {
+        width: treeWidth,
+        height,
+    };
+    const handleToggleTreeContent = () => onToggleTree(!isOpen);
+    const handleSelectCategory = (selectedCategoryId) => {
+        onCategoryChange(selectedCategoryId);
+        if (!isOpen) {
+            handleToggleTreeContent();
+        }
+        else if (isOpen && currentCategoryId === selectedCategoryId) {
+            handleToggleTreeContent();
+        }
+    };
+    const handleResize = (diff) => {
+        const halfWindowWidth = window.innerWidth * 0.5;
+        const usedMaxWidth = maxWidth || halfWindowWidth;
+        // Check for sidebar width if it is half window size. If it was before but the sidebar was resized so it is
+        // no longer half window size, set the sidebar width to half the window size to avoid jumping sidebar
+        // to old width
+        setTreeWidth(oldWidth => {
+            const updatedWidth = oldWidth - diff;
+            return (0, getWidthInBoundaries_1.default)(minWidth, usedMaxWidth, updatedWidth);
+        });
+    };
+    const handleResizeStart = () => {
+        const body = getSidebarBodyRef(sidebarRef);
+        if (body) {
+            body.classList.add('pointer-events-none');
+        }
+        setIsResize(true);
+    };
+    const handleResizeEnd = () => {
+        const body = getSidebarBodyRef(sidebarRef);
+        if (body) {
+            body.classList.remove('pointer-events-none');
+        }
+        setIsResize(false);
+        onResizeEnd();
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: classes, style: style, ref: mergedRefs, children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", { className: 'AssetTreeContent', children: [(0, jsx_runtime_1.jsx)(TreeSidebar_1.default, { onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent, children: (0, isArray_1.default)(children) ? children : [children] }), (0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, { slideIn: true, className: 'AssetTreeBody', children: useOffscreen ? renderTreesOffscreen(childrenArray, currentCategoryId) : category })] }), resizable && isOpen && ((0, jsx_runtime_1.jsx)(Resizer_1.default, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer_1.default.HORIZONTAL, position: Resizer_1.default.RIGHT }))] }));
+}));
+Object.assign(AssetTree, TreeMode);
+exports.default = AssetTree;

package/lib/es/src/components/assetTree/Tree.d.ts

@@ -0,0 +1,253 @@
+import React from 'react';
+export { getTypeCounts, getSubTypeCounts } from './treeUtils';
+export type TreeItemName = {
+    firstName?: string;
+    lastName: string;
+};
+export type TreeGroup = {
+    /**
+     * A unique identifier of a group.
+     */
+    id: string;
+    /**
+     * The name of a group.
+     */
+    name: string | React.ReactNode;
+    /**
+     * Can be set to "last" to enforce the last position in the tree.
+     */
+    position?: 'last';
+    /**
+     * Disallows the selection of the group itself.
+     */
+    disabled?: boolean;
+    /**
+     * The rioglyph icon name for a group.
+     *
+     * The prefix `rioglyph-` can be omitted.
+     */
+    icon?: string;
+    /**
+     * The rioglyph icon name for a expanded group.
+     *
+     * The prefix `rioglyph-` can be omitted.
+     */
+    expandedIcon?: string;
+    /**
+     * Additional classes added to the group element.
+     */
+    className?: string;
+};
+export type TreeItem = {
+    /**
+     * A unique identifier of an item.
+     */
+    id: string;
+    /**
+     * The name of an item. Either it is a plain string or an object composed of:
+     * `firstName` and `lastName` where __lastName__ is mandatory.
+     */
+    name: string | TreeItemName;
+    /**
+     * The subline of an item. This can e used to show additional information for that item.
+     */
+    info?: string | React.ReactNode;
+    /**
+     * The primary type of the item.
+     *
+     * This is also used as the fallback icon name and refers to the name of the respective
+     * rioglyph icon (excluding the `rioglyph-` prefix).
+     */
+    type: string;
+    /**
+     * Optional icon override for the item.
+     *
+     * - If set to a string (e.g. `'truck'`), this icon will be used explicitly.
+     * - If set to `undefined`, the `type` property will be used as the fallback icon.
+     * - If set to `null`, no icon will be rendered, even if `type` is defined.
+     *
+     * This allows full control over the icon behavior while maintaining backward compatibility with type-based icons.
+     */
+    icon?: string | null;
+    /**
+     * Optional sub-type of the item.
+     *
+     * This refers to the name of an additional rioglyph icon (excluding the `rioglyph-` prefix),
+     * typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop).
+     */
+    subType?: string;
+    /**
+     * Optional pair icon override for the subType.
+     *
+     * - If set to a string (e.g. `'fuel-gas'`), this icon will be used explicitly.
+     * - If set to `undefined`, the `subType` property will be used as the fallback icon.
+     * - If set to `null`, no icon will be rendered, even if `subType` is defined.
+     *
+     * This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons.
+     */
+    pairIcon?: string | null;
+    /**
+     * List of group ids the items is associated with.
+     *
+     * @default []
+     */
+    groupIds?: string[];
+    /**
+     * Additional classes added to the item element.
+     */
+    className?: string;
+};
+export type GroupedItem = TreeGroup & {
+    items: TreeItem[];
+};
+export type GroupedItems = {
+    [key: string]: GroupedItem;
+};
+export type SelectionChangeResponse = {
+    items: string[];
+    groups: string[];
+};
+export type TreeProps = {
+    /**
+     * The list of groups of the items. If no groups are provided all items
+     * are rendered as flat list.
+     *
+     * @default []
+     */
+    groups?: TreeGroup[];
+    /**
+     * The list of items.
+     *
+     * @default []
+     */
+    items?: TreeItem[];
+    /**
+     * List of selected group ids.
+     *
+     * @default []
+     */
+    selectedGroups?: string[];
+    /**
+     * List of selected item ids.
+     *
+     * @default []
+     */
+    selectedItems?: string[];
+    /**
+     * Merged Callback for item and group selection changes.
+     * It responds with a selection object that contains the selected itemIds and groupIds:
+     * `{ items: [], groups: [] }`
+     * @returns
+     */
+    onSelectionChange?: ({ items, groups }: SelectionChangeResponse) => void;
+    /**
+     * Defines the selection behavior of the tree.
+     *
+     * @default true
+     */
+    hasMultiselect?: boolean;
+    /**
+     * Defines if the single selection should also show radios.
+     *
+     * @default false
+     */
+    showRadioButtons?: boolean;
+    /**
+     * Defines whether or not the built-in Search is shown.
+     *
+     * @default false
+     */
+    hideSearch?: boolean;
+    /**
+     * The text used as placeholder for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Callback for when the search value changes.
+     * @param value
+     * @returns
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Used to define custom search component which replaces the built-in search.
+     */
+    search?: React.ReactNode;
+    /**
+     * Used to define custom asset type counter component which replaces the built-in summary.
+     */
+    summary?: React.ReactNode;
+    /**
+     * Defines whether a summary is shown.
+     *
+     * @default false
+     */
+    hideSummary?: boolean;
+    /**
+     * Callback triggered when the built-in asset type filter changes.
+     * This is only available when the default summary is used.
+     *
+     * @param type
+     * @returns
+     */
+    onTypeFilterChange?: (currentTypes: string[]) => void;
+    /**
+     * Defines whether the entire area below the search field is shown or not. Note: Disabling the
+     * tree head will hide the select all checkbox and the tree options as well as the tree summary.
+     *
+     * @default false
+     */
+    hideTreeHead?: boolean;
+    treeHeaderContent?: React.ReactElement;
+    /**
+     * Defines the max-height of the scrollable list.
+     */
+    scrollHeight?: number;
+    /**
+     * List of group ids which are expanded.
+     */
+    expandedGroups?: string[];
+    /**
+     * Callback function triggered when a group expands or collapses.
+     * @param newExpandedGroups
+     * @returns
+     */
+    onExpandGroupsChange?: (newExpandedGroups: string[]) => void;
+    /**
+     * Defines whether empty groups are shown or not.
+     *
+     * @default true
+     */
+    showEmptyGroups?: boolean;
+    /**
+     * Component to offer customization options for the tree.
+     */
+    treeOptions?: React.ReactNode[];
+    /**
+     * Tooltip content for the tree options dropdown.
+     */
+    treeOptionsTooltip?: React.ReactNode;
+    /**
+     * Disables animation when filtering or using search
+     *
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * The number of items (including groups and children) used for virtualizing the tree.
+     *
+     * @default 50
+     */
+    virtualizeThreshold?: number;
+    /**
+     * The number of items rendered beyond the visible area of a virtualized tree.
+     *
+     * @default 5
+     */
+    overscan?: number;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const Tree: React.MemoExoticComponent<(props: TreeProps) => import("react/jsx-runtime").JSX.Element>;
+export default Tree;