Permalink
Browse files

introduce universal switch

Reviewed By: @vjeux, @mkonicek

Differential Revision: D2441456

fb-gh-sync-id: c4050ec86f30234ea29c38205d668157bde65a35
  • Loading branch information...
sahrens authored and facebook-github-bot-4 committed Oct 6, 2015
1 parent 8f77487 commit 36cbe74f990369c793966b052bee4af3f2f4e401
Showing with 128 additions and 0 deletions.
  1. +127 −0 Libraries/Components/Switch/Switch.js
  2. +1 −0 Libraries/react-native/react-native.js
@@ -0,0 +1,127 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule Switch
* @flow
*/
'use strict';
var Platform = require('Platform');
var NativeMethodsMixin = require('NativeMethodsMixin');
var React = require('React');
var StyleSheet = require('StyleSheet');
var requireNativeComponent = require('requireNativeComponent');
type DefaultProps = {
value: boolean;
disabled: boolean;
};
/**
* Universal two-state toggle component.
*/
var Switch = React.createClass({
propTypes: {
/**
* The value of the switch. If true the switch will be turned on.
* Default value is false.
*/
value: React.PropTypes.bool,
/**
* If true the user won't be able to toggle the switch.
* Default value is false.
*/
disabled: React.PropTypes.bool,
/**
* Invoked with the new value when the value chages.
*/
onValueChange: React.PropTypes.func,
/**
* Used to locate this view in end-to-end tests.
*/
testID: React.PropTypes.string,
/**
* Background color when the switch is turned off.
* @platform ios
*/
tintColor: React.PropTypes.string,
/**
* Background color when the switch is turned on.
* @platform ios
*/
onTintColor: React.PropTypes.string,
/**
* Color of the foreground switch grip.
* @platform ios
*/
thumbTintColor: React.PropTypes.string,
},
getDefaultProps: function(): DefaultProps {
return {
value: false,
disabled: false,
};
},
mixins: [NativeMethodsMixin],
_rctSwitch: {},
_onChange: function(event: Object) {
this.props.onChange && this.props.onChange(event);
this.props.onValueChange && this.props.onValueChange(event.nativeEvent.value);
// The underlying switch might have changed, but we're controlled,
// and so want to ensure it represents our value.
if (Platform.OS === 'android') {
this._rctSwitch.setNativeProps({on: this.props.value});
} else {
this._rctSwitch.setNativeProps({value: this.props.value});
}
},
render: function() {
var props = {...this.props};
props.onStartShouldSetResponder = () => true;
props.onResponderTerminationRequest = () => false;
if (Platform.OS === 'android') {
props.enabled = !this.props.disabled;
props.on = this.props.value;
props.style = [styles.rctSwitchAndroid, this.props.style];
} else if (Platform.OS === 'ios') {
props.style = [styles.rctSwitchIOS, this.props.style];
}
return (
<RCTSwitch
{...props}
ref={(ref) => { this._rctSwitch = ref; }}
onChange={this._onChange}
/>
);
},
});
var styles = StyleSheet.create({
rctSwitchIOS: {
height: 31,
width: 51,
},
rctSwitchAndroid: {
height: 27,
width: 40,
},
});
if (Platform.OS === 'android') {
var RCTSwitch = requireNativeComponent('AndroidSwitch', null, {
nativeOnly: { onChange: true, on: true, enabled: true }
});
} else {
var RCTSwitch = requireNativeComponent('RCTSwitch', Switch, {
nativeOnly: { onChange: true }
});
}
module.exports = Switch;
@@ -35,6 +35,7 @@ var ReactNative = Object.assign(Object.create(require('React')), {
SegmentedControlIOS: require('SegmentedControlIOS'),
SliderIOS: require('SliderIOS'),
SnapshotView: require('SnapshotView'),
Switch: require('Switch'),
SwitchAndroid: require('SwitchAndroid'),
SwitchIOS: require('SwitchIOS'),
TabBarIOS: require('TabBarIOS'),

4 comments on commit 36cbe74

@mkonicek

This comment has been minimized.

Show comment
Hide comment
@mkonicek

mkonicek Oct 6, 2015

Contributor

👍 Thank you!

Contributor

mkonicek replied Oct 6, 2015

👍 Thank you!

@paramaggarwal

This comment has been minimized.

Show comment
Hide comment
@paramaggarwal

paramaggarwal Oct 7, 2015

Contributor

👍 Thanks!

Contributor

paramaggarwal replied Oct 7, 2015

👍 Thanks!

@hufeng

This comment has been minimized.

Show comment
Hide comment
@hufeng

hufeng replied Oct 17, 2015

thanks

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Oct 17, 2015

Contributor

We have a lot more of this planned, but progress has unfortunately been slower than we would like. Feel free to put up similar PRs for us to review.

Contributor

sahrens replied Oct 17, 2015

We have a lot more of this planned, but progress has unfortunately been slower than we would like. Feel free to put up similar PRs for us to review.

Please sign in to comment.