@fluentui-react-native/tester 0.170.50 → 0.170.52

package/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx

@@ -1,50 +0,0 @@
-import * as React from 'react';
-
-import { MENUBUTTONV1_TESTPAGE } from '@fluentui-react-native/e2e-testing';
-
-import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
-import { MenuButtonV1E2ETest } from './MenuButtonV1E2ETest';
-import { NestedMenuButton } from './NestedMenuButtonTest';
-import { StandardMenuButton } from './StandardMenuButtonTest';
-import type { TestSection, PlatformStatus } from '../Test';
-import { Test } from '../Test';
-
-const menuButtonSections: TestSection[] = [
-  {
-    name: 'Standard MenuButton',
-    testID: MENUBUTTONV1_TESTPAGE,
-    component: StandardMenuButton,
-  },
-  {
-    name: 'Nested MenuButton',
-    component: NestedMenuButton,
-  },
-  {
-    name: 'MenuButton with customized UI',
-    component: CustomizedMenuButton,
-  },
-];
-
-const e2eSections: TestSection[] = [
-  {
-    name: 'E2E Testing MenuButton',
-    component: MenuButtonV1E2ETest,
-  },
-];
-
-export const MenuButtonV1Test: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Deprecated',
-    uwpStatus: 'Deprecated',
-    iosStatus: 'Deprecated',
-    macosStatus: 'Deprecated',
-    androidStatus: 'Deprecated',
-  };
-
-  const description =
-    'MenuButton is a component which contains ContextualMenu and Button components. This control combines and simplifies the API for customers.\nClicking on MenuButton opens ContextualMenu. It can have Submenu. But selection checks and a beak are not implemented.';
-
-  return (
-    <Test name="MenuButtonV1 Test" description={description} sections={menuButtonSections} status={status} e2eSections={e2eSections} />
-  );
-};

package/src/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.ts

@@ -1,5 +0,0 @@
-import type { ViewStyle, TextStyle } from 'react-native';
-export const viewWrapperStyle: ViewStyle = { flexDirection: 'row', paddingVertical: 5 };
-export const columnStyle: ViewStyle = { flexDirection: 'column', paddingHorizontal: 5 };
-export const rowStyle: ViewStyle = { flexDirection: 'row' };
-export const textColor: TextStyle = { color: 'blue' };

package/src/TestComponents/MenuButtonV1/NestedMenuButtonTest.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-import { Text, View, Switch } from 'react-native';
-
-import { Separator } from '@fluentui/react-native';
-import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
-
-import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
-import { menuItems, iconProps } from './testData';
-import { testImage } from '../Common/iconExamples';
-
-export const NestedMenuButton: React.FunctionComponent = () => {
-  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
-
-  const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
-  const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
-
-  const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
-  const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
-
-  const onItemClick = React.useCallback(
-    (key) => {
-      setLastMenuItemClicked(key);
-    },
-    [setLastMenuItemClicked],
-  );
-
-  const [showSubmenu, setShowSubmenu] = React.useState(false);
-  const [isSubmenuVisible, setIsSubmenuVisible] = React.useState(false);
-  const [lastSubmenuItemClicked, setSubmenuLastItemClicked] = React.useState(null);
-
-  const toggleShowSubmenu = React.useCallback(() => {
-    setShowSubmenu(!showSubmenu);
-    setIsSubmenuVisible(!isSubmenuVisible);
-  }, [showSubmenu, isSubmenuVisible, setShowSubmenu, setIsSubmenuVisible]);
-
-  const onShowSubmenu = React.useCallback(() => {
-    setIsSubmenuVisible(true);
-  }, [setIsSubmenuVisible]);
-
-  const onDismissSubmenu = React.useCallback(() => {
-    setShowSubmenu(false);
-  }, [setShowSubmenu]);
-
-  const onSubmenuItemClick = React.useCallback(
-    (key) => {
-      setSubmenuLastItemClicked(key);
-    },
-    [setSubmenuLastItemClicked],
-  );
-
-  const nestedMenuItems = [
-    ...menuItems,
-    {
-      hasSubmenu: true,
-      itemKey: '4',
-      text: 'SubmenuItem svg icon',
-      componentRef: React.useRef(null),
-      icon: iconProps,
-      onHoverIn: toggleShowSubmenu,
-      showSubmenu,
-      submenuProps: {
-        onShow: onShowSubmenu,
-        setShowMenu: toggleShowSubmenu,
-        onDismiss: onDismissSubmenu,
-        onItemClick: onSubmenuItemClick,
-      },
-      submenuItems: [
-        {
-          icon: iconProps,
-          text: 'SubmenuItem svg icon',
-          itemKey: '1',
-        },
-        {
-          itemKey: '2',
-          text: 'SubmenuItem 2',
-          disabled: true,
-        },
-        {
-          itemKey: '3',
-          text: 'SubmenuItem 3',
-        },
-      ],
-    },
-    {
-      itemKey: '5',
-      text: 'Menu Item',
-    },
-    {
-      hasSubmenu: true,
-      itemKey: '6',
-      text: 'SubmenuItem',
-      componentRef: React.useRef(null),
-      submenuProps: {
-        onItemClick: onSubmenuItemClick,
-      },
-      submenuItems: [
-        {
-          text: 'SubmenuItem 1',
-          itemKey: '1',
-        },
-        {
-          itemKey: '2',
-          text: 'SubmenuItem 2',
-        },
-        {
-          itemKey: '3',
-          text: 'SubmenuItem 3',
-        },
-      ],
-    },
-  ];
-
-  const rasterImageProps = {
-    rasterImageSource: {
-      src: testImage,
-    },
-    width: 12,
-    height: 12,
-  };
-
-  return (
-    <View>
-      <View style={viewWrapperStyle}>
-        <View style={columnStyle}>
-          <View style={rowStyle}>
-            <Text>Should Focus on Mount</Text>
-            <Switch value={focusOnMount} onValueChange={toggleFocusOnMount} />
-          </View>
-
-          <View style={rowStyle}>
-            <Text>Should Focus on Container</Text>
-            <Switch value={focusOnContainer} onValueChange={toggleFocusOnContainer} />
-          </View>
-        </View>
-
-        <Separator vertical />
-
-        <View style={columnStyle}>
-          <Text>
-            <Text>Last Menu Item Clicked: </Text>
-            {lastMenuItemClicked > 0 ? <Text style={textColor}>{lastMenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
-          </Text>
-          <Text>
-            <Text>Last Submenu Item Clicked: </Text>
-            {lastSubmenuItemClicked > 0 ? <Text style={textColor}>{lastSubmenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
-          </Text>
-          <MenuButton content="Press for Nested MenuButton" icon={rasterImageProps} menuItems={nestedMenuItems} onItemClick={onItemClick} />
-        </View>
-      </View>
-    </View>
-  );
-};

package/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx

@@ -1,123 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- */
-import * as React from 'react';
-import { Text, View, Switch, Platform } from 'react-native';
-
-import type { ContextualMenuProps } from '@fluentui/react-native';
-import { Separator } from '@fluentui/react-native';
-import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
-import type { IconSourcesType } from '@fluentui-react-native/icon';
-
-import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
-import { menuItems, iconProps } from './testData';
-import { testImage } from '../Common/iconExamples';
-
-export const StandardMenuButton: React.FunctionComponent = () => {
-  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
-
-  const [focusOnMount, setShouldFocusOnMount] = React.useState(true);
-  const toggleFocusOnMount = React.useCallback((value) => setShouldFocusOnMount(value), [setShouldFocusOnMount]);
-
-  const [focusOnContainer, setShouldFocusOnContainer] = React.useState(false);
-  const toggleFocusOnContainer = React.useCallback((value) => setShouldFocusOnContainer(value), [setShouldFocusOnContainer]);
-
-  const onItemClick = React.useCallback(
-    (key) => {
-      setLastMenuItemClicked(key);
-    },
-    [setLastMenuItemClicked],
-  );
-
-  const contextualMenuProps: ContextualMenuProps = {
-    accessibilityLabel: 'MenuButton',
-    shouldFocusOnMount: focusOnMount,
-    shouldFocusOnContainer: focusOnContainer,
-  };
-
-  const iconToShow: IconSourcesType = Platform.select({
-    macos: testImage, //GH #931, macOS MenuButton only supports showing PNG icons
-    default: iconProps,
-  });
-
-  return (
-    <View>
-      <View style={viewWrapperStyle}>
-        <View style={columnStyle}>
-          <View style={rowStyle}>
-            <Text>Should Focus on Mount</Text>
-            <Switch value={focusOnMount} onValueChange={toggleFocusOnMount} />
-          </View>
-
-          <View style={rowStyle}>
-            <Text>Should Focus on Container</Text>
-            <Switch value={focusOnContainer} onValueChange={toggleFocusOnContainer} />
-          </View>
-        </View>
-
-        <Separator vertical />
-
-        <View style={columnStyle}>
-          <Text>
-            <Text>Last Menu Item Clicked: </Text>
-            {lastMenuItemClicked > 0 ? <Text style={textColor}>{lastMenuItemClicked}</Text> : <Text style={textColor}>none</Text>}
-          </Text>
-          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
-            <View style={columnStyle}>
-              <MenuButton
-                content="Standard MenuButton"
-                tooltip="Standard MenuButton tooltip"
-                menuItems={menuItems}
-                onItemClick={onItemClick}
-                contextualMenu={contextualMenuProps}
-              />
-              <Text>MenuButton with icon</Text>
-              <MenuButton
-                icon={iconToShow}
-                content="MenuButton"
-                menuItems={menuItems}
-                onItemClick={onItemClick}
-                contextualMenu={contextualMenuProps}
-              />
-              <Text>MenuButton with only icon</Text>
-              <MenuButton icon={iconToShow} menuItems={menuItems} onItemClick={onItemClick} contextualMenu={contextualMenuProps} />
-              <Text>Disabled MenuButton</Text>
-              <MenuButton disabled content="Disabled MenuButton" menuItems={menuItems} />
-            </View>
-            <Separator vertical />
-            <View style={columnStyle}>
-              <MenuButton
-                appearance="primary"
-                content="Primary MenuButton"
-                menuItems={menuItems}
-                onItemClick={onItemClick}
-                contextualMenu={contextualMenuProps}
-              />
-              <Text>Primary MenuButton with icon</Text>
-              <MenuButton
-                appearance="primary"
-                icon={iconToShow}
-                content="Primary MenuButton"
-                menuItems={menuItems}
-                onItemClick={onItemClick}
-                contextualMenu={contextualMenuProps}
-              />
-              <Text>Primary MenuButton with only icon</Text>
-              <MenuButton
-                appearance="primary"
-                icon={iconToShow}
-                menuItems={menuItems}
-                onItemClick={onItemClick}
-                contextualMenu={contextualMenuProps}
-              />
-              <Text>Primary Disabled MenuButton</Text>
-              <MenuButton appearance="primary" disabled content="Disabled Primary MenuButton" menuItems={menuItems} />
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-};

package/src/TestComponents/MenuButtonV1/index.ts

@@ -1 +0,0 @@
-export * from './MenuButtonV1Test';

package/src/TestComponents/MenuButtonV1/testData.ts

@@ -1,22 +0,0 @@
-import type { MenuButtonItemProps } from '@fluentui/react-native';
-
-import { testImage, svgProps } from '../Common/iconExamples';
-
-export const menuItems: MenuButtonItemProps[] = [
-  {
-    itemKey: '1',
-    text: 'MenuItem 1',
-    icon: testImage,
-  },
-  {
-    itemKey: '2',
-    text: 'MenuItem 2',
-  },
-  {
-    itemKey: '3',
-    text: 'MenuItem 3',
-    disabled: true,
-  },
-];
-
-export const iconProps = { svgSource: svgProps, width: 12, height: 12 };