Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(labels): support positive and negative button texts #3

Merged
merged 1 commit into from
Oct 3, 2022
Merged

feat(labels): support positive and negative button texts #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const App = () => {
const showTimePicker = () => {
MaterialDatetimePickerAndroid.show({
value: time,
title: 'Select flight time',
titleText: 'Select flight time',
mode: AndroidPickerMode.TIME,
is24Hours: true,
inputMode: AndroidTimeInputMode.CLOCK,
Expand All @@ -104,10 +104,10 @@ export const App = () => {
const showTimePicker = () => {
MaterialDatetimePickerAndroid.show({
value: date,
title: 'Select booking date',
titleText: 'Select booking date',
mode: AndroidPickerMode.DATE,
minDate: subWeeks(today, 3),
maxDate: addWeeks(today, 4),
minimumDate: subWeeks(today, 3),
maximumDate: addWeeks(today, 4),
inputMode: AndroidDateInputMode.CALENDAR,
type: AndroidDatePickerType.DEFAULT,
onChange: (date) => {
Expand Down Expand Up @@ -143,8 +143,8 @@ export const App = () => {
<RNMaterialDatetimePicker
mode={AndroidPickerMode.DATE}
value={currentDate}
minDate={subWeeks(today, 3)}
maxDate={addWeeks(today, 4)}
minimumDate={subWeeks(today, 3)}
maximumDate={addWeeks(today, 4)}
onChange={(date) => {
setCurrentDate(date);
setIsVisible(false);
Expand All @@ -160,20 +160,22 @@ export const App = () => {

#### Common Options

| Name | Type | Default | Required | Description |
| ---------- | -------------------------- | ------------------------ | -------- | ---------------------------------------------------------------------- |
| `mode` | `AndroidPickerMode` | `AndroidPickerMode.DATE` | ❌ | The mode of picker to show |
| `value` | `Date` | | ✅ | The current value of the picker |
| `title` | `string` | | ❌ | The title to be shown on the top left |
| `onChange` | `(date: Date) => string` | | ❌ | The callback invoked when a new date or time is selected |
| `onError` | `(error: unknown) => void` | | ❌ | The callback invoked when an error occured while selecting a new value |
| Name | Type | Default | Required | Description |
| -------------------- | -------------------------- | ------------------------ | -------- | ---------------------------------------------------------------------- |
| `mode` | `AndroidPickerMode` | `AndroidPickerMode.DATE` | ❌ | The mode of picker to show |
| `value` | `Date` | | ✅ | The current value of the picker |
| `titleText` | `string` | | ❌ | The title to be shown on the top left |
| `positiveButtonText` | `string` | | ❌ | The text used in the positive action button |
| `negativeButtonText` | `string` | | ❌ | The text used in the negative action button |
| `onChange` | `(date: Date) => string` | | ❌ | The callback invoked when a new date or time is selected |
| `onError` | `(error: unknown) => void` | | ❌ | The callback invoked when an error occured while selecting a new value |

#### Date Picker Options

| Name | Type | Default | Required | Description |
| ------------------- | ------------------------------------------ | ------- | -------- | -------------------------------------------------- |
| `minDate` | `Date` | | ❌ | The minimum date allowed to be selected |
| `maxDate` | `Date` | | ❌ | The maximum date allowed to be selected |
| `minimumDate` | `Date` | | ❌ | The minimum date allowed to be selected |
| `maximumDate` | `Date` | | ❌ | The maximum date allowed to be selected |
| `startDate` | `Date` | | ❌ | The start date when using a date range picker |
| `endDate` | `Date` | | ❌ | The end date when using a date range picker |
| `inputMode` | `AndroidDateInputMode` | | ❌ | The input mode to launch the date picker in |
Expand Down
6 changes: 5 additions & 1 deletion ...a/com/thespacemanatee/react_native_material_datetime_picker/RNMaterialDatePickerModule.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstan
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_START_MONTH
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_START_YEAR
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_YEAR
import com.thespacemanatee.react_native_material_datetime_picker.util.fixDate
import com.thespacemanatee.react_native_material_datetime_picker.util.createCalendarConstraints
import com.thespacemanatee.react_native_material_datetime_picker.util.createDialogArguments
import com.thespacemanatee.react_native_material_datetime_picker.util.dismissDialog
import com.thespacemanatee.react_native_material_datetime_picker.util.fixDate

class RNMaterialDatePickerModule(reactContext: ReactApplicationContext) :
ReactContextBaseJavaModule(reactContext), BaseRNMaterialPicker {
Expand Down Expand Up @@ -137,6 +137,8 @@ class RNMaterialDatePickerModule(reactContext: ReactApplicationContext) :
.setSelection(Pair(startDate.timeInMillis, endDate.timeInMillis))
.setCalendarConstraints(args.createCalendarConstraints())
.setTitleText(args.title)
.setPositiveButtonText(args.positiveButtonText)
.setNegativeButtonText(args.negativeButtonText)
.setInputMode(inputMode)
.build()
.apply {
Expand All @@ -149,6 +151,8 @@ class RNMaterialDatePickerModule(reactContext: ReactApplicationContext) :
.setSelection(date.timeInMillis)
.setCalendarConstraints(args.createCalendarConstraints())
.setTitleText(args.title)
.setPositiveButtonText(args.positiveButtonText)
.setNegativeButtonText(args.negativeButtonText)
.setInputMode(inputMode)
.build()
.apply {
Expand Down
2 changes: 2 additions & 0 deletions ...a/com/thespacemanatee/react_native_material_datetime_picker/RNMaterialTimePickerModule.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ class RNMaterialTimePickerModule(reactContext: ReactApplicationContext) :
.setHour(date.hour)
.setMinute(date.minute)
.setTitleText(args.title)
.setPositiveButtonText(args.positiveButtonText)
.setNegativeButtonText(args.negativeButtonText)
.setInputMode(inputMode)
.build().apply {
addOnPositiveButtonClickListener(OnPositiveButtonClickListener(this, promise))
Expand Down
4 changes: 3 additions & 1 deletion ...main/java/com/thespacemanatee/react_native_material_datetime_picker/model/MDPArguments.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ package com.thespacemanatee.react_native_material_datetime_picker.model

data class MDPArguments(
var value: Long? = null,
var title: String? = null,
var minDate: Long? = null,
var maxDate: Long? = null,
var startDate: Long? = null,
var endDate: Long? = null,
var title: String? = null,
var is24Hour: Boolean? = null,
var positiveButtonText: String? = null,
var negativeButtonText: String? = null,
var inputMode: String? = null,
var type: String? = null
)
8 changes: 5 additions & 3 deletions .../main/java/com/thespacemanatee/react_native_material_datetime_picker/util/MDPConstants.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,14 @@ object MDPConstants {

// arguments
const val KEY_VALUE = "value"
const val KEY_TITLE = "title"
const val KEY_MIN_DATE = "minDate"
const val KEY_MAX_DATE = "maxDate"
const val KEY_TITLE_TEXT = "titleText"
const val KEY_MIN_DATE = "minimumDate"
const val KEY_MAX_DATE = "maximumDate"
const val KEY_START_DATE = "startDate"
const val KEY_END_DATE = "endDate"
const val KEY_IS_24_HOUR = "is24Hour"
const val KEY_POS_BUTTON_TEXT = "positiveButtonText"
const val KEY_NEG_BUTTON_TEXT = "negativeButtonText"
const val KEY_INPUT_MODE = "inputMode"
const val KEY_TYPE = "type"

Expand Down
14 changes: 11 additions & 3 deletions ...main/java/com/thespacemanatee/react_native_material_datetime_picker/util/MDPExtensions.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,19 @@ import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstan
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_IS_24_HOUR
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_MAX_DATE
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_MIN_DATE
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_NEG_BUTTON_TEXT
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_POS_BUTTON_TEXT
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_START_DATE
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_TITLE
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_TITLE_TEXT
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_TYPE
import com.thespacemanatee.react_native_material_datetime_picker.util.MDPConstants.KEY_VALUE

fun ReadableMap.createDialogArguments() = MDPArguments().apply {
if (hasKey(KEY_VALUE) && !isNull(KEY_VALUE)) {
value = getDouble(KEY_VALUE).toLong()
}
if (hasKey(KEY_TITLE) && !isNull(KEY_TITLE)) {
title = getString(KEY_TITLE)
if (hasKey(KEY_TITLE_TEXT) && !isNull(KEY_TITLE_TEXT)) {
title = getString(KEY_TITLE_TEXT)
}
if (hasKey(KEY_MIN_DATE) && !isNull(KEY_MIN_DATE)) {
minDate = getDouble(KEY_MIN_DATE).toLong()
Expand All @@ -42,6 +44,12 @@ fun ReadableMap.createDialogArguments() = MDPArguments().apply {
if (hasKey(KEY_IS_24_HOUR) && !isNull(KEY_IS_24_HOUR)) {
is24Hour = getBoolean(KEY_IS_24_HOUR)
}
if (hasKey(KEY_POS_BUTTON_TEXT) && !isNull(KEY_POS_BUTTON_TEXT)) {
positiveButtonText = getString(KEY_POS_BUTTON_TEXT)
}
if (hasKey(KEY_NEG_BUTTON_TEXT) && !isNull(KEY_NEG_BUTTON_TEXT)) {
negativeButtonText = getString(KEY_NEG_BUTTON_TEXT)
}
if (hasKey(KEY_INPUT_MODE) && !isNull(KEY_INPUT_MODE)) {
inputMode = getString(KEY_INPUT_MODE)
}
Expand Down
34 changes: 21 additions & 13 deletions example/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,13 @@ const App: FunctionComponent = () => {
const handleShowTimePicker = () => {
MaterialDatetimePickerAndroid.show({
value: currentTime,
title: 'Select flight time',
titleText: 'Select flight time',
mode: AndroidPickerMode.TIME,
is24Hour: true,
positiveButtonText: 'Sounds good!',
negativeButtonText: 'Maybe not',
inputMode: AndroidTimeInputMode.CLOCK,
onChange: (date) => {
onConfirm: (date) => {
setCurrentTime(date);
},
});
Expand All @@ -37,13 +39,15 @@ const App: FunctionComponent = () => {
const handleShowDatePicker = () => {
MaterialDatetimePickerAndroid.show({
value: currentDate,
title: 'Select booking date',
titleText: 'Select booking date',
mode: AndroidPickerMode.DATE,
minDate: subWeeks(today, 3),
maxDate: addWeeks(today, 4),
minimumDate: subWeeks(today, 3),
maximumDate: addWeeks(today, 4),
positiveButtonText: 'Sounds good!',
negativeButtonText: 'Maybe not',
inputMode: AndroidDateInputMode.CALENDAR,
type: AndroidDatePickerType.DEFAULT,
onChange: (date) => {
onConfirm: (date) => {
setCurrentDate(date);
},
});
Expand All @@ -52,15 +56,17 @@ const App: FunctionComponent = () => {
const handleShowDateRangePicker = () => {
MaterialDatetimePickerAndroid.show({
value: currentDate,
title: 'Select duration of trip',
titleText: 'Select duration of trip',
mode: AndroidPickerMode.DATE,
minDate: subDays(currentDate, 1),
maxDate: addWeeks(today, 4),
minimumDate: subDays(currentDate, 1),
maximumDate: addWeeks(today, 4),
startDate: currentStartDate,
endDate: currentEndDate,
positiveButtonText: 'Sounds good!',
negativeButtonText: 'Maybe not',
inputMode: AndroidDateInputMode.CALENDAR,
type: AndroidDatePickerType.RANGE,
onDateRangeChange: (startDate, endDate) => {
onConfirmDateRange: (startDate, endDate) => {
setCurrentStartDate(startDate);
setCurrentEndDate(endDate);
},
Expand All @@ -73,9 +79,11 @@ const App: FunctionComponent = () => {
<RNMaterialDatetimePicker
mode={AndroidPickerMode.DATE}
value={currentDate}
minDate={subWeeks(today, 3)}
maxDate={addWeeks(today, 4)}
onChange={(date) => {
minimumDate={subWeeks(today, 3)}
maximumDate={addWeeks(today, 4)}
positiveButtonText="Sounds good!"
negativeButtonText="Maybe not"
onConfirm={(date) => {
setCurrentDate(date);
setIsVisible(false);
}}
Expand Down
6 changes: 3 additions & 3 deletions src/datepicker.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,16 @@ const RNMaterialDatePicker = NativeModules.RNMaterialTimePicker
}
);

export default class DatePickerAndroid {
export default class DatePicker {
/**
* Shows the Android Material Design time picker dialog.
*/
static async show(options: DatePickerOptions): Promise<DateTimePickerResult> {
return RNMaterialDatePicker.show({
...options,
value: options.value.getTime(),
minDate: options.minDate?.getTime(),
maxDate: options.maxDate?.getTime(),
minimumDate: options.minimumDate?.getTime(),
maximumDate: options.maximumDate?.getTime(),
startDate: options.startDate?.getTime(),
endDate: options.endDate?.getTime(),
});
Expand Down
2 changes: 1 addition & 1 deletion src/datepicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Platform } from 'react-native';

import type { DateTimePickerResult, DatePickerOptions } from './types';

export default class DatePickerAndroid {
export default class DatePicker {
static async show(options: DatePickerOptions): Promise<DateTimePickerResult> {
options;
throw new Error(`DatePicker is not supported on: ${Platform.OS}`);
Expand Down
2 changes: 1 addition & 1 deletion src/datetimepicker.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const RNMaterialDatetimePicker = (props: AndroidPickerProps) => {

useEffect(() => {
return () => {
MaterialDatetimePickerAndroid.dismiss(mode);
MaterialDatetimePickerAndroid.dismiss();
};
}, [mode]);

Expand Down
28 changes: 0 additions & 28 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,3 @@ export {
} from './types';

export default RNMaterialDatetimePicker;
// import { NativeModules, Platform } from 'react-native';

// const LINKING_ERROR =
// `The package 'react-native-material-datetime-picker' doesn't seem to be linked. Make sure: \n\n` +
// Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
// '- You rebuilt the app after installing the package\n' +
// '- You are not using Expo managed workflow\n';

// const RNMaterialTimePicker = NativeModules.RNMaterialTimePicker
// ? NativeModules.RNMaterialTimePicker
// : new Proxy(
// {},
// {
// get() {
// throw new Error(LINKING_ERROR);
// },
// }
// );

// export function show(options: {
// value: Date;
// minDate: Date;
// maxDate: Date;
// is24Hour: boolean;
// inputMode: 'clock' | 'keyboard';
// }): Promise<void> {
// return RNMaterialTimePicker.show(options);
// }
8 changes: 4 additions & 4 deletions src/picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import DatePickerAndroid from './datepicker';
import TimePickerAndroid from './timepicker';
import DatePicker from './datepicker';
import TimePicker from './timepicker';
import { AndroidPickerMode } from './types';

const pickers = {
[AndroidPickerMode.DATE]: DatePickerAndroid,
[AndroidPickerMode.TIME]: TimePickerAndroid,
[AndroidPickerMode.DATE]: DatePicker,
[AndroidPickerMode.TIME]: TimePicker,
};

export default pickers;
2 changes: 1 addition & 1 deletion src/timepicker.android.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const RNMaterialTimePicker = NativeModules.RNMaterialTimePicker
}
);

export default class TimePickerAndroid {
export default class TimePicker {
/**
* Shows the Android Material Design time picker dialog.
*/
Expand Down
2 changes: 1 addition & 1 deletion src/timepicker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { Platform } from 'react-native';

import type { DateTimePickerResult, TimePickerOptions } from './types';

export default class TimePickerAndroid {
export default class TimePicker {
static async show(options: TimePickerOptions): Promise<DateTimePickerResult> {
options;
throw new Error(`DatePicker is not supported on: ${Platform.OS}`);
Expand Down
18 changes: 10 additions & 8 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,34 +32,36 @@ export enum ActionType {
type BaseProps = Readonly<
ViewProps & {
value: Date;
title?: string;
onChange?: (date: Date) => void;
titleText?: string;
positiveButtonText?: string;
negativeButtonText?: string;
onConfirm?: (date: Date) => void;
onError?: (error: unknown) => void;
}
>;

export interface DatePickerOptions extends BaseProps {
mode?: AndroidPickerMode.DATE;
minDate?: Date;
maxDate?: Date;
minimumDate?: Date;
maximumDate?: Date;
startDate?: Date;
endDate?: Date;
is24Hours?: never;
inputMode?: AndroidDateInputMode;
type?: AndroidDatePickerType;
onDateRangeChange?: (startDate: Date, endDate: Date) => void;
onConfirmDateRange?: (startDate: Date, endDate: Date) => void;
}

export interface TimePickerOptions extends BaseProps {
mode?: AndroidPickerMode.TIME;
minDate?: never;
maxDate?: never;
minimumDate?: never;
maximumDate?: never;
startDate?: never;
endDate?: never;
is24Hour?: boolean;
inputMode?: AndroidTimeInputMode;
type?: never;
onDateRangeChange?: never;
onConfirmDateRange?: never;
}

export type AndroidPickerProps = DatePickerOptions | TimePickerOptions;
Expand Down
Loading