shared/settings/root-phone.tsx - master - githubmirror/client

shared/settings/root-phone.tsx
269 строк8 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 {useConfigState} from '@/stores/config'
import * as React from 'react'
import * as Kb from '@/common-adapters'
import * as T from '@/constants/types'
import SettingsItem from './sub-nav/settings-item'
import noop from 'lodash/noop'
import {useSettingsContactsState} from '@/stores/settings-contacts'
import * as Settings from '@/constants/settings'
import {usePushState} from '@/stores/push'
import * as TestIDs from '@/tests/e2e/shared/test-ids'
import {useNotifState} from '@/stores/notifications'

const PerfRow = () => {
  const styles = useStyles()
  const [toSubmit, setToSubmit] = React.useState('')
  const ref = React.useRef<Kb.Input3Ref>(null)

  return (
    <Kb.Box2
      alignItems="center"
      direction="horizontal"
      fullWidth={true}
      gap="xtiny"
      style={styles.perfRow}
      gapStart={true}
    >
      <Kb.Button
        small={true}
        label="PerfLog"
        onClick={() => {
          T.RPCGen.logPerfLogPointRpcPromise({msg: toSubmit})
            .then(() => {})
            .catch(() => {})
          ref.current?.clear()
        }}
      />
      <Kb.Input3
        ref={ref}
        onChangeText={(text: string) => setToSubmit(`GUI: ${text}`)}
        hideBorder={true}
        containerStyle={styles.perfInput}
        placeholder="Add to perf log"
      />
    </Kb.Box2>
  )
}

type Item = {
  badgeNumber?: number
  text: string
  icon?: Kb.IconType
  onClick: () => void
  iconComponent?: (a: object) => React.ReactElement
  subText?: string
  testID?: string
  textColor?: string
}
type Section = {title: string; data: ReadonlyArray<Item>}

function SettingsNav() {
  const styles = useStyles()
  const theme = Kb.Styles.useTheme()
  // Narrow to the three tabs shown here so chat/team badge churn doesn't re-render settings
  const badgeNumbers = useNotifState(
    C.useShallow(s => ({
      devices: s.navBadges.get(C.Tabs.devicesTab),
      git: s.navBadges.get(C.Tabs.gitTab),
      settings: s.navBadges.get(C.Tabs.settingsTab),
    }))
  )
  const badgeNotifications = usePushState(s => !s.hasPermissions)
  const statsShown = useConfigState(s => !!s.runtimeStats)
  const navigateAppend = C.Router2.navigateAppend
  const contactsLabel = useSettingsContactsState(s =>
    s.importEnabled ? 'Phone contacts' : 'Import phone contacts'
  )

  const sections: Array<Section> = [
    {
      data: [
        ...(statsShown ? [{onClick: noop, text: 'perf'}] : []),
        {
          icon: 'iconfont-nav-2-crypto',
          onClick: () => {
            navigateAppend({name: Settings.settingsCryptoTab, params: {}})
          },
          text: 'Crypto',
        },
        {
          badgeNumber: badgeNumbers.devices,
          icon: 'iconfont-nav-2-devices',
          onClick: () => {
            navigateAppend({name: Settings.settingsDevicesTab, params: {}})
          },
          text: 'Devices',
        },
        {
          badgeNumber: badgeNumbers.git,
          icon: 'iconfont-nav-2-git',
          onClick: () => {
            navigateAppend({name: Settings.settingsGitTab, params: {}})
          },
          text: 'Git',
        },
        {
          icon: 'iconfont-nav-2-wallets',
          onClick: () => {
            navigateAppend({name: Settings.settingsWalletsTab, params: {}})
          },
          text: 'Wallet',
        },
      ],
      title: '',
    },
    {
      data: [
        {
          badgeNumber: badgeNumbers.settings,
          onClick: () => {
            navigateAppend({name: Settings.settingsAccountTab, params: {}})
          },
          text: 'Account',
        },
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsAdvancedTab, params: {}})
          },
          text: 'Advanced',
        },
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsArchiveTab, params: {}})
          },
          text: 'Backup',
        },
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsChatTab, params: {}})
          },
          testID: TestIDs.SETTINGS_ROW_CHAT,
          text: 'Chat',
        },
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsDisplayTab, params: {}})
          },
          text: 'Display',
        },
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsFeedbackTab, params: {}})
          },
          text: 'Feedback',
        },
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsFsTab, params: {}})
          },
          testID: TestIDs.SETTINGS_ROW_FILES,
          text: 'Files',
        },
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsContactsTab, params: {}})
          },
          text: contactsLabel,
        },
        {
          badgeNumber: badgeNotifications ? 1 : 0,
          onClick: () => {
            navigateAppend({name: Settings.settingsNotificationsTab, params: {}})
          },
          text: 'Notifications',
        },
        ...(isAndroid
          ? [
              {
                onClick: () => {
                  navigateAppend({name: Settings.settingsScreenprotectorTab, params: {}})
                },
                text: 'Screen protector',
              } as const,
            ]
          : []),
      ] as const,
      title: 'Settings' as const,
    },
    {
      data: [
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsAboutTab, params: {}})
          },
          text: 'About',
        },
        ...(__DEV__
          ? [
              {
                onClick: () => {
                  navigateAppend({name: Settings.settingsTypographyTab, params: {}})
                },
                text: 'Typography',
              } as const,
              {
                onClick: () => {
                  navigateAppend({name: Settings.settingsIconsTab, params: {}})
                },
                text: 'Icons',
              } as const,
              {
                onClick: () => {
                  navigateAppend({name: Settings.settingsMarkdownTab, params: {}})
                },
                text: 'Markdown',
              } as const,
            ]
          : []),
        {
          onClick: () => {
            navigateAppend({name: Settings.settingsLogOutTab, params: {}})
          },
          text: 'Sign out',
          textColor: theme.red,
        },
      ] as const,
      title: 'More' as const,
    },
  ]

  return (
    <Kb.ScrollView style={Kb.Styles.globalStyles.fullHeight} testID={TestIDs.SETTINGS_ACCOUNT}>
      {sections.map(section => (
        <React.Fragment key={section.title || '_top'}>
          {section.title ? (
            <Kb.Text type="BodySmallSemibold" style={styles.sectionTitle}>
              {section.title}
            </Kb.Text>
          ) : null}
          {section.data.map((item, index) =>
            item.text === 'perf' ? (
              <PerfRow key="perf" />
            ) : item.text ? (
              <SettingsItem
                {...item}
                key={item.text + String(index)}
                type={item.text}
                onClick={() => item.onClick()}
                selected={false}
              />
            ) : null
          )}
        </React.Fragment>
      ))}
    </Kb.ScrollView>
  )
}

const useStyles = Kb.Styles.createStyleHook(theme => ({
  perfInput: {backgroundColor: theme.grey, flex: 1, padding: 0, width: 'auto' as const},
  perfRow: {height: 44},
  sectionTitle: {
    backgroundColor: theme.blueLighter3,
    color: theme.black_50,
    ...Kb.Styles.padding(7, Kb.Styles.globalMargins.small),
  },
}))

export default SettingsNav