@configuratorware/configurator-frontendgui 1.28.0-beta.1 → 1.28.1

package/App/Modules/Creator/Components/Option/index.js

@@ -1,545 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; 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); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _lodash = require("lodash");
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _Grid = _interopRequireDefault(require("@material-ui/core/Grid/Grid"));
-
-var _core = require("@material-ui/core");
-
-var _BlockRounded = _interopRequireDefault(require("@material-ui/icons/BlockRounded"));
-
-var _InfoRounded = _interopRequireDefault(require("@material-ui/icons/InfoRounded"));
-
-var _RestoreRounded = _interopRequireDefault(require("@material-ui/icons/RestoreRounded"));
-
-var _WarningRounded = _interopRequireDefault(require("@material-ui/icons/WarningRounded"));
-
-var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
-
-var _Markdown = _interopRequireDefault(require("../../../../../Framework/Components/Markdown"));
-
-var _i18n = require("../../../../../Framework/i18n");
-
-var _customClassName = _interopRequireDefault(require("../../../../Utils/customClassName"));
-
-var _OptionAmount = _interopRequireDefault(require("../OptionAmount"));
-
-var _OptionGroup = _interopRequireDefault(require("../OptionGroup"));
-
-var _getImageUrl = _interopRequireDefault(require("../../../../Utils/getImageUrl"));
-
-var _excluded = ["children", "render"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-var styles = function styles(theme) {
-  var textWidthWithAmount = theme.creator.option.image.width !== 'auto' ? "calc(94% - (".concat(theme.creator.option.image.width, " + 35px))") : theme.creator.option.textArea.textWidth;
-  var customValues = {
-    icon: {
-      fontSize: '16px',
-      lineHeight: 1.6
-    },
-    image: {
-      fontSize: '11px',
-      lineHeight: '11px'
-    },
-    textArea: {
-      fontSize: '0.8em',
-      title: {
-        fontWeight: 'bold'
-      }
-    }
-  };
-  return {
-    description: {},
-    materialIcon: {},
-    price: {},
-    details: {
-      display: 'inline-block'
-    },
-    iconWithText: {
-      lineHeight: customValues.icon.lineHeight,
-      display: 'flex',
-      verticalAlign: 'middle',
-      '& $materialIcon': {
-        "float": 'left',
-        display: 'inline-block',
-        paddingRight: '8px',
-        minWidth: '20px',
-        textAlign: 'center'
-      }
-    },
-    optionList: {
-      overflow: 'hidden'
-    },
-    title: {
-      fontWeight: 'bold',
-      display: '-webkit-box',
-      overflow: 'hidden',
-      wordWrap: 'break-word',
-      boxOrient: 'vertical',
-      lineClamp: 3,
-      textOverflow: 'ellipsis'
-    },
-    image: {
-      display: 'inline-block',
-      "float": 'left',
-      height: '100%',
-      maxHeight: '100%',
-      maxWidth: theme.creator.option.image.width,
-      marginRight: '10px',
-      fontSize: 0,
-      '& img': {
-        maxHeight: '100%',
-        maxWidth: '100%'
-      },
-      '& .imageNotAvailableElement': {
-        padding: '4px',
-        lineHeight: customValues.image.lineHeight,
-        fontSize: customValues.image.fontSize
-      }
-    },
-    root: {
-      minHeight: '100px',
-      padding: 10,
-      cursor: 'pointer',
-      fontSize: customValues.textArea.fontSize,
-      display: 'table',
-      width: '94%',
-      '& .content': {
-        position: 'relative',
-        display: 'table-cell',
-        verticalAlign: 'middle',
-        margin: 0
-      },
-      '& .disabled': {
-        cursor: 'not-allowed',
-        opacity: '0.8'
-      },
-      '&.selected': {
-        backgroundColor: '#d8d8d8'
-      },
-      tapHighlightColor: theme.tapHighlightColor
-    },
-    text: {
-      "float": 'left',
-      width: 'calc(94% - ' + theme.creator.option.image.width + ')',
-      '& a': {
-        textDecoration: 'underline'
-      },
-      '& $description': {
-        marginBottom: 10,
-        '& p': {
-          margin: 0
-        }
-      },
-      '& $price': {
-        marginBottom: 10
-      },
-      '& $title': {
-        fontWeight: customValues.textArea.title.fontWeight,
-        marginBottom: '10px'
-      }
-    },
-    withAmount: {
-      '& $text': {
-        width: textWidthWithAmount
-      }
-    }
-  };
-};
-
-var Option = function Option(_ref) {
-  var children = _ref.children,
-      render = _ref.render,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  var className = props.className,
-      onClick = props.onClick,
-      onSelect = props.onSelect,
-      onToggle = props.onToggle,
-      option = props.option,
-      optionclassification = props.optionclassification,
-      selected = props.selected,
-      viewDetails = props.viewDetails,
-      viewStockInformation = props.viewStockInformation,
-      OptionAmountComponent = props.OptionAmountComponent,
-      OptionGroupComponent = props.OptionGroupComponent,
-      classes = props.classes,
-      isAdminMode = props.isAdminMode;
-
-  var _useState = (0, _react.useState)(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      imageAvailable = _useState2[0],
-      setImageAvailable = _useState2[1];
-
-  var query = new URLSearchParams(location.search);
-  var hidePrices = query.has('_hide_prices') && query.get('_hide_prices') === '1';
-  var smallerScreen = (0, _core.useMediaQuery)('(min-device-width : 300px) and (max-device-width : 340px)');
-  var thumbnail = (0, _lodash.get)(option, 'thumbnail', '');
-  var detailImage = (0, _lodash.get)(option, 'detailImage');
-  var optionIdentifier = (0, _lodash.get)(option, 'identifier', '');
-  var amountIsSelectable = (0, _lodash.get)(option, 'amount_is_selectable', false);
-  var resultStatus = (0, _lodash.get)(option, 'check_results.status', true);
-  var optionIsMultiSelect = (0, _lodash.get)(option, 'is_multiselect', false);
-  var optionAmount = (0, _lodash.get)(option, 'amount', 0);
-
-  var translations = _objectSpread(_objectSpread({}, (0, _i18n.t)('common')), (0, _i18n.t)('optionlistitem'));
-
-  var setImageAvailability = function setImageAvailability() {
-    setImageAvailable(!imageAvailable);
-  };
-
-  var isEnabled = function isEnabled() {
-    return (0, _lodash.get)(option, 'stock.traffic_light', false) !== 'red';
-  };
-
-  var shouldDisplayDetails = function shouldDisplayDetails() {
-    var displayDetails = false;
-
-    if (option["abstract"] || option.description || detailImage) {
-      displayDetails = true;
-    }
-
-    return displayDetails;
-  };
-
-  var onOptionSelected = function onOptionSelected() {
-    var optionClassificationIsMultiselect = (0, _lodash.get)(optionclassification, 'is_multiselect', false);
-
-    if (amountIsSelectable) {
-      onSelect(_objectSpread(_objectSpread({}, option), {}, {
-        amount: !optionAmount ? 1 : optionAmount
-      }));
-    } else if (optionClassificationIsMultiselect || isAdminMode) {
-      onSelect(_objectSpread(_objectSpread({}, option), {}, {
-        amount: selected ? 0 : 1
-      }));
-    } else if (!selected) {
-      onSelect(_objectSpread(_objectSpread({}, option), {}, {
-        amount: 1
-      }));
-    }
-  };
-
-  var onOptionClicked = function onOptionClicked(event) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (isEnabled()) {
-      onOptionSelected();
-      onClick();
-    }
-  };
-
-  var onAmountChanged = function onAmountChanged(optionAmount) {
-    if (!isEnabled()) {
-      return;
-    }
-
-    var amount;
-
-    if (amountIsSelectable) {
-      amount = optionAmount;
-    } else if (optionIsMultiSelect) {
-      amount = selected ? 0 : 1;
-    } else if (!selected) {
-      amount = 1;
-    }
-
-    if (amount < 0) {
-      return; // prevent setting below 0
-    }
-
-    onSelect(_objectSpread(_objectSpread({}, option), {}, {
-      amount: amount
-    }));
-  };
-
-  var onDetailsClicked = function onDetailsClicked(event) {
-    event.stopPropagation();
-    event.preventDefault();
-
-    if (isEnabled()) {
-      viewDetails(option);
-    }
-  };
-
-  var onIncompatibilityClicked = function onIncompatibilityClicked(event) {
-    event.stopPropagation();
-    event.preventDefault();
-
-    if (isEnabled()) {
-      onOptionSelected();
-    }
-  };
-
-  var onOptionGroupClicked = function onOptionGroupClicked(event) {
-    event.stopPropagation();
-  };
-
-  var onOptionGroupItemSelected = function onOptionGroupItemSelected(option) {
-    onSelect(_objectSpread(_objectSpread({}, option), {}, {
-      amount: 1
-    }));
-  };
-
-  var onLateDeliveryClicked = function onLateDeliveryClicked(event) {
-    event.stopPropagation();
-    event.preventDefault();
-
-    if (isEnabled()) {
-      viewStockInformation(option);
-    }
-  };
-
-  var renderImage = function renderImage() {
-    var src = (0, _getImageUrl["default"])(thumbnail);
-    return src && /*#__PURE__*/_react["default"].createElement("img", {
-      src: src,
-      onError: setImageAvailability
-    });
-  };
-
-  var renderNotAvailableImage = function renderNotAvailableImage() {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: 'imageNotAvailableElement'
-    }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
-      variant: 'caption'
-    }, translations.imageNotAvailable));
-  };
-
-  var renderStockStatus = function renderStockStatus() {
-    if (option.stock) {
-      switch (option.stock.traffic_light) {
-        case 'red':
-          return /*#__PURE__*/_react["default"].createElement("div", {
-            className: classes.iconWithText
-          }, /*#__PURE__*/_react["default"].createElement(_BlockRounded["default"], {
-            className: classes.materialIcon
-          }), ' ', /*#__PURE__*/_react["default"].createElement(_core.Typography, {
-            variant: 'body2'
-          }, translations.notAvailable));
-
-        case 'yellow':
-          return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
-            className: classes.iconWithText,
-            onClick: onLateDeliveryClicked
-          }, /*#__PURE__*/_react["default"].createElement(_RestoreRounded["default"], {
-            className: classes.materialIcon
-          }), ' ', /*#__PURE__*/_react["default"].createElement(_core.Typography, {
-            variant: 'body2'
-          }, translations.lateDelivery)));
-
-        case 'green':
-          return null;
-      }
-    }
-
-    return null;
-  };
-
-  var renderOptionGroup = function renderOptionGroup() {
-    if (!isEnabled()) {
-      return null;
-    }
-
-    var optionGroup = (0, _lodash.get)(option, 'option_group', {});
-
-    if ((0, _lodash.has)(optionGroup, 'children') && (0, _lodash.isArray)(optionGroup.children) && optionGroup.children.length > 0) {
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        onClick: onOptionGroupClicked
-      }, /*#__PURE__*/_react["default"].createElement(OptionGroupComponent, {
-        itemGroup: optionGroup,
-        option: option,
-        optionclassification: optionclassification,
-        onOptionSelect: onOptionGroupItemSelected,
-        selected: selected,
-        onToggle: onToggle
-      }));
-    }
-
-    return null;
-  };
-
-  var renderActions = function renderActions() {
-    var displayDetails = shouldDisplayDetails();
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.details
-    }, displayDetails && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
-      className: classes.iconWithText,
-      onClick: onDetailsClicked
-    }, /*#__PURE__*/_react["default"].createElement(_InfoRounded["default"], {
-      className: classes.materialIcon
-    }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
-      variant: 'body2',
-      className: classes.iconWithText
-    }, translations.details))), resultStatus !== true && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("a", {
-      className: classes.iconWithText,
-      onClick: onIncompatibilityClicked
-    }, /*#__PURE__*/_react["default"].createElement(_WarningRounded["default"], {
-      className: classes.materialIcon
-    }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
-      variant: 'body2'
-    }, translations.incompatibility))), renderStockStatus(), renderOptionGroup());
-  };
-
-  var renderText = function renderText() {
-    return /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
-      item: true,
-      xs: 12
-    }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
-      component: 'div',
-      className: classes.optionList,
-      variant: 'body2'
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.title
-    }, option.title), !hidePrices && /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.price
-    }, option.priceFormatted), smallerScreen && renderControls('horizontal'), option["abstract"] && /*#__PURE__*/_react["default"].createElement(_Markdown["default"], {
-      className: classes.description
-    }, option["abstract"]), renderActions()));
-  };
-
-  var renderControls = function renderControls(view) {
-    if (isEnabled() && amountIsSelectable) {
-      return /*#__PURE__*/_react["default"].createElement(OptionAmountComponent, {
-        view: view,
-        option: option,
-        onAmountChange: onAmountChanged,
-        onSelect: onSelect
-      });
-    } else {
-      return null;
-    }
-  };
-
-  var getRootClassName = function getRootClassName() {
-    return (0, _clsx["default"])(classes.root, selected && 'selected', (0, _customClassName["default"])('option'));
-  };
-
-  var getContentClassName = function getContentClassName() {
-    var amountClass = amountIsSelectable && !smallerScreen ? classes.withAmount : '';
-    return (0, _clsx["default"])('content', className, optionIdentifier, amountClass, !isEnabled() && 'disabled', resultStatus !== true && 'incompatible');
-  };
-
-  var getRenderProps = function getRenderProps() {
-    return _objectSpread(_objectSpread({}, props), {}, {
-      imageAvailable: imageAvailable,
-      smallerScreen: smallerScreen,
-      renderImage: renderImage,
-      renderNotAvailableImage: renderNotAvailableImage,
-      renderText: renderText,
-      renderControls: renderControls,
-      renderActions: renderActions,
-      renderOptionGroup: renderOptionGroup,
-      renderStockStatus: renderStockStatus,
-      setImageAvailability: setImageAvailability,
-      isEnabled: isEnabled,
-      shouldDisplayDetails: shouldDisplayDetails,
-      onOptionSelected: onOptionSelected,
-      onOptionClicked: onOptionClicked,
-      onAmountChanged: onAmountChanged,
-      onDetailsClicked: onDetailsClicked,
-      onIncompatibilityClicked: onIncompatibilityClicked,
-      onOptionGroupClicked: onOptionGroupClicked,
-      onOptionGroupItemSelected: onOptionGroupItemSelected,
-      onLateDeliveryClicked: onLateDeliveryClicked,
-      getRootClassName: getRootClassName,
-      getContentClassName: getContentClassName
-    });
-  };
-
-  var renderItem = function renderItem() {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: getRootClassName(),
-      "data-option": option.identifier,
-      onClick: onOptionClicked
-    }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: getContentClassName()
-    }, typeof children === 'function' ? children(getRenderProps()) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.image
-    }, imageAvailable ? renderImage() : renderNotAvailableImage()), /*#__PURE__*/_react["default"].createElement("div", {
-      className: classes.text
-    }, renderText()), !smallerScreen && renderControls())));
-  };
-
-  return typeof render === 'function' ? render(getRenderProps()) : renderItem();
-};
-
-Option.defaultProps = {
-  className: '',
-  onClick: function onClick() {},
-  onSelect: function onSelect() {},
-  onToggle: function onToggle() {},
-  optionclassification: {},
-  option: {},
-  selected: false,
-  translations: {},
-  viewDetails: function viewDetails() {},
-  viewStockInformation: function viewStockInformation() {},
-  OptionAmountComponent: _OptionAmount["default"],
-  OptionGroupComponent: _OptionGroup["default"]
-};
-Option.propTypes = {
-  className: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  onSelect: _propTypes["default"].func,
-  onToggle: _propTypes["default"].func,
-  option: _propTypes["default"].object,
-  optionclassification: _propTypes["default"].object,
-  selected: _propTypes["default"].bool,
-  translations: _propTypes["default"].object,
-  viewDetails: _propTypes["default"].func,
-  viewStockInformation: _propTypes["default"].func,
-  OptionAmountComponent: _propTypes["default"].elementType,
-  OptionGroupComponent: _propTypes["default"].elementType,
-  isAdminMode: _propTypes["default"].bool,
-  children: _propTypes["default"].func,
-  render: _propTypes["default"].func
-};
-
-var _default = (0, _withStyles["default"])(styles, {
-  name: 'Option'
-})(Option);
-
-exports["default"] = _default;