jc-biz-components/lib/jc-breadcrumb/index.js

jc component library based on Antd

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _breadcrumb = require('antd/lib/breadcrumb');

var _breadcrumb2 = _interopRequireDefault(_breadcrumb);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

require('antd/lib/breadcrumb/style');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRouterDom = require('react-router-dom');

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

// import React from 'react'
// import style from './style.less'
// import createBreadcrunb from './Breadcrumbs'

// const staticRoutesMap = {
//   '/': 'Home',
//   'A': 'Android版本更新',
//   'I': 'IOS版本更新',
//   'crawler': '爬取待审核',
//   '/crawlerDetail/afdsf': '视频详情/fasfe',
// }
// const App = createBreadcrunb({
//   staticRoutesMap,
//   Breadcrumb,
//   BreadcrumbItem: Breadcrumb.Item
// })

// const resolvePath = (path, resolveRoutes) => {
//   let route = routes.find(route => {
//     return route.path === path
//   })
//   let parentPath = route.parentPath
//   resolveRoutes.unshift(route)
//   if (parentPath) {
//     return resolvePath(parentPath, resolveRoutes)
//   }
//   return resolveRoutes
// }

var Breadcrumb = function (_Component) {
  (0, _inherits3['default'])(Breadcrumb, _Component);

  function Breadcrumb(props) {
    (0, _classCallCheck3['default'])(this, Breadcrumb);

    var _this = (0, _possibleConstructorReturn3['default'])(this, (Breadcrumb.__proto__ || Object.getPrototypeOf(Breadcrumb)).call(this, props));

    _this.state = {
      breadcrumbItems: []
    };
    _this.goBack = _this.goBack.bind(_this);
    return _this;
  }

  (0, _createClass3['default'])(Breadcrumb, [{
    key: 'componentWillMount',
    value: function componentWillMount() {
      var path = this.props.match.path;
      this._createBreadcrumbItems(path);
    }
  }, {
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      var path = nextProps.match.path;
      this._createBreadcrumbItems(path);
    }
  }, {
    key: '_resolvePath',
    value: function _resolvePath(path, resolveRoutes) {
      var route = this.props.routes.find(function (route) {
        return route.path === path;
      });
      var parentPath = route.parentPath;
      resolveRoutes.unshift(route);
      if (parentPath) {
        return this._resolvePath(parentPath, resolveRoutes);
      }
      return resolveRoutes;
    }
  }, {
    key: '_createBreadcrumbItems',
    value: function _createBreadcrumbItems(path) {
      var _this2 = this;

      var resolveRoutes = [];
      resolveRoutes = this._resolvePath(path, resolveRoutes);
      var breadcrumbItems = resolveRoutes.map(function (resolveRoute, index, routes) {
        return _this2._createBreadcrumbItem(resolveRoute, index, routes);
      });
      this.setState({
        breadcrumbItems: breadcrumbItems
      });
    }
  }, {
    key: '_replacePath',
    value: function _replacePath(path, url) {
      // const startPosition = path.indexOf(':')
      // const str = url.slice(startPosition + 1)
      // const endPosition = str.indexOf('/') + startPosition;
      var pathArr = path.split('/');
      var urlArr = url.split('/');
      var newPath = pathArr.map(function (pathStr, index) {
        return urlArr[index];
      }).join('/');
      return newPath;
    }
  }, {
    key: '_createBreadcrumbItem',
    value: function _createBreadcrumbItem(route, index, routes) {
      var breadcrumbName = route.breadcrumbName;
      if (!breadcrumbName) {
        breadcrumbName = '11';
        var params = this.props.match.params;
        for (var i in params) {
          if (params[i]) {
            breadcrumbName = params[i];
          }
        }
      }
      if (/:/.test(route.path)) {
        var path = this._replacePath(route.path, this.props.match.url);
        return _react2['default'].createElement(
          _breadcrumb2['default'].Item,
          {
            key: route.path,
            className: 'breadcrumb-placeholder'
          },
          _react2['default'].createElement(
            _reactRouterDom.Link,
            { to: path },
            breadcrumbName
          )
        );
      }
      return _react2['default'].createElement(
        _breadcrumb2['default'].Item,
        { key: route.path },
        _react2['default'].createElement(
          _reactRouterDom.Link,
          { to: route.path },
          breadcrumbName
        )
      );
    }
  }, {
    key: 'goBack',
    value: function goBack() {
      this.props.match.history.go(-1);
    }
  }, {
    key: 'render',
    value: function render() {
      return _react2['default'].createElement(
        _breadcrumb2['default'],
        { style: { height: '64px', lineHeight: '64px' } },
        this.state.breadcrumbItems
      );
    }
  }]);
  return Breadcrumb;
}(_react.Component);

exports['default'] = Breadcrumb;
module.exports = exports['default'];