@dhis2-ui/calendar 10.0.0-alpha.3 → 10.0.0-alpha.5

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.
Files changed (5) hide show
  1. package/build/cjs/calendar-input/calendar-input.js +2 -0
  2. package/build/cjs/stories/calendar-input.prod.stories.js +70 -6
  3. package/build/es/calendar-input/calendar-input.js +2 -0
  4. package/build/es/stories/calendar-input.prod.stories.js +68 -5
  5. package/package.json +9 -9
package/build/cjs/calendar-input/calendar-input.js CHANGED
@@ -99,7 +99,9 @@ const CalendarInput = function () {
99
99
  }
100
100
  };
101
101
  const onFocus = () => {
102
+ var _rest$onFocus;
102
103
  setOpen(true);
104
+ rest === null || rest === void 0 ? void 0 : (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest);
103
105
  };
104
106
  const languageDirection = (0, _multiCalendarDates.useResolvedDirection)(dir, locale);
105
107
  const calendarProps = (0, _react.useMemo)(() => {
package/build/cjs/stories/calendar-input.prod.stories.js CHANGED
@@ -4,9 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.CalendarWithClearButton = void 0;
7
- exports.CalendarWithEditableInputReactForm = CalendarWithEditableInputReactForm;
8
7
  exports.CalendarWithEditiableInput = CalendarWithEditiableInput;
8
+ exports.CalendarWithNonStrictValidation = CalendarWithNonStrictValidation;
9
+ exports.CalendarWithStrictValidation = CalendarWithStrictValidation;
9
10
  exports.default = exports.NepaliWithNepali = exports.NepaliWithEnglish = exports.IslamicWithArabic = exports.GregorianWithEnglish = exports.GregorianWithArabic = exports.EthiopicWithEnglish = exports.EthiopicWithAmharic = void 0;
11
+ var _button = require("@dhis2-ui/button");
10
12
  var _react = _interopRequireWildcard(require("react"));
11
13
  var _reactFinalForm = require("react-final-form");
12
14
  var _calendarInput = require("../calendar-input/calendar-input.js");
@@ -129,18 +131,23 @@ function CalendarWithEditiableInput() {
129
131
  const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
130
132
  setDate(date);
131
133
  },
134
+ onFocus: () => {
135
+ console.log('focused');
136
+ },
132
137
  width: "400px",
133
138
  minDate: "2020-07-01",
134
139
  maxDate: "2020-07-09",
135
140
  clearable: true
136
141
  })));
137
142
  }
138
- function CalendarWithEditableInputReactForm() {
143
+ function CalendarWithStrictValidation() {
139
144
  const [validation, setValidation] = (0, _react.useState)({});
140
145
  const errored = () => {
141
- return {
142
- calendar: validation.validationText
143
- };
146
+ if (validation.error) {
147
+ return {
148
+ calendar: validation.validationText
149
+ };
150
+ }
144
151
  };
145
152
  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
146
153
  onSubmit: (values, meta) => {
@@ -163,6 +170,62 @@ function CalendarWithEditableInputReactForm() {
163
170
  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
164
171
  name: "calendar"
165
172
  }, props => /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({}, props, {
173
+ label: "Enter a date",
174
+ helpText: "Date has to be after 2022-11-01",
175
+ input: props.input,
176
+ meta: props.meta,
177
+ editable: true,
178
+ date: props.input.value,
179
+ calendar: "gregory"
180
+ }, validation, {
181
+ minDate: "2022-11-01",
182
+ onDateSelect: date => {
183
+ const validation = {
184
+ ...date.validation,
185
+ validationText: date.validation.validationCode === 'WRONG_FORMAT' ? 'custom validation message for format' : date.validation.validationText
186
+ };
187
+ setValidation(validation);
188
+ props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
189
+ }
190
+ }))), /*#__PURE__*/_react.default.createElement(_button.Button, {
191
+ type: "submit",
192
+ disabled: invalid,
193
+ onClick: handleSubmit
194
+ }, "Submit"));
195
+ });
196
+ }
197
+ function CalendarWithNonStrictValidation() {
198
+ const [validation, setValidation] = (0, _react.useState)({});
199
+ const errored = () => {
200
+ if (validation.error) {
201
+ return {
202
+ calendar: validation.validationText
203
+ };
204
+ }
205
+ };
206
+ return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Form, {
207
+ onSubmit: (values, meta) => {
208
+ console.log('SUBMITTING', {
209
+ values,
210
+ meta
211
+ });
212
+ },
213
+ initialValues: {
214
+ calendar: '2022-10-12'
215
+ },
216
+ validate: errored
217
+ }, _ref4 => {
218
+ let {
219
+ handleSubmit,
220
+ invalid
221
+ } = _ref4;
222
+ return /*#__PURE__*/_react.default.createElement("form", {
223
+ onSubmit: handleSubmit
224
+ }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
225
+ name: "calendar"
226
+ }, props => /*#__PURE__*/_react.default.createElement(_calendarInput.CalendarInput, _extends({}, props, {
227
+ label: "Enter a date",
228
+ helpText: "Date has to be after 2022-11-01",
166
229
  input: props.input,
167
230
  meta: props.meta,
168
231
  editable: true,
@@ -170,6 +233,7 @@ function CalendarWithEditableInputReactForm() {
170
233
  calendar: "gregory"
171
234
  }, validation, {
172
235
  minDate: "2022-11-01",
236
+ strictValidation: false,
173
237
  onDateSelect: date => {
174
238
  const validation = {
175
239
  ...date.validation,
@@ -178,7 +242,7 @@ function CalendarWithEditableInputReactForm() {
178
242
  setValidation(validation);
179
243
  props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
180
244
  }
181
- }))), /*#__PURE__*/_react.default.createElement("button", {
245
+ }))), /*#__PURE__*/_react.default.createElement(_button.Button, {
182
246
  type: "submit",
183
247
  disabled: invalid,
184
248
  onClick: handleSubmit
package/build/es/calendar-input/calendar-input.js CHANGED
@@ -90,7 +90,9 @@ export const CalendarInput = function () {
90
90
  }
91
91
  };
92
92
  const onFocus = () => {
93
+ var _rest$onFocus;
93
94
  setOpen(true);
95
+ rest === null || rest === void 0 ? void 0 : (_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 ? void 0 : _rest$onFocus.call(rest);
94
96
  };
95
97
  const languageDirection = useResolvedDirection(dir, locale);
96
98
  const calendarProps = useMemo(() => {
package/build/es/stories/calendar-input.prod.stories.js CHANGED
@@ -1,4 +1,5 @@
1
1
  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); }
2
+ import { Button } from '@dhis2-ui/button';
2
3
  import React, { useState } from 'react';
3
4
  import { Field, Form } from 'react-final-form';
4
5
  import { CalendarInput } from '../calendar-input/calendar-input.js';
@@ -116,18 +117,23 @@ export function CalendarWithEditiableInput() {
116
117
  const date = selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.calendarDateString;
117
118
  setDate(date);
118
119
  },
120
+ onFocus: () => {
121
+ console.log('focused');
122
+ },
119
123
  width: "400px",
120
124
  minDate: "2020-07-01",
121
125
  maxDate: "2020-07-09",
122
126
  clearable: true
123
127
  })));
124
128
  }
125
- export function CalendarWithEditableInputReactForm() {
129
+ export function CalendarWithStrictValidation() {
126
130
  const [validation, setValidation] = useState({});
127
131
  const errored = () => {
128
- return {
129
- calendar: validation.validationText
130
- };
132
+ if (validation.error) {
133
+ return {
134
+ calendar: validation.validationText
135
+ };
136
+ }
131
137
  };
132
138
  return /*#__PURE__*/React.createElement(Form, {
133
139
  onSubmit: (values, meta) => {
@@ -150,6 +156,62 @@ export function CalendarWithEditableInputReactForm() {
150
156
  }, /*#__PURE__*/React.createElement(Field, {
151
157
  name: "calendar"
152
158
  }, props => /*#__PURE__*/React.createElement(CalendarInput, _extends({}, props, {
159
+ label: "Enter a date",
160
+ helpText: "Date has to be after 2022-11-01",
161
+ input: props.input,
162
+ meta: props.meta,
163
+ editable: true,
164
+ date: props.input.value,
165
+ calendar: "gregory"
166
+ }, validation, {
167
+ minDate: "2022-11-01",
168
+ onDateSelect: date => {
169
+ const validation = {
170
+ ...date.validation,
171
+ validationText: date.validation.validationCode === 'WRONG_FORMAT' ? 'custom validation message for format' : date.validation.validationText
172
+ };
173
+ setValidation(validation);
174
+ props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
175
+ }
176
+ }))), /*#__PURE__*/React.createElement(Button, {
177
+ type: "submit",
178
+ disabled: invalid,
179
+ onClick: handleSubmit
180
+ }, "Submit"));
181
+ });
182
+ }
183
+ export function CalendarWithNonStrictValidation() {
184
+ const [validation, setValidation] = useState({});
185
+ const errored = () => {
186
+ if (validation.error) {
187
+ return {
188
+ calendar: validation.validationText
189
+ };
190
+ }
191
+ };
192
+ return /*#__PURE__*/React.createElement(Form, {
193
+ onSubmit: (values, meta) => {
194
+ console.log('SUBMITTING', {
195
+ values,
196
+ meta
197
+ });
198
+ },
199
+ initialValues: {
200
+ calendar: '2022-10-12'
201
+ },
202
+ validate: errored
203
+ }, _ref4 => {
204
+ let {
205
+ handleSubmit,
206
+ invalid
207
+ } = _ref4;
208
+ return /*#__PURE__*/React.createElement("form", {
209
+ onSubmit: handleSubmit
210
+ }, /*#__PURE__*/React.createElement(Field, {
211
+ name: "calendar"
212
+ }, props => /*#__PURE__*/React.createElement(CalendarInput, _extends({}, props, {
213
+ label: "Enter a date",
214
+ helpText: "Date has to be after 2022-11-01",
153
215
  input: props.input,
154
216
  meta: props.meta,
155
217
  editable: true,
@@ -157,6 +219,7 @@ export function CalendarWithEditableInputReactForm() {
157
219
  calendar: "gregory"
158
220
  }, validation, {
159
221
  minDate: "2022-11-01",
222
+ strictValidation: false,
160
223
  onDateSelect: date => {
161
224
  const validation = {
162
225
  ...date.validation,
@@ -165,7 +228,7 @@ export function CalendarWithEditableInputReactForm() {
165
228
  setValidation(validation);
166
229
  props.input.onChange(date ? date === null || date === void 0 ? void 0 : date.calendarDateString : '');
167
230
  }
168
- }))), /*#__PURE__*/React.createElement("button", {
231
+ }))), /*#__PURE__*/React.createElement(Button, {
169
232
  type: "submit",
170
233
  disabled: invalid,
171
234
  onClick: handleSubmit
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dhis2-ui/calendar",
3
- "version": "10.0.0-alpha.3",
3
+ "version": "10.0.0-alpha.5",
4
4
  "description": "UI Calendar",
5
5
  "repository": {
6
6
  "type": "git",
@@ -33,15 +33,15 @@
33
33
  "styled-jsx": "^4"
34
34
  },
35
35
  "dependencies": {
36
- "@dhis2-ui/button": "10.0.0-alpha.3",
37
- "@dhis2-ui/card": "10.0.0-alpha.3",
38
- "@dhis2-ui/input": "10.0.0-alpha.3",
39
- "@dhis2-ui/layer": "10.0.0-alpha.3",
40
- "@dhis2-ui/popper": "10.0.0-alpha.3",
41
- "@dhis2/multi-calendar-dates": "2.0.0-alpha.2",
36
+ "@dhis2-ui/button": "10.0.0-alpha.5",
37
+ "@dhis2-ui/card": "10.0.0-alpha.5",
38
+ "@dhis2-ui/input": "10.0.0-alpha.5",
39
+ "@dhis2-ui/layer": "10.0.0-alpha.5",
40
+ "@dhis2-ui/popper": "10.0.0-alpha.5",
41
+ "@dhis2/multi-calendar-dates": "2.0.0-alpha.5",
42
42
  "@dhis2/prop-types": "^3.1.2",
43
- "@dhis2/ui-constants": "10.0.0-alpha.3",
44
- "@dhis2/ui-icons": "10.0.0-alpha.3",
43
+ "@dhis2/ui-constants": "10.0.0-alpha.5",
44
+ "@dhis2/ui-icons": "10.0.0-alpha.5",
45
45
  "classnames": "^2.3.1",
46
46
  "prop-types": "^15.7.2"
47
47
  },