How to use @microsoft/fast-web-utilities - 10 common examples

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 / dialog / dialog.spec.tsx View on Github external
test("should call the `onDismiss` callback when escape key is pressed and `visible` prop is true", () => {
        const onDismiss: any = jest.fn();
        const map: any = {};

        // Mock window.addEventListener
        window.addEventListener = jest.fn((event: string, callback: any) => {
            map[event] = callback;
        });

        const rendered: any = mount(
            <dialog>
        );

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(0);

        // set visible prop
        rendered.setProps({ visible: true });

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(1);
    });
</dialog>
github microsoft / fast-dna / packages / fast-tooling-react / src / css-property-editor / property-editor.tsx View on Github external
private handleValueInputKeyDown = (
        rowKey: string,
        rowIndex: number,
        event: React.KeyboardEvent
    ): void =&gt; {
        const rowCount: number = Object.keys(this.editData).length;
        switch (event.keyCode) {
            case KeyCodes.enter:
                if (rowIndex &lt; rowCount - 1) {
                    // focus on the next row
                    this.focusOnRow(rowIndex + 1);
                    event.preventDefault();
                } else if (this.editData[rowKey] !== "") {
                    // create a new row if the current one is valid
                    this.createRow(rowCount);
                    event.preventDefault();
                }
                return;

            case KeyCodes.tab:
                if (
                    !event.shiftKey &amp;&amp;
                    rowIndex === rowCount - 1 &amp;&amp;
                    this.editData[rowKey] !== ""
github microsoft / fast-dna / packages / fast-layouts-react / src / pane / pane.spec.tsx View on Github external
const mockResize: any = jest.fn();

            // Due to client rect call, let's reset width to 0
            const rendered: any = mount(
                
            );
            const initialWidth: number = rendered.state().width;

            rendered
                .find(`.${managedClasses.pane_resizeHandle}`)
                .simulate("keyDown", { keyCode: KeyCodes.arrowRight });

            expect(rendered.state().width).toBe(initialWidth + 1);

            rendered.update();
        });
github microsoft / fast-dna / packages / fast-layouts-react / src / column / column.tsx View on Github external
const row: string = this.generateRow();
        const span: number = this.generateColumnSpan();
        const gridColumnValue: string = [position, `span ${span}`]
            .filter((item: string | number) => Boolean(item))
            .join(" / ");

        const order: number | null = Array.isArray(this.props.order)
            ? this.getValueByBreakpoint(this.props.order)
            : this.props.order;

        const canUseCssGridStyle: boolean =
            this.props.cssGridPropertyName === "grid"
                ? true
                : this.props.cssGridPropertyName === "-ms-grid"
                    ? false
                    : canUseCssGrid();

        const gridStyles: React.CSSProperties = canUseCssGridStyle
            ? {
                  gridColumn: gridColumnValue,
                  gridRowStart: row,
              }
            : {
                  ["msGridColumn" as any]: this.augmentMsGrid(position),
                  ["msGridColumnSpan" as any]: this.augmentMsGrid(span),
                  ["msGridRow" as any]: row,
              };

        return {
            ...gridStyles,
            order: typeof order === "number" ? order : null,
            // Fixes issue found in firefox where columns that have overflow
github microsoft / fast-dna / packages / fast-layouts-react / src / page / page.tsx View on Github external
const columns: string = `${this.props.margin} minmax(0, ${this.props.maxWidth}) ${
            this.props.margin
        }`;

        const attributes: React.HTMLAttributes = {
            ...this.unhandledProps(),
            className: super.generateClassNames(
                classNames(this.props.managedClasses.page)
            ),
        };

        return {
            ...attributes,
            style: {
                display:
                    this.props.cssGridPropertyName || canUseCssGrid()
                        ? "grid"
                        : "-ms-grid",
                gridTemplateColumns: columns,
                msGridColumns: columns,
                // attributes.style has to be spread here again in order to
                // merge the styles attribute, otherwise it is just overriden
                ...attributes.style,
            },
        };
    }
}
github microsoft / fast-dna / packages / fast-layouts-react / src / grid / grid.tsx View on Github external
private renderChildren(): React.ReactNode | React.ReactNode[] {
        // We only need to communicate gutters size to ms-grid columns because
        // css grid gives us a css property to set for gutter. If we support
        // css grid, we can safely return children w/o gutter augmentation.
        if (canUseCssGrid()) {
            return this.props.children;
        }

        return React.Children.map(
            this.props.children,
            (child: React.ReactNode | React.ReactNode[]) => {
                if (
                    !child ||
                    (child as any).type !== Column ||
                    (child as any).props.gutter
                ) {
                    return child;
                }

                return React.cloneElement(
                    child as any,
github microsoft / fast-dna / packages / fast-layouts-react / src / pane / pane.spec.tsx View on Github external
const mockResize: any = jest.fn();

            // Due to client rect call, let's reset width to 0
            const rendered: any = mount(
                
            );
            const initialWidth: number = rendered.state().width;

            rendered
                .find(`.${managedClasses.pane_resizeHandle}`)
                .simulate("keyDown", { shiftKey: true, keyCode: KeyCodes.arrowLeft });

            expect(rendered.state().width).toBe(initialWidth - 10);
        });
github microsoft / fast-dna / packages / fast-layouts-react / src / pane / pane.spec.tsx View on Github external
const mockResize: any = jest.fn();

            // Due to client rect call, let's reset width to 0
            const rendered: any = mount(
                
            );
            const initialWidth: number = rendered.state().width;

            rendered
                .find(`.${managedClasses.pane_resizeHandle}`)
                .simulate("keyDown", { keyCode: KeyCodes.arrowLeft });

            expect(rendered.state().width).toBe(initialWidth - 1);
        });
github microsoft / fast-dna / packages / fast-components-react-base / src / dialog / dialog.spec.tsx View on Github external
window.addEventListener = jest.fn((event: string, callback: any) =&gt; {
            map[event] = callback;
        });

        const rendered: any = mount(
            <dialog>
        );

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(0);

        // set visible prop
        rendered.setProps({ visible: true });

        map.keydown({ keyCode: KeyCodes.escape });

        expect(onDismiss).toHaveBeenCalledTimes(1);
    });
</dialog>
github microsoft / fast-dna / packages / fast-tooling-react / src / css-property-editor / property-editor.tsx View on Github external
): void =&gt; {
        const rowCount: number = Object.keys(this.editData).length;
        switch (event.keyCode) {
            case KeyCodes.enter:
                if (rowIndex &lt; rowCount - 1) {
                    // focus on the next row
                    this.focusOnRow(rowIndex + 1);
                    event.preventDefault();
                } else if (this.editData[rowKey] !== "") {
                    // create a new row if the current one is valid
                    this.createRow(rowCount);
                    event.preventDefault();
                }
                return;

            case KeyCodes.tab:
                if (
                    !event.shiftKey &amp;&amp;
                    rowIndex === rowCount - 1 &amp;&amp;
                    this.editData[rowKey] !== ""
                ) {
                    // create a new row if the current one is valid
                    this.createRow(rowCount);
                    event.preventDefault();
                }
                return;
        }
    };