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

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

@@ -1,9 +1,11 @@
-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';
-
+import { useTranslation } from "react-i18next";
 const Number = props => {
+  const {
+    t
+  } = useTranslation();
   const {
     min,
     max,
@@ -11,25 +13,23 @@ const Number = props => {
     required,
     requiredError
   } = props;
-
   const validation = value => {
     let error;
-
     if (required && !value) {
-      error = requiredError || `Value can not be empty`;
+      error = requiredError || t('webform.required');
     }
-
     if (min && parseInt(value) < min) {
-      error = `Value can not be lower than ${min}.`;
+      error = t('webform.number.min', {
+        min: min
+      });
     }
-
     if (max && parseInt(value) > max) {
-      error = `Value can not be higher than ${max}.`;
+      error = t('webform.number.max', {
+        max: max
+      });
     }
-
     return error;
   };
-
   return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
     type: "number",
     validation: validation,
@@ -38,5 +38,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);

package/dist/components/Form/Select/Input/index.js

@@ -3,7 +3,6 @@ import SelectStyled from 'react-select';
 import c from 'classnames';
 import { Field } from 'formik';
 import './style.scss';
-
 const SelectInput = props => {
   const {
     fieldName,
@@ -18,15 +17,16 @@ const SelectInput = props => {
     className,
     wrapperClassName,
     isClearable = true,
+    isSearchable = true,
     multiple = false,
     size
   } = props;
   let {
     selectedOption
-  } = props; // Check if options is [{value, label}] or {value: label}.
+  } = props;
 
+  // Check if options is [{value, label}] or {value: label}.
   let optionsTransformed = options;
-
   if (!Array.isArray(options)) {
     optionsTransformed = Object.keys(options).map(value => {
       const label = options[value];
@@ -35,25 +35,22 @@ const SelectInput = props => {
         label: label
       };
     });
-  } // If the selected option is not set, find the currently selected option by value.
-
+  }
 
+  // If the selected option is not set, find the currently selected option by value.
   if (!selectedOption) {
     if (multiple) {
       const _value = value !== undefined ? value : defaultValue || [];
-
       selectedOption = optionsTransformed.filter(option => {
         return _value.includes(option.value);
       });
     } else {
       const _value = value !== undefined ? value : defaultValue || '';
-
       selectedOption = optionsTransformed.find(option => {
         return option.value === _value;
       });
     }
   }
-
   return /*#__PURE__*/React.createElement(Field, {
     required: true,
     name: fieldName,
@@ -72,7 +69,6 @@ const SelectInput = props => {
       disabled: disabled,
       onChange: e => {
         let value = '';
-
         if (e) {
           if (multiple) {
             value = e.map(item => {
@@ -86,11 +82,9 @@ const SelectInput = props => {
             value = [];
           }
         }
-
         if (onChange) {
           onChange(value);
         }
-
         form.setFieldValue(fieldName, value);
       },
       options: optionsTransformed,
@@ -99,15 +93,14 @@ const SelectInput = props => {
         if (option.disabled) {
           return true;
         }
-
         if (size && selectedOption.length >= size) {
           return true;
         }
-
         return false;
       },
       placeholder: placeholder,
       isClearable: isClearable,
+      isSearchable: isSearchable,
       theme: {
         borderRadius: 0,
         colors: {
@@ -133,5 +126,4 @@ const SelectInput = props => {
     });
   });
 };
-
 export default SelectInput;

package/dist/components/Form/Select/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 c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import SelectInput from './Input';
 import './style.scss';
-
 const Select = props => {
   const {
     title,
@@ -37,5 +35,4 @@ const Select = props => {
     multiple: multiple
   })));
 };
-
 export default Select;

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

@@ -20,11 +20,9 @@ export const Select = () => {
     defaultValue: "wine",
     validation: value => {
       let error;
-
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
-
       return error;
     },
     onChange: e => {
@@ -50,11 +48,9 @@ export const SelectMultiple = () => {
     defaultValue: ['wine'],
     validation: value => {
       let error;
-
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
-
       return error;
     },
     onChange: e => {

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

@@ -4,7 +4,6 @@ import c from 'classnames';
 import withMapping from '../../../Context/withMapping';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
-
 const TextField = props => {
   const {
     title,
@@ -23,21 +22,17 @@ const TextField = props => {
     disabled = false
   } = props;
   const type = props.type || "text";
-
   const handleChange = e => {
     const {
       handleChange
     } = props;
-
     if (handleChange) {
       handleChange(e);
     }
-
     if (onChange) {
       onChange(e);
     }
   };
-
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: c("TextField", wrapperClassName),
     title: title,
@@ -60,5 +55,4 @@ const TextField = props => {
     disabled: disabled
   }));
 };
-
 export default withMapping(TextField);

package/dist/components/Form/TextField/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 { TextField } from './stories'; // Use sinon-chai for spies.
+import { TextField } from './stories';
 
+// Use sinon-chai for spies.
 chai.use(sinonChai);
 describe('<TextField />', () => {
   it('renders a label element', () => {
@@ -41,17 +42,20 @@ describe('<TextField />', () => {
       input.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.TextField__error')).to.have.lengthOf(0); // Submitted values should contain my value.
+    // Should not display an error message.
+    expect(wrapper.find('div.TextField__error')).to.have.lengthOf(0);
 
+    // Submitted values should contain my value.
     expect(onSubmitCallback).to.have.been.calledWith({
       firstname: value
     });

package/dist/components/Form/TextField/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 FormikTextField from '.';
@@ -20,11 +19,9 @@ export const TextField = props => {
     fieldName: "firstname",
     validation: value => {
       let error;
-
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
-
       return error;
     },
     onChange: e => console.log(e.target.value)

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

@@ -3,7 +3,6 @@ import { Field } from 'formik';
 import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
-
 const Textarea = props => {
   const {
     title,
@@ -43,5 +42,4 @@ const Textarea = props => {
     disabled: disabled
   }));
 };
-
 export default Textarea;

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

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

package/dist/components/Hamburger/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import './style.scss';
-
 const Hamburger = ({
   onClick,
   numberOfLines
@@ -16,7 +15,6 @@ const Hamburger = ({
 }).map((item, index) => /*#__PURE__*/React.createElement("span", {
   key: index
 }))));
-
 Hamburger.defaultProps = {
   onClick: () => {},
   numberOfLines: 3

package/dist/components/Header/index.js

@@ -4,7 +4,6 @@ import Container from '../Layout/Container';
 import Hamburger from '../Hamburger';
 import NavigationScroll from '../NavigationScroll';
 import './style.scss';
-
 const Header = ({
   logo,
   menu,
@@ -24,18 +23,17 @@ const Header = ({
     "Header--force-hamburger": forceHamburger,
     "show-nav": active
   });
-
   if (forceHamburger) {
-    import('./style-force-hamburger.scss').then(() => {// Do nothing.
+    import('./style-force-hamburger.scss').then(() => {
+      // Do nothing.
     });
   } else {
-    import('./style-default.scss').then(() => {// Do nothing.
+    import('./style-default.scss').then(() => {
+      // Do nothing.
     });
   }
-
   const onUpdateNavigationScroll = (isVisible, hasReachedTop, scrolledPastNavHeight) => {
     const shouldUpdate = state.visible !== isVisible || state.reachedTop !== hasReachedTop || state.scrolledPastNavHeight !== scrolledPastNavHeight;
-
     if (shouldUpdate) {
       setState({
         scrolledPastNavHeight,
@@ -44,7 +42,6 @@ const Header = ({
       });
     }
   };
-
   const headerComponent = /*#__PURE__*/React.createElement("header", {
     className: className
   }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
@@ -64,7 +61,6 @@ const Header = ({
   }))))), subMenu && /*#__PURE__*/React.createElement("div", {
     className: "Header__subMenu"
   }, /*#__PURE__*/React.createElement(Container, null, subMenu)));
-
   if (withAnimation) {
     return /*#__PURE__*/React.createElement(NavigationScroll, {
       onUpdate: onUpdateNavigationScroll,
@@ -74,5 +70,4 @@ const Header = ({
     return headerComponent;
   }
 };
-
 export default Header;

package/dist/components/Image/Background/index.js

@@ -1,10 +1,8 @@
-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, { useRef } from 'react';
 import c from 'classnames';
 import Picture from '../Picture';
 import './style.scss';
-
 const ImageBackground = ({
   className,
   children,
@@ -13,17 +11,14 @@ const ImageBackground = ({
 }) => {
   const bgElem = useRef(null);
   const imgElement = useRef(null);
-
   const onLoad = e => {
     const src = typeof imgElement.current.currentSrc !== 'undefined' ? imgElement.current.currentSrc : imgElement.current.src;
-
     if (withGradient) {
       bgElem.current.style.backgroundImage = `${withGradient}, url("${src}")`;
     } else {
       bgElem.current.style.backgroundImage = `url("${src}")`;
     }
   };
-
   const classes = c('ImageBackground', className);
   return /*#__PURE__*/React.createElement("div", {
     className: classes,
@@ -35,5 +30,4 @@ const ImageBackground = ({
     imageRef: imgElement
   }, props)), children);
 };
-
 export default ImageBackground;

package/dist/components/Image/LazyLoadWrapper/index.js

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import LazyLoad from 'react-lazyload';
 import { Map } from 'immutable';
 import './style.scss';
-
 class LazyLoadWrapper extends Component {
   constructor(props) {
     super(props);
@@ -12,7 +11,6 @@ class LazyLoadWrapper extends Component {
       error: false
     };
   }
-
   render() {
     const {
       lazyload: shouldLazyLoad,
@@ -23,38 +21,30 @@ class LazyLoadWrapper extends Component {
       src: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
       alt: "placeholder"
     });
-
     if (!shouldLazyLoad) {
       return children;
     }
-
     const addOnLoadCallback = element => {
       const newProps = {};
-
       newProps.onLoad = event => {
         this.setState({
           loaded: true
         });
       };
-
       newProps.onError = event => {
         this.setState({
           error: true
         });
       };
-
       let elements = [];
       const elementMap = Map(element);
-
       if (Array.isArray(elementMap.getIn(['props', 'children']))) {
         elements = React.Children.map(element.props.children, child => {
           return addOnLoadCallback(child);
         });
       }
-
       return /*#__PURE__*/React.cloneElement(element, newProps, ...elements);
     };
-
     const {
       loaded,
       error
@@ -75,7 +65,5 @@ class LazyLoadWrapper extends Component {
       return addOnLoadCallback(child);
     }))));
   }
-
 }
-
 export default LazyLoadWrapper;