status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[ReactNative] OSS DatePicker

This commit is contained in:
Spencer Ahrens 2015-03-06 17:13:18 -08:00
parent b335f88efd
commit 444e3e703f
8 changed files with 378 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
Examples/UIExplorer/DatePickerExample.js Normal file
View File

@ -0,0 +1,157 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule DatePickerExample
*/
'use strict';
var React = require('react-native');
var {
DatePickerIOS,
StyleSheet,
Text,
TextInput,
View,
} = React;
var DatePickerExample = React.createClass({
getDefaultProps: function () {
return {
date: new Date(),
timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
};
},
getInitialState: function() {
return {
date: this.props.date,
timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
};
},
onDateChange: function(date) {
this.setState({date: date});
},
onTimezoneChange: function(event) {
var offset = parseInt(event.nativeEvent.text, 10);
if (isNaN(offset)) {
return;
}
this.setState({timeZoneOffsetInHours: offset});
},
render: function() {
// Ideally, the timezone input would be a picker rather than a
// text input, but we don't have any pickers yet :(
return (
<View>
<WithLabel label="Value:">
<Text>{
this.state.date.toLocaleDateString() +
' ' +
this.state.date.toLocaleTimeString()
}</Text>
</WithLabel>
<WithLabel label="Timezone:">
<TextInput
onChange={this.onTimezoneChange}
style={styles.textinput}
value={this.state.timeZoneOffsetInHours.toString()}
/>
<Text> hours from UTC</Text>
</WithLabel>
<Heading label="Date + time picker" />
<DatePickerIOS
date={this.state.date}
mode="datetime"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
<Heading label="Date picker" />
<DatePickerIOS
date={this.state.date}
mode="date"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
<Heading label="Time picker, 10-minute interval" />
<DatePickerIOS
date={this.state.date}
mode="time"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
minuteInterval={10}
/>
</View>
);
},
});
var WithLabel = React.createClass({
render: function() {
return (
<View style={styles.labelContainer}>
<View style={styles.labelView}>
<Text style={styles.label}>
{this.props.label}
</Text>
</View>
{this.props.children}
</View>
);
}
});
var Heading = React.createClass({
render: function() {
return (
<View style={styles.headingContainer}>
<Text style={styles.heading}>
{this.props.label}
</Text>
</View>
);
}
});
exports.title = '<DatePickerIOS>';
exports.description = 'Select dates and times using the native UIDatePicker.';
exports.examples = [
{
title: '<DatePickerIOS>',
render: function() {
return <DatePickerExample />;
},
}];
var styles = StyleSheet.create({
textinput: {
height: 26,
width: 50,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
fontSize: 13,
},
labelContainer: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 2,
},
labelView: {
marginRight: 10,
paddingVertical: 2,
},
label: {
fontWeight: 'bold',
},
headingContainer: {
padding: 4,
backgroundColor: '#f6f7f8',
},
heading: {
fontWeight: 'bold',
fontSize: 14,
},
});

1
Examples/UIExplorer/UIExplorerList.js
View File

@ -31,6 +31,7 @@ var EXAMPLES = [
require('./TouchableExample'),
require('./ActivityIndicatorExample'),
require('./ScrollViewExample'),
require('./DatePickerExample'),
require('./GeoLocationExample'),
require('./TabBarExample'),
];

155
Libraries/Components/DatePicker/DatePickerIOS.ios.js Normal file
View File

@ -0,0 +1,155 @@
/**
* Copyright 2004-present Facebook. All Rights Reserved.
*
* @providesModule DatePickerIOS
*
* This is a controlled component version of RKDatePickerIOS
*/
'use strict';
var NativeMethodsMixin = require('NativeMethodsMixin');
var PropTypes = require('ReactPropTypes');
var React = require('React');
var ReactIOSViewAttributes = require('ReactIOSViewAttributes');
var RKDatePickerIOSConsts = require('NativeModules').RKUIManager.RCTDatePicker.Constants;
var StyleSheet = require('StyleSheet');
var View = require('View');
var createReactIOSNativeComponentClass =
require('createReactIOSNativeComponentClass');
var merge = require('merge');
var DATEPICKER = 'datepicker';
/**
* Use `DatePickerIOS` to render a date/time picker (selector) on iOS. This is
* a controlled component, so you must hook in to the `onDateChange` callback
* and update the `date` prop in order for the component to update, otherwise
* the user's change will be reverted immediately to reflect `props.date` as the
* source of truth.
*/
var DatePickerIOS = React.createClass({
mixins: [NativeMethodsMixin],
propTypes: {
/**
* The currently selected date.
*/
date: PropTypes.instanceOf(Date).isRequired,
/**
* Date change handler.
*
* This is called when the user changes the date or time in the UI.
* The first and only argument is a Date object representing the new
* date and time.
*/
onDateChange: PropTypes.func.isRequired,
/**
* Maximum date.
*
* Restricts the range of possible date/time values.
*/
maximumDate: PropTypes.instanceOf(Date),
/**
* Minimum date.
*
* Restricts the range of possible date/time values.
*/
minimumDate: PropTypes.instanceOf(Date),
/**
* The date picker mode.
*
* Valid modes on iOS are: 'date', 'time', 'datetime'.
*/
mode: PropTypes.oneOf(Object.keys(RKDatePickerIOSConsts.DatePickerModes)),
/**
* The interval at which minutes can be selected.
*/
minuteInterval: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30]),
/**
* Timezone offset in seconds.
*
* By default, the date picker will use the device's timezone. With this
* parameter, it is possible to force a certain timezone offset. For
* instance, to show times in Pacific Standard Time, pass -7 * 60.
*/
timeZoneOffsetInMinutes: PropTypes.number,
},
getDefaultProps: function() {
return {
mode: 'datetime',
};
},
_onChange: function(event) {
var nativeTimeStamp = event.nativeEvent.timestamp;
this.props.onDateChange && this.props.onDateChange(
new Date(nativeTimeStamp)
);
this.props.onChange && this.props.onChange(event);
// We expect the onChange* handlers to be in charge of updating our `date`
// prop. That way they can also disallow/undo/mutate the selection of
// certain values. In other words, the embedder of this component should
// be the source of truth, not the native component.
var propsTimeStamp = this.props.date.getTime();
if (nativeTimeStamp !== propsTimeStamp) {
this.refs[DATEPICKER].setNativeProps({
date: propsTimeStamp,
});
}
},
render: function() {
var props = this.props;
return (
<View style={props.style}>
<RKDatePickerIOS
ref={DATEPICKER}
style={styles.rkDatePickerIOS}
date={props.date.getTime()}
maximumDate={
props.maximumDate ? props.maximumDate.getTime() : undefined
}
minimumDate={
props.minimumDate ? props.minimumDate.getTime() : undefined
}
mode={RKDatePickerIOSConsts.DatePickerModes[props.mode]}
minuteInterval={props.minuteInterval}
timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
onChange={this._onChange}
/>
</View>
);
}
});
var styles = StyleSheet.create({
rkDatePickerIOS: {
height: RKDatePickerIOSConsts.ComponentHeight,
width: RKDatePickerIOSConsts.ComponentWidth,
},
});
var rkDatePickerIOSAttributes = merge(ReactIOSViewAttributes.UIView, {
date: true,
maximumDate: true,
minimumDate: true,
mode: true,
minuteInterval: true,
timeZoneOffsetInMinutes: true,
});
var RKDatePickerIOS = createReactIOSNativeComponentClass({
validAttributes: rkDatePickerIOSAttributes,
uiViewClassName: 'RCTDatePicker',
});
module.exports = DatePickerIOS;

1
Libraries/react-native/react-native.js vendored
View File

@ -8,6 +8,7 @@
var ReactNative = {
...require('React'),
AppRegistry: require('AppRegistry'),
DatePickerIOS: require('DatePickerIOS'),
ExpandingText: require('ExpandingText'),
Image: require('Image'),
LayoutAnimation: require('LayoutAnimation'),

6
ReactKit/ReactKit.xcodeproj/project.pbxproj
View File

@ -34,6 +34,7 @@
13E067561A70F44B002CDEE1 /* RCTViewManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 13E0674E1A70F44B002CDEE1 /* RCTViewManager.m */; };
13E067571A70F44B002CDEE1 /* RCTView.m in Sources */ = {isa = PBXBuildFile; fileRef = 13E067501A70F44B002CDEE1 /* RCTView.m */; };
13E067591A70F44B002CDEE1 /* UIView+ReactKit.m in Sources */ = {isa = PBXBuildFile; fileRef = 13E067541A70F44B002CDEE1 /* UIView+ReactKit.m */; };
58C571C11AA56C1900CDF9C8 /* RCTDatePickerManager.m in Sources */ = {isa = PBXBuildFile; fileRef = 58C571BF1AA56C1900CDF9C8 /* RCTDatePickerManager.m */; };
5F5F0D991A9E456B001279FA /* RCTLocationObserver.m in Sources */ = {isa = PBXBuildFile; fileRef = 5F5F0D981A9E456B001279FA /* RCTLocationObserver.m */; };
830A229E1A66C68A008503DA /* RCTRootView.m in Sources */ = {isa = PBXBuildFile; fileRef = 830A229D1A66C68A008503DA /* RCTRootView.m */; };
830BA4551A8E3BDA00D53203 /* RCTCache.m in Sources */ = {isa = PBXBuildFile; fileRef = 830BA4541A8E3BDA00D53203 /* RCTCache.m */; };
@ -123,6 +124,8 @@
13E067531A70F44B002CDEE1 /* UIView+ReactKit.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "UIView+ReactKit.h"; sourceTree = "<group>"; };
13E067541A70F44B002CDEE1 /* UIView+ReactKit.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = "UIView+ReactKit.m"; sourceTree = "<group>"; };
13EFFCCF1A98E6FE002607DC /* RCTJSMethodRegistrar.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTJSMethodRegistrar.h; sourceTree = "<group>"; };
58C571BF1AA56C1900CDF9C8 /* RCTDatePickerManager.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTDatePickerManager.m; sourceTree = "<group>"; };
58C571C01AA56C1900CDF9C8 /* RCTDatePickerManager.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTDatePickerManager.h; sourceTree = "<group>"; };
5F5F0D971A9E456B001279FA /* RCTLocationObserver.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RCTLocationObserver.h; sourceTree = "<group>"; };
5F5F0D981A9E456B001279FA /* RCTLocationObserver.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = RCTLocationObserver.m; sourceTree = "<group>"; };
830213F31A654E0800B993E6 /* RCTBridgeModule.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = RCTBridgeModule.h; sourceTree = "<group>"; };
@ -207,6 +210,8 @@
isa = PBXGroup;
children = (
13442BF21AA90E0B0037E5B0 /* RCTAnimationType.h */,
58C571C01AA56C1900CDF9C8 /* RCTDatePickerManager.h */,
58C571BF1AA56C1900CDF9C8 /* RCTDatePickerManager.m */,
13442BF31AA90E0B0037E5B0 /* RCTPointerEvents.h */,
13442BF41AA90E0B0037E5B0 /* RCTViewControllerProtocol.h */,
13C325261AA63B6A0048765F /* RCTAutoInsetsProtocol.h */,
@ -401,6 +406,7 @@
832348161A77A5AA00B55238 /* Layout.c in Sources */,
13B080201A69489C00A75B9A /* RCTUIActivityIndicatorViewManager.m in Sources */,
13E067561A70F44B002CDEE1 /* RCTViewManager.m in Sources */,
58C571C11AA56C1900CDF9C8 /* RCTDatePickerManager.m in Sources */,
13B080061A6947C200A75B9A /* RCTScrollViewManager.m in Sources */,
137327EA1AA5CF210034F82E /* RCTTabBarManager.m in Sources */,
13B080261A694A8400A75B9A /* RCTWrapperViewController.m in Sources */,

7
ReactKit/Views/RCTDatePickerManager.h Normal file
View File

@ -0,0 +1,7 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import "RCTViewManager.h"
@interface RCTDatePickerManager : RCTViewManager
@end

51
ReactKit/Views/RCTDatePickerManager.m Normal file
View File

@ -0,0 +1,51 @@
// Copyright 2004-present Facebook. All Rights Reserved.
#import "RCTDatePickerManager.h"
#import "RCTBridge.h"
#import "RCTConvert.h"
#import "RCTEventDispatcher.h"
#import "UIView+ReactKit.h"
@implementation RCTDatePickerManager
- (UIView *)view
{
UIDatePicker *picker = [[UIDatePicker alloc] init];
[picker addTarget:self
action:@selector(onChange:)
forControlEvents:UIControlEventValueChanged];
return picker;
}
RCT_EXPORT_VIEW_PROPERTY(date)
RCT_EXPORT_VIEW_PROPERTY(minimumDate)
RCT_EXPORT_VIEW_PROPERTY(maximumDate)
RCT_EXPORT_VIEW_PROPERTY(minuteInterval)
RCT_REMAP_VIEW_PROPERTY(mode, datePickerMode)
RCT_REMAP_VIEW_PROPERTY(timeZoneOffsetInMinutes, timeZone)
- (void)onChange:(UIDatePicker *)sender
{
NSDictionary *event = @{
@"target": sender.reactTag,
@"timestamp": @([sender.date timeIntervalSince1970] * 1000.0)
};
[self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event];
}
- (NSDictionary *)constantsToExport
{
UIDatePicker *dp = [[UIDatePicker alloc] init];
return @{
@"ComponentHeight": @(CGRectGetHeight(dp.frame)),
@"ComponentWidth": @(CGRectGetWidth(dp.frame)),
@"DatePickerModes": @{
@"time": @(UIDatePickerModeTime),
@"date": @(UIDatePickerModeDate),
@"datetime": @(UIDatePickerModeDateAndTime),
}
};
}
@end

1
ReactKit/Views/RCTViewNodeProtocol.h
View File

@ -1,7 +1,6 @@
// Copyright 2004-present Facebook. All Rights Reserved.
/**
* Logical node in a tree of application components. Both `ShadowView`s and
* `UIView+ReactKit`s conform to this. Allows us to write utilities that
* reason about trees generally.