@dhis2-ui/calendar 10.0.0-alpha.2 → 10.0.0-alpha.4

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

@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CalendarWithClearButton = void 0;
-exports.CalendarWithEditableInputReactForm = CalendarWithEditableInputReactForm;
 exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
+exports.CalendarWithNonStrictValidation = CalendarWithNonStrictValidation;
+exports.CalendarWithStrictValidation = CalendarWithStrictValidation;
 exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
+var _button = require("@dhis2-ui/button");
 var _react = _interopRequireWildcard(require("react"));
 var _reactFinalForm = require("react-final-form");
 var _calendarInput = require("../calendar-input/calendar-input.js");
@@ -135,12 +137,14 @@ function CalendarWithEditiableInput() {
     clearable: true
   })));
 }
-function CalendarWithEditableInputReactForm() {
+function CalendarWithStrictValidation() {
   const [validation, setValidation] = (0, _react.useState)({});
   const errored = () => {
-    return {
-      calendar: validation.validationText
-    };
+    if (validation.error) {
+      return {
+        calendar: validation.validationText
+      };
+    }
   };
   return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
     onSubmit: (values, meta) => {
@@ -163,6 +167,62 @@ function CalendarWithEditableInputReactForm() {
     }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
       name: "calendar"
     }, props => /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({}, props, {
+      label: "Enter a date",
+      helpText: "Date has to be after 2022-11-01",
+      input: props.input,
+      meta: props.meta,
+      editable: true,
+      date: props.input.value,
+      calendar: "gregory"
+    }, validation, {
+      minDate: "2022-11-01",
+      onDateSelect: date => {
+        const validation = {
+          ...date.validation,
+          validationText: date.validation.validationCode === 'WRONG_FORMAT' ? 'custom validation message for format' : date.validation.validationText
+        };
+        setValidation(validation);
+        props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
+      }
+    }))), /*#__PURE__*/_react.default.createElement(_button.Button, {
+      type: "submit",
+      disabled: invalid,
+      onClick: handleSubmit
+    }, "Submit"));
+  });
+}
+function CalendarWithNonStrictValidation() {
+  const [validation, setValidation] = (0, _react.useState)({});
+  const errored = () => {
+    if (validation.error) {
+      return {
+        calendar: validation.validationText
+      };
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
+    onSubmit: (values, meta) => {
+      console.log('SUBMITTING', {
+        values,
+        meta
+      });
+    },
+    initialValues: {
+      calendar: '2022-10-12'
+    },
+    validate: errored
+  }, _ref4 => {
+    let {
+      handleSubmit,
+      invalid
+    } = _ref4;
+    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, {
+      label: "Enter a date",
+      helpText: "Date has to be after 2022-11-01",
       input: props.input,
       meta: props.meta,
       editable: true,
@@ -170,6 +230,7 @@ function CalendarWithEditableInputReactForm() {
       calendar: "gregory"
     }, validation, {
       minDate: "2022-11-01",
+      strictValidation: false,
       onDateSelect: date => {
         const validation = {
           ...date.validation,
@@ -178,7 +239,7 @@ function CalendarWithEditableInputReactForm() {
         setValidation(validation);
         props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
       }
-    }))), /*#__PURE__*/_react.default.createElement("button", {
+    }))), /*#__PURE__*/_react.default.createElement(_button.Button, {
       type: "submit",
       disabled: invalid,
       onClick: handleSubmit

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

@@ -1,4 +1,5 @@
 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 { Button } from '@dhis2-ui/button';
 import React, { useState } from 'react';
 import { Field, Form } from 'react-final-form';
 import { CalendarInput } from '../calendar-input/calendar-input.js';
@@ -122,12 +123,14 @@ export function CalendarWithEditiableInput() {
     clearable: true
   })));
 }
-export function CalendarWithEditableInputReactForm() {
+export function CalendarWithStrictValidation() {
   const [validation, setValidation] = useState({});
   const errored = () => {
-    return {
-      calendar: validation.validationText
-    };
+    if (validation.error) {
+      return {
+        calendar: validation.validationText
+      };
+    }
   };
   return /*#__PURE__*/React.createElement(Form, {
     onSubmit: (values, meta) => {
@@ -150,6 +153,62 @@ export function CalendarWithEditableInputReactForm() {
     }, /*#__PURE__*/React.createElement(Field, {
       name: "calendar"
     }, props => /*#__PURE__*/React.createElement(CalendarInput, _extends({}, props, {
+      label: "Enter a date",
+      helpText: "Date has to be after 2022-11-01",
+      input: props.input,
+      meta: props.meta,
+      editable: true,
+      date: props.input.value,
+      calendar: "gregory"
+    }, validation, {
+      minDate: "2022-11-01",
+      onDateSelect: date => {
+        const validation = {
+          ...date.validation,
+          validationText: date.validation.validationCode === 'WRONG_FORMAT' ? 'custom validation message for format' : date.validation.validationText
+        };
+        setValidation(validation);
+        props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
+      }
+    }))), /*#__PURE__*/React.createElement(Button, {
+      type: "submit",
+      disabled: invalid,
+      onClick: handleSubmit
+    }, "Submit"));
+  });
+}
+export function CalendarWithNonStrictValidation() {
+  const [validation, setValidation] = useState({});
+  const errored = () => {
+    if (validation.error) {
+      return {
+        calendar: validation.validationText
+      };
+    }
+  };
+  return /*#__PURE__*/React.createElement(Form, {
+    onSubmit: (values, meta) => {
+      console.log('SUBMITTING', {
+        values,
+        meta
+      });
+    },
+    initialValues: {
+      calendar: '2022-10-12'
+    },
+    validate: errored
+  }, _ref4 => {
+    let {
+      handleSubmit,
+      invalid
+    } = _ref4;
+    return /*#__PURE__*/React.createElement("form", {
+      onSubmit: handleSubmit
+    }, /*#__PURE__*/React.createElement(Field, {
+      name: "calendar"
+    }, props => /*#__PURE__*/React.createElement(CalendarInput, _extends({}, props, {
+      label: "Enter a date",
+      helpText: "Date has to be after 2022-11-01",
       input: props.input,
       meta: props.meta,
       editable: true,
@@ -157,6 +216,7 @@ export function CalendarWithEditableInputReactForm() {
       calendar: "gregory"
     }, validation, {
       minDate: "2022-11-01",
+      strictValidation: false,
       onDateSelect: date => {
         const validation = {
           ...date.validation,
@@ -165,7 +225,7 @@ export function CalendarWithEditableInputReactForm() {
         setValidation(validation);
         props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
       }
-    }))), /*#__PURE__*/React.createElement("button", {
+    }))), /*#__PURE__*/React.createElement(Button, {
       type: "submit",
       disabled: invalid,
       onClick: handleSubmit

package/package.json

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

package/types/index.d.ts

@@ -20,6 +20,11 @@ export interface CalendarProps {
      * the size of a single cell in the table forming the calendar
      */
     cellSize?: string
+
+    /**
+     * Add a "clear" button to delete the selected date
+     */
+    clearable?: boolean
     /**
      * the currently selected date using an iso-like format YYYY-MM-DD, in the calendar system provided (not iso8601)
      */
@@ -52,10 +57,7 @@ export interface CalendarProps {
 
 export const Calendar: React.FC<CalendarProps>
 
-export type CalendarInputProps = Omit<
-    InputFieldProps,
-    'label' | 'type' | 'value'
-> &
+export type CalendarInputProps = Omit<InputFieldProps, 'type' | 'value'> &
     CalendarProps
 
 export const CalendarInput: React.FC<CalendarInputProps>