Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(react-native-github): move DatePickerIOS to internal (#35366)

Browse Source 
Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/35366

# Changelog:
[JS][Removed] - removed DatePickerIOS module
[iOS][Removed] - removed DatePickerIOS module

Reviewed By: lunaleaps

Differential Revision: D41163591

fbshipit-source-id: fda31d6f3a5d7a9ca3e50ae3b4817e7deb22819c
This commit is contained in:
Ruslan Lesiutin
2023-01-09 08:53:29 -08:00
committed by Facebook GitHub Bot
parent 97e844fad0
commit 0ff7b7fac2
16 changed files with 16 additions and 938 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Libraries/Components/DatePicker/DatePickerIOS.android.js
-47
View File
@@ -1,47 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
'use strict';
import type {DatePickerIOSType} from './DatePickerIOS.flow';
import StyleSheet from '../../StyleSheet/StyleSheet';
import Text from '../../Text/Text';
import View from '../View/View';
import * as React from 'react';
class DummyDatePickerIOS extends React.Component {
render() {
return (
<View style={[styles.dummyDatePickerIOS, this.props.style]}>
<Text style={styles.datePickerText}>
DatePickerIOS is not supported on this platform!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
dummyDatePickerIOS: {
height: 100,
width: 300,
backgroundColor: '#ffbcbc',
borderWidth: 1,
borderColor: 'red',
alignItems: 'center',
justifyContent: 'center',
margin: 10,
},
datePickerText: {
color: '#333333',
margin: 20,
},
});
module.exports = (DummyDatePickerIOS: DatePickerIOSType);
Libraries/Components/DatePicker/DatePickerIOS.d.ts
Vendored
-92
View File
@@ -1,92 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
*/
import type * as React from 'react';
import {Constructor} from '../../../types/private/Utilities';
import {NativeMethods} from '../../../types/public/ReactNativeTypes';
import {ViewProps} from '../View/ViewPropTypes';
export interface DatePickerIOSProps extends ViewProps {
/**
* The currently selected date.
*/
date?: Date | null | undefined;
/**
* Provides an initial value that will change when the user starts selecting
* a date. It is useful for simple use-cases where you do not want to deal
* with listening to events and updating the date prop to keep the
* controlled state in sync. The controlled state has known bugs which
* causes it to go out of sync with native. The initialDate prop is intended
* to allow you to have native be source of truth.
*/
initialDate?: Date | null | undefined;
/**
* The date picker locale.
*/
locale?: string | undefined;
/**
* Maximum date.
* Restricts the range of possible date/time values.
*/
maximumDate?: Date | undefined;
/**
* Maximum date.
* Restricts the range of possible date/time values.
*/
minimumDate?: Date | undefined;
/**
* enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)
* The interval at which minutes can be selected.
*/
minuteInterval?: 1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30 | undefined;
/**
* enum('date', 'time', 'datetime')
* The date picker mode.
*/
mode?: 'date' | 'time' | 'datetime' | undefined;
/**
* 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: (newDate: Date) => void;
/**
* Timezone offset in minutes.
* 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?: number | undefined;
/**
* The date picker style
* This is only available on devices with iOS 14.0 and later.
* 'spinner' is the default style if this prop isn't set.
*/
pickerStyle?: 'compact' | 'spinner' | 'inline' | undefined;
}
declare class DatePickerIOSComponent extends React.Component<DatePickerIOSProps> {}
declare const DatePickerIOSBase: Constructor<NativeMethods> &
typeof DatePickerIOSComponent;
/**
* DatePickerIOS has been merged with DatePickerAndroid and will be removed in a future release.
* It can now be installed and imported from `@react-native-community/datetimepicker` instead of 'react-native'.
* @see https://github.com/react-native-community/datetimepicker
* @deprecated
*/
export class DatePickerIOS extends DatePickerIOSBase {}
Libraries/Components/DatePicker/DatePickerIOS.flow.android.js
-14
View File
@@ -1,14 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and 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
* @format
*/
'use strict';
import * as React from 'react';
export type DatePickerIOSType = React.ComponentType<>;
Libraries/Components/DatePicker/DatePickerIOS.flow.ios.js
-113
View File
@@ -1,113 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
// This is a controlled component version of RCTDatePickerIOS.
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
import type {ViewProps} from '../View/ViewPropTypes';
import * as React from 'react';
type Event = SyntheticEvent<
$ReadOnly<{|
timestamp: number,
|}>,
>;
type Props = $ReadOnly<{|
...ViewProps,
/**
* The currently selected date.
*/
date?: ?Date,
/**
* Provides an initial value that will change when the user starts selecting
* a date. It is useful for simple use-cases where you do not want to deal
* with listening to events and updating the date prop to keep the
* controlled state in sync. The controlled state has known bugs which
* causes it to go out of sync with native. The initialDate prop is intended
* to allow you to have native be source of truth.
*/
initialDate?: ?Date,
/**
* The date picker locale.
*/
locale?: ?string,
/**
* Maximum date.
*
* Restricts the range of possible date/time values.
*/
maximumDate?: ?Date,
/**
* Minimum date.
*
* Restricts the range of possible date/time values.
*/
minimumDate?: ?Date,
/**
* The interval at which minutes can be selected.
*/
minuteInterval?: ?(1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30),
/**
* The date picker mode.
*/
mode?: ?('date' | 'time' | 'datetime'),
/**
* Date change handler.
*
* This is called when the user changes the date or time in the UI.
* The first and only argument is an Event. For getting the date the picker
* was changed to, use onDateChange instead.
*/
onChange?: ?(event: Event) => void,
/**
* 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: (date: Date) => void,
/**
* Timezone offset in minutes.
*
* 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?: ?number,
/**
* The date picker style
* This is only available on devices with iOS 14.0 and later.
* 'spinner' is the default style if this prop isn't set.
*/
pickerStyle?: ?('compact' | 'spinner' | 'inline'),
|}>;
/**
* 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.
*/
export type DatePickerIOSType = React.ComponentType<Props>;
Libraries/Components/DatePicker/DatePickerIOS.ios.js
-242
View File
@@ -1,242 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
// This is a controlled component version of RCTDatePickerIOS.
import type {SyntheticEvent} from '../../Types/CoreEventTypes';
import type {ViewProps} from '../View/ViewPropTypes';
import type {DatePickerIOSType} from './DatePickerIOS.flow';
import StyleSheet from '../../StyleSheet/StyleSheet';
import View from '../View/View';
import RCTDatePickerNativeComponent, {
Commands as DatePickerCommands,
} from './RCTDatePickerNativeComponent';
import invariant from 'invariant';
import * as React from 'react';
type Event = SyntheticEvent<
$ReadOnly<{|
timestamp: number,
|}>,
>;
type Props = $ReadOnly<{|
...ViewProps,
/**
* The currently selected date.
*/
date?: ?Date,
/**
* Provides an initial value that will change when the user starts selecting
* a date. It is useful for simple use-cases where you do not want to deal
* with listening to events and updating the date prop to keep the
* controlled state in sync. The controlled state has known bugs which
* causes it to go out of sync with native. The initialDate prop is intended
* to allow you to have native be source of truth.
*/
initialDate?: ?Date,
/**
* The date picker locale.
*/
locale?: ?string,
/**
* Maximum date.
*
* Restricts the range of possible date/time values.
*/
maximumDate?: ?Date,
/**
* Minimum date.
*
* Restricts the range of possible date/time values.
*/
minimumDate?: ?Date,
/**
* The interval at which minutes can be selected.
*/
minuteInterval?: ?(1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30),
/**
* The date picker mode.
*/
mode?: ?('date' | 'time' | 'datetime'),
/**
* Date change handler.
*
* This is called when the user changes the date or time in the UI.
* The first and only argument is an Event. For getting the date the picker
* was changed to, use onDateChange instead.
*/
onChange?: ?(event: Event) => void,
/**
* 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: (date: Date) => void,
/**
* Timezone offset in minutes.
*
* 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?: ?number,
/**
* The date picker style
* This is only available on devices with iOS 14.0 and later.
* 'spinner' is the default style if this prop isn't set.
*/
pickerStyle?: ?('compact' | 'spinner' | 'inline'),
|}>;
/**
* 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.
*/
class DatePickerIOS extends React.Component<Props> {
_picker: ?React.ElementRef<typeof RCTDatePickerNativeComponent> = null;
componentDidUpdate() {
if (this.props.date) {
const propsTimeStamp = this.props.date.getTime();
if (this._picker) {
DatePickerCommands.setNativeDate(this._picker, propsTimeStamp);
}
}
}
_onChange = (event: Event) => {
const nativeTimeStamp = event.nativeEvent.timestamp;
this.props.onDateChange &&
this.props.onDateChange(new Date(nativeTimeStamp));
this.props.onChange && this.props.onChange(event);
this.forceUpdate();
};
render(): React.Node {
const props = this.props;
const mode = props.mode ?? 'datetime';
invariant(
props.date || props.initialDate,
'A selected date or initial date should be specified.',
);
return (
<View style={props.style}>
<RCTDatePickerNativeComponent
testID={props.testID}
ref={picker => {
this._picker = picker;
}}
style={getHeight(props.pickerStyle, mode)}
date={
props.date
? props.date.getTime()
: props.initialDate
? props.initialDate.getTime()
: undefined
}
locale={
props.locale != null && props.locale !== ''
? props.locale
: undefined
}
maximumDate={
props.maximumDate ? props.maximumDate.getTime() : undefined
}
minimumDate={
props.minimumDate ? props.minimumDate.getTime() : undefined
}
mode={mode}
minuteInterval={props.minuteInterval}
timeZoneOffsetInMinutes={props.timeZoneOffsetInMinutes}
onChange={this._onChange}
onStartShouldSetResponder={() => true}
onResponderTerminationRequest={() => false}
pickerStyle={props.pickerStyle}
/>
</View>
);
}
}
const inlineHeightForDatePicker = 318.5;
const inlineHeightForTimePicker = 49.5;
const compactHeight = 40;
const spinnerHeight = 216;
const styles = StyleSheet.create({
datePickerIOS: {
height: spinnerHeight,
},
datePickerIOSCompact: {
height: compactHeight,
},
datePickerIOSInline: {
height: inlineHeightForDatePicker + inlineHeightForTimePicker * 2,
},
datePickerIOSInlineDate: {
height: inlineHeightForDatePicker + inlineHeightForTimePicker,
},
datePickerIOSInlineTime: {
height: inlineHeightForTimePicker,
},
});
function getHeight(
pickerStyle: ?(
| 'compact'
| 'inline'
| 'spinner'
| $TEMPORARY$string<'compact'>
| $TEMPORARY$string<'inline'>
| $TEMPORARY$string<'spinner'>
),
mode:
| 'date'
| 'datetime'
| 'time'
| $TEMPORARY$string<'date'>
| $TEMPORARY$string<'datetime'>
| $TEMPORARY$string<'time'>,
) {
if (pickerStyle === 'compact') {
return styles.datePickerIOSCompact;
}
if (pickerStyle === 'inline') {
switch (mode) {
case 'date':
return styles.datePickerIOSInlineDate;
case 'time':
return styles.datePickerIOSInlineTime;
default:
return styles.datePickerIOSInline;
}
}
return styles.datePickerIOS;
}
module.exports = (DatePickerIOS: DatePickerIOSType);
Libraries/Components/DatePicker/RCTDatePickerNativeComponent.js
-60
View File
@@ -1,60 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @format
* @flow strict-local
*/
import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
import type {
BubblingEventHandler,
Float,
WithDefault,
} from '../../Types/CodegenTypes';
import type {ViewProps} from '../View/ViewPropTypes';
import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
import * as React from 'react';
type Event = $ReadOnly<{|
timestamp: Float,
|}>;
type NativeProps = $ReadOnly<{|
...ViewProps,
date?: ?Float,
initialDate?: ?Float,
locale?: ?string,
maximumDate?: ?Float,
minimumDate?: ?Float,
minuteInterval?: WithDefault<
1 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 15 | 20 | 30,
1,
>,
mode?: WithDefault<'date' | 'time' | 'datetime', 'date'>,
onChange?: ?BubblingEventHandler<Event>,
timeZoneOffsetInMinutes?: ?Float,
pickerStyle?: WithDefault<'compact' | 'spinner' | 'inline', 'spinner'>,
|}>;
type ComponentType = HostComponent<NativeProps>;
interface NativeCommands {
+setNativeDate: (
viewRef: React.ElementRef<ComponentType>,
date: Float,
) => void;
}
export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
supportedCommands: ['setNativeDate'],
});
export default (codegenNativeComponent<NativeProps>('DatePicker', {
paperComponentName: 'RCTDatePicker',
excludedPlatforms: ['android'],
}): HostComponent<NativeProps>);
Libraries/Components/DatePicker/__tests__/DatePickerIOS-test.js
-48
View File
@@ -1,48 +0,0 @@
/**
* Copyright (c) Meta Platforms, Inc. and 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
* @oncall react_native
*/
'use strict';
const ReactNativeTestTools = require('../../../Utilities/ReactNativeTestTools');
const DatePickerIOS = require('../DatePickerIOS');
const React = require('react');
describe('DatePickerIOS', () => {
it('should render as expected', () => {
ReactNativeTestTools.expectRendersMatchingSnapshot(
'DatePickerIOS',
() => (
<DatePickerIOS
date={new Date(1555883690956)}
mode="date"
onDateChange={jest.fn()}
/>
),
() => {
jest.dontMock('../DatePickerIOS');
},
);
});
it('should render DatePicker with the datetime mode if no mode is passed inside the props', () => {
ReactNativeTestTools.expectRendersMatchingSnapshot(
'DatePickerIOS',
() => (
<DatePickerIOS
date={new Date(1555883690956)}
onDateChange={jest.fn()}
/>
),
() => {
jest.dontMock('../DatePickerIOS');
},
);
});
});
Libraries/Components/DatePicker/__tests__/__snapshots__/DatePickerIOS-test.js.snap
-99
View File
@@ -1,99 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should deep render when mocked (please verify output manually) 1`] = `
<View>
<RCTDatePicker
date={1555883690956}
mode="datetime"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 216,
}
}
/>
</View>
`;
exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should deep render when not mocked (please verify output manually) 1`] = `
<View>
<RCTDatePicker
date={1555883690956}
mode="datetime"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 216,
}
}
/>
</View>
`;
exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should shallow render as <DatePickerIOS /> when mocked 1`] = `
<DatePickerIOS
date={2019-04-21T21:54:50.956Z}
onDateChange={[MockFunction]}
/>
`;
exports[`DatePickerIOS should render DatePicker with the datetime mode if no mode is passed inside the props: should shallow render as <DatePickerIOS /> when not mocked 1`] = `
<DatePickerIOS
date={2019-04-21T21:54:50.956Z}
onDateChange={[MockFunction]}
/>
`;
exports[`DatePickerIOS should render as expected: should deep render when mocked (please verify output manually) 1`] = `
<View>
<RCTDatePicker
date={1555883690956}
mode="date"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 216,
}
}
/>
</View>
`;
exports[`DatePickerIOS should render as expected: should deep render when not mocked (please verify output manually) 1`] = `
<View>
<RCTDatePicker
date={1555883690956}
mode="date"
onChange={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
style={
Object {
"height": 216,
}
}
/>
</View>
`;
exports[`DatePickerIOS should render as expected: should shallow render as <DatePickerIOS /> when mocked 1`] = `
<DatePickerIOS
date={2019-04-21T21:54:50.956Z}
mode="date"
onDateChange={[MockFunction]}
/>
`;
exports[`DatePickerIOS should render as expected: should shallow render as <DatePickerIOS /> when not mocked 1`] = `
<DatePickerIOS
date={2019-04-21T21:54:50.956Z}
mode="date"
onDateChange={[MockFunction]}
/>
`;
React/Views/RCTDatePicker.h
-12
View File
@@ -1,12 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import <UIKit/UIKit.h>
@interface RCTDatePicker : UIDatePicker
@end
React/Views/RCTDatePicker.m
-70
View File
@@ -1,70 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "RCTDatePicker.h"
#import <Availability.h>
#import <AvailabilityInternal.h>
#import "RCTUtils.h"
#import "UIView+React.h"
#ifndef __IPHONE_14_0
#define __IPHONE_14_0 140000
#endif // __IPHONE_14_0
#ifndef RCT_IOS_14_0_SDK_OR_LATER
#define RCT_IOS_14_0_SDK_OR_LATER (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0)
#endif // RCT_IOS_14_0_SDK_OR_LATER
@interface RCTDatePicker ()
@property (nonatomic, copy) RCTBubblingEventBlock onChange;
@property (nonatomic, assign) NSInteger reactMinuteInterval;
@end
@implementation RCTDatePicker
- (instancetype)initWithFrame:(CGRect)frame
{
if ((self = [super initWithFrame:frame])) {
[self addTarget:self action:@selector(didChange) forControlEvents:UIControlEventValueChanged];
_reactMinuteInterval = 1;
#if RCT_IOS_14_0_SDK_OR_LATER
if (@available(iOS 14, *)) {
self.preferredDatePickerStyle = UIDatePickerStyleWheels;
}
#endif // RCT_IOS_14_0_SDK_OR_LATER
}
return self;
}
RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : (NSCoder *)aDecoder)
- (void)didChange
{
if (_onChange) {
_onChange(@{@"timestamp" : @(self.date.timeIntervalSince1970 * 1000.0)});
}
}
- (void)setDatePickerMode:(UIDatePickerMode)datePickerMode
{
[super setDatePickerMode:datePickerMode];
// We need to set minuteInterval after setting datePickerMode, otherwise minuteInterval is invalid in time mode.
self.minuteInterval = _reactMinuteInterval;
}
- (void)setMinuteInterval:(NSInteger)minuteInterval
{
[super setMinuteInterval:minuteInterval];
_reactMinuteInterval = minuteInterval;
}
@end
React/Views/RCTDatePickerManager.h
-19
View File
@@ -1,19 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import <React/RCTConvert.h>
#import <React/RCTViewManager.h>
@interface RCTConvert (UIDatePicker)
+ (UIDatePickerMode)UIDatePickerMode:(id)json;
@end
@interface RCTDatePickerManager : RCTViewManager
@end
React/Views/RCTDatePickerManager.m
-105
View File
@@ -1,105 +0,0 @@
/*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
#import "RCTDatePickerManager.h"
#import "RCTBridge.h"
#import "RCTDatePicker.h"
#import "UIView+React.h"
@implementation RCTConvert (UIDatePicker)
RCT_ENUM_CONVERTER(
UIDatePickerMode,
(@{
@"time" : @(UIDatePickerModeTime),
@"date" : @(UIDatePickerModeDate),
@"datetime" : @(UIDatePickerModeDateAndTime),
@"countdown" : @(UIDatePickerModeCountDownTimer), // not supported yet
}),
UIDatePickerModeTime,
integerValue)
#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Wunguarded-availability-new"
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
RCT_ENUM_CONVERTER(
UIDatePickerStyle,
(@{
@"compact" : @(UIDatePickerStyleCompact),
@"spinner" : @(UIDatePickerStyleWheels),
@"inline" : @(UIDatePickerStyleInline),
}),
UIDatePickerStyleAutomatic,
integerValue)
#endif
#pragma clang diagnostic pop
@end
@implementation RCTDatePickerManager
@synthesize viewRegistry_DEPRECATED = _viewRegistry_DEPRECATED;
RCT_EXPORT_MODULE()
- (UIView *)view
{
RCTNewArchitectureValidationPlaceholder(
RCTNotAllowedInFabricWithoutLegacy,
self,
@"This native component is still using the legacy interop layer -- please migrate it to use a Fabric specific implementation.");
return [RCTDatePicker new];
}
RCT_EXPORT_VIEW_PROPERTY(date, NSDate)
RCT_EXPORT_VIEW_PROPERTY(locale, NSLocale)
RCT_EXPORT_VIEW_PROPERTY(minimumDate, NSDate)
RCT_EXPORT_VIEW_PROPERTY(maximumDate, NSDate)
RCT_EXPORT_VIEW_PROPERTY(minuteInterval, NSInteger)
RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
RCT_REMAP_VIEW_PROPERTY(mode, datePickerMode, UIDatePickerMode)
RCT_REMAP_VIEW_PROPERTY(timeZoneOffsetInMinutes, timeZone, NSTimeZone)
RCT_EXPORT_METHOD(setNativeDate : (nonnull NSNumber *)viewTag toDate : (NSDate *)date)
{
[_viewRegistry_DEPRECATED addUIBlock:^(RCTViewRegistry *viewRegistry) {
UIView *view = [viewRegistry viewForReactTag:viewTag];
if ([view isKindOfClass:[RCTDatePicker class]]) {
[(RCTDatePicker *)view setDate:date];
} else {
// This component is used in Fabric through LegacyInteropLayer.
// `RCTDatePicker` view is subview of `RCTLegacyViewManagerInteropComponentView`.
// `viewTag` passed as parameter to this method is tag of the `RCTLegacyViewManagerInteropComponentView`.
UIView *subview = view.subviews.firstObject;
if ([subview isKindOfClass:[RCTDatePicker class]]) {
[(RCTDatePicker *)subview setDate:date];
} else {
RCTLogError(@"view type must be RCTDatePicker");
}
}
}];
}
#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
RCT_CUSTOM_VIEW_PROPERTY(pickerStyle, UIDatePickerStyle, RCTDatePicker)
{
if (@available(iOS 14, *)) {
// If the style changed, then the date picker may need to be resized and will generate a layout pass to display
// correctly. We need to prevent that to get consistent layout. That's why we memorise the old frame and set it
// after style is changed.
CGRect oldFrame = view.frame;
if (json) {
UIDatePickerStyle style = [RCTConvert UIDatePickerStyle:json];
view.preferredDatePickerStyle = style;
} else {
view.preferredDatePickerStyle = UIDatePickerStyleWheels;
}
view.frame = oldFrame;
}
}
#endif
@end
index.js
+15 -11
View File
@@ -14,7 +14,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 DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
import typeof FlatList from './Libraries/Lists/FlatList';
import typeof Image from './Libraries/Image/Image';
@@ -115,16 +114,6 @@ module.exports = {
return require('./Libraries/Components/Button');
},
// $FlowFixMe[value-as-type]
get DatePickerIOS(): DatePickerIOS {
warnOnce(
'DatePickerIOS-merged',
'DatePickerIOS has been merged with DatePickerAndroid and will be removed in a future release. ' +
"It can now be installed and imported from '@react-native-community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-datetimepicker/datetimepicker',
);
return require('./Libraries/Components/DatePicker/DatePickerIOS');
},
// $FlowFixMe[value-as-type]
get DrawerLayoutAndroid(): DrawerLayoutAndroid {
return require('./Libraries/Components/DrawerAndroid/DrawerLayoutAndroid');
},
@@ -775,4 +764,19 @@ if (__DEV__) {
);
},
});
/* $FlowFixMe[prop-missing] This is intentional: Flow will error when
* attempting to access DatePickerIOS. */
/* $FlowFixMe[invalid-export] This is intentional: Flow will error when
* attempting to access DatePickerIOS. */
Object.defineProperty(module.exports, 'DatePickerIOS', {
configurable: true,
get() {
invariant(
false,
'DatePickerIOS has been removed from react-native core. ' +
"It can now be installed and imported from '@react-native-community/datetimepicker' instead of 'react-native'. " +
'See https://github.com/react-native-datetimepicker/datetimepicker',
);
},
});
}
packages/rn-tester/Podfile.lock
+1 -1
View File
@@ -971,7 +971,7 @@ SPEC CHECKSUMS:
React-RCTTest: 81ebfa8c2e1b0b482effe12485e6486dc0ff70d7
React-RCTText: 4e5ae05b778a0ed2b22b012af025da5e1a1c4e54
React-RCTVibration: ecfd04c1886a9c9a4e31a466c0fbcf6b36e92fde
React-rncore: 08566b41339706758229f407c8907b2f7987f058
React-rncore: 3761a64f7cb20e8d82be0ac186d7182eac1e3885
React-runtimeexecutor: c7b2cd6babf6cc50340398bfbb7a9da13c93093f
ReactCommon: a11d5523be510a2d75e50e435de607297072172a
ScreenshotManager: 37152a3841a53f2de5c0013c58835b8738894553
types/index.d.ts
Vendored
-1
View File
@@ -81,7 +81,6 @@ export * from '../Libraries/BatchedBridge/NativeModules';
export * from '../Libraries/Components/AccessibilityInfo/AccessibilityInfo';
export * from '../Libraries/Components/ActivityIndicator/ActivityIndicator';
export * from '../Libraries/Components/Clipboard/Clipboard';
export * from '../Libraries/Components/DatePicker/DatePickerIOS';
export * from '../Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
export * from '../Libraries/Components/Keyboard/Keyboard';
export * from '../Libraries/Components/Keyboard/KeyboardAvoidingView';
types/public/DeprecatedPropertiesAlias.d.ts
Vendored
-4
View File
@@ -26,7 +26,6 @@ import {
InputAccessoryViewProps,
ActivityIndicatorProps,
ActivityIndicatorIOSProps,
DatePickerIOSProps,
DrawerLayoutAndroidProps,
ProgressBarAndroidProps,
RefreshControlProps,
@@ -116,9 +115,6 @@ export type ActivityIndicatorProperties = ActivityIndicatorProps;
/** @deprecated Use ActivityIndicatorIOSProps */
export type ActivityIndicatorIOSProperties = ActivityIndicatorIOSProps;
/** @deprecated Use DatePickerIOSProps */
export type DatePickerIOSProperties = DatePickerIOSProps;
/** @deprecated Use DrawerLayoutAndroidProps */
export type DrawerLayoutAndroidProperties = DrawerLayoutAndroidProps;