components#useKeyboard TypeScript Examples

The following examples show how to use components#useKeyboard. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: keyboard.test.tsx    From geist-ui with MIT License 4 votes vote down vote up 
describe('UseKeyboard', () => {
  it('should work correctly', () => {
    let code = null
    const handler = jest.fn().mockImplementation(e => {
      code = e.keyCode
    })
    renderHook(() => useKeyboard(handler, KeyCode.KEY_H))
    document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_H }))
    expect(handler).toBeCalledTimes(1)
    expect(code).toEqual(KeyCode.KEY_H)
  })

  it('should not trigger handler', () => {
    const handler = jest.fn().mockImplementation(() => {})
    renderHook(() => useKeyboard(handler, [KeyCode.KEY_0]))
    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_1 })
    document.dispatchEvent(event)
    expect(handler).not.toBeCalled()
  })

  it('should trigger with command key', () => {
    const handler = jest.fn().mockImplementation(() => {})
    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Shift]))
    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A })
    document.dispatchEvent(event)
    expect(handler).not.toBeCalled()
    const event2 = new KeyboardEvent('keydown', {
      keyCode: KeyCode.KEY_A,
      shiftKey: true,
    })
    document.dispatchEvent(event2)
    expect(handler).toBeCalledTimes(1)
  })

  it('should ignore command when code does not exist', () => {
    const handler = jest.fn().mockImplementation(() => {})
    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A, 12345]))
    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A })
    document.dispatchEvent(event)
    expect(handler).toBeCalled()
  })

  it('should work with each command', () => {
    const handler = jest.fn().mockImplementation(() => {})
    renderHook(() =>
      useKeyboard(handler, [KeyCode.KEY_A, KeyMod.Alt, KeyMod.CtrlCmd, KeyMod.WinCtrl]),
    )
    document.dispatchEvent(
      new KeyboardEvent('keydown', {
        keyCode: KeyCode.KEY_A,
      }),
    )
    expect(handler).not.toBeCalled()
    document.dispatchEvent(
      new KeyboardEvent('keydown', {
        keyCode: KeyCode.KEY_A,
        altKey: true,
      }),
    )
    expect(handler).not.toBeCalled()
    document.dispatchEvent(
      new KeyboardEvent('keydown', {
        keyCode: KeyCode.KEY_A,
        altKey: true,
        ctrlKey: true,
      }),
    )
    expect(handler).not.toBeCalled()
    document.dispatchEvent(
      new KeyboardEvent('keydown', {
        keyCode: KeyCode.KEY_A,
        altKey: true,
        ctrlKey: true,
        metaKey: true,
      }),
    )
    expect(handler).toBeCalledTimes(1)
  })

  it('should ignore global events', () => {
    const handler = jest.fn().mockImplementation(() => {})
    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A], { disableGlobalEvent: true }))
    const event = new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A })
    document.dispatchEvent(event)
    expect(handler).not.toBeCalled()
  })

  it('should respond to different event types', () => {
    const handler = jest.fn().mockImplementation(() => {})
    renderHook(() => useKeyboard(handler, [KeyCode.KEY_A], { event: 'keyup' }))
    document.dispatchEvent(new KeyboardEvent('keydown', { keyCode: KeyCode.KEY_A }))
    expect(handler).not.toBeCalled()

    document.dispatchEvent(new KeyboardEvent('keypress', { keyCode: KeyCode.KEY_A }))
    expect(handler).not.toBeCalled()

    document.dispatchEvent(new KeyboardEvent('keyup', { keyCode: KeyCode.KEY_A }))
    expect(handler).toBeCalled()
  })

  it('should pass the keyboard events', () => {
    const handler = jest.fn().mockImplementation(() => {})
    const nativeHandler = jest.fn().mockImplementation(() => {})
    const { result } = renderHook<void, KeyboardResult>(() =>
      useKeyboard(handler, KeyCode.Escape),
    )
    const wrapper = mount(
      <div onKeyDown={nativeHandler}>
        <span id="inner" {...result.current.bindings} />
      </div>,
    )
    const inner = wrapper.find('#inner').at(0)
    act(() => {
      inner.simulate('keyup', {
        keyCode: KeyCode.Escape,
      })
    })
    expect(handler).not.toBeCalled()
    expect(nativeHandler).not.toBeCalled()
    act(() => {
      inner.simulate('keydown', {
        keyCode: KeyCode.Escape,
      })
    })
    expect(handler).toBeCalled()
    expect(nativeHandler).toBeCalled()
  })

  it('should prevent default events', () => {
    const handler = jest.fn().mockImplementation(() => {})
    const nativeHandler = jest.fn().mockImplementation(() => {})
    const { result } = renderHook<void, KeyboardResult>(() =>
      useKeyboard(handler, KeyCode.Escape, {
        disableGlobalEvent: true,
        stopPropagation: true,
      }),
    )
    const wrapper = mount(
      <div onKeyDown={nativeHandler}>
        <span id="inner" {...result.current.bindings} />
      </div>,
    )
    const inner = wrapper.find('#inner').at(0)
    act(() => {
      inner.simulate('keydown', {
        keyCode: KeyCode.Escape,
      })
    })
    expect(handler).toBeCalled()
    expect(nativeHandler).not.toBeCalled()
  })

  it('should trigger capture event', () => {
    const handler = jest.fn().mockImplementation(() => {})
    const { result } = renderHook<void, KeyboardResult>(() =>
      useKeyboard(handler, KeyCode.Escape, { capture: true, disableGlobalEvent: true }),
    )
    const wrapper = mount(
      <div onKeyDownCapture={result.current.bindings.onKeyDownCapture}>
        <span id="inner" />
      </div>,
    )
    const inner = wrapper.find('#inner').at(0)
    act(() => {
      inner.simulate('keydown', {
        keyCode: KeyCode.Escape,
      })
    })
    expect(handler).toBeCalled()
  })
})
Example #2
Source File: search.tsx    From geist-ui with MIT License 4 votes vote down vote up 
Search: React.FC<unknown> = () => {
  const theme = useTheme()
  const router = useRouter()
  const { locale } = useLocale()
  const [preventHover, setPreventHover, preventHoverRef] = useCurrentState<boolean>(false)
  const ref = useRef<HTMLInputElement | null>(null)
  const itemsRef = useRef<SearchItemsRef | null>(null)
  const [state, setState] = useState<SearchResults>([])
  const { bindings, setVisible, visible } = useModal(false)
  const { bindings: inputBindings, setState: setInput, state: input } = useInput('')

  const cleanAfterModalClose = () => {
    setVisible(false)
    const timer = window.setTimeout(() => {
      setState([])
      setInput('')
      itemsRef.current?.scrollTo(0, 0)
      setPreventHover(true)
      window.clearTimeout(timer)
    }, 400)
  }

  useKeyboard(() => {
    setVisible(true)
    const timer = setTimeout(() => {
      ref.current?.focus()
      window.clearTimeout(timer)
    }, 0)
  }, [KeyMod.CtrlCmd, KeyCode.KEY_K])

  useEffect(() => {
    if (!input) return setState([])
    setPreventHover(true)
    setState(search(input, locale))
    itemsRef.current?.scrollTo(0, 0)
  }, [input])

  useEffect(() => {
    if (visible) return
    cleanAfterModalClose()
  }, [visible])

  useEffect(() => {
    const eventHandler = () => {
      if (!preventHoverRef.current) return
      setPreventHover(false)
    }
    document.addEventListener('mousemove', eventHandler)
    return () => {
      document.removeEventListener('mousemove', eventHandler)
    }
  }, [])

  const selectHandler = (url: string) => {
    if (url.startsWith('http')) return window.open(url)
    router.push(url)
    setVisible(false)
  }

  const { bindings: KeyBindings } = useKeyboard(
    event => {
      const isBack = event.keyCode === KeyCode.UpArrow
      focusNextElement(
        itemsRef.current,
        () => {
          setPreventHover(true)
        },
        isBack,
      )
    },
    [KeyCode.DownArrow, KeyCode.UpArrow],
    {
      disableGlobalEvent: true,
    },
  )

  return (
    <div className="container" {...KeyBindings}>
      <Modal
        {...bindings}
        py={0}
        px={0.75}
        wrapClassName="search-menu"
        positionClassName="search-position">
        <Input
          ref={ref}
          w="100%"
          font="1.125rem"
          py={0.75}
          placeholder="Search a component"
          className="search-input"
          clearable
          {...inputBindings}
        />
        {state.length > 0 && (
          <>
            <Divider mt={0} mb={1} />
            <SearchItems
              preventHoverHighlightSync={preventHover}
              ref={itemsRef}
              data={state}
              onSelect={selectHandler}
            />
          </>
        )}
      </Modal>
      <style jsx>{`
        .title {
          width: 100%;
          color: ${theme.palette.background};
          background-color: ${theme.palette.violet};
          display: flex;
          justify-content: flex-end;
          padding: 0 10px;
          user-select: none;
        }
        .container {
          visibility: hidden;
        }
        :global(.search-menu ul),
        :global(.search-menu li) {
          padding: 0;
          margin: 0;
          list-style: none;
        }
        :global(.search-menu .input-container.search-input) {
          border: none;
          border-radius: 0;
        }
        :global(.search-menu .input-container div.input-wrapper) {
          border: none;
          border-radius: 0;
        }
        :global(.search-menu .input-container .input-wrapper.hover) {
          border: none;
        }
        :global(.search-menu .input-container .input-wrapper:active) {
          border: none;
        }
        :global(div.search-position.position) {
          position: absolute;
          top: 100px;
          left: 50%;
          transform: translateX(-50%);
          transition: all 500ms ease;
          width: 500px;
          height: auto;
        }
        :global(.search-menu.wrapper) {
          box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.15), 0 -5px 20px 0 rgba(0, 0, 0, 0.15) !important;
        }
      `}</style>
    </div>
  )
}