@office-iss/react-native-win32 0.78.2 → 0.79.0-preview.1

package/Libraries/Lists/SectionList.js

@@ -18,14 +18,16 @@ import type {
 } from '@react-native/virtualized-lists';
 
 import Platform from '../Utilities/Platform';
-import {VirtualizedSectionList} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 import * as React from 'react';
 
+const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
+
 type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
 
-type RequiredProps<SectionT: SectionBase<any>> = {|
+type RequiredProps<SectionT: SectionBase<any>> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -38,9 +40,9 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *     }>
    */
   sections: $ReadOnlyArray<SectionT>,
-|};
+};
 
-type OptionalProps<SectionT: SectionBase<any>> = {|
+type OptionalProps<SectionT: SectionBase<any>> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
@@ -90,9 +92,9 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
    * This may improve scroll performance for large lists.
    */
   removeClippedSubviews?: boolean,
-|};
+};
 
-export type Props<SectionT> = {|
+export type Props<SectionT> = {
   ...$Diff<
     VirtualizedSectionListProps<SectionT>,
     {
@@ -114,7 +116,7 @@ export type Props<SectionT> = {|
   >,
   ...RequiredProps<SectionT>,
   ...OptionalProps<SectionT>,
-|};
+};
 
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:
@@ -261,9 +263,7 @@ export default class SectionList<
   }
 
   _wrapperListRef: ?React.ElementRef<typeof VirtualizedSectionList>;
-  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
-   * LTI update could not be added via codemod */
-  _captureRef = ref => {
+  _captureRef = (ref: ?React.RefOf<VirtualizedSectionList>) => {
     this._wrapperListRef = ref;
   };
 }

package/Libraries/Lists/SectionListModern.js

@@ -19,14 +19,16 @@ import type {
 import type {ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
-import {VirtualizedSectionList} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 import React, {forwardRef, useImperativeHandle, useRef} from 'react';
 
+const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
+
 type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
 
-type RequiredProps<SectionT: SectionBase<any>> = {|
+type RequiredProps<SectionT: SectionBase<any>> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -39,9 +41,9 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *     }>
    */
   sections: $ReadOnlyArray<SectionT>,
-|};
+};
 
-type OptionalProps<SectionT: SectionBase<any>> = {|
+type OptionalProps<SectionT: SectionBase<any>> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
@@ -91,9 +93,9 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
    * This may improve scroll performance for large lists.
    */
   removeClippedSubviews?: boolean,
-|};
+};
 
-export type Props<SectionT: SectionBase<any>> = $ReadOnly<{|
+export type Props<SectionT: SectionBase<any>> = $ReadOnly<{
   ...$Diff<
     VirtualizedSectionListProps<SectionT>,
     {
@@ -115,7 +117,7 @@ export type Props<SectionT: SectionBase<any>> = $ReadOnly<{|
   >,
   ...RequiredProps<SectionT>,
   ...OptionalProps<SectionT>,
-|}>;
+}>;
 
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:

package/Libraries/Lists/ViewabilityHelper.js

@@ -16,9 +16,10 @@ export type {
   ViewabilityConfigCallbackPair,
 } from '@react-native/virtualized-lists';
 
-import {typeof ViewabilityHelper as ViewabilityHelperType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
+type ViewabilityHelperType = typeof VirtualizedLists.ViewabilityHelper;
 const ViewabilityHelper: ViewabilityHelperType =
-  require('@react-native/virtualized-lists').ViewabilityHelper;
+  VirtualizedLists.ViewabilityHelper;
 
-module.exports = ViewabilityHelper;
+export default ViewabilityHelper;

package/Libraries/Lists/VirtualizeUtils.js

@@ -10,9 +10,7 @@
 
 'use strict';
 
-import {typeof keyExtractor as KeyExtractorType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
-const keyExtractor: KeyExtractorType =
-  require('@react-native/virtualized-lists').keyExtractor;
-
-module.exports = {keyExtractor};
+type KeyExtractorType = typeof VirtualizedLists.keyExtractor;
+export const keyExtractor: KeyExtractorType = VirtualizedLists.keyExtractor;

package/Libraries/Lists/VirtualizedList.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
-import {typeof VirtualizedList as VirtualizedListType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
-const VirtualizedList: VirtualizedListType =
-  require('@react-native/virtualized-lists').VirtualizedList;
+type VirtualizedListType = typeof VirtualizedLists.VirtualizedList;
+const VirtualizedList: VirtualizedListType = VirtualizedLists.VirtualizedList;
 
 export type {
-  RenderItemProps,
-  RenderItemType,
+  ListRenderItemInfo,
+  ListRenderItem,
   Separators,
 } from '@react-native/virtualized-lists';
-module.exports = VirtualizedList;
+export default VirtualizedList;

package/Libraries/Lists/VirtualizedListContext.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-import {typeof VirtualizedListContextResetter as VirtualizedListContextResetterType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
-const VirtualizedListContextResetter: VirtualizedListContextResetterType =
-  require('@react-native/virtualized-lists').VirtualizedListContextResetter;
-
-module.exports = {VirtualizedListContextResetter};
+type VirtualizedListContextResetterType =
+  typeof VirtualizedLists.VirtualizedListContextResetter;
+export const VirtualizedListContextResetter: VirtualizedListContextResetterType =
+  VirtualizedLists.VirtualizedListContextResetter;

package/Libraries/Lists/VirtualizedSectionList.js

@@ -10,13 +10,15 @@
 
 'use strict';
 
-import {typeof VirtualizedSectionList as VirtualizedSectionListType} from '@react-native/virtualized-lists';
+import VirtualizedLists from '@react-native/virtualized-lists';
 
+type VirtualizedSectionListType =
+  typeof VirtualizedLists.VirtualizedSectionList;
 const VirtualizedSectionList: VirtualizedSectionListType =
-  require('@react-native/virtualized-lists').VirtualizedSectionList;
+  VirtualizedLists.VirtualizedSectionList;
 
 export type {
   SectionBase,
   ScrollToLocationParamsType,
 } from '@react-native/virtualized-lists';
-module.exports = VirtualizedSectionList;
+export default VirtualizedSectionList;

package/Libraries/Lists/__flowtests__/FlatList-flowtest.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const FlatList = require('../FlatList');
+const FlatList = require('../FlatList').default;
 const React = require('react');
 
 function renderMyListItem(info: {

package/Libraries/LogBox/Data/LogBoxData.js

@@ -37,20 +37,20 @@ export type LogData = $ReadOnly<{
 }>;
 
 export type Observer = (
-  $ReadOnly<{|
+  $ReadOnly<{
     logs: LogBoxLogs,
     isDisabled: boolean,
     selectedLogIndex: number,
-  |}>,
+  }>,
 ) => void;
 
 export type IgnorePattern = string | RegExp;
 
-export type Subscription = $ReadOnly<{|
+export type Subscription = $ReadOnly<{
   unsubscribe: () => void,
-|}>;
+}>;
 
-export type WarningInfo = {|
+export type WarningInfo = {
   finalFormat: string,
   forceDialogImmediately: boolean,
   suppressDialog_LEGACY: boolean,
@@ -58,15 +58,15 @@ export type WarningInfo = {|
   monitorEvent: string | null,
   monitorListVersion: number,
   monitorSampleRate: number,
-|};
+};
 
 export type WarningFilter = (format: string) => WarningInfo;
 
-type AppInfo = $ReadOnly<{|
+type AppInfo = $ReadOnly<{
   appVersion: string,
   engine: string,
   onPress?: ?() => void,
-|}>;
+}>;
 
 const observers: Set<{observer: Observer, ...}> = new Set();
 const ignorePatterns: Set<IgnorePattern> = new Set();
@@ -105,7 +105,7 @@ export function reportLogBoxError(
   error: ExtendedError,
   componentStack?: string,
 ): void {
-  const ExceptionsManager = require('../../Core/ExceptionsManager');
+  const ExceptionsManager = require('../../Core/ExceptionsManager').default;
 
   error.message = `${LOGBOX_ERROR_MESSAGE}\n\n${error.message}`;
   if (componentStack != null) {
@@ -413,25 +413,25 @@ export function observe(observer: Observer): Subscription {
   };
 }
 
-type Props = $ReadOnly<{||}>;
-type State = $ReadOnly<{|
+type Props = $ReadOnly<{}>;
+type State = $ReadOnly<{
   logs: LogBoxLogs,
   isDisabled: boolean,
   hasError: boolean,
   selectedLogIndex: number,
-|}>;
+}>;
 
 type SubscribedComponent = React.ComponentType<
-  $ReadOnly<{|
+  $ReadOnly<{
     logs: $ReadOnlyArray<LogBoxLog>,
     isDisabled: boolean,
     selectedLogIndex: number,
-  |}>,
+  }>,
 >;
 
 export function withSubscription(
   WrappedComponent: SubscribedComponent,
-): React.ComponentType<{||}> {
+): React.ComponentType<{}> {
   class LogBoxStateSubscription extends React.Component<Props, State> {
     static getDerivedStateFromError(): {hasError: boolean} {
       return {hasError: true};

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -79,26 +79,27 @@ class LogBoxLog {
   count: number;
   level: LogLevel;
   codeFrame: ?CodeFrame;
+  componentCodeFrame: ?CodeFrame;
   isComponentError: boolean;
   extraData: mixed | void;
   symbolicated:
-    | $ReadOnly<{|error: null, stack: null, status: 'NONE'|}>
-    | $ReadOnly<{|error: null, stack: null, status: 'PENDING'|}>
-    | $ReadOnly<{|error: null, stack: Stack, status: 'COMPLETE'|}>
-    | $ReadOnly<{|error: Error, stack: null, status: 'FAILED'|}> = {
+    | $ReadOnly<{error: null, stack: null, status: 'NONE'}>
+    | $ReadOnly<{error: null, stack: null, status: 'PENDING'}>
+    | $ReadOnly<{error: null, stack: Stack, status: 'COMPLETE'}>
+    | $ReadOnly<{error: Error, stack: null, status: 'FAILED'}> = {
     error: null,
     stack: null,
     status: 'NONE',
   };
   symbolicatedComponentStack:
-    | $ReadOnly<{|error: null, componentStack: null, status: 'NONE'|}>
-    | $ReadOnly<{|error: null, componentStack: null, status: 'PENDING'|}>
-    | $ReadOnly<{|
+    | $ReadOnly<{error: null, componentStack: null, status: 'NONE'}>
+    | $ReadOnly<{error: null, componentStack: null, status: 'PENDING'}>
+    | $ReadOnly<{
         error: null,
         componentStack: ComponentStack,
         status: 'COMPLETE',
-      |}>
-    | $ReadOnly<{|error: Error, componentStack: null, status: 'FAILED'|}> = {
+      }>
+    | $ReadOnly<{error: Error, componentStack: null, status: 'FAILED'}> = {
     error: null,
     componentStack: null,
     status: 'NONE',
@@ -140,8 +141,18 @@ class LogBoxLog {
   }
 
   retrySymbolicate(callback?: (status: SymbolicationStatus) => void): void {
+    let retry = false;
     if (this.symbolicated.status !== 'COMPLETE') {
       LogBoxSymbolication.deleteStack(this.stack);
+      retry = true;
+    }
+    if (this.symbolicatedComponentStack.status !== 'COMPLETE') {
+      LogBoxSymbolication.deleteStack(
+        convertComponentStateToStack(this.componentStack),
+      );
+      retry = true;
+    }
+    if (retry) {
       this.handleSymbolicate(callback);
     }
   }
@@ -153,7 +164,10 @@ class LogBoxLog {
   }
 
   handleSymbolicate(callback?: (status: SymbolicationStatus) => void): void {
-    if (this.symbolicated.status !== 'PENDING') {
+    if (
+      this.symbolicated.status !== 'PENDING' &&
+      this.symbolicated.status !== 'COMPLETE'
+    ) {
       this.updateStatus(null, null, null, callback);
       LogBoxSymbolication.symbolicate(this.stack, this.extraData).then(
         data => {
@@ -163,25 +177,30 @@ class LogBoxLog {
           this.updateStatus(error, null, null, callback);
         },
       );
-      if (this.componentStack != null && this.componentStackType === 'stack') {
-        this.updateComponentStackStatus(null, null, null, callback);
-        const componentStackFrames = convertComponentStateToStack(
-          this.componentStack,
-        );
-        LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
-          data => {
-            this.updateComponentStackStatus(
-              null,
-              convertStackToComponentStack(data.stack),
-              null,
-              callback,
-            );
-          },
-          error => {
-            this.updateComponentStackStatus(error, null, null, callback);
-          },
-        );
-      }
+    }
+    if (
+      this.componentStack != null &&
+      this.componentStackType === 'stack' &&
+      this.symbolicatedComponentStack.status !== 'PENDING' &&
+      this.symbolicatedComponentStack.status !== 'COMPLETE'
+    ) {
+      this.updateComponentStackStatus(null, null, null, callback);
+      const componentStackFrames = convertComponentStateToStack(
+        this.componentStack,
+      );
+      LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
+        data => {
+          this.updateComponentStackStatus(
+            null,
+            convertStackToComponentStack(data.stack),
+            data?.codeFrame,
+            callback,
+          );
+        },
+        error => {
+          this.updateComponentStackStatus(error, null, null, callback);
+        },
+      );
     }
   }
 
@@ -235,6 +254,9 @@ class LogBoxLog {
         status: 'FAILED',
       };
     } else if (componentStack != null) {
+      if (codeFrame) {
+        this.componentCodeFrame = codeFrame;
+      }
       this.symbolicatedComponentStack = {
         error: null,
         componentStack,

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -107,7 +107,7 @@ export type ExtendedExceptionData = ExceptionData & {
   ...
 };
 export type Category = string;
-export type CodeFrame = $ReadOnly<{|
+export type CodeFrame = $ReadOnly<{
   content: string,
   location: ?{
     row: number,
@@ -120,26 +120,26 @@ export type CodeFrame = $ReadOnly<{|
   // we gained the ability to use the collapse flag, but
   // it is not integrated into the LogBox UI.
   collapse?: boolean,
-|}>;
-export type Message = $ReadOnly<{|
+}>;
+export type Message = $ReadOnly<{
   content: string,
   substitutions: $ReadOnlyArray<
-    $ReadOnly<{|
+    $ReadOnly<{
       length: number,
       offset: number,
-    |}>,
+    }>,
   >,
-|}>;
+}>;
 
 export type ComponentStack = $ReadOnlyArray<CodeFrame>;
 export type ComponentStackType = 'legacy' | 'stack';
 
 const SUBSTITUTION = UTFSequence.BOM + '%s';
 
-export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{|
+export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{
   category: Category,
   message: Message,
-|}> {
+}> {
   const categoryParts = [];
   const contentParts = [];
   const substitutionOffsets = [];
@@ -456,12 +456,12 @@ export function withoutANSIColorStyles(message: mixed): mixed {
   );
 }
 
-export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
+export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,
   category: Category,
   message: Message,
-|} {
+} {
   const message = withoutANSIColorStyles(args[0]);
   let argsWithoutComponentStack: Array<mixed> = [];
   let componentStack: ComponentStack = [];

package/Libraries/LogBox/LogBox.js

@@ -14,6 +14,7 @@ import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
 import {hasComponentStack} from './Data/parseLogBoxLog';
+import * as React from 'react';
 
 export type {LogData, ExtendedExceptionData, IgnorePattern};
 
@@ -24,7 +25,7 @@ interface ILogBox {
   uninstall(): void;
   isInstalled(): boolean;
   ignoreLogs($ReadOnlyArray<IgnorePattern>): void;
-  ignoreAllLogs(?boolean): void;
+  ignoreAllLogs(value?: boolean): void;
   clearAllLogs(): void;
   addLog(log: LogData): void;
   addException(error: ExtendedExceptionData): void;
@@ -115,10 +116,18 @@ if (__DEV__) {
       return isLogBoxInstalled;
     },
 
+    /**
+     * Silence any logs that match the given strings or regexes.
+     */
     ignoreLogs(patterns: $ReadOnlyArray<IgnorePattern>): void {
       LogBoxData.addIgnorePatterns(patterns);
     },
 
+    /**
+     * Toggle error and warning notifications
+     * Note: this only disables notifications, uncaught errors will still open a full screen LogBox.
+     * @param ignore whether to ignore logs or not
+     */
     ignoreAllLogs(value?: ?boolean): void {
       LogBoxData.setDisabled(value == null ? true : value);
     },
@@ -192,9 +201,20 @@ if (__DEV__) {
     }
 
     try {
+      let stack;
+      // $FlowFixMe[prop-missing] Not added to flow types yet.
+      if (!hasComponentStack(args) && React.captureOwnerStack != null) {
+        stack = React.captureOwnerStack();
+        if (!hasComponentStack(args)) {
+          if (stack != null && stack !== '') {
+            args[0] = args[0] += '%s';
+            args.push(stack);
+          }
+        }
+      }
       if (!isWarningModuleWarning(...args) && !hasComponentStack(args)) {
         // Only show LogBox for the 'warning' module, or React errors with
-        // component stacks, otherwise pass the error through.u
+        // component stacks, otherwise pass the error through.
         //
         // By passing through, this will get picked up by the React console override,
         // potentially adding the component stack. React then passes it back to the

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -16,11 +16,11 @@ import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export class _LogBoxInspectorContainer extends React.Component<Props> {
   render(): React.Node {
@@ -65,4 +65,4 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
 
 export default (LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -16,11 +16,11 @@ import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export function _LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
@@ -102,4 +102,4 @@ const styles = StyleSheet.create({
 
 export default (LogBoxData.withSubscription(
   _LogBoxNotificationContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -70,7 +70,9 @@ export default function Ansi({
   /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
    * LTI update could not be added via codemod */
   const getText = (content, key) => {
-    if (key === 1) {
+    if (key === 0) {
+      return LRM + content;
+    } else if (key === 1) {
       // Remove the vertical bar after line numbers
       return content.replace(/\| $/, ' ');
     } else if (key === 2 && commonWhitespaceLength < Infinity) {
@@ -86,7 +88,6 @@ export default function Ansi({
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
           <Text>
-            {LRM}
             {items.map((bundle, key) => {
               const textStyle =
                 bundle.fg && COLORS[bundle.fg]
@@ -98,7 +99,10 @@ export default function Ansi({
                       backgroundColor: bundle.bg && COLORS[bundle.bg],
                     };
               return (
-                <Text style={[style, textStyle]} key={key}>
+                <Text
+                  id="logbox_codeframe_contents_text"
+                  style={[style, textStyle]}
+                  key={key}>
                   {getText(bundle.content, key)}
                 </Text>
               );

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -10,7 +10,7 @@
 
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
 import View from '../../Components/View/View';
@@ -18,16 +18,17 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  backgroundColor: $ReadOnly<{|
+type Props = $ReadOnly<{
+  id?: string,
+  backgroundColor: $ReadOnly<{
     default: string,
     pressed: string,
-  |}>,
+  }>,
   children?: React.Node,
   hitSlop?: ?EdgeInsetsProp,
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
   style?: ViewStyleProp,
-|}>;
+}>;
 
 function LogBoxButton(props: Props): React.Node {
   const [pressed, setPressed] = React.useState(false);
@@ -42,6 +43,7 @@ function LogBoxButton(props: Props): React.Node {
 
   const content = (
     <View
+      id={props.id}
       style={StyleSheet.compose(
         {
           backgroundColor: pressed

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -64,7 +64,7 @@ export default function LogBoxInspector(props: Props): React.Node {
   }
 
   return (
-    <View style={styles.root}>
+    <View id="logbox_inspector" style={styles.root}>
       <LogBoxInspectorHeader
         onSelectIndex={props.onChangeSelectedIndex}
         selectedIndex={selectedIndex}