@office-iss/react-native-win32 0.68.0 → 0.69.0-preview.3

package/Libraries/Lists/__tests__/{VirtualizedList-test.windows.js → VirtualizedList-test.js}

@@ -22,7 +22,7 @@ describe('VirtualizedList', () => {
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -37,7 +37,7 @@ describe('VirtualizedList', () => {
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         ListItemComponent={ListItemComponent}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -56,7 +56,7 @@ describe('VirtualizedList', () => {
           <item value={item.key} testID={`${item.key}-renderItem`} />
         )}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
 
@@ -70,7 +70,7 @@ describe('VirtualizedList', () => {
   it('throws if no renderItem or ListItemComponent', () => {
     // Silence the React error boundary warning; we expect an uncaught error.
     const consoleError = console.error;
-    jest.spyOn(console, 'error').mockImplementation((message) => {
+    jest.spyOn(console, 'error').mockImplementation(message => {
       if (message.startsWith('The above error occurred in the ')) {
         return;
       }
@@ -82,7 +82,7 @@ describe('VirtualizedList', () => {
         <VirtualizedList
           data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
           getItem={(data, index) => data[index]}
-          getItemCount={(data) => data.length}
+          getItemCount={data => data.length}
         />,
       );
     expect(componentFactory).toThrow(
@@ -98,7 +98,7 @@ describe('VirtualizedList', () => {
         data={[]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -110,7 +110,7 @@ describe('VirtualizedList', () => {
         data={[]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
 
@@ -132,7 +132,7 @@ describe('VirtualizedList', () => {
         data={undefined}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => 0}
+        getItemCount={data => 0}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -146,7 +146,7 @@ describe('VirtualizedList', () => {
         ListFooterComponent={() => <footer />}
         ListHeaderComponent={() => <header />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
         renderItem={({item}) => <item value={item.key} />}
       />,
     );
@@ -159,7 +159,7 @@ describe('VirtualizedList', () => {
         data={[{key: 'hello'}]}
         ListEmptyComponent={() => <empty />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
         renderItem={({item}) => <item value={item.key} />}
       />,
     );
@@ -175,7 +175,7 @@ describe('VirtualizedList', () => {
         ListHeaderComponent={() => <header />}
         data={new Array(5).fill().map((_, ii) => ({id: String(ii)}))}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
         getItemLayout={({index}) => ({length: 50, offset: index * 50})}
         inverted={true}
         keyExtractor={(item, index) => item.id}
@@ -203,14 +203,14 @@ describe('VirtualizedList', () => {
     const infos = [];
     const component = ReactTestRenderer.create(
       <VirtualizedList
-        ItemSeparatorComponent={(props) => <separator {...props} />}
+        ItemSeparatorComponent={props => <separator {...props} />}
         data={[{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]}
-        renderItem={(info) => {
+        renderItem={info => {
           infos.push(info);
           return <item title={info.item.key} />;
         }}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -225,22 +225,22 @@ describe('VirtualizedList', () => {
     const component = ReactTestRenderer.create(
       <VirtualizedList
         data={[{key: 'outer0'}, {key: 'outer1'}]}
-        renderItem={(outerInfo) => (
+        renderItem={outerInfo => (
           <VirtualizedList
             data={[
               {key: outerInfo.item.key + ':inner0'},
               {key: outerInfo.item.key + ':inner1'},
             ]}
             horizontal={outerInfo.item.key === 'outer1'}
-            renderItem={(innerInfo) => {
+            renderItem={innerInfo => {
               return <item title={innerInfo.item.key} />;
             }}
             getItem={(data, index) => data[index]}
-            getItemCount={(data) => data.length}
+            getItemCount={data => data.length}
           />
         )}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -261,7 +261,7 @@ describe('VirtualizedList', () => {
       data,
       renderItem: ({item}) => <item value={item.key} />,
       getItem: (items, index) => items[index],
-      getItemCount: (items) => items.length,
+      getItemCount: items => items.length,
       getItemLayout: (items, index) => ({
         length: ITEM_HEIGHT,
         offset: ITEM_HEIGHT * index,
@@ -313,7 +313,7 @@ describe('VirtualizedList', () => {
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
         ref={listRef}
       />,
     );
@@ -331,22 +331,22 @@ describe('VirtualizedList', () => {
     ReactTestRenderer.create(
       <VirtualizedList
         data={[{key: 'outer0'}, {key: 'outer1'}]}
-        renderItem={(outerInfo) => (
+        renderItem={outerInfo => (
           <VirtualizedList
             data={[
               {key: outerInfo.item.key + ':inner0'},
               {key: outerInfo.item.key + ':inner1'},
             ]}
-            renderItem={(innerInfo) => {
+            renderItem={innerInfo => {
               return <item title={innerInfo.item.key} />;
             }}
             getItem={(data, index) => data[index]}
-            getItemCount={(data) => data.length}
+            getItemCount={data => data.length}
             ref={listRef}
           />
         )}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     const scrollRef = listRef.current.getScrollRef();
@@ -362,7 +362,7 @@ describe('VirtualizedList', () => {
     const layout = {width: 300, height: 600};
     let data = Array(20)
       .fill()
-      .map((_, key) => ({key: String(key)}));
+      .map((_, index) => ({key: `key-${index}`}));
     const onEndReached = jest.fn();
     const props = {
       data,
@@ -371,7 +371,7 @@ describe('VirtualizedList', () => {
       windowSize: 21,
       renderItem: ({item}) => <item value={item.key} />,
       getItem: (items, index) => items[index],
-      getItemCount: (items) => items.length,
+      getItemCount: items => items.length,
       getItemLayout: (items, index) => ({
         length: ITEM_HEIGHT,
         offset: ITEM_HEIGHT * index,
@@ -423,7 +423,7 @@ describe('VirtualizedList', () => {
     const commonProps = {
       data: [{key: 'cell0'}],
       getItem: (data, index) => data[index],
-      getItemCount: (data) => data.length,
+      getItemCount: data => data.length,
       renderItem: ({item}) => <item value={item.key} />,
     };
     try {
@@ -485,7 +485,7 @@ describe('VirtualizedList', () => {
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     const instance = component.getInstance();
@@ -501,7 +501,7 @@ describe('VirtualizedList', () => {
         data={[]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     const instance = component.getInstance();
@@ -517,7 +517,7 @@ describe('VirtualizedList', () => {
         data={[{key: 'i1'}, {key: 'i2'}, {key: 'i3'}]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, index) => data[index]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     const instance = component.getInstance();
@@ -862,7 +862,7 @@ it('does not adjust render area until content area layed out', () => {
   expect(component).toMatchSnapshot();
 });
 
-it('does not adjust render area with non-zero initialScrollIndex until scrolled', () => {
+it('adjusts render area with non-zero initialScrollIndex', () => {
   const items = generateItems(20);
   const ITEM_HEIGHT = 10;
 
@@ -885,18 +885,17 @@ it('does not adjust render area with non-zero initialScrollIndex until scrolled'
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
     });
+
     performAllBatches();
   });
 
-  // Layout information from before the time we scroll to initial index may not
-  // correspond to the area "initialScrollIndex" points to. Expect only the 5
-  // initial items (starting at initialScrollIndex) to be rendered after
-  // processing all batch work, even though the windowSize allows for more.
+  // We should expand the render area after receiving a message indcating we
+  // arrived at initialScrollIndex.
   expect(component).toMatchSnapshot();
 });
 
-it('adjusts render area with non-zero initialScrollIndex after scrolled', () => {
-  const items = generateItems(20);
+it('renders new items when data is updated with non-zero initialScrollIndex', () => {
+  const items = generateItems(2);
   const ITEM_HEIGHT = 10;
 
   let component;
@@ -918,13 +917,29 @@ it('adjusts render area with non-zero initialScrollIndex after scrolled', () =>
       viewport: {width: 10, height: 50},
       content: {width: 10, height: 200},
     });
+    performAllBatches();
+  });
+
+  const newItems = generateItems(4);
+
+  ReactTestRenderer.act(() => {
+    component.update(
+      <VirtualizedList
+        initialNumToRender={5}
+        initialScrollIndex={1}
+        windowSize={10}
+        maxToRenderPerBatch={10}
+        {...baseItemProps(newItems)}
+        {...fixedHeightItemLayoutProps(ITEM_HEIGHT)}
+      />,
+    );
+  });
 
-    simulateScroll(component, {x: 0, y: 10});
+  ReactTestRenderer.act(() => {
     performAllBatches();
   });
 
-  // We should expand the render area after receiving a message indcating we
-  // arrived at initialScrollIndex.
+  // We expect all the items to be rendered
   expect(component).toMatchSnapshot();
 });
 
@@ -1116,6 +1131,8 @@ it('retains batch render region when an item is appended', () => {
     performAllBatches();
   });
 
+  jest.runAllTimers();
+
   ReactTestRenderer.act(() => {
     component.update(
       <VirtualizedList
@@ -1365,6 +1382,7 @@ it('renders windowSize derived region at top', () => {
     performAllBatches();
   });
 
+  jest.runAllTimers();
   // A windowSize of 3 means that we should render a viewport's worth of content
   // above and below the current. A 20 dip viewport at the top of the list means
   // we should render the top 4 10-dip items (for the current viewport, and
@@ -1402,6 +1420,7 @@ it('renders windowSize derived region in middle', () => {
     performAllBatches();
   });
 
+  jest.runAllTimers();
   // A windowSize of 3 means that we should render a viewport's worth of content
   // above and below the current. A 20 dip viewport in the top of the list means
   // we should render the 6 10-dip items (for the current viewport, 20 dip above
@@ -1434,12 +1453,12 @@ it('renders windowSize derived region at bottom', () => {
     });
     performAllBatches();
   });
-
   ReactTestRenderer.act(() => {
     simulateScroll(component, {x: 0, y: 80});
     performAllBatches();
   });
 
+  jest.runAllTimers();
   // A windowSize of 3 means that we should render a viewport's worth of content
   // above and below the current. A 20 dip viewport at the bottom of the list
   // means we should render the bottom 4 10-dip items (for the current viewport,
@@ -1448,6 +1467,36 @@ it('renders windowSize derived region at bottom', () => {
   expect(component).toMatchSnapshot();
 });
 
+it('calls _onCellLayout properly', () => {
+  const items = [{key: 'i1'}, {key: 'i2'}, {key: 'i3'}];
+  const mock = jest.fn();
+  const component = ReactTestRenderer.create(
+    <VirtualizedList
+      data={items}
+      renderItem={({item}) => <item value={item.key} />}
+      getItem={(data, index) => data[index]}
+      getItemCount={data => data.length}
+    />,
+  );
+  const virtualList: VirtualizedList = component.getInstance();
+  virtualList._onCellLayout = mock;
+  component.update(
+    <VirtualizedList
+      data={[...items, {key: 'i4'}]}
+      renderItem={({item}) => <item value={item.key} />}
+      getItem={(data, index) => data[index]}
+      getItemCount={data => data.length}
+    />,
+  );
+  const cell = virtualList._cellRefs.i4;
+  const event = {
+    nativeEvent: {layout: {x: 0, y: 0, width: 50, height: 50}},
+  };
+  cell._onLayout(event);
+  expect(mock).toHaveBeenCalledWith(event, 'i4', 3);
+  expect(mock).not.toHaveBeenCalledWith(event, 'i3', 2);
+});
+
 function generateItems(count) {
   return Array(count)
     .fill()
@@ -1466,13 +1515,13 @@ function baseItemProps(items) {
     renderItem: ({item}) =>
       React.createElement('MockCellItem', {value: item.key, ...item}),
     getItem: (data, index) => data[index],
-    getItemCount: (data) => data.length,
+    getItemCount: data => data.length,
     stickyHeaderIndices: stickyHeaderIndices(items),
   };
 }
 
 function stickyHeaderIndices(items) {
-  return items.filter((item) => item.sticky).map((item) => item.key);
+  return items.filter(item => item.sticky).map(item => item.key);
 }
 
 function fixedHeightItemLayoutProps(height) {

package/Libraries/Lists/__tests__/{VirtualizedSectionList-test.windows.js → VirtualizedSectionList-test.js}

@@ -25,7 +25,7 @@ describe('VirtualizedSectionList', () => {
         ]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, key) => data[key]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -37,7 +37,7 @@ describe('VirtualizedSectionList', () => {
         sections={[]}
         renderItem={({item}) => <item value={item.key} />}
         getItem={(data, key) => data[key]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -51,7 +51,7 @@ describe('VirtualizedSectionList', () => {
         ListFooterComponent={() => <footer />}
         ListHeaderComponent={() => <header />}
         getItem={(data, key) => data[key]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
         renderItem={({item}) => <item value={item.key} />}
       />,
     );
@@ -64,7 +64,7 @@ describe('VirtualizedSectionList', () => {
         sections={[{title: 's1', data: [{key: 'hello'}]}]}
         ListEmptyComponent={() => <empty />}
         getItem={(data, key) => data[key]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
         renderItem={({item}) => <item value={item.key} />}
       />,
     );
@@ -85,7 +85,7 @@ describe('VirtualizedSectionList', () => {
           },
         ]}
         getItem={(data, key) => data[key]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
         getItemLayout={({index}) => ({
           index: -1,
           length: 50,
@@ -107,16 +107,16 @@ describe('VirtualizedSectionList', () => {
     ReactTestRenderer.act(() => {
       component = ReactTestRenderer.create(
         <VirtualizedSectionList
-          ItemSeparatorComponent={(props) => <separator {...props} />}
+          ItemSeparatorComponent={props => <separator {...props} />}
           sections={[
             {title: 's0', data: [{key: 'i0'}, {key: 'i1'}, {key: 'i2'}]},
           ]}
-          renderItem={(info) => {
+          renderItem={info => {
             infos.push(info);
             return <item title={info.item.key} />;
           }}
           getItem={(data, key) => data[key]}
-          getItemCount={(data) => data.length}
+          getItemCount={data => data.length}
         />,
       );
     });
@@ -140,7 +140,7 @@ describe('VirtualizedSectionList', () => {
     const component = ReactTestRenderer.create(
       <VirtualizedSectionList
         sections={[{title: 'outer', data: [{key: 'outer0'}, {key: 'outer1'}]}]}
-        renderItem={(outerInfo) => (
+        renderItem={outerInfo => (
           <VirtualizedSectionList
             sections={[
               {
@@ -152,15 +152,15 @@ describe('VirtualizedSectionList', () => {
               },
             ]}
             horizontal={outerInfo.item.key === 'outer1'}
-            renderItem={(innerInfo) => {
+            renderItem={innerInfo => {
               return <item title={innerInfo.item.key} />;
             }}
             getItem={(data, key) => data[key]}
-            getItemCount={(data) => data.length}
+            getItemCount={data => data.length}
           />
         )}
         getItem={(data, key) => data[key]}
-        getItemCount={(data) => data.length}
+        getItemCount={data => data.length}
       />,
     );
     expect(component).toMatchSnapshot();
@@ -169,7 +169,9 @@ describe('VirtualizedSectionList', () => {
   describe('scrollToLocation', () => {
     const ITEM_HEIGHT = 100;
 
-    const createVirtualizedSectionList = (props) => {
+    const createVirtualizedSectionList = (
+      props: void | $TEMPORARY$object<{stickySectionHeadersEnabled: boolean}>,
+    ) => {
       const component = ReactTestRenderer.create(
         <VirtualizedSectionList
           sections={[
@@ -178,7 +180,7 @@ describe('VirtualizedSectionList', () => {
           ]}
           renderItem={({item}) => <item value={item.key} />}
           getItem={(data, key) => data[key]}
-          getItemCount={(data) => data.length}
+          getItemCount={data => data.length}
           getItemLayout={(data, index) => ({
             length: ITEM_HEIGHT,
             offset: ITEM_HEIGHT * index,

package/Libraries/LogBox/Data/LogBoxData.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 
@@ -156,7 +156,7 @@ function appendNewLog(newLog) {
     // sybolication for up to a second before adding the log.
     const OPTIMISTIC_WAIT_TIME = 1000;
 
-    let addPendingLog = () => {
+    let addPendingLog: ?() => void = () => {
       logs.add(newLog);
       if (_selectedIndex < 0) {
         setSelectedLog(logs.size - 1);

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 

package/Libraries/LogBox/Data/LogBoxSymbolication.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow strict
  * @format
  */
 

package/Libraries/LogBox/LogBox.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict
  * @format
  */
 
@@ -75,24 +75,6 @@ if (__DEV__) {
       consoleErrorImpl = registerError;
       consoleWarnImpl = registerWarning;
 
-      if ((console: any).disableYellowBox === true) {
-        LogBoxData.setDisabled(true);
-        console.warn(
-          'console.disableYellowBox has been deprecated and will be removed in a future release. Please use LogBox.ignoreAllLogs(value) instead.',
-        );
-      }
-
-      (Object.defineProperty: any)(console, 'disableYellowBox', {
-        configurable: true,
-        get: () => LogBoxData.isDisabled(),
-        set: value => {
-          LogBoxData.setDisabled(value);
-          console.warn(
-            'console.disableYellowBox has been deprecated and will be removed in a future release. Please use LogBox.ignoreAllLogs(value) instead.',
-          );
-        },
-      });
-
       if (Platform.isTesting) {
         LogBoxData.setDisabled(true);
       }
@@ -115,7 +97,6 @@ if (__DEV__) {
       // After uninstalling:  original > LogBox (noop) > OtherErrorHandler
       consoleErrorImpl = originalConsoleError;
       consoleWarnImpl = originalConsoleWarn;
-      delete (console: any).disableLogBox;
     },
 
     isInstalled(): boolean {
@@ -153,7 +134,7 @@ if (__DEV__) {
     return typeof args[0] === 'string' && args[0].startsWith('(ADVICE)');
   };
 
-  const isWarningModuleWarning = (...args: any) => {
+  const isWarningModuleWarning = (...args: Array<mixed>) => {
     return typeof args[0] === 'string' && args[0].startsWith('Warning: ');
   };
 

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -69,6 +69,7 @@ function FooterButton(props: ButtonProps): React.Node {
 const buttonStyles = StyleSheet.create({
   safeArea: {
     flex: 1,
+    // $FlowFixMe[sketchy-null-bool]
     paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
   },
   content: {

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -18,6 +18,7 @@ import StatusBar from '../../Components/StatusBar/StatusBar';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import type {LogLevel} from '../Data/LogBoxLog';
+import type {ImageSource} from '../../Image/ImageSource';
 type Props = $ReadOnly<{|
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
@@ -91,7 +92,7 @@ const backgroundForLevel = (level: LogLevel) =>
 function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{|
     disabled: boolean,
-    image: number,
+    image: ImageSource,
     level: LogLevel,
     onPress?: ?() => void,
   |}>,