react-pizza/lib/index.js

The utility for create (p)react component habitat.

'use strict';

var _react = require('react');

var React = _interopRequireWildcard(_react);

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

var _util = require('@rcp/util.iscompclass');

var _util2 = _interopRequireDefault(_util);

var _createref = require('createref');

var _createref2 = _interopRequireDefault(_createref);

var _lodash = require('lodash.get');

var _lodash2 = _interopRequireDefault(_lodash);

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

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var toArray = require('./toArray'); /**
                                     * @file habitat
                                     * @author imcuttle <moyuyc95@gmail.com>
                                     * @date 2018/11/7
                                     *
                                     */

var querySelectorAll = require('./querySelectorAll');

/**
 * @public
 * @param dom {HTMLElement}
 * @return {VDomResult}
 */
function VDom(dom) {
  var _data = {};
  return {
    get dom() {
      return dom;
    },
    data: function data(key, value) {
      var _Object$assign;

      Object.assign(_data, (_Object$assign = {}, _Object$assign[key] = value, _Object$assign));
    },
    get: function get(key) {
      return !key ? _data : _data[key];
    },
    isEqual: function isEqual(dom) {
      return dom === this || dom === this.dom;
    }
  };
}

/**
 * @typedef Renderer
 * @public
 * @param {HTMLElement | HTMLElement[] | NodeList | string} selector
 * @param {any} props
 * @return {Controller}
 */

/**
 * Modify a component to be controllable
 * @public
 * @param {React.ComponentType} Component
 * @return {Renderer}
 */
module.exports = function (Component) {
  function pizzaRender(selector) {
    var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

    var domList = querySelectorAll(selector);
    var vDomList = [];

    function renderToDom(dom, restProps) {
      var assignedProps = Object.assign({}, props, restProps);

      var ref = typeof React.createRef === 'function' ? React.createRef() : (0, _createref2.default)();
      if ((0, _util2.default)(Component)) {
        assignedProps.ref = ref;
      }
      var node = React.createElement(
        Component,
        assignedProps,
        assignedProps.children
      );
      // dom.data
      (0, _reactDom.render)(node, dom);
      return { node: node, ref: ref };
    }

    domList.forEach(function (dom) {
      var _renderToDom = renderToDom(dom),
          node = _renderToDom.node,
          ref = _renderToDom.ref;

      var vDom = VDom(dom);
      vDom.data('node', node);
      vDom.data('ref', ref);

      vDomList.push(vDom);
    });

    return {
      get origin() {
        return Component;
      },
      /**
       * @param dom
       * @return {number}
       */
      indexOf: function indexOf(dom) {
        return vDomList.findIndex(function (vdom) {
          return vdom.isEqual(dom);
        });
      },
      get: function get(indexOrDom) {
        if (typeof indexOrDom === 'undefined') {
          return vDomList;
        }

        var index = typeof indexOrDom === 'number' ? indexOrDom : this.indexOf(indexOrDom);
        if (index >= 0) {
          return vDomList[index];
        }
      },
      setProps: function setProps(props, indexOrDom) {
        toArray(this.get(indexOrDom)).forEach(function (vdom) {
          if (vdom.dom) {
            var _renderToDom2 = renderToDom(vdom.dom, props),
                node = _renderToDom2.node,
                ref = _renderToDom2.ref;

            vdom.data('node', node);
            vdom.data('ref', ref);
          }
        });
      },
      remove: function remove(indexOrDom) {
        if (typeof indexOrDom === 'undefined') {
          var i = 0;
          var len = vDomList.length;
          while (i < len) {
            this.remove(0);
            i++;
          }
          return;
        }

        var index = typeof indexOrDom === 'number' ? indexOrDom : this.indexOf(indexOrDom);
        if (index >= 0) {
          var vdom = vDomList[index];
          vDomList.splice(index, 1);
          if (vdom && vdom.dom) {
            (0, _reactDom.unmountComponentAtNode)(vdom.dom);
            // vdom.dom.innerHTML = ''
          }
        }
      },
      ref: function ref(indexOrDom) {
        var _this = this;

        var vdomList = this.get(indexOrDom);
        if (Array.isArray(vdomList)) {
          return vdomList.map(function (vdom) {
            return _this.ref(vdom);
          });
        }
        var vdom = vdomList;
        return vdom && vdom.get('ref');
      },
      call: function call(methodName, argvs, indexOrDom) {
        var _this2 = this;

        if (!Array.isArray(argvs)) {
          indexOrDom = argvs;
          argvs = [];
        }
        var vdomList = this.get(indexOrDom);
        if (Array.isArray(vdomList)) {
          return vdomList.map(function (vdom) {
            return _this2.call(methodName, argvs, vdom);
          });
        }
        var vdom = vdomList;
        if (vdom && vdom.get('ref') && vdom.get('ref').current) {
          var method = (0, _lodash2.default)(vdom.get('ref').current, methodName);
          var refName = methodName.replace(/\..+?$/, '');
          var parent = methodName === refName ? vdom.get('ref').current : (0, _lodash2.default)(vdom.get('ref').current, refName);
          if (typeof method === 'function') {
            return method.apply(parent, argvs);
          }
          return method;
        }
      }
    };
  }

  pizzaRender.origin = Component;

  return pizzaRender;
};