@coorpacademy/treantjs-adapter-angular/lib/index.js

'use strict';

exports.__esModule = true;

var _mapKeys = require('lodash/fp/mapKeys');

var _mapKeys2 = _interopRequireDefault(_mapKeys);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const DefaultProvider = props => props.children;

const link = (Provider, Component) => (scope, element, attrs) => {
  const update = vTree => {
    _reactDom2.default.render(vTree, element[0]);
  };

  const refresh = (context = {}, props = {}) => {
    const vTree = _react2.default.createElement(
      Provider,
      context,
      _react2.default.createElement(Component, props)
    );

    update(vTree);
  };

  scope.$watch('context', () => refresh(scope.context, scope.props), true);
  scope.$watch('props', () => refresh(scope.context, scope.props), true);

  scope.$on('$destroy', () => window.angular.element(element).remove());
};

const createDirective = (app, componentName, Provider, Component) => {
  const directive = () => {
    return {
      restrict: 'E',
      link: link(Provider, Component),
      scope: {
        props: '=',
        context: '='
      }
    };
  };

  app.directive(componentName, [directive]);
};

/**
 * examples :
 * <slide value="slideContent"></slide>
 * <module-bubble value="modData()"></module-bubble>
 */
const createDirectives = (app, Provider, components) => {
  const toDirective = key => {
    const componentName = `coorp${key}`;
    const Component = components[key];
    createDirective(app, componentName, Provider || DefaultProvider, Component);
  };

  return (0, _mapKeys2.default)(toDirective, components);
};

exports.default = createDirectives;
//# sourceMappingURL=index.js.map