react-native 0.0.0-17be3a003 → 0.0.0-18697adec

package/Libraries/Lists/VirtualizedSectionList.js

@@ -8,17 +8,11 @@
  * @format
  */
 
-'use strict';
-
-const React = require('react');
-const View = require('../Components/View/View');
-const VirtualizedList = require('./VirtualizedList');
-
-const invariant = require('invariant');
-
+import invariant from 'invariant';
 import type {ViewToken} from './ViewabilityHelper';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
-import VirtualizedSectionListInjection from './VirtualizedSectionListInjection';
+import {View, VirtualizedList} from 'react-native';
+import * as React from 'react';
 
 type Item = any;
 
@@ -386,11 +380,13 @@ class VirtualizedSectionList<
           item={item}
           leadingItem={info.leadingItem}
           leadingSection={info.leadingSection}
-          onUpdateSeparator={this._onUpdateSeparator}
           prevCellKey={(this._subExtractor(index - 1) || {}).key}
-          ref={ref => {
-            this._cellRefs[info.key] = ref;
-          }}
+          // Callback to provide updateHighlight for this item
+          setSelfHighlightCallback={this._setUpdateHighlightFor}
+          setSelfUpdatePropsCallback={this._setUpdatePropsFor}
+          // Provide child ability to set highlight/updateProps for previous item using prevCellKey
+          updateHighlightFor={this._updateHighlightFor}
+          updatePropsFor={this._updatePropsFor}
           renderItem={renderItem}
           section={info.section}
           trailingItem={info.trailingItem}
@@ -401,9 +397,34 @@ class VirtualizedSectionList<
     }
   };
 
-  _onUpdateSeparator = (key: string, newProps: Object) => {
-    const ref = this._cellRefs[key];
-    ref && ref.updateSeparatorProps(newProps);
+  _updatePropsFor = (cellKey, value) => {
+    const updateProps = this._updatePropsMap[cellKey];
+    if (updateProps != null) {
+      updateProps(value);
+    }
+  };
+
+  _updateHighlightFor = (cellKey, value) => {
+    const updateHighlight = this._updateHighlightMap[cellKey];
+    if (updateHighlight != null) {
+      updateHighlight(value);
+    }
+  };
+
+  _setUpdateHighlightFor = (cellKey, updateHighlightFn) => {
+    if (updateHighlightFn != null) {
+      this._updateHighlightMap[cellKey] = updateHighlightFn;
+    } else {
+      delete this._updateHighlightFor[cellKey];
+    }
+  };
+
+  _setUpdatePropsFor = (cellKey, updatePropsFn) => {
+    if (updatePropsFn != null) {
+      this._updatePropsMap[cellKey] = updatePropsFn;
+    } else {
+      delete this._updatePropsMap[cellKey];
+    }
   };
 
   _getSeparatorComponent(
@@ -430,7 +451,8 @@ class VirtualizedSectionList<
     return null;
   }
 
-  _cellRefs = {};
+  _updateHighlightMap = {};
+  _updatePropsMap = {};
   _listRef: ?React.ElementRef<typeof VirtualizedList>;
   _captureRef = ref => {
     this._listRef = ref;
@@ -452,142 +474,143 @@ type ItemWithSeparatorProps = $ReadOnly<{|
   cellKey: string,
   index: number,
   item: Item,
-  onUpdateSeparator: (cellKey: string, newProps: Object) => void,
+  setSelfHighlightCallback: (
+    cellKey: string,
+    updateFn: ?(boolean) => void,
+  ) => void,
+  setSelfUpdatePropsCallback: (
+    cellKey: string,
+    updateFn: ?(boolean) => void,
+  ) => void,
   prevCellKey?: ?string,
+  updateHighlightFor: (prevCellKey: string, value: boolean) => void,
+  updatePropsFor: (prevCellKey: string, value: Object) => void,
   renderItem: Function,
   inverted: boolean,
 |}>;
 
-type ItemWithSeparatorState = {
-  separatorProps: $ReadOnly<{|
-    highlighted: false,
-    ...ItemWithSeparatorCommonProps,
-  |}>,
-  leadingSeparatorProps: $ReadOnly<{|
-    highlighted: false,
-    ...ItemWithSeparatorCommonProps,
-  |}>,
-  ...
-};
-
-class ItemWithSeparator extends React.Component<
-  ItemWithSeparatorProps,
-  ItemWithSeparatorState,
-> {
-  state = {
-    separatorProps: {
-      highlighted: false,
-      leadingItem: this.props.item,
-      leadingSection: this.props.leadingSection,
-      section: this.props.section,
-      trailingItem: this.props.trailingItem,
-      trailingSection: this.props.trailingSection,
-    },
-    leadingSeparatorProps: {
-      highlighted: false,
-      leadingItem: this.props.leadingItem,
-      leadingSection: this.props.leadingSection,
-      section: this.props.section,
-      trailingItem: this.props.item,
-      trailingSection: this.props.trailingSection,
-    },
-  };
-
-  _separators = {
+function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
+  const {
+    LeadingSeparatorComponent,
+    // this is the trailing separator and is associated with this item
+    SeparatorComponent,
+    cellKey,
+    prevCellKey,
+    setSelfHighlightCallback,
+    updateHighlightFor,
+    setSelfUpdatePropsCallback,
+    updatePropsFor,
+    item,
+    index,
+    section,
+    inverted,
+  } = props;
+
+  const [
+    leadingSeparatorHiglighted,
+    setLeadingSeparatorHighlighted,
+  ] = React.useState(false);
+
+  const [separatorHighlighted, setSeparatorHighlighted] = React.useState(false);
+
+  const [leadingSeparatorProps, setLeadingSeparatorProps] = React.useState({
+    leadingItem: props.leadingItem,
+    leadingSection: props.leadingSection,
+    section: props.section,
+    trailingItem: props.item,
+    trailingSection: props.trailingSection,
+  });
+  const [separatorProps, setSeparatorProps] = React.useState({
+    leadingItem: props.item,
+    leadingSection: props.leadingSection,
+    section: props.section,
+    trailingItem: props.trailingItem,
+    trailingSection: props.trailingSection,
+  });
+
+  React.useEffect(() => {
+    setSelfHighlightCallback(cellKey, setSeparatorHighlighted);
+    setSelfUpdatePropsCallback(cellKey, setSeparatorProps);
+
+    return () => {
+      setSelfUpdatePropsCallback(cellKey, null);
+      setSelfHighlightCallback(cellKey, null);
+    };
+  }, [
+    cellKey,
+    setSelfHighlightCallback,
+    setSeparatorProps,
+    setSelfUpdatePropsCallback,
+  ]);
+
+  const separators = {
     highlight: () => {
-      ['leading', 'trailing'].forEach(s =>
-        this._separators.updateProps(s, {highlighted: true}),
-      );
+      setLeadingSeparatorHighlighted(true);
+      setSeparatorHighlighted(true);
+      if (prevCellKey != null) {
+        updateHighlightFor(prevCellKey, true);
+      }
     },
     unhighlight: () => {
-      ['leading', 'trailing'].forEach(s =>
-        this._separators.updateProps(s, {highlighted: false}),
-      );
+      setLeadingSeparatorHighlighted(false);
+      setSeparatorHighlighted(false);
+      if (prevCellKey != null) {
+        updateHighlightFor(prevCellKey, false);
+      }
     },
-    updateProps: (select: 'leading' | 'trailing', newProps: Object) => {
-      const {LeadingSeparatorComponent, cellKey, prevCellKey} = this.props;
-      if (select === 'leading' && LeadingSeparatorComponent != null) {
-        this.setState(state => ({
-          leadingSeparatorProps: {...state.leadingSeparatorProps, ...newProps},
-        }));
-      } else {
-        this.props.onUpdateSeparator(
-          (select === 'leading' && prevCellKey) || cellKey,
-          newProps,
-        );
+    updateProps: (
+      select: 'leading' | 'trailing',
+      newProps: $Shape<ItemWithSeparatorCommonProps>,
+    ) => {
+      if (select === 'leading') {
+        if (LeadingSeparatorComponent != null) {
+          setLeadingSeparatorProps({...leadingSeparatorProps, ...newProps});
+        } else if (prevCellKey != null) {
+          // update the previous item's separator
+          updatePropsFor(prevCellKey, {...leadingSeparatorProps, ...newProps});
+        }
+      } else if (select === 'trailing' && SeparatorComponent != null) {
+        setSeparatorProps({...separatorProps, ...newProps});
       }
     },
   };
-
-  static getDerivedStateFromProps(
-    props: ItemWithSeparatorProps,
-    prevState: ItemWithSeparatorState,
-  ): ?ItemWithSeparatorState {
-    return {
-      separatorProps: {
-        ...prevState.separatorProps,
-        leadingItem: props.item,
-        leadingSection: props.leadingSection,
-        section: props.section,
-        trailingItem: props.trailingItem,
-        trailingSection: props.trailingSection,
-      },
-      leadingSeparatorProps: {
-        ...prevState.leadingSeparatorProps,
-        leadingItem: props.leadingItem,
-        leadingSection: props.leadingSection,
-        section: props.section,
-        trailingItem: props.item,
-        trailingSection: props.trailingSection,
-      },
-    };
-  }
-
-  updateSeparatorProps(newProps: Object) {
-    this.setState(state => ({
-      separatorProps: {...state.separatorProps, ...newProps},
-    }));
-  }
-
-  render() {
-    const {
-      LeadingSeparatorComponent,
-      SeparatorComponent,
-      item,
-      index,
-      section,
-      inverted,
-    } = this.props;
-    const element = this.props.renderItem({
-      item,
-      index,
-      section,
-      separators: this._separators,
-    });
-    const leadingSeparator = LeadingSeparatorComponent != null && (
-      <LeadingSeparatorComponent {...this.state.leadingSeparatorProps} />
-    );
-    const separator = SeparatorComponent != null && (
-      <SeparatorComponent {...this.state.separatorProps} />
-    );
-    return leadingSeparator || separator ? (
-      <View>
-        {inverted === false ? leadingSeparator : separator}
-        {element}
-        {inverted === false ? separator : leadingSeparator}
-      </View>
-    ) : (
-      element
-    );
-  }
+  const element = props.renderItem({
+    item,
+    index,
+    section,
+    separators,
+  });
+  const leadingSeparator = LeadingSeparatorComponent != null && (
+    <LeadingSeparatorComponent
+      highlighted={leadingSeparatorHiglighted}
+      {...leadingSeparatorProps}
+    />
+  );
+  const separator = SeparatorComponent != null && (
+    <SeparatorComponent
+      highlighted={separatorHighlighted}
+      {...separatorProps}
+    />
+  );
+  return leadingSeparator || separator ? (
+    <View>
+      {inverted === false ? leadingSeparator : separator}
+      {element}
+      {inverted === false ? separator : leadingSeparator}
+    </View>
+  ) : (
+    element
+  );
 }
 
-const VSLToExport: React.AbstractComponent<
+/* $FlowFixMe[class-object-subtyping] added when improving typing for this
+ * parameters */
+// $FlowFixMe[method-unbinding]
+module.exports = (VirtualizedSectionList: React.AbstractComponent<
   React.ElementConfig<typeof VirtualizedSectionList>,
   $ReadOnly<{
     getListRef: () => ?React.ElementRef<typeof VirtualizedList>,
     scrollToLocation: (params: ScrollToLocationParamsType) => void,
     ...
   }>,
-> = VirtualizedSectionListInjection.unstable_VSL ?? VirtualizedSectionList;
-module.exports = VSLToExport;
+>);

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

@@ -75,7 +75,7 @@ module.exports = {
     ];
   },
 
-  testBadInheritedDefaultProp(): React.Element<*> {
+  testBadInheritedDefaultProp(): React.MixedElement {
     const sections = [];
     return (
       <SectionList
@@ -87,12 +87,12 @@ module.exports = {
     );
   },
 
-  testMissingData(): React.Element<*> {
+  testMissingData(): React.MixedElement {
     // $FlowExpectedError - missing `sections` prop
     return <SectionList renderItem={renderMyListItem} />;
   },
 
-  testBadSectionsShape(): React.Element<*> {
+  testBadSectionsShape(): React.MixedElement {
     const sections = [
       {
         key: 'a',
@@ -108,7 +108,7 @@ module.exports = {
     return <SectionList renderItem={renderMyListItem} sections={sections} />;
   },
 
-  testBadSectionsMetadata(): React.Element<*> {
+  testBadSectionsMetadata(): React.MixedElement {
     const sections = [
       {
         key: 'a',

package/Libraries/LogBox/Data/LogBoxData.js

@@ -21,7 +21,7 @@ import type {
   ExtendedExceptionData,
 } from './parseLogBoxLog';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
-import type {ExtendedError} from '../../Core/Devtools/parseErrorStack';
+import type {ExtendedError} from '../../Core/ExtendedError';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
 export type LogBoxLogs = Set<LogBoxLog>;
 export type LogData = $ReadOnly<{|
@@ -320,40 +320,40 @@ export function checkWarningFilter(format: string): WarningInfo {
   return warningFilter(format);
 }
 
+export function getIgnorePatterns(): $ReadOnlyArray<IgnorePattern> {
+  return Array.from(ignorePatterns);
+}
+
 export function addIgnorePatterns(
   patterns: $ReadOnlyArray<IgnorePattern>,
 ): void {
+  const existingSize = ignorePatterns.size;
   // The same pattern may be added multiple times, but adding a new pattern
   // can be expensive so let's find only the ones that are new.
-  const newPatterns = patterns.filter((pattern: IgnorePattern) => {
+  patterns.forEach((pattern: IgnorePattern) => {
     if (pattern instanceof RegExp) {
-      for (const existingPattern of ignorePatterns.entries()) {
+      for (const existingPattern of ignorePatterns) {
         if (
           existingPattern instanceof RegExp &&
           existingPattern.toString() === pattern.toString()
         ) {
-          return false;
+          return;
         }
       }
-      return true;
+      ignorePatterns.add(pattern);
     }
-    return !ignorePatterns.has(pattern);
+    ignorePatterns.add(pattern);
   });
-
-  if (newPatterns.length === 0) {
+  if (ignorePatterns.size === existingSize) {
     return;
   }
-  for (const pattern of newPatterns) {
-    ignorePatterns.add(pattern);
-
-    // We need to recheck all of the existing logs.
-    // This allows adding an ignore pattern anywhere in the codebase.
-    // Without this, if you ignore a pattern after the a log is created,
-    // then we would keep showing the log.
-    logs = new Set(
-      Array.from(logs).filter(log => !isMessageIgnored(log.message.content)),
-    );
-  }
+  // We need to recheck all of the existing logs.
+  // This allows adding an ignore pattern anywhere in the codebase.
+  // Without this, if you ignore a pattern after the a log is created,
+  // then we would keep showing the log.
+  logs = new Set(
+    Array.from(logs).filter(log => !isMessageIgnored(log.message.content)),
+  );
   handleUpdate();
 }
 
@@ -407,6 +407,8 @@ export function withSubscription(
     }
 
     componentDidCatch(err: Error, errorInfo: {componentStack: string, ...}) {
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
       reportLogBoxError(err, errorInfo.componentStack);
     }