@khanacademy/wonder-blocks-birthday-picker 1.0.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/CHANGELOG.md +12 -0
- package/dist/es/index.js +250 -0
- package/dist/index.js +427 -0
- package/dist/index.js.flow +2 -0
- package/package.json +35 -0
- package/src/components/__docs__/birthday-picker.argtypes.js +38 -0
- package/src/components/__docs__/birthday-picker.stories.js +89 -0
- package/src/components/__tests__/birthday-picker.test.js +420 -0
- package/src/components/birthday-picker.js +308 -0
- package/src/index.js +6 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# @khanacademy/wonder-blocks-birthday-picker
|
|
2
|
+
|
|
3
|
+
## 1.0.0
|
|
4
|
+
### Major Changes
|
|
5
|
+
|
|
6
|
+
- 11c87db3: - Added `wonder-blocks-birthday-picker`.
|
|
7
|
+
- Dropdown: Updated some styles from `backgroundColor` to `background` to avoid some warnings on unit tests.
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies [11c87db3]
|
|
12
|
+
- @khanacademy/wonder-blocks-dropdown@2.6.3
|
package/dist/es/index.js
ADDED
|
@@ -0,0 +1,250 @@
|
|
|
1
|
+
import _extends from '@babel/runtime/helpers/extends';
|
|
2
|
+
import moment from 'moment';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { View } from '@khanacademy/wonder-blocks-core';
|
|
5
|
+
import { Strut } from '@khanacademy/wonder-blocks-layout';
|
|
6
|
+
import Spacing from '@khanacademy/wonder-blocks-spacing';
|
|
7
|
+
import { Body } from '@khanacademy/wonder-blocks-typography';
|
|
8
|
+
import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
|
|
9
|
+
import Color from '@khanacademy/wonder-blocks-color';
|
|
10
|
+
import { SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
|
|
11
|
+
|
|
12
|
+
// Flow doesn't know about the getYear property on Date for some reason!
|
|
13
|
+
// $FlowFixMe[prop-missing]
|
|
14
|
+
const CUR_YEAR = new Date().getYear() + 1900; // Only exported internally for testing/documentation purposes.
|
|
15
|
+
|
|
16
|
+
const defaultLabels = Object.freeze({
|
|
17
|
+
errorMessage: "Please select a valid birthdate.",
|
|
18
|
+
month: "Month",
|
|
19
|
+
year: "Year",
|
|
20
|
+
day: "Day"
|
|
21
|
+
});
|
|
22
|
+
/**
|
|
23
|
+
* Birthday Picker. Similar to a datepicker, but specifically for birthdates.
|
|
24
|
+
* We don't want to show a calendar in this case as it can be quite tedious to
|
|
25
|
+
* try and select a date that's many years old. Instead, we use a set of
|
|
26
|
+
* dropdowns to achieve a similar effect.
|
|
27
|
+
*
|
|
28
|
+
* More information on this pattern:
|
|
29
|
+
* https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a
|
|
30
|
+
*
|
|
31
|
+
* Arguably, this should probably even be 3 textfields, but that would be a
|
|
32
|
+
* larger design change, more info:
|
|
33
|
+
* https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/
|
|
34
|
+
*
|
|
35
|
+
* **NOTE:** This component is uncontrolled.
|
|
36
|
+
*
|
|
37
|
+
* ### Usage
|
|
38
|
+
*
|
|
39
|
+
* ```jsx
|
|
40
|
+
* import {BirthdayPicker} from "@khanacademy/wonder-blocks-dates";
|
|
41
|
+
*
|
|
42
|
+
* <BirthdayPicker
|
|
43
|
+
* defaultValue="2021-05-26"
|
|
44
|
+
* onChange={(date) => {setDate(date)}}
|
|
45
|
+
* />
|
|
46
|
+
* ```
|
|
47
|
+
*/
|
|
48
|
+
|
|
49
|
+
class BirthdayPicker extends React.Component {
|
|
50
|
+
/**
|
|
51
|
+
* Strings used for placeholders and error message. These are used this way
|
|
52
|
+
* to support i18n.
|
|
53
|
+
* NOTE: This is a field rather than state to avoid re-rendering the entire
|
|
54
|
+
* component. Also, we don't need to use state because these strings are
|
|
55
|
+
* only needed on mount.
|
|
56
|
+
*/
|
|
57
|
+
constructor(props) {
|
|
58
|
+
super(props);
|
|
59
|
+
this.lastChangeValue = null;
|
|
60
|
+
|
|
61
|
+
this.reportChange = value => {
|
|
62
|
+
if (value !== this.lastChangeValue) {
|
|
63
|
+
this.lastChangeValue = value;
|
|
64
|
+
this.props.onChange(value);
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
this.handleChange = () => {
|
|
69
|
+
const {
|
|
70
|
+
month,
|
|
71
|
+
day,
|
|
72
|
+
year
|
|
73
|
+
} = this.state; // If any of the values haven't been set then our overall value is
|
|
74
|
+
// equal to null
|
|
75
|
+
|
|
76
|
+
if (month === null || day === null || year === null) {
|
|
77
|
+
this.reportChange(null);
|
|
78
|
+
return;
|
|
79
|
+
} // This is a legal call to Moment, but our Moment types don't
|
|
80
|
+
// recognize it.
|
|
81
|
+
// $FlowFixMe[incompatible-call]
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
const date = moment([year, month, day]); // If the date is in the future or is invalid then we want to show
|
|
85
|
+
// an error to the user and return a null value.
|
|
86
|
+
|
|
87
|
+
if (date.isAfter() || !date.isValid()) {
|
|
88
|
+
this.setState({
|
|
89
|
+
error: this.labels.errorMessage
|
|
90
|
+
});
|
|
91
|
+
this.reportChange(null);
|
|
92
|
+
} else {
|
|
93
|
+
this.setState({
|
|
94
|
+
error: null
|
|
95
|
+
}); // If the date picker is in a non-English language, we still
|
|
96
|
+
// want to generate an English date.
|
|
97
|
+
|
|
98
|
+
this.reportChange(date.locale("en").format("YYYY-MM-DD"));
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
this.handleMonthChange = month => {
|
|
103
|
+
this.setState({
|
|
104
|
+
month
|
|
105
|
+
}, this.handleChange);
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
this.handleDayChange = day => {
|
|
109
|
+
this.setState({
|
|
110
|
+
day
|
|
111
|
+
}, this.handleChange);
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
this.handleYearChange = year => {
|
|
115
|
+
this.setState({
|
|
116
|
+
year
|
|
117
|
+
}, this.handleChange);
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
this.lastChangeValue = props.defaultValue || null;
|
|
121
|
+
this.state = this.getStateFromDefault();
|
|
122
|
+
}
|
|
123
|
+
/**
|
|
124
|
+
* Calculates the initial state values based on the default value.
|
|
125
|
+
*/
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
getStateFromDefault() {
|
|
129
|
+
const {
|
|
130
|
+
defaultValue
|
|
131
|
+
} = this.props;
|
|
132
|
+
const initialState = {
|
|
133
|
+
month: null,
|
|
134
|
+
day: null,
|
|
135
|
+
year: null,
|
|
136
|
+
error: null
|
|
137
|
+
}; // merge custom labels with the default ones
|
|
138
|
+
|
|
139
|
+
this.labels = _extends({}, defaultLabels, this.props.labels); // If a default value was provided then we use moment to convert it
|
|
140
|
+
// into a date that we can use to populate the
|
|
141
|
+
|
|
142
|
+
if (defaultValue) {
|
|
143
|
+
const date = moment(defaultValue);
|
|
144
|
+
|
|
145
|
+
if (date.isValid()) {
|
|
146
|
+
initialState.month = String(date.month());
|
|
147
|
+
initialState.day = String(date.date());
|
|
148
|
+
initialState.year = String(date.year());
|
|
149
|
+
} // If the date is in the future or is invalid then we want to show
|
|
150
|
+
// an error to the user.
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
if (date.isAfter() || !date.isValid()) {
|
|
154
|
+
initialState.error = this.labels.errorMessage;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
return initialState;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
maybeRenderError() {
|
|
162
|
+
const {
|
|
163
|
+
error
|
|
164
|
+
} = this.state;
|
|
165
|
+
|
|
166
|
+
if (!error) {
|
|
167
|
+
return null;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
|
|
171
|
+
size: Spacing.xxxSmall_4
|
|
172
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
173
|
+
style: {
|
|
174
|
+
flexDirection: "row"
|
|
175
|
+
},
|
|
176
|
+
role: "alert"
|
|
177
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
178
|
+
size: "small",
|
|
179
|
+
icon: icons.info,
|
|
180
|
+
color: Color.red,
|
|
181
|
+
style: {
|
|
182
|
+
marginTop: 3
|
|
183
|
+
},
|
|
184
|
+
"aria-hidden": "true"
|
|
185
|
+
}), /*#__PURE__*/React.createElement(Strut, {
|
|
186
|
+
size: Spacing.xxxSmall_4
|
|
187
|
+
}), /*#__PURE__*/React.createElement(Body, {
|
|
188
|
+
style: {
|
|
189
|
+
color: Color.red
|
|
190
|
+
}
|
|
191
|
+
}, error)));
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
render() {
|
|
195
|
+
const {
|
|
196
|
+
month,
|
|
197
|
+
day,
|
|
198
|
+
year
|
|
199
|
+
} = this.state;
|
|
200
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
|
|
201
|
+
testId: "birthday-picker",
|
|
202
|
+
style: {
|
|
203
|
+
flexDirection: "row"
|
|
204
|
+
}
|
|
205
|
+
}, /*#__PURE__*/React.createElement(SingleSelect, {
|
|
206
|
+
placeholder: this.labels.month,
|
|
207
|
+
onChange: this.handleMonthChange,
|
|
208
|
+
selectedValue: month,
|
|
209
|
+
style: {
|
|
210
|
+
minWidth: 110
|
|
211
|
+
},
|
|
212
|
+
testId: "birthday-picker-month"
|
|
213
|
+
}, moment.monthsShort().map((month, i) => /*#__PURE__*/React.createElement(OptionItem, {
|
|
214
|
+
key: month,
|
|
215
|
+
label: month,
|
|
216
|
+
value: String(i)
|
|
217
|
+
}))), /*#__PURE__*/React.createElement(Strut, {
|
|
218
|
+
size: Spacing.xSmall_8
|
|
219
|
+
}), /*#__PURE__*/React.createElement(SingleSelect, {
|
|
220
|
+
placeholder: this.labels.day,
|
|
221
|
+
onChange: this.handleDayChange,
|
|
222
|
+
selectedValue: day,
|
|
223
|
+
style: {
|
|
224
|
+
minWidth: 100
|
|
225
|
+
},
|
|
226
|
+
testId: "birthday-picker-day"
|
|
227
|
+
}, Array.from(Array(31)).map((_, day) => /*#__PURE__*/React.createElement(OptionItem, {
|
|
228
|
+
key: String(day + 1),
|
|
229
|
+
label: String(day + 1),
|
|
230
|
+
value: String(day + 1)
|
|
231
|
+
}))), /*#__PURE__*/React.createElement(Strut, {
|
|
232
|
+
size: Spacing.xSmall_8
|
|
233
|
+
}), /*#__PURE__*/React.createElement(SingleSelect, {
|
|
234
|
+
placeholder: this.labels.year,
|
|
235
|
+
onChange: this.handleYearChange,
|
|
236
|
+
selectedValue: year,
|
|
237
|
+
style: {
|
|
238
|
+
minWidth: 110
|
|
239
|
+
},
|
|
240
|
+
testId: "birthday-picker-year"
|
|
241
|
+
}, Array.from(Array(120)).map((_, yearOffset) => /*#__PURE__*/React.createElement(OptionItem, {
|
|
242
|
+
key: String(CUR_YEAR - yearOffset),
|
|
243
|
+
label: String(CUR_YEAR - yearOffset),
|
|
244
|
+
value: String(CUR_YEAR - yearOffset)
|
|
245
|
+
})))), this.maybeRenderError());
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
export { BirthdayPicker as default };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,427 @@
|
|
|
1
|
+
module.exports =
|
|
2
|
+
/******/ (function(modules) { // webpackBootstrap
|
|
3
|
+
/******/ // The module cache
|
|
4
|
+
/******/ var installedModules = {};
|
|
5
|
+
/******/
|
|
6
|
+
/******/ // The require function
|
|
7
|
+
/******/ function __webpack_require__(moduleId) {
|
|
8
|
+
/******/
|
|
9
|
+
/******/ // Check if module is in cache
|
|
10
|
+
/******/ if(installedModules[moduleId]) {
|
|
11
|
+
/******/ return installedModules[moduleId].exports;
|
|
12
|
+
/******/ }
|
|
13
|
+
/******/ // Create a new module (and put it into the cache)
|
|
14
|
+
/******/ var module = installedModules[moduleId] = {
|
|
15
|
+
/******/ i: moduleId,
|
|
16
|
+
/******/ l: false,
|
|
17
|
+
/******/ exports: {}
|
|
18
|
+
/******/ };
|
|
19
|
+
/******/
|
|
20
|
+
/******/ // Execute the module function
|
|
21
|
+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
|
|
22
|
+
/******/
|
|
23
|
+
/******/ // Flag the module as loaded
|
|
24
|
+
/******/ module.l = true;
|
|
25
|
+
/******/
|
|
26
|
+
/******/ // Return the exports of the module
|
|
27
|
+
/******/ return module.exports;
|
|
28
|
+
/******/ }
|
|
29
|
+
/******/
|
|
30
|
+
/******/
|
|
31
|
+
/******/ // expose the modules object (__webpack_modules__)
|
|
32
|
+
/******/ __webpack_require__.m = modules;
|
|
33
|
+
/******/
|
|
34
|
+
/******/ // expose the module cache
|
|
35
|
+
/******/ __webpack_require__.c = installedModules;
|
|
36
|
+
/******/
|
|
37
|
+
/******/ // define getter function for harmony exports
|
|
38
|
+
/******/ __webpack_require__.d = function(exports, name, getter) {
|
|
39
|
+
/******/ if(!__webpack_require__.o(exports, name)) {
|
|
40
|
+
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
|
|
41
|
+
/******/ }
|
|
42
|
+
/******/ };
|
|
43
|
+
/******/
|
|
44
|
+
/******/ // define __esModule on exports
|
|
45
|
+
/******/ __webpack_require__.r = function(exports) {
|
|
46
|
+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
47
|
+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
48
|
+
/******/ }
|
|
49
|
+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
50
|
+
/******/ };
|
|
51
|
+
/******/
|
|
52
|
+
/******/ // create a fake namespace object
|
|
53
|
+
/******/ // mode & 1: value is a module id, require it
|
|
54
|
+
/******/ // mode & 2: merge all properties of value into the ns
|
|
55
|
+
/******/ // mode & 4: return value when already ns object
|
|
56
|
+
/******/ // mode & 8|1: behave like require
|
|
57
|
+
/******/ __webpack_require__.t = function(value, mode) {
|
|
58
|
+
/******/ if(mode & 1) value = __webpack_require__(value);
|
|
59
|
+
/******/ if(mode & 8) return value;
|
|
60
|
+
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
|
|
61
|
+
/******/ var ns = Object.create(null);
|
|
62
|
+
/******/ __webpack_require__.r(ns);
|
|
63
|
+
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
|
|
64
|
+
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
|
|
65
|
+
/******/ return ns;
|
|
66
|
+
/******/ };
|
|
67
|
+
/******/
|
|
68
|
+
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
|
69
|
+
/******/ __webpack_require__.n = function(module) {
|
|
70
|
+
/******/ var getter = module && module.__esModule ?
|
|
71
|
+
/******/ function getDefault() { return module['default']; } :
|
|
72
|
+
/******/ function getModuleExports() { return module; };
|
|
73
|
+
/******/ __webpack_require__.d(getter, 'a', getter);
|
|
74
|
+
/******/ return getter;
|
|
75
|
+
/******/ };
|
|
76
|
+
/******/
|
|
77
|
+
/******/ // Object.prototype.hasOwnProperty.call
|
|
78
|
+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
|
|
79
|
+
/******/
|
|
80
|
+
/******/ // __webpack_public_path__
|
|
81
|
+
/******/ __webpack_require__.p = "";
|
|
82
|
+
/******/
|
|
83
|
+
/******/
|
|
84
|
+
/******/ // Load entry module and return exports
|
|
85
|
+
/******/ return __webpack_require__(__webpack_require__.s = 10);
|
|
86
|
+
/******/ })
|
|
87
|
+
/************************************************************************/
|
|
88
|
+
/******/ ([
|
|
89
|
+
/* 0 */
|
|
90
|
+
/***/ (function(module, exports) {
|
|
91
|
+
|
|
92
|
+
module.exports = require("react");
|
|
93
|
+
|
|
94
|
+
/***/ }),
|
|
95
|
+
/* 1 */
|
|
96
|
+
/***/ (function(module, exports) {
|
|
97
|
+
|
|
98
|
+
module.exports = require("@khanacademy/wonder-blocks-dropdown");
|
|
99
|
+
|
|
100
|
+
/***/ }),
|
|
101
|
+
/* 2 */
|
|
102
|
+
/***/ (function(module, exports) {
|
|
103
|
+
|
|
104
|
+
module.exports = require("@khanacademy/wonder-blocks-layout");
|
|
105
|
+
|
|
106
|
+
/***/ }),
|
|
107
|
+
/* 3 */
|
|
108
|
+
/***/ (function(module, exports) {
|
|
109
|
+
|
|
110
|
+
module.exports = require("@khanacademy/wonder-blocks-spacing");
|
|
111
|
+
|
|
112
|
+
/***/ }),
|
|
113
|
+
/* 4 */
|
|
114
|
+
/***/ (function(module, exports) {
|
|
115
|
+
|
|
116
|
+
module.exports = require("moment");
|
|
117
|
+
|
|
118
|
+
/***/ }),
|
|
119
|
+
/* 5 */
|
|
120
|
+
/***/ (function(module, exports) {
|
|
121
|
+
|
|
122
|
+
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
123
|
+
|
|
124
|
+
/***/ }),
|
|
125
|
+
/* 6 */
|
|
126
|
+
/***/ (function(module, exports) {
|
|
127
|
+
|
|
128
|
+
module.exports = require("@khanacademy/wonder-blocks-icon");
|
|
129
|
+
|
|
130
|
+
/***/ }),
|
|
131
|
+
/* 7 */
|
|
132
|
+
/***/ (function(module, exports) {
|
|
133
|
+
|
|
134
|
+
module.exports = require("@khanacademy/wonder-blocks-color");
|
|
135
|
+
|
|
136
|
+
/***/ }),
|
|
137
|
+
/* 8 */
|
|
138
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
139
|
+
|
|
140
|
+
"use strict";
|
|
141
|
+
/* unused harmony export defaultLabels */
|
|
142
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return BirthdayPicker; });
|
|
143
|
+
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
|
|
144
|
+
/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_0__);
|
|
145
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
146
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
147
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
|
|
148
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
|
|
149
|
+
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
|
|
150
|
+
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__);
|
|
151
|
+
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
|
|
152
|
+
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
|
|
153
|
+
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(9);
|
|
154
|
+
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
|
|
155
|
+
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(6);
|
|
156
|
+
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__);
|
|
157
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7);
|
|
158
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7__);
|
|
159
|
+
/* harmony import */ var _khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(1);
|
|
160
|
+
/* harmony import */ var _khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__);
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
// Flow doesn't know about the getYear property on Date for some reason!
|
|
171
|
+
// $FlowFixMe[prop-missing]
|
|
172
|
+
const CUR_YEAR = new Date().getYear() + 1900; // Only exported internally for testing/documentation purposes.
|
|
173
|
+
|
|
174
|
+
const defaultLabels = Object.freeze({
|
|
175
|
+
errorMessage: "Please select a valid birthdate.",
|
|
176
|
+
month: "Month",
|
|
177
|
+
year: "Year",
|
|
178
|
+
day: "Day"
|
|
179
|
+
});
|
|
180
|
+
/**
|
|
181
|
+
* Birthday Picker. Similar to a datepicker, but specifically for birthdates.
|
|
182
|
+
* We don't want to show a calendar in this case as it can be quite tedious to
|
|
183
|
+
* try and select a date that's many years old. Instead, we use a set of
|
|
184
|
+
* dropdowns to achieve a similar effect.
|
|
185
|
+
*
|
|
186
|
+
* More information on this pattern:
|
|
187
|
+
* https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a
|
|
188
|
+
*
|
|
189
|
+
* Arguably, this should probably even be 3 textfields, but that would be a
|
|
190
|
+
* larger design change, more info:
|
|
191
|
+
* https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/
|
|
192
|
+
*
|
|
193
|
+
* **NOTE:** This component is uncontrolled.
|
|
194
|
+
*
|
|
195
|
+
* ### Usage
|
|
196
|
+
*
|
|
197
|
+
* ```jsx
|
|
198
|
+
* import {BirthdayPicker} from "@khanacademy/wonder-blocks-dates";
|
|
199
|
+
*
|
|
200
|
+
* <BirthdayPicker
|
|
201
|
+
* defaultValue="2021-05-26"
|
|
202
|
+
* onChange={(date) => {setDate(date)}}
|
|
203
|
+
* />
|
|
204
|
+
* ```
|
|
205
|
+
*/
|
|
206
|
+
|
|
207
|
+
class BirthdayPicker extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
208
|
+
/**
|
|
209
|
+
* Strings used for placeholders and error message. These are used this way
|
|
210
|
+
* to support i18n.
|
|
211
|
+
* NOTE: This is a field rather than state to avoid re-rendering the entire
|
|
212
|
+
* component. Also, we don't need to use state because these strings are
|
|
213
|
+
* only needed on mount.
|
|
214
|
+
*/
|
|
215
|
+
constructor(props) {
|
|
216
|
+
super(props);
|
|
217
|
+
this.lastChangeValue = null;
|
|
218
|
+
|
|
219
|
+
this.reportChange = value => {
|
|
220
|
+
if (value !== this.lastChangeValue) {
|
|
221
|
+
this.lastChangeValue = value;
|
|
222
|
+
this.props.onChange(value);
|
|
223
|
+
}
|
|
224
|
+
};
|
|
225
|
+
|
|
226
|
+
this.handleChange = () => {
|
|
227
|
+
const {
|
|
228
|
+
month,
|
|
229
|
+
day,
|
|
230
|
+
year
|
|
231
|
+
} = this.state; // If any of the values haven't been set then our overall value is
|
|
232
|
+
// equal to null
|
|
233
|
+
|
|
234
|
+
if (month === null || day === null || year === null) {
|
|
235
|
+
this.reportChange(null);
|
|
236
|
+
return;
|
|
237
|
+
} // This is a legal call to Moment, but our Moment types don't
|
|
238
|
+
// recognize it.
|
|
239
|
+
// $FlowFixMe[incompatible-call]
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
const date = moment__WEBPACK_IMPORTED_MODULE_0___default()([year, month, day]); // If the date is in the future or is invalid then we want to show
|
|
243
|
+
// an error to the user and return a null value.
|
|
244
|
+
|
|
245
|
+
if (date.isAfter() || !date.isValid()) {
|
|
246
|
+
this.setState({
|
|
247
|
+
error: this.labels.errorMessage
|
|
248
|
+
});
|
|
249
|
+
this.reportChange(null);
|
|
250
|
+
} else {
|
|
251
|
+
this.setState({
|
|
252
|
+
error: null
|
|
253
|
+
}); // If the date picker is in a non-English language, we still
|
|
254
|
+
// want to generate an English date.
|
|
255
|
+
|
|
256
|
+
this.reportChange(date.locale("en").format("YYYY-MM-DD"));
|
|
257
|
+
}
|
|
258
|
+
};
|
|
259
|
+
|
|
260
|
+
this.handleMonthChange = month => {
|
|
261
|
+
this.setState({
|
|
262
|
+
month
|
|
263
|
+
}, this.handleChange);
|
|
264
|
+
};
|
|
265
|
+
|
|
266
|
+
this.handleDayChange = day => {
|
|
267
|
+
this.setState({
|
|
268
|
+
day
|
|
269
|
+
}, this.handleChange);
|
|
270
|
+
};
|
|
271
|
+
|
|
272
|
+
this.handleYearChange = year => {
|
|
273
|
+
this.setState({
|
|
274
|
+
year
|
|
275
|
+
}, this.handleChange);
|
|
276
|
+
};
|
|
277
|
+
|
|
278
|
+
this.lastChangeValue = props.defaultValue || null;
|
|
279
|
+
this.state = this.getStateFromDefault();
|
|
280
|
+
}
|
|
281
|
+
/**
|
|
282
|
+
* Calculates the initial state values based on the default value.
|
|
283
|
+
*/
|
|
284
|
+
|
|
285
|
+
|
|
286
|
+
getStateFromDefault() {
|
|
287
|
+
const {
|
|
288
|
+
defaultValue
|
|
289
|
+
} = this.props;
|
|
290
|
+
const initialState = {
|
|
291
|
+
month: null,
|
|
292
|
+
day: null,
|
|
293
|
+
year: null,
|
|
294
|
+
error: null
|
|
295
|
+
}; // merge custom labels with the default ones
|
|
296
|
+
|
|
297
|
+
this.labels = { ...defaultLabels,
|
|
298
|
+
...this.props.labels
|
|
299
|
+
}; // If a default value was provided then we use moment to convert it
|
|
300
|
+
// into a date that we can use to populate the
|
|
301
|
+
|
|
302
|
+
if (defaultValue) {
|
|
303
|
+
const date = moment__WEBPACK_IMPORTED_MODULE_0___default()(defaultValue);
|
|
304
|
+
|
|
305
|
+
if (date.isValid()) {
|
|
306
|
+
initialState.month = String(date.month());
|
|
307
|
+
initialState.day = String(date.date());
|
|
308
|
+
initialState.year = String(date.year());
|
|
309
|
+
} // If the date is in the future or is invalid then we want to show
|
|
310
|
+
// an error to the user.
|
|
311
|
+
|
|
312
|
+
|
|
313
|
+
if (date.isAfter() || !date.isValid()) {
|
|
314
|
+
initialState.error = this.labels.errorMessage;
|
|
315
|
+
}
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
return initialState;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
maybeRenderError() {
|
|
322
|
+
const {
|
|
323
|
+
error
|
|
324
|
+
} = this.state;
|
|
325
|
+
|
|
326
|
+
if (!error) {
|
|
327
|
+
return null;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
|
|
331
|
+
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxxSmall_4
|
|
332
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
|
|
333
|
+
style: {
|
|
334
|
+
flexDirection: "row"
|
|
335
|
+
},
|
|
336
|
+
role: "alert"
|
|
337
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6___default.a, {
|
|
338
|
+
size: "small",
|
|
339
|
+
icon: _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_6__["icons"].info,
|
|
340
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7___default.a.red,
|
|
341
|
+
style: {
|
|
342
|
+
marginTop: 3
|
|
343
|
+
},
|
|
344
|
+
"aria-hidden": "true"
|
|
345
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
|
|
346
|
+
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xxxSmall_4
|
|
347
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["Body"], {
|
|
348
|
+
style: {
|
|
349
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_7___default.a.red
|
|
350
|
+
}
|
|
351
|
+
}, error)));
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
render() {
|
|
355
|
+
const {
|
|
356
|
+
month,
|
|
357
|
+
day,
|
|
358
|
+
year
|
|
359
|
+
} = this.state;
|
|
360
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["View"], {
|
|
361
|
+
testId: "birthday-picker",
|
|
362
|
+
style: {
|
|
363
|
+
flexDirection: "row"
|
|
364
|
+
}
|
|
365
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
|
|
366
|
+
placeholder: this.labels.month,
|
|
367
|
+
onChange: this.handleMonthChange,
|
|
368
|
+
selectedValue: month,
|
|
369
|
+
style: {
|
|
370
|
+
minWidth: 110
|
|
371
|
+
},
|
|
372
|
+
testId: "birthday-picker-month"
|
|
373
|
+
}, moment__WEBPACK_IMPORTED_MODULE_0___default.a.monthsShort().map((month, i) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["OptionItem"], {
|
|
374
|
+
key: month,
|
|
375
|
+
label: month,
|
|
376
|
+
value: String(i)
|
|
377
|
+
}))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
|
|
378
|
+
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
|
|
379
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
|
|
380
|
+
placeholder: this.labels.day,
|
|
381
|
+
onChange: this.handleDayChange,
|
|
382
|
+
selectedValue: day,
|
|
383
|
+
style: {
|
|
384
|
+
minWidth: 100
|
|
385
|
+
},
|
|
386
|
+
testId: "birthday-picker-day"
|
|
387
|
+
}, Array.from(Array(31)).map((_, day) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["OptionItem"], {
|
|
388
|
+
key: String(day + 1),
|
|
389
|
+
label: String(day + 1),
|
|
390
|
+
value: String(day + 1)
|
|
391
|
+
}))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_3__["Strut"], {
|
|
392
|
+
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.xSmall_8
|
|
393
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["SingleSelect"], {
|
|
394
|
+
placeholder: this.labels.year,
|
|
395
|
+
onChange: this.handleYearChange,
|
|
396
|
+
selectedValue: year,
|
|
397
|
+
style: {
|
|
398
|
+
minWidth: 110
|
|
399
|
+
},
|
|
400
|
+
testId: "birthday-picker-year"
|
|
401
|
+
}, Array.from(Array(120)).map((_, yearOffset) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_dropdown__WEBPACK_IMPORTED_MODULE_8__["OptionItem"], {
|
|
402
|
+
key: String(CUR_YEAR - yearOffset),
|
|
403
|
+
label: String(CUR_YEAR - yearOffset),
|
|
404
|
+
value: String(CUR_YEAR - yearOffset)
|
|
405
|
+
})))), this.maybeRenderError());
|
|
406
|
+
}
|
|
407
|
+
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
/***/ }),
|
|
411
|
+
/* 9 */
|
|
412
|
+
/***/ (function(module, exports) {
|
|
413
|
+
|
|
414
|
+
module.exports = require("@khanacademy/wonder-blocks-typography");
|
|
415
|
+
|
|
416
|
+
/***/ }),
|
|
417
|
+
/* 10 */
|
|
418
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
419
|
+
|
|
420
|
+
"use strict";
|
|
421
|
+
__webpack_require__.r(__webpack_exports__);
|
|
422
|
+
/* harmony import */ var _components_birthday_picker_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(8);
|
|
423
|
+
|
|
424
|
+
/* harmony default export */ __webpack_exports__["default"] = (_components_birthday_picker_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
|
|
425
|
+
|
|
426
|
+
/***/ })
|
|
427
|
+
/******/ ]);
|