@rio-cloud/rio-uikit 0.16.4-beta.21 → 0.16.4-beta.22

package/lib/es/components/assetTree/AssetTree.d.ts

@@ -1,3 +1,85 @@
+import React from 'react';
+export type AssetTreeProps = {
+    /**
+     * Defines if the component will overlap the body content.
+     *
+     * @default false
+     */
+    fly?: boolean;
+    /**
+     * Defines whether or not the sidebar is resizable.
+     *
+     * @default true
+     */
+    resizable?: boolean;
+    /**
+     * Defines whether the component has a border or not.
+     *
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Defines the width of the component. The value is set as inline style.
+     * Note: when component is resizable it will take the provided
+     * width in px only and convert it to number in case.
+     *
+     * @default 350
+     */
+    width?: number;
+    /**
+     * Defines the minimum width of the component in px that will take effect when resizing.
+     *
+     * @default 100
+     */
+    minWidth?: number;
+    /**
+     * Defines the maximum width of the component in px that will take effect when resizing.
+     *
+     * @default 0
+     */
+    maxWidth?: number;
+    /**
+     * Defines the height of the component in px.
+     */
+    height?: number;
+    /**
+     * Defines whether the component is open or not.
+     *
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Callback for when the tree visibility is toggled.
+     * @param isOpen
+     * @returns
+     */
+    onToggleTree?: (isOpen: boolean) => void;
+    /**
+     * The id of the category which is currently active and shall be shown.
+     */
+    currentCategoryId: string;
+    /**
+     * Callback for handling change of category.
+     * @param selectedCategoryId
+     * @returns
+     */
+    onCategoryChange: (selectedCategoryId: string) => void;
+    /**
+     * Callback for when the resize is done.
+     */
+    onResizeEnd: VoidFunction;
+    /**
+     * Defines whether the tree components are rendered offscreen and kept mounted in the DOM.
+     *
+     * @default false
+     */
+    useOffscreen: boolean;
+    /**
+     * Additional classes added on the wrapper element.
+     */
+    className?: string;
+};
+declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<AssetTreeProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>>;
 export default AssetTree;
-declare const AssetTree: React.MemoExoticComponent<React.ForwardRefExoticComponent<React.RefAttributes<any>>>;
-import React from "react";

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

@@ -3,15 +3,25 @@ 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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
 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 TreeCategory_1 = tslib_1.__importDefault(require("./TreeCategory"));
 const getWidthInBoundaries_1 = tslib_1.__importDefault(require("../../utils/getWidthInBoundaries"));
-const getSidebarBodyRef = sidebarRef => (0, head_1.default)(sidebarRef.current.getElementsByClassName('AssetTreeBody'));
+const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../usePrevious"));
+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) => { var _a; return (0, head_1.default)((_a = sidebarRef === null || sidebarRef === void 0 ? void 0 : sidebarRef.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('AssetTreeBody')); };
 const getCurrentCategoryElement = (children, currentCategoryId) => {
     return (0, isArray_1.default)(children) ? children.find(child => child && child.props.id === currentCategoryId) : children;
 };
@@ -21,30 +31,42 @@ const renderTreesOffscreen = (children, categoryId) => {
         return (0, jsx_runtime_1.jsx)("div", Object.assign({ 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, width, maxWidth, minWidth, height, bordered, currentCategoryId, isOpen, useOffscreen, fly, onCategoryChange, onToggleTree, onResizeEnd, children } = props, remainingProps = tslib_1.__rest(props, ["className", "resizable", "width", "maxWidth", "minWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"]);
-    const getSidebarMode = isFly => (isFly ? AssetTree.MODE_FLY : AssetTree.MODE_FLUID);
-    const [treeWidth, setTreeWidth] = (0, react_1.useState)(parseInt(width, 10));
+    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 = [] } = props, remainingProps = tslib_1.__rest(props, ["className", "resizable", "width", "minWidth", "maxWidth", "height", "bordered", "currentCategoryId", "isOpen", "useOffscreen", "fly", "onCategoryChange", "onToggleTree", "onResizeEnd", "children"]);
+    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)();
-    (0, react_1.useImperativeHandle)(ref, () => sidebarRef, []);
+    const sidebarRef = (0, react_1.useRef)(null);
+    const mergedRefs = (0, mergeRefs_1.default)([ref, sidebarRef]);
     // Update internal state when props change
-    (0, react_1.useEffect)(() => setTreeWidth(width), [width]);
-    (0, react_1.useEffect)(() => setSidebarMode(getSidebarMode(fly)), [fly]);
-    const classes = (0, classnames_1.default)('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
+    const previousWidth = (0, usePrevious_1.default)(width);
+    if (previousWidth !== width) {
+        setTreeWidth(width);
+    }
+    const previousMode = (0, usePrevious_1.default)(fly);
+    if (previousMode !== fly) {
+        setSidebarMode(getSidebarMode(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 && 'panel panel-default', 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 categoryId = currentCategoryId || 0;
-    const firstChild = (0, head_1.default)(children);
-    const category = currentCategoryId ? getCurrentCategoryElement(children, currentCategoryId) : firstChild;
+    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 => {
+    const handleSelectCategory = (selectedCategoryId) => {
         onCategoryChange(selectedCategoryId);
         if (!isOpen) {
             handleToggleTreeContent();
@@ -53,7 +75,7 @@ const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
             handleToggleTreeContent();
         }
     };
-    const handleResize = diff => {
+    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
@@ -79,50 +101,8 @@ const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
         setIsResize(false);
         onResizeEnd();
     };
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: sidebarRef }, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'AssetTreeContent' }, { children: [(0, jsx_runtime_1.jsx)(TreeSidebar_1.default, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: (0, isArray_1.default)(children) ? children : [children] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'AssetTreeBody' }, { children: useOffscreen ? renderTreesOffscreen(children, categoryId) : 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 }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: classes, style: style, ref: mergedRefs }, { children: [(0, jsx_runtime_1.jsx)("div", { className: resizeLimitClasses, style: resizeLimitStyle }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'AssetTreeContent' }, { children: [(0, jsx_runtime_1.jsx)(TreeSidebar_1.default, Object.assign({ onSelectCategory: handleSelectCategory, currentCategoryId: currentCategoryId, onClick: handleToggleTreeContent }, { children: (0, isArray_1.default)(children) ? children : [children] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ 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 }))] })));
 }));
 AssetTree.displayName = 'AssetTree';
-AssetTree.MODE_FLY = 'fly';
-AssetTree.MODE_FLUID = 'fluid';
-AssetTree.defaultProps = {
-    width: 350,
-    minWidth: 100,
-    maxWidth: 0,
-    resizable: true,
-    bordered: false,
-    fly: false,
-    isOpen: true,
-    onToggleTree: () => { },
-    children: [],
-    onCategoryChange: () => { },
-    onResizeEnd: () => { },
-    useOffscreen: false,
-};
-AssetTree.propTypes = {
-    fly: prop_types_1.default.bool,
-    resizable: prop_types_1.default.bool,
-    bordered: prop_types_1.default.bool,
-    // When sidebar is resizable it will take the provided width in px only
-    width: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.number]),
-    minWidth: prop_types_1.default.number,
-    maxWidth: prop_types_1.default.number,
-    height: prop_types_1.default.number,
-    isOpen: prop_types_1.default.bool,
-    onToggleTree: prop_types_1.default.func,
-    currentCategoryId: prop_types_1.default.string.isRequired,
-    onCategoryChange: prop_types_1.default.func,
-    className: prop_types_1.default.string,
-    onResizeEnd: prop_types_1.default.func,
-    useOffscreen: prop_types_1.default.bool,
-    children: (props, propName, componentName) => {
-        const prop = props[propName];
-        let error = null;
-        react_1.default.Children.forEach(prop, child => {
-            if (child.type !== TreeCategory_1.default) {
-                error = new Error(`\`${componentName}\` children should be of type \`TreeCategory\`.`);
-            }
-        });
-        return error;
-    },
-};
+Object.assign(AssetTree, TreeMode);
 exports.default = AssetTree;

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

@@ -1,3 +1,196 @@
+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.
+     */
+    icon?: 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 type of an item which is also the name of the respective rioplyph icon without the prefix
+     * `rioglyph-`.
+     */
+    type: string;
+    /**
+     * The sub type of an item which is also the name of the respective rioplyph icon without the prefix.
+     * This could be used to show a secondary paired icon like for fuel type.
+     */
+    subType?: string;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * 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[];
+    /**
+     * Disables animation when filtering or using search
+     *
+     * @default false
+     */
+    disableAnimation?: boolean;
+    /**
+     * 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;
-declare const Tree: React.NamedExoticComponent<object>;
-import React from "react";