@fluentui-react-native/tester 0.126.16 → 0.126.18

package/src/TestComponents/Icon/IconExperimentalE2ETest.tsx

@@ -1,54 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-import * as React from 'react';
-import { View } from 'react-native';
-import { Text } from '@fluentui/react-native';
-import { FontIcon, SvgIcon, Icon, FontIconProps, SvgIconProps } from '@fluentui-react-native/experimental-icon';
-import {
-  ICON_ACCESSIBILITY_LABEL,
-  ICON_TEST_COMPONENT,
-  ICON_FONT_TEST_COMPONENT,
-  ICON_SVG_TEST_COMPONENT,
-} from '../../../../E2E/src/Icon/consts';
-import TestSvg from '../../../assets/test.svg';
-
-const fontBuiltInProps: FontIconProps = {
-  fontFamily: 'Arial',
-  codepoint: 0x2663,
-  fontSize: 100,
-  color: '#f09',
-  testID: ICON_FONT_TEST_COMPONENT,
-  accessibilityLabel: ICON_ACCESSIBILITY_LABEL,
-};
-
-const svgUriProps: SvgIconProps = {
-  uri: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Example.svg',
-  viewBox: '0 0 1000 1000',
-  width: 100,
-  height: 100,
-  accessibilityLabel: ICON_ACCESSIBILITY_LABEL,
-  testID: ICON_TEST_COMPONENT,
-};
-
-const svgSrcProps: SvgIconProps = {
-  viewBox: '0 0 500 500',
-  src: TestSvg,
-  width: 72,
-  height: 72,
-  testID: ICON_SVG_TEST_COMPONENT,
-  accessibilityLabel: ICON_ACCESSIBILITY_LABEL,
-};
-
-export const E2ETestingExperimentalIcon: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Text>Icon component</Text>
-      <Icon svgSource={svgUriProps} />
-
-      <Text>SVG</Text>
-      <SvgIcon {...svgSrcProps} />
-
-      <Text>FontIcon</Text>
-      <FontIcon {...fontBuiltInProps} />
-    </View>
-  );
-};

package/src/TestComponents/Link/E2ELinkTest.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { Alert } from 'react-native';
-import { Link } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import { stackStyle } from '../Common/styles';
-import {
-  LINK_TEST_COMPONENT,
-  LINK_ACCESSIBILITY_LABEL,
-  LINK_NO_A11Y_LABEL_COMPONENT,
-  LINK_TEST_COMPONENT_LABEL,
-} from '../../../../E2E/src/Link/consts';
-import { testProps } from '../Common/TestProps';
-
-export const LinkE2ETest: React.FunctionComponent = () => {
-  const doPress = (): void => {
-    Alert.alert('Alert.', 'You have been alerted.');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Link
-        url="https://www.bing.com/"
-        content="Link with Accessibility Label."
-        accessibilityLabel={LINK_ACCESSIBILITY_LABEL}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(LINK_TEST_COMPONENT)}
-      />
-      <Link
-        url="https://www.bing.com/"
-        onPress={doPress}
-        content={LINK_TEST_COMPONENT_LABEL}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(LINK_NO_A11Y_LABEL_COMPONENT)}
-      />
-    </Stack>
-  );
-};

package/src/TestComponents/Link/LinkTest.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { Alert } from 'react-native';
-import { Link } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import { stackStyle } from '../Common/styles';
-import { LINK_TESTPAGE } from '../../../../E2E/src/Link/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { LinkE2ETest } from './E2ELinkTest';
-
-const Links: React.FunctionComponent = () => {
-  const doPress = (): void => {
-    Alert.alert('Alert.', 'You have been alerted.');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Link url="https://www.bing.com/" content="Click to navigate." />
-      <Link onPress={doPress} content="Click to alert." />
-    </Stack>
-  );
-};
-
-const linkSections: TestSection[] = [
-  {
-    name: 'Navigation and Alert',
-    testID: LINK_TESTPAGE,
-    component: Links,
-  },
-  {
-    name: 'Link E2E Test',
-    component: LinkE2ETest,
-  },
-];
-
-export const LinkTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Beta',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Experimental',
-    macosStatus: 'Beta',
-    androidStatus: 'Backlog',
-  };
-
-  const description =
-    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
-
-  return <Test name="Link Test" description={description} sections={linkSections} status={status}></Test>;
-};

package/src/TestComponents/Link/index.ts

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

package/src/TestComponents/LinkExperimental/E2ELinkTest.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { LinkV1 as Link } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import { stackStyle } from '../Common/styles';
-import {
-  EXPERIMENTAL_LINK_TEST_COMPONENT,
-  EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL,
-  EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT,
-  EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL,
-} from '../../../../E2E/src/LinkExperimental/consts';
-import { testProps } from '../Common/TestProps';
-
-export const LinkE2ETest: React.FunctionComponent = () => {
-  const doPress = (): void => {
-    console.log('Link pressed');
-  };
-
-  return (
-    <Stack style={stackStyle}>
-      <Link
-        url="https://www.bing.com/"
-        accessibilityLabel={EXPERIMENTAL_LINK_ACCESSIBILITY_LABEL}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(EXPERIMENTAL_LINK_TEST_COMPONENT)}
-      >
-        Link with Accessibility Label
-      </Link>
-      <Link
-        onPress={doPress}
-        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-        {...testProps(EXPERIMENTAL_LINK_NO_A11Y_LABEL_COMPONENT)}
-      >
-        {EXPERIMENTAL_LINK_TEST_COMPONENT_LABEL}
-      </Link>
-    </Stack>
-  );
-};

package/src/TestComponents/LinkExperimental/LinkTest.tsx

@@ -1,190 +0,0 @@
-import * as React from 'react';
-import { Alert, View, StyleSheet, Text, TextInput } from 'react-native';
-import { LinkV1 as Link, LinkTokens } from '@fluentui/react-native';
-import { Stack } from '@fluentui-react-native/stack';
-import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import { EXPERIMENTAL_LINK_TESTPAGE } from '../../../../E2E/src/LinkExperimental/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { LinkE2ETest } from './E2ELinkTest';
-import { Platform } from 'react-native';
-import { InlineLinks } from './InlineLinksTest';
-
-const DefaultLinks: React.FunctionComponent = () => {
-  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
-  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
-
-  return (
-    <Stack style={stackStyle}>
-      <Link tooltip={'https://www.bing.com/'} url="https://www.bing.com/">
-        Click to navigate.
-      </Link>
-      <Link onPress={doPress} onAccessibilityTap={doAllyTap}>
-        Click to alert.
-      </Link>
-      <Link disabled>Disabled Link</Link>
-    </Stack>
-  );
-};
-
-const SubtleLinks: React.FunctionComponent = () => {
-  const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
-  const doAllyTap = React.useCallback(() => Alert.alert('Alert.', 'You have invoked onAllyTap.'), []);
-  const supportsInlineLink = Platform.OS !== ('win32' as any);
-
-  return (
-    <Stack style={stackStyle}>
-      <Link appearance="subtle" url="https://www.bing.com/">
-        Click to navigate.
-      </Link>
-      {supportsInlineLink && (
-        <Text>
-          This is inline Link.{' '}
-          <Link appearance="subtle" inline onPress={doPress} onAccessibilityTap={doAllyTap}>
-            Click to alert.
-          </Link>
-        </Text>
-      )}
-      <Link appearance="subtle" onPress={doPress} disabled>
-        Disabled Link
-      </Link>
-    </Stack>
-  );
-};
-
-const styles = StyleSheet.create({
-  tokensRow: {
-    flexDirection: 'row',
-    marginBottom: 10,
-  },
-  tokensColumn: {
-    flexDirection: 'column',
-    margin: 10,
-  },
-});
-
-const BlueHeaderBold = Link.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4', textAlign: 'right' });
-const CustomLinks: React.FunctionComponent = () => {
-  const [linkColor, setLinkColor] = React.useState<string>('blue');
-  const [linkFont, setLinkFont] = React.useState<string>('Ariel');
-  const [linkFontSize, setLinkFontSize] = React.useState<number>(12);
-  const [linkText, setLinkText] = React.useState<string>('Click to Navigate');
-  const [linkUrl, setLinkUrl] = React.useState<string>('https://www.bing.com/');
-
-  const CustomLink = React.useMemo(() => {
-    const tokens: LinkTokens = {
-      color: linkColor,
-      fontFamily: linkFont,
-      fontSize: linkFontSize,
-    };
-    return Link.customize(tokens);
-  }, [linkColor, linkFont, linkFontSize, linkText, linkUrl]);
-
-  return (
-    <View style={styles.tokensColumn}>
-      <View style={styles.tokensRow}>
-        <View>
-          <Text>Text Tokens</Text>
-          <TextInput
-            accessibilityLabel="Link color"
-            style={commonStyles.textBox}
-            placeholder="Link color"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkColor(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Link font"
-            style={commonStyles.textBox}
-            placeholder="Link font"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkFont(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Link font size"
-            style={commonStyles.textBox}
-            placeholder="Link font size"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkFontSize(parseInt(e.nativeEvent.text));
-            }}
-          />
-        </View>
-        <View>
-          <Text>Content and URL customize</Text>
-          <TextInput
-            accessibilityLabel="Link text"
-            style={commonStyles.textBox}
-            placeholder="Link text"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkText(e.nativeEvent.text);
-            }}
-          />
-          <TextInput
-            accessibilityLabel="Link Url"
-            style={commonStyles.textBox}
-            placeholder="Link URL"
-            blurOnSubmit={true}
-            onSubmitEditing={(e) => {
-              setLinkUrl(e.nativeEvent.text);
-            }}
-          />
-        </View>
-      </View>
-      <CustomLink align="end" url={linkUrl}>
-        {linkText}
-      </CustomLink>
-      <BlueHeaderBold>BlueHeaderBold</BlueHeaderBold>
-    </View>
-  );
-};
-
-const linkSections: TestSection[] = [
-  {
-    name: 'Default Links',
-    testID: EXPERIMENTAL_LINK_TESTPAGE,
-    component: DefaultLinks,
-  },
-  {
-    name: 'Inline Links',
-    component: InlineLinks,
-  },
-  Platform.select({
-    // As per design discussion, there is no use case for subtle link on Android, no tokens available for the same.
-    android: null,
-    default: {
-      name: 'Subtle Links',
-      component: SubtleLinks,
-    },
-  }),
-  Platform.select({
-    android: null,
-    default: {
-      name: 'Custom Link',
-      component: CustomLinks,
-    },
-  }),
-
-  {
-    name: 'Link E2E Test',
-    component: LinkE2ETest,
-  },
-];
-
-export const ExperimentalLinkTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Experimental',
-    uwpStatus: 'Experimental',
-    iosStatus: 'Experimental',
-    macosStatus: 'Experimental',
-    androidStatus: 'Experimental',
-  };
-
-  const description =
-    'With a Link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option. A Link indicates that it can be clicked, typically by being displayed using the visited or unvisited link system colors. Traditionally, Links are underlined as well, but that approach is often unnecessary and falling out of favor to reduce visual clutter.\n\nA Link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design.';
-
-  return <Test name="Link Test" description={description} sections={linkSections} status={status}></Test>;
-};

package/src/TestComponents/LinkExperimental/index.ts

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

package/src/TestComponents/MenuButton/CustomizedMenuButtonTest.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { Text, View } from 'react-native';
-import { MenuButton } from '@fluentui/react-native';
-import { menuItems } from './testData';
-import { viewWrapperStyle, columnStyle, rowStyle } from './MenuButtonTestStyles';
-
-const StyledMenuButton = MenuButton.customize({
-  button: {
-    borderRadius: 4,
-    backgroundColor: '#0095ff',
-    borderWidth: 0,
-    color: '#fff',
-    variant: 'heroSemibold',
-    fontFamily: 'Georgia',
-  },
-  contextualMenu: { backgroundColor: '#a9dbff' },
-});
-
-export const CustomizedMenuButton: React.FunctionComponent = () => {
-  return (
-    <View>
-      <View style={viewWrapperStyle}>
-        <View style={columnStyle}>
-          <View style={rowStyle}>
-            <Text>MenuButton with customized UI</Text>
-          </View>
-        </View>
-      </View>
-      <StyledMenuButton content="styled MenuButton" menuItems={menuItems} />
-    </View>
-  );
-};

package/src/TestComponents/MenuButton/MenuButtonE2ETest.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { MenuButton, ContextualMenuProps } from '@fluentui/react-native';
-import { Text, View } from 'react-native';
-import { menuItems } from './testData';
-import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
-import {
-  MENU_BUTTON_TEST_COMPONENT,
-  MENU_BUTTON_ACCESSIBILITY_LABEL,
-  MENU_BUTTON_NO_A11Y_LABEL_COMPONENT,
-  MENU_BUTTON_TEST_COMPONENT_LABEL,
-} from '../../../../E2E/src/MenuButton/consts';
-import { testProps } from '../Common/TestProps';
-
-export const E2ETestMenuButton: React.FunctionComponent = () => {
-  const [lastMenuItemClicked, setLastMenuItemClicked] = React.useState(null);
-
-  const onItemClick = React.useCallback(
-    (key) => {
-      setLastMenuItemClicked(key);
-    },
-    [setLastMenuItemClicked],
-  );
-
-  const contextualMenuProps: ContextualMenuProps = {
-    accessibilityLabel: 'MenuButton',
-    shouldFocusOnMount: true,
-    shouldFocusOnContainer: false,
-  };
-
-  return (
-    <View>
-      <View style={viewWrapperStyle}>
-        <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 with Accessibility Label"
-                menuItems={menuItems}
-                onItemClick={onItemClick}
-                contextualMenu={contextualMenuProps}
-                accessibilityLabel={MENU_BUTTON_ACCESSIBILITY_LABEL}
-                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-                {...testProps(MENU_BUTTON_TEST_COMPONENT)}
-              />
-            </View>
-          </View>
-          <View style={{ ...rowStyle, paddingHorizontal: 5 }}>
-            <View style={columnStyle}>
-              <MenuButton
-                content={MENU_BUTTON_TEST_COMPONENT_LABEL}
-                menuItems={menuItems}
-                onItemClick={onItemClick}
-                contextualMenu={contextualMenuProps}
-                /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
-                {...testProps(MENU_BUTTON_NO_A11Y_LABEL_COMPONENT)}
-              />
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  );
-};

package/src/TestComponents/MenuButton/MenuButtonTest.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { MENU_BUTTON_TESTPAGE } from '../../../../E2E/src/MenuButton/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
-import { StandardMenuButton } from './StandardMenuButtonTest';
-import { NestedMenuButton } from './NestedMenuButtonTest';
-import { CustomizedMenuButton } from './CustomizedMenuButtonTest';
-import { E2ETestMenuButton } from './MenuButtonE2ETest';
-
-const menuButtonSections: TestSection[] = [
-  {
-    name: 'Standard MenuButton',
-    testID: MENU_BUTTON_TESTPAGE,
-    component: StandardMenuButton,
-  },
-  {
-    name: 'Nested MenuButton',
-    component: NestedMenuButton,
-  },
-  {
-    name: 'MenuButton with customized UI',
-    component: CustomizedMenuButton,
-  },
-  {
-    name: 'MenuButton for E2E Testing',
-    component: E2ETestMenuButton,
-  },
-];
-
-export const MenuButtonTest: React.FunctionComponent = () => {
-  const status: PlatformStatus = {
-    win32Status: 'Experimental',
-    uwpStatus: 'Backlog',
-    iosStatus: 'Backlog',
-    macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
-  };
-
-  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="MenuButton Test" description={description} sections={menuButtonSections} status={status} />;
-};

package/src/TestComponents/MenuButton/NestedMenuButtonTest.tsx

@@ -1,154 +0,0 @@
-import * as React from 'react';
-import { Text, View, Switch } from 'react-native';
-import { Separator, MenuButton } from '@fluentui/react-native';
-import { menuItems, iconProps } from './testData';
-import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonTestStyles';
-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
-            startIcon={rasterImageProps}
-            content="Press for Nested MenuButton"
-            menuItems={nestedMenuItems}
-            onItemClick={onItemClick}
-          />
-        </View>
-      </View>
-    </View>
-  );
-};