From 0ef0d3167e291f31ce01ceb729df77cc679d2330 Mon Sep 17 00:00:00 2001 From: Eli White Date: Sat, 7 Dec 2019 10:40:06 -0800 Subject: [PATCH] Remove IncrementalPresenter Summary: This component no longer has any internal callsites and was never exposed in the public API! Changelog: [General][Removed] Removing experimental IncrementalPresenter component Reviewed By: rickhanlonii Differential Revision: D18828704 fbshipit-source-id: 931254c4328b93b946a7995e7d9d44cb5aeb6a7b --- Libraries/Experimental/IncrementalExample.js | 202 ------------------ Libraries/Experimental/IncrementalGroup.js | 80 ------- .../Experimental/IncrementalPresenter.js | 102 --------- 3 files changed, 384 deletions(-) delete mode 100644 Libraries/Experimental/IncrementalExample.js delete mode 100644 Libraries/Experimental/IncrementalGroup.js delete mode 100644 Libraries/Experimental/IncrementalPresenter.js diff --git a/Libraries/Experimental/IncrementalExample.js b/Libraries/Experimental/IncrementalExample.js deleted file mode 100644 index cf94088afac12b..00000000000000 --- a/Libraries/Experimental/IncrementalExample.js +++ /dev/null @@ -1,202 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const React = require('react'); -const ReactNative = require('react-native'); -const { - InteractionManager, - ScrollView, - StyleSheet, - Text, - TouchableOpacity, - View, -} = ReactNative; - -const Incremental = require('./Incremental'); -const IncrementalGroup = require('./IncrementalGroup'); -const IncrementalPresenter = require('./IncrementalPresenter'); - -const JSEventLoopWatchdog = require('../Interaction/JSEventLoopWatchdog'); - -const performanceNow = require('fbjs/lib/performanceNow'); - -InteractionManager.setDeadline(1000); -JSEventLoopWatchdog.install({thresholdMS: 200}); - -let totalWidgets = 0; - -class SlowWidget extends React.Component< - $FlowFixMeProps, - { - ctorTimestamp: number, - timeToMount: number, - ... - }, -> { - constructor(props, context) { - super(props, context); - this.state = { - ctorTimestamp: performanceNow(), - timeToMount: 0, - }; - } - render() { - this.state.timeToMount === 0 && burnCPU(20); - return ( - - - {`${this.state.timeToMount || '?'} ms`} - - - ); - } - componentDidMount() { - const timeToMount = performanceNow() - this.state.ctorTimestamp; - this.setState({timeToMount}); - totalWidgets++; - } -} - -let imHandle; -function startInteraction() { - imHandle = InteractionManager.createInteractionHandle(); -} -function stopInteraction() { - InteractionManager.clearInteractionHandle(imHandle); -} - -function Block(props: Object) { - const IncrementalContainer = props.stream - ? IncrementalGroup - : IncrementalPresenter; - return ( - - - - - {props.idx + ': ' + (props.stream ? 'Streaming' : 'Presented')} - - {props.children} - - - - ); -} - -const Row = (props: Object) => ; - -class IncrementalExample extends React.Component { - static title: string = ''; - static description: string = - 'Enables incremental rendering of complex components.'; - start: number; - constructor(props: mixed, context: mixed) { - super(props, context); - this.start = performanceNow(); - this.state = { - stats: null, - }; - (this: any)._onDone = this._onDone.bind(this); - } - _onDone() { - const onDoneElapsed = performanceNow() - this.start; - setTimeout(() => { - const stats = { - onDoneElapsed, - totalWidgets, - ...JSEventLoopWatchdog.getStats(), - setTimeoutElapsed: performanceNow() - this.start, - }; - stats.avgStall = stats.totalStallTime / stats.stallCount; - this.setState({stats}); - console.log('onDone:', stats); - }, 0); - } - render(): React.Node { - return ( - - - - Press and hold on a row to pause rendering. - - {this.state.stats && ( - Finished: {JSON.stringify(this.state.stats, null, 2)} - )} - {Array(8) - .fill() - .map((_, blockIdx) => { - return ( - - {Array(4) - .fill() - .map((_b, rowIdx) => ( - - {Array(14) - .fill() - .map((_c, widgetIdx) => ( - - - - ))} - - ))} - - ); - })} - - - ); - } -} - -function burnCPU(milliseconds) { - const start = performanceNow(); - while (performanceNow() < start + milliseconds) {} -} - -const styles = StyleSheet.create({ - scrollView: { - margin: 10, - backgroundColor: 'white', - flex: 1, - }, - headerText: { - fontSize: 20, - margin: 10, - }, - block: { - borderRadius: 6, - borderWidth: 2, - borderColor: '#a52a2a', - padding: 14, - margin: 5, - backgroundColor: 'white', - }, - row: { - flexDirection: 'row', - }, - widgetContainer: { - backgroundColor: '#dddddd', - padding: 2, - margin: 2, - }, - widgetText: { - color: 'black', - fontSize: 4, - }, -}); - -module.exports = IncrementalExample; diff --git a/Libraries/Experimental/IncrementalGroup.js b/Libraries/Experimental/IncrementalGroup.js deleted file mode 100644 index 53f11d8d06f1b8..00000000000000 --- a/Libraries/Experimental/IncrementalGroup.js +++ /dev/null @@ -1,80 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const Incremental = require('./Incremental'); -const React = require('react'); - -const PropTypes = require('prop-types'); - -const infoLog = require('../Utilities/infoLog'); - -let _groupCounter = -1; -const DEBUG = false; - -import type {Props, Context} from './Incremental'; - -/** - * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will - * not be reliably announced. The whole thing might be deleted, who knows? Use - * at your own risk. - * - * `` components must be wrapped in an `` (e.g. - * via ``) in order to provide the incremental group - * context, otherwise they will do nothing. - * - * See Incremental.js for more info. - */ -class IncrementalGroup extends React.Component< - Props & {disabled?: boolean, ...}, -> { - context: Context; - _groupInc: string; - UNSAFE_componentWillMount() { - this._groupInc = `g${++_groupCounter}-`; - DEBUG && infoLog('create IncrementalGroup with id ' + this.getGroupId()); - } - - getGroupId(): string { - const ctx = this.context.incrementalGroup; - const prefix = ctx ? ctx.groupId + ':' : ''; - return prefix + this._groupInc + this.props.name; - } - - getChildContext(): Context { - if (this.props.disabled || this.context.incrementalGroupEnabled === false) { - return { - incrementalGroupEnabled: false, - incrementalGroup: null, - }; - } - return { - incrementalGroupEnabled: true, - incrementalGroup: { - groupId: this.getGroupId(), - incrementalCount: -1, - }, - }; - } - - render(): React.Node { - return ( - - ); - } -} -IncrementalGroup.contextTypes = { - incrementalGroup: PropTypes.object, - incrementalGroupEnabled: PropTypes.bool, -}; -IncrementalGroup.childContextTypes = IncrementalGroup.contextTypes; - -module.exports = IncrementalGroup; diff --git a/Libraries/Experimental/IncrementalPresenter.js b/Libraries/Experimental/IncrementalPresenter.js deleted file mode 100644 index 74e147e998b39d..00000000000000 --- a/Libraries/Experimental/IncrementalPresenter.js +++ /dev/null @@ -1,102 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; - -const IncrementalGroup = require('./IncrementalGroup'); -const PropTypes = require('prop-types'); -const React = require('react'); -const View = require('../Components/View/View'); - -import type {ViewStyleProp} from '../StyleSheet/StyleSheet'; -import type {LayoutEvent} from '../Types/CoreEventTypes'; -import type {Context} from './Incremental'; - -/** - * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will - * not be reliably announced. The whole thing might be deleted, who knows? Use - * at your own risk. - * - * `` can be used to group sets of `` renders - * such that they are initially invisible and removed from layout until all - * descendants have finished rendering, at which point they are drawn all at once - * so the UI doesn't jump around during the incremental rendering process. - * - * See Incremental.js for more info. - */ -type Props = $ReadOnly<{| - name: string, - disabled?: boolean, - onDone?: () => mixed, - onLayout?: (event: LayoutEvent) => mixed, - style?: ViewStyleProp, - children?: React.Node, -|}>; - -class IncrementalPresenter extends React.Component { - context: Context; - _isDone: boolean; - - static contextTypes: - | any - | {| - incrementalGroup: React$PropType$Primitive, - incrementalGroupEnabled: React$PropType$Primitive, - |} = { - incrementalGroup: PropTypes.object, - incrementalGroupEnabled: PropTypes.bool, - }; - - constructor(props: Props, context: Context) { - super(props, context); - this._isDone = false; - (this: any).onDone = this.onDone.bind(this); - } - onDone() { - this._isDone = true; - if ( - this.props.disabled !== true && - this.context.incrementalGroupEnabled !== false - ) { - // Avoid expensive re-renders and use setNativeProps - this.refs.view.setNativeProps({ - style: [this.props.style, {opacity: 1, position: 'relative'}], - }); - } - this.props.onDone && this.props.onDone(); - } - render(): React.Node { - let style: ViewStyleProp; - if ( - this.props.disabled !== true && - this.context.incrementalGroupEnabled !== false && - !this._isDone - ) { - style = [this.props.style, {opacity: 0, position: 'absolute'}]; - } else { - style = this.props.style; - } - return ( - - - - ); - } -} - -module.exports = IncrementalPresenter;