From e00badb9def0a39c04e573a73e876c9ce4739b5a Mon Sep 17 00:00:00 2001 From: Tushar Masane Date: Wed, 21 Apr 2021 06:52:27 +0530 Subject: [PATCH 1/7] updated themepicker for android --- apps/android/package.json | 1 + .../src/FluentTester/theme/ThemePickers.tsx | 46 +++++++++++++++---- yarn.lock | 2 +- 3 files changed, 39 insertions(+), 10 deletions(-) diff --git a/apps/android/package.json b/apps/android/package.json index 11668d56fc5..1bcb6f07867 100644 --- a/apps/android/package.json +++ b/apps/android/package.json @@ -20,6 +20,7 @@ }, "dependencies": { "@fluentui-react-native/tester": "^0.23.0", + "@react-native-picker/picker": "1.9.11", "react": "16.13.1", "react-native": "^0.63.4", "react-native-svg": "^12.1.1-0", diff --git a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx index 2177ca157b7..30a20bc4532 100644 --- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx +++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx @@ -1,9 +1,16 @@ import * as React from 'react'; -import { View, Picker, StyleSheet } from 'react-native'; +import { View, StyleSheet, Platform } from 'react-native'; import { Text } from '@fluentui-react-native/experimental-text'; import { lightnessOptions, testerTheme } from './CustomThemes'; import { themeChoices, ThemeNames } from './applyTheme'; import { brandOptions, OfficeBrand } from './applyBrand'; +import { Theme, useTheme } from '@fluentui-react-native/framework'; +import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; + +const isAndroid = Platform.OS == 'android'; + +// To be replaced with single import when Windows support comes in. +const Picker = isAndroid ? require('@react-native-picker/picker').Picker : require('react-native').Picker; export const themePickerStyles = StyleSheet.create({ pickerRoot: { @@ -11,16 +18,21 @@ export const themePickerStyles = StyleSheet.create({ }, picker: { - flexDirection: 'row', + flexDirection: isAndroid ? 'column' : 'row', alignItems: 'center', padding: 4, }, +}); - dropdown: { - height: 30, - width: 120, - fontSize: 12, - }, +export const getThemedDropdownStyles = themedStyleSheet((t: Theme) => { + return { + dropdown: { + height: 30, + width: 120, + fontSize: 12, + color: t.colors.bodyText, + }, + }; }); type PartPickerEntry = { label: string; value: string }; @@ -41,8 +53,24 @@ export const PartPicker: React.FunctionComponent = (props: Part }, [setValue, onChange], ); - return ( - + + const themedDropdownStyles = getThemedDropdownStyles(useTheme()); + const dropdownIconColor = useTheme().colors.buttonIcon; + + return isAndroid ? ( + + {contents.map((entry: PartPickerEntry, index: number) => ( + + ))} + + ) : ( + {contents.map((entry: PartPickerEntry, index: number) => ( ))} diff --git a/yarn.lock b/yarn.lock index 2c6136ff3ad..ec1f58aeced 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2224,7 +2224,7 @@ resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-0.1.2.tgz#2a3a9c8c3d142649b89a5c710eafa8ec3f0d7596" integrity sha512-3jgCWoZY31s/cjtTCAbGN0VqapwM7WiGZonb5KSkRT6egkwR1QAWBxe8Pe216u6R5EY/AGC8Z4Bf9wASYpz/1A== -"@react-native-picker/picker@^1.9.11": +"@react-native-picker/picker@1.9.11", "@react-native-picker/picker@^1.9.11": version "1.9.11" resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.9.11.tgz#490c752417c17d687e2941659b3c0bff9cb79b83" integrity sha512-E7whvvMIl9Ln1sxgug7OAEVWQ69n82iV0d2OWWp5VV52+RW3azKh1IFm4rxdW5/oByMfl7FFL0eHNelGgY4BMQ== From 2f6d107a2348c27caf8bdc6c120ff27db33863f0 Mon Sep 17 00:00:00 2001 From: Tushar Masane Date: Wed, 21 Apr 2021 07:24:23 +0530 Subject: [PATCH 2/7] Change files --- ...ve-tester-2021-04-21-07-24-22-android-themepicker.json | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 change/@fluentui-react-native-tester-2021-04-21-07-24-22-android-themepicker.json diff --git a/change/@fluentui-react-native-tester-2021-04-21-07-24-22-android-themepicker.json b/change/@fluentui-react-native-tester-2021-04-21-07-24-22-android-themepicker.json new file mode 100644 index 00000000000..d331db18a33 --- /dev/null +++ b/change/@fluentui-react-native-tester-2021-04-21-07-24-22-android-themepicker.json @@ -0,0 +1,8 @@ +{ + "type": "patch", + "comment": "updated themepicker for android", + "packageName": "@fluentui-react-native/tester", + "email": "tamasane@gmail.com", + "dependentChangeType": "patch", + "date": "2021-04-21T01:54:22.990Z" +} From 38f57bc04c8db091a147b8a558b7a80c799f21c6 Mon Sep 17 00:00:00 2001 From: Tushar Masane Date: Wed, 21 Apr 2021 08:14:50 +0530 Subject: [PATCH 3/7] add correct picker... --- apps/android/package.json | 2 +- yarn.lock | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/android/package.json b/apps/android/package.json index 1bcb6f07867..80beb29f571 100644 --- a/apps/android/package.json +++ b/apps/android/package.json @@ -20,7 +20,7 @@ }, "dependencies": { "@fluentui-react-native/tester": "^0.23.0", - "@react-native-picker/picker": "1.9.11", + "@react-native-picker/picker": "^1.9.11", "react": "16.13.1", "react-native": "^0.63.4", "react-native-svg": "^12.1.1-0", diff --git a/yarn.lock b/yarn.lock index ec1f58aeced..2c6136ff3ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2224,7 +2224,7 @@ resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-0.1.2.tgz#2a3a9c8c3d142649b89a5c710eafa8ec3f0d7596" integrity sha512-3jgCWoZY31s/cjtTCAbGN0VqapwM7WiGZonb5KSkRT6egkwR1QAWBxe8Pe216u6R5EY/AGC8Z4Bf9wASYpz/1A== -"@react-native-picker/picker@1.9.11", "@react-native-picker/picker@^1.9.11": +"@react-native-picker/picker@^1.9.11": version "1.9.11" resolved "https://registry.yarnpkg.com/@react-native-picker/picker/-/picker-1.9.11.tgz#490c752417c17d687e2941659b3c0bff9cb79b83" integrity sha512-E7whvvMIl9Ln1sxgug7OAEVWQ69n82iV0d2OWWp5VV52+RW3azKh1IFm4rxdW5/oByMfl7FFL0eHNelGgY4BMQ== From dc923c6dd97a8c48827019ddbce9ebf96efb2847 Mon Sep 17 00:00:00 2001 From: Tushar Masane Date: Wed, 21 Apr 2021 18:33:51 +0530 Subject: [PATCH 4/7] ignore rn-picker depcheck... --- apps/android/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/android/package.json b/apps/android/package.json index 80beb29f571..b4dfb695ee2 100644 --- a/apps/android/package.json +++ b/apps/android/package.json @@ -52,7 +52,8 @@ }, "depcheck": { "ignoreMatches": [ - "react-native-test-app" + "react-native-test-app", + "@react-native-picker/picker" ] } } From 254d457c5e9787b6af31e8d184da361229b58318 Mon Sep 17 00:00:00 2001 From: Tushar Masane Date: Wed, 21 Apr 2021 20:52:42 +0530 Subject: [PATCH 5/7] seperated android themepicker... --- .../theme/ThemePickers.android.tsx | 83 +++++++++++++++++++ .../src/FluentTester/theme/ThemePickers.tsx | 46 ++-------- 2 files changed, 92 insertions(+), 37 deletions(-) create mode 100644 apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx diff --git a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx new file mode 100644 index 00000000000..14d95571fcb --- /dev/null +++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx @@ -0,0 +1,83 @@ +import * as React from 'react'; +import { View, PickerPropsAndroid } from 'react-native'; +import { Text } from '@fluentui-react-native/experimental-text'; +import { lightnessOptions, testerTheme } from './CustomThemes'; +import { themeChoices, ThemeNames } from './applyTheme'; +import { brandOptions, OfficeBrand } from './applyBrand'; +import { Theme, useTheme } from '@fluentui-react-native/framework'; +import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; +import { Picker } from '@react-native-picker/picker'; + +const getThemedDropdownStyles = themedStyleSheet((t: Theme) => { + return { + pickerRoot: { + flexDirection: 'row', + }, + picker: { + flexDirection: 'column', + alignItems: 'center', + padding: 4, + }, + dropdown: { + height: 30, + width: 120, + fontSize: 12, + color: t.colors.bodyText, + }, + }; +}); + +const PickerLabel = Text.customize({ variant: 'subheaderSemibold' }); + +export const ThemePickers: React.FunctionComponent<{}> = () => { + const onBrandChange = React.useCallback((newBrand: string) => { + testerTheme.brand = newBrand as OfficeBrand; + }, []); + + const onThemeSelected = React.useCallback((newTheme: string) => { + testerTheme.themeName = newTheme as ThemeNames; + }, []); + + const onAppearanceChange = React.useCallback((newAppearance: string) => { + testerTheme.appearance = newAppearance as 'light' | 'dark' | 'dynamic'; + }, []); + + const theme = useTheme(); + const themePickerStyles = getThemedDropdownStyles(theme); + const dropdownProps: PickerPropsAndroid & { dropdownIconColor: string } = { + style: themePickerStyles.dropdown, + mode: 'dropdown', + dropdownIconColor: theme.colors.buttonIcon, + }; + + return ( + + + Theme: + + {themeChoices.map((entry, index) => ( + + ))} + + + + + Light/Dark: + + {lightnessOptions.map((entry, index) => ( + + ))} + + + + + Brand: + + {brandOptions.map((entry, index) => ( + + ))} + + + + ); +}; diff --git a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx index 30a20bc4532..2177ca157b7 100644 --- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx +++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.tsx @@ -1,16 +1,9 @@ import * as React from 'react'; -import { View, StyleSheet, Platform } from 'react-native'; +import { View, Picker, StyleSheet } from 'react-native'; import { Text } from '@fluentui-react-native/experimental-text'; import { lightnessOptions, testerTheme } from './CustomThemes'; import { themeChoices, ThemeNames } from './applyTheme'; import { brandOptions, OfficeBrand } from './applyBrand'; -import { Theme, useTheme } from '@fluentui-react-native/framework'; -import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet'; - -const isAndroid = Platform.OS == 'android'; - -// To be replaced with single import when Windows support comes in. -const Picker = isAndroid ? require('@react-native-picker/picker').Picker : require('react-native').Picker; export const themePickerStyles = StyleSheet.create({ pickerRoot: { @@ -18,21 +11,16 @@ export const themePickerStyles = StyleSheet.create({ }, picker: { - flexDirection: isAndroid ? 'column' : 'row', + flexDirection: 'row', alignItems: 'center', padding: 4, }, -}); -export const getThemedDropdownStyles = themedStyleSheet((t: Theme) => { - return { - dropdown: { - height: 30, - width: 120, - fontSize: 12, - color: t.colors.bodyText, - }, - }; + dropdown: { + height: 30, + width: 120, + fontSize: 12, + }, }); type PartPickerEntry = { label: string; value: string }; @@ -53,24 +41,8 @@ export const PartPicker: React.FunctionComponent = (props: Part }, [setValue, onChange], ); - - const themedDropdownStyles = getThemedDropdownStyles(useTheme()); - const dropdownIconColor = useTheme().colors.buttonIcon; - - return isAndroid ? ( - - {contents.map((entry: PartPickerEntry, index: number) => ( - - ))} - - ) : ( - + return ( + {contents.map((entry: PartPickerEntry, index: number) => ( ))} From 993b1f998a9e27e5ecf1bfebb88e1a1d190496fb Mon Sep 17 00:00:00 2001 From: Tushar Masane Date: Wed, 21 Apr 2021 21:29:45 +0530 Subject: [PATCH 6/7] added dropdown styles... --- .../theme/ThemePickers.android.tsx | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx index 14d95571fcb..671a8593e4f 100644 --- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx +++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx @@ -24,6 +24,11 @@ const getThemedDropdownStyles = themedStyleSheet((t: Theme) => { fontSize: 12, color: t.colors.bodyText, }, + dropdownBorder: { + borderStyle: 'solid', + borderColor: t.colors.disabledBodyText, + borderWidth: 1, + }, }; }); @@ -43,40 +48,41 @@ export const ThemePickers: React.FunctionComponent<{}> = () => { }, []); const theme = useTheme(); - const themePickerStyles = getThemedDropdownStyles(theme); + const themedPickerStyles = getThemedDropdownStyles(theme); const dropdownProps: PickerPropsAndroid & { dropdownIconColor: string } = { - style: themePickerStyles.dropdown, + style: themedPickerStyles.dropdown, mode: 'dropdown', dropdownIconColor: theme.colors.buttonIcon, }; - return ( - - - Theme: - - {themeChoices.map((entry, index) => ( + const Dropdown = (props) => { + const { initial, onValueChange, options } = props; + return ( + + + {options.map((entry, index) => ( ))} + ); + }; + + return ( + + + Theme: + + - + Light/Dark: - - {lightnessOptions.map((entry, index) => ( - - ))} - + - + Brand: - - {brandOptions.map((entry, index) => ( - - ))} - + ); From 315363e6af5e1abc7af83dc6777c3f3bf7a5cb70 Mon Sep 17 00:00:00 2001 From: Tushar Masane Date: Wed, 21 Apr 2021 21:44:26 +0530 Subject: [PATCH 7/7] add types for dropdown.. --- .../src/FluentTester/theme/ThemePickers.android.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx index 671a8593e4f..ae3cfbcb38c 100644 --- a/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx +++ b/apps/fluent-tester/src/FluentTester/theme/ThemePickers.android.tsx @@ -55,12 +55,15 @@ export const ThemePickers: React.FunctionComponent<{}> = () => { dropdownIconColor: theme.colors.buttonIcon, }; - const Dropdown = (props) => { + type DropdownEntry = { label: string; value: string }; + type DropdownProps = { initial: string; onValueChange: (value: string) => void; options: DropdownEntry[] }; + + const Dropdown = (props: DropdownProps) => { const { initial, onValueChange, options } = props; return ( - {options.map((entry, index) => ( + {options.map((entry: DropdownEntry, index: number) => ( ))}