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

Sign up to get free protection for your applications and to get access to all the features.
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
  },