@uncinc/uncinc-react-kitchen-sink 2.3.3 → 2.3.4

package/dist/components/Form/DateSelect/index.js

@@ -1,144 +1,169 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import moment from 'moment';
-import c from 'classnames';
-import SelectInput from '../Select/Input';
+import { useFormikContext } from 'formik';
+import { useTranslation } from 'react-i18next';
 import GenericFormElement from '../GenericFormElement';
+import SelectInput from '../Select/Input';
 import './style.scss';
-
 const DateSelect = props => {
   const {
     title,
-    required,
-    description,
     fieldName,
-    touched,
-    error,
-    values,
-    setFieldValue,
-    setFieldError,
+    yearMin,
+    yearMax,
+    hideYear,
+    fixedYear,
+    required,
     displayRequiredIndicator,
-    className,
-    wrapperClassName,
-    disabled = false
-  } = props; // Set all states for the date.
+    requiredError,
+    notValidError,
+    dayPlaceholder,
+    monthPlaceholder,
+    yearPlaceholder
+  } = props;
+  const {
+    setFieldValue,
+    isSubmitting,
+    values
+  } = useFormikContext();
+  const {
+    t
+  } = useTranslation();
 
+  // Set all states for the date.
   const [day, setDay] = useState();
   const [month, setMonth] = useState();
   const [year, setYear] = useState();
-  const placeholderDay = 'Dag';
-  const placeholderMonth = 'Maand';
-  const placeholderYear = 'Jaar';
-  const requiredError = 'This field is required';
-  const dateMin = 1900;
-  const dateMax = 2999; // Render all day options possible.
+  const [showError, setShowError] = useState();
+  const [error, setError] = useState();
+  const [dateNotValid, setDateNotValid] = useState();
 
-  const renderDayOptions = useCallback(placeholder => {
+  // List all day options
+  const dayOptions = useCallback(placeholder => {
     const options = [];
-
     if (placeholder) {
       options.push({
         value: placeholder,
         label: placeholder
       });
     }
-
     for (let index = 1; index <= 31; index++) {
       options.push({
         value: index,
         label: index
       });
     }
-
     return options;
-  }, []); // Render all options possible for months.
+  }, []);
 
-  const renderMonthOptions = useCallback(() => {
-    const months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'October', 'November', 'December'];
+  // List all month options
+  const monthOptions = useCallback(() => {
+    const months = [t('dateselect.months.jan', 'Januari'), t('dateselect.months.feb', 'Februari'), t('dateselect.months.mar', 'Maart'), t('dateselect.months.apr', 'April'), t('dateselect.months.may', 'Mei'), t('dateselect.months.jun', 'Juni'), t('dateselect.months.jul', 'Juli'), t('dateselect.months.aug', 'Augustus'), t('dateselect.months.sep', 'September'), t('dateselect.months.oct', 'Oktober'), t('dateselect.months.nov', 'November'), t('dateselect.months.dec', 'December')];
     return months.map((e, i) => {
       return {
         value: i + 1,
         label: e
       };
     });
-  }, []); // Render all options for possible years from
-  // the DateMin and DateMax variables.
+  }, []);
 
-  const renderYearOptions = useCallback(() => {
+  // List all options for possible years from the yearMin and yearMax variables.
+  const yearOptions = useCallback(() => {
     const options = [];
-
-    for (let index = dateMin; index <= dateMax; index++) {
+    for (let index = yearMin; index <= yearMax; index++) {
       options.push({
         value: index,
         label: index
       });
     }
-
     return options;
-  }, [dateMax, dateMin]);
+  }, [yearMin, yearMax]);
+
+  // Check if all fields are filled
   useEffect(() => {
-    // If one of these is not set return.
-    if (!day || !month || !year) {
-      setFieldError(requiredError || 'Dit is geen geldige geboortedatum.');
-      setFieldValue(fieldName, null);
-      return;
+    if (isSubmitting) {
+      if (required && !values[fieldName]) {
+        !dateNotValid && setError(requiredError);
+        setShowError(true);
+        return;
+      }
     }
+  }, [isSubmitting]);
 
-    if (day === placeholderDay || month === placeholderMonth || year === placeholderYear) {
-      setFieldError(requiredError || 'Dit is geen geldige geboortedatum.');
-      return;
-    } // If birthday is invalid, like 2000/02/30, set an error.
-
-
-    if (moment(values[fieldName])._isValid === false || day === placeholderDay || month === placeholderMonth || year === placeholderYear) {
-      setFieldError(requiredError || 'Dit is geen geldige geboortedatum.');
+  // Validation and setting either an error or the FieldValue
+  useEffect(() => {
+    hideYear && setYear(fixedYear || new Date().getFullYear());
+
+    // All options are filled, start validation
+    if (day && month && year) {
+      const date = new Date(`${year}-${month}-${day}`);
+      if (!(
+      // Take note of the exclamation mark
+      date.getDate() === day && date.getMonth() + 1 === month && date.getFullYear() === year)) {
+        // Depending on your browser, an invalid date overflows to the next month.
+        // For example, the 30th of Februari can become the 2nd of March.
+        // If that is the case, you still get a valid Date object, but it's not what
+        // the user filled in.
+        setError(notValidError);
+        setShowError(true);
+        setDateNotValid(true);
+        setFieldValue("dateSelect", '');
+        return;
+      }
+
+      // The Date is valid, so we hide previous errors and set the FieldValue
+      setShowError(false);
+      setDateNotValid(false);
+      setFieldValue("dateSelect", date);
       return;
-    } // Transform state items to date object.
-
+    }
 
-    const birthdate = moment(`${year}-${month}-${day}`, 'YYYY-MM-DD');
-    setFieldError('');
-    setFieldValue(fieldName, birthdate.format('YYYY-MM-DD'));
-  }, [day, month, year, fieldName, values, setFieldValue, setFieldError, requiredError]);
+    // In case a Date was selected and set as FieldValue, but the user decides
+    // to change the date, we want to hide previous errors and clear the FieldValue
+    // so that validation - and also the useEffect on isSubmitting - can do it's job.
+    setShowError(false);
+    setDateNotValid(false);
+    setFieldValue("dateSelect", '');
+  }, [day, month, year]);
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("DateSelect", wrapperClassName),
+    className: "DateSelect",
     title: title,
     required: required,
-    description: description,
-    fieldName: fieldName,
-    touched: touched,
+    displayRequiredIndicator: displayRequiredIndicator,
     error: error,
-    displayRequiredIndicator: displayRequiredIndicator
+    touched: showError
   }, /*#__PURE__*/React.createElement(SelectInput, {
-    className: className,
-    disabled: disabled,
-    fieldName: `${fieldName}[day]`,
-    options: renderDayOptions(),
+    id: `${fieldName}day`,
+    fieldName: `${fieldName}day`,
+    options: dayOptions(),
     value: day,
-    placeholder: placeholderDay,
-    onChange: e => {
-      setDay(e);
-    }
+    placeholder: dayPlaceholder,
+    onChange: day => setDay(day)
   }), /*#__PURE__*/React.createElement(SelectInput, {
-    className: className,
-    disabled: disabled,
-    fieldName: `${fieldName}[month]`,
-    options: renderMonthOptions(),
+    id: `${fieldName}month`,
+    fieldName: `${fieldName}month`,
+    options: monthOptions(),
     value: month,
-    placeholder: placeholderMonth,
-    onChange: e => {
-      setMonth(e);
-    }
-  }), /*#__PURE__*/React.createElement(SelectInput, {
-    className: className,
-    disabled: disabled,
-    fieldName: `${fieldName}[year]`,
-    options: renderYearOptions(),
+    placeholder: monthPlaceholder,
+    onChange: month => setMonth(month)
+  }), !hideYear && /*#__PURE__*/React.createElement(SelectInput, {
+    id: `${fieldName}year`,
+    fieldName: `${fieldName}year`,
+    options: yearOptions(),
     value: year,
-    placeholder: placeholderYear,
-    onChange: e => {
-      setYear(e);
-    }
+    placeholder: yearPlaceholder,
+    onChange: year => setYear(year)
   }));
 };
-
+DateSelect.defaultProps = {
+  title: 'Kies een datum',
+  fieldName: 'dateSelect',
+  yearMin: 1970,
+  yearMax: 2042,
+  hideYear: false,
+  requiredError: 'Waarde mag niet leeg zijn',
+  notValidError: 'Ongeldige datum',
+  dayPlaceholder: 'Dag',
+  monthPlaceholder: 'Maand',
+  yearPlaceholder: 'Jaar'
+};
 export default DateSelect;

package/dist/components/Form/DateSelect/stories.js

@@ -1,24 +1,33 @@
-import React from 'react';
+import React, { useState } from 'react';
 import FormikWrapper from '../FormikWrapper';
 import FormikDateSelect from '.';
 export default {
   title: 'Molecules/Form'
 };
 export const DateSelect = () => {
-  return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikDateSelect, {
-    title: "Date",
-    required: true,
-    description: "This is a test input.",
-    placeholder: "This is a placeholder",
-    fieldName: "date",
-    validation: value => {
-      let error;
-
-      if (!value) {
-        error = 'Dit is een vereist veld.';
-      }
-
-      return error;
+  const [date, setDate] = useState('');
+  return /*#__PURE__*/React.createElement(FormikWrapper, {
+    initialValues: {
+      dateSelect: date
+    },
+    validateOnBlur: true,
+    displayRequiredIndicator: "required",
+    onSubmit: (values, form) => {
+      form.setSubmitting(false);
+      setDate(values.dateSelect);
     }
+  }, /*#__PURE__*/React.createElement(FormikDateSelect, {
+    title: "Pick a date",
+    fieldName: "dateSelect",
+    required: true,
+    dayPlaceholder: "Day",
+    monthPlaceholder: "Month",
+    yearPlaceholder: "Year",
+    requiredError: "Please fill all fields.",
+    notValidError: "That's not a valid date."
+  }), /*#__PURE__*/React.createElement("p", null, "Selected date: ", date.toString()), /*#__PURE__*/React.createElement("input", {
+    class: "submitButton",
+    type: "submit",
+    value: "Pick date"
   }));
 };

package/dist/components/Form/DateSelect/style.scss

@@ -4,14 +4,14 @@
   label {
     font-size: 1.8rem;
     font-weight: 600;
-    line-height: 1.89;
+    line-height: 2rem;
     color: #1d1d1b;
     margin-bottom: 5px;
   }
   input {
     font-size: 1.8rem;
     font-weight: 500;
-    line-height: 1.89;
+    line-height: 2rem;
     color: #939393;
     padding: 1.2rem 5rem 1.4rem 2rem;
     border-radius: 5px;
@@ -36,7 +36,7 @@
     margin-top: 1rem;
     font-size: 1.4rem;
     font-style: italic;
-    line-height: 1.29;
+    line-height: 1.5rem;
     letter-spacing: normal;
     color: #1f1f1d;
   }
@@ -45,8 +45,14 @@
     margin-top: 1rem;
     font-size: 1.4rem;
     font-style: italic;
-    line-height: 1.14;
+    line-height: 1.2rem;
     letter-spacing: normal;
     color: #d30000;
   }
 }
+
+.submitButton {
+  padding: 1rem;
+  border-radius: 5px;
+  border: solid 1px #888888;
+}

package/dist/components/Form/Email/index.js

@@ -1,12 +1,9 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import TextField from '../TextField';
-
 const Email = props => {
   return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
     type: "email"
   }));
 };
-
 export default Email;

package/dist/components/Form/Email/stories.js

@@ -13,11 +13,9 @@ export const Email = () => {
     fieldName: "email",
     validation: value => {
       let error;
-
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
-
       return error;
     }
   }));

package/dist/components/Form/FormikWrapper/index.js

@@ -1,8 +1,6 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { Form, Formik } from 'formik';
-
 const renderChildrenRecursively = (child, childProps, displayRequiredIndicator) => {
   const {
     fieldName,
@@ -10,32 +8,30 @@ const renderChildrenRecursively = (child, childProps, displayRequiredIndicator)
     htmlType,
     children
   } = child.props;
-
   if (type === 'submit' || htmlType === 'submit') {
     return /*#__PURE__*/React.cloneElement(child, {
       disabled: childProps.isSubmitting
     }, children);
   }
-
   const fieldProps = {
     touched: childProps.touched[fieldName],
     error: childProps.errors[fieldName],
     value: childProps.values[fieldName],
     displayRequiredIndicator: displayRequiredIndicator
   };
-  return /*#__PURE__*/React.cloneElement(child, { ...child.props,
+  return /*#__PURE__*/React.cloneElement(child, {
+    ...child.props,
     ...fieldProps
   }, React.Children.map(children, subchild => {
     // Happens when we conditionally render elements.
     if (!subchild) {
       return null;
-    } // Happens for simple text nodes.
-
+    }
 
+    // Happens for simple text nodes.
     if (!subchild.props) {
       return /*#__PURE__*/React.createElement("span", null, subchild);
     }
-
     const {
       fieldName,
       children
@@ -46,18 +42,17 @@ const renderChildrenRecursively = (child, childProps, displayRequiredIndicator)
       value: childProps.values[fieldName],
       displayRequiredIndicator: displayRequiredIndicator
     };
-
     if (children) {
-      return renderChildrenRecursively(subchild, { ...childProps
+      return renderChildrenRecursively(subchild, {
+        ...childProps
       }, displayRequiredIndicator);
     }
-
-    return /*#__PURE__*/React.cloneElement(subchild, { ...childProps,
+    return /*#__PURE__*/React.cloneElement(subchild, {
+      ...childProps,
       ...fieldProps
     }, null);
   }));
 };
-
 const FormikWrapper = props => {
   const {
     initialValues,
@@ -82,5 +77,4 @@ const FormikWrapper = props => {
     return renderChildrenRecursively(child, childProps, displayRequiredIndicator);
   })));
 };
-
 export default FormikWrapper;

package/dist/components/Form/GenericFormElement/index.js

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import withMapping from '../../../Context/withMapping';
 import WysiwygField from '../../WysiwygField';
 import './style.scss';
-
 const GenericFormElement = props => {
   const {
     t
@@ -37,5 +36,4 @@ const GenericFormElement = props => {
     className: `FormElement__error ${className}__error`
   }, error) : null);
 };
-
 export default withMapping(GenericFormElement);

package/dist/components/Form/Number/index.js

@@ -1,8 +1,6 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import TextField from '../TextField';
-
 const Number = props => {
   const {
     min,
@@ -11,25 +9,19 @@ const Number = props => {
     required,
     requiredError
   } = props;
-
   const validation = value => {
     let error;
-
     if (required && !value) {
       error = requiredError || `Value can not be empty`;
     }
-
     if (min && parseInt(value) < min) {
       error = `Value can not be lower than ${min}.`;
     }
-
     if (max && parseInt(value) > max) {
       error = `Value can not be higher than ${max}.`;
     }
-
     return error;
   };
-
   return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
     type: "number",
     validation: validation,
@@ -38,5 +30,4 @@ const Number = props => {
     step: step
   }));
 };
-
 export default Number;

package/dist/components/Form/Number/stories.js

@@ -16,11 +16,9 @@ export const Number = () => {
     fieldName: "amount",
     validation: value => {
       let error;
-
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
-
       return error;
     }
   }));

package/dist/components/Form/RadioButtons/index.js

@@ -1,11 +1,9 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { Field } from 'formik';
 import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
-
 const Radio = props => {
   const {
     className,
@@ -24,7 +22,6 @@ const Radio = props => {
       'icon-radio': true,
       'icon-variant-1': field.value && field.value === props.value
     });
-
     if (props.value === '__other__') {
       const inputClasses = c({
         hidden: field.value !== '__other__'
@@ -44,7 +41,6 @@ const Radio = props => {
         }
       }));
     }
-
     return /*#__PURE__*/React.createElement("label", {
       htmlFor: name,
       className: classes
@@ -57,7 +53,6 @@ const Radio = props => {
     })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)));
   });
 };
-
 const RadioButtons = props => {
   const {
     title,
@@ -102,5 +97,4 @@ const RadioButtons = props => {
     });
   }));
 };
-
 export default RadioButtons;

package/dist/components/Form/RadioButtons/index.test.js

@@ -4,8 +4,9 @@ import { mount } from 'enzyme';
 import { act } from '@testing-library/react';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import { RadioButtons } from './stories'; // Use sinon-chai for spies.
+import { RadioButtons } from './stories';
 
+// Use sinon-chai for spies.
 chai.use(sinonChai);
 describe('<RadioButtons />', () => {
   it('renders 5 label elements', () => {
@@ -42,17 +43,20 @@ describe('<RadioButtons />', () => {
       input.at(2).simulate('change');
       await new Promise(resolve => {
         setTimeout(resolve);
-      }); // Submit values, and wait for Formik to complete.
+      });
 
+      // Submit values, and wait for Formik to complete.
       wrapper.find('Formik').simulate('submit');
       await new Promise(resolve => {
         setTimeout(resolve);
       });
     });
-    wrapper.update(); // Should not display an error message.
+    wrapper.update();
 
-    expect(wrapper.find('div.RadioButtons__error')).to.have.lengthOf(0); // Submitted values should contain my value.
+    // Should not display an error message.
+    expect(wrapper.find('div.RadioButtons__error')).to.have.lengthOf(0);
 
+    // Submitted values should contain my value.
     expect(onSubmitCallback).to.have.been.calledWith({
       poison: 'rum'
     });

package/dist/components/Form/RadioButtons/stories.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import FormikWrapper from '../FormikWrapper';
 import FormikRadio from '.';
@@ -31,11 +30,9 @@ export const RadioButtons = props => {
     },
     validation: value => {
       let error;
-
       if (!value) {
         error = 'This field is required';
       }
-
       return error;
     },
     otherLabel: "Anders"

package/dist/components/Form/SearchField/index.js

@@ -3,7 +3,6 @@ import { Field } from 'formik';
 import c from 'classnames';
 import withMapping from '../../../Context/withMapping';
 import WysiwygField from '../../WysiwygField';
-
 const SearchField = props => {
   const {
     title,
@@ -44,5 +43,4 @@ const SearchField = props => {
     className: "SearchField__error WebformComponent--error"
   }, error) : null);
 };
-
 export default withMapping(SearchField);