@reykjavik/hanna-react 0.10.78 → 0.10.79

package/CHANGELOG.md

@@ -4,9 +4,15 @@
 
 - ... <!-- Add new lines here. -->
 
+## 0.10.79
+
+_2023-01-23_
+
+- feat: Support passing Array of `dateFormat`s to `Datepicker`
+
 ## 0.10.77 – 0.10.78
 
-_2022-12-18_
+_2023-01-18_
 
 - feat: Add standalone component `.CheckboxButton`
 - feat: Add `.CheckboxButton__label__wrap` and `.RadioButton__label__wrap`

package/Datepicker.d.ts

@@ -10,7 +10,7 @@ export type DatepickerProps = {
     minDate?: Date;
     maxDate?: Date;
     localeCode?: 'is' | 'en' | 'pl';
-    dateFormat?: string;
+    dateFormat?: string | Array<string>;
     isStartDate?: boolean;
     isEndDate?: boolean;
     inputRef?: RefObject<HTMLInputElement>;

package/Datepicker.js

@@ -56,17 +56,26 @@ const i18n = {
 const Datepicker = (props) => {
     const { className, id, label, hideLabel, assistText, disabled, readOnly, invalid, errorMessage, required, reqText, placeholder, small, localeCode = 'is', dateFormat = 'd.M.yyyy', initialDate, value = initialDate, name, startDate, endDate, minDate, maxDate, isStartDate = false, isEndDate = false, onChange, datepickerExtraProps, ssr, inputRef, } = props;
     const domid = (0, hooks_1.useDomid)(id);
-    const txts = (localeCode && i18n[localeCode]) || {};
+    const txts = i18n[localeCode] || {};
     const filled = !!value;
     const empty = !filled && !placeholder;
     return (react_1.default.createElement(FormField_1.default, { className: (0, getBemClass_1.default)('Datepicker', [], className), ssr: ssr, label: label, small: small, assistText: assistText, hideLabel: hideLabel, invalid: invalid, required: required, reqText: reqText, disabled: disabled, readOnly: readOnly, filled: filled, empty: empty, errorMessage: errorMessage, renderInput: (className, inputProps, addFocusProps) => {
-            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => target === currentTarget && currentTarget.querySelector('input').focus(), ref: inputRef &&
+            return (react_1.default.createElement("div", Object.assign({ className: className.input, onClick: ({ target, currentTarget }) => { var _a; return target === currentTarget && ((_a = currentTarget.querySelector('input')) === null || _a === void 0 ? void 0 : _a.focus()); }, ref: inputRef &&
                     ((elm) => {
                         inputRef.current =
                             (elm === null || elm === void 0 ? void 0 : elm.querySelector('input')) || undefined;
                         return elm;
                     }) }, addFocusProps()),
-                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: dateFormat, onChange: (date) => {
+                react_1.default.createElement(react_datepicker_1.default, Object.assign({ id: domid, required: inputProps.required, disabled: inputProps.disabled, readOnly: inputProps.readOnly, selected: value, name: name, locale: localeCode, dateFormat: 
+                    // NOTE: Force all dateFormat values into Array<string> to temporarily work around
+                    // a bug in the current version of react-datepicker where invalid **string** values
+                    // are re-parsed with `new Date()`, causing surprising behavior in certain situations
+                    // AND wheree Arrayed formats get parsed in order of "increasing priority".
+                    // Revert back to the plain `dateFormat={dateFormat}` pass-through once this PR has been
+                    // accepted and released: https://github.com/Hacker0x01/react-datepicker/pull/3903
+                    typeof dateFormat === 'string'
+                        ? [dateFormat]
+                        : dateFormat.slice(0).reverse(), onChange: (date) => {
                         onChange(date || undefined);
                         const inputElm = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
                         if (inputElm) {
@@ -75,10 +84,7 @@ const Datepicker = (props) => {
                     }, placeholderText: placeholder, 
                     // TODO: Implement this
                     // selectsRange
-                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => {
-                        // TODO: if we use costom locale we don't need this
-                        return weekday.charAt(0).toUpperCase();
-                    }, showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
+                    minDate: minDate, maxDate: maxDate, startDate: startDate, endDate: endDate, selectsStart: isStartDate, selectsEnd: isEndDate, formatWeekDay: (weekday) => weekday.charAt(0).toUpperCase(), showYearDropdown: true, scrollableYearDropdown: true, yearDropdownItemNumber: 15, showMonthDropdown: true }, inputProps, txts, datepickerExtraProps))));
         } }));
 };
 exports.Datepicker = Datepicker;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reykjavik/hanna-react",
-	"version": "0.10.78",
+	"version": "0.10.79",
 	"author": "Reykjavík (http://www.reykjavik.is)",
 	"contributors": [
 		"Hugsmiðjan ehf (http://www.hugsmidjan.is)",