How to use the @zendeskgarden/container-utilities.KEY_CODES.LEFT function in @zendeskgarden/container-utilities

To help you get started, we’ve selected a few @zendeskgarden/container-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 zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('decrements minValue on LEFT key', () => {
        const { getAllByTestId } = render(
          
        );

        fireEvent.keyDown(getAllByTestId('thumb')[0], { keyCode: KEY_CODES.LEFT });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 10, maxValue: 75 });
      });
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.spec.js View on Github external
it('increments maxValue on LEFT key', () => {
        const { getAllByTestId } = renderRtl(
          
        );
        const maxThumb = getAllByTestId('thumb')[1];

        fireEvent.keyDown(maxThumb, { keyCode: KEY_CODES.LEFT });
        expect(onChangeSpy).toHaveBeenCalledWith({ minValue: 15, maxValue: 80 });
      });
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('decrements focusedIndex if currently greater than 0', () => {
              const { getAllByTestId } = render();
              const [item, secondItem] = getAllByTestId('item');

              fireEvent.focus(secondItem);
              fireEvent.keyDown(secondItem, { keyCode: KEY_CODES.LEFT });

              expect(item).toHaveAttribute('data-focused', 'true');
            });
github zendeskgarden / react-containers / packages / selection / src / SelectionContainer.spec.tsx View on Github external
it('decrements and wraps focusedIndex if currently less than or equal to 0', () => {
              const { getAllByTestId } = render();
              const [item, , lastItem] = getAllByTestId('item');

              fireEvent.focus(item);
              fireEvent.keyDown(item, { keyCode: KEY_CODES.LEFT });
              expect(lastItem).toHaveAttribute('data-focused', 'true');
            });
          });
github zendeskgarden / react-containers / packages / selection / src / useSelection.ts View on Github external
onKeyDown: composeEventHandlers(onKeyDown, (e: React.KeyboardEvent) => {
        if (
          (e.keyCode === KEY_CODES.UP && verticalDirection) ||
          (e.keyCode === KEY_CODES.LEFT && horizontalDirection)
        ) {
          if (rtl && !verticalDirection) {
            dispatch({ type: 'INCREMENT', items, focusedItem, selectedItem, onFocus });
          } else {
            dispatch({ type: 'DECREMENT', items, focusedItem, selectedItem, onFocus });
          }

          e.preventDefault();
        } else if (
          (e.keyCode === KEY_CODES.DOWN && verticalDirection) ||
          (e.keyCode === KEY_CODES.RIGHT && horizontalDirection)
        ) {
          if (rtl && !verticalDirection) {
            dispatch({ type: 'DECREMENT', items, focusedItem, selectedItem, onFocus });
          } else {
            dispatch({ type: 'INCREMENT', items, focusedItem, selectedItem, onFocus });
github zendeskgarden / react-components / packages / dropdowns / src / Multiselect / Multiselect.tsx View on Github external
if (e.keyCode === KEY_CODES.END && !inputValue) {
                inputRef.current && inputRef.current.focus();
                e.preventDefault();
              }

              if (isRtl(props)) {
                if (e.keyCode === KEY_CODES.RIGHT && index === 0) {
                  e.preventDefault();
                }

                if (e.keyCode === KEY_CODES.LEFT && index === selectedItems.length - 1) {
                  e.preventDefault();
                  inputRef.current && inputRef.current.focus();
                }
              } else {
                if (e.keyCode === KEY_CODES.LEFT && index === 0) {
                  e.preventDefault();
                }

                if (e.keyCode === KEY_CODES.RIGHT && index === selectedItems.length - 1) {
                  e.preventDefault();
                  inputRef.current && inputRef.current.focus();
                }
              }
            },
            onClick: (e: MouseEvent) => {
github zendeskgarden / react-components / packages / forms / src / fields / MultiThumbRange.js View on Github external
updateMinThumbSlider(minValue - step);
      } else {
        updateMaxThumbSlider(maxValue - step);
      }
    };

    const incrementThumb = () => {
      if (isMinThumb) {
        updateMinThumbSlider(minValue + step);
      } else {
        updateMaxThumbSlider(maxValue + step);
      }
    };

    switch (e.keyCode) {
      case KEY_CODES.LEFT:
        if (rtl) {
          incrementThumb();
        } else {
          decrementThumb();
        }

        keyIntercepted = true;
        break;

      case KEY_CODES.DOWN:
        decrementThumb();
        keyIntercepted = true;
        break;

      case KEY_CODES.RIGHT:
        if (rtl) {
github zendeskgarden / react-components / packages / dropdowns / src / Multiselect / Multiselect.tsx View on Github external
onKeyDown: (e: KeyboardEvent) => {
                  if (!inputValue) {
                    if (isRtl(props) && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0) {
                      setFocusedItem(selectedItems[selectedItems.length - 1]);
                    } else if (
                      !isRtl(props) &&
                      e.keyCode === KEY_CODES.LEFT &&
                      selectedItems.length > 0
                    ) {
                      setFocusedItem(selectedItems[selectedItems.length - 1]);
                    } else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
                      (setDownshiftState as any)({
                        type: REMOVE_ITEM_STATE_TYPE,
                        selectedItem: selectedItems[selectedItems.length - 1]
                      });
                      (e as any).nativeEvent.preventDownshiftDefault = true;
                      e.preventDefault();
                      e.stopPropagation();
                    }
                  }
                },
                isVisible: isFocused || inputValue || selectedItems.length === 0,