@khanacademy/wonder-blocks-birthday-picker 1.2.3 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 1.2.6
+
+### Patch Changes
+
+-   Updated dependencies [b3960766]
+    -   @khanacademy/wonder-blocks-dropdown@2.7.0
+
+## 1.2.5
+
+### Patch Changes
+
+-   Updated dependencies [0b94d616]
+    -   @khanacademy/wonder-blocks-dropdown@2.6.10
+
+## 1.2.4
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-dropdown@2.6.9
+-   @khanacademy/wonder-blocks-icon@1.2.27
+-   @khanacademy/wonder-blocks-layout@1.4.9
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
 ## 1.2.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -9,56 +9,16 @@ import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import Color from '@khanacademy/wonder-blocks-color';
 import { SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 
-// Flow doesn't know about the getYear property on Date for some reason!
-// $FlowFixMe[prop-missing]
-const CUR_YEAR = new Date().getYear() + 1900; // Only exported internally for testing/documentation purposes.
-
+const CUR_YEAR = new Date().getYear() + 1900;
 const defaultLabels = Object.freeze({
   errorMessage: "Please select a valid birthdate.",
   month: "Month",
   year: "Year",
   day: "Day"
-}); // Default minWidth value when we include the full DOB.
-
-const FIELD_MIN_WIDTH_FULL = 110; // Alternative minWidth value when we hide the day field.
-// See: https://www.figma.com/file/uJZi9ZvuEz5N8GJ3HqKFAa/(2021)-Account-records?node-id=20%3A398
-
+});
+const FIELD_MIN_WIDTH_FULL = 110;
 const FIELD_MIN_WIDTH_MONTH_YEAR = 167;
-/**
- * Birthday Picker. Similar to a datepicker, but specifically for birthdates.
- * We don't want to show a calendar in this case as it can be quite tedious to
- * try and select a date that's many years old. Instead, we use a set of
- * dropdowns to achieve a similar effect.
- *
- * More information on this pattern:
- * https://medium.com/samsung-internet-dev/making-input-type-date-complicated-a544fd27c45a
- *
- * Arguably, this should probably even be 3 textfields, but that would be a
- * larger design change, more info:
- * https://designnotes.blog.gov.uk/2013/12/05/asking-for-a-date-of-birth/
- *
- * **NOTE:** This component is uncontrolled.
- *
- * ### Usage
- *
- * ```jsx
- * import {BirthdayPicker} from "@khanacademy/wonder-blocks-dates";
- *
- * <BirthdayPicker
- *  defaultValue="2021-05-26"
- *  onChange={(date) => {setDate(date)}}
- * />
- * ```
- */
-
 class BirthdayPicker extends React.Component {
-  /**
-   * Strings used for placeholders and error message. These are used this way
-   * to support i18n.
-   * NOTE: This is a field rather than state to avoid re-rendering the entire
-   * component. Also, we don't need to use state because these strings are
-   * only needed on mount.
-   */
   constructor(props) {
     super(props);
     this.lastChangeValue = null;
@@ -75,19 +35,14 @@ class BirthdayPicker extends React.Component {
         month,
         day,
         year
-      } = this.state; // If any of the values haven't been set then our overall value is
-      // equal to null
+      } = this.state;
 
       if (month === null || day === null || year === null) {
         this.reportChange(null);
         return;
-      } // This is a legal call to Moment, but our Moment types don't
-      // recognize it.
-      // $FlowFixMe[incompatible-call]
-
+      }
 
-      const date = moment([year, month, day]); // If the date is in the future or is invalid then we want to show
-      // an error to the user and return a null value.
+      const date = moment([year, month, day]);
 
       if (date.isAfter() || !date.isValid()) {
         this.setState({
@@ -97,9 +52,7 @@ class BirthdayPicker extends React.Component {
       } else {
         this.setState({
           error: null
-        }); // If the date picker is in a non-English language, we still
-        // want to generate an English date.
-
+        });
         this.reportChange(date.locale("en").format("YYYY-MM-DD"));
       }
     };
@@ -125,10 +78,6 @@ class BirthdayPicker extends React.Component {
     this.lastChangeValue = props.defaultValue || null;
     this.state = this.getStateFromDefault();
   }
-  /**
-   * Calculates the initial state values based on the default value.
-   */
-
 
   getStateFromDefault() {
     const {
@@ -140,10 +89,8 @@ class BirthdayPicker extends React.Component {
       day: monthYearOnly ? "1" : null,
       year: null,
       error: null
-    }; // merge custom labels with the default ones
-
-    this.labels = _extends({}, defaultLabels, this.props.labels); // If a default value was provided then we use moment to convert it
-    // into a date that we can use to populate the
+    };
+    this.labels = _extends({}, defaultLabels, this.props.labels);
 
     if (defaultValue) {
       const date = moment(defaultValue);
@@ -152,9 +99,7 @@ class BirthdayPicker extends React.Component {
         initialState.month = String(date.month());
         initialState.day = String(date.date());
         initialState.year = String(date.year());
-      } // If the date is in the future or is invalid then we want to show
-      // an error to the user.
-
+      }
 
       if (date.isAfter() || !date.isValid()) {
         initialState.error = this.labels.errorMessage;
@@ -173,14 +118,14 @@ class BirthdayPicker extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
+    return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: Spacing.xxxSmall_4
-    }), /*#__PURE__*/React.createElement(View, {
+    }), React.createElement(View, {
       style: {
         flexDirection: "row"
       },
       role: "alert"
-    }, /*#__PURE__*/React.createElement(Icon, {
+    }, React.createElement(Icon, {
       size: "small",
       icon: icons.info,
       color: Color.red,
@@ -188,9 +133,9 @@ class BirthdayPicker extends React.Component {
         marginTop: 3
       },
       "aria-hidden": "true"
-    }), /*#__PURE__*/React.createElement(Strut, {
+    }), React.createElement(Strut, {
       size: Spacing.xxxSmall_4
-    }), /*#__PURE__*/React.createElement(Body, {
+    }), React.createElement(Body, {
       style: {
         color: Color.red
       }
@@ -206,7 +151,7 @@ class BirthdayPicker extends React.Component {
       month
     } = this.state;
     const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
-    return /*#__PURE__*/React.createElement(SingleSelect, {
+    return React.createElement(SingleSelect, {
       disabled: disabled,
       placeholder: this.labels.month,
       onChange: this.handleMonthChange,
@@ -215,7 +160,7 @@ class BirthdayPicker extends React.Component {
         minWidth
       },
       testId: "birthday-picker-month"
-    }, moment.monthsShort().map((month, i) => /*#__PURE__*/React.createElement(OptionItem, {
+    }, moment.monthsShort().map((month, i) => React.createElement(OptionItem, {
       key: month,
       label: month,
       value: String(i)
@@ -229,15 +174,15 @@ class BirthdayPicker extends React.Component {
     } = this.props;
     const {
       day
-    } = this.state; // Hide the day field if the month/year only mode is enabled.
+    } = this.state;
 
     if (monthYearOnly) {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
+    return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: Spacing.xSmall_8
-    }), /*#__PURE__*/React.createElement(SingleSelect, {
+    }), React.createElement(SingleSelect, {
       disabled: disabled,
       placeholder: this.labels.day,
       onChange: this.handleDayChange,
@@ -246,7 +191,7 @@ class BirthdayPicker extends React.Component {
         minWidth: 100
       },
       testId: "birthday-picker-day"
-    }, Array.from(Array(31)).map((_, day) => /*#__PURE__*/React.createElement(OptionItem, {
+    }, Array.from(Array(31)).map((_, day) => React.createElement(OptionItem, {
       key: String(day + 1),
       label: String(day + 1),
       value: String(day + 1)
@@ -262,7 +207,7 @@ class BirthdayPicker extends React.Component {
       year
     } = this.state;
     const minWidth = monthYearOnly ? FIELD_MIN_WIDTH_MONTH_YEAR : FIELD_MIN_WIDTH_FULL;
-    return /*#__PURE__*/React.createElement(SingleSelect, {
+    return React.createElement(SingleSelect, {
       disabled: disabled,
       placeholder: this.labels.year,
       onChange: this.handleYearChange,
@@ -271,7 +216,7 @@ class BirthdayPicker extends React.Component {
         minWidth
       },
       testId: "birthday-picker-year"
-    }, Array.from(Array(120)).map((_, yearOffset) => /*#__PURE__*/React.createElement(OptionItem, {
+    }, Array.from(Array(120)).map((_, yearOffset) => React.createElement(OptionItem, {
       key: String(CUR_YEAR - yearOffset),
       label: String(CUR_YEAR - yearOffset),
       value: String(CUR_YEAR - yearOffset)
@@ -279,12 +224,12 @@ class BirthdayPicker extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
+    return React.createElement(React.Fragment, null, React.createElement(View, {
       testId: "birthday-picker",
       style: {
         flexDirection: "row"
       }
-    }, this.renderMonth(), this.maybeRenderDay(), /*#__PURE__*/React.createElement(Strut, {
+    }, this.renderMonth(), this.maybeRenderDay(), React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), this.renderYear()), this.maybeRenderError());
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-birthday-picker",
-  "version": "1.2.3",
+  "version": "1.2.6",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,12 +15,12 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-dropdown": "^2.6.8",
-    "@khanacademy/wonder-blocks-icon": "^1.2.26",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
+    "@khanacademy/wonder-blocks-dropdown": "^2.7.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.27",
+    "@khanacademy/wonder-blocks-layout": "^1.4.9",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.31"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -28,7 +28,7 @@
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
   "author": "",
   "license": "MIT"