From f1552535e5d4ada183620f43ca19927ae443ad16 Mon Sep 17 00:00:00 2001 From: Gabriel Donadel Date: Wed, 18 Oct 2023 20:57:05 -0300 Subject: [PATCH 1/2] [menu-bar] Improve OS filter settings --- apps/menu-bar/src/components/PathInput.tsx | 19 ++-- apps/menu-bar/src/components/View.tsx | 4 +- apps/menu-bar/src/hooks/useListDevices.ts | 6 +- apps/menu-bar/src/popover/Core.tsx | 60 +---------- apps/menu-bar/src/utils/theme.ts | 1 + apps/menu-bar/src/windows/Settings.tsx | 111 ++++++++++++++++----- apps/menu-bar/src/windows/index.ts | 2 +- 7 files changed, 110 insertions(+), 93 deletions(-) diff --git a/apps/menu-bar/src/components/PathInput.tsx b/apps/menu-bar/src/components/PathInput.tsx index 2b220f33..2254174e 100644 --- a/apps/menu-bar/src/components/PathInput.tsx +++ b/apps/menu-bar/src/components/PathInput.tsx @@ -1,3 +1,4 @@ +import { darkTheme, lightTheme } from '@expo/styleguide-native'; import React from 'react'; import { StyleSheet, TouchableOpacity, TextInput as NativeTextInput } from 'react-native'; @@ -5,11 +6,13 @@ import { TextInput } from './Text'; import { Row } from './View'; import FolderIcon from '../assets/icons/folder.svg'; import FilePicker from '../modules/FilePickerModule'; -import { useExpoTheme } from '../utils/useExpoTheme'; +import { addOpacity } from '../utils/theme'; +import { useCurrentTheme, useExpoTheme } from '../utils/useExpoTheme'; const PathInput = React.forwardRef>( ({ onChangeText, editable, ...props }, forwardedRef) => { - const theme = useExpoTheme(); + const theme = useCurrentTheme(); + const expoTheme = useExpoTheme(); const handleSelectFolder = async () => { try { @@ -18,13 +21,17 @@ const PathInput = React.forwardRef + style={[styles.inputContainer, { backgroundColor }, !editable && styles.inputDisabled]}> - + ); diff --git a/apps/menu-bar/src/components/View.tsx b/apps/menu-bar/src/components/View.tsx index b435963a..19799133 100644 --- a/apps/menu-bar/src/components/View.tsx +++ b/apps/menu-bar/src/components/View.tsx @@ -14,6 +14,7 @@ import { borderDark, border, gap, + addOpacity, } from '../utils/theme'; export const View = create(RNView, { @@ -84,6 +85,7 @@ export const View = create(RNView, { border: { default: { borderColor: lightTheme.border.default, borderWidth: 1 }, + light: { borderColor: addOpacity(lightTheme.border.default, 0.2), borderWidth: 1 }, hairline: { borderColor: lightTheme.border.default, borderWidth: StyleSheet.hairlineWidth, @@ -239,7 +241,7 @@ export const Divider = create(RNView, { base: { height: 1, backgroundColor: palette.light.gray['700'], - opacity: 0.4, + opacity: 0.1, }, variants: { diff --git a/apps/menu-bar/src/hooks/useListDevices.ts b/apps/menu-bar/src/hooks/useListDevices.ts index 2cb9882d..d9636982 100644 --- a/apps/menu-bar/src/hooks/useListDevices.ts +++ b/apps/menu-bar/src/hooks/useListDevices.ts @@ -3,10 +3,12 @@ import { useCallback, useEffect, useState } from 'react'; import { DeviceEventEmitter } from 'react-native'; import { listDevicesAsync } from '../commands/listDevicesAsync'; -import { UserPreferences } from '../modules/Storage'; +import { getUserPreferences } from '../modules/Storage'; import { getSectionsFromDeviceList } from '../utils/device'; -export const useListDevices = (userPreferences: UserPreferences) => { +export const useListDevices = () => { + const userPreferences = getUserPreferences(); + const [devicesPerPlatform, setDevicesPerPlatform] = useState({ android: { devices: [] }, ios: { devices: [] }, diff --git a/apps/menu-bar/src/popover/Core.tsx b/apps/menu-bar/src/popover/Core.tsx index 96e704ba..3a492b12 100644 --- a/apps/menu-bar/src/popover/Core.tsx +++ b/apps/menu-bar/src/popover/Core.tsx @@ -16,7 +16,7 @@ import { bootDeviceAsync } from '../commands/bootDeviceAsync'; import { downloadBuildAsync } from '../commands/downloadBuildAsync'; import { installAndLaunchAppAsync } from '../commands/installAndLaunchAppAsync'; import { launchSnackAsync } from '../commands/launchSnackAsync'; -import { Checkbox, Spacer, Text, View } from '../components'; +import { Spacer, Text, View } from '../components'; import DeviceItem, { DEVICE_ITEM_HEIGHT } from '../components/DeviceItem'; import ProgressIndicator from '../components/ProgressIndicator'; import { useDeepLinking } from '../hooks/useDeepLinking'; @@ -32,9 +32,6 @@ import { SelectedDevicesIds, getSelectedDevicesIds, saveSelectedDevicesIds, - UserPreferences, - getUserPreferences, - saveUserPreferences, } from '../modules/Storage'; import { openProjectsSelectorURL } from '../utils/constants'; import { getDeviceId, getDeviceOS, isVirtualDevice } from '../utils/device'; @@ -48,7 +45,6 @@ enum Status { } const BUILDS_SECTION_HEIGHT = 88; -const DEVICES_TO_SHOW_SECTION_HEIGHT = 22; type Props = { isDevWindow: boolean; @@ -58,7 +54,6 @@ function Core(props: Props) { const [selectedDevicesIds, setSelectedDevicesIds] = useState( getSelectedDevicesIds() ); - const [userPreferences, setUserPreferences] = useState(getUserPreferences()); const { apps, refetch: refetchApps } = useGetPinnedApps(); usePopoverFocusEffect(refetchApps); @@ -68,8 +63,7 @@ function Core(props: Props) { const [status, setStatus] = useState(Status.LISTENING); const [progress, setProgress] = useState(0); - const { devicesPerPlatform, numberOfDevices, sections, refetch } = - useListDevices(userPreferences); + const { devicesPerPlatform, numberOfDevices, sections, refetch } = useListDevices(); const { emulatorWithoutAudio } = useDeviceAudioPreferences(); const theme = useExpoTheme(); @@ -79,7 +73,6 @@ function Core(props: Props) { (displayDimensions.height || 0) - FOOTER_HEIGHT - BUILDS_SECTION_HEIGHT - - DEVICES_TO_SHOW_SECTION_HEIGHT - (showProjectsSection ? PROJECTS_SECTION_HEIGHT : 0) - 30; const heightOfAllDevices = @@ -118,33 +111,6 @@ function Core(props: Props) { [emulatorWithoutAudio] ); - const onPressShowIosSimulators = async (value: boolean) => { - const newPreferences = { - ...userPreferences, - showIosSimulators: value, - }; - saveUserPreferences(newPreferences); - setUserPreferences(newPreferences); - }; - - const onPressShowTvosSimulators = async (value: boolean) => { - const newPreferences = { - ...userPreferences, - showTvosSimulators: value, - }; - saveUserPreferences(newPreferences); - setUserPreferences(newPreferences); - }; - - const onPressShowAndroidEmulators = async (value: boolean) => { - const newPreferences = { - ...userPreferences, - showAndroidEmulators: value, - }; - saveUserPreferences(newPreferences); - setUserPreferences(newPreferences); - }; - // @TODO: create another hook const handleSnackUrl = useCallback( async (url: string) => { @@ -310,28 +276,6 @@ function Core(props: Props) { ) : null} {apps?.length ? : null} - - - Devices to show: - - - {userPreferences.showExperimentalFeatures ? ( - - ) : null} - - { const theme = useCurrentTheme(); const [hasSessionSecret, setHasSessionSecret] = useState( @@ -129,6 +137,15 @@ const Settings = () => { setHasSessionSecret(false); }; + const toggleOS = async (key: keyof UserPreferences, value: boolean) => { + const newPreferences = { + ...userPreferences, + [key]: value, + }; + saveUserPreferences(newPreferences); + setUserPreferences(newPreferences); + }; + return ( @@ -186,7 +203,7 @@ const Settings = () => { Preferences - + { />