@configuratorware/configurator-frontendgui 1.28.1 → 1.29.0

package/App/Shared/Components/ProductVariant/index.story.js

@@ -0,0 +1,283 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _storybookState = require("@sambego/storybook-state");
+
+var _i18n = require("../../../../Framework/i18n");
+
+var _blau = _interopRequireDefault(require("./res/blau.jpg"));
+
+var _grau = _interopRequireDefault(require("./res/grau.jpg"));
+
+var _rot = _interopRequireDefault(require("./res/rot.jpg"));
+
+var _schwarz = _interopRequireDefault(require("./res/schwarz.jpg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+var mockedAmountInputData = [{
+  url: _blau["default"],
+  title: (0, _i18n.t)('mockedData.blue'),
+  isSizeButtonClosed: false,
+  sizes: [{
+    size: 'S',
+    amount: 100,
+    label: 'S',
+    key: 'S'
+  }, {
+    size: 'M',
+    amount: '',
+    label: 'M',
+    key: 'M'
+  }, {
+    size: 'L',
+    amount: '',
+    label: 'L',
+    key: 'L'
+  }, {
+    size: 'XL',
+    amount: '',
+    label: 'XL',
+    key: 'XL'
+  }, {
+    size: 'XXL',
+    amount: '',
+    label: 'XXL',
+    key: 'XXL'
+  }]
+}, {
+  url: _grau["default"],
+  title: (0, _i18n.t)('mockedData.gray'),
+  isSizeButtonClosed: false,
+  sizes: [{
+    size: 'S',
+    amount: 100,
+    label: 'S',
+    key: 'S'
+  }, {
+    size: 'M',
+    amount: '',
+    label: 'M',
+    key: 'M'
+  }, {
+    size: 'L',
+    amount: '',
+    label: 'L',
+    key: 'L'
+  }, {
+    size: 'XL',
+    amount: '',
+    label: 'XL',
+    key: 'XL'
+  }, {
+    size: 'XXL',
+    amount: '',
+    label: 'XXL',
+    key: 'XXL'
+  }]
+}, {
+  url: _rot["default"],
+  title: (0, _i18n.t)('mockedData.red'),
+  isSizeButtonClosed: false,
+  sizes: [{
+    size: 'S',
+    amount: 100,
+    label: 'S',
+    key: 'S'
+  }, {
+    size: 'M',
+    amount: '',
+    label: 'M',
+    key: 'M'
+  }, {
+    size: 'L',
+    amount: '',
+    label: 'L',
+    key: 'L'
+  }, {
+    size: 'XL',
+    amount: '',
+    label: 'XL',
+    key: 'XL'
+  }, {
+    size: 'XXL',
+    amount: '',
+    label: 'XXL',
+    key: 'XXL'
+  }]
+}, {
+  url: _schwarz["default"],
+  title: (0, _i18n.t)('mockedData.black'),
+  isSizeButtonClosed: false,
+  sizes: [{
+    size: 'S',
+    amount: 100,
+    label: 'S',
+    key: 'S'
+  }, {
+    size: 'M',
+    amount: '',
+    label: 'M',
+    key: 'M'
+  }, {
+    size: 'L',
+    amount: '',
+    label: 'L',
+    key: 'L'
+  }, {
+    size: 'XL',
+    amount: '',
+    label: 'XL',
+    key: 'XL'
+  }, {
+    size: 'XXL',
+    amount: '',
+    label: 'XXL',
+    key: 'XXL'
+  }]
+}, {
+  url: _blau["default"],
+  title: (0, _i18n.t)('mockedData.blue') + '1',
+  isSizeButtonClosed: false,
+  sizes: [{
+    size: 'S',
+    amount: 100,
+    label: 'S',
+    key: 'S'
+  }, {
+    size: 'M',
+    amount: '',
+    label: 'M',
+    key: 'M'
+  }, {
+    size: 'L',
+    amount: '',
+    label: 'L',
+    key: 'L'
+  }, {
+    size: 'XL',
+    amount: '',
+    label: 'XL',
+    key: 'XL'
+  }, {
+    size: 'XXL',
+    amount: '',
+    label: 'XXL',
+    key: 'XXL'
+  }]
+}];
+var OneProductVariantData = [{
+  url: _schwarz["default"],
+  title: (0, _i18n.t)('mockedData.black'),
+  isSizeButtonClosed: true,
+  sizes: [{
+    size: 'One',
+    amount: 100,
+    label: (0, _i18n.t)('amountPrice.amount'),
+    key: 'black'
+  }]
+}, {
+  url: _rot["default"],
+  title: (0, _i18n.t)('mockedData.red'),
+  isSizeButtonClosed: true,
+  sizes: [{
+    size: 'One',
+    amount: 100,
+    label: (0, _i18n.t)('amountPrice.amount'),
+    key: 'red'
+  }]
+}, {
+  url: _blau["default"],
+  title: (0, _i18n.t)('mockedData.blue'),
+  isSizeButtonClosed: true,
+  sizes: [{
+    size: 'One',
+    amount: 100,
+    label: (0, _i18n.t)('amountPrice.amount'),
+    key: 'blue'
+  }]
+}];
+var store = new _storybookState.Store({
+  amountData: mockedAmountInputData
+});
+var storeOneVariant = new _storybookState.Store({
+  amountData: OneProductVariantData
+});
+
+var handleChange = function handleChange(store, state) {
+  return function (variant, size, value) {
+    var nextData = state.amountData.map(function (currentVariant) {
+      if (variant.title === currentVariant.title) {
+        return _objectSpread(_objectSpread({}, currentVariant), {}, {
+          sizes: currentVariant.sizes.map(function (currentSize) {
+            return size.key === currentSize.key ? _objectSpread(_objectSpread({}, currentSize), {}, {
+              amount: value
+            }) : currentSize;
+          })
+        });
+      }
+
+      return currentVariant;
+    });
+    store.set({
+      amountData: nextData
+    });
+  };
+};
+
+var handleOpenSizeClick = function handleOpenSizeClick(amountData) {
+  return function (title, isSizeButtonClosed) {
+    var nextData = amountData.map(function (currentElement) {
+      if (currentElement.title === title) {
+        return _objectSpread(_objectSpread({}, currentElement), {}, {
+          isSizeButtonClosed: isSizeButtonClosed
+        });
+      } else {
+        return _objectSpread(_objectSpread({}, currentElement), {}, {
+          isSizeButtonClosed: false
+        });
+      } //currentElement;
+
+    });
+    store.set({
+      amountData: nextData
+    });
+  };
+};
+
+(0, _react2.storiesOf)('ProductVariant', module).add('with label', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: store
+  }, function (state) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      header: "Produktvarianten",
+      handleChange: handleChange(store, state),
+      amountData: state.amountData,
+      buttonLabel: (0, _i18n.t)('mockedData.selectSize'),
+      amountLabel: (0, _i18n.t)('amountPrice.amount'),
+      handleOpenSizeClick: handleOpenSizeClick(state.amountData)
+    });
+  });
+}).add('with one variant', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storybookState.State, {
+    store: storeOneVariant
+  }, function (state) {
+    return /*#__PURE__*/_react["default"].createElement(_index["default"], {
+      header: "Produktvarianten",
+      handleChange: handleChange(storeOneVariant, state),
+      amountData: state.amountData,
+      amountLabel: (0, _i18n.t)('amountPrice.amount')
+    });
+  });
+});

package/App/Shared/Components/Progress/Progress.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Fade = _interopRequireDefault(require("@material-ui/core/Fade/Fade"));
+
+var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress/CircularProgress"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var styles = function styles() {
+  return {
+    container: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      display: 'flex',
+      alignItems: 'center',
+      zIndex: 2,
+      backgroundColor: 'rgba(255,255,255,0.3)'
+    },
+    inner: {
+      flex: 1,
+      alignItems: 'center',
+      flexDirection: 'column',
+      display: 'flex'
+    }
+  };
+};
+
+var _default = (0, _withStyles["default"])(styles, {
+  name: 'Progress'
+})(function (_ref) {
+  var loading = _ref.loading,
+      classes = _ref.classes;
+  return /*#__PURE__*/_react["default"].createElement(_Fade["default"], {
+    "in": loading,
+    timeout: 700,
+    style: {
+      transitionDelay: loading ? '300ms' : '0ms'
+    },
+    unmountOnExit: true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.container
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.inner
+  }, /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], null))));
+});
+
+exports["default"] = _default;