shared/chat/conversation/messages/react-button.tsx - master - githubmirror/client

shared/chat/conversation/messages/react-button.tsx
214 строк6 KB
chrisnojima
refactor(styles): theme via hooks, no android remount (#29515)
08 авг 2026, 02:24
08 авг 2026, 02:24a41d38e
import * as C from '@/constants'
import {useOrdinal} from './ids-context'
import * as Kb from '@/common-adapters'
import type {StyleOverride} from '@/common-adapters/markdown'
import {colors, darkColors} from '@/styles/colors'
import {useColorScheme} from 'react-native'
import {useCurrentUserState} from '@/stores/current-user'
import * as T from '@/constants/types'
import {useConversationThreadID, useConversationThreadMessage} from '../thread-context'

export type OwnProps = {
  className?: string
  emoji: string
  onLongPress?: () => void
  reaction: T.Chat.ReactionDesc
  style?: Kb.Styles.StylesCrossPlatform
  toggleReaction?: (emoji: string) => void
}

function ReactionButton({
  active,
  className,
  count,
  isDarkMode,
  onClick,
  onLongPress,
  style,
  text,
}: {
  active: boolean
  className?: string
  count: number
  isDarkMode: boolean
  onClick: () => void
  onLongPress?: () => void
  style?: Kb.Styles.StylesCrossPlatform
  text: string
}) {
  const styles = useStyles()
  return (
    <Kb.ClickableBox
      direction="horizontal"
      centerChildren={true}
      fullHeight={true}
      gap="xtiny"
      className={Kb.Styles.classNames('react-button', className, {noShadow: active})}
      onLongPress={onLongPress}
      onClick={onClick}
      style={Kb.Styles.collapseStyles([
        styles.borderBase,
        {borderColor: isDarkMode ? darkColors.black_10 : colors.black_10},
        styles.buttonBox,
        active && styles.active,
        style,
      ])}
    >
      <Kb.Box2 centerChildren={true} fullHeight={true} direction="horizontal">
        <Kb.Markdown
          serviceOnlyNoWrap={false /* MUST be false to support non-emojis in reactions for bots */}
          styleOverride={markdownOverride}
          lineClamp={1}
          smallStandaloneEmoji={true}
          disallowAnimation={false}
          virtualText={true}
        >
          {text}
        </Kb.Markdown>
      </Kb.Box2>
      <Kb.Text
        type="BodyTinyBold"
        virtualText={true}
        style={Kb.Styles.collapseStyles([styles.count, active && styles.countActive])}
      >
        {count}
      </Kb.Text>
    </Kb.ClickableBox>
  )
}

function ReactButtonContainer(p: OwnProps) {
  const {emoji, reaction, className, onLongPress, style, toggleReaction} = p
  const me = useCurrentUserState(s => s.username)
  const isDarkMode = useColorScheme() === 'dark'
  const onClick = () => {
    toggleReaction?.(emoji)
  }
  const active = reaction.users.some(r => r.username === me)
  const count = reaction.users.length
  const text = reaction.decorated || emoji

  return (
    <ReactionButton
      active={active}
      className={className}
      count={count}
      isDarkMode={isDarkMode}
      onClick={onClick}
      onLongPress={onLongPress}
      style={style}
      text={text}
    />
  )
}

type NewReactionButtonProps = {
  style?: Kb.Styles.StylesCrossPlatform
}

export function NewReactionButton(p: NewReactionButtonProps) {
  const styles = useStyles()
  const theme = Kb.Styles.useTheme()
  const ordinal = useOrdinal()
  const isDarkMode = useColorScheme() === 'dark'
  const conversationIDKey = useConversationThreadID()
  const message = useConversationThreadMessage(ordinal)
  const hasMessageID = !!message && !!T.Chat.messageIDToNumber(message.id)
  const onOpenEmojiPicker = () => {
    if (!message || !T.Chat.messageIDToNumber(message.id)) {
      return
    }
    C.Router2.navigateAppend({
      name: 'chatChooseEmoji',
      params: {conversationIDKey, onPickAddToMessageID: message.id, pickKey: 'reaction'},
    })
  }

  return (
    <Kb.ClickableBox
      direction="horizontal"
      centerChildren={true}
      fullHeight={true}
      onClick={hasMessageID ? onOpenEmojiPicker : undefined}
      style={Kb.Styles.collapseStyles([
        styles.borderBase,
        {borderColor: isDarkMode ? darkColors.black_10 : colors.black_10},
        styles.newReactionButtonBox,
        styles.buttonBox,
        !hasMessageID && styles.disabled,
        p.style,
      ])}
    >
      <Kb.Icon
        type="iconfont-reacji"
        color={theme.black_50}
        fontSize={18}
        style={styles.emojiIconWrapper}
      />
    </Kb.ClickableBox>
  )
}

const markdownOverride: StyleOverride = isMobile
  ? {
      customEmoji: {
        height: 20,
        transform: [{translateY: 4}],
        width: 20,
      },
      emoji: {
        fontSize: 15,
      },
      emojiSize: {size: 24},
      paragraph: isAndroid ? ({height: 28, textAlignVertical: 'center'} as StyleOverride['paragraph']) : {},
    }
  : {
      customEmoji: {height: 18, width: 18},
      emoji: {height: 18},
      emojiSize: {size: 18},
      paragraph: {alignSelf: 'center', display: 'flex'},
    }

const useStyles = Kb.Styles.createStyleHook(
  theme =>
    ({
      active: {
        backgroundColor: theme.blueLighter2,
        borderColor: theme.blue,
      },
      borderBase: {
        // borderColor is set per-platform below: DynamicColorIOS fails for it in the new arch
        borderRadius: Kb.Styles.borderRadius,
        borderStyle: 'solid',
      },
      buttonBox: Kb.Styles.platformStyles({
        common: {
          backgroundColor: theme.white,
          borderWidth: 1,
          height: isMobile ? 30 : 26,
          minWidth: 40,
          ...Kb.Styles.paddingH(6),
        },
        isElectron: {...Kb.Styles.transition('border-color', 'background-color', 'box-shadow')},
      }),
      count: {
        color: theme.black_50,
        position: 'relative',
      },
      countActive: {color: theme.blueDark},
      disabled: {opacity: 0.3},
      emojiIconWrapper: Kb.Styles.platformStyles({
        isElectron: {position: 'absolute'},
        isMobile: {marginTop: 2},
      }),
      newReactionButtonBox: Kb.Styles.platformStyles({
        common: {width: 37},
        isElectron: {
          minHeight: 18,
          overflow: 'hidden',
        },
      }),
    }) as const
)

export default ReactButtonContainer