shared/teams/get-options.tsx - master - githubmirror/client

shared/teams/get-options.tsx
65 строк2 KB
chrisnojima
refactor(styles): theme via hooks, no android remount (#29515)
08 авг 2026, 02:24
08 авг 2026, 02:24a41d38e
import * as Kb from '@/common-adapters'
import {useSafeNavigation} from '@/util/safe-navigation'
import {makeNewTeamWizard} from './new-team/wizard/state'
import {useTeamsList} from './use-teams-list'
import {useRoute, useNavigation} from '@react-navigation/native'

export const useHeaderActions = () => {
  const nav = useSafeNavigation()
  return {
    onCreateTeam: () =>
      nav.safeNavigateAppend({name: 'teamWizard1TeamPurpose', params: {wizard: makeNewTeamWizard()}}),
    onJoinTeam: () => nav.safeNavigateAppend({name: 'teamJoinTeamDialog', params: {}}),
  }
}

const TeamsFilter = () => {
  const styles = useStyles()
  const route = useRoute('teamsRoot')
  const params = route.params
  const navigation = useNavigation('teamsRoot')
  const filterValue = params.filter ?? ''
  const {teams} = useTeamsList()
  const numTeams = teams.length
  const setFilter = (filter: string) => navigation.setParams({...params, filter})
  return numTeams >= 20 ? (
    <Kb.SearchFilter
      value={filterValue}
      valueControlled={true}
      onChange={setFilter}
      size="small"
      placeholderText="Filter"
      hotkey="k"
      icon="iconfont-filter"
      style={styles.filter}
    />
  ) : null
}

const HeaderRightActions = () => {
  const styles = useStyles()
  const {onCreateTeam, onJoinTeam} = useHeaderActions()
  return (
    <Kb.Box2 gap="tiny" direction="horizontal" alignItems="center" style={styles.headerActions}>
      <Kb.Button label="Create a team" onClick={onCreateTeam} small={true} />
      <Kb.Button label="Join a team" onClick={onJoinTeam} small={true} type="Default" mode="Secondary" />
    </Kb.Box2>
  )
}

const useStyles = Kb.Styles.createStyleHook(() => ({
  filter: {
    alignSelf: 'flex-end',
    marginBottom: Kb.Styles.globalMargins.xtiny,
    marginRight: Kb.Styles.globalMargins.xsmall,
  },
  headerActions: Kb.Styles.platformStyles({
    common: {marginBottom: Kb.Styles.globalMargins.xtiny, paddingRight: Kb.Styles.globalMargins.small},
    isElectron: {...Kb.Styles.desktopStyles.windowDraggingClickable},
  }),
}))

export default {
  headerRightActions: !isMobile ? () => <TeamsFilter /> : () => <HeaderRightActions />,
  title: 'Teams',
}