utils#checkKeyboardTrigger TypeScript Examples

ChipComponent = ({
  className,
  children,
  onClick,
  onClose,
  overrideStatus,
  ...props
}: ChipProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const [active, setActive] = useState<boolean>(false)
  const derivedActive = overrideStatus ?? active

  const handleClick = (event?: React.MouseEvent) => {
    if (onClick) {
      setActive((prev) => !prev)
      onClick(event)
    }
  }

  const handleKeypress = (event: React.KeyboardEvent) => {
    if (!!onClick && checkKeyboardTrigger(event.code)) {
      event.preventDefault()
      handleClick()
    }
  }

  const isClickable = !!onClick

  return (
    <div
      role={isClickable ? 'switch' : undefined}
      aria-checked={isClickable ? derivedActive : undefined}
      tabIndex={isClickable ? 1 : undefined}
      onClick={handleClick}
      onKeyPress={handleKeypress}
      className={clsx(
        'text-tsm flex items-center rounded-xl border-none py-1.5 px-3 font-normal transition-all',
        derivedActive
          ? 'bg-primary text-onPrimary'
          : 'bg-primaryVariant text-onSurface',
        isClickable && 'clickable',
        className,
      )}
      {...props}
    >
      {children}
      {!!onClose && (
        <button
          className="clickable bg-primary relative ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full border-none opacity-75 transition-opacity"
          type="button"
          aria-label={common.RemoveItem}
          onClick={onClose}
        >
          <CrossIcon className="fill-onPrimary h-3 w-3 transition-colors" />
        </button>
      )}
    </div>
  )
}

RadioButton = ({
  className,
  children,
  active: propActive,
  onClick,
  ...props
}: RadioButtonProps) => {
  const [active, setActive] = useState<boolean>(propActive ?? false)
  const derivedActive = propActive ?? active

  const handleClick = (event?: React.MouseEvent) => {
    setActive(true)
    onClick?.(event)
  }

  const handleKeyPress = (event: React.KeyboardEvent) => {
    if (checkKeyboardTrigger(event.code)) {
      event.preventDefault()
      handleClick()
    }
  }

  return (
    <div
      onClick={handleClick}
      onKeyPress={handleKeyPress}
      role="radio"
      aria-checked={derivedActive}
      tabIndex={0}
      className={clsx(
        'text-s text-onSurface group flex cursor-pointer items-center gap-1.5',
        className,
      )}
      {...props}
    >
      <div className="border-separator relative grid h-4 w-4 shrink-0 place-items-center rounded-full border-2 border-solid transition-shadow group-active:shadow-inner">
        <div
          className={clsx(
            'bg-primary h-2 w-2 rounded-full transition-opacity',
            !derivedActive && 'opacity-0',
          )}
        />
      </div>
      {children}
    </div>
  )
}

Popover = ({
  className,
  children,
  content,
  placement = 'top',
  trigger = 'hover',
  visible,
  offset = [0, 0],
  ...props
}: PopoverProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const [isVisible, setVisible] = useState<boolean>(visible ?? false)
  const derivedVisibility =
    trigger === 'none' ? visible ?? isVisible : isVisible

  const [referenceElement, setReferenceElement] =
    useState<PopperReferenceElement>(null)

  const [popperElement, setPopperElement] =
    useState<PopperReferenceElement>(null)

  const modifiers: Partial<Modifier<string, Record<string, unknown>>>[] =
    useMemo(
      () => [
        {
          name: 'flip',
          enabled: true,
          options: {
            allowedAutoPlacements: ['top', 'bottom'],
          },
        },
        {
          name: 'offset',
          options: {
            offset,
          },
        },
      ],
      [offset],
    )

  const { styles, attributes } = usePopper(referenceElement, popperElement, {
    placement,
    modifiers,
  })

  const triggers = useMemo(() => {
    switch (trigger) {
      case 'click':
        return {
          tabIndex: 0,
          onClick: () => setVisible((prev) => !prev),
          onKeyPress: (event: React.KeyboardEvent) => {
            if (checkKeyboardTrigger(event.code)) {
              event.preventDefault()
              setVisible((prev) => !prev)
            }
          },
        }
      case 'hover':
        return {
          tabIndex: 0,
          onMouseEnter: () => setVisible(true),
          onMouseLeave: () => setVisible(false),
          onFocus: () => setVisible(true),
          onBlur: () => setVisible(false),
        }
      case 'none':
      default:
        return {}
    }
  }, [trigger])

  const increaseHoverArea = trigger === 'hover' && derivedVisibility

  return (
    <>
      <div
        ref={setReferenceElement}
        className="child:z-1 child:relative relative inline-block cursor-pointer"
        {...triggers}
      >
        {increaseHoverArea && (
          <div
            role="none"
            className="top-1/2 left-1/2"
            style={{
              position: 'absolute',
              transform: 'translate(-50%, -50%)',
              width: `calc(100% + ${offset[0] + 8}px)`,
              height: `calc(100% + ${offset[1] + 8}px)`,
            }}
          />
        )}

        {children}
      </div>

      {derivedVisibility && (
        <div
          ref={setPopperElement}
          style={styles.popper}
          {...attributes.popper}
          className={clsx(
            'z-51 animate-fadeIn',
            className,
            attributes.popper?.className,
          )}
          {...props}
          {...(trigger === 'hover' ? { ...triggers, tabIndex: undefined } : {})}
        >
          {Children.map(content, (contentChild) => {
            if (!isValidElement(contentChild)) return contentChild
            if (typeof contentChild.type === 'string') return contentChild

            return cloneElement(contentChild, {
              'aria-hidden': false,
              disabled: false,
              hidden: false,
            })
          })}
        </div>
      )}

      {trigger === 'click' && derivedVisibility && (
        <button
          type="button"
          className="bg-backdrop animate-fadeIn fixed top-0 left-0 z-50 h-screen w-screen"
          aria-label={common.PopoverCloseLabel}
          onClick={() => setVisible(false)}
        />
      )}
    </>
  )
}

CharacterCard = ({
  characterData,
  highlighted = false,
  lazyRender = false,
  expandable = false,
  past = false,
  ...props
}: CharacterCardProps) => {
  const {
    translations: { common },
  } = useTranslations()

  const {
    id,
    nickname,
    outfitId,
    level,
    vocationId,
    serverData,
    transfer,
    auctionEnd,
    hasBeenBidded,
    currentBid,
    items,
    skills,
    imbuements,
    charms,
    quests,
    charmInfo,
    preySlot,
  } = characterData

  const tcInvested = useMemo(
    () => formatNumberWithCommas(calculateTotalInvestment(characterData)),
    [characterData],
  )

  const ref = useRef<HTMLDivElement>()

  const [isExpanded, setExpanded] = useState(false)

  const expandCard = useCallback(() => setExpanded(true), [])
  const handleKeyPress = useCallback(
    (event: React.KeyboardEvent) => {
      if (checkKeyboardTrigger(event.code)) expandCard()
    },
    [expandCard],
  )

  return (
    <>
      <S.Wrapper
        ref={ref as React.RefObject<HTMLDivElement>}
        highlighted={highlighted}
        role={expandable ? 'button' : undefined}
        tabIndex={expandable ? 1 : undefined}
        aria-label={expandable ? common.CharacterCard.expand : undefined}
        onClick={expandable ? expandCard : undefined}
        onKeyPress={expandable ? handleKeyPress : undefined}
        {...props}
      >
        <Head
          id={id}
          outfitId={outfitId}
          nickname={nickname}
          level={level}
          vocationId={vocationId}
          serverName={serverData.serverName}
          highlighted={highlighted}
        >
          {highlighted && <TagButton />}
        </Head>

        <S.Body lazy={lazyRender}>
          <S.InfoGrid>
            <Textbox.Server
              serverData={serverData}
              nickname={nickname}
              transfer={transfer}
            />
            <Textbox.Pvp serverData={serverData} />
            <Textbox.AuctionEnd auctionEnd={auctionEnd} past={past} />
            <Textbox.AuctionBid
              hasBeenBidded={hasBeenBidded}
              currentBid={currentBid}
              past={past}
            />
          </S.InfoGrid>

          <CharacterItems items={items} />

          <CharacterSkills skills={skills} />

          <S.FlexFooter>
            <S.FlexColumn>
              <ImbuementsTooltip items={imbuements} />
              <CharmsTooltip items={charms} />
              <QuestsTooltip items={quests} />
            </S.FlexColumn>

            <S.FlexColumn storeColumn>
              <S.Checkbox
                label="Charm Expansion"
                checked={charmInfo.expansion}
              />

              <S.Checkbox label="Prey Slot" checked={preySlot} />

              {tcInvested !== '0' && (
                <div
                  className="flex items-center justify-between gap-1.5"
                  title={`${common.CharacterCard.tcInvested.prefix} ${tcInvested} ${common.CharacterCard.tcInvested.suffix}`}
                >
                  <S.CheckboxContainer>
                    <S.Icons.TibiaCoin />
                  </S.CheckboxContainer>
                  <S.Strong>
                    {tcInvested} {common.CharacterCard.tcInvested.invested}
                  </S.Strong>
                </div>
              )}
            </S.FlexColumn>
          </S.FlexFooter>
        </S.Body>

        <SpecialTags character={characterData} />
      </S.Wrapper>
      {isExpanded && (
        <CharacterModal
          characterData={characterData}
          onClose={() => setExpanded(false)}
          past={past}
        />
      )}
    </>
  )
}