kitchen-simulator 2.0.0 → 2.0.1

package/lib/catalog/properties/property-color.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyColor;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+function PropertyColor(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "PropertyColor",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, configs.label)), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.FormColorInput, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  })))));
+}
+PropertyColor.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-enum.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyEnum;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _immutable = require("immutable");
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _constants = require("../../constants");
+var _templateObject, _templateObject2;
+var EnumWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-top: 3px;\n"])));
+var EnumTitle = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: auto;\n  width: 110px;\n  color: ", ";\n  font-family: ", ";\n\n  @media screen and (min-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (max-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (min-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (max-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (min-width: 1440) {\n    font-size: 16px;\n  }\n  @media screen and (max-width: 1440) {\n    font-size: 16px;\n  }\n  font-weight: 400;\n  line-height: 15px;\n  text-align: left;\n"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY);
+function PropertyEnum(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/_react["default"].createElement(EnumWrapper, null, /*#__PURE__*/_react["default"].createElement(EnumTitle, null, configs.label), /*#__PURE__*/_react["default"].createElement(_export.FormSelect, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  }, (0, _immutable.Seq)(configs.values).entrySeq().map(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+      key = _ref3[0],
+      value = _ref3[1];
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: key,
+      value: key
+    }, value);
+  })));
+}
+PropertyEnum.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-hidden.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyHidden;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function PropertyHidden(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  return null;
+}
+PropertyHidden.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-lenght-measure.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyLengthMeasure;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("../../constants");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _export = require("../../components/style/export");
+var _immutable = require("immutable");
+var _math = require("../../utils/math");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+var _excluded = ["hook", "label"];
+var internalTableStyle = {
+  borderCollapse: 'collapse'
+};
+var secondTdStyle = {
+  padding: 0
+};
+var unitContainerStyle = {
+  width: '5em'
+};
+function PropertyLengthMeasure(_ref, _ref2) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var catalog = _ref2.catalog;
+  var length = value.get('length') || 0; // length in inch
+  var _length = value.get('_length') || length; // length in unit
+  var _unit = value.get('_unit') || _constants.UNIT_INCH;
+  var type = value.get('type') || _constants.BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = (0, _objectWithoutProperties2["default"])(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = (0, _math.toFixedFloat)(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        length: unitInput !== _constants.UNIT_INCH ? (0, _convertUnitsLite.convert)(newLength).from(unitInput).to(_constants.UNIT_INCH) : newLength,
+        _length: newLength
+      });
+    } else {
+      merged = value.merge({
+        _length: (0, _convertUnitsLite.convert)(newLength).from(_constants.UNIT_INCH).to(unitInput),
+        _unit: unitInput
+      });
+    }
+    if (hook) {
+      return hook(merged, sourceElement, internalState, state).then(function (val) {
+        return onUpdate(val);
+      });
+    }
+    return onUpdate(merged);
+  };
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "PropertyLengthMeasure",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, label)), /*#__PURE__*/_react["default"].createElement("td", {
+    style: secondTdStyle
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    style: internalTableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.FormNumberInput, (0, _extends2["default"])({
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: _length,
+    onChange: function onChange(event) {
+      return update(event.target.value, _unit, 0);
+    },
+    onValid: onValid
+  }, configRest))), /*#__PURE__*/_react["default"].createElement("td", {
+    style: unitContainerStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormSelect, {
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: _unit,
+    onChange: function onChange(event) {
+      return update(length, event.target.value, 1);
+    }
+  }, _constants.UNITS_LENGTH.map(function (el) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: el,
+      value: el
+    }, el);
+  }))))))))));
+}
+PropertyLengthMeasure.propTypes = {
+  value: _propTypes["default"].instanceOf(_immutable.Map).isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+PropertyLengthMeasure.contextTypes = {
+  catalog: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-length-measure.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyLengthMeasure;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("../../constants");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _export = require("../../components/style/export");
+var _immutable = require("immutable");
+var _math = require("../../utils/math");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _excluded = ["hook", "label"];
+var _templateObject, _templateObject2;
+var DistanceFloorWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-top: 3px;\n"])));
+var DistanceFloorTitle = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: auto;\n  width: 110px;\n  color: ", ";\n  font-family: ", ";\n  font-size: 16px;\n\n  @media screen and (min-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (max-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (min-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (max-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (min-width: 1440) {\n    font-size: 16px;\n  }\n  @media screen and (max-width: 1440) {\n    font-size: 16px;\n  }\n  font-weight: 400;\n  line-height: 15px;\n  text-align: left;\n"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY);
+function PropertyLengthMeasure(_ref, _ref2) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var catalog = _ref2.catalog;
+  var _unit = value.get('_unit');
+  var unit = state.getIn(['scene', 'layers', state.scene.selectedLayer, 'unit']);
+  var length = value.get('length') || 0; // in centi
+  var _length = value.get('_length') || length; // in _unit
+  if (!_unit) {
+    _unit = _constants.UNIT_INCH;
+    _length = (0, _convertUnitsLite.convert)(length).from(_constants.UNIT_CENTIMETER).to(_constants.UNIT_INCH);
+  }
+  var type = value.get('type') || _constants.BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = (0, _objectWithoutProperties2["default"])(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = (0, _math.toFixedFloat)(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        _length: newLength,
+        _unit: unitInput,
+        length: (0, _convertUnitsLite.convert)(newLength).from(unitInput).to(_constants.UNIT_CENTIMETER)
+      });
+    } else {
+      merged = value.merge({
+        _length: (0, _convertUnitsLite.convert)(newLength).from(_constants.UNIT_CENTIMETER).to(unitInput),
+        _unit: unitInput,
+        length: newLength
+      });
+    }
+    if (hook) {
+      return hook(merged, sourceElement, internalState, state).then(function (val) {
+        return onUpdate(val);
+      });
+    }
+    return onUpdate(merged);
+  };
+  return /*#__PURE__*/_react["default"].createElement(DistanceFloorWrapper, null, /*#__PURE__*/_react["default"].createElement(DistanceFloorTitle, null, label), /*#__PURE__*/_react["default"].createElement(_export.FormNumberInput, (0, _extends2["default"])({
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: (0, _convertUnitsLite.convert)(_length).from('in').to(unit),
+    onChange: function onChange(event) {
+      return update(event.target.value, _unit, 0);
+    },
+    onValid: onValid,
+    labelName: label,
+    style: {
+      paddingRight: '40px'
+    }
+  }, configRest)));
+}
+PropertyLengthMeasure.propTypes = {
+  value: _propTypes["default"].instanceOf(_immutable.Map).isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+PropertyLengthMeasure.contextTypes = {
+  catalog: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-length-measure_hole.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyLengthMeasureHole;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("../../constants");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _export = require("../../components/style/export");
+var _immutable = require("immutable");
+var _math = require("../../utils/math");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+var _excluded = ["hook", "label"];
+var internalTableStyle = {
+  borderCollapse: 'collapse'
+};
+var secondTdStyle = {
+  padding: 0
+};
+var unitContainerStyle = {
+  width: '3em'
+};
+function PropertyLengthMeasureHole(_ref, _ref2) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var catalog = _ref2.catalog;
+  var _unit = value.get('_unit') || _constants.UNIT_INCH;
+  var _length = value.get('_length') || 0;
+  var length = value.get('length') || _length;
+  var type = value.get('type') || _constants.BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = (0, _objectWithoutProperties2["default"])(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = (0, _math.toFixedFloat)(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        _length: newLength,
+        length: (0, _convertUnitsLite.convert)(newLength).from(unitInput).to('cm')
+      });
+    } else {
+      merged = value.merge({
+        _length: (0, _convertUnitsLite.convert)(newLength).from(_constants.UNIT_INCH).to(unitInput),
+        _unit: unitInput
+      });
+    }
+    if (hook) {
+      return hook(merged, sourceElement, internalState, state).then(function (val) {
+        return onUpdate(val);
+      });
+    }
+    return onUpdate(merged);
+  };
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "PropertyLengthMeasure",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, label)), /*#__PURE__*/_react["default"].createElement("td", {
+    style: secondTdStyle
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    style: internalTableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.FormNumberInput1, (0, _extends2["default"])({
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: _length,
+    onChange: function onChange(event) {
+      return update(event.target.value, _unit, 0);
+    },
+    onValid: onValid
+  }, configRest))), /*#__PURE__*/_react["default"].createElement("td", {
+    style: unitContainerStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormSelect, {
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: _unit,
+    onChange: function onChange(event) {
+      return update(length, event.target.value, 1);
+    }
+  }, _constants.UNITS_LENGTH.map(function (el) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: el,
+      value: el
+    }, el);
+  }))))))))));
+}
+PropertyLengthMeasureHole.propTypes = {
+  value: _propTypes["default"].instanceOf(_immutable.Map).isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+PropertyLengthMeasureHole.contextTypes = {
+  catalog: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-number.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyNumber;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+function PropertyNumber(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    var number = parseFloat(val);
+    if (isNaN(number)) {
+      number = 0;
+    }
+    if (configs.hook) {
+      return configs.hook(number, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(number);
+  };
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "PropertyNumber",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, configs.label)), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.FormNumberInput, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    },
+    onValid: onValid,
+    min: configs.min,
+    max: configs.max
+  })))));
+}
+PropertyNumber.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-read-only.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyReadOnly;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+function PropertyReadOnly(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "PropertyReadOnly",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, configs.label)), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement("div", null, value)))));
+}
+PropertyReadOnly.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-string.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyString;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+var tableStyle = {
+  width: '100%',
+  borderSpacing: '2px 0',
+  marginBottom: '2px'
+};
+var firstTdStyle = {
+  width: '6em',
+  textTransform: 'capitalize'
+};
+function PropertyString(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "PropertyString",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, configs.label)), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.FormTextInput, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  })))));
+}
+PropertyString.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/property-toggle.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyToggle;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+function PropertyToggle(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/_react["default"].createElement("table", {
+    className: "PropertyToggle",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, configs.label)), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.Button, {
+    onClick: function onClick(e) {
+      return update(!value);
+    },
+    size: "small"
+  }, configs.actionName)))));
+}
+PropertyToggle.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/catalog/properties/shared-property-style.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var tableStyle = {
+  width: '100%',
+  borderSpacing: '2px 0',
+  marginBottom: '2px'
+};
+var firstTdStyle = {
+  width: '6em',
+  textTransform: 'capitalize'
+};
+var PropertyStyle = {
+  tableStyle: tableStyle,
+  firstTdStyle: firstTdStyle
+};
+var _default = exports["default"] = PropertyStyle;
+module.exports = exports.default;