make layout creating using default templateLayoutFactory templates

.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']
  }
 };