shared/teams/team/rows/empty-row.tsx - master - githubmirror/client

shared/teams/team/rows/empty-row.tsx
167 строк5 KB
chrisnojima
refactor(styles): theme via hooks, no android remount (#29515)
08 авг 2026, 02:24
08 авг 2026, 02:24a41d38e
import type * as T from '@/constants/types'
import * as C from '@/constants'
import * as Kb from '@/common-adapters'
import * as React from 'react'
import {useSafeNavigation} from '@/util/safe-navigation'
import {useCurrentUserState} from '@/stores/current-user'
import {makeAddMembersWizard} from '@/teams/add-members-wizard/state'
import {makeNewTeamWizard} from '@/teams/new-team/wizard/state'
import {useLoadedTeam} from '../use-loaded-team'
import {joinConversation} from '@/chat/conversation/status-actions'
import {useAddToTeam} from '../../common/use-add-to-team'

type Props = {
  type: 'channelsEmpty' | 'channelsFew' | 'members' | 'subteams'
  teamID: T.Teams.TeamID
  conversationIDKey?: T.Chat.ConversationIDKey
  notChannelMember?: boolean
}
const icon: {[K in Props['type']]: Kb.IconType} = {
  channelsEmpty: 'icon-empty-team-small-96',
  channelsFew: 'icon-empty-channels-103-96',
  members: 'icon-empty-people-search-112-96',
  subteams: 'icon-empty-subteams-164-96',
}

const buttonLabel = {
  channelsEmpty: 'Create channels',
  channelsFew: 'Create a channel',
  members: 'Add/Invite people',
  subteams: 'Create a subteam',
}

const useSecondaryAction = (props: Props) => {
  const {teamID, conversationIDKey} = props
  const nav = useSafeNavigation()
  const onSecondaryAction = () => {
    switch (props.type) {
      case 'members':
        if (conversationIDKey) {
          nav.safeNavigateAppend({
            name: 'chatAddToChannel',
            params: {conversationIDKey: conversationIDKey, teamID},
          })
        } else {
          nav.safeNavigateAppend({
            name: 'teamAddToTeamFromWhere',
            params: {wizard: makeAddMembersWizard(teamID)},
          })
        }
        break
      case 'subteams':
        nav.safeNavigateAppend({
          name: 'teamWizard2TeamInfo',
          params: {wizard: makeNewTeamWizard({parentTeamID: teamID, teamType: 'subteam'})},
        })
        break
      case 'channelsFew':
        nav.safeNavigateAppend({name: 'chatCreateChannel', params: {teamID}})
        break
      case 'channelsEmpty':
        nav.safeNavigateAppend({name: 'teamCreateChannels', params: {teamID}})
        break
    }
  }
  return onSecondaryAction
}

const getFirstText = (
  type: Props['type'],
  teamOrChannel: string,
  teamOrChannelName: string,
  notIn?: boolean
) => {
  switch (type) {
    case 'members':
      return notIn
        ? `${teamOrChannelName} doesn't have any members`
        : `You are the only member in this ${teamOrChannel}.`
    case 'channelsEmpty':
      return `${teamOrChannelName} is a small team.
Make it a big team by creating chat channels.`
    case 'channelsFew':
      return 'Channels can be joined by anyone, unlike subteams.'
    case 'subteams':
      return 'Subteams are cryptographically distinct, and can welcome people who aren’t elsewhere in your team hierarchy.'
  }
}

const EmptyRow = (props: Props) => {
  const styles = useStyles()
  const {conversationIDKey, teamID} = props
  const {teamMeta} = useLoadedTeam(teamID)
  const notIn = teamMeta.role === 'none' || props.notChannelMember
  const you = useCurrentUserState(s => s.username)
  const onSecondaryAction = useSecondaryAction(props)
  const addToTeam = useAddToTeam()
  const [error, setError] = React.useState('')
  const onAddSelf = () => {
    if (conversationIDKey) {
      joinConversation(conversationIDKey)
    } else {
      setError('')
      addToTeam({
        onError: setError,
        sendChatNotification: false,
        teamID,
        users: [{assertion: you, role: 'admin'}],
      })
    }
  }
  const waiting = C.Waiting.useAnyWaiting(C.waitingKeyTeamsAddMember(teamID, you))

  const teamOrChannel = props.conversationIDKey ? 'channel' : 'team'
  const teamOrChannelName = props.conversationIDKey ? 'This channel' : teamMeta.teamname
  return (
    <Kb.Box2
      direction="vertical"
      gap="small"
      alignItems="center"
      style={styles.container}
      fullWidth={true}
    >
      <Kb.ImageIcon type={icon[props.type]} style={styles.iconHeight} />
      <Kb.Text type="BodySmall" center={true} style={styles.text}>
        {getFirstText(props.type, teamOrChannel, teamOrChannelName, notIn)}
      </Kb.Text>
      {props.type === 'subteams' && ( // Subteams has a second paragraph, putting it in a separate text so we get the Box2 gap
        <Kb.Text type="BodySmall" center={true} style={styles.text}>
          Examples: {teamMeta.teamname}.legal, {teamMeta.teamname}.management, {teamMeta.teamname}
          .istanbul, ...
        </Kb.Text>
      )}
      <Kb.Box2 direction={isMobile ? 'vertical' : 'horizontal'} gap="tiny">
        {props.type === 'members' && notIn && (
          <Kb.Button small={true} mode="Primary" label="Add yourself" onClick={onAddSelf} waiting={waiting} />
        )}
        <Kb.Button
          small={true}
          mode="Secondary"
          label={conversationIDKey ? 'Add people' : buttonLabel[props.type]}
          onClick={onSecondaryAction}
        />
      </Kb.Box2>
      {!!error && (
        <Kb.Text type="BodySmallError" center={true} style={styles.text}>
          {error}
        </Kb.Text>
      )}
    </Kb.Box2>
  )
}

const useStyles = Kb.Styles.createStyleHook(
  theme =>
    ({
      container: {
        ...Kb.Styles.padding(40, 0),
        backgroundColor: theme.blueGrey,
      },
      iconHeight: {height: 96},
      text: Kb.Styles.platformStyles({
        isElectron: {maxWidth: 272},
      }),
    }) as const
)

export default EmptyRow