azure-devops-ui/Components/ResizeGroup/ResizeGroup.js

React components for building web UI in Azure DevOps

import "../../CommonImports";
import "../../Core/core.css";
import * as React from "react";
import { ObservableArray, ObservableValue } from '../../Core/Observable';
import { ResponsiveLayout } from '../../ResponsiveLayout';
export const ResizeGroupContext = React.createContext({});
export class ResizeGroup extends React.Component {
    constructor(props) {
        super(props);
        this.onLayoutChange = (hiddenCount) => {
            this.state.hiddenCount.value = hiddenCount;
            if (this.props.responsiveLayoutProps.onLayoutChange) {
                this.props.responsiveLayoutProps.onLayoutChange(hiddenCount);
            }
            ResizeGroup.updateOverflowItems(this.props, this.state);
        };
        const extraItems = this.props.extraItems || [];
        this.state = {
            hiddenCount: new ObservableValue(0),
            overflowItems: new ObservableArray([...extraItems]),
            editedItems: []
        };
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        ResizeGroup.updateOverflowItems(nextProps, prevState);
        return prevState;
    }
    render() {
        return (React.createElement(ResizeGroupContext.Provider, { value: { overflowItems: this.state.overflowItems } },
            React.createElement(ResponsiveLayout, Object.assign({}, this.props.responsiveLayoutProps, { onLayoutChange: this.onLayoutChange }), this.props.children)));
    }
    static updateOverflowItems(props, state) {
        const extraItems = props.extraItems || [];
        state.overflowItems.value = [...extraItems, ...props.overflowMenuItems.slice(0, state.hiddenCount.value)];
        if (props.useAriaLabelForOverflow) {
            // clear out previously edited menu items text values
            state.editedItems.forEach(item => (item.text = ""));
            state.editedItems = [];
            state.overflowItems.value.forEach(item => {
                if (!item.text && item.ariaLabel) {
                    item.text = item.ariaLabel;
                    state.editedItems.push(item);
                }
            });
        }
    }
}