@shopgate/pwa-ui-shared 7.30.0-alpha.10 → 7.30.0-alpha.11

package/Form/Builder/components/CheckboxElement.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Checkbox from "../../Checkbox";
@@ -7,11 +8,17 @@ import Checkbox from "../../Checkbox";
  * @param {Object} element The data of the element to be rendered
  * @returns {JSX}
  */
-class CheckboxElement extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let CheckboxElement = /*#__PURE__*/function (_PureComponent) {
+  function CheckboxElement() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(CheckboxElement, _PureComponent);
+  var _proto = CheckboxElement.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       element,
       style,
@@ -19,7 +26,7 @@ class CheckboxElement extends PureComponent {
       value,
       name
     } = this.props;
-    return /*#__PURE__*/React.createElement(Checkbox, {
+    return /*#__PURE__*/_jsx(Checkbox, {
       name: name,
       errorText: errorText,
       checked: value,
@@ -28,8 +35,9 @@ class CheckboxElement extends PureComponent {
       onChange: element.handleChange,
       translateErrorText: false
     });
-  }
-}
+  };
+  return CheckboxElement;
+}(PureComponent);
 CheckboxElement.defaultProps = {
   value: false,
   style: {

package/Form/Builder/components/CountryElement.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Select from "../../Select";
@@ -7,11 +8,17 @@ import Select from "../../Select";
  * with a list of countries to select from.
  * @returns {JSX}
  */
-class CountryElement extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let CountryElement = /*#__PURE__*/function (_PureComponent) {
+  function CountryElement() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(CountryElement, _PureComponent);
+  var _proto = CountryElement.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       countryList,
       element,
@@ -20,7 +27,7 @@ class CountryElement extends PureComponent {
       style,
       value
     } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
+    return /*#__PURE__*/_jsx(Select, {
       name: name,
       className: style.fields,
       label: element.label,
@@ -32,8 +39,9 @@ class CountryElement extends PureComponent {
       isControlled: true,
       translateErrorText: false
     });
-  }
-}
+  };
+  return CountryElement;
+}(PureComponent);
 CountryElement.defaultProps = {
   countryList: {},
   value: '',

package/Form/Builder/components/ProvinceElement.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Select from "../../Select";
@@ -7,11 +8,17 @@ import Select from "../../Select";
  * with a list of provinces to select from.
  * @returns {JSX}
  */
-class ProvinceElement extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let ProvinceElement = /*#__PURE__*/function (_PureComponent) {
+  function ProvinceElement() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(ProvinceElement, _PureComponent);
+  var _proto = ProvinceElement.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       provincesList,
       element,
@@ -20,7 +27,7 @@ class ProvinceElement extends PureComponent {
       style,
       value
     } = this.props;
-    return /*#__PURE__*/React.createElement(Select, {
+    return /*#__PURE__*/_jsx(Select, {
       name: name,
       className: style.fields,
       label: element.label,
@@ -32,8 +39,9 @@ class ProvinceElement extends PureComponent {
       isControlled: true,
       translateErrorText: false
     });
-  }
-}
+  };
+  return ProvinceElement;
+}(PureComponent);
 ProvinceElement.defaultProps = {
   provincesList: {},
   value: '',

package/Form/Builder/components/RadioElement.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import RadioGroup from "../../RadioGroup";
@@ -8,11 +9,17 @@ import RadioItem from "../../RadioGroup/components/Item";
  * with a list of radio items.
  * @returns {JSX}
  */
-class RadioElement extends PureComponent {
+import { jsx as _jsx } from "react/jsx-runtime";
+let RadioElement = /*#__PURE__*/function (_PureComponent) {
+  function RadioElement() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(RadioElement, _PureComponent);
+  var _proto = RadioElement.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       element,
       errorText,
@@ -20,7 +27,7 @@ class RadioElement extends PureComponent {
       style,
       value
     } = this.props;
-    return /*#__PURE__*/React.createElement(RadioGroup, {
+    return /*#__PURE__*/_jsx(RadioGroup, {
       name: name,
       className: style.fields,
       label: element.label,
@@ -28,14 +35,15 @@ class RadioElement extends PureComponent {
       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]
-    })));
-  }
-}
+      translateErrorText: false,
+      children: Object.keys(element.options).map(itemName => /*#__PURE__*/_jsx(RadioItem, {
+        name: itemName,
+        label: element.options[itemName]
+      }, itemName))
+    });
+  };
+  return RadioElement;
+}(PureComponent);
 RadioElement.defaultProps = {
   value: '',
   style: {

package/Form/Builder/components/SelectElement.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import Chevron from "../../../icons/CheckIcon";
@@ -7,11 +8,17 @@ import Select from "../../Select";
  * React component that takes the element and additional data and renders a configured select box.
  * @returns {JSX}
  */
-class SelectElement extends PureComponent {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+let SelectElement = /*#__PURE__*/function (_PureComponent) {
+  function SelectElement() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(SelectElement, _PureComponent);
+  var _proto = SelectElement.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       element,
       errorText,
@@ -19,20 +26,23 @@ class SelectElement extends PureComponent {
       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));
-  }
-}
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(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__*/_jsx(Chevron, {})]
+    });
+  };
+  return SelectElement;
+}(PureComponent);
 SelectElement.defaultProps = {
   value: '',
   style: {

package/Form/Builder/components/TextElement.js

@@ -1,9 +1,11 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import TextField from "../../../TextField";
 import { ELEMENT_TYPE_TEXT, ELEMENT_TYPE_NUMBER, ELEMENT_TYPE_EMAIL, ELEMENT_TYPE_PASSWORD, ELEMENT_TYPE_DATE, ELEMENT_TYPE_PHONE } from "../elementTypes";
 
 // Map element type to input type
+import { jsx as _jsx } from "react/jsx-runtime";
 const mapping = {
   [ELEMENT_TYPE_TEXT]: 'text',
   [ELEMENT_TYPE_NUMBER]: 'number',
@@ -16,11 +18,16 @@ const mapping = {
 /**
  * React component that takes the element and additional data and renders a configured text input.
  */
-class TextElement extends PureComponent {
+let TextElement = /*#__PURE__*/function (_PureComponent) {
+  function TextElement() {
+    return _PureComponent.apply(this, arguments) || this;
+  }
+  _inheritsLoose(TextElement, _PureComponent);
+  var _proto = TextElement.prototype;
   /**
    * @returns {JSX}
    */
-  render() {
+  _proto.render = function render() {
     const {
       element,
       errorText,
@@ -29,7 +36,7 @@ class TextElement extends PureComponent {
       value
     } = this.props;
     const type = mapping[element.type];
-    return /*#__PURE__*/React.createElement(TextField, {
+    return /*#__PURE__*/_jsx(TextField, {
       type: type,
       name: name,
       className: style.fields,
@@ -40,8 +47,9 @@ class TextElement extends PureComponent {
       isControlled: true,
       translateErrorText: false
     });
-  }
-}
+  };
+  return TextElement;
+}(PureComponent);
 TextElement.defaultProps = {
   value: '',
   style: {

package/Form/Builder/index.js

@@ -1,3 +1,4 @@
+import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
 import _isEqual from "lodash/isEqual";
 import "core-js/modules/es.string.replace.js";
 import React, { Component, Fragment } from 'react';
@@ -26,6 +27,7 @@ import buildValidationErrorList from "./builders/buildValidationErrorList";
  * @param {string} s The string to be sanitized
  * @return {string}
  */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sanitize = s => s.replace(/[\\._]/, '-');
 /**
  * Optional select element
@@ -39,13 +41,14 @@ const emptySelectOption = {
  * Takes a form configuration and handles rendering and updates of the form fields.
  * Note: Only one country and one province element is supported per FormBuilder instance.
  */
-class Builder extends Component {
+let Builder = /*#__PURE__*/function (_Component) {
   /**
    * Initializes the component.
    * @param {Object} props The components props.
    */
-  constructor(props) {
-    super(props);
+  function Builder(props) {
+    var _this;
+    _this = _Component.call(this, props) || this;
 
     // Prepare internal state
     /**
@@ -58,7 +61,7 @@ class Builder extends Component {
      * @param {FormElement} element2 Second element
      * @returns {number}
      */
-    this.elementSortFunc = (element1, element2) => {
+    _this.elementSortFunc = (element1, element2) => {
       // Keep current sort order when no specific sort order was set for both
       if (element1.sortOrder === undefined || element2.sortOrder === undefined) {
         return 0;
@@ -72,12 +75,12 @@ class Builder extends Component {
      * @param {string} elementId Element to create the handler for
      * @param {string} value Element value
      */
-    this.elementChangeHandler = (elementId, value) => {
+    _this.elementChangeHandler = (elementId, value) => {
       // Apply value change to new state
       const newState = {
-        ...this.state,
+        ..._this.state,
         formData: {
-          ...this.state.formData,
+          ..._this.state.formData,
           [elementId]: value
         }
       };
@@ -85,20 +88,20 @@ class Builder extends Component {
       // Remove validation error message on first change of the element
       Object.keys(newState.errors).forEach(key => {
         // Action listeners might add some again
-        if (this.state.formData[key] !== newState.formData[key]) {
+        if (_this.state.formData[key] !== newState.formData[key]) {
           delete newState.errors[key];
         }
       });
       const hasBackendValidationErrors = Object.keys(newState.errors).length > 0;
 
       // Handle context sensitive functionality by via "action" listener and use the "new" state
-      const updatedState = this.actionListener.notify(elementId, this.state, newState);
+      const updatedState = _this.actionListener.notify(elementId, _this.state, newState);
 
       // TODO: handle frontend validation errors and set "hasErrors" accordingly
       let hasErrors = false;
 
       // Check "required" fields for all visible elements and enable rendering on changes
-      this.formElements.forEach(formElement => {
+      _this.formElements.forEach(formElement => {
         if (!updatedState.elementVisibility[formElement.id] || !formElement.required) {
           return;
         }
@@ -110,11 +113,11 @@ class Builder extends Component {
       const hasValidationErrors = hasBackendValidationErrors && hasFrontendValidationErrors;
 
       // Handle state internally and send an "onChange" event to parent if this finished
-      this.setState(updatedState);
+      _this.setState(updatedState);
 
       // Transform to external structure (unavailable ones will be set undefined)
       const updateData = {};
-      this.formElements.forEach(el => {
+      _this.formElements.forEach(el => {
         if (el.custom) {
           if (updateData.customAttributes === undefined) {
             updateData.customAttributes = {};
@@ -126,7 +129,7 @@ class Builder extends Component {
       });
 
       // Trigger the given update action
-      this.props.handleUpdate(updateData, hasErrors || hasValidationErrors);
+      _this.props.handleUpdate(updateData, hasErrors || hasValidationErrors);
     };
     /**
      * Takes an element of any type and renders it depending on type.
@@ -134,11 +137,11 @@ class Builder extends Component {
      * @param {Object} element The data of the element to be rendered
      * @returns {JSX}
      */
-    this.renderElement = element => {
-      const elementName = `${this.props.name}.${element.id}`;
-      const elementErrorText = this.state.errors[element.id] || '';
-      const elementValue = this.state.formData[element.id];
-      const elementVisible = this.state.elementVisibility[element.id] || false;
+    _this.renderElement = element => {
+      const elementName = `${_this.props.name}.${element.id}`;
+      const elementErrorText = _this.state.errors[element.id] || '';
+      const elementValue = _this.state.formData[element.id];
+      const elementVisible = _this.state.elementVisibility[element.id] || false;
       if (!elementVisible) {
         return null;
       }
@@ -155,7 +158,7 @@ class Builder extends Component {
         case ELEMENT_TYPE_DATE:
         case ELEMENT_TYPE_PHONE:
           {
-            return /*#__PURE__*/React.createElement(TextElement, {
+            return /*#__PURE__*/_jsx(TextElement, {
               name: elementName,
               element: element,
               errorText: elementErrorText,
@@ -164,7 +167,7 @@ class Builder extends Component {
             });
           }
         case ELEMENT_TYPE_SELECT:
-          return /*#__PURE__*/React.createElement(SelectElement, {
+          return /*#__PURE__*/_jsx(SelectElement, {
             name: elementName,
             element: element,
             errorText: elementErrorText,
@@ -172,19 +175,19 @@ class Builder extends Component {
             visible: elementVisible
           });
         case ELEMENT_TYPE_COUNTRY:
-          return /*#__PURE__*/React.createElement(CountryElement, {
+          return /*#__PURE__*/_jsx(CountryElement, {
             name: elementName,
             element: element,
             errorText: elementErrorText,
             value: elementValue,
             visible: elementVisible,
-            countryList: this.countryList
+            countryList: _this.countryList
           });
         case ELEMENT_TYPE_PROVINCE:
           {
-            const countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
-            const provincesList = countryElement && this.state.formData[countryElement.id] ? buildProvinceList(this.state.formData[countryElement.id], element.required ? null : emptySelectOption) : {};
-            return /*#__PURE__*/React.createElement(ProvinceElement, {
+            const countryElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+            const provincesList = countryElement && _this.state.formData[countryElement.id] ? buildProvinceList(_this.state.formData[countryElement.id], element.required ? null : emptySelectOption) : {};
+            return /*#__PURE__*/_jsx(ProvinceElement, {
               name: elementName,
               element: element,
               errorText: elementErrorText,
@@ -195,7 +198,7 @@ class Builder extends Component {
           }
         case ELEMENT_TYPE_RADIO:
           {
-            return /*#__PURE__*/React.createElement(RadioElement, {
+            return /*#__PURE__*/_jsx(RadioElement, {
               name: elementName,
               element: element,
               errorText: elementErrorText,
@@ -205,7 +208,7 @@ class Builder extends Component {
           }
         case ELEMENT_TYPE_CHECKBOX:
           {
-            return /*#__PURE__*/React.createElement(CheckboxElement, {
+            return /*#__PURE__*/_jsx(CheckboxElement, {
               name: elementName,
               element: element,
               errorText: elementErrorText,
@@ -221,7 +224,7 @@ class Builder extends Component {
       }
       return null;
     };
-    this.state = {
+    _this.state = {
       elementVisibility: {},
       formData: {},
       // Convert errors structure to direct access errors
@@ -229,50 +232,53 @@ class Builder extends Component {
     };
 
     // Reorganize form elements into a structure that can be easily rendered
-    const formElements = buildFormElements(props.config, this.elementChangeHandler);
+    const formElements = buildFormElements(props.config, _this.elementChangeHandler);
     // Compute defaults
     const formDefaults = buildFormDefaults(formElements, props.defaults);
     // Assign defaults to state
-    this.state.formData = formDefaults;
+    _this.state.formData = formDefaults;
 
     // Handle fixed visibilities
     formElements.forEach(element => {
       // Assume as visible except it's explicitly set to "false"
-      this.state.elementVisibility[element.id] = element.visible !== false;
+      _this.state.elementVisibility[element.id] = element.visible !== false;
     });
-    this.actionListener = new ActionListener(buildProvinceList, formDefaults);
-    this.actionListener.attachAll(formElements);
+    _this.actionListener = new ActionListener(buildProvinceList, formDefaults);
+    _this.actionListener.attachAll(formElements);
 
     // Sort the elements after attaching action listeners to keep action hierarchy same as creation
-    this.formElements = formElements.sort(this.elementSortFunc);
+    _this.formElements = formElements.sort(_this.elementSortFunc);
 
     // Assemble combined country/province list based on the config element
-    const _countryElement = this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
+    const _countryElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_COUNTRY);
     if (_countryElement) {
-      this.countryList = buildCountryList(_countryElement, emptySelectOption);
-      const provinceElement = this.formElements.find(el => el.type === ELEMENT_TYPE_PROVINCE);
+      _this.countryList = buildCountryList(_countryElement, emptySelectOption);
+      const provinceElement = _this.formElements.find(el => el.type === ELEMENT_TYPE_PROVINCE);
       if (provinceElement && provinceElement.required && !!formDefaults[_countryElement.id] && !formDefaults[provinceElement.id]) {
         // Set default for province field for given country
         const [first] = Object.values(buildProvinceList(formDefaults[_countryElement.id]));
         if (first) {
-          this.state.formData[provinceElement.id] = first;
+          _this.state.formData[provinceElement.id] = first;
         }
       }
     }
 
     // Final form initialization, by triggering actionListeners and enable rendering for elements
-    let _newState = this.state;
-    this.formElements.forEach(element => {
-      _newState = this.actionListener.notify(element.id, this.state, _newState);
+    let _newState = _this.state;
+    _this.formElements.forEach(element => {
+      _newState = _this.actionListener.notify(element.id, _this.state, _newState);
     });
-    this.state = _newState;
+    _this.state = _newState;
+    return _this;
   }
 
   /**
    * Handles response of validation errors
    * @param {Object} nextProps The new props object with changed data
    */
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  _inheritsLoose(Builder, _Component);
+  var _proto = Builder.prototype;
+  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
     const oldValidationErrors = buildValidationErrorList(this.props.validationErrors);
     const newValidationErrors = buildValidationErrorList(nextProps.validationErrors);
     if (!_isEqual(oldValidationErrors, newValidationErrors)) {
@@ -280,27 +286,31 @@ class Builder extends Component {
         errors: newValidationErrors
       });
     }
-  }
+  };
   /**
    * Renders the component based on the given config
    * @return {JSX}
    */
-  render() {
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Form, {
-      onSubmit: this.props.onSubmit
-    }, /*#__PURE__*/React.createElement("div", {
-      className: this.props.className
-    }, this.formElements.map(element => /*#__PURE__*/React.createElement(Fragment, {
-      key: `${this.props.name}.${element.id}`
-    }, /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitize(this.props.name)}.${sanitize(element.id)}.${BEFORE}`
-    }), /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitize(this.props.name)}.${sanitize(element.id)}`
-    }, this.renderElement(element)), /*#__PURE__*/React.createElement(Portal, {
-      name: `${sanitize(this.props.name)}.${sanitize(element.id)}.${AFTER}`
-    }))))));
-  }
-}
+  _proto.render = function render() {
+    return /*#__PURE__*/_jsx(Form, {
+      onSubmit: this.props.onSubmit,
+      children: /*#__PURE__*/_jsx("div", {
+        className: this.props.className,
+        children: this.formElements.map(element => /*#__PURE__*/_jsxs(Fragment, {
+          children: [/*#__PURE__*/_jsx(Portal, {
+            name: `${sanitize(this.props.name)}.${sanitize(element.id)}.${BEFORE}`
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: `${sanitize(this.props.name)}.${sanitize(element.id)}`,
+            children: this.renderElement(element)
+          }), /*#__PURE__*/_jsx(Portal, {
+            name: `${sanitize(this.props.name)}.${sanitize(element.id)}.${AFTER}`
+          })]
+        }, `${this.props.name}.${element.id}`))
+      })
+    });
+  };
+  return Builder;
+}(Component);
 Builder.defaultProps = {
   className: '',
   defaults: {},