From dff17effe54dc58dda19fcc81ebacbd8f46e9005 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Thu, 9 Apr 2020 15:30:28 -0700 Subject: [PATCH] Move CheckBox JS files to FB Internal Summary: Move CheckBox JS files to FB internal ## Changelog: [General] [Removed] This diff removes the CheckBox export from React Native. Internally, we are requiring CheckBox directly now and externally people will have to use the community maintained module. Reviewed By: cpojer Differential Revision: D20910775 fbshipit-source-id: 809e135dc3f68911ac0a004e6eafa8488f0d5327 --- .../AndroidCheckBoxNativeComponent.js | 74 ------ .../Components/CheckBox/CheckBox.android.js | 228 ------------------ Libraries/Components/CheckBox/CheckBox.ios.js | 13 - .../js/examples/CheckBox/CheckBoxExample.js | 148 ------------ RNTester/js/utils/RNTesterList.android.js | 4 - index.js | 23 +- 6 files changed, 13 insertions(+), 477 deletions(-) delete mode 100644 Libraries/Components/CheckBox/AndroidCheckBoxNativeComponent.js delete mode 100644 Libraries/Components/CheckBox/CheckBox.android.js delete mode 100644 Libraries/Components/CheckBox/CheckBox.ios.js delete mode 100644 RNTester/js/examples/CheckBox/CheckBoxExample.js diff --git a/Libraries/Components/CheckBox/AndroidCheckBoxNativeComponent.js b/Libraries/Components/CheckBox/AndroidCheckBoxNativeComponent.js deleted file mode 100644 index 2afb9892690d05..00000000000000 --- a/Libraries/Components/CheckBox/AndroidCheckBoxNativeComponent.js +++ /dev/null @@ -1,74 +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. - * - * @flow strict-local - * @format - */ - -'use strict'; - -import * as React from 'react'; - -import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands'; - -const requireNativeComponent = require('../../ReactNative/requireNativeComponent'); - -import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes'; -import type {ViewProps} from '../View/ViewPropTypes'; -import type {SyntheticEvent} from '../../Types/CoreEventTypes'; -import type {ProcessedColorValue} from '../../StyleSheet/processColor'; - -type CheckBoxEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - value: boolean, - |}>, ->; - -type NativeProps = $ReadOnly<{| - ...ViewProps, - - /** - * Used in case the props change removes the component. - */ - onChange?: ?(event: CheckBoxEvent) => mixed, - - /** - * Invoked with the new value when the value changes. - */ - onValueChange?: ?(value: boolean) => mixed, - - /** - * Used to locate this view in end-to-end tests. - */ - testID?: ?string, - - on?: ?boolean, - enabled?: boolean, - tintColors: - | {| - true: ?ProcessedColorValue, - false: ?ProcessedColorValue, - |} - | typeof undefined, -|}>; - -type NativeType = HostComponent; - -interface NativeCommands { - +setNativeValue: ( - viewRef: React.ElementRef, - value: boolean, - ) => void; -} - -export const Commands: NativeCommands = codegenNativeCommands({ - supportedCommands: ['setNativeValue'], -}); - -export default (requireNativeComponent( - 'AndroidCheckBox', -): NativeType); diff --git a/Libraries/Components/CheckBox/CheckBox.android.js b/Libraries/Components/CheckBox/CheckBox.android.js deleted file mode 100644 index aed9cd9eb389c4..00000000000000 --- a/Libraries/Components/CheckBox/CheckBox.android.js +++ /dev/null @@ -1,228 +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. - * - * @flow strict-local - * @format - */ - -'use strict'; - -const React = require('react'); -const StyleSheet = require('../../StyleSheet/StyleSheet'); -const invariant = require('invariant'); -const processColor = require('../../StyleSheet/processColor'); - -const nullthrows = require('nullthrows'); -const setAndForwardRef = require('../../Utilities/setAndForwardRef'); - -import AndroidCheckBoxNativeComponent, { - Commands as AndroidCheckBoxCommands, -} from './AndroidCheckBoxNativeComponent'; - -import type {ViewProps} from '../View/ViewPropTypes'; -import type {SyntheticEvent} from '../../Types/CoreEventTypes'; -import type {ColorValue} from '../../StyleSheet/StyleSheetTypes'; - -type CheckBoxEvent = SyntheticEvent< - $ReadOnly<{| - target: number, - value: boolean, - |}>, ->; - -type CommonProps = $ReadOnly<{| - ...ViewProps, - - /** - * Used in case the props change removes the component. - */ - onChange?: ?(event: CheckBoxEvent) => mixed, - - /** - * Invoked with the new value when the value changes. - */ - onValueChange?: ?(value: boolean) => mixed, - - /** - * Used to locate this view in end-to-end tests. - */ - testID?: ?string, -|}>; - -type Props = $ReadOnly<{| - ...CommonProps, - - /** - * The value of the checkbox. If true the checkbox will be turned on. - * Default value is false. - */ - value?: ?boolean, - - /** - * If true the user won't be able to toggle the checkbox. - * Default value is false. - */ - disabled?: ?boolean, - - /** - * Used to get the ref for the native checkbox - */ - forwardedRef?: ?React.Ref, - - /** - * Controls the colors the checkbox has in checked and unchecked states. - */ - tintColors?: {|true?: ?ColorValue, false?: ?ColorValue|}, -|}>; - -/** - * Renders a boolean input (Android only). - * - * This is a controlled component that requires an `onValueChange` callback that - * updates the `value` prop in order for the component to reflect user actions. - * If the `value` prop is not updated, the component will continue to render - * the supplied `value` prop instead of the expected result of any user actions. - * - * ``` - * import React from 'react'; - * import { AppRegistry, StyleSheet, Text, View, CheckBox } from 'react-native'; - * - * export default class App extends React.Component { - * constructor(props) { - * super(props); - * this.state = { - * checked: false - * } - * } - * - * toggle() { - * this.setState(({checked}) => { - * return { - * checked: !checked - * }; - * }); - * } - * - * render() { - * const {checked} = this.state; - * return ( - * - * Checked - * - * - * ); - * } - * } - * - * const styles = StyleSheet.create({ - * container: { - * flex: 1, - * flexDirection: 'row', - * alignItems: 'center', - * justifyContent: 'center', - * }, - * }); - * - * // skip this line if using Create React Native App - * AppRegistry.registerComponent('App', () => App); - * ``` - * - * @keyword checkbox - * @keyword toggle - */ -class CheckBox extends React.Component { - _nativeRef: ?React.ElementRef = null; - _setNativeRef = setAndForwardRef({ - getForwardedRef: () => this.props.forwardedRef, - setLocalRef: ref => { - this._nativeRef = ref; - }, - }); - - _onChange = (event: CheckBoxEvent) => { - const value = this.props.value ?? false; - AndroidCheckBoxCommands.setNativeValue(nullthrows(this._nativeRef), value); - // Change the props after the native props are set in case the props - // change removes the component - this.props.onChange && this.props.onChange(event); - this.props.onValueChange && - this.props.onValueChange(event.nativeEvent.value); - }; - - _getTintColors(tintColors) { - if (tintColors) { - const processedTextColorTrue = processColor(tintColors.true); - invariant( - processedTextColorTrue == null || - typeof processedTextColorTrue === 'number', - 'Unexpected color given for tintColors.true', - ); - const processedTextColorFalse = processColor(tintColors.true); - invariant( - processedTextColorFalse == null || - typeof processedTextColorFalse === 'number', - 'Unexpected color given for tintColors.false', - ); - return { - true: processedTextColorTrue, - false: processedTextColorFalse, - }; - } else { - return undefined; - } - } - - render() { - const { - disabled: _, - value: __, - tintColors, - style, - forwardedRef, - ...props - } = this.props; - const disabled = this.props.disabled ?? false; - const value = this.props.value ?? false; - - const nativeProps = { - ...props, - onStartShouldSetResponder: () => true, - onResponderTerminationRequest: () => false, - enabled: !disabled, - on: value, - tintColors: this._getTintColors(tintColors), - style: [styles.rctCheckBox, style], - }; - return ( - - ); - } -} - -const styles = StyleSheet.create({ - rctCheckBox: { - height: 32, - width: 32, - }, -}); - -type CheckBoxType = React.AbstractComponent< - Props, - React.ElementRef, ->; - -const CheckBoxWithRef = React.forwardRef< - Props, - React.ElementRef, ->(function CheckBoxWithRef(props, ref) { - return ; -}); - -module.exports = (CheckBoxWithRef: CheckBoxType); diff --git a/Libraries/Components/CheckBox/CheckBox.ios.js b/Libraries/Components/CheckBox/CheckBox.ios.js deleted file mode 100644 index d3a201fce59c21..00000000000000 --- a/Libraries/Components/CheckBox/CheckBox.ios.js +++ /dev/null @@ -1,13 +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. - * - * @flow strict-local - * @format - */ - -'use strict'; - -module.exports = require('../UnimplementedViews/UnimplementedView'); diff --git a/RNTester/js/examples/CheckBox/CheckBoxExample.js b/RNTester/js/examples/CheckBox/CheckBoxExample.js deleted file mode 100644 index c9e795f638db07..00000000000000 --- a/RNTester/js/examples/CheckBox/CheckBoxExample.js +++ /dev/null @@ -1,148 +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. - * - * @flow - * @format - */ - -'use strict'; - -const React = require('react'); -const {CheckBox, Text, View, StyleSheet} = require('react-native'); - -type BasicState = {| - trueCheckBoxIsOn: boolean, - falseCheckBoxIsOn: boolean, -|}; - -type BasicProps = $ReadOnly<{||}>; -class BasicCheckBoxExample extends React.Component { - state = { - trueCheckBoxIsOn: true, - falseCheckBoxIsOn: false, - }; - - render() { - return ( - - this.setState({falseCheckBoxIsOn: value})} - style={styles.checkbox} - value={this.state.falseCheckBoxIsOn} - tintColors={{false: 'red'}} - /> - this.setState({trueCheckBoxIsOn: value})} - value={this.state.trueCheckBoxIsOn} - tintColors={{true: 'green'}} - /> - - ); - } -} - -type DisabledProps = $ReadOnly<{||}>; -class DisabledCheckBoxExample extends React.Component { - render() { - return ( - - - - - ); - } -} - -type EventProps = $ReadOnly<{||}>; -type EventState = {| - eventCheckBoxIsOn: boolean, - eventCheckBoxRegressionIsOn: boolean, -|}; - -class EventCheckBoxExample extends React.Component { - state = { - eventCheckBoxIsOn: false, - eventCheckBoxRegressionIsOn: true, - }; - - render() { - return ( - - - this.setState({eventCheckBoxIsOn: value})} - style={styles.checkbox} - value={this.state.eventCheckBoxIsOn} - /> - this.setState({eventCheckBoxIsOn: value})} - style={styles.checkbox} - value={this.state.eventCheckBoxIsOn} - /> - {this.state.eventCheckBoxIsOn ? 'On' : 'Off'} - - - - this.setState({eventCheckBoxRegressionIsOn: value}) - } - style={styles.checkbox} - value={this.state.eventCheckBoxRegressionIsOn} - /> - - this.setState({eventCheckBoxRegressionIsOn: value}) - } - style={styles.checkbox} - value={this.state.eventCheckBoxRegressionIsOn} - /> - {this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'} - - - ); - } -} - -const styles = StyleSheet.create({ - container: { - flexDirection: 'row', - justifyContent: 'space-around', - }, - checkbox: { - marginBottom: 10, - }, -}); - -exports.title = ''; -exports.displayName = 'CheckBoxExample'; -exports.description = 'Native boolean input'; -exports.examples = [ - { - title: - 'CheckBoxes can be set to true or false, and the color of both states can be specified.', - render(): React.Element { - return ; - }, - }, - { - title: 'CheckBoxes can be disabled', - render(): React.Element { - return ; - }, - }, - { - title: 'Change events can be detected', - render(): React.Element { - return ; - }, - }, - { - title: 'CheckBoxes are controlled components', - render(): React.Element { - return ; - }, - }, -]; diff --git a/RNTester/js/utils/RNTesterList.android.js b/RNTester/js/utils/RNTesterList.android.js index 1de9d42a00c7b6..66962af515439d 100644 --- a/RNTester/js/utils/RNTesterList.android.js +++ b/RNTester/js/utils/RNTesterList.android.js @@ -21,10 +21,6 @@ const ComponentExamples: Array = [ key: 'ButtonExample', module: require('../examples/Button/ButtonExample'), }, - { - key: 'CheckBoxExample', - module: require('../examples/CheckBox/CheckBoxExample'), - }, { key: 'FlatListExample', module: require('../examples/FlatList/FlatListExample'), diff --git a/index.js b/index.js index c8f7ae4656f156..944964c171fb37 100644 --- a/index.js +++ b/index.js @@ -13,7 +13,6 @@ import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo'; import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator'; import typeof Button from './Libraries/Components/Button'; -import typeof CheckBox from './Libraries/Components/CheckBox/CheckBox'; import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS'; import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid'; import typeof FlatList from './Libraries/Lists/FlatList'; @@ -121,15 +120,6 @@ module.exports = { get Button(): Button { return require('./Libraries/Components/Button'); }, - get CheckBox(): CheckBox { - warnOnce( - 'checkBox-moved', - 'CheckBox has been extracted from react-native core and will be removed in a future release. ' + - "It can now be installed and imported from '@react-native-community/checkbox' instead of 'react-native'. " + - 'See https://github.com/react-native-community/react-native-checkbox', - ); - return require('./Libraries/Components/CheckBox/CheckBox'); - }, get DatePickerIOS(): DatePickerIOS { warnOnce( 'DatePickerIOS-merged', @@ -650,4 +640,17 @@ if (__DEV__) { ); }, }); + + // $FlowFixMe This is intentional: Flow will error when attempting to access CheckBox. + Object.defineProperty(module.exports, 'CheckBox', { + configurable: true, + get() { + invariant( + false, + 'CheckBox has been removed from React Native. ' + + "It can now be installed and imported from '@react-native-community/checkbox' instead of 'react-native'. " + + 'See https://github.com/react-native-community/react-native-checkbox', + ); + }, + }); }