antui-mobile/lib/components/pages/System.js

mobile ui for antd

'use strict';

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

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _layout = require('../layout');

var _layout2 = _interopRequireDefault(_layout);

var _toast = require('antd-mobile/lib/toast');

var _toast2 = _interopRequireDefault(_toast);

require('antd-mobile/lib/toast/style/css.web');

var _pages = require('./pages');

var _pages2 = _interopRequireDefault(_pages);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _icon = require('../icon');

var _icon2 = _interopRequireDefault(_icon);

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

var leftContent = function leftContent(prop) {
  return _react2.default.createElement(
    'div',
    { className: 'system_navbar-left', onClick: prop.prevPopup },
    _react2.default.createElement(
      'span',
      { className: 'system_navbar-left-icon' },
      _react2.default.createElement(_icon2.default, { svg: 'antd', type: 'left' })
    ),
    _react2.default.createElement(
      'span',
      { className: 'system_navbar-left-content' },
      '\u8FD4\u56DE'
    )
  );
};

var leftContentAndClose = function leftContentAndClose(prop) {
  return _react2.default.createElement(
    'div',
    { className: 'system_navbar-left' },
    _react2.default.createElement(
      'div',
      { className: 'navbar-back', onClick: prop.prevPopup },
      _react2.default.createElement(
        'span',
        { className: 'system_navbar-left-icon' },
        _react2.default.createElement(_icon2.default, { svg: 'antd', type: 'left' })
      ),
      _react2.default.createElement(
        'span',
        { className: 'system_navbar-left-content' },
        '\u8FD4\u56DE'
      )
    ),
    _react2.default.createElement(
      'div',
      { className: 'navbar-close', onClick: prop.closeAll },
      _react2.default.createElement(
        'span',
        { className: 'system_navbar-left-content' },
        '\u5173\u95ED'
      )
    )
  );
};

var System = function (_Component) {
  (0, _inherits3.default)(System, _Component);

  function System() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, System);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = System.__proto__ || (0, _getPrototypeOf2.default)(System)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
      page: {}, // 页面
      current: null, // 当前显示哪个页
      _uids: [],
      transition: "rfl",
      hide: true
    }, _this.popup = function (options) {
      var uid = options.uid,
          navbar = options.navbar,
          force = options.force,
          otherProps = (0, _objectWithoutProperties3.default)(options, ['uid', 'navbar', 'force']);
      var _this$state = _this.state,
          page = _this$state.page,
          _uids = _this$state._uids;

      var _navbar = (0, _extends3.default)({
        leftContent: _uids.length > 1 ? leftContentAndClose({
          prevPopup: _this.prevPopup,
          closeAll: _this.closeAll
        }) : leftContent({
          prevPopup: _this.prevPopup
        }),
        iconName: null
      }, navbar);
      if (!uid || !options) throw new Error("uid & options 不能为空");

      if (page[uid]) {
        if (force) {
          // 替换已有
          page[uid] = (0, _extends3.default)({ navbar: _navbar }, otherProps);
          _uids = page._uids.filter(function (_uid) {
            return _uid !== uid;
          });
          _uids.push(uid);
        } else {
          _toast2.default.fail("uid: " + uid + "已存在");
          return;
        }
      } else {
        page[uid] = (0, _extends3.default)({ navbar: _navbar }, otherProps);
        _uids.push(uid);
      }

      _this.setState({
        page: page,
        current: uid,
        _uids: _uids,
        transition: "rfl",
        hide: false
      });
    }, _this.prevPopup = function () {
      var _this$state2 = _this.state,
          current = _this$state2.current,
          _uids = _this$state2._uids,
          page = _this$state2.page;

      if (current) {
        delete page[current];
        _uids.pop();
        _this.setState({
          page: page,
          current: _uids.slice(-1)[0],
          _uids: _uids,
          transition: "rfr"
        });

        if (_uids.length === 0) {
          setTimeout(function (_) {
            return _this.setState({ hide: true });
          }, 400);
        }
      }
    }, _this.close = function (uid) {
      var _this$state3 = _this.state,
          page = _this$state3.page,
          current = _this$state3.current,
          _uids = _this$state3._uids;

      if (page[uid]) {
        delete page[uid];
        _uids = _uids.filter(function (_uid) {
          return _uid !== uid;
        });

        if (_uids.length > 0) {
          current = current === uid ? _uids[_uids.length - 1] : current;
        } else {
          current = null;
        }

        _this.setState({
          page: page,
          current: current,
          _uids: _uids,
          transition: "rfr"
        });

        if (_uids.length === 0) {
          setTimeout(function (_) {
            return _this.setState({ hide: true });
          }, 400);
        }
      }
    }, _this.closeAll = function () {
      _this.setState({
        page: {},
        current: null,
        _uids: [],
        transition: "rfr"
      });

      setTimeout(function (_) {
        return _this.setState({ hide: true });
      }, 400);
    }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(System, [{
    key: 'render',
    value: function render() {
      var _state = this.state,
          page = _state.page,
          transition = _state.transition,
          hide = _state.hide;


      var pageList = (0, _keys2.default)(page);
      var classes = (0, _classnames2.default)(this.props.prefixCls, {
        hide: hide
      });

      return _react2.default.createElement(
        _layout2.default.Transition,
        {
          transition: transition,
          className: classes
        },
        pageList.map(function (uid, i) {
          return _react2.default.createElement(_pages2.default, (0, _extends3.default)({
            key: "page-" + uid
          }, page[uid]));
        })
      );
    }
  }]);
  return System;
}(_react.Component);

System.propTypes = {
  prefixCls: _react.PropTypes.string
};
System.defaultProps = {
  prefixCls: "antui-pages-system"
};
exports.default = System;
module.exports = exports['default'];