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/MarkerLayout.js

@@ -42,11 +42,7 @@ var MarkerLayout = function (_Component) {
     }, {
         key: 'render',
         value: function render() {
-            return _react2.default.createElement(
-                'div',
-                null,
-                this.props.children
-            );
+            return this.props.children;
         }
     }]);
 

lib/controllers/layouts.js

@@ -33,13 +33,12 @@ 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.options = this.getData().options;
 
-            this._setupContent(domElement);
             this._updateSize();
 
             detectImagesLoaded(this.getElement()).then(this._updateMarkerShape.bind(this));
@@ -54,17 +53,13 @@ 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');
+            var element = this.getElement().firstChild;
+
             return [element.offsetWidth, 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/MarkerLayout.jsx

@@ -16,7 +16,7 @@ class MarkerLayout extends Component {
     }
 
     render () {
-        return <div>{this.props.children}</div>;
+        return this.props.children;
     }
 }
 

src/controllers/layouts.js

@@ -19,13 +19,12 @@ 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.options = this.getData().options;
 
-            this._setupContent(domElement);
             this._updateSize();
 
             detectImagesLoaded(this.getElement()).then(this._updateMarkerShape.bind(this));
@@ -47,17 +46,13 @@ 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');
+            const element = this.getElement().firstChild;
+
             return [element.offsetWidth, 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']
     }
 };