react-native-month-day-picker 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +269 -0
- package/lib/commonjs/BirthdayPicker.js +177 -0
- package/lib/commonjs/BirthdayPicker.js.map +1 -0
- package/lib/commonjs/BirthdayPickerModal.js +176 -0
- package/lib/commonjs/BirthdayPickerModal.js.map +1 -0
- package/lib/commonjs/constants.js +80 -0
- package/lib/commonjs/constants.js.map +1 -0
- package/lib/commonjs/hooks/useBirthdayPicker.js +90 -0
- package/lib/commonjs/hooks/useBirthdayPicker.js.map +1 -0
- package/lib/commonjs/index.js +89 -0
- package/lib/commonjs/index.js.map +1 -0
- package/lib/commonjs/types.js +6 -0
- package/lib/commonjs/types.js.map +1 -0
- package/lib/commonjs/utils/dateUtils.js +103 -0
- package/lib/commonjs/utils/dateUtils.js.map +1 -0
- package/lib/commonjs/utils/localeUtils.js +90 -0
- package/lib/commonjs/utils/localeUtils.js.map +1 -0
- package/lib/module/BirthdayPicker.js +169 -0
- package/lib/module/BirthdayPicker.js.map +1 -0
- package/lib/module/BirthdayPickerModal.js +169 -0
- package/lib/module/BirthdayPickerModal.js.map +1 -0
- package/lib/module/constants.js +74 -0
- package/lib/module/constants.js.map +1 -0
- package/lib/module/hooks/useBirthdayPicker.js +84 -0
- package/lib/module/hooks/useBirthdayPicker.js.map +1 -0
- package/lib/module/index.js +16 -0
- package/lib/module/index.js.map +1 -0
- package/lib/module/types.js +2 -0
- package/lib/module/types.js.map +1 -0
- package/lib/module/utils/dateUtils.js +92 -0
- package/lib/module/utils/dateUtils.js.map +1 -0
- package/lib/module/utils/localeUtils.js +81 -0
- package/lib/module/utils/localeUtils.js.map +1 -0
- package/lib/typescript/BirthdayPicker.d.ts +25 -0
- package/lib/typescript/BirthdayPicker.d.ts.map +1 -0
- package/lib/typescript/BirthdayPickerModal.d.ts +24 -0
- package/lib/typescript/BirthdayPickerModal.d.ts.map +1 -0
- package/lib/typescript/constants.d.ts +39 -0
- package/lib/typescript/constants.d.ts.map +1 -0
- package/lib/typescript/hooks/useBirthdayPicker.d.ts +17 -0
- package/lib/typescript/hooks/useBirthdayPicker.d.ts.map +1 -0
- package/lib/typescript/index.d.ts +8 -0
- package/lib/typescript/index.d.ts.map +1 -0
- package/lib/typescript/types.d.ts +160 -0
- package/lib/typescript/types.d.ts.map +1 -0
- package/lib/typescript/utils/dateUtils.d.ts +43 -0
- package/lib/typescript/utils/dateUtils.d.ts.map +1 -0
- package/lib/typescript/utils/localeUtils.d.ts +28 -0
- package/lib/typescript/utils/localeUtils.d.ts.map +1 -0
- package/package.json +137 -0
- package/src/BirthdayPicker.tsx +210 -0
- package/src/BirthdayPickerModal.tsx +192 -0
- package/src/constants.ts +64 -0
- package/src/hooks/useBirthdayPicker.ts +106 -0
- package/src/index.ts +31 -0
- package/src/types.ts +189 -0
- package/src/utils/dateUtils.ts +101 -0
- package/src/utils/localeUtils.ts +99 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,269 @@
|
|
|
1
|
+
# react-native-month-day-picker
|
|
2
|
+
|
|
3
|
+
A privacy-friendly birthday picker for React Native that uses only month and day (no year). Built on top of `@quidone/react-native-wheel-picker` for smooth, native-feeling scroll behavior and full Expo compatibility.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Privacy-friendly**: Only captures month and day, no year required
|
|
8
|
+
- **Expo Go compatible**: Works without custom native builds
|
|
9
|
+
- **Smooth scrolling**: Native-feeling wheel picker experience
|
|
10
|
+
- **Localization**: Full i18n support with customizable month formats
|
|
11
|
+
- **Leap day handling**: Configurable Feb 29 support
|
|
12
|
+
- **TypeScript**: Full type definitions included
|
|
13
|
+
- **Accessible**: Screen reader support with customizable labels
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install react-native-month-day-picker
|
|
19
|
+
# or
|
|
20
|
+
yarn add react-native-month-day-picker
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Peer Dependencies
|
|
24
|
+
|
|
25
|
+
This package requires the following peer dependencies:
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install react-native-gesture-handler react-native-reanimated
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
If you're using Expo, these may already be included. Otherwise, follow the installation instructions for:
|
|
32
|
+
|
|
33
|
+
- [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)
|
|
34
|
+
- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/)
|
|
35
|
+
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
### Basic Usage (Uncontrolled)
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
import { BirthdayPicker } from 'react-native-month-day-picker';
|
|
42
|
+
|
|
43
|
+
function MyComponent() {
|
|
44
|
+
return (
|
|
45
|
+
<BirthdayPicker
|
|
46
|
+
defaultValue={{ month: 1, day: 1 }}
|
|
47
|
+
onChange={(value) => console.log('Birthday:', value)}
|
|
48
|
+
/>
|
|
49
|
+
);
|
|
50
|
+
}
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### Controlled Mode
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { useState } from 'react';
|
|
57
|
+
import { BirthdayPicker, BirthdayValue } from 'react-native-month-day-picker';
|
|
58
|
+
|
|
59
|
+
function MyComponent() {
|
|
60
|
+
const [birthday, setBirthday] = useState<BirthdayValue>({
|
|
61
|
+
month: 6,
|
|
62
|
+
day: 15,
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
return <BirthdayPicker value={birthday} onChange={setBirthday} />;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Modal Presentation
|
|
70
|
+
|
|
71
|
+
```tsx
|
|
72
|
+
import { useState } from 'react';
|
|
73
|
+
import { Button } from 'react-native';
|
|
74
|
+
import {
|
|
75
|
+
BirthdayPickerModal,
|
|
76
|
+
BirthdayValue,
|
|
77
|
+
} from 'react-native-month-day-picker';
|
|
78
|
+
|
|
79
|
+
function MyComponent() {
|
|
80
|
+
const [visible, setVisible] = useState(false);
|
|
81
|
+
const [birthday, setBirthday] = useState<BirthdayValue>({
|
|
82
|
+
month: 12,
|
|
83
|
+
day: 25,
|
|
84
|
+
});
|
|
85
|
+
|
|
86
|
+
return (
|
|
87
|
+
<>
|
|
88
|
+
<Button title="Select Birthday" onPress={() => setVisible(true)} />
|
|
89
|
+
<BirthdayPickerModal
|
|
90
|
+
visible={visible}
|
|
91
|
+
value={birthday}
|
|
92
|
+
onConfirm={(value) => {
|
|
93
|
+
setBirthday(value);
|
|
94
|
+
setVisible(false);
|
|
95
|
+
}}
|
|
96
|
+
onCancel={() => setVisible(false)}
|
|
97
|
+
title="Select Your Birthday"
|
|
98
|
+
/>
|
|
99
|
+
</>
|
|
100
|
+
);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### Using the Hook
|
|
105
|
+
|
|
106
|
+
For custom implementations, use the `useBirthdayPicker` hook:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import { useBirthdayPicker } from 'react-native-month-day-picker';
|
|
110
|
+
|
|
111
|
+
function MyCustomPicker() {
|
|
112
|
+
const {
|
|
113
|
+
value,
|
|
114
|
+
setMonth,
|
|
115
|
+
setDay,
|
|
116
|
+
daysInMonth,
|
|
117
|
+
isValid,
|
|
118
|
+
} = useBirthdayPicker({
|
|
119
|
+
initialValue: { month: 3, day: 14 },
|
|
120
|
+
});
|
|
121
|
+
|
|
122
|
+
return (
|
|
123
|
+
// Your custom picker UI
|
|
124
|
+
);
|
|
125
|
+
}
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
## API Reference
|
|
129
|
+
|
|
130
|
+
### BirthdayValue
|
|
131
|
+
|
|
132
|
+
```typescript
|
|
133
|
+
type BirthdayValue = {
|
|
134
|
+
month: number; // 1-12 (January = 1)
|
|
135
|
+
day: number; // 1-31 (depends on month)
|
|
136
|
+
};
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### BirthdayPicker Props
|
|
140
|
+
|
|
141
|
+
| Prop | Type | Default | Description |
|
|
142
|
+
| ------------------------- | -------------------------------- | ---------------------- | ------------------------------------- |
|
|
143
|
+
| `value` | `BirthdayValue` | - | Current value (controlled mode) |
|
|
144
|
+
| `defaultValue` | `BirthdayValue` | `{ month: 1, day: 1 }` | Default value (uncontrolled mode) |
|
|
145
|
+
| `onChange` | `(value: BirthdayValue) => void` | - | Called when value changes |
|
|
146
|
+
| `locale` | `string` | `'en-US'` | BCP 47 locale for month names |
|
|
147
|
+
| `monthFormat` | `'long' \| 'short' \| 'numeric'` | `'long'` | Month display format |
|
|
148
|
+
| `allowLeapDay` | `boolean` | `true` | Whether Feb 29 is selectable |
|
|
149
|
+
| `disabled` | `boolean` | `false` | Disable interaction |
|
|
150
|
+
| `testID` | `string` | - | Test ID for testing |
|
|
151
|
+
| `style` | `ViewStyle` | - | Container style |
|
|
152
|
+
| `itemHeight` | `number` | `40` | Height of each wheel item |
|
|
153
|
+
| `visibleItems` | `number` | `5` | Number of visible items (must be odd) |
|
|
154
|
+
| `monthAccessibilityLabel` | `string` | `'Month picker'` | Accessibility label for month wheel |
|
|
155
|
+
| `dayAccessibilityLabel` | `string` | `'Day picker'` | Accessibility label for day wheel |
|
|
156
|
+
|
|
157
|
+
### BirthdayPickerModal Props
|
|
158
|
+
|
|
159
|
+
Includes all `BirthdayPicker` props, plus:
|
|
160
|
+
|
|
161
|
+
| Prop | Type | Default | Description |
|
|
162
|
+
| --------------- | -------------------------------- | ------------------- | ------------------------- |
|
|
163
|
+
| `visible` | `boolean` | - | Whether modal is visible |
|
|
164
|
+
| `onConfirm` | `(value: BirthdayValue) => void` | - | Called when user confirms |
|
|
165
|
+
| `onCancel` | `() => void` | - | Called when user cancels |
|
|
166
|
+
| `title` | `string` | `'Select Birthday'` | Modal title |
|
|
167
|
+
| `confirmText` | `string` | `'Confirm'` | Confirm button text |
|
|
168
|
+
| `cancelText` | `string` | `'Cancel'` | Cancel button text |
|
|
169
|
+
| `animationType` | `'slide' \| 'fade' \| 'none'` | `'slide'` | Modal animation |
|
|
170
|
+
|
|
171
|
+
### useBirthdayPicker Hook
|
|
172
|
+
|
|
173
|
+
```typescript
|
|
174
|
+
function useBirthdayPicker(options?: {
|
|
175
|
+
initialValue?: BirthdayValue;
|
|
176
|
+
allowLeapDay?: boolean;
|
|
177
|
+
}): {
|
|
178
|
+
value: BirthdayValue;
|
|
179
|
+
setMonth: (month: number) => void;
|
|
180
|
+
setDay: (day: number) => void;
|
|
181
|
+
setValue: (value: BirthdayValue) => void;
|
|
182
|
+
daysInMonth: number;
|
|
183
|
+
isValid: boolean;
|
|
184
|
+
};
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
## Localization
|
|
188
|
+
|
|
189
|
+
The picker supports any locale available in `Intl.DateTimeFormat`:
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
// German
|
|
193
|
+
<BirthdayPicker locale="de-DE" />
|
|
194
|
+
|
|
195
|
+
// Japanese
|
|
196
|
+
<BirthdayPicker locale="ja-JP" />
|
|
197
|
+
|
|
198
|
+
// French with short format
|
|
199
|
+
<BirthdayPicker locale="fr-FR" monthFormat="short" />
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
## Leap Day Handling
|
|
203
|
+
|
|
204
|
+
By default, February shows 29 days to accommodate leap day birthdays. To disable:
|
|
205
|
+
|
|
206
|
+
```tsx
|
|
207
|
+
<BirthdayPicker allowLeapDay={false} />
|
|
208
|
+
```
|
|
209
|
+
|
|
210
|
+
When `allowLeapDay` is `false`:
|
|
211
|
+
|
|
212
|
+
- February shows 28 days
|
|
213
|
+
- Selecting a day > 28 in February will clamp to 28
|
|
214
|
+
|
|
215
|
+
## Day Clamping
|
|
216
|
+
|
|
217
|
+
When the month changes, the day is automatically clamped if it exceeds the maximum for the new month:
|
|
218
|
+
|
|
219
|
+
- March 31 → April = April 30
|
|
220
|
+
- January 31 → February = February 29 (or 28 if `allowLeapDay={false}`)
|
|
221
|
+
|
|
222
|
+
## Utility Functions
|
|
223
|
+
|
|
224
|
+
The package exports utility functions for advanced use cases:
|
|
225
|
+
|
|
226
|
+
```typescript
|
|
227
|
+
import {
|
|
228
|
+
getDaysInMonth,
|
|
229
|
+
clampDay,
|
|
230
|
+
isValidBirthday,
|
|
231
|
+
getMonthNames,
|
|
232
|
+
formatMonth,
|
|
233
|
+
} from 'react-native-month-day-picker';
|
|
234
|
+
|
|
235
|
+
// Get days in a month
|
|
236
|
+
getDaysInMonth(2, true); // 29 (February with leap day)
|
|
237
|
+
getDaysInMonth(2, false); // 28 (February without leap day)
|
|
238
|
+
|
|
239
|
+
// Clamp a day to valid range
|
|
240
|
+
clampDay(31, 4); // 30 (April has 30 days)
|
|
241
|
+
|
|
242
|
+
// Validate a birthday
|
|
243
|
+
isValidBirthday({ month: 2, day: 30 }); // false
|
|
244
|
+
|
|
245
|
+
// Get localized month names
|
|
246
|
+
getMonthNames('de-DE', 'long'); // ['', 'Januar', 'Februar', ...]
|
|
247
|
+
|
|
248
|
+
// Format a single month
|
|
249
|
+
formatMonth(1, 'en-US', 'short'); // 'Jan'
|
|
250
|
+
```
|
|
251
|
+
|
|
252
|
+
## TypeScript
|
|
253
|
+
|
|
254
|
+
Full TypeScript support is included:
|
|
255
|
+
|
|
256
|
+
```typescript
|
|
257
|
+
import type {
|
|
258
|
+
BirthdayValue,
|
|
259
|
+
MonthFormat,
|
|
260
|
+
BirthdayPickerProps,
|
|
261
|
+
BirthdayPickerModalProps,
|
|
262
|
+
UseBirthdayPickerOptions,
|
|
263
|
+
UseBirthdayPickerReturn,
|
|
264
|
+
} from 'react-native-month-day-picker';
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
## License
|
|
268
|
+
|
|
269
|
+
MIT
|
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.BirthdayPicker = BirthdayPicker;
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactNative = require("react-native");
|
|
10
|
+
var _reactNativeWheelPicker = _interopRequireDefault(require("@quidone/react-native-wheel-picker"));
|
|
11
|
+
var _constants = require("./constants");
|
|
12
|
+
var _dateUtils = require("./utils/dateUtils");
|
|
13
|
+
var _localeUtils = require("./utils/localeUtils");
|
|
14
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
|
+
/**
|
|
17
|
+
* Item type for wheel picker
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* A birthday picker component that allows selecting month and day.
|
|
22
|
+
* Does not include year for privacy-friendly birthday selection.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```tsx
|
|
26
|
+
* // Uncontrolled mode
|
|
27
|
+
* <BirthdayPicker
|
|
28
|
+
* defaultValue={{ month: 6, day: 15 }}
|
|
29
|
+
* onChange={(value) => console.log(value)}
|
|
30
|
+
* />
|
|
31
|
+
*
|
|
32
|
+
* // Controlled mode
|
|
33
|
+
* const [birthday, setBirthday] = useState({ month: 1, day: 1 });
|
|
34
|
+
* <BirthdayPicker
|
|
35
|
+
* value={birthday}
|
|
36
|
+
* onChange={setBirthday}
|
|
37
|
+
* />
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
function BirthdayPicker({
|
|
41
|
+
value: controlledValue,
|
|
42
|
+
defaultValue = _constants.DEFAULT_BIRTHDAY_VALUE,
|
|
43
|
+
onChange,
|
|
44
|
+
locale = _constants.DEFAULT_LOCALE,
|
|
45
|
+
monthFormat = _constants.DEFAULT_MONTH_FORMAT,
|
|
46
|
+
allowLeapDay = true,
|
|
47
|
+
disabled = false,
|
|
48
|
+
testID,
|
|
49
|
+
style,
|
|
50
|
+
itemHeight = _constants.DEFAULT_ITEM_HEIGHT,
|
|
51
|
+
visibleItems = _constants.DEFAULT_VISIBLE_ITEMS,
|
|
52
|
+
monthAccessibilityLabel = 'Month picker',
|
|
53
|
+
dayAccessibilityLabel = 'Day picker'
|
|
54
|
+
}) {
|
|
55
|
+
// Determine if we're in controlled or uncontrolled mode
|
|
56
|
+
const isControlled = controlledValue !== undefined;
|
|
57
|
+
|
|
58
|
+
// Internal state for uncontrolled mode
|
|
59
|
+
const [internalValue, setInternalValue] = _react.default.useState(() => controlledValue ?? defaultValue);
|
|
60
|
+
|
|
61
|
+
// The actual value to display
|
|
62
|
+
const value = isControlled ? controlledValue : internalValue;
|
|
63
|
+
|
|
64
|
+
// Track previous month to detect changes for day clamping
|
|
65
|
+
const prevMonthRef = (0, _react.useRef)(value.month);
|
|
66
|
+
|
|
67
|
+
// Get month names based on locale and format
|
|
68
|
+
const monthNames = (0, _react.useMemo)(() => (0, _localeUtils.getMonthNames)(locale, monthFormat), [locale, monthFormat]);
|
|
69
|
+
|
|
70
|
+
// Generate month items for wheel picker
|
|
71
|
+
const monthItems = (0, _react.useMemo)(() => {
|
|
72
|
+
return (0, _dateUtils.getMonthsArray)().map(month => ({
|
|
73
|
+
value: month,
|
|
74
|
+
label: monthNames[month]
|
|
75
|
+
}));
|
|
76
|
+
}, [monthNames]);
|
|
77
|
+
|
|
78
|
+
// Generate day items based on selected month
|
|
79
|
+
const dayItems = (0, _react.useMemo)(() => {
|
|
80
|
+
return (0, _dateUtils.getDaysArray)(value.month, allowLeapDay).map(day => ({
|
|
81
|
+
value: day,
|
|
82
|
+
label: (0, _localeUtils.formatDay)(day, locale)
|
|
83
|
+
}));
|
|
84
|
+
}, [value.month, allowLeapDay, locale]);
|
|
85
|
+
|
|
86
|
+
// Handle internal value changes
|
|
87
|
+
const handleValueChange = (0, _react.useCallback)(newValue => {
|
|
88
|
+
if (!isControlled) {
|
|
89
|
+
setInternalValue(newValue);
|
|
90
|
+
}
|
|
91
|
+
onChange?.(newValue);
|
|
92
|
+
}, [isControlled, onChange]);
|
|
93
|
+
|
|
94
|
+
// Handle month change
|
|
95
|
+
const handleMonthChange = (0, _react.useCallback)(({
|
|
96
|
+
item
|
|
97
|
+
}) => {
|
|
98
|
+
const newMonth = item.value;
|
|
99
|
+
const clampedDay = (0, _dateUtils.clampDay)(value.day, newMonth, allowLeapDay);
|
|
100
|
+
const newValue = {
|
|
101
|
+
month: newMonth,
|
|
102
|
+
day: clampedDay
|
|
103
|
+
};
|
|
104
|
+
handleValueChange(newValue);
|
|
105
|
+
}, [value.day, allowLeapDay, handleValueChange]);
|
|
106
|
+
|
|
107
|
+
// Handle day change
|
|
108
|
+
const handleDayChange = (0, _react.useCallback)(({
|
|
109
|
+
item
|
|
110
|
+
}) => {
|
|
111
|
+
const newValue = {
|
|
112
|
+
month: value.month,
|
|
113
|
+
day: item.value
|
|
114
|
+
};
|
|
115
|
+
handleValueChange(newValue);
|
|
116
|
+
}, [value.month, handleValueChange]);
|
|
117
|
+
|
|
118
|
+
// Sync internal state when controlled value changes
|
|
119
|
+
(0, _react.useEffect)(() => {
|
|
120
|
+
if (isControlled && controlledValue) {
|
|
121
|
+
setInternalValue(controlledValue);
|
|
122
|
+
}
|
|
123
|
+
}, [isControlled, controlledValue]);
|
|
124
|
+
|
|
125
|
+
// Clamp day when month changes and day exceeds max days
|
|
126
|
+
(0, _react.useEffect)(() => {
|
|
127
|
+
if (value.month !== prevMonthRef.current) {
|
|
128
|
+
const maxDays = (0, _dateUtils.getDaysInMonth)(value.month, allowLeapDay);
|
|
129
|
+
if (value.day > maxDays) {
|
|
130
|
+
const clampedValue = {
|
|
131
|
+
month: value.month,
|
|
132
|
+
day: maxDays
|
|
133
|
+
};
|
|
134
|
+
handleValueChange(clampedValue);
|
|
135
|
+
}
|
|
136
|
+
prevMonthRef.current = value.month;
|
|
137
|
+
}
|
|
138
|
+
}, [value.month, value.day, allowLeapDay, handleValueChange]);
|
|
139
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
140
|
+
style: [styles.container, style],
|
|
141
|
+
testID: testID,
|
|
142
|
+
pointerEvents: disabled ? 'none' : 'auto',
|
|
143
|
+
accessibilityRole: "adjustable"
|
|
144
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
145
|
+
style: styles.pickerContainer,
|
|
146
|
+
accessibilityLabel: monthAccessibilityLabel
|
|
147
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeWheelPicker.default, {
|
|
148
|
+
data: monthItems,
|
|
149
|
+
value: value.month,
|
|
150
|
+
onValueChanged: handleMonthChange,
|
|
151
|
+
itemHeight: itemHeight,
|
|
152
|
+
visibleItemCount: visibleItems,
|
|
153
|
+
testID: testID ? `${testID}-month` : undefined
|
|
154
|
+
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
155
|
+
style: styles.pickerContainer,
|
|
156
|
+
accessibilityLabel: dayAccessibilityLabel
|
|
157
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNativeWheelPicker.default, {
|
|
158
|
+
data: dayItems,
|
|
159
|
+
value: value.day,
|
|
160
|
+
onValueChanged: handleDayChange,
|
|
161
|
+
itemHeight: itemHeight,
|
|
162
|
+
visibleItemCount: visibleItems,
|
|
163
|
+
testID: testID ? `${testID}-day` : undefined
|
|
164
|
+
})));
|
|
165
|
+
}
|
|
166
|
+
const styles = _reactNative.StyleSheet.create({
|
|
167
|
+
container: {
|
|
168
|
+
flexDirection: 'row',
|
|
169
|
+
alignItems: 'center',
|
|
170
|
+
justifyContent: 'center'
|
|
171
|
+
},
|
|
172
|
+
pickerContainer: {
|
|
173
|
+
flex: 1
|
|
174
|
+
}
|
|
175
|
+
});
|
|
176
|
+
var _default = exports.default = BirthdayPicker;
|
|
177
|
+
//# sourceMappingURL=BirthdayPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_reactNativeWheelPicker","_interopRequireDefault","_constants","_dateUtils","_localeUtils","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BirthdayPicker","value","controlledValue","defaultValue","DEFAULT_BIRTHDAY_VALUE","onChange","locale","DEFAULT_LOCALE","monthFormat","DEFAULT_MONTH_FORMAT","allowLeapDay","disabled","testID","style","itemHeight","DEFAULT_ITEM_HEIGHT","visibleItems","DEFAULT_VISIBLE_ITEMS","monthAccessibilityLabel","dayAccessibilityLabel","isControlled","undefined","internalValue","setInternalValue","React","useState","prevMonthRef","useRef","month","monthNames","useMemo","getMonthNames","monthItems","getMonthsArray","map","label","dayItems","getDaysArray","day","formatDay","handleValueChange","useCallback","newValue","handleMonthChange","item","newMonth","clampedDay","clampDay","handleDayChange","useEffect","current","maxDays","getDaysInMonth","clampedValue","createElement","View","styles","container","pointerEvents","accessibilityRole","pickerContainer","accessibilityLabel","data","onValueChanged","visibleItemCount","StyleSheet","create","flexDirection","alignItems","justifyContent","flex","_default","exports"],"sourceRoot":"../../src","sources":["BirthdayPicker.tsx"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.BirthdayPickerModal = BirthdayPickerModal;
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _reactNative = require("react-native");
|
|
10
|
+
var _BirthdayPicker = require("./BirthdayPicker");
|
|
11
|
+
var _constants = require("./constants");
|
|
12
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
|
+
/**
|
|
14
|
+
* A modal wrapper for BirthdayPicker that provides confirm/cancel functionality.
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* ```tsx
|
|
18
|
+
* const [visible, setVisible] = useState(false);
|
|
19
|
+
* const [birthday, setBirthday] = useState({ month: 1, day: 1 });
|
|
20
|
+
*
|
|
21
|
+
* <BirthdayPickerModal
|
|
22
|
+
* visible={visible}
|
|
23
|
+
* value={birthday}
|
|
24
|
+
* onConfirm={(value) => {
|
|
25
|
+
* setBirthday(value);
|
|
26
|
+
* setVisible(false);
|
|
27
|
+
* }}
|
|
28
|
+
* onCancel={() => setVisible(false)}
|
|
29
|
+
* />
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
function BirthdayPickerModal({
|
|
33
|
+
visible,
|
|
34
|
+
onConfirm,
|
|
35
|
+
onCancel,
|
|
36
|
+
value: externalValue,
|
|
37
|
+
defaultValue = _constants.DEFAULT_BIRTHDAY_VALUE,
|
|
38
|
+
title = 'Select Birthday',
|
|
39
|
+
confirmText = 'Confirm',
|
|
40
|
+
cancelText = 'Cancel',
|
|
41
|
+
animationType = 'slide',
|
|
42
|
+
locale,
|
|
43
|
+
monthFormat,
|
|
44
|
+
allowLeapDay,
|
|
45
|
+
disabled,
|
|
46
|
+
testID,
|
|
47
|
+
itemHeight,
|
|
48
|
+
visibleItems,
|
|
49
|
+
monthAccessibilityLabel,
|
|
50
|
+
dayAccessibilityLabel
|
|
51
|
+
}) {
|
|
52
|
+
// Internal state to track the selection while modal is open
|
|
53
|
+
const [internalValue, setInternalValue] = (0, _react.useState)(() => externalValue ?? defaultValue);
|
|
54
|
+
|
|
55
|
+
// Reset internal value when modal opens or external value changes
|
|
56
|
+
(0, _react.useEffect)(() => {
|
|
57
|
+
if (visible) {
|
|
58
|
+
setInternalValue(externalValue ?? defaultValue);
|
|
59
|
+
}
|
|
60
|
+
}, [visible, externalValue, defaultValue]);
|
|
61
|
+
|
|
62
|
+
// Handle value changes from the picker
|
|
63
|
+
const handleChange = (0, _react.useCallback)(newValue => {
|
|
64
|
+
setInternalValue(newValue);
|
|
65
|
+
}, []);
|
|
66
|
+
|
|
67
|
+
// Handle confirm button press
|
|
68
|
+
const handleConfirm = (0, _react.useCallback)(() => {
|
|
69
|
+
onConfirm(internalValue);
|
|
70
|
+
}, [onConfirm, internalValue]);
|
|
71
|
+
|
|
72
|
+
// Handle cancel button press
|
|
73
|
+
const handleCancel = (0, _react.useCallback)(() => {
|
|
74
|
+
onCancel();
|
|
75
|
+
}, [onCancel]);
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
|
|
77
|
+
visible: visible,
|
|
78
|
+
transparent: true,
|
|
79
|
+
animationType: animationType,
|
|
80
|
+
onRequestClose: handleCancel,
|
|
81
|
+
testID: testID
|
|
82
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
83
|
+
style: styles.overlay
|
|
84
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.SafeAreaView, {
|
|
85
|
+
style: styles.safeArea
|
|
86
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
87
|
+
style: styles.container
|
|
88
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
89
|
+
style: styles.header
|
|
90
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
91
|
+
onPress: handleCancel,
|
|
92
|
+
style: styles.headerButton,
|
|
93
|
+
accessibilityRole: "button",
|
|
94
|
+
accessibilityLabel: cancelText,
|
|
95
|
+
testID: testID ? `${testID}-cancel` : undefined
|
|
96
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
97
|
+
style: styles.cancelText
|
|
98
|
+
}, cancelText)), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
99
|
+
style: styles.title
|
|
100
|
+
}, title), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
|
|
101
|
+
onPress: handleConfirm,
|
|
102
|
+
style: styles.headerButton,
|
|
103
|
+
accessibilityRole: "button",
|
|
104
|
+
accessibilityLabel: confirmText,
|
|
105
|
+
testID: testID ? `${testID}-confirm` : undefined
|
|
106
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
107
|
+
style: styles.confirmText
|
|
108
|
+
}, confirmText))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
109
|
+
style: styles.pickerWrapper
|
|
110
|
+
}, /*#__PURE__*/_react.default.createElement(_BirthdayPicker.BirthdayPicker, {
|
|
111
|
+
value: internalValue,
|
|
112
|
+
onChange: handleChange,
|
|
113
|
+
locale: locale,
|
|
114
|
+
monthFormat: monthFormat,
|
|
115
|
+
allowLeapDay: allowLeapDay,
|
|
116
|
+
disabled: disabled,
|
|
117
|
+
itemHeight: itemHeight,
|
|
118
|
+
visibleItems: visibleItems,
|
|
119
|
+
monthAccessibilityLabel: monthAccessibilityLabel,
|
|
120
|
+
dayAccessibilityLabel: dayAccessibilityLabel,
|
|
121
|
+
testID: testID ? `${testID}-picker` : undefined
|
|
122
|
+
}))))));
|
|
123
|
+
}
|
|
124
|
+
const styles = _reactNative.StyleSheet.create({
|
|
125
|
+
overlay: {
|
|
126
|
+
flex: 1,
|
|
127
|
+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
128
|
+
justifyContent: 'flex-end'
|
|
129
|
+
},
|
|
130
|
+
safeArea: {
|
|
131
|
+
backgroundColor: 'white',
|
|
132
|
+
borderTopLeftRadius: 16,
|
|
133
|
+
borderTopRightRadius: 16,
|
|
134
|
+
overflow: 'hidden'
|
|
135
|
+
},
|
|
136
|
+
container: {
|
|
137
|
+
backgroundColor: 'white',
|
|
138
|
+
paddingBottom: _reactNative.Platform.OS === 'android' ? 16 : 0
|
|
139
|
+
},
|
|
140
|
+
header: {
|
|
141
|
+
flexDirection: 'row',
|
|
142
|
+
alignItems: 'center',
|
|
143
|
+
justifyContent: 'space-between',
|
|
144
|
+
paddingHorizontal: 16,
|
|
145
|
+
paddingVertical: 12,
|
|
146
|
+
borderBottomWidth: _reactNative.StyleSheet.hairlineWidth,
|
|
147
|
+
borderBottomColor: '#ccc'
|
|
148
|
+
},
|
|
149
|
+
headerButton: {
|
|
150
|
+
paddingVertical: 8,
|
|
151
|
+
paddingHorizontal: 4,
|
|
152
|
+
minWidth: 60
|
|
153
|
+
},
|
|
154
|
+
title: {
|
|
155
|
+
fontSize: 17,
|
|
156
|
+
fontWeight: '600',
|
|
157
|
+
color: '#000',
|
|
158
|
+
textAlign: 'center',
|
|
159
|
+
flex: 1
|
|
160
|
+
},
|
|
161
|
+
cancelText: {
|
|
162
|
+
fontSize: 17,
|
|
163
|
+
color: '#007AFF'
|
|
164
|
+
},
|
|
165
|
+
confirmText: {
|
|
166
|
+
fontSize: 17,
|
|
167
|
+
fontWeight: '600',
|
|
168
|
+
color: '#007AFF',
|
|
169
|
+
textAlign: 'right'
|
|
170
|
+
},
|
|
171
|
+
pickerWrapper: {
|
|
172
|
+
paddingVertical: 16
|
|
173
|
+
}
|
|
174
|
+
});
|
|
175
|
+
var _default = exports.default = BirthdayPickerModal;
|
|
176
|
+
//# sourceMappingURL=BirthdayPickerModal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_BirthdayPicker","_constants","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BirthdayPickerModal","visible","onConfirm","onCancel","value","externalValue","defaultValue","DEFAULT_BIRTHDAY_VALUE","title","confirmText","cancelText","animationType","locale","monthFormat","allowLeapDay","disabled","testID","itemHeight","visibleItems","monthAccessibilityLabel","dayAccessibilityLabel","internalValue","setInternalValue","useState","useEffect","handleChange","useCallback","newValue","handleConfirm","handleCancel","createElement","Modal","transparent","onRequestClose","View","style","styles","overlay","SafeAreaView","safeArea","container","header","TouchableOpacity","onPress","headerButton","accessibilityRole","accessibilityLabel","undefined","Text","pickerWrapper","BirthdayPicker","onChange","StyleSheet","create","flex","backgroundColor","justifyContent","borderTopLeftRadius","borderTopRightRadius","overflow","paddingBottom","Platform","OS","flexDirection","alignItems","paddingHorizontal","paddingVertical","borderBottomWidth","hairlineWidth","borderBottomColor","minWidth","fontSize","fontWeight","color","textAlign","_default","exports"],"sourceRoot":"../../src","sources":["BirthdayPickerModal.tsx"],"mappings":"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","ignoreList":[]}
|