@configuratorware/configurator-admingui 1.28.1 → 1.29.0

package/Components/FormFragments/Tabs.js

@@ -0,0 +1,307 @@
+"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 _lodash = _interopRequireDefault(require("lodash"));
+
+var _Form = require("../Form");
+
+var _Tabs = require("../../UIComponents/Tabs");
+
+var _i18n = require("../../App/i18n");
+
+var _Data = _interopRequireDefault(require("../../App/Data"));
+
+var _InputWithSource = require("./InputWithSource");
+
+var _NestedDataComponent = _interopRequireDefault(require("./NestedDataComponent"));
+
+require("./Styles.scss");
+
+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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function 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 _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 _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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+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 _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+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 InputTabs = /*#__PURE__*/function (_Component) {
+  _inherits(InputTabs, _Component);
+
+  var _super = _createSuper(InputTabs);
+
+  function InputTabs(_props) {
+    var _this;
+
+    _classCallCheck(this, InputTabs);
+
+    _this = _super.call(this, _props);
+
+    _defineProperty(_assertThisInitialized(_this), "initTabData", function (props) {
+      var _ref = props || _this.props,
+          source = _ref.source,
+          sourceConfig = _ref.sourceConfig;
+
+      var tabData = {};
+      source.forEach(function (item) {
+        var idx = (0, _InputWithSource.getInputItemParamsByConfig)(item, sourceConfig).value;
+        tabData[idx] = _this.filterValuesAndErrors(item, props);
+      });
+
+      _this.setState({
+        tabData: tabData
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "assignTabValue", function () {
+      _this.props.tabs.assignTabValue && _this.props.tabs.assignTabValue(_this.state.tabValue, _this.props.schema);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChange", function (name, value) {
+      var tabs = _this.props.tabs;
+      var _this$state = _this.state,
+          tabData = _this$state.tabData,
+          tabValue = _this$state.tabValue;
+      tabData[tabValue].filteredValues = value;
+
+      _this.setState({
+        tabData: tabData
+      });
+
+      switch (tabs.type) {
+        case 'array':
+          _this.props.onChange(name, _lodash["default"].flatten(_lodash["default"].map(tabData, 'filteredValues')));
+
+          break;
+
+        default:
+          _this.props.onChange(name, value);
+
+          break;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderWrappedInput", function (input, key, filteredValue, filteredErrors, tabValue) {
+      var _this$props = _this.props,
+          value = _this$props.value,
+          error = _this$props.error,
+          schema = _this$props.schema,
+          tabs = _this$props.tabs,
+          disableAdd = _this$props.disableAdd,
+          parentSchema = _this$props.parentSchema;
+
+      var props = _objectSpread(_objectSpread({}, input), {}, {
+        schema: schema,
+        parentSchema: parentSchema,
+        disableAdd: disableAdd,
+        tabValue: tabValue,
+        errors: filteredErrors,
+        value: filteredValue || value,
+        error: (0, _i18n.T)(error, {
+          escapeDot: true
+        }),
+        label: (0, _i18n.T)(input.label),
+        onChange: tabs.type === 'array' ? function (name, value) {
+          return _this.onChange(name, value);
+        } : _this.onChange
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(_Form.InputWrapper, _extends({}, props, {
+        key: input.name + key
+      }));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderTab", function (tabValue) {
+      var _this$state$tabData$t = _this.state.tabData[tabValue],
+          filteredValues = _this$state$tabData$t.filteredValues,
+          filteredErrors = _this$state$tabData$t.filteredErrors;
+      var tabs = _this.props.tabs;
+
+      switch (tabs.type) {
+        case 'array':
+          {
+            var arrayInput = tabs;
+            return _this.renderWrappedInput(arrayInput, arrayInput.name, filteredValues, filteredErrors, tabValue);
+          }
+
+        default:
+          throw new Error('Unhandled tab type: ' + tabs.type);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "filterValuesAndErrors", function (sourceItem, props) {
+      var _ref2 = props || _this.props,
+          tabs = _ref2.tabs,
+          value = _ref2.value,
+          errors = _ref2.errors;
+
+      var filteredErrors = [];
+      var filteredValues = [];
+      var row = 0;
+
+      _lodash["default"].forEach(value, function (v, idx) {
+        var res = tabs.filterValues(sourceItem, v);
+
+        if (res) {
+          filteredValues.push(v);
+
+          if (errors && errors[idx]) {
+            filteredErrors[row] = errors[idx];
+          }
+
+          row++;
+        }
+      });
+
+      return {
+        filteredValues: filteredValues,
+        filteredErrors: filteredErrors
+      };
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onTabChange", function (tabValue) {
+      if (_this.state.tabValue !== tabValue) {
+        _this.setState({
+          tabValue: tabValue
+        }, function () {
+          _this.assignTabValue();
+        });
+      }
+    });
+
+    _this.state = {
+      tabValue: null,
+      tabData: {}
+    };
+    return _this;
+  }
+
+  _createClass(InputTabs, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var _this$props2 = this.props,
+          source = _this$props2.source,
+          sourceConfig = _this$props2.sourceConfig,
+          schema = _this$props2.schema;
+      schema.addListener(_Data["default"].EventTypes.init, this.assignTabValue);
+      schema.addListener(_Data["default"].EventTypes.reset, this.assignTabValue);
+      this.setState({
+        tabValue: (0, _InputWithSource.getInputItemParamsByConfig)(source[0], sourceConfig).value
+      }, this.assignTabValue);
+      this.initTabData();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      if (!_lodash["default"].isEqual(props, this.props)) {
+        this.initTabData(props);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props3 = this.props,
+          source = _this$props3.source,
+          sourceConfig = _this$props3.sourceConfig,
+          label = _this$props3.label,
+          tabs = _this$props3.tabs;
+      var component;
+
+      switch (tabs.layout) {
+        case 'groups':
+          component = /*#__PURE__*/_react["default"].createElement("div", {
+            className: 'group ' + tabs.className
+          }, source.map(function (item, idx) {
+            var _getInputItemParamsBy = (0, _InputWithSource.getInputItemParamsByConfig)(item, sourceConfig),
+                value = _getInputItemParamsBy.value,
+                text = _getInputItemParamsBy.text;
+
+            var filteredErrors = _this2.state.tabData[value].filteredErrors;
+            var style = filteredErrors.length ? {
+              background: 'red'
+            } : {};
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              className: "group-container",
+              key: idx,
+              onFocus: function onFocus() {
+                return _this2.onTabChange(value);
+              }
+            }, /*#__PURE__*/_react["default"].createElement("div", {
+              className: "group-label",
+              style: style
+            }, text), /*#__PURE__*/_react["default"].createElement("div", {
+              className: "group-item"
+            }, _this2.renderTab(value)));
+          }));
+          break;
+
+        default:
+          component = /*#__PURE__*/_react["default"].createElement(_Tabs.Tabs, null, source.map(function (item, idx) {
+            var _getInputItemParamsBy2 = (0, _InputWithSource.getInputItemParamsByConfig)(item, sourceConfig),
+                value = _getInputItemParamsBy2.value,
+                text = _getInputItemParamsBy2.text;
+
+            var filteredErrors = _this2.state.tabData[value].filteredErrors;
+            var style = filteredErrors.length ? {
+              background: 'red'
+            } : {};
+            return /*#__PURE__*/_react["default"].createElement(_Tabs.Tab, {
+              label: text,
+              value: value,
+              key: idx,
+              onActive: function onActive(tab) {
+                return _this2.onTabChange(tab.props.value);
+              },
+              style: style
+            }, /*#__PURE__*/_react["default"].createElement("div", null, _this2.renderTab(value)));
+          }));
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "label"
+      }, label), component);
+    }
+  }]);
+
+  return InputTabs;
+}(_react.Component);
+
+var _default = (0, _NestedDataComponent["default"])(InputTabs);
+
+exports["default"] = _default;

package/Components/FormFragments/Text.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TextField = _interopRequireDefault(require("../../UIComponents/TextField"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 text = function text(props) {
+  return /*#__PURE__*/_react["default"].createElement(_TextField["default"], _defineProperty({
+    label: props.label,
+    onChange: function onChange(evt) {
+      props.onChange(props.name, evt.target.value === '' && props.emptyValue !== undefined ? props.emptyValue : evt.target.value);
+    },
+    value: props.value || '',
+    style: _styles["default"].input,
+    error: Boolean(props.error),
+    helperText: props.error || props.helperText,
+    type: props.type,
+    multiline: props.multiLine || false,
+    InputProps: {
+      readOnly: props.readOnly
+    },
+    inputProps: props.inputProps,
+    rows: props.rows || 1
+  }, "helperText", props.helperText));
+};
+
+text.defaultProps = {
+  onChange: function onChange() {},
+  type: 'text'
+};
+var _default = text;
+exports["default"] = _default;

package/Components/FormFragments/TimePicker.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _TimePicker = _interopRequireDefault(require("../../UIComponents/TimePicker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var timePicker = function timePicker(props) {
+  return /*#__PURE__*/_react["default"].createElement(_TimePicker["default"], {
+    format: props.ampm ? 'ampm' : '24hr',
+    label: props.label,
+    value: props.value,
+    onChange: function onChange(evt) {
+      return props.onChange(props.name, evt.target.value);
+    },
+    error: props.error
+  });
+};
+
+var _default = timePicker;
+exports["default"] = _default;

package/Components/FormFragments/Toggle.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Toggle = _interopRequireDefault(require("../../UIComponents/Toggle"));
+
+var _ErrorWrapper = _interopRequireDefault(require("./ErrorWrapper"));
+
+var _FormControlLabel = _interopRequireDefault(require("../../UIComponents/FormControlLabel"));
+
+var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var errorStyle = {
+  thumbOff: {
+    backgroundColor: '#ffcccc'
+  },
+  trackOff: {
+    backgroundColor: '#ff9d9d'
+  },
+  thumbSwitched: {
+    backgroundColor: 'red'
+  },
+  trackSwitched: {
+    backgroundColor: '#ff9d9d'
+  },
+  labelStyle: {
+    color: 'red'
+  }
+};
+var styles = {
+  label: {
+    marginLeft: 0,
+    justifyContent: 'space-between',
+    '&$fullWidth': {
+      width: '100%'
+    }
+  },
+  body: {
+    fontSize: 16
+  },
+  fullWidth: {}
+};
+
+var toggle = function toggle(props) {
+  var extraProps = props.error && {
+    thumbStyle: errorStyle.thumbOff,
+    trackStyle: errorStyle.trackOff,
+    thumbSwitchedStyle: errorStyle.thumbSwitched,
+    trackSwitchedStyle: errorStyle.trackSwitched,
+    labelStyle: errorStyle.labelStyle
+  };
+  var classes = props.classes,
+      fullWidth = props.fullWidth;
+  var checked = props.invert ? !props.value : !!props.value;
+  var nextChecked = props.invert ? checked : !checked;
+  return /*#__PURE__*/_react["default"].createElement(_ErrorWrapper["default"], {
+    error: props.error
+  }, /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], _extends({
+    label: props.label,
+    "default": !!props.defaultValue,
+    labelPlacement: props.labelPlacement
+  }, extraProps, {
+    classes: {
+      labelPlacementStart: "".concat(classes.label, " ").concat(fullWidth ? classes.fullWidth : ''),
+      label: classes.body
+    },
+    control: /*#__PURE__*/_react["default"].createElement(_Toggle["default"], {
+      checked: checked,
+      onChange: function onChange() {
+        return props.onChange(props.name, nextChecked);
+      },
+      value: checked,
+      color: "primary"
+    })
+  })));
+};
+
+toggle.defaultProps = {
+  fullWidth: true,
+  labelPlacement: 'start'
+};
+
+var _default = (0, _withStyles["default"])(styles)(toggle);
+
+exports["default"] = _default;