@digigov/form 0.4.10 → 0.5.1

package/CHANGELOG.md

@@ -1,6 +1,29 @@
 # Change Log - @digigov/form
 
-This log was last generated on Thu, 10 Feb 2022 13:45:56 GMT and should not be manually modified.
+This log was last generated on Thu, 24 Feb 2022 14:51:06 GMT and should not be manually modified.
+
+## 0.5.1
+Thu, 24 Feb 2022 14:51:06 GMT
+
+### Patches
+
+- pass validator registry through formbuilder props
+
+## 0.5.0
+Wed, 16 Feb 2022 12:49:28 GMT
+
+### Minor changes
+
+- Add new `date` field type that renders a three-block date input
+
+### Patches
+
+- Pin dayjs dependency
+
+## 0.4.11
+Mon, 14 Feb 2022 09:56:29 GMT
+
+_Version update only_
 
 ## 0.4.10
 Thu, 10 Feb 2022 13:45:56 GMT

package/Field/index.js

@@ -43,6 +43,8 @@ var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
 
 var _FileInput = _interopRequireDefault(require("@digigov/form/inputs/FileInput"));
 
+var _DateInput = _interopRequireDefault(require("@digigov/form/inputs/DateInput"));
+
 var _Label2 = _interopRequireDefault(require("@digigov/form/inputs/Label"));
 
 var _i18n = require("@digigov/ui/app/i18n");
@@ -63,6 +65,11 @@ var FIELD_COMPONENTS = {
   file: {
     component: _FileInput["default"]
   },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: _DateInput["default"]
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/es/Field/index.js

@@ -16,6 +16,7 @@ import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
+import DateInput from '@digigov/form/inputs/DateInput';
 import Label from '@digigov/form/inputs/Label';
 import { useTranslation } from '@digigov/ui/app/i18n';
 var FIELD_COMPONENTS = {
@@ -28,6 +29,11 @@ var FIELD_COMPONENTS = {
   file: {
     component: FileInput
   },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateInput
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/es/index.js

@@ -82,12 +82,13 @@ export function FormBuilder(_ref2) {
       _ref2$criteriaMode = _ref2.criteriaMode,
       criteriaMode = _ref2$criteriaMode === void 0 ? 'firstError' : _ref2$criteriaMode,
       _ref2$auto = _ref2.auto,
-      auto = _ref2$auto === void 0 ? false : _ref2$auto;
+      auto = _ref2$auto === void 0 ? false : _ref2$auto,
+      validatorRegistry = _ref2.validatorRegistry;
   var fieldsState = useRef(fields);
   var setFieldsState = useCallback(function (newFields) {
     fieldsState.current = newFields;
   }, []);
-  var schema = useValidationSchema(fieldsState);
+  var schema = useValidationSchema(fieldsState, validatorRegistry);
   var registerField = useCallback(function (field) {
     setFieldsState([].concat(_toConsumableArray(fieldsState.current), [field]));
   }, []);

package/es/inputs/DateInput/index.js

@@ -0,0 +1,149 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["label"],
+    _excluded2 = ["name", "type"];
+import React, { useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import CoreDateInput from '@digigov/react-core/DateInput';
+import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+dayjs.extend(customParseFormat);
+
+function useDate(value, onChange) {
+  var _useMemo = useMemo(function () {
+    if (!value || value.length === '') {
+      return ['', '', ''];
+    }
+
+    var _value$split = value.split('/'),
+        _value$split2 = _slicedToArray(_value$split, 3),
+        day = _value$split2[0],
+        month = _value$split2[1],
+        year = _value$split2[2];
+
+    return [year, month, day];
+  }, [value]),
+      _useMemo2 = _slicedToArray(_useMemo, 3),
+      year = _useMemo2[0],
+      month = _useMemo2[1],
+      day = _useMemo2[2];
+
+  function set(year, month, day) {
+    var value = "".concat(day || '', "/").concat(month || '', "/").concat(year || '');
+
+    if (!year && !month && !day) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  }
+
+  function setYear(evt) {
+    var val = evt.target.value;
+    set(val, month, day);
+  }
+
+  function setMonth(evt, cast) {
+    var val = evt.target.value;
+
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+
+    set(year, val, day);
+  }
+
+  function setDay(evt, cast) {
+    var val = evt.target.value;
+
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+
+    set(year, month, val);
+  }
+
+  return {
+    day: day,
+    month: month,
+    year: year,
+    setYear: setYear,
+    setMonth: setMonth,
+    setDay: setDay
+  };
+}
+
+var VALID_FORMATS = ['DD/MM/YYYY'];
+
+var makeDate = function makeDate(val) {
+  var date = dayjs(val, VALID_FORMATS, true);
+
+  if (date.isValid()) {
+    return date.format('DD/MM/YYYY');
+  }
+
+  return '';
+};
+
+var DatePart = function DatePart(_ref) {
+  var label = _ref.label,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(CoreDateInputItem, props, label);
+};
+
+var DateInput = function DateInput(_ref2) {
+  var name = _ref2.name,
+      type = _ref2.type,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState(props.value),
+      _useState2 = _slicedToArray(_useState, 1),
+      initial = _useState2[0];
+
+  var value = useMemo(function () {
+    if (initial === props.value) {
+      return makeDate(props.value);
+    }
+
+    return props.value;
+  }, [props.value, initial]);
+  var date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  return /*#__PURE__*/React.createElement(CoreDateInput, null, /*#__PURE__*/React.createElement(DatePart, {
+    label: t('form.label.day'),
+    onChange: date.setDay,
+    onBlur: function onBlur(e) {
+      return date.setDay(e, true);
+    },
+    value: date.day,
+    width: 2,
+    name: "".concat(name, "-day"),
+    maxlength: "2",
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(DatePart, {
+    label: t('form.label.month'),
+    onChange: date.setMonth,
+    onBlur: function onBlur(e) {
+      return date.setMonth(e, true);
+    },
+    value: date.month,
+    width: 2,
+    name: "".concat(props.name, "-month"),
+    maxlength: "2",
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(DatePart, {
+    label: t('form.label.year'),
+    onChange: date.setYear,
+    value: date.year,
+    width: 4,
+    name: "".concat(props.name, "-year"),
+    maxlength: "4",
+    disabled: props.disabled
+  }));
+};
+
+export default DateInput;

package/es/validators.js

@@ -10,6 +10,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import * as yup from 'yup';
 import * as gPhoneNumber from 'google-libphonenumber';
 import { useMemo } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
 var DEFAULT_FILE_MAX_SIZE = 10000000;
 export function validateAFM(afm) {
   if (afm.length !== 9) {
@@ -280,6 +283,13 @@ var IBAN_VALIDATOR = function IBAN_VALIDATOR(field) {
   };
 };
 
+var VALID_DATE_FORMATS = ['DD/MM/YYYY'];
+var DATE_CACHE = {};
+
+var getDate = function getDate(v) {
+  return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);
+};
+
 function getYupField(field, yupTypeMap) {
   var yupField = yupTypeMap[field.type] || yupTypeMap.string;
   return yupField(field);
@@ -416,6 +426,75 @@ var getYUPTypeMap = function getYUPTypeMap() {
     },
     'choice:single': function choiceSingle() {
       return yup.string().nullable();
+    },
+    date: function date(field) {
+      var simpleDate = yup.string().nullable(true).test('date', 'form.error.date.invalid', function (value) {
+        if (!value) return true;
+        value = getDate(value);
+        return value.isValid();
+      });
+      var params = field.extra || {};
+
+      if (params.max) {
+        var maxDate;
+
+        if (params.max === 'now') {
+          var today = new Date();
+          maxDate = new Date(today);
+        } else {
+          maxDate = getDate(params.max).toDate();
+        }
+
+        var maxNextDate = new Date(maxDate);
+        maxNextDate.setDate(maxDate.getDate() + 1);
+        simpleDate = simpleDate.test({
+          name: 'earlier-than',
+          message: {
+            key: 'form.error.date.earlier_than',
+            context: {
+              maxDate: maxNextDate.toLocaleDateString()
+            }
+          },
+          test: function test(value) {
+            if (!value) return true;
+            value = getDate(value);
+            var isValid = +value.toDate() < +maxDate;
+            return isValid;
+          }
+        });
+      }
+
+      if (params.min) {
+        var minDate;
+
+        if (params.min === 'now') {
+          var _today = new Date();
+
+          minDate = new Date(_today);
+        } else {
+          minDate = getDate(params.min).toDate();
+        }
+
+        var minPreviousDate = new Date(minDate);
+        minPreviousDate.setDate(minDate.getDate() - 1);
+        simpleDate = simpleDate.test({
+          name: 'later-than',
+          message: {
+            key: 'form.error.date.later_than',
+            context: {
+              minDate: minPreviousDate.toLocaleDateString()
+            }
+          },
+          test: function test(value) {
+            if (!value) return true;
+            value = getDate(value);
+            var isValid = +value.toDate() > +minDate;
+            return isValid;
+          }
+        });
+      }
+
+      return simpleDate;
     }
   };
   return yupTypeMap;

package/esm/Field/index.js

@@ -16,6 +16,7 @@ import Checkboxes from '@digigov/form/inputs/Checkboxes';
 import Radio from '@digigov/form/inputs/Radio';
 import Select from '@digigov/form/inputs/Select';
 import FileInput from '@digigov/form/inputs/FileInput';
+import DateInput from '@digigov/form/inputs/DateInput';
 import Label from '@digigov/form/inputs/Label';
 import { useTranslation } from '@digigov/ui/app/i18n';
 var FIELD_COMPONENTS = {
@@ -28,6 +29,11 @@ var FIELD_COMPONENTS = {
   file: {
     component: FileInput
   },
+  date: {
+    wrapper: 'fieldset',
+    controlled: true,
+    component: DateInput
+  },
   'choice:multiple': {
     wrapper: 'fieldset',
     controlled: true,

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.4.10
+/** @license Digigov v0.5.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -87,12 +87,13 @@ export function FormBuilder(_ref2) {
       _ref2$criteriaMode = _ref2.criteriaMode,
       criteriaMode = _ref2$criteriaMode === void 0 ? 'firstError' : _ref2$criteriaMode,
       _ref2$auto = _ref2.auto,
-      auto = _ref2$auto === void 0 ? false : _ref2$auto;
+      auto = _ref2$auto === void 0 ? false : _ref2$auto,
+      validatorRegistry = _ref2.validatorRegistry;
   var fieldsState = useRef(fields);
   var setFieldsState = useCallback(function (newFields) {
     fieldsState.current = newFields;
   }, []);
-  var schema = useValidationSchema(fieldsState);
+  var schema = useValidationSchema(fieldsState, validatorRegistry);
   var registerField = useCallback(function (field) {
     setFieldsState([].concat(_toConsumableArray(fieldsState.current), [field]));
   }, []);

package/esm/inputs/DateInput/index.js

@@ -0,0 +1,149 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["label"],
+    _excluded2 = ["name", "type"];
+import React, { useMemo, useState } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useTranslation } from '@digigov/ui/app/i18n';
+import CoreDateInput from '@digigov/react-core/DateInput';
+import CoreDateInputItem from '@digigov/react-core/DateInputItem';
+dayjs.extend(customParseFormat);
+
+function useDate(value, onChange) {
+  var _useMemo = useMemo(function () {
+    if (!value || value.length === '') {
+      return ['', '', ''];
+    }
+
+    var _value$split = value.split('/'),
+        _value$split2 = _slicedToArray(_value$split, 3),
+        day = _value$split2[0],
+        month = _value$split2[1],
+        year = _value$split2[2];
+
+    return [year, month, day];
+  }, [value]),
+      _useMemo2 = _slicedToArray(_useMemo, 3),
+      year = _useMemo2[0],
+      month = _useMemo2[1],
+      day = _useMemo2[2];
+
+  function set(year, month, day) {
+    var value = "".concat(day || '', "/").concat(month || '', "/").concat(year || '');
+
+    if (!year && !month && !day) {
+      onChange(null);
+    } else {
+      onChange(value);
+    }
+  }
+
+  function setYear(evt) {
+    var val = evt.target.value;
+    set(val, month, day);
+  }
+
+  function setMonth(evt, cast) {
+    var val = evt.target.value;
+
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+
+    set(year, val, day);
+  }
+
+  function setDay(evt, cast) {
+    var val = evt.target.value;
+
+    if (cast && val && val.length === 1) {
+      val = '0' + val;
+    }
+
+    set(year, month, val);
+  }
+
+  return {
+    day: day,
+    month: month,
+    year: year,
+    setYear: setYear,
+    setMonth: setMonth,
+    setDay: setDay
+  };
+}
+
+var VALID_FORMATS = ['DD/MM/YYYY'];
+
+var makeDate = function makeDate(val) {
+  var date = dayjs(val, VALID_FORMATS, true);
+
+  if (date.isValid()) {
+    return date.format('DD/MM/YYYY');
+  }
+
+  return '';
+};
+
+var DatePart = function DatePart(_ref) {
+  var label = _ref.label,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(CoreDateInputItem, props, label);
+};
+
+var DateInput = function DateInput(_ref2) {
+  var name = _ref2.name,
+      type = _ref2.type,
+      props = _objectWithoutProperties(_ref2, _excluded2);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState(props.value),
+      _useState2 = _slicedToArray(_useState, 1),
+      initial = _useState2[0];
+
+  var value = useMemo(function () {
+    if (initial === props.value) {
+      return makeDate(props.value);
+    }
+
+    return props.value;
+  }, [props.value, initial]);
+  var date = useDate(value || makeDate(props.defaultValue), props.onChange);
+  return /*#__PURE__*/React.createElement(CoreDateInput, null, /*#__PURE__*/React.createElement(DatePart, {
+    label: t('form.label.day'),
+    onChange: date.setDay,
+    onBlur: function onBlur(e) {
+      return date.setDay(e, true);
+    },
+    value: date.day,
+    width: 2,
+    name: "".concat(name, "-day"),
+    maxlength: "2",
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(DatePart, {
+    label: t('form.label.month'),
+    onChange: date.setMonth,
+    onBlur: function onBlur(e) {
+      return date.setMonth(e, true);
+    },
+    value: date.month,
+    width: 2,
+    name: "".concat(props.name, "-month"),
+    maxlength: "2",
+    disabled: props.disabled
+  }), /*#__PURE__*/React.createElement(DatePart, {
+    label: t('form.label.year'),
+    onChange: date.setYear,
+    value: date.year,
+    width: 4,
+    name: "".concat(props.name, "-year"),
+    maxlength: "4",
+    disabled: props.disabled
+  }));
+};
+
+export default DateInput;

package/esm/validators.js

@@ -10,6 +10,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import * as yup from 'yup';
 import * as gPhoneNumber from 'google-libphonenumber';
 import { useMemo } from 'react';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+dayjs.extend(customParseFormat);
 var DEFAULT_FILE_MAX_SIZE = 10000000;
 export function validateAFM(afm) {
   if (afm.length !== 9) {
@@ -280,6 +283,13 @@ var IBAN_VALIDATOR = function IBAN_VALIDATOR(field) {
   };
 };
 
+var VALID_DATE_FORMATS = ['DD/MM/YYYY'];
+var DATE_CACHE = {};
+
+var getDate = function getDate(v) {
+  return DATE_CACHE[v] ? DATE_CACHE[v] : dayjs(v, VALID_DATE_FORMATS, true);
+};
+
 function getYupField(field, yupTypeMap) {
   var yupField = yupTypeMap[field.type] || yupTypeMap.string;
   return yupField(field);
@@ -416,6 +426,75 @@ var getYUPTypeMap = function getYUPTypeMap() {
     },
     'choice:single': function choiceSingle() {
       return yup.string().nullable();
+    },
+    date: function date(field) {
+      var simpleDate = yup.string().nullable(true).test('date', 'form.error.date.invalid', function (value) {
+        if (!value) return true;
+        value = getDate(value);
+        return value.isValid();
+      });
+      var params = field.extra || {};
+
+      if (params.max) {
+        var maxDate;
+
+        if (params.max === 'now') {
+          var today = new Date();
+          maxDate = new Date(today);
+        } else {
+          maxDate = getDate(params.max).toDate();
+        }
+
+        var maxNextDate = new Date(maxDate);
+        maxNextDate.setDate(maxDate.getDate() + 1);
+        simpleDate = simpleDate.test({
+          name: 'earlier-than',
+          message: {
+            key: 'form.error.date.earlier_than',
+            context: {
+              maxDate: maxNextDate.toLocaleDateString()
+            }
+          },
+          test: function test(value) {
+            if (!value) return true;
+            value = getDate(value);
+            var isValid = +value.toDate() < +maxDate;
+            return isValid;
+          }
+        });
+      }
+
+      if (params.min) {
+        var minDate;
+
+        if (params.min === 'now') {
+          var _today = new Date();
+
+          minDate = new Date(_today);
+        } else {
+          minDate = getDate(params.min).toDate();
+        }
+
+        var minPreviousDate = new Date(minDate);
+        minPreviousDate.setDate(minDate.getDate() - 1);
+        simpleDate = simpleDate.test({
+          name: 'later-than',
+          message: {
+            key: 'form.error.date.later_than',
+            context: {
+              minDate: minPreviousDate.toLocaleDateString()
+            }
+          },
+          test: function test(value) {
+            if (!value) return true;
+            value = getDate(value);
+            var isValid = +value.toDate() > +minDate;
+            return isValid;
+          }
+        });
+      }
+
+      return simpleDate;
     }
   };
   return yupTypeMap;

package/index.js

@@ -140,12 +140,13 @@ function FormBuilder(_ref2) {
       _ref2$criteriaMode = _ref2.criteriaMode,
       criteriaMode = _ref2$criteriaMode === void 0 ? 'firstError' : _ref2$criteriaMode,
       _ref2$auto = _ref2.auto,
-      auto = _ref2$auto === void 0 ? false : _ref2$auto;
+      auto = _ref2$auto === void 0 ? false : _ref2$auto,
+      validatorRegistry = _ref2.validatorRegistry;
   var fieldsState = (0, _react.useRef)(fields);
   var setFieldsState = (0, _react.useCallback)(function (newFields) {
     fieldsState.current = newFields;
   }, []);
-  var schema = (0, _validators.useValidationSchema)(fieldsState);
+  var schema = (0, _validators.useValidationSchema)(fieldsState, validatorRegistry);
   var registerField = (0, _react.useCallback)(function (field) {
     setFieldsState([].concat((0, _toConsumableArray2["default"])(fieldsState.current), [field]));
   }, []);