How to use the @microsoft/fast-web-utilities.getClientRectWithMargin function in @microsoft/fast-web-utilities

To help you get started, we’ve selected a few @microsoft/fast-web-utilities examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github microsoft / fast-dna / packages / fast-components-react-base / src / horizontal-overflow / horizontal-overflow.tsx View on Github external
private getItemMaxHeight(): number {
        let itemMaxHeight: number = 0;
        const children: HTMLElement = get(
            this.horizontalOverflowItemsRef,
            "current.childNodes"
        );

        if (!canUseDOM() || !children) {
            return itemMaxHeight;
        }

        const childNodes: HTMLElement[] = Array.prototype.slice.call(children);

        for (const childNode of childNodes) {
            const childNodeHeight: number = getClientRectWithMargin(childNode).height;

            if (childNodeHeight > itemMaxHeight) {
                itemMaxHeight = childNodeHeight;
            }
        }

        return itemMaxHeight;
    }
github microsoft / fast-dna / packages / fast-components-react-base / src / horizontal-overflow / horizontal-overflow.tsx View on Github external
private getAvailableWidth(): number {
        return getClientRectWithMargin(this.horizontalOverflowItemsRef.current).width;
    }
github microsoft / fast-dna / packages / fast-components-react-base / src / horizontal-overflow / horizontal-overflow.tsx View on Github external
private getItemWidths(): number[] {
        const items: HTMLElement[] = Array.prototype.slice.call(
            this.horizontalOverflowItemsRef.current.childNodes
        );
        const itemWidths: number[] = [];

        for (const item of items) {
            itemWidths.push(getClientRectWithMargin(item).width);
        }

        return itemWidths;
    }