Skip to content

Commit 329c314

Browse files
alfonsocj-cbalfonsocj-cb
committed
Initial changes
1 parent a8eefac commit 329c314

15 files changed

+365
-40
lines changed

‎CONTRIBUTING.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,3 +68,30 @@ An existing Android emulator is required to match the name defined in `detox.con
6868
yarn detox:android:build:release
6969
yarn detox:android:test:release
7070
```
71+
72+
### Fabric
73+
74+
Fabric is the new React Native rendering system ([read more about it here](https://reactnative.dev/architecture/fabric-renderer)).
75+
76+
#### iOS
77+
78+
```
79+
yarn start
80+
cd "example/ios" && RCT_NEW_ARCH_ENABLED=1 npx pod-install && cd -
81+
yarn start:ios
82+
```
83+
84+
If you want to go back to the old renderer (Paper),
85+
remove `ios/build`, run `pod-install` without the `RCT_NEW_ARCH_ENABLED=1` and build again
86+
87+
```
88+
rm -r "example/ios/build"
89+
cd "example/ios" && npx pod-install && cd -
90+
yarn start:ios
91+
```
92+
93+
94+
#### Android
95+
96+
The date time picker does not have a native UI component for Android but a native module.
97+
([read more about native modules here](https://reactnative.dev/docs/native-modules-intro)).

‎RNDateTimePicker.podspec

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
require 'json'
22

3+
fabric_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
4+
35
package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
46

57
Pod::Spec.new do |s|
@@ -12,8 +14,28 @@ Pod::Spec.new do |s|
1214
s.homepage = package['homepage']
1315
s.platform = :ios, "11.0"
1416
s.source = { :git => "https://github.com/react-native-community/datetimepicker", :tag => "v#{s.version}" }
15-
s.source_files = "ios/*.{h,m}"
17+
s.source_files = "ios/**/*.{h,m,mm}"
1618
s.requires_arc = true
1719

18-
s.dependency "React-Core"
20+
if fabric_enabled
21+
folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
22+
23+
s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
24+
s.pod_target_xcconfig = {
25+
'HEADER_SEARCH_PATHS' => '"$(PODS_ROOT)/boost" "$(PODS_ROOT)/boost-for-react-native" "$(PODS_ROOT)/RCT-Folly"',
26+
"CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
27+
}
28+
29+
s.dependency "React"
30+
s.dependency "React-RCTFabric"
31+
s.dependency "React-Codegen"
32+
s.dependency "RCT-Folly"
33+
s.dependency "RCTRequired"
34+
s.dependency "RCTTypeSafety"
35+
s.dependency "ReactCommon/turbomodule/core"
36+
else
37+
s.exclude_files = "ios/fabric"
38+
39+
s.dependency "React-Core"
40+
end
1941
end

‎example/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
Switch,
1313
} from 'react-native';
1414
import DateTimePicker from '@react-native-community/datetimepicker';
15-
import SegmentedControl from '@react-native-segmented-control/segmented-control';
15+
import SegmentedControl from './SegmentedControl';
1616
import {Colors} from 'react-native/Libraries/NewAppScreen';
1717
import React, {useRef, useState} from 'react';
1818
import {Picker} from 'react-native-windows';

‎example/SegmentedControl.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {isFabricEnabled} from '../src/utils';
2+
3+
import SegmentedControl from '@react-native-segmented-control/segmented-control';
4+
import JSSegmentedControl from '@react-native-segmented-control/segmented-control/js/SegmentedControl.js';
5+
6+
// Forcing the JS implementation for Fabric as the native module is not compatible with Fabric yet.
7+
export default isFabricEnabled ? JSSegmentedControl : SegmentedControl;

‎example/ios/Podfile.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ SPEC CHECKSUMS:
570570
ReactCommon: de55f940495d7bf87b5d7bf55b5b15cdd50d7d7b
571571
ReactTestApp-DevSupport: 8a8cff38c37cd8145a12ac7d7d0503dd08f97d65
572572
ReactTestApp-Resources: ff5f151e465e890010b417ce65ca6c5de6aeccbb
573-
RNDateTimePicker: 4f1fc917f5af9d9ae4c5fc0c63a4474d61338693
573+
RNDateTimePicker: 9d66f002d6095cc89fcb66d0dc54bc6191c9ab0d
574574
RNLocalize: cbcb55d0e19c78086ea4eea20e03fe8000bbbced
575575
SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608
576576
Yoga: 82c9e8f652789f67d98bed5aef9d6653f71b04a9

‎example/ios/date-time-picker-example.xcworkspace/contents.xcworkspacedata

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/ios/date-time-picker-example.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
3+
<plist version="1.0">
4+
<dict>
5+
<key>IDEDidComputeMac32BitWarning</key>
6+
<true/>
7+
</dict>
8+
</plist>

‎ios/fabric/RNDateTimePickerComponentView.h

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
#import <React/RCTViewComponentView.h>
2+
3+
NS_ASSUME_NONNULL_BEGIN
4+
5+
@interface RNDateTimePickerComponentView : RCTViewComponentView
6+
7+
@end
8+
9+
NS_ASSUME_NONNULL_END

‎ios/fabric/RNDateTimePickerComponentView.mm

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
#import "RNDateTimePickerComponentView.h"
2+
3+
#import <React/RCTConversions.h>
4+
5+
#import <react/renderer/components/RNDateTimePicker/ComponentDescriptors.h>
6+
#import <react/renderer/components/RNDateTimePicker/EventEmitters.h>
7+
#import <react/renderer/components/RNDateTimePicker/Props.h>
8+
#import <react/renderer/components/RNDateTimePicker/RCTComponentViewHelpers.h>
9+
10+
#import "RCTFabricComponentsPlugins.h"
11+
#import "RNDateTimePicker.h"
12+
13+
using namespace facebook::react;
14+
15+
@interface RNDateTimePickerComponentView () <RCTRNDateTimePickerViewProtocol>
16+
@end
17+
18+
@implementation RNDateTimePickerComponentView {
19+
UIDatePicker *_datePickerView;
20+
}
21+
22+
- (instancetype)initWithFrame:(CGRect)frame
23+
{
24+
if (self = [super initWithFrame:frame]) {
25+
static const auto defaultProps = std::make_shared<const RNDateTimePickerProps>();
26+
_props = defaultProps;
27+
28+
_datePickerView = [[RNDateTimePicker alloc] initWithFrame:self.bounds];
29+
30+
[_datePickerView addTarget:self action:@selector(onChange:) forControlEvents:UIControlEventValueChanged];
31+
32+
// Default Picker mode
33+
_datePickerView.datePickerMode = UIDatePickerModeDate;
34+
35+
self.contentView = _datePickerView;
36+
}
37+
38+
return self;
39+
}
40+
41+
-(void)onChange:(RNDateTimePicker *)sender
42+
{
43+
if (!_eventEmitter) {
44+
return;
45+
}
46+
47+
NSTimeInterval timestamp = [sender.date timeIntervalSince1970];
48+
RNDateTimePickerEventEmitter::OnChange event = {
49+
// Sending time in milliseconds
50+
.timestamp = timestamp * 1000
51+
};
52+
53+
std::dynamic_pointer_cast<const RNDateTimePickerEventEmitter>(_eventEmitter)
54+
->onChange(event);
55+
}
56+
57+
#pragma mark - RCTComponentViewProtocol
58+
59+
+ (ComponentDescriptorProvider)componentDescriptorProvider
60+
{
61+
return concreteComponentDescriptorProvider<RNDateTimePickerComponentDescriptor>();
62+
}
63+
64+
// JS Standard for time is milliseconds
65+
NSDate* convertJSTimeToDate (double jsTime) {
66+
double time = jsTime/1000.0;
67+
return [NSDate dateWithTimeIntervalSince1970: time];
68+
}
69+
70+
-(void)updateTextColor:(UIColor *)color
71+
{
72+
if (@available(iOS 14.0, *)) {
73+
if (_datePickerView.datePickerStyle != UIDatePickerStyleWheels) {
74+
// prevents #247
75+
return;
76+
}
77+
}
78+
79+
if (color == nil) {
80+
// Default Text color
81+
if (@available(iOS 13.0, *)) {
82+
color = [UIColor labelColor];
83+
} else {
84+
color = [UIColor blackColor];
85+
}
86+
}
87+
88+
[_datePickerView setValue:color forKey:@"textColor"];
89+
[_datePickerView setValue:@(NO) forKey:@"highlightsToday"];
90+
}
91+
92+
- (void)updateProps:(Props::Shared const &)props oldProps:(Props::Shared const &)oldProps
93+
{
94+
const auto &oldPickerProps = *std::static_pointer_cast<const RNDateTimePickerProps>(_props);
95+
const auto &newPickerProps = *std::static_pointer_cast<const RNDateTimePickerProps>(props);
96+
97+
if (oldPickerProps.date != newPickerProps.date) {
98+
_datePickerView.date = convertJSTimeToDate(newPickerProps.date);
99+
}
100+
101+
if (oldPickerProps.minimumDate != newPickerProps.minimumDate) {
102+
_datePickerView.minimumDate = convertJSTimeToDate(newPickerProps.minimumDate);
103+
}
104+
105+
if (oldPickerProps.maximumDate != newPickerProps.maximumDate) {
106+
_datePickerView.maximumDate = convertJSTimeToDate(newPickerProps.maximumDate);
107+
}
108+
109+
if (oldPickerProps.locale != newPickerProps.locale) {
110+
NSString *convertedLocale = RCTNSStringFromString(newPickerProps.locale);
111+
NSLocale *locale = [[NSLocale alloc] initWithLocaleIdentifier:convertedLocale];
112+
113+
_datePickerView.locale = locale;
114+
}
115+
116+
if (oldPickerProps.mode != newPickerProps.mode) {
117+
switch(newPickerProps.mode) {
118+
case RNDateTimePickerMode::Time:
119+
_datePickerView.datePickerMode = UIDatePickerModeTime;
120+
break;
121+
case RNDateTimePickerMode::Datetime:
122+
_datePickerView.datePickerMode = UIDatePickerModeDateAndTime;
123+
break;
124+
case RNDateTimePickerMode::Countdown:
125+
_datePickerView.datePickerMode = UIDatePickerModeCountDownTimer;
126+
break;
127+
default:
128+
_datePickerView.datePickerMode = UIDatePickerModeDate;
129+
}
130+
}
131+
132+
if (@available(iOS 14.0, *)) {
133+
if (oldPickerProps.displayIOS != newPickerProps.displayIOS) {
134+
switch(newPickerProps.displayIOS) {
135+
case RNDateTimePickerDisplayIOS::Compact:
136+
_datePickerView.preferredDatePickerStyle = UIDatePickerStyleCompact;
137+
break;
138+
case RNDateTimePickerDisplayIOS::Inline:
139+
_datePickerView.preferredDatePickerStyle = UIDatePickerStyleInline;
140+
break;
141+
case RNDateTimePickerDisplayIOS::Spinner:
142+
_datePickerView.preferredDatePickerStyle = UIDatePickerStyleWheels;
143+
break;
144+
default:
145+
_datePickerView.preferredDatePickerStyle = UIDatePickerStyleAutomatic;
146+
}
147+
}
148+
}
149+
150+
if (oldPickerProps.minuteInterval != newPickerProps.minuteInterval) {
151+
_datePickerView.minuteInterval = newPickerProps.minuteInterval;
152+
}
153+
154+
if (oldPickerProps.timeZoneOffsetInMinutes != newPickerProps.timeZoneOffsetInMinutes) {
155+
// JS standard for time zones is minutes.
156+
_datePickerView.timeZone = [NSTimeZone timeZoneForSecondsFromGMT:newPickerProps.timeZoneOffsetInMinutes * 60.0];
157+
}
158+
159+
if (oldPickerProps.accentColor != newPickerProps.accentColor) {
160+
UIColor *color = RCTUIColorFromSharedColor(newPickerProps.accentColor);
161+
162+
if (color != nil) {
163+
[_datePickerView setTintColor:color];
164+
} else {
165+
if (@available(iOS 15.0, *)) {
166+
[_datePickerView setTintColor:[UIColor tintColor]];
167+
} else {
168+
[_datePickerView setTintColor:[UIColor systemBlueColor]];
169+
}
170+
}
171+
}
172+
173+
if (oldPickerProps.textColor != newPickerProps.textColor) {
174+
[self updateTextColor:RCTUIColorFromSharedColor(newPickerProps.textColor)];
175+
}
176+
177+
if (@available(iOS 13.0, *)) {
178+
if (oldPickerProps.themeVariant != newPickerProps.themeVariant) {
179+
switch (newPickerProps.themeVariant) {
180+
case RNDateTimePickerThemeVariant::Light:
181+
_datePickerView.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
182+
break;
183+
case RNDateTimePickerThemeVariant::Dark:
184+
_datePickerView.overrideUserInterfaceStyle = UIUserInterfaceStyleDark;
185+
break;
186+
default:
187+
_datePickerView.overrideUserInterfaceStyle = UIUserInterfaceStyleUnspecified;
188+
}
189+
}
190+
}
191+
192+
if (oldPickerProps.enabled != newPickerProps.enabled) {
193+
_datePickerView.enabled = newPickerProps.enabled;
194+
}
195+
196+
197+
[super updateProps:props oldProps:oldProps];
198+
}
199+
200+
@end
201+
202+
Class<RCTComponentViewProtocol> RNDateTimePickerCls(void)
203+
{
204+
return RNDateTimePickerComponentView.class;
205+
}
206+

‎package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,5 +144,10 @@
144144
}
145145
}
146146
}
147+
},
148+
"codegenConfig": {
149+
"name": "RNDateTimePicker",
150+
"type": "components",
151+
"jsSrcsDir": "src/specs"
147152
}
148153
}

0 commit comments

Comments
 (0)