kitchen-simulator 1.1.1-test.49 → 1.1.1-test.50

package/lib/class/vertex.js

@@ -0,0 +1,207 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _immutable = require("immutable");
+var _models = require("../models");
+var _export = require("../utils/export");
+var _constants = require("../constants");
+var _export2 = require("../class/export");
+var _helper = require("../utils/helper");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var Vertex = exports["default"] = /*#__PURE__*/function () {
+  function Vertex() {
+    _classCallCheck(this, Vertex);
+  }
+  return _createClass(Vertex, null, [{
+    key: "add",
+    value: function add(state, layerID, x, y, relatedPrototype, relatedID) {
+      var vertex = state.getIn(['scene', 'layers', layerID, 'vertices']).find(function (vertex) {
+        return _export.GeometryUtils.samePoints(vertex, {
+          x: x,
+          y: y
+        });
+      });
+      if (vertex) {
+        vertex = vertex.update(relatedPrototype, function (related) {
+          return related.push(relatedID);
+        });
+      } else {
+        vertex = new _models.Vertex(_defineProperty({
+          id: _export.IDBroker.acquireID(),
+          name: 'Vertex',
+          x: x,
+          y: y
+        }, relatedPrototype, new _immutable.List([relatedID])));
+      }
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertex.id], vertex);
+      return {
+        updatedState: state,
+        vertex: vertex
+      };
+    }
+  }, {
+    key: "setAttributes",
+    value: function setAttributes(state, layerID, vertexID, vertexAttributes) {
+      state = state.mergeIn(['scene', 'layers', layerID, 'vertices', vertexID], vertexAttributes);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "addElement",
+    value: function addElement(state, layerID, vertexID, elementPrototype, elementID) {
+      state = state.updateIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype], function (list) {
+        return list.push(elementID);
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "removeElement",
+    value: function removeElement(state, layerID, vertexID, elementPrototype, elementID) {
+      var elementIndex = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype]).findIndex(function (el) {
+        return el === elementID;
+      });
+      if (elementIndex !== -1) {
+        state = state.updateIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype], function (list) {
+          return list.remove(elementIndex);
+        });
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "select",
+    value: function select(state, layerID, vertexID) {
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID, 'selected'], true);
+      state = state.updateIn(['scene', 'layers', layerID, 'selected', 'vertices'], function (elems) {
+        return elems.push(vertexID);
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "unselect",
+    value: function unselect(state, layerID, vertexID) {
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID, 'selected'], false);
+      state = state.updateIn(['scene', 'layers', layerID, 'selected', 'vertices'], function (elems) {
+        return elems.filter(function (el) {
+          return el.id !== vertexID;
+        });
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "remove",
+    value: function remove(state, layerID, vertexID, relatedPrototype, relatedID, forceRemove) {
+      var vertex = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID]);
+      if (vertex) {
+        if (relatedPrototype && relatedID) vertex = vertex.update(relatedPrototype, function (related) {
+          var index = related.findIndex(function (ID) {
+            return relatedID === ID;
+          });
+          return related["delete"](index);
+        });
+        var inUse = vertex.areas.size || vertex.lines.size;
+        if (inUse && !forceRemove) {
+          state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID], vertex);
+        } else {
+          state = state.deleteIn(['scene', 'layers', layerID, 'vertices', vertexID]);
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "beginDraggingVertex",
+    value: function beginDraggingVertex(state, layerID, vertexID, x, y) {
+      var snapElements = _export.SnapSceneUtils.sceneSnapElements(state.scene, new _immutable.List(), state.snapMask);
+      state = state.merge({
+        mode: _constants.MODE_DRAGGING_VERTEX,
+        snapElements: snapElements,
+        draggingSupport: (0, _immutable.Map)({
+          layerID: layerID,
+          vertexID: vertexID,
+          previousMode: state.get('mode')
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDraggingVertex",
+    value: function updateDraggingVertex(state, x, y) {
+      var _state = state,
+        draggingSupport = _state.draggingSupport,
+        snapElements = _state.snapElements,
+        scene = _state.scene;
+      var snap = null;
+      if (state.snapMask && !state.snapMask.isEmpty()) {
+        snap = _export.SnapUtils.nearestSnap(snapElements, x, y, state.snapMask);
+        if (snap) {
+          var _snap$point = snap.point;
+          x = _snap$point.x;
+          y = _snap$point.y;
+        }
+      }
+      var layerID = draggingSupport.get('layerID');
+      var vertexID = draggingSupport.get('vertexID');
+      state = state.merge({
+        activeSnapElement: snap ? snap.snap : null,
+        scene: scene.mergeIn(['layers', layerID, 'vertices', vertexID], {
+          x: x,
+          y: y
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endDraggingVertex",
+    value: function endDraggingVertex(state, x, y) {
+      var _state2 = state,
+        draggingSupport = _state2.draggingSupport;
+      var layerID = draggingSupport.get('layerID');
+      var vertexID = draggingSupport.get('vertexID');
+      var lines = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID, 'lines']);
+      if (lines) {
+        state = lines.reduce(function (reducedState, lineID) {
+          var eachLine = reducedState.getIn(['scene', 'layers', layerID, 'lines', lineID]);
+          if ((0, _helper.isEmpty)(eachLine)) return reducedState;
+          reducedState = _export2.Layer.removeZeroLengthLines(reducedState, layerID).updatedState;
+          reducedState = _export2.Layer.mergeEqualsVertices(reducedState, layerID, vertexID).updatedState;
+          reducedState = _export2.Line.select(reducedState, layerID, eachLine.id).updatedState;
+          reducedState = reducedState.setIn(['mode'], _constants.MODE_DRAGGING_VERTEX);
+          reducedState = _export2.Line.applyWallChanges(reducedState, _constants.END_DRAGGING_VERTEX).updatedState;
+          return reducedState;
+        }, state);
+      }
+      state = state.merge({
+        mode: draggingSupport.get('previousMode'),
+        draggingSupport: null,
+        activeSnapElement: null,
+        snapElements: new _immutable.List()
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }]);
+}();

package/lib/components/content.js

@@ -0,0 +1,116 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Content;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _viewer2d = _interopRequireDefault(require("./viewer2d/viewer2d"));
+var _viewer3d = _interopRequireDefault(require("./viewer3d/viewer3d"));
+var _viewer3dFirstPerson = _interopRequireDefault(require("./viewer3d/viewer3d-first-person"));
+var constants = _interopRequireWildcard(require("../constants"));
+var _front3D = _interopRequireDefault(require("./viewer3d/front3D"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function Content(_ref, _ref2) {
+  var width = _ref.width,
+    height = _ref.height,
+    state = _ref.state,
+    customContents = _ref.customContents,
+    match = _ref.match,
+    setToolbar = _ref.setToolbar,
+    replaceCabinet = _ref.replaceCabinet,
+    keyDownEnable = _ref.keyDownEnable,
+    catalog = _ref.catalog;
+  var projectActions = _ref2.projectActions;
+  var mode = state.get('mode');
+  console.log('mode =>', mode);
+  switch (mode) {
+    // this mode is when view elevation
+    case constants.MODE_ELEVATION_VIEW:
+      return /*#__PURE__*/_react["default"].createElement(_front3D["default"], {
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        catalog: catalog
+      });
+    case constants.MODE_3D_VIEW:
+      return /*#__PURE__*/_react["default"].createElement(_viewer3d["default"], {
+        id: "viewer3D",
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        downloadFlag: false
+      });
+    case constants.MODE_3D_FIRST_PERSON:
+      return /*#__PURE__*/_react["default"].createElement(_viewer3dFirstPerson["default"], {
+        state: state,
+        width: width,
+        height: height
+      });
+    case constants.MODE_IDLE:
+    case constants.MODE_2D_ZOOM_IN:
+    case constants.MODE_2D_ZOOM_OUT:
+    case constants.MODE_2D_PAN:
+    case constants.MODE_WAITING_DRAWING_LINE:
+    case constants.MODE_DRAGGING_LINE:
+    case constants.MODE_DRAGGING_VERTEX:
+    case constants.MODE_DRAGGING_ITEM:
+    case constants.MODE_DRAWING_LINE:
+    case constants.MODE_DRAWING_HOLE:
+    case constants.MODE_DRAWING_ITEM:
+    case constants.MODE_DRAGGING_HOLE:
+    case constants.MODE_ROTATING_ITEM:
+      return /*#__PURE__*/_react["default"].createElement(_viewer2d["default"], {
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet
+      });
+    case constants.MODE_ROTATING_ITEM_3D:
+    case constants.MODE_DRAGGING_ITEM_3D:
+    case constants.MODE_IDLE_3D:
+    case constants.MODE_DRAWING_ITEM_3D:
+    case constants.MODE_DRAWING_HOLE_3D:
+    case constants.MODE_DRAGGING_HOLE_3D:
+      return /*#__PURE__*/_react["default"].createElement(_viewer3d["default"], {
+        id: "viewer3D",
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        downloadFlag: false
+      });
+    default:
+      if (customContents.hasOwnProperty(mode)) {
+        var CustomContent = customContents[mode];
+        return /*#__PURE__*/_react["default"].createElement(CustomContent, {
+          width: width,
+          height: height,
+          state: state
+        });
+      } else {
+        throw new Error("Mode ".concat(mode, " doesn't have a mapped content"));
+      }
+  }
+}
+Content.propTypes = {
+  state: _propTypes["default"].object.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  replaceCabinet: _propTypes["default"].func.isRequired
+};
+Content.contextTypes = {
+  projectActions: _propTypes["default"].object.isRequired
+};

package/lib/components/disclaimer/disclaimer.js

@@ -0,0 +1,105 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = DisclaimerScreen;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#D1C4E9',
+    background: 'url("/assets/img/svg/disclaimer/background.svg") no-repeat center',
+    backgroundSize: 'cover',
+    padding: '16px',
+    height: '100dvh',
+    width: '100dvw'
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: '#fff',
+    borderRadius: 24,
+    width: '85vw',
+    textAlign: 'center',
+    boxShadow: '0 8px 20px rgba(0,0,0,0.08)',
+    height: 'fit-content',
+    opacity: '90%',
+    gap: '1rem',
+    padding: '1.5rem',
+    maxWidth: '364px'
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: '1.5rem',
+    lineHeight: '133%',
+    letterSpacing: '0px',
+    textAlign: 'center',
+    verticalAlign: 'middle',
+    maxWidth: '200px'
+  },
+  body: {
+    fontWeight: 400,
+    fontStyle: 'normal',
+    fontSize: '0.875rem',
+    lineHeight: '143%',
+    letterSpacing: '0.17px',
+    color: '#49454F',
+    maxWidth: '90%'
+  },
+  button: {
+    marginTop: '0.5rem',
+    backgroundColor: '#6750A4',
+    color: '#fff',
+    borderRadius: 100,
+    padding: '16px 72px',
+    textTransform: 'none',
+    fontWeight: 500,
+    fontSize: '1rem',
+    border: 'none',
+    cursor: 'pointer'
+  }
+};
+function DisclaimerScreen(_ref) {
+  var _ref$open = _ref.open,
+    open = _ref$open === void 0 ? true : _ref$open,
+    onClose = _ref.onClose,
+    _ref$titleTop = _ref.titleTop,
+    titleTop = _ref$titleTop === void 0 ? 'Building something great!' : _ref$titleTop,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "We\u2019re adding the finishing touches to the mobile version.", /*#__PURE__*/_react["default"].createElement("br", null), "In the meantime, try our desktop version to start designing your dream room.") : _ref$message,
+    _ref$buttonText = _ref.buttonText,
+    buttonText = _ref$buttonText === void 0 ? 'Close' : _ref$buttonText;
+  (0, _react.useEffect)(function () {
+    var viewportMeta = document.querySelector('meta[name="viewport"]');
+    if (!viewportMeta) {
+      viewportMeta = document.createElement('meta');
+      viewportMeta.name = 'viewport';
+      document.head.appendChild(viewportMeta);
+    }
+    viewportMeta.content = 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover';
+  }, []);
+  if (!open) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.root
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.card
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    width: 40,
+    height: 40,
+    alt: "loog",
+    src: '/assets/img/svg/disclaimer/logo-dots.svg'
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.title
+  }, titleTop), /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.body
+  }, message), /*#__PURE__*/_react["default"].createElement("button", {
+    style: styles.button,
+    onClick: onClose
+  }, buttonText)));
+}

package/lib/components/export.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Content", {
+  enumerable: true,
+  get: function get() {
+    return _content["default"];
+  }
+});
+Object.defineProperty(exports, "StyleComponents", {
+  enumerable: true,
+  get: function get() {
+    return _export2["default"];
+  }
+});
+Object.defineProperty(exports, "Viewer2DComponents", {
+  enumerable: true,
+  get: function get() {
+    return _export["default"];
+  }
+});
+exports["default"] = void 0;
+var _content = _interopRequireDefault(require("./content"));
+var _export = _interopRequireDefault(require("./viewer2d/export"));
+var _export2 = _interopRequireDefault(require("./style/export"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = {
+  Content: _content["default"],
+  Viewer2DComponents: _export["default"],
+  StyleComponents: _export2["default"]
+};

package/lib/components/style/button.js

@@ -0,0 +1,120 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
+var _excluded = ["type", "style", "styleHover", "children", "size"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var BASE_STYLE = {
+  display: 'inline-block',
+  fontWeight: '400',
+  lineHeight: '1.25',
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  WebkitUserSelect: 'none',
+  MozUserSelect: 'none',
+  MsUserSelect: 'none',
+  userSelect: 'none',
+  padding: '5px 14px',
+  fontSize: '14px',
+  color: SharedStyle.COLORS.black,
+  fonWeight: '400px',
+  transition: 'background-color 175ms ease, border 175ms ease',
+  outline: 'none',
+  borderRadius: '2px',
+  borderWidth: '1px',
+  borderType: 'solid',
+  width: '100%'
+};
+var BASE_STYLE_SIZE = {
+  small: {
+    fontSize: '12px',
+    padding: '3px 8px'
+  },
+  normal: {},
+  large: {
+    padding: '8px 20px'
+  }
+};
+var Button = exports["default"] = /*#__PURE__*/function (_Component) {
+  function Button(props) {
+    var _this;
+    _classCallCheck(this, Button);
+    _this = _callSuper(this, Button, [props]);
+    _this.state = {
+      hover: false
+    };
+    return _this;
+  }
+  _inherits(Button, _Component);
+  return _createClass(Button, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var hover = this.state.hover;
+      var _this$props = this.props,
+        type = _this$props.type,
+        customStyle = _this$props.style,
+        customStyleHover = _this$props.styleHover,
+        children = _this$props.children,
+        size = _this$props.size,
+        rest = _objectWithoutProperties(_this$props, _excluded);
+      var styleMerged = Object.assign({}, BASE_STYLE, BASE_STYLE_SIZE[size], hover ? customStyleHover : customStyle);
+      return /*#__PURE__*/_react["default"].createElement("button", _extends({
+        type: type,
+        onMouseEnter: function onMouseEnter(e) {
+          return _this2.setState({
+            hover: true
+          });
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return _this2.setState({
+            hover: false
+          });
+        },
+        style: styleMerged
+      }, rest), children);
+    }
+  }]);
+}(_react.Component);
+Button.defaultProps = {
+  type: 'button',
+  size: 'normal',
+  style: {
+    backgroundColor: '#e6e6e6',
+    borderColor: '#adadad'
+  },
+  styleHover: {
+    backgroundColor: '#d4d4d4',
+    borderColor: '#8c8c8c'
+  }
+};
+Button.propTypes = {
+  type: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  styleHover: _propTypes["default"].object,
+  size: _propTypes["default"].oneOf(['large', 'normal', 'small'])
+};

package/lib/components/style/cancel-button.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = CancelButton;
+var _react = _interopRequireDefault(require("react"));
+var _button = _interopRequireDefault(require("./button"));
+var _excluded = ["children"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var STYLE = {
+  borderColor: '#adadad',
+  backgroundColor: '#e6e6e6'
+};
+var STYLE_HOVER = {
+  backgroundColor: '#d4d4d4',
+  borderColor: '#8c8c8c'
+};
+function CancelButton(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_button["default"], _extends({
+    style: STYLE,
+    styleHover: STYLE_HOVER
+  }, rest), children);
+}

package/lib/components/style/content-container.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ContentContainer;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var STYLE = {
+  padding: '0 20px',
+  overflowY: 'auto'
+};
+function ContentContainer(_ref) {
+  var children = _ref.children,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({
+      width: width,
+      height: height
+    }, STYLE), style),
+    onWheel: function onWheel(event) {
+      return event.stopPropagation();
+    }
+  }, children);
+}
+ContentContainer.propsType = {
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  style: _propTypes["default"].object
+};