react-element/lib/Element.js

😉

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var cx = _interopDefault(require('classnames'));
var PropTypes = _interopDefault(require('prop-types'));
var react = require('react');

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

var reEvent = /^on\w+$/;

var isFunction = function isFunction(f) {
  return typeof f === 'function';
}; // 属性后定义后覆盖(除了 class 始终拼接起来），处理函数先定义先执行


var mergeProps = function mergeProps(destProps, srcProps) {
  var className = cx(srcProps.className, destProps.className);
  var resultProps = Object.assign({}, destProps, srcProps, className && {
    className: className
  }); // keep event handlers

  Object.keys(destProps).forEach(function (key) {
    var destHandler = destProps[key];
    var srcHandler = srcProps[key];

    if (isFunction(destHandler) && isFunction(srcHandler) && reEvent.test(key)) {
      resultProps[key] = function () {
        destHandler.apply(this, arguments);
        srcHandler.apply(this, arguments);
      };
    }
  });
  return resultProps;
};
/**
 * 元素替换
 *
 *   // 标签替换
 *   <Element component='span'>text</Element>
 *   // 构造函数替换
 *   <Element component={Header}>text</Element>
 *   // 实例替换
 *   <Element component={<Link to='/' />}>text</Element>
 */


var Element = function Element(_ref) {
  var component = _ref.component,
      children = _ref.children,
      ownProps = _objectWithoutPropertiesLoose(_ref, ["component", "children"]);

  var type = typeof component;

  if (type === 'string') {
    if (ownProps.onRef) {
      ownProps.ref = ownProps.onRef;
      delete ownProps.onRef;
    }

    return react.createElement(component, ownProps, children);
  } else if (type === 'function') {
    return react.createElement(component, ownProps, children);
  } else if (react.isValidElement(component)) {
    var childProps = mergeProps(component.props, ownProps);

    if (children) {
      return react.cloneElement(component, childProps, children);
    }

    return react.cloneElement(component, childProps);
  }

  return children ? react.Children.only(children) : null;
};

Element.propTypes = {
  onRef: PropTypes.func,
  children: PropTypes.node,
  component: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.func])
};

module.exports = Element;