@shopgate/pwa-ui-shared 7.30.0-alpha.6 → 7.30.0-alpha.8

package/Form/Builder/classes/ActionListener/spec.js

@@ -1,21 +1,323 @@
-function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import ActionListener from"./index";import{ACTION_TYPE_SET_VISIBILITY,ACTION_TYPE_SET_VALUE,ACTION_TYPE_TRANSFORM,ACTION_SET_VALUE_COPY_FROM,ACTION_RULE_TYPE_ONE_OF}from"./constants";jest.mock('@shopgate/pwa-core/helpers',function(){return{logger:{error:function error(){}}};});/**
+import ActionListener from "./index";
+import { ACTION_TYPE_SET_VISIBILITY, ACTION_TYPE_SET_VALUE, ACTION_TYPE_TRANSFORM, ACTION_SET_VALUE_COPY_FROM, ACTION_RULE_TYPE_ONE_OF } from "./constants";
+jest.mock('@shopgate/pwa-core/helpers', () => ({
+  logger: {
+    error: () => {}
+  }
+}));
+
+/**
  * Mock for provinces
  * @returns {{ST: string}}
- */var mockGetProvincesList=function mockGetProvincesList(){return{ST:'State',DF:'Default-State'};};describe('ActionListener',function(){describe('createSetVisibilityHandler',function(){it('should handle visibility changes correctly',function(){// -------------------------------------------------------------------------------------------
-var element={id:'province'};var action={type:ACTION_TYPE_SET_VISIBILITY,rules:[{context:'country',type:ACTION_RULE_TYPE_ONE_OF,data:['US']}]};var actionListener=new ActionListener(mockGetProvincesList,{});var handler=actionListener.createSetVisibilityHandler(element,action);var nextState;var expected;// Perform "make visible" test
-nextState={formData:{country:'US'}};expected={formData:{country:'US'},elementVisibility:{province:true}};expect(handler({},nextState)).toEqual(expected);// Perform "make invisible" test
-nextState={formData:{country:''}};expected={formData:{country:''},elementVisibility:{province:false}};expect(handler({},nextState)).toEqual(expected);});it('should handle call follow up changes correctly when visibility changed',function(){// -------------------------------------------------------------------------------------------
-var element={id:'province'};var action={type:ACTION_TYPE_SET_VISIBILITY,rules:[{context:'country',type:ACTION_RULE_TYPE_ONE_OF,data:['US']}]};var actionListener=new ActionListener(mockGetProvincesList,{});var handleVisibility=actionListener.createSetVisibilityHandler(element,action);// Province element is supposed to be hidden and therefore the follow up
-var followUpHandler=jest.fn();actionListener.register('province',followUpHandler);var prevState={formData:{province:'to be changed'}};var nextStateBeforeVisibilityChange={formData:{country:'',province:'to be changed'}};var nextStateAfterVisibilityChange={elementVisibility:{province:false},formData:{country:''}};handleVisibility(prevState,nextStateBeforeVisibilityChange);expect(followUpHandler).toHaveBeenCalledWith(prevState,nextStateAfterVisibilityChange);});});describe('updateProvinceElementHandler',function(){it('should select the first province in the list, when country changes and no default is '+'available',function(){// -------------------------------------------------------------------------------------------
-var element={id:'province',required:true};var action={type:'update',rules:[{context:'country'}]};var actionListener=new ActionListener(mockGetProvincesList,{});var handler=actionListener.createUpdateProvinceElementHandler(element,action);var prevState={formData:{province:''}};var nextState={formData:{country:'US'}};// eslint-disable-next-line extra-rules/no-single-line-objects
-var expected={formData:{country:'US',province:'ST'}};expect(handler(prevState,nextState)).toEqual(expected);});it('should select the default province in the list on country changes when a match with '+'default is available',function(){// -------------------------------------------------------------------------------------------
-var provinceElement={id:'province',"default":'DF',required:true};var countryElement={id:'country',"default":'US'};var action={type:'update',rules:[{context:countryElement.id}]};var prevState={};var nextState={formData:_defineProperty({},countryElement.id,countryElement["default"])};var expected={formData:_defineProperty(_defineProperty({},provinceElement.id,provinceElement["default"]),countryElement.id,countryElement["default"])};// Defaults matches the same object structure as 'formData'
-var actionListener=new ActionListener(mockGetProvincesList,expected.formData);var handler=actionListener.createUpdateProvinceElementHandler(provinceElement,action);// Expects the handler to take over the defaults in this test
-expect(handler(prevState,nextState)).toEqual(expected);});});describe('setValueHandler',function(){it('should create copy the referenced element value into the current element',function(){// -------------------------------------------------------------------------------------------
-var element={id:'street2'};var action={type:ACTION_TYPE_SET_VALUE,params:{type:ACTION_SET_VALUE_COPY_FROM,value:'street'}};var actionListener=new ActionListener(mockGetProvincesList,{});var handler=actionListener.createSetValueHandler(element,action);// eslint-disable-next-line extra-rules/no-single-line-objects
-var prevState={formData:{street:'',street2:''}};// eslint-disable-next-line extra-rules/no-single-line-objects
-var nextState={formData:{street:'Street 1',street2:''}};// eslint-disable-next-line extra-rules/no-single-line-objects
-var expected={formData:{street:'Street 1',street2:'Street 1'}};expect(handler(prevState,nextState)).toEqual(expected);});});describe('transformHandler',function(){it('should apply the transformHandler correctly for "String" operations',function(){// -------------------------------------------------------------------------------------------
-var element={id:'street'};var action={type:ACTION_TYPE_TRANSFORM,params:{type:'toUpperCase'}};var actionListener=new ActionListener(mockGetProvincesList,{});var handler=actionListener.createTransformHandler(element,action);var prevState={formData:{street:''}};var nextState={formData:{street:'Street'}};var expected={formData:{street:'STREET'}};expect(handler(prevState,nextState)).toEqual(expected);});it('should apply the transformHandler correctly for "Boolean" operations',function(){// -------------------------------------------------------------------------------------------
-var element={id:'boolTest'};var action={type:ACTION_TYPE_TRANSFORM,params:{type:'toString'}};var actionListener=new ActionListener(mockGetProvincesList,{});var handler=actionListener.createTransformHandler(element,action);var prevState={formData:{boolTest:true}};var nextState={formData:{boolTest:true}};var expected={formData:{boolTest:'true'}};expect(handler(prevState,nextState)).toEqual(expected);});it('should apply the transformHandler correctly for "Number" operations',function(){// -------------------------------------------------------------------------------------------
-var element={id:'numberTest'};var action={type:ACTION_TYPE_TRANSFORM,params:{type:'isInteger'}};var actionListener=new ActionListener(mockGetProvincesList,{});var handler=actionListener.createTransformHandler(element,action);var prevState={formData:{numberTest:7.88}};var nextState={formData:{numberTest:7.88}};var expected={formData:{numberTest:false}};expect(handler(prevState,nextState)).toEqual(expected);});});});
+ */
+const mockGetProvincesList = () => ({
+  ST: 'State',
+  DF: 'Default-State'
+});
+describe('ActionListener', () => {
+  describe('createSetVisibilityHandler', () => {
+    it('should handle visibility changes correctly', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const element = {
+        id: 'province'
+      };
+      const action = {
+        type: ACTION_TYPE_SET_VISIBILITY,
+        rules: [{
+          context: 'country',
+          type: ACTION_RULE_TYPE_ONE_OF,
+          data: ['US']
+        }]
+      };
+      const actionListener = new ActionListener(mockGetProvincesList, {});
+      const handler = actionListener.createSetVisibilityHandler(element, action);
+      let nextState;
+      let expected;
+
+      // Perform "make visible" test
+      nextState = {
+        formData: {
+          country: 'US'
+        }
+      };
+      expected = {
+        formData: {
+          country: 'US'
+        },
+        elementVisibility: {
+          province: true
+        }
+      };
+      expect(handler({}, nextState)).toEqual(expected);
+
+      // Perform "make invisible" test
+      nextState = {
+        formData: {
+          country: ''
+        }
+      };
+      expected = {
+        formData: {
+          country: ''
+        },
+        elementVisibility: {
+          province: false
+        }
+      };
+      expect(handler({}, nextState)).toEqual(expected);
+    });
+    it('should handle call follow up changes correctly when visibility changed', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const element = {
+        id: 'province'
+      };
+      const action = {
+        type: ACTION_TYPE_SET_VISIBILITY,
+        rules: [{
+          context: 'country',
+          type: ACTION_RULE_TYPE_ONE_OF,
+          data: ['US']
+        }]
+      };
+      const actionListener = new ActionListener(mockGetProvincesList, {});
+      const handleVisibility = actionListener.createSetVisibilityHandler(element, action);
+
+      // Province element is supposed to be hidden and therefore the follow up
+      const followUpHandler = jest.fn();
+      actionListener.register('province', followUpHandler);
+      const prevState = {
+        formData: {
+          province: 'to be changed'
+        }
+      };
+      const nextStateBeforeVisibilityChange = {
+        formData: {
+          country: '',
+          province: 'to be changed'
+        }
+      };
+      const nextStateAfterVisibilityChange = {
+        elementVisibility: {
+          province: false
+        },
+        formData: {
+          country: ''
+        }
+      };
+      handleVisibility(prevState, nextStateBeforeVisibilityChange);
+      expect(followUpHandler).toHaveBeenCalledWith(prevState, nextStateAfterVisibilityChange);
+    });
+  });
+  describe('updateProvinceElementHandler', () => {
+    it('should select the first province in the list, when country changes and no default is ' + 'available', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const element = {
+        id: 'province',
+        required: true
+      };
+      const action = {
+        type: 'update',
+        rules: [{
+          context: 'country'
+        }]
+      };
+      const actionListener = new ActionListener(mockGetProvincesList, {});
+      const handler = actionListener.createUpdateProvinceElementHandler(element, action);
+      const prevState = {
+        formData: {
+          province: ''
+        }
+      };
+      const nextState = {
+        formData: {
+          country: 'US'
+        }
+      };
+      // eslint-disable-next-line extra-rules/no-single-line-objects
+      const expected = {
+        formData: {
+          country: 'US',
+          province: 'ST'
+        }
+      };
+      expect(handler(prevState, nextState)).toEqual(expected);
+    });
+    it('should select the default province in the list on country changes when a match with ' + 'default is available', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const provinceElement = {
+        id: 'province',
+        default: 'DF',
+        required: true
+      };
+      const countryElement = {
+        id: 'country',
+        default: 'US'
+      };
+      const action = {
+        type: 'update',
+        rules: [{
+          context: countryElement.id
+        }]
+      };
+      const prevState = {};
+      const nextState = {
+        formData: {
+          [countryElement.id]: countryElement.default
+        }
+      };
+      const expected = {
+        formData: {
+          [provinceElement.id]: provinceElement.default,
+          [countryElement.id]: countryElement.default
+        }
+      };
+
+      // Defaults matches the same object structure as 'formData'
+      const actionListener = new ActionListener(mockGetProvincesList, expected.formData);
+      const handler = actionListener.createUpdateProvinceElementHandler(provinceElement, action);
+
+      // Expects the handler to take over the defaults in this test
+      expect(handler(prevState, nextState)).toEqual(expected);
+    });
+  });
+  describe('setValueHandler', () => {
+    it('should create copy the referenced element value into the current element', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const element = {
+        id: 'street2'
+      };
+      const action = {
+        type: ACTION_TYPE_SET_VALUE,
+        params: {
+          type: ACTION_SET_VALUE_COPY_FROM,
+          value: 'street'
+        }
+      };
+      const actionListener = new ActionListener(mockGetProvincesList, {});
+      const handler = actionListener.createSetValueHandler(element, action);
+
+      // eslint-disable-next-line extra-rules/no-single-line-objects
+      const prevState = {
+        formData: {
+          street: '',
+          street2: ''
+        }
+      };
+      // eslint-disable-next-line extra-rules/no-single-line-objects
+      const nextState = {
+        formData: {
+          street: 'Street 1',
+          street2: ''
+        }
+      };
+      // eslint-disable-next-line extra-rules/no-single-line-objects
+      const expected = {
+        formData: {
+          street: 'Street 1',
+          street2: 'Street 1'
+        }
+      };
+      expect(handler(prevState, nextState)).toEqual(expected);
+    });
+  });
+  describe('transformHandler', () => {
+    it('should apply the transformHandler correctly for "String" operations', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const element = {
+        id: 'street'
+      };
+      const action = {
+        type: ACTION_TYPE_TRANSFORM,
+        params: {
+          type: 'toUpperCase'
+        }
+      };
+      const actionListener = new ActionListener(mockGetProvincesList, {});
+      const handler = actionListener.createTransformHandler(element, action);
+      const prevState = {
+        formData: {
+          street: ''
+        }
+      };
+      const nextState = {
+        formData: {
+          street: 'Street'
+        }
+      };
+      const expected = {
+        formData: {
+          street: 'STREET'
+        }
+      };
+      expect(handler(prevState, nextState)).toEqual(expected);
+    });
+    it('should apply the transformHandler correctly for "Boolean" operations', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const element = {
+        id: 'boolTest'
+      };
+      const action = {
+        type: ACTION_TYPE_TRANSFORM,
+        params: {
+          type: 'toString'
+        }
+      };
+      const actionListener = new ActionListener(mockGetProvincesList, {});
+      const handler = actionListener.createTransformHandler(element, action);
+      const prevState = {
+        formData: {
+          boolTest: true
+        }
+      };
+      const nextState = {
+        formData: {
+          boolTest: true
+        }
+      };
+      const expected = {
+        formData: {
+          boolTest: 'true'
+        }
+      };
+      expect(handler(prevState, nextState)).toEqual(expected);
+    });
+    it('should apply the transformHandler correctly for "Number" operations', () => {
+      // -------------------------------------------------------------------------------------------
+
+      const element = {
+        id: 'numberTest'
+      };
+      const action = {
+        type: ACTION_TYPE_TRANSFORM,
+        params: {
+          type: 'isInteger'
+        }
+      };
+      const actionListener = new ActionListener(mockGetProvincesList, {});
+      const handler = actionListener.createTransformHandler(element, action);
+      const prevState = {
+        formData: {
+          numberTest: 7.88
+        }
+      };
+      const nextState = {
+        formData: {
+          numberTest: 7.88
+        }
+      };
+      const expected = {
+        formData: {
+          numberTest: false
+        }
+      };
+      expect(handler(prevState, nextState)).toEqual(expected);
+    });
+  });
+});

package/Form/Builder/components/CheckboxElement.js

@@ -1,7 +1,39 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import Checkbox from"../../Checkbox";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Checkbox from "../../Checkbox";
+
+/**
  * Takes an element and renders it, if the type matches
  * @param {Object} element The data of the element to be rendered
  * @returns {JSX}
- */var CheckboxElement=/*#__PURE__*/function(_PureComponent){function CheckboxElement(){_classCallCheck(this,CheckboxElement);return _callSuper(this,CheckboxElement,arguments);}_inherits(CheckboxElement,_PureComponent);return _createClass(CheckboxElement,[{key:"render",value:/**
+ */
+class CheckboxElement extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,element=_this$props.element,style=_this$props.style,errorText=_this$props.errorText,value=_this$props.value,name=_this$props.name;return React.createElement(Checkbox,{name:name,errorText:errorText,checked:value,className:style.fields,label:element.label,onChange:element.handleChange,translateErrorText:false});}}]);}(PureComponent);_defineProperty(CheckboxElement,"defaultProps",{value:false,style:{fields:''}});export default CheckboxElement;
+   */
+  render() {
+    const {
+      element,
+      style,
+      errorText,
+      value,
+      name
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      name: name,
+      errorText: errorText,
+      checked: value,
+      className: style.fields,
+      label: element.label,
+      onChange: element.handleChange,
+      translateErrorText: false
+    });
+  }
+}
+CheckboxElement.defaultProps = {
+  value: false,
+  style: {
+    fields: ''
+  }
+};
+export default CheckboxElement;

package/Form/Builder/components/CountryElement.js

@@ -1,7 +1,44 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import Select from"../../Select";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Select from "../../Select";
+
+/**
  * React component that takes the element and additional data and renders a select box
  * with a list of countries to select from.
  * @returns {JSX}
- */var CountryElement=/*#__PURE__*/function(_PureComponent){function CountryElement(){_classCallCheck(this,CountryElement);return _callSuper(this,CountryElement,arguments);}_inherits(CountryElement,_PureComponent);return _createClass(CountryElement,[{key:"render",value:/**
+ */
+class CountryElement extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,countryList=_this$props.countryList,element=_this$props.element,errorText=_this$props.errorText,name=_this$props.name,style=_this$props.style,value=_this$props.value;return React.createElement(Select,{name:name,className:style.fields,label:element.label,placeholder:element.placeholder,value:value,options:countryList,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false});}}]);}(PureComponent);_defineProperty(CountryElement,"defaultProps",{countryList:{},value:'',style:{fields:''}});export default CountryElement;
+   */
+  render() {
+    const {
+      countryList,
+      element,
+      errorText,
+      name,
+      style,
+      value
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Select, {
+      name: name,
+      className: style.fields,
+      label: element.label,
+      placeholder: element.placeholder,
+      value: value,
+      options: countryList,
+      onChange: element.handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false
+    });
+  }
+}
+CountryElement.defaultProps = {
+  countryList: {},
+  value: '',
+  style: {
+    fields: ''
+  }
+};
+export default CountryElement;

package/Form/Builder/components/ProvinceElement.js

@@ -1,7 +1,44 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import Select from"../../Select";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Select from "../../Select";
+
+/**
  * React component that takes the element and additional data and renders a select box
  * with a list of provinces to select from.
  * @returns {JSX}
- */var ProvinceElement=/*#__PURE__*/function(_PureComponent){function ProvinceElement(){_classCallCheck(this,ProvinceElement);return _callSuper(this,ProvinceElement,arguments);}_inherits(ProvinceElement,_PureComponent);return _createClass(ProvinceElement,[{key:"render",value:/**
+ */
+class ProvinceElement extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,provincesList=_this$props.provincesList,element=_this$props.element,errorText=_this$props.errorText,name=_this$props.name,style=_this$props.style,value=_this$props.value;return React.createElement(Select,{name:name,className:style.fields,label:element.label,placeholder:element.placeholder,value:value,options:provincesList,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false});}}]);}(PureComponent);_defineProperty(ProvinceElement,"defaultProps",{provincesList:{},value:'',style:{fields:''}});export default ProvinceElement;
+   */
+  render() {
+    const {
+      provincesList,
+      element,
+      errorText,
+      name,
+      style,
+      value
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Select, {
+      name: name,
+      className: style.fields,
+      label: element.label,
+      placeholder: element.placeholder,
+      value: value,
+      options: provincesList,
+      onChange: element.handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false
+    });
+  }
+}
+ProvinceElement.defaultProps = {
+  provincesList: {},
+  value: '',
+  style: {
+    fields: ''
+  }
+};
+export default ProvinceElement;

package/Form/Builder/components/RadioElement.js

@@ -1,7 +1,45 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent}from'react';import PropTypes from'prop-types';import RadioGroup from"../../RadioGroup";import RadioItem from"../../RadioGroup/components/Item";/**
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import RadioGroup from "../../RadioGroup";
+import RadioItem from "../../RadioGroup/components/Item";
+
+/**
  * React component that takes the element and additional data and renders a radio group
  * with a list of radio items.
  * @returns {JSX}
- */var RadioElement=/*#__PURE__*/function(_PureComponent){function RadioElement(){_classCallCheck(this,RadioElement);return _callSuper(this,RadioElement,arguments);}_inherits(RadioElement,_PureComponent);return _createClass(RadioElement,[{key:"render",value:/**
+ */
+class RadioElement extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,element=_this$props.element,errorText=_this$props.errorText,name=_this$props.name,style=_this$props.style,value=_this$props.value;return React.createElement(RadioGroup,{name:name,className:style.fields,label:element.label,value:value,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false},Object.keys(element.options).map(function(itemName){return React.createElement(RadioItem,{key:itemName,name:itemName,label:element.options[itemName]});}));}}]);}(PureComponent);_defineProperty(RadioElement,"defaultProps",{value:'',style:{fields:''}});export default RadioElement;
+   */
+  render() {
+    const {
+      element,
+      errorText,
+      name,
+      style,
+      value
+    } = this.props;
+    return /*#__PURE__*/React.createElement(RadioGroup, {
+      name: name,
+      className: style.fields,
+      label: element.label,
+      value: value,
+      onChange: element.handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false
+    }, Object.keys(element.options).map(itemName => /*#__PURE__*/React.createElement(RadioItem, {
+      key: itemName,
+      name: itemName,
+      label: element.options[itemName]
+    })));
+  }
+}
+RadioElement.defaultProps = {
+  value: '',
+  style: {
+    fields: ''
+  }
+};
+export default RadioElement;

package/Form/Builder/components/SelectElement.js

@@ -1,6 +1,42 @@
-function _typeof(obj){if(typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"){_typeof=function _typeof(obj){return typeof obj;};}else{_typeof=function _typeof(obj){return obj&&typeof Symbol==="function"&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj;};}return _typeof(obj);}function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor)){throw new TypeError("Cannot call a class as a function");}}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||false;descriptor.configurable=true;if("value"in descriptor)descriptor.writable=true;Object.defineProperty(target,descriptor.key,descriptor);}}function _createClass(Constructor,protoProps,staticProps){if(protoProps)_defineProperties(Constructor.prototype,protoProps);if(staticProps)_defineProperties(Constructor,staticProps);return Constructor;}function _callSuper(_this,derived,args){function isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{return!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));}catch(e){return false;}}derived=_getPrototypeOf(derived);return _possibleConstructorReturn(_this,isNativeReflectConstruct()?Reflect.construct(derived,args||[],_getPrototypeOf(_this).constructor):derived.apply(_this,args));}function _possibleConstructorReturn(self,call){if(call&&(_typeof(call)==="object"||typeof call==="function")){return call;}return _assertThisInitialized(self);}function _assertThisInitialized(self){if(self===void 0){throw new ReferenceError("this hasn't been initialised - super() hasn't been called");}return self;}function _getPrototypeOf(o){_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function _getPrototypeOf(o){return o.__proto__||Object.getPrototypeOf(o);};return _getPrototypeOf(o);}function _inherits(subClass,superClass){if(typeof superClass!=="function"&&superClass!==null){throw new TypeError("Super expression must either be null or a function");}subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:true,configurable:true}});if(superClass)_setPrototypeOf(subClass,superClass);}function _setPrototypeOf(o,p){_setPrototypeOf=Object.setPrototypeOf||function _setPrototypeOf(o,p){o.__proto__=p;return o;};return _setPrototypeOf(o,p);}function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}import React,{PureComponent,Fragment}from'react';import PropTypes from'prop-types';import Chevron from"../../../icons/CheckIcon";import Select from"../../Select";/**
+import React, { PureComponent, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import Chevron from "../../../icons/CheckIcon";
+import Select from "../../Select";
+
+/**
  * React component that takes the element and additional data and renders a configured select box.
  * @returns {JSX}
- */var SelectElement=/*#__PURE__*/function(_PureComponent){function SelectElement(){_classCallCheck(this,SelectElement);return _callSuper(this,SelectElement,arguments);}_inherits(SelectElement,_PureComponent);return _createClass(SelectElement,[{key:"render",value:/**
+ */
+class SelectElement extends PureComponent {
+  /**
    * @returns {JSX}
-   */function render(){var _this$props=this.props,element=_this$props.element,errorText=_this$props.errorText,name=_this$props.name,style=_this$props.style,value=_this$props.value;return React.createElement(Fragment,null,React.createElement(Select,{name:name,className:style.fields,label:element.label,placeholder:element.placeholder,value:value,options:element.options,onChange:element.handleChange,errorText:errorText,isControlled:true,translateErrorText:false}),React.createElement(Chevron,null));}}]);}(PureComponent);_defineProperty(SelectElement,"defaultProps",{value:'',style:{fields:''}});export default SelectElement;
+   */
+  render() {
+    const {
+      element,
+      errorText,
+      name,
+      style,
+      value
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Select, {
+      name: name,
+      className: style.fields,
+      label: element.label,
+      placeholder: element.placeholder,
+      value: value,
+      options: element.options,
+      onChange: element.handleChange,
+      errorText: errorText,
+      isControlled: true,
+      translateErrorText: false
+    }), /*#__PURE__*/React.createElement(Chevron, null));
+  }
+}
+SelectElement.defaultProps = {
+  value: '',
+  style: {
+    fields: ''
+  }
+};
+export default SelectElement;