make layout creating using default templateLayoutFactory templates

* add dist folder to .gitignore
* fix error at build:umd script

Author: Mike_Device

.gitignore

@@ -1,4 +1,5 @@
 node_modules
+dist
 .DS_Store
 .DS_Store?
 .idea/

lib/MapMarker.js

@@ -133,8 +133,6 @@ var MapMarker = function (_Component) {
         key: '_setupMarkerLayout',
         value: function _setupMarkerLayout(component) {
             this._markerElement = document.createElement('div');
-            this._markerElement.className = 'icon-content';
-            this._markerElement.style.display = 'inline-block';
 
             _reactDom2.default.render(component, this._markerElement);
             this._controller.setLayout('iconLayout', this._markerElement);

lib/controllers/layouts.js

@@ -33,16 +33,18 @@ function createLayout(_ref) {
         _ref$extendMethods = _ref.extendMethods,
         extendMethods = _ref$extendMethods === undefined ? {} : _ref$extendMethods;
 
-    var LayoutClass = _api2.default.getAPI().templateLayoutFactory.createClass('<i></i>', Object.assign({
+    var LayoutClass = _api2.default.getAPI().templateLayoutFactory.createClass(domElement.innerHTML, Object.assign({
         build: function build() {
             LayoutClass.superclass.build.call(this);
 
+            this.element = this.getElement();
+            this.element.style.display = 'inline-block';
+
             this.options = this.getData().options;
 
-            this._setupContent(domElement);
             this._updateSize();
 
-            detectImagesLoaded(this.getElement()).then(this._updateMarkerShape.bind(this));
+            detectImagesLoaded(this.element).then(this._updateMarkerShape.bind(this));
         },
 
         getShape: function getShape() {
@@ -54,18 +56,12 @@ function createLayout(_ref) {
             this.events.fire('shapechange');
         },
 
-        _setupContent: function _setupContent(domElement) {
-            var element = this.getElement();
-            element.appendChild(domElement);
-        },
-
         _updateSize: function _updateSize() {
             this._size = this._getSize();
         },
 
         _getSize: function _getSize() {
-            var element = this.getElement().querySelector('.icon-content');
-            return [element.offsetWidth, element.offsetHeight];
+            return [this.element.offsetWidth, this.element.offsetHeight];
         }
     }, extendMethods));
 

package.json

@@ -7,6 +7,7 @@
     "build:lib": "babel ./src -d lib",
     "build:umd": "webpack src/index.js dist/YandexMapReact.js --config webpack.config.dev.js",
     "watch": "babel --watch ./src -d lib",
+    "watch:umd": "webpack src/index.js dist/YandexMapReact.js --watch --config webpack.config.dev.js",
     "lint": "eslint src/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

src/MapMarker.jsx

@@ -94,8 +94,6 @@ class MapMarker extends Component {
 
     _setupMarkerLayout (component) {
         this._markerElement = document.createElement('div');
-        this._markerElement.className = 'icon-content';
-        this._markerElement.style.display = 'inline-block';
 
         ReactDOM.render(component, this._markerElement);
         this._controller.setLayout('iconLayout', this._markerElement);

src/controllers/layouts.js

@@ -19,16 +19,18 @@ function detectImagesLoaded (element) {
 }
 
 function createLayout ({domElement, extendMethods = {}}) {
-    const LayoutClass = (api.getAPI()).templateLayoutFactory.createClass('<i></i>', Object.assign({
+    const LayoutClass = (api.getAPI()).templateLayoutFactory.createClass(domElement.innerHTML, Object.assign({
         build: function () {
             LayoutClass.superclass.build.call(this);
 
+            this.element = this.getElement();
+            this.element.style.display = 'inline-block';
+
             this.options = this.getData().options;
 
-            this._setupContent(domElement);
             this._updateSize();
 
-            detectImagesLoaded(this.getElement()).then(this._updateMarkerShape.bind(this));
+            detectImagesLoaded(this.element).then(this._updateMarkerShape.bind(this));
         },
 
         getShape: function () {
@@ -47,18 +49,12 @@ function createLayout ({domElement, extendMethods = {}}) {
             this.events.fire('shapechange');
         },
 
-        _setupContent: function (domElement) {
-            const element = this.getElement();
-            element.appendChild(domElement);
-        },
-
         _updateSize: function () {
             this._size = this._getSize();
         },
 
         _getSize: function () {
-            const element = this.getElement().querySelector('.icon-content');
-            return [element.offsetWidth, element.offsetHeight];
+            return [this.element.offsetWidth, this.element.offsetHeight];
         }
     }, extendMethods));
 

webpack.config.js

@@ -27,5 +27,8 @@ module.exports = {
         loaders: [
             {test: /\.jsx?/i, exclude: /node_modules/, loader: 'babel'}
         ]
+    },
+    resolve: {
+        extensions: ['', '.js', '.jsx']
     }
 };