hooks#useEscToClose TypeScript Examples

The following examples show how to use hooks#useEscToClose. 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: index.tsx    From exevo-pan with The Unlicense 5 votes vote down vote up 
Dialog = ({
  className,
  isOpen,
  onClose,
  children,
  ...props
}: DialogProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const { elementToFocusRef, onKeyDown } = useEscToClose({
    open: isOpen,
    onClose,
  })

  useLockBody(isOpen)

  return isOpen
    ? createPortal(
        <FocusLock>
          <button
            className="z-71 animate-fadeIn bg-backdrop fixed top-0 left-0 flex h-full w-full items-center justify-center text-left"
            type="button"
            aria-hidden={!isOpen}
            onClick={onClose}
          >
            <div
              tabIndex={0}
              aria-hidden={!isOpen}
              aria-modal="true"
              role="dialog"
              ref={elementToFocusRef}
              onKeyDown={onKeyDown}
              onClick={(event) => event.stopPropagation()}
              className={clsx('card animate-rushIn', className)}
              {...props}
            >
              <button
                className="clickable float-right grid place-items-center rounded"
                type="button"
                aria-label={common.Dialog.close}
                onClick={onClose}
              >
                <CloseIcon className="fill-onSurface" />
              </button>
              {children}
            </div>
          </button>
        </FocusLock>,
        document.body,
      )
    : null
}
Example #2
Source File: index.tsx    From exevo-pan with The Unlicense 4 votes vote down vote up 
Drawer = ({
  isOpen,
  onClose,
  children,
  className,
  ...props
}: DrawerProps) => {
  const initialDrag = useRef<number | null>(null)
  const [drawerOffset, setDrawerOffset] = useState<number>(0)
  const [shouldBeRendered, setShouldBeRendered] = useState<boolean>(isOpen)

  useLockBody(isOpen)

  const { elementToFocusRef, onKeyDown } = useEscToClose({
    open: isOpen,
    onClose,
  })

  const { binders, isMousePressed, position } = useDrag()

  useEffect(() => {
    if (!initialDrag.current && isMousePressed) {
      initialDrag.current = position.x
    } else if (initialDrag.current && !isMousePressed) {
      initialDrag.current = null
      onClose()
      setTimeout(() => setDrawerOffset(0), 200)
    }
  }, [isMousePressed, onClose, position.x])

  useEffect(() => {
    if (initialDrag.current) {
      const offset = position.x - initialDrag.current
      if (offset < 0) {
        setDrawerOffset(position.x - initialDrag.current)
      } else {
        setDrawerOffset(0)
      }
    }
  }, [position.x, initialDrag])

  const isMounted = useIsMounted()

  useEffect(() => {
    if (!isOpen) {
      setTimeout(() => setShouldBeRendered(false), 200)
    } else {
      setShouldBeRendered(true)
    }
  }, [isOpen])

  return isMounted && shouldBeRendered
    ? createPortal(
        <FocusLock>
          <div
            tabIndex={0}
            aria-hidden={!isOpen}
            aria-modal="true"
            role="dialog"
            ref={elementToFocusRef}
            onKeyDown={onKeyDown}
            className={clsx(
              'animate-slideIn z-75 bg-surface fixed top-0 left-0 flex h-screen w-[90vw] max-w-[600px] flex-col shadow-lg outline-none',
              !isOpen && 'invisible opacity-0',
              className,
            )}
            style={{
              marginLeft: `${drawerOffset}px`,
              transform: `translateX(${isOpen ? '0' : '-100%'})`,
              transition: '0.2s ease-out',
              transitionProperty: 'opacity, transform, visibility',
            }}
            {...props}
          >
            {children}
          </div>

          <div
            className={clsx(
              'z-74 animate-fadeIn bg-backdrop fixed top-0 left-0 h-screen w-screen transition-all',
              !isOpen && 'pointer-events-none opacity-0',
            )}
            style={{ cursor: isMousePressed ? 'grabbing' : 'unset' }}
            aria-hidden={!isOpen}
            {...binders}
          />
        </FocusLock>,
        document.body,
      )
    : null
}