@fluentui-react-native/tester 0.69.5 → 0.70.0

package/src/FluentTester/theme/ThemePickers.macos.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { Picker } from '@react-native-picker/picker';
+import { SvgXml } from 'react-native-svg';
+import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
+import { ButtonV1 as Button } from '@fluentui/react-native';
 import { testerTheme } from './CustomThemes';
 import { themeChoices, ThemeNames } from './applyTheme';
 import { brandOptions, OfficeBrand } from './applyBrand';
@@ -24,6 +26,17 @@ export const themePickerStyles = StyleSheet.create({
   },
 });
 
+const themeMenuPickerStyles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    margin: 5,
+  },
+  svg: {
+    padding: 4,
+  },
+});
+
 type PartPickerEntry = { label: string; value: string };
 
 type PartPickerProps = {
@@ -32,6 +45,37 @@ type PartPickerProps = {
   onChange: (value: string) => void;
 };
 
+const ThemeMenuPicker = ({ selected, onChange, collection, style }) => {
+  const chevronXml = `
+  <svg width="12" height="16" viewBox="0 0 11 6" color="#000">
+    <path fill='currentColor' d='M0.646447 0.646447C0.841709 0.451184 1.15829 0.451184 1.35355 0.646447L5.5 4.79289L9.64645 0.646447C9.84171 0.451185 10.1583 0.451185 10.3536 0.646447C10.5488 0.841709 10.5488 1.15829 10.3536 1.35355L5.85355 5.85355C5.65829 6.04882 5.34171 6.04882 5.14645 5.85355L0.646447 1.35355C0.451184 1.15829 0.451184 0.841709 0.646447 0.646447Z' />
+  </svg>`;
+
+  return (
+    <View style={{ ...themeMenuPickerStyles.container, ...style }}>
+      <Menu>
+        <MenuTrigger>
+          <Button>
+            <Text>{selected}</Text>
+            <View style={themeMenuPickerStyles.svg}>
+              <SvgXml xml={chevronXml} />
+            </View>
+          </Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            {collection.map((entry: PartPickerEntry, index: number) => (
+              <MenuItem onClick={() => onChange(entry.value)} key={`entry${index}`}>
+                {entry.label}
+              </MenuItem>
+            ))}
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </View>
+  );
+};
+
 export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: PartPickerProps) => {
   const { initial, contents, onChange } = props;
   const [value, setValue] = React.useState(initial);
@@ -42,13 +86,7 @@ export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: Part
     },
     [setValue, onChange],
   );
-  return (
-    <Picker selectedValue={value} style={themePickerStyles.dropdown} onValueChange={onValueChange}>
-      {contents.map((entry: PartPickerEntry, index: number) => (
-        <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />
-      ))}
-    </Picker>
-  );
+  return <ThemeMenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={contents} />;
 };
 
 const PickerLabel = Text.customize({ variant: 'bodySemibold' });

package/src/FluentTester/theme/ThemePickers.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { View, Picker, StyleSheet } from 'react-native';
+import { View, 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 { ThemeOptions } from '@fluentui-react-native/theme-types';
+import { MenuPicker } from '../TestComponents/Common/MenuPicker';
 
 export const themePickerStyles = StyleSheet.create({
   pickerRoot: {
@@ -42,13 +43,10 @@ export const PartPicker: React.FunctionComponent<PartPickerProps> = (props: Part
     },
     [setValue, onChange],
   );
-  return (
-    <Picker selectedValue={value} style={themePickerStyles.dropdown} onValueChange={onValueChange}>
-      {contents.map((entry: PartPickerEntry, index: number) => (
-        <Picker.Item label={entry.label} value={entry.value} key={`entry${index}`} />
-      ))}
-    </Picker>
-  );
+  const MenuPickerCollection = contents.map((entry: PartPickerEntry) => {
+    return entry.label;
+  });
+  return <MenuPicker selected={value} style={themePickerStyles.dropdown} onChange={onValueChange} collection={MenuPickerCollection} />;
 };
 
 const PickerLabel = Text.customize({ variant: 'bodySemibold' });