chem-generic-ui 0.1.17 → 0.1.18

package/dist/app.js

@@ -40,6 +40,8 @@ var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 
 var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
 
+require("./asserts/main.scss");
+
 var _ElementManager = _interopRequireDefault(require("./components/admin/ElementManager"));
 
 var _GenDSMisType = _interopRequireDefault(require("./components/fields/GenDSMisType"));

package/dist/components/details/GenSgDetails.js

@@ -0,0 +1,571 @@
+"use strict";
+
+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 _reactBootstrap = require("react-bootstrap");
+
+var _reactDnd = require("react-dnd");
+
+var _reactDndHtml5Backend = _interopRequireDefault(require("react-dnd-html5-backend"));
+
+var _LayersLayout = _interopRequireDefault(require("../layers/LayersLayout"));
+
+var _utils = require("../tools/utils");
+
+var _orten = require("../tools/orten");
+
+var _collate = _interopRequireDefault(require("../tools/collate"));
+
+var _LayerModal = _interopRequireDefault(require("../layers/LayerModal"));
+
+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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _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); Object.defineProperty(Constructor, "prototype", { writable: false }); 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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); 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; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } 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); }
+
+var SegmentDetails = /*#__PURE__*/function (_Component) {
+  _inherits(SegmentDetails, _Component);
+
+  var _super = _createSuper(SegmentDetails);
+
+  function SegmentDetails(props) {
+    var _this;
+
+    _classCallCheck(this, SegmentDetails);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      showViewLayer: false,
+      selectedLayerKey: ''
+    };
+    _this.handleInputChange = _this.handleInputChange.bind(_assertThisInitialized(_this));
+    _this.handleSubChange = _this.handleSubChange.bind(_assertThisInitialized(_this));
+    _this.handleUnitClick = _this.handleUnitClick.bind(_assertThisInitialized(_this));
+    _this.handleReload = _this.handleReload.bind(_assertThisInitialized(_this));
+    _this.handleAddLayer = _this.handleAddLayer.bind(_assertThisInitialized(_this));
+    _this.setViewLayer = _this.setViewLayer.bind(_assertThisInitialized(_this));
+    _this.dropLayer = _this.dropLayer.bind(_assertThisInitialized(_this));
+    _this.removeLayer = _this.removeLayer.bind(_assertThisInitialized(_this));
+    _this.handleWFNext = _this.handleWFNext.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(SegmentDetails, [{
+    key: "setViewLayer",
+    value: function setViewLayer() {
+      this.setState({
+        showViewLayer: !this.state.showViewLayer
+      });
+    }
+  }, {
+    key: "handleSubChange",
+    value: function handleSubChange(layer, obj) {
+      var valueOnly = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+      var segment = this.props.segment;
+      var properties = segment.properties;
+
+      if (!valueOnly) {
+        var subFields = properties.layers["".concat(layer)].fields.find(function (m) {
+          return m.field === obj.f.field;
+        }).sub_fields || [];
+        var idxSub = subFields.findIndex(function (m) {
+          return m.id === obj.sub.id;
+        });
+        subFields.splice(idxSub, 1, obj.sub);
+        properties.layers["".concat(layer)].fields.find(function (e) {
+          return e.field === obj.f.field;
+        }).sub_fields = subFields;
+      }
+
+      properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === obj.f.field;
+      }).sub_values = obj.f.sub_values || [];
+      segment.properties = properties;
+      segment.changed = true;
+      this.props.onChange(segment);
+    }
+  }, {
+    key: "handleInputChange",
+    value: function handleInputChange(event, field, layer) {
+      var type = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 'text';
+      var segment = this.props.segment;
+      var properties = segment.properties;
+      var value = '';
+      var propsChange = true;
+
+      switch (type) {
+        case 'drop-layer':
+          this.dropLayer(field, layer);
+          propsChange = false;
+          break;
+
+        case 'layer-remove':
+          event.stopPropagation();
+          this.removeLayer(field, layer);
+          propsChange = false;
+          break;
+
+        case 'layer-modal':
+          event.stopPropagation();
+          propsChange = false;
+          this.setState({
+            selectedLayerKey: layer.key,
+            showViewLayer: true
+          });
+          break;
+
+        case 'wf-next':
+          propsChange = false;
+          this.handleWFNext(event, layer);
+          break;
+
+        case 'checkbox':
+          value = event.target.checked;
+          break;
+
+        case 'formula-field':
+          if (event.target) {
+            value = event.target.value;
+          } else {
+            value = event;
+          }
+
+          break;
+
+        case 'upload':
+          {
+            var vals = (0, _utils.uploadFiles)(properties, event, field, layer);
+            value = vals[0];
+            if (vals[1].length > 0) segment.files = (segment.files || []).concat(vals[1]);
+
+            if (vals.length > 2) {
+              var fileIdx = (0, _lodash.findIndex)(segment.files || [], function (o) {
+                return o.uid === event.uid;
+              });
+
+              if (fileIdx >= 0 && segment.files && segment.files.length > 0) {
+                segment.files.splice(fileIdx, 1);
+              }
+            }
+
+            break;
+          }
+
+        case 'select':
+          value = event ? event.value : null;
+          break;
+
+        case 'drag_molecule':
+          value = event;
+          break;
+
+        case 'integer':
+          value = event.target.value;
+          value = Math.trunc(value);
+          break;
+
+        default:
+          value = event.target.value;
+      }
+
+      if (propsChange) {
+        properties.layers["".concat(layer)].fields.find(function (e) {
+          return e.field === field;
+        }).value = value;
+
+        if (type === 'system-defined' && (!properties.layers["".concat(layer)].fields.find(function (e) {
+          return e.field === field;
+        }).value_system || properties.layers["".concat(layer)].fields.find(function (e) {
+          return e.field === field;
+        }).value_system === '')) {
+          var opt = properties.layers["".concat(layer)].fields.find(function (e) {
+            return e.field === field;
+          }).option_layers;
+          properties.layers["".concat(layer)].fields.find(function (e) {
+            return e.field === field;
+          }).value_system = (0, _utils.genUnits)(opt)[0].key;
+        }
+
+        segment.properties = properties;
+        segment.changed = true;
+        this.props.onChange(segment);
+      }
+    }
+  }, {
+    key: "handleUnitClick",
+    value: function handleUnitClick(layer, obj) {
+      var segment = this.props.segment;
+      var properties = segment.properties;
+      var newVal = (0, _utils.unitConversion)(obj.option_layers, obj.value_system, obj.value);
+      properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === obj.field;
+      }).value_system = obj.value_system;
+      properties.layers["".concat(layer)].fields.find(function (e) {
+        return e.field === obj.field;
+      }).value = newVal;
+      segment.properties = properties;
+      segment.changed = true;
+      this.props.onChange(segment);
+    }
+  }, {
+    key: "handleReload",
+    value: function handleReload() {
+      var _this$props = this.props,
+          klass = _this$props.klass,
+          segment = _this$props.segment;
+      var newProps = (0, _lodash.cloneDeep)(klass.properties_release);
+      newProps.klass_uuid = klass.uuid;
+      Object.keys(newProps.layers).forEach(function (key) {
+        var newLayer = newProps.layers[key] || {};
+        var curFields = segment.properties.layers[key] && segment.properties.layers[key].fields || [];
+        (newLayer.fields || []).forEach(function (f, idx) {
+          var curIdx = (0, _lodash.findIndex)(curFields, function (o) {
+            return o.field === f.field;
+          });
+
+          if (curIdx >= 0) {
+            var curVal = segment.properties.layers[key].fields[curIdx].value;
+
+            var curType = _typeof(curVal);
+
+            if (['select', 'text', 'textarea', 'formula-field'].includes(newProps.layers[key].fields[idx].type)) {
+              newProps.layers[key].fields[idx].value = curType !== 'undefined' ? curVal.toString() : '';
+            }
+
+            if (newProps.layers[key].fields[idx].type === 'integer') {
+              newProps.layers[key].fields[idx].value = curType === 'undefined' || curType === 'boolean' || isNaN(curVal) ? 0 : parseInt(curVal, 10);
+            }
+
+            if (newProps.layers[key].fields[idx].type === 'checkbox') {
+              newProps.layers[key].fields[idx].value = curType !== 'undefined' ? (0, _utils.toBool)(curVal) : false;
+            }
+
+            if (newProps.layers[key].fields[idx].type === 'system-defined') {
+              var units = (0, _utils.genUnits)(newProps.layers[key].fields[idx].option_layers);
+              var vs = units.find(function (u) {
+                return u.key === segment.properties.layers[key].fields[curIdx].value_system;
+              });
+              newProps.layers[key].fields[idx].value_system = vs && vs.key || units[0].key;
+              newProps.layers[key].fields[idx].value = (0, _utils.toNum)(curVal);
+            }
+
+            if (newProps.layers[key].fields[idx].type === 'input-group') {
+              if (segment.properties.layers[key].fields[curIdx].type !== newProps.layers[key].fields[idx].type) {
+                newProps.layers[key].fields[idx].value = undefined;
+              } else {
+                var nSubs = newProps.layers[key].fields[idx].sub_fields || [];
+                var cSubs = segment.properties.layers[key].fields[curIdx].sub_fields || [];
+                var exSubs = [];
+
+                if (nSubs.length < 1) {
+                  newProps.layers[key].fields[idx].value = undefined;
+                } else {
+                  nSubs.forEach(function (nSub) {
+                    var hitSub = cSubs.find(function (c) {
+                      return c.id === nSub.id;
+                    }) || {};
+
+                    if (nSub.type === 'label') {
+                      exSubs.push(nSub);
+                    }
+
+                    if (nSub.type === 'text') {
+                      if (hitSub.type === 'label') {
+                        exSubs.push(nSub);
+                      } else {
+                        exSubs.push(_objectSpread(_objectSpread({}, nSub), {}, {
+                          value: (hitSub.value || '').toString()
+                        }));
+                      }
+                    }
+
+                    if (['number', 'system-defined'].includes(nSub.type)) {
+                      var nvl = typeof hitSub.value === 'undefined' || hitSub.value == null || hitSub.value.length === 0 ? '' : (0, _utils.toNum)(hitSub.value);
+
+                      if (nSub.option_layers === hitSub.option_layers) {
+                        exSubs.push(_objectSpread(_objectSpread({}, nSub), {}, {
+                          value: nvl,
+                          value_system: hitSub.value_system
+                        }));
+                      } else {
+                        exSubs.push(_objectSpread(_objectSpread({}, nSub), {}, {
+                          value: nvl
+                        }));
+                      }
+                    }
+                  });
+                }
+
+                newProps.layers[key].fields[idx].sub_fields = exSubs;
+              }
+            }
+
+            if (newProps.layers[key].fields[idx].type === 'upload') {
+              if (segment.properties.layers[key].fields[curIdx].type === newProps.layers[key].fields[idx].type) {
+                newProps.layers[key].fields[idx].value = segment.properties.layers[key].fields[curIdx].value;
+              } else {
+                newProps.layers[key].fields[idx].value = {};
+              }
+            }
+
+            if (newProps.layers[key].fields[idx].type === 'table') {
+              if (segment.properties.layers[key].fields[curIdx].type !== newProps.layers[key].fields[idx].type) {
+                newProps.layers[key].fields[idx].sub_values = [];
+              } else {
+                newProps.layers[key].fields[idx].sub_values = (0, _collate.default)(newProps.layers[key].fields[idx], segment.properties.layers[key].fields[curIdx]);
+              }
+            }
+          }
+        });
+      });
+      segment.properties = newProps;
+      segment.changed = true;
+      this.props.onChange(segment);
+    }
+  }, {
+    key: "handleAddLayer",
+    value: function handleAddLayer(event, _layer) {
+      var segment = this.props.segment;
+      var selectedLayerKey = this.state.selectedLayerKey;
+      var layer = _layer;
+      var layers = segment.properties.layers;
+      var sortedLayers = (0, _lodash.sortBy)(layers, ['position', 'wf_position']);
+      var idx = sortedLayers.findIndex(function (e) {
+        return e.key === selectedLayerKey;
+      }); // re-set added layer attributes
+
+      var selectedLayer = sortedLayers[idx];
+      layer.position = selectedLayer.position;
+      layer.wf_position = selectedLayer.wf_position + 1;
+      layer.wf = false;
+      layer.wf_uuid = null; // layer is standard layer (from released)
+
+      var cnt = sortedLayers.filter(function (e) {
+        return e.key === layer.key || e.key.startsWith("".concat(layer.key, "."));
+      }).length;
+
+      if (cnt > 0) {
+        var origKey = layer.key;
+        layer.key = "".concat(layer.key, ".").concat(cnt);
+        layer.fields = (0, _orten.reformCondFields)(layer, origKey);
+      } // insert new layer
+
+
+      sortedLayers.splice(idx + 1, 0, layer); // re-count wf_position
+
+      sortedLayers.filter(function (e) {
+        return e.position === selectedLayer.position;
+      }).map(function (e, ix) {
+        var el = e;
+        el.wf_position = ix;
+        return el;
+      });
+      var ll = (0, _orten.orgLayerObject)(sortedLayers);
+      segment.properties.layers = ll;
+      this.setState({
+        selectedLayerKey: layer.key,
+        showViewLayer: false
+      }, this.props.onChange(segment));
+    }
+  }, {
+    key: "dropLayer",
+    value: function dropLayer(_source, _target) {
+      var segment = this.props.segment;
+      var layers = segment.properties.layers;
+      var sortedLayers = (0, _lodash.sortBy)(layers, ['position', 'wf_position']); // swap or move
+
+      var srcIdx = sortedLayers.findIndex(function (e) {
+        return e.key === _source;
+      });
+      var tmpSrc = sortedLayers[srcIdx];
+      var tarIdx = sortedLayers.findIndex(function (e) {
+        return e.key === _target;
+      });
+
+      if (Math.abs(srcIdx - tarIdx) === 1) {
+        sortedLayers = (0, _utils.swapAryEls)(sortedLayers, srcIdx, tarIdx);
+      } else {
+        // delete src
+        sortedLayers.splice(srcIdx, 1); // keep tar
+
+        tarIdx = sortedLayers.findIndex(function (e) {
+          return e.key === _target;
+        });
+        var tmpTar = sortedLayers[tarIdx]; // prepare new layer
+
+        tmpSrc.position = tmpTar.position;
+        tmpSrc.wf_position = (tmpTar.wf_position || 0) + 1; // insert new layer
+
+        sortedLayers.splice(tarIdx + 1, 0, tmpSrc);
+      } // re-count wf_position
+
+
+      sortedLayers.filter(function (e) {
+        return e.position === tmpSrc.position;
+      }).map(function (e, idx) {
+        var el = e;
+        el.wf_position = idx;
+        return el;
+      });
+      var ll = (0, _orten.orgLayerObject)(sortedLayers);
+      segment.properties.layers = ll;
+      segment.changed = true;
+      this.props.onChange(segment);
+    }
+  }, {
+    key: "removeLayer",
+    value: function removeLayer(elId, layer) {
+      var segment = this.props.segment;
+      var layers = segment.properties.layers;
+      var sortedLayers = (0, _lodash.sortBy)(layers, ['position', 'wf_position']);
+      var selectedIdx = sortedLayers.findIndex(function (e) {
+        return e.key === layer.key;
+      });
+      var selected = sortedLayers[selectedIdx];
+      sortedLayers.splice(selectedIdx, 1);
+      sortedLayers.filter(function (e) {
+        return e.position === selected.position;
+      }).map(function (e, idx) {
+        var el = e;
+        el.wf_position = idx;
+        return el;
+      });
+      segment.properties.layers = (0, _orten.orgLayerObject)(sortedLayers);
+      segment.changed = true;
+      this.props.onChange(segment);
+    }
+  }, {
+    key: "handleWFNext",
+    value: function handleWFNext(event, layer) {
+      var value = event ? event.value : null;
+
+      if (value) {
+        var segment = this.props.segment;
+        var properties = segment.properties,
+            properties_release = segment.properties_release; // next step value if exists
+
+        var rmNeeded = false;
+        var preValue = properties.layers["".concat(layer)].fields.find(function (e) {
+          return e.field === '_wf_next';
+        }).value;
+
+        if (value !== preValue) {
+          if (preValue && preValue !== '' && preValue !== value) {
+            rmNeeded = true;
+          }
+
+          var flow = properties_release.flow;
+          var preLayer = properties.layers["".concat(layer)]; // value is the next node's id
+
+          var nxLayer = (0, _orten.getFlowLayer)(flow, value, layer, preLayer.wf_position);
+
+          if (nxLayer) {
+            properties.layers = (0, _orten.addToObject)(properties.layers, layer, nxLayer);
+          }
+
+          if (rmNeeded) {
+            properties.layers = (0, _orten.removeFromObject)(properties.layers, layer, (0, _orten.getWFNode)(flow, preValue));
+          } // update next step value
+
+
+          properties.layers["".concat(layer)].fields.find(function (e) {
+            return e.field === '_wf_next';
+          }).value = value;
+          segment.properties = properties;
+          segment.changed = true; // this.props.onChange(segment, () => renderFlowModal(segment, false));
+
+          this.props.onChange(segment); // cb move to e.g. SampleDetails.js
+        }
+      }
+    }
+  }, {
+    key: "elementalPropertiesItem",
+    value: function elementalPropertiesItem(segment) {
+      var layersLayout = (0, _LayersLayout.default)(segment.properties.layers, segment.properties_release.select_options || {}, this.handleInputChange, this.handleSubChange, this.handleUnitClick, [], 0, false, true);
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          margin: '5px'
+        }
+      }, layersLayout);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          uiCtrl = _this$props2.uiCtrl,
+          segment = _this$props2.segment;
+      if (!uiCtrl || Object.keys(segment).length === 0) return null;
+      var showViewLayer = this.state.showViewLayer;
+
+      var addLayerModal = /*#__PURE__*/_react.default.createElement(_LayerModal.default, {
+        show: showViewLayer,
+        layers: (0, _lodash.cloneDeep)(segment.properties_release.layers) || {},
+        fnClose: this.setViewLayer,
+        fnAdd: this.handleAddLayer
+      });
+
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Panel, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Panel.Body, {
+        style: {
+          position: 'relative',
+          minHeight: 260,
+          overflowY: 'unset'
+        }
+      }, this.elementalPropertiesItem(segment))), addLayerModal);
+    }
+  }]);
+
+  return SegmentDetails;
+}(_react.Component);
+
+SegmentDetails.propTypes = {
+  uiCtrl: _propTypes.default.bool.isRequired,
+  segment: _propTypes.default.object,
+  klass: _propTypes.default.object,
+  onChange: _propTypes.default.func.isRequired
+};
+SegmentDetails.defaultProps = {
+  segment: {},
+  klass: {}
+};
+
+var _default = (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend.default)(SegmentDetails);
+
+exports.default = _default;

package/dist/components/dnd/PanelDnD.js

@@ -80,7 +80,6 @@ var PanelDnD = function PanelDnD(_ref) {
       id = _ref.id,
       handleChange = _ref.handleChange,
       bs = _ref.bs;
-  console.log('render');
   var className = "generic_grid_dnd".concat(isOver ? ' is-over' : '').concat(canDrop ? ' can-drop' : '').concat(isDragging ? ' is-dragging' : '');
   var style = layer.style,
       label = layer.label,

package/dist/components/fields/GenProperties.js

@@ -26,8 +26,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 GenProperties = function GenProperties(opt) {
-  console.log('GenProperties');
-
   var fieldProps = _objectSpread(_objectSpread({}, opt), {}, {
     dndItems: []
   });
@@ -35,8 +33,6 @@ var GenProperties = function GenProperties(opt) {
   var type = fieldProps.type.split('_');
   if (opt.isSearchCriteria && type[0] === 'drag') type[0] = 'text'; // if (opt.isPreview && (type[0] === 'drag' || type[0] === 'upload')) type[0] = 'text';
 
-  console.log(type[0]);
-
   switch (type[0]) {
     case 'checkbox':
       return (0, _GenPropertiesFields.GenPropertiesCheckbox)(fieldProps);

package/dist/components/fields/GenPropertiesFields.js

@@ -333,6 +333,9 @@ var GenPropertiesSelect = function GenPropertiesSelect(opt) {
     label: opt.label,
     desc: opt.description
   });
+  var val = options.find(function (o) {
+    return o.value === opt.value;
+  }) || null;
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, fieldHeader, /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
     isClearable: true,
     menuContainerStyle: {
@@ -341,7 +344,7 @@ var GenPropertiesSelect = function GenPropertiesSelect(opt) {
     name: opt.field,
     multi: false,
     options: options,
-    value: opt.value,
+    value: val,
     onChange: opt.onChange,
     className: className,
     disabled: opt.readOnly
@@ -593,6 +596,9 @@ var GenWFNext = function GenWFNext(opt) {
     label: opt.label,
     desc: opt.description
   });
+  var val = options.find(function (o) {
+    return o.value === opt.value;
+  }) || null;
   return /*#__PURE__*/_react.default.createElement(_reactBootstrap.FormGroup, null, fieldHeader, /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
     menuContainerStyle: {
       position: 'absolute'
@@ -600,7 +606,7 @@ var GenWFNext = function GenWFNext(opt) {
     name: opt.field,
     multi: false,
     options: options,
-    value: opt.value,
+    value: val,
     onChange: opt.onChange,
     className: className,
     disabled: opt.readOnly

package/dist/components/layers/GenPropertiesLayer.js

@@ -216,11 +216,7 @@ var GenPropertiesLayer = /*#__PURE__*/function (_Component) {
           style = layer.style,
           label = layer.label;
       var bs = color || 'default';
-      var cl = (style || 'panel_generic_heading').replace('panel_generic_heading', 'panel_generic_heading_slim');
-      console.log('render');
-      console.log(layer);
-      console.log(label);
-      console.log(cl); // panel header color is based on input bs value
+      var cl = (style || 'panel_generic_heading').replace('panel_generic_heading', 'panel_generic_heading_slim'); // panel header color is based on input bs value
 
       var panelDnD = /*#__PURE__*/_react.default.createElement(_PanelDnD.default, {
         type: "gen_panel",