How to use the @microsoft/fast-web-utilities.KeyCodes.enter 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-tooling-react / src / css-property-editor / property-editor.tsx View on Github external
private handleValueInputKeyDown = (
        rowKey: string,
        rowIndex: number,
        event: React.KeyboardEvent
    ): void => {
        const rowCount: number = Object.keys(this.editData).length;
        switch (event.keyCode) {
            case KeyCodes.enter:
                if (rowIndex < 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 &&
                    rowIndex === rowCount - 1 &&
                    this.editData[rowKey] !== ""
github microsoft / fast-dna / packages / fast-tooling-react / src / navigation / navigation.spec.tsx View on Github external
const props: any = {
            ...navigationProps,
            data: standardData,
            managedClasses,
        };
        const rendered: any = mount();
        const triggerItem: any = rendered.find(treeItemListItemSelector);

        expect(
            triggerItem
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(false);

        triggerItem.at(0).simulate("keydown", { keyCode: KeyCodes.enter });

        expect(
            rendered
                .find(treeItemListItemSelector)
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(true);
    });
    test("should collapse an expanded list if the enter key has been pressed on the list trigger", () => {
github microsoft / fast-dna / packages / fast-components-react-base / src / listbox-item / listbox-item.spec.tsx View on Github external
test("should not call a registered callback after enter/space key is pressed because it is disabled", (): void => {
        const onInvoke: any = jest.fn();
        const onKeyDown: any = jest.fn();
        const rendered: any = shallow(
            
        );

        rendered.simulate("keydown", { keyCode: KeyCodes.enter, preventDefault: noop });
        rendered.simulate("keydown", { keyCode: KeyCodes.space, preventDefault: noop });

        expect(onInvoke).toHaveBeenCalledTimes(0);
        expect(onKeyDown).toHaveBeenCalledTimes(0);
    });
github microsoft / fast-dna / packages / fast-tooling-react / src / navigation / navigation.spec.tsx View on Github external
managedClasses,
        };
        const rendered: any = mount();
        const triggerItem: any = rendered.find(treeItemListItemSelector);

        triggerItem.at(0).simulate("keydown", { keyCode: KeyCodes.enter });

        expect(
            rendered
                .find(treeItemListItemSelector)
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(true);

        triggerItem.at(0).simulate("keydown", { keyCode: KeyCodes.enter });

        expect(
            rendered
                .find(treeItemListItemSelector)
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(false);
    });
    test("should expand a collapsed list if the space key has been pressed on the list trigger", () => {
github microsoft / fast-dna / packages / fast-navigation-generator-react / src / navigation / navigation.spec.tsx View on Github external
managedClasses,
        };
        const rendered: any = mount();
        const triggerItem: any = rendered.find(treeItemExpandListTriggerSelector);

        triggerItem.at(0).simulate("keyup", { keyCode: KeyCodes.enter });

        expect(
            rendered
                .find(treeItemExpandListTriggerSelector)
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(true);

        triggerItem.at(0).simulate("keyup", { keyCode: KeyCodes.enter });

        expect(
            rendered
                .find(treeItemExpandListTriggerSelector)
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(false);
    });
    test("should expand a collapsed list if the space key has been pressed on the list trigger", () => {
github microsoft / fast-dna / packages / fast-navigation-generator-react / src / navigation / navigation.spec.tsx View on Github external
const props: any = {
            ...navigationProps,
            data: standardData,
            managedClasses,
        };
        const rendered: any = mount();
        const triggerItem: any = rendered.find(treeItemExpandListTriggerSelector);

        expect(
            triggerItem
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(false);

        triggerItem.at(0).simulate("keyup", { keyCode: KeyCodes.enter });

        expect(
            rendered
                .find(treeItemExpandListTriggerSelector)
                .at(0)
                .parent()
                .props()["aria-expanded"]
        ).toEqual(true);
    });
    test("should collapse an expanded list if the enter key has been pressed on the list trigger", () => {
github microsoft / fast-dna / packages / fast-components-react-base / src / listbox-item / listbox-item.spec.tsx View on Github external
test("should call a registered callback after enter/space key is pressed", (): void => {
        const onInvoke: any = jest.fn();
        const onKeyDown: any = jest.fn();
        const rendered: any = shallow(
            
        );

        rendered.simulate("keydown", { keyCode: KeyCodes.enter, preventDefault: noop });
        rendered.simulate("keydown", { keyCode: KeyCodes.space, preventDefault: noop });

        expect(onInvoke).toHaveBeenCalledTimes(2);
        expect(onKeyDown).toHaveBeenCalledTimes(2);
    });
github microsoft / fast-dna / packages / fast-tooling-react / src / css-property-editor / property-editor-row.tsx View on Github external
private handleKeyInputKeyDown = (e: React.KeyboardEvent): void => {
        if (e.keyCode === KeyCodes.enter) {
            e.preventDefault();

            this.props.onCommitPropertyNameEdit(
                this.props.cssPropertyName,
                this.props.rowIndex
            );

            if (!isNil(this.valueInputRef.current)) {
                this.valueInputRef.current.focus();
            }
        }
    };
github microsoft / fast-dna / packages / fast-tooling-react / src / css-property-editor / property-editor.spec.tsx View on Github external
const data: { [key: string]: string } = {
            padding: "10px",
            margin: "30px",
        };
        const callback: any = jest.fn();
        const newKey: string = "padding-top";

        const rendered: any = mount(
            
        );

        const inputs: any = rendered.find("input");
        expect(inputs).toHaveLength(4);
        inputs.at(0).simulate("focus");
        inputs.at(0).simulate("change", { target: { value: newKey } });
        inputs.at(0).simulate("keydown", { keyCode: KeyCodes.enter });

        const updatedDataKeys: string[] = Object.keys(callback.mock.calls[0][0]);
        expect(updatedDataKeys[0]).toEqual("paddingTop");
    });
});
github microsoft / fast-dna / packages / fast-form-generator-react / src / form / form-item.children.tsx View on Github external
private handleChildrenListInputKeydown = (
        e: React.KeyboardEvent
    ): void => {
        switch (e.keyCode) {
            case KeyCodes.enter:
                e.preventDefault();
            case KeyCodes.tab:
                if (this.state.childrenSearchTerm !== "") {
                    this.onAddComponent(
                        this.state.filteredChildOptions[
                            this.state.indexOfSelectedFilteredChildOption
                        ]
                    );
                }

                this.setState({
                    hideChildrenList: true,
                });
                break;
            case KeyCodes.arrowUp:
                this.selectPreviousFilteredChildOption();