@dhis2-ui/calendar 9.12.0-alpha.2 → 9.12.0-alpha.3

package/build/cjs/calendar-input/calendar-input.js

@@ -12,9 +12,9 @@ var _input = require("@dhis2-ui/input");
 var _layer = require("@dhis2-ui/layer");
 var _popper = require("@dhis2-ui/popper");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _calendarContainer = require("../calendar/calendar-container.js");
-var _calendar = require("../calendar/calendar.js");
 var _index = _interopRequireDefault(require("../locales/index.js"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -35,7 +35,6 @@ const CalendarInput = function () {
     locale,
     numberingSystem,
     weekDayFormat,
-    timeZone,
     width,
     cellSize,
     clearable,
@@ -54,11 +53,9 @@ const CalendarInput = function () {
   const useDatePickerOptions = (0, _react.useMemo)(() => ({
     calendar,
     locale,
-    timeZone,
-    // todo: we probably shouldn't have had timezone here in the first place
     numberingSystem,
     weekDayFormat
-  }), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
+  }), [calendar, locale, numberingSystem, weekDayFormat]);
   const pickerResults = (0, _multiCalendarDates.useDatePicker)({
     onDateSelect: result => {
       setOpen(false);
@@ -72,11 +69,20 @@ const CalendarInput = function () {
     options: useDatePickerOptions
   });
   const handleChange = e => {
+    setOpen(false);
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
+    const validated = (0, _multiCalendarDates.validateDateString)(partialDate, {
+      calendar,
+      format,
+      minDateString: minDate,
+      maxDateString: maxDate,
+      strictValidation
+    });
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-      calendarDateString: partialDate
+      calendarDateString: partialDate,
+      ...validated
     });
     if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
       setOpen(false);
@@ -147,8 +153,40 @@ const CalendarInput = function () {
 };
 exports.CalendarInput = CalendarInput;
 CalendarInput.defaultProps = {
-  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
+  dataTest: 'dhis2-uiwidgets-calendar-inputfield',
+  cellSize: '32px',
+  width: '240px',
+  weekDayFormat: 'narrow'
 };
 CalendarInput.propTypes = {
-  ..._calendar.CalendarProps
+  /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
+  calendar: _propTypes.default.any.isRequired,
+  /** Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+  onDateSelect: _propTypes.default.func.isRequired,
+  /** the size of a single cell in the table forming the calendar */
+  cellSize: _propTypes.default.string,
+  /** Whether the clear button is displayed */
+  clearable: _propTypes.default.bool,
+  /** 'data-test' attribute of `InputField` component */
+  dataTest: _propTypes.default.string,
+  /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
+  date: _propTypes.default.string,
+  /** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
+  dir: _propTypes.default.oneOf(['ltr', 'rtl']),
+  /** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
+  format: _propTypes.default.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
+  /** any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
+  locale: _propTypes.default.string,
+  /** The maximum selectable date */
+  maxDate: _propTypes.default.string,
+  /** The minimum selectable date */
+  minDate: _propTypes.default.string,
+  /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
+  numberingSystem: _propTypes.default.string,
+  /** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
+  strictValidation: _propTypes.default.bool,
+  /** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
+  weekDayFormat: _propTypes.default.oneOf(['narrow', 'short', 'long']),
+  /** the width of the calendar component */
+  width: _propTypes.default.string
 };

package/build/cjs/stories/calendar-input.prod.stories.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CalendarWithClearButton = void 0;
 exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
+exports.CalendarWithEditiableInputReactForm = CalendarWithEditiableInputReactForm;
 exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactFinalForm = require("react-final-form");
 var _calendarInput = require("../calendar-input/calendar-input.js");
 var _calendarStoryWrapper = require("./calendar-story-wrapper.js");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
 const description = `
 Use a CalendarInput where there is a need to let the user input a date.
@@ -129,8 +132,55 @@ function CalendarWithEditiableInput() {
     },
     width: '700px',
     inputWidth: "900px",
-    timeZone: 'UTC',
     minDate: '2020-07-01',
     maxDate: '2020-07-09'
   })));
+}
+function CalendarWithEditiableInputReactForm() {
+  const [calendarError, setCalendarError] = (0, _react.useState)(undefined);
+  const errored = () => {
+    return {
+      calendar: calendarError
+    };
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
+    onSubmit: (values, meta) => {
+      console.log('SUBMITTING', {
+        values,
+        meta
+      });
+    },
+    initialValues: {
+      calendar: '2022-10-12'
+    },
+    validate: errored
+  }, _ref3 => {
+    let {
+      handleSubmit
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement("form", {
+      onSubmit: handleSubmit
+    }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+      name: "calendar"
+    }, props => /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({}, props, {
+      input: props.input,
+      meta: props.meta,
+      editable: true,
+      date: props.input.value,
+      calendar: "gregory",
+      onDateSelect: date => {
+        if (!date.isValid) {
+          setCalendarError(date.errorMessage);
+        } else {
+          setCalendarError(undefined);
+        }
+        props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
+      },
+      timeZone: 'UTC'
+    }))), /*#__PURE__*/_react.default.createElement("button", {
+      type: "submit",
+      disabled: false,
+      onClick: handleSubmit
+    }, "Submit"));
+  });
 }

package/build/es/calendar-input/calendar-input.js

@@ -1,15 +1,15 @@
 import _JSXStyle from "styled-jsx/style";
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import { useDatePicker, useResolvedDirection } from '@dhis2/multi-calendar-dates';
+import { useDatePicker, useResolvedDirection, validateDateString } from '@dhis2/multi-calendar-dates';
 import { Button } from '@dhis2-ui/button';
 import { Card } from '@dhis2-ui/card';
 import { InputField } from '@dhis2-ui/input';
 import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
 import cx from 'classnames';
+import PropTypes from 'prop-types';
 import React, { useRef, useState, useMemo, useEffect } from 'react';
 import { CalendarContainer } from '../calendar/calendar-container.js';
-import { CalendarProps } from '../calendar/calendar.js';
 import i18n from '../locales/index.js';
 const offsetModifier = {
   name: 'offset',
@@ -26,7 +26,6 @@ export const CalendarInput = function () {
     locale,
     numberingSystem,
     weekDayFormat,
-    timeZone,
     width,
     cellSize,
     clearable,
@@ -45,11 +44,9 @@ export const CalendarInput = function () {
   const useDatePickerOptions = useMemo(() => ({
     calendar,
     locale,
-    timeZone,
-    // todo: we probably shouldn't have had timezone here in the first place
     numberingSystem,
     weekDayFormat
-  }), [calendar, locale, numberingSystem, timeZone, weekDayFormat]);
+  }), [calendar, locale, numberingSystem, weekDayFormat]);
   const pickerResults = useDatePicker({
     onDateSelect: result => {
       setOpen(false);
@@ -63,11 +60,20 @@ export const CalendarInput = function () {
     options: useDatePickerOptions
   });
   const handleChange = e => {
+    setOpen(false);
     setPartialDate(e.value);
   };
   const handleBlur = (_, e) => {
+    const validated = validateDateString(partialDate, {
+      calendar,
+      format,
+      minDateString: minDate,
+      maxDateString: maxDate,
+      strictValidation
+    });
     parentOnDateSelect === null || parentOnDateSelect === void 0 ? void 0 : parentOnDateSelect({
-      calendarDateString: partialDate
+      calendarDateString: partialDate,
+      ...validated
     });
     if (excludeRef.current && !excludeRef.current.contains(e.relatedTarget)) {
       setOpen(false);
@@ -137,8 +143,40 @@ export const CalendarInput = function () {
   }, [".calendar-input-wrapper.jsx-633677374{position:relative;}", ".calendar-clear-button.jsx-633677374{position:absolute;inset-inline-end:6px;-webkit-inset-block-start:27px;-ms-intb-rlock-start:27px;inset-block-start:27px;}", ".calendar-clear-button.with-icon.jsx-633677374{inset-inline-end:36px;}", ".calendar-clear-button.with-dense-wrapper.jsx-633677374{-webkit-inset-block-start:23px;-ms-intb-rlock-start:23px;inset-block-start:23px;}"]));
 };
 CalendarInput.defaultProps = {
-  dataTest: 'dhis2-uiwidgets-calendar-inputfield'
+  dataTest: 'dhis2-uiwidgets-calendar-inputfield',
+  cellSize: '32px',
+  width: '240px',
+  weekDayFormat: 'narrow'
 };
 CalendarInput.propTypes = {
-  ...CalendarProps
+  /** the calendar to use such gregory, ethiopic, nepali - full supported list here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/calendars.ts  */
+  calendar: PropTypes.any.isRequired,
+  /** Called with signature `(null)` \|\| `({ dateCalendarString: string, dateCalendar: Temporal.ZonedDateTime })` with `dateCalendarString` being the stringified date in the specified calendar in the format `yyyy-MM-dd` */
+  onDateSelect: PropTypes.func.isRequired,
+  /** the size of a single cell in the table forming the calendar */
+  cellSize: PropTypes.string,
+  /** Whether the clear button is displayed */
+  clearable: PropTypes.bool,
+  /** 'data-test' attribute of `InputField` component */
+  dataTest: PropTypes.string,
+  /** the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601) */
+  date: PropTypes.string,
+  /** the direction of the library - internally the library will use rtl for rtl-languages but this can be overridden here for more control */
+  dir: PropTypes.oneOf(['ltr', 'rtl']),
+  /** The date format to use either `YYYY-MM-DD` or `DD-MM-YYYY` */
+  format: PropTypes.oneOf(['YYYY-MM-DD', 'DD-MM-YYYY']),
+  /** any valid locale -  if none provided, the internal library will fallback to the user locale (more info here: https://github.com/dhis2/multi-calendar-dates/blob/main/src/hooks/internal/useResolvedLocaleOptions.ts#L15) */
+  locale: PropTypes.string,
+  /** The maximum selectable date */
+  maxDate: PropTypes.string,
+  /** The minimum selectable date */
+  minDate: PropTypes.string,
+  /** numbering system to use - full list here https://github.com/dhis2/multi-calendar-dates/blob/main/src/constants/numberingSystems.ts */
+  numberingSystem: PropTypes.string,
+  /** Whether to use strict validation by showing errors for out-of-range dates when enabled (default), and warnings when disabled */
+  strictValidation: PropTypes.bool,
+  /** the format to display for the week day, i.e. Monday (long), Mon (short), M (narrow) */
+  weekDayFormat: PropTypes.oneOf(['narrow', 'short', 'long']),
+  /** the width of the calendar component */
+  width: PropTypes.string
 };

package/build/es/stories/calendar-input.prod.stories.js

@@ -1,4 +1,6 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useState } from 'react';
+import { Field, Form } from 'react-final-form';
 import { CalendarInput } from '../calendar-input/calendar-input.js';
 import { CalendarStoryWrapper } from './calendar-story-wrapper.js';
 const subtitle = `[Experimental] Calendar Input is a wrapper around Calendar displaying an input that triggers the calendar`;
@@ -117,8 +119,55 @@ export function CalendarWithEditiableInput() {
     },
     width: '700px',
     inputWidth: "900px",
-    timeZone: 'UTC',
     minDate: '2020-07-01',
     maxDate: '2020-07-09'
   })));
+}
+export function CalendarWithEditiableInputReactForm() {
+  const [calendarError, setCalendarError] = useState(undefined);
+  const errored = () => {
+    return {
+      calendar: calendarError
+    };
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: (values, meta) => {
+      console.log('SUBMITTING', {
+        values,
+        meta
+      });
+    },
+    initialValues: {
+      calendar: '2022-10-12'
+    },
+    validate: errored
+  }, _ref3 => {
+    let {
+      handleSubmit
+    } = _ref3;
+    return /*#__PURE__*/React.createElement("form", {
+      onSubmit: handleSubmit
+    }, /*#__PURE__*/React.createElement(Field, {
+      name: "calendar"
+    }, props => /*#__PURE__*/React.createElement(CalendarInput, _extends({}, props, {
+      input: props.input,
+      meta: props.meta,
+      editable: true,
+      date: props.input.value,
+      calendar: "gregory",
+      onDateSelect: date => {
+        if (!date.isValid) {
+          setCalendarError(date.errorMessage);
+        } else {
+          setCalendarError(undefined);
+        }
+        props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
+      },
+      timeZone: 'UTC'
+    }))), /*#__PURE__*/React.createElement("button", {
+      type: "submit",
+      disabled: false,
+      onClick: handleSubmit
+    }, "Submit"));
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/calendar",
-    "version": "9.12.0-alpha.2",
+    "version": "9.12.0-alpha.3",
     "description": "UI Calendar",
     "repository": {
         "type": "git",
@@ -33,15 +33,15 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/button": "9.12.0-alpha.2",
-        "@dhis2-ui/card": "9.12.0-alpha.2",
-        "@dhis2-ui/input": "9.12.0-alpha.2",
-        "@dhis2-ui/layer": "9.12.0-alpha.2",
-        "@dhis2-ui/popper": "9.12.0-alpha.2",
+        "@dhis2-ui/button": "9.12.0-alpha.3",
+        "@dhis2-ui/card": "9.12.0-alpha.3",
+        "@dhis2-ui/input": "9.12.0-alpha.3",
+        "@dhis2-ui/layer": "9.12.0-alpha.3",
+        "@dhis2-ui/popper": "9.12.0-alpha.3",
         "@dhis2/multi-calendar-dates": "1.3.0",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "9.12.0-alpha.2",
-        "@dhis2/ui-icons": "9.12.0-alpha.2",
+        "@dhis2/ui-constants": "9.12.0-alpha.3",
+        "@dhis2/ui-icons": "9.12.0-alpha.3",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },