Skip to content

Commit

Permalink
refactor(ios): remove deprecated headerTextIOS & `isHeaderVisibleIO…
Browse files Browse the repository at this point in the history 
…S` props (#607)

BREAKING CHANGE: Removed the deprecated `headerTextIOS` and `isHeaderVisibleIOS` props.
  • Loading branch information
@vinnyA3
vinnyA3 authored Oct 9, 2021
1 parent e9e93e6 commit eebaaae
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 76 deletions.
46 changes: 22 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,30 +91,28 @@ export default Example;

👉 Please notice that **all the [`@react-native-community/react-native-datetimepicker`](https://github.com/react-native-community/react-native-datetimepicker) props are supported** as well!

| Name | Type | Default | Description |
| ------------------------- | --------- | ------------- | --------------------------------------------------------------------------------------------------- |
| `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests |
| `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests |
| `cancelTextIOS` | string | "Cancel" | The label of the cancel button (iOS) |
| `confirmTextIOS` | string | "Confirm" | The label of the confirm button (iOS) |
| `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) |
| `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) |
| `customHeaderIOS` | component | | Overrides the default header component (iOS) |
| `customPickerIOS` | component | | Overrides the default native picker component (iOS) |
| `date` | obj | new Date() | Initial selected date/time |
| `headerTextIOS` | string | "Pick a date" | The title text of header (iOS) |
| `isVisible` | bool | false | Show the datetime picker? |
| `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) |
| `isHeaderVisibleIOS` | bool? | false | Show the built-in header on iOS (deprecated — use `customHeaderIOS` instead) |
| `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS |
| `modalStyleIOS` | style | | Style of the modal content (iOS) |
| `mode` | string | "date" | Choose between "date", "time", and "datetime" |
| `onCancel` | func | **REQUIRED** | Function called on dismiss |
| `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object |
| `onHide` | func | () => null | Called after the hide animation |
| `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) |
| `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) |
| `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) |
| Name | Type | Default | Description |
| ------------------------- | --------- | ------------ | --------------------------------------------------------------------------------------------------- |
| `cancelButtonTestID` | string | | Used to locate cancel button in end-to-end tests |
| `confirmButtonTestID` | string | | Used to locate confirm button in end-to-end tests |
| `cancelTextIOS` | string | "Cancel" | The label of the cancel button (iOS) |
| `confirmTextIOS` | string | "Confirm" | The label of the confirm button (iOS) |
| `customCancelButtonIOS` | component | | Overrides the default cancel button component (iOS) |
| `customConfirmButtonIOS` | component | | Overrides the default confirm button component (iOS) |
| `customHeaderIOS` | component | | Overrides the default header component (iOS) |
| `customPickerIOS` | component | | Overrides the default native picker component (iOS) |
| `date` | obj | new Date() | Initial selected date/time |
| `isVisible` | bool | false | Show the datetime picker? |
| `isDarkModeEnabled` | bool? | undefined | Forces the picker dark/light mode if set (otherwise fallbacks to the Appearance color scheme) (iOS) |
| `modalPropsIOS` | object | {} | Additional [modal](https://reactnative.dev/docs/modal) props for iOS |
| `modalStyleIOS` | style | | Style of the modal content (iOS) |
| `mode` | string | "date" | Choose between "date", "time", and "datetime" |
| `onCancel` | func | **REQUIRED** | Function called on dismiss |
| `onConfirm` | func | **REQUIRED** | Function called on date or time picked. It returns the date or time as a JavaScript Date object |
| `onHide` | func | () => null | Called after the hide animation |
| `pickerContainerStyleIOS` | style | | The style of the picker container (iOS) |
| `pickerStyleIOS` | style | | The style of the picker component wrapper (iOS) |
| `backdropStyleIOS` | style | | The style of the picker backdrop view style (iOS) |

## Frequently Asked Questions

Expand Down
47 changes: 3 additions & 44 deletions src/DateTimePickerModal.ios.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ export const BUTTON_FONT_COLOR = "#007ff9";
export const BUTTON_FONT_SIZE = 20;
export const HIGHLIGHT_COLOR_DARK = "#444444";
export const HIGHLIGHT_COLOR_LIGHT = "#ebebeb";
export const TITLE_FONT_SIZE = 20;
export const TITLE_COLOR = "#8f8f8f";

export class DateTimePickerModal extends React.PureComponent {
static propTypes = {
Expand All @@ -35,11 +33,9 @@ export class DateTimePickerModal extends React.PureComponent {
customHeaderIOS: PropTypes.elementType,
customPickerIOS: PropTypes.elementType,
date: PropTypes.instanceOf(Date),
headerTextIOS: PropTypes.string,
modalPropsIOS: PropTypes.any,
modalStyleIOS: PropTypes.any,
isDarkModeEnabled: PropTypes.bool,
isHeaderVisibleIOS: PropTypes.bool,
isVisible: PropTypes.bool,
pickerContainerStyleIOS: PropTypes.any,
pickerStyleIOS: PropTypes.any,
Expand All @@ -58,7 +54,6 @@ export class DateTimePickerModal extends React.PureComponent {
modalPropsIOS: {},
date: new Date(),
isDarkModeEnabled: undefined,
isHeaderVisibleIOS: false,
isVisible: false,
pickerContainerStyleIOS: {},
pickerStyleIOS: {},
Expand All @@ -79,14 +74,6 @@ export class DateTimePickerModal extends React.PureComponent {
return null;
}

componentDidMount() {
if (this.props.isHeaderVisibleIOS) {
console.warn(
`Please notice that the built-in iOS header will not be supported anymore in the future. If you're still planning to show a header, it's recommended to provide your own header implementation using "customHeaderIOS" (which will continue to be supported).`
);
}
}

handleCancel = () => {
this.didPressConfirm = false;
this.props.onCancel();
Expand Down Expand Up @@ -124,9 +111,7 @@ export class DateTimePickerModal extends React.PureComponent {
customPickerIOS,
date,
display,
headerTextIOS,
isDarkModeEnabled,
isHeaderVisibleIOS,
isVisible,
modalStyleIOS,
modalPropsIOS,
Expand All @@ -149,17 +134,13 @@ export class DateTimePickerModal extends React.PureComponent {

const ConfirmButtonComponent = customConfirmButtonIOS || ConfirmButton;
const CancelButtonComponent = customCancelButtonIOS || CancelButton;
const HeaderComponent = customHeaderIOS || Header;
const PickerComponent = customPickerIOS || DateTimePicker;
const HeaderComponent = customHeaderIOS;

const themedContainerStyle = _isDarkModeEnabled
? pickerStyles.containerDark
: pickerStyles.containerLight;

const headerText =
headerTextIOS ||
(this.props.mode === "time" ? "Pick a time" : "Pick a date");

return (
<Modal
isVisible={isVisible}
Expand All @@ -176,8 +157,8 @@ export class DateTimePickerModal extends React.PureComponent {
pickerContainerStyleIOS,
]}
>
{isHeaderVisibleIOS && <HeaderComponent label={headerText} />}
{!isHeaderVisibleIOS && display === "inline" && (
{HeaderComponent && <HeaderComponent />}
{!HeaderComponent && display === "inline" && (
<View style={pickerStyles.headerFiller} />
)}
<View
Expand Down Expand Up @@ -238,28 +219,6 @@ const pickerStyles = StyleSheet.create({
},
});

export const Header = ({ label, style = headerStyles }) => {
return (
<View style={style.root}>
<Text style={style.text}>{label}</Text>
</View>
);
};

export const headerStyles = StyleSheet.create({
root: {
borderBottomColor: BORDER_COLOR,
borderBottomWidth: StyleSheet.hairlineWidth,
padding: 14,
backgroundColor: "transparent",
},
text: {
textAlign: "center",
color: TITLE_COLOR,
fontSize: TITLE_FONT_SIZE,
},
});

export const ConfirmButton = ({
isDarkModeEnabled,
confirmButtonTestID,
Expand Down
9 changes: 1 addition & 8 deletions typings/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export interface DateTimePickerProps {
* Style of the backgrop (iOS)
*/
backdropStyleIOS?: ViewStyle;

/**
* Style of the modal content (iOS)
*/
Expand Down Expand Up @@ -151,13 +151,6 @@ export interface DateTimePickerProps {
*/
timePickerModeAndroid?: "spinner" | "clock" | "default";

/**
* Title text for the Picker on iOS
*
* Default is 'Pick a Date'
*/
headerTextIOS?: string;

/**
* Minimum date the picker can go back to
*/
Expand Down

0 comments on commit eebaaae

Please sign in to comment.