hc-components-test/src/layouts/basicLayout.jsx

基于react的通用组件库

import React from 'react';
import PropTypes from 'prop-types';
import {getComponent} from './getComponent';

function loop(arrOrMap, callback) {
  if (Array.isArray(arrOrMap)) {
    arrOrMap.forEach(callback);
  } else {
    for (let key in arrOrMap) {
      let item = {name: key};
      if (typeof arrOrMap[key] === 'function') {
        if (arrOrMap[key].prototype.isReactComponent) {
          item.component = arrOrMap[key];
        } else {
          item.props = {
            getProps: arrOrMap[key]
          };
        }
      } else {
        if (arrOrMap[key].component) {
          Object.assign(item, {
            component: arrOrMap[key].component,
            props: arrOrMap[key].props
          });
        } else {
          item.props = arrOrMap[key];
        }
      }
      callback(item);
    }
  }
}

export class BasicLayout extends React.PureComponent {
  static getComponent = function (Widget, props) {
    if (Widget) {
      if (Array.isArray(Widget)) {
        Widget = [].concat(Widget);
        Widget[1] = Object.assign(props || {}, Widget[1]);
      } else {
        Widget = Object.assign(props || {}, Widget);
      }
    }
    return Widget;
  }
  static getLayoutProps = function (option, viewContent, extraOption = {}) {
    option.__widgets__ = option.__widgets__ || {};
    const layoutProps = Object.assign({
      route: option.route,
      viewContent: viewContent,
      components: Object.assign({}, option.__widgets__),
      style: option.style
    }, option.props);
    const layoutBlocks = Object.assign({}, this.layoutBlocks);
    loop(extraOption.components || option.components, (item) => {
      const Com = layoutBlocks[item.name] || item.component;
      if (Com) {
        delete item.component;
        delete layoutBlocks[item.name];
        layoutProps.components[item.name] = layoutProps.components[item.name] || getComponent(item.props)(Com);
        if (item.static) {
          option.__widgets__[item.name] = layoutProps.components[item.name]; 
        }
      }
    });
    for (let name in layoutBlocks) {
      layoutProps.components[name] = layoutProps.components[name] || (extraOption[name] === undefined ? layoutBlocks[name] : getComponent(extraOption[name])(layoutBlocks[name]));
      if (layoutBlocks[name].static) {
        option.__widgets__[name] = layoutProps.components[name]; 
      }
    }
    const customLayoutProps = this.displayName && option[this.displayName];
    for (let key in customLayoutProps) {
      if (key === 'components') {
        Object.assign(layoutProps.components, customLayoutProps[key]);
      } else {
        layoutProps[key] = customLayoutProps[key];
      }
    }
    return layoutProps;
  }

  static propTypes = {
    className: PropTypes.string,
    components: PropTypes.object,
    viewContent: PropTypes.element,
    children: PropTypes.element,
    style: PropTypes.object
  }

  static defaultProps = {
    className: '',
    components: {}
  }

  getComponent(name) {
    return this.props.components[name] || getComponent.emptyComponent;
  }

  hasComponent(name) {
    return this.props.components[name] && this.props.components[name] !== getComponent.emptyComponent;
  }
}