mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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
This commit is contained in:
Lauren Tan
committed by
Facebook GitHub Bot
Facebook GitHub Bot
parent
449dc37720
commit
dff17effe5
@@ -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<NativeProps>;
|
||||
|
||||
interface NativeCommands {
|
||||
+setNativeValue: (
|
||||
viewRef: React.ElementRef<NativeType>,
|
||||
value: boolean,
|
||||
) => void;
|
||||
}
|
||||
|
||||
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
|
||||
supportedCommands: ['setNativeValue'],
|
||||
});
|
||||
|
||||
export default (requireNativeComponent<NativeProps>(
|
||||
'AndroidCheckBox',
|
||||
): NativeType);
|
||||
@@ -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<typeof AndroidCheckBoxNativeComponent>,
|
||||
|
||||
/**
|
||||
* 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 (
|
||||
* <View style={styles.container}>
|
||||
* <Text>Checked</Text>
|
||||
* <CheckBox value={checked} onChange={this.toggle.bind(this)} />
|
||||
* </View>
|
||||
* );
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* 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<Props> {
|
||||
_nativeRef: ?React.ElementRef<typeof AndroidCheckBoxNativeComponent> = 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 (
|
||||
<AndroidCheckBoxNativeComponent
|
||||
{...nativeProps}
|
||||
ref={this._setNativeRef}
|
||||
onChange={this._onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
rctCheckBox: {
|
||||
height: 32,
|
||||
width: 32,
|
||||
},
|
||||
});
|
||||
|
||||
type CheckBoxType = React.AbstractComponent<
|
||||
Props,
|
||||
React.ElementRef<typeof AndroidCheckBoxNativeComponent>,
|
||||
>;
|
||||
|
||||
const CheckBoxWithRef = React.forwardRef<
|
||||
Props,
|
||||
React.ElementRef<typeof AndroidCheckBoxNativeComponent>,
|
||||
>(function CheckBoxWithRef(props, ref) {
|
||||
return <CheckBox {...props} forwardedRef={ref} />;
|
||||
});
|
||||
|
||||
module.exports = (CheckBoxWithRef: CheckBoxType);
|
||||
@@ -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');
|
||||
@@ -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<BasicProps, BasicState> {
|
||||
state = {
|
||||
trueCheckBoxIsOn: true,
|
||||
falseCheckBoxIsOn: false,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<CheckBox
|
||||
onValueChange={value => this.setState({falseCheckBoxIsOn: value})}
|
||||
style={styles.checkbox}
|
||||
value={this.state.falseCheckBoxIsOn}
|
||||
tintColors={{false: 'red'}}
|
||||
/>
|
||||
<CheckBox
|
||||
onValueChange={value => this.setState({trueCheckBoxIsOn: value})}
|
||||
value={this.state.trueCheckBoxIsOn}
|
||||
tintColors={{true: 'green'}}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
type DisabledProps = $ReadOnly<{||}>;
|
||||
class DisabledCheckBoxExample extends React.Component<DisabledProps> {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<CheckBox disabled={true} style={styles.checkbox} value={true} />
|
||||
<CheckBox disabled={true} value={false} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
type EventProps = $ReadOnly<{||}>;
|
||||
type EventState = {|
|
||||
eventCheckBoxIsOn: boolean,
|
||||
eventCheckBoxRegressionIsOn: boolean,
|
||||
|};
|
||||
|
||||
class EventCheckBoxExample extends React.Component<EventProps, EventState> {
|
||||
state = {
|
||||
eventCheckBoxIsOn: false,
|
||||
eventCheckBoxRegressionIsOn: true,
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<View>
|
||||
<CheckBox
|
||||
onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
|
||||
style={styles.checkbox}
|
||||
value={this.state.eventCheckBoxIsOn}
|
||||
/>
|
||||
<CheckBox
|
||||
onValueChange={value => this.setState({eventCheckBoxIsOn: value})}
|
||||
style={styles.checkbox}
|
||||
value={this.state.eventCheckBoxIsOn}
|
||||
/>
|
||||
<Text>{this.state.eventCheckBoxIsOn ? 'On' : 'Off'}</Text>
|
||||
</View>
|
||||
<View>
|
||||
<CheckBox
|
||||
onValueChange={value =>
|
||||
this.setState({eventCheckBoxRegressionIsOn: value})
|
||||
}
|
||||
style={styles.checkbox}
|
||||
value={this.state.eventCheckBoxRegressionIsOn}
|
||||
/>
|
||||
<CheckBox
|
||||
onValueChange={value =>
|
||||
this.setState({eventCheckBoxRegressionIsOn: value})
|
||||
}
|
||||
style={styles.checkbox}
|
||||
value={this.state.eventCheckBoxRegressionIsOn}
|
||||
/>
|
||||
<Text>{this.state.eventCheckBoxRegressionIsOn ? 'On' : 'Off'}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-around',
|
||||
},
|
||||
checkbox: {
|
||||
marginBottom: 10,
|
||||
},
|
||||
});
|
||||
|
||||
exports.title = '<CheckBox>';
|
||||
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<any> {
|
||||
return <BasicCheckBoxExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CheckBoxes can be disabled',
|
||||
render(): React.Element<any> {
|
||||
return <DisabledCheckBoxExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Change events can be detected',
|
||||
render(): React.Element<any> {
|
||||
return <EventCheckBoxExample />;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'CheckBoxes are controlled components',
|
||||
render(): React.Element<any> {
|
||||
return <CheckBox />;
|
||||
},
|
||||
},
|
||||
];
|
||||
@@ -21,10 +21,6 @@ const ComponentExamples: Array<RNTesterExample> = [
|
||||
key: 'ButtonExample',
|
||||
module: require('../examples/Button/ButtonExample'),
|
||||
},
|
||||
{
|
||||
key: 'CheckBoxExample',
|
||||
module: require('../examples/CheckBox/CheckBoxExample'),
|
||||
},
|
||||
{
|
||||
key: 'FlatListExample',
|
||||
module: require('../examples/FlatList/FlatListExample'),
|
||||
|
||||
@@ -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',
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user