@sap-ux/ui-components/dist/components/UISection/UISections.d.ts

SAP UI Components Library

import React from 'react';
import { UISection } from './UISection.js';
import { UISplitterType, UISplitterLayoutType } from './UISplitter.js';
import './UISections.scss';
export declare const ANIMATION_TIME = 300;
export interface UISectionsProps {
    children: React.ReactNodeArray;
    splitter?: boolean;
    sizes?: Array<number | undefined>;
    sizesAsPercents?: boolean;
    height?: string;
    vertical?: boolean;
    minSectionSize?: number | Array<number>;
    animation?: boolean | boolean[];
    splitterType?: UISplitterType;
    /**
     * Tabindex of splitter element.
     *
     * @default 0
     */
    splitterTabIndex?: -1 | 0;
    onClose?: () => void;
    splitterTitle?: string;
    /**
     * Splitter layout type for resize splitter.
     *
     * @default UISplitterLayoutType.Compact
     */
    splitterLayoutType?: UISplitterLayoutType;
    onResize?: (sizes: Array<UISectionSize | undefined>) => void;
    onToggleFullscreen?: (isFullScreen: boolean) => void;
}
export interface UISectionsState {
    sizes?: Array<UISectionSize>;
    visibleSections?: number[];
    animate?: boolean;
    dynamicSection?: number;
}
export interface UISectionSize {
    start?: number;
    end?: number;
    percentage: boolean;
    size?: number;
}
/**
 * UISections component.
 *
 * @exports
 * @class {UISections}
 * @extends {React.Component<UISectionsProps, UISectionsState>}
 */
export declare class UISections extends React.Component<UISectionsProps, UISectionsState> {
    static readonly Section: typeof UISection;
    private sizeProperty;
    private readonly domSizeProperty;
    private startPositionProperty;
    private endPositionProperty;
    private resizeSections;
    private readonly rootRef;
    private isFullScreen;
    private rootSize;
    private ignoreAnimation;
    /**
     * Initializes component properties.
     *
     * @param {UISectionsProps} props
     */
    constructor(props: UISectionsProps);
    /**
     * Updates state sizes.
     *
     * @param newSize Latest size of root
     * @param sizes Sizes of sections
     * @param oldSize Old size of root before resize of window
     * @returns Calculated sizes and position for all sections
     */
    updateStateSizes(newSize: number, sizes: Array<number | UISectionSize | undefined>, oldSize?: number): UISectionSize[];
    componentDidMount(): void;
    /**
     * React lifecycle method that is invoked immediately after updating occurs.
     * This method is used to determine if the section sizes need to be recalculated
     * when the external prop sizes have changed.
     *
     * @param prevProps The previous props of the component before the update.
     * @param prevState The previous state of the component before the update.
     */
    componentDidUpdate(prevProps: UISectionsProps, prevState: UISectionsState): void;
    /**
     * Gets derived state from properties.
     *
     * @param {UISectionProps} nextProps
     * @param {UISectionsState} prevState
     * @returns {UISectionsState | null}
     */
    static getDerivedStateFromProps(nextProps: UISectionsProps, prevState: UISectionsState): UISectionsState | null;
    /**
     * Validates state min sizes.
     *
     * @param {UISectionSize[]} sizes
     */
    private validateStateMinSizes;
    onWindowResize(): void;
    /**
     * Method returns indices of visible sections.
     *
     * @param {React.ReactNodeArray} sections Section elements.
     * @returns {number[]} Indices of visible sections.
     */
    static getVisibleSections(sections: React.ReactNodeArray): number[];
    /**
     * Method checks is passed child section visible or not.
     *
     * @param {React.ReactElement | undefined} node React child node.
     * @returns {boolean} True if section visible.
     */
    static isSectionVisible(node: React.ReactElement | undefined): boolean;
    /**
     * Method called when resizing of section started.
     */
    private onSplitterResizeStart;
    /**
     * Method called when resizing of section is happening.
     *
     * @param {number} index Index of splitter.
     * @param {number} position Delta position in pixels.
     * @returns {boolean} If resizing was happened - it can return false when splitter meets resizing limitation.
     */
    private onSplitterResize;
    /**
     * Method returns corrected position based on boundary and size.
     *
     * @param {number} position Delta position in pixels.
     * @param {number} boundary Boundary position.
     * @param {number} size Section size.
     * @param {boolean} positive Direction.
     * @returns {number} Position after correction based on boundary.
     */
    private correctBoundaryPosition;
    /**
     * Method called when resizing session ended.
     */
    private onSplitterResizeEnd;
    /**
     * Method called when splitter with type 'Toggle' was toggled.
     */
    private onSplitterToggle;
    /**
     * Method returns visible children sections count.
     *
     * @returns {number} Count of visible children sections.
     */
    private getVisibleChildrenCount;
    /**
     * Method returns size of section in percents.
     *
     * @param {number} index Target section index.
     * @param {number} childrenCount Count of children.
     * @param {boolean} [reverse] Reverse calculation(width vs right).
     * @returns {number} Size of section in percents. For example 50% => 0.5.
     */
    private getSizePercents;
    /**
     * Method gets section size when section size is not percent based and 'sizes' prop is passed from outside.
     *
     * @param {number} index Section index to look up.
     * @param {number} childrenCount Count of visible children.
     * @returns {React.CSSProperties | undefined} CSS Style object or undefined if no style from 'sizes' prop.
     */
    private getSectionSize;
    /**
     * Gets position style value.
     *
     * @param {number} childrenCount
     * @param {string} value
     * @returns {string}
     */
    private getPositionStyleValue;
    /**
     * Method returns style object for passed visible section.
     * Method calculates size of section depending on several points.
     * 1. Section - resized or not.
     * 2. Animation - off or on.
     *
     * @param {number} index Index of section.
     * @returns {SectionStyleCalculation} Object which contains visibility state and styles to apply.
     */
    private getVisibleSectionStyle;
    /**
     * Method returns style object for passed hidden section.
     * Method calculates size of section depending on several points.
     * 1. Section - resized or not.
     * 2. Animation - off or on.
     *
     * @param {number} index Index of section.
     * @returns {SectionStyleCalculation} Object which contains visibility state and styles to apply.
     */
    private getHiddenSectionStyle;
    /**
     * Method returns minimal size for passed section.
     *
     * @param {number} index Index of section.
     * @returns {number} Minimal size of section.
     */
    private getMinSectionSize;
    /**
     * Method returns class names string depending on props and component state.
     *
     * @param {boolean} fullSizeMode Is full size mode - only ine sction visible.
     * @returns {number} Minimal size of section.
     */
    getClassNames(fullSizeMode: boolean): string;
    /**
     * Method returns section's react element based on passed section index.
     *
     * @param {number} index Section index.
     * @param {boolean} isSectionHidden Is section hidden.
     * @returns {React.ReactElement | undefined} Section's react element.
     */
    getSection(index: number, isSectionHidden: boolean): React.ReactElement | undefined;
    /**
     * Method checks if animation enabled with current state.
     *
     * @returns {boolean} True if animation is enabled.
     */
    private isAnimationEnabled;
    /**
     * Method returns index of dynamicly sized section.
     *
     * @returns {number} Index of dynamicly sized section.
     */
    private getDynamicSectionIndex;
    /**
     * Method calculates spare size for passed section.
     *
     * @param {SizeCalculationInfo} origin Section size.
     * @param {SizeCalculationInfo[]} sizes All section sizes.
     * @returns {number} Spare size.
     */
    private getSpareSize;
    /**
     * Method converts SizeCalculationInfo into UISectionSize before applying sizes to state.
     *
     * @param {SizeCalculationInfo[]} sizes Section sizes.
     * @returns {UISectionSize[]} Section sizes applyable for state.
     */
    private calculateSectionSizes;
    /**
     * Method recalculates "start" and "end" position based on size property.
     *
     * @param {UISectionSize[]} sizes Section sizes.
     */
    private recalculatePositions;
    /**
     * Method returns size of sections container.
     *
     * @returns {UISectionSize[]} Size of sections container.
     */
    private getRootSize;
    /**
     * @returns {React.ReactElement}
     */
    render(): React.ReactElement;
    /**
     * Calculates the total size of sibling elements within a specified range.
     *
     * @param sizes An array of objects, each containing 'size` property.
     * @param start The starting index (inclusive) of the range.
     * @param end The ending index (exclusive) of the range.
     * @param onlyVisible Calculate only visible sections.
     * @returns The sum of the sibling sizes for the specified range.
     */
    private getSiblingsSize;
    /**
     * Refreshes the resize sections by updating their sizes from a provided range.
     *
     * @param start The starting index (inclusive) of the sections to refresh.
     * @param end The ending index (exclusive) of the sections to refresh.
     * @param sizes An array of section sizes to apply.
     */
    private refreshResizeSections;
    /**
     * Calculates the maximum allowable size for a section at the specified index.
     *
     * @param index The index of the section to calculate the maximum size for.
     * @param minSectionSize The minimum size of the section.
     * @param splitterIndex Optional index of the splitter; if specified, the section at this index is not considered resizable.
     * @returns The maximum size the section can expand to, constrained by available space and other sections.
     */
    private getMaxSectionSize;
    /**
     * Updates the size and position of section.
     *
     * @param sectionSize The section object to be updated.
     * @param index The index of the section.
     * @param newSize The new size and position values for the section.
     */
    private updateSectionSize;
    /**
     * Determines whether a specific section is visible.
     *
     * @param {number} index - The index of the child node to check.
     * @returns {boolean} - Returns `true` if the section is visible, otherwise `false`.
     */
    private isSectionVisible;
    /**
     * Calculates the position of a section, either from the start or the end.
     *
     * @param index The index of the section.
     * @param sizes An array of section size objects.
     * @param start Determines whether to calculate from the start (true) or the end (false).
     * @returns The calculated position of the section.
     */
    private getSectionPosition;
    /**
     * Returns the size of a section based on its properties(size, start, end).
     *
     * @param sizes The section size object containing size, start, and end properties.
     * @param rootSize Size of root container.
     * @returns The computed size of the section. Returns 0 if no valid size is found.
     */
    private getSize;
}
//# sourceMappingURL=UISections.d.ts.map