UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

971 lines (799 loc) 29.7 kB
"use strict"; var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"]; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"]; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; exports.getContainer = getContainer; exports.open = open; var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator")); var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator")); var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty")); var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray")); var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2")); var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray")); var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck")); var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass")); var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized")); var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits")); var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper")); var _tslib = require("tslib"); var _react = _interopRequireWildcard(require("react")); var _reactDom = require("react-dom"); var _mobx = require("mobx"); var _mobxReact = require("mobx-react"); var _classnames = _interopRequireDefault(require("classnames")); var _isPromise = _interopRequireDefault(require("is-promise")); var _findLast = _interopRequireDefault(require("lodash/findLast")); var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex")); var _noop = _interopRequireDefault(require("lodash/noop")); var _ConfigContext = _interopRequireDefault(require("../../../lib/config-provider/ConfigContext")); var _measureScrollbar = _interopRequireDefault(require("../../../lib/_util/measureScrollbar")); var _UnitConvertor = require("../../../lib/_util/UnitConvertor"); var _warning = _interopRequireDefault(require("../../../lib/_util/warning")); var _utils = require("../../../lib/configure/utils"); var _modalManager = _interopRequireDefault(require("../modal-manager")); var _Modal = _interopRequireDefault(require("../modal/Modal")); var _animate = _interopRequireDefault(require("../animate")); var _Mask = _interopRequireDefault(require("./Mask")); var _EventManager = require("../_util/EventManager"); var _utils2 = require("../modal/utils"); var _DocumentUtils = require("../_util/DocumentUtils"); var containerInstances = _modalManager["default"].containerInstances; function getArrayIndex(array, index) { if (array.length > index) { return array[index]; } return 0; } function getRoot() { var root = _modalManager["default"].root; if (typeof window !== 'undefined') { var doc = (0, _DocumentUtils.getDocument)(window); if (root && root.ownerDocument === doc) { if (!root.parentNode) { doc.body.appendChild(root); } } else { root = doc.createElement('div'); root.className = "".concat((0, _utils.getProPrefixCls)(_utils2.suffixCls), "-container"); doc.body.appendChild(root); _modalManager["default"].root = root; } } if (root) { return root; } return null; } /** * 判断body是否有滚动条 * * @returns {boolean} */ function hasScrollBar(body) { var scrollHeight = body.scrollHeight, clientHeight = body.clientHeight; return scrollHeight > clientHeight; } function hideBodyScrollBar(container) { if (!_modalManager["default"].containerStyles.has(container)) { var style = container.style; _modalManager["default"].containerStyles.set(container, { overflow: style.overflow, paddingRight: style.paddingRight, position: style.position }); style.overflow = 'hidden'; if (container.tagName.toLowerCase() === 'body') { if (hasScrollBar(container)) { style.paddingRight = (0, _UnitConvertor.pxToRem)((0, _measureScrollbar["default"])(), true) || ''; } } else { var ownerDocument = container.ownerDocument; if (ownerDocument) { var defaultView = ownerDocument.defaultView; if (defaultView) { var _defaultView$getCompu = defaultView.getComputedStyle(container), position = _defaultView$getCompu.position; if (position === 'static') { style.position = 'relative'; } } } } } } function showBodyScrollBar(container) { var memoStyle = _modalManager["default"].containerStyles.get(container); if (memoStyle) { var style = container.style; var overflow = memoStyle.overflow, paddingRight = memoStyle.paddingRight, position = memoStyle.position; _modalManager["default"].containerStyles["delete"](container); style.overflow = overflow; style.paddingRight = paddingRight; style.position = position; } } var ModalContainer = /*#__PURE__*/function (_Component) { (0, _inherits2["default"])(ModalContainer, _Component); var _super = (0, _createSuper2["default"])(ModalContainer); function ModalContainer(props, context) { var _this; (0, _classCallCheck2["default"])(this, ModalContainer); _this = _super.call(this, props, context); _this.state = { modals: [] }; _this.saveMount = function (mount) { if (mount) { _this.setState({ mount: mount }); } }; _this.handleAnimationEnd = function (modalKey, isEnter) { if (!isEnter) { var modals = _this.state.modals; var index = _this.findIndex(modalKey); if (index !== -1) { var _props = modals[index]; modals.splice(index, 1); if (!_props.destroyOnClose) { modals.unshift(_props); } if (_props.afterClose) { _props.afterClose(); } _this.updateModals(modals); } } }; _this.handleMaskClick = function () { var modals = _this.state.modals; var modal = (0, _findLast["default"])(modals, function (modalProps) { return Boolean(!modalProps.hidden && modalProps.mask); }); if (modal) { var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this), _context = _assertThisInitialize.context; var _modal$close = modal.close, close = _modal$close === void 0 ? _noop["default"] : _modal$close, _modal$onCancel = modal.onCancel, onCancel = _modal$onCancel === void 0 ? _noop["default"] : _modal$onCancel, _modal$maskClosable = modal.maskClosable, maskClosable = _modal$maskClosable === void 0 ? _context.getConfig('modalMaskClosable') : _modal$maskClosable; if (maskClosable) { var ret = onCancel(); var cb = function cb(result) { if (result !== false) { close(); } }; if ((0, _isPromise["default"])(ret)) { ret.then(cb); } else { cb(ret); } } } }; _this.handleModalTopChange = function (key) { var modals = _this.state.modals; if (key) { var last = (0, _findLast["default"])(modals, function (modalProps) { return !modalProps.hidden; }); if (last && last.key !== key) { var _modals$reduce = modals.reduce(function (_ref, modal) { var _ref2 = (0, _slicedToArray2["default"])(_ref, 2), left = _ref2[0], right = _ref2[1]; if (modal.key === key) { right.push(modal); } else { left.push(modal); } return [left, right]; }, [[], []]), _modals$reduce2 = (0, _slicedToArray2["default"])(_modals$reduce, 2), under = _modals$reduce2[0], top = _modals$reduce2[1]; _this.setState({ modals: under.concat(top) }); } } }; (0, _mobx.runInAction)(function () { _this.maskHidden = true; _this.active = false; _this.drawerOffsets = { 'slide-up': [], 'slide-right': [], 'slide-down': [], 'slide-left': [] }; _this.top(); _modalManager["default"].registerMousePosition(); }); return _this; } (0, _createClass2["default"])(ModalContainer, [{ key: "baseOffsets", get: function get() { var _this2 = this; var offsets = { 'slide-up': 0, 'slide-right': 0, 'slide-down': 0, 'slide-left': 0 }; containerInstances.some(function (instance) { if (instance === _this2) { return true; } var drawerOffsets = instance.drawerOffsets, active = instance.active; if (active && instance.getOffsetContainer() === _this2.getOffsetContainer()) { offsets['slide-up'] += getArrayIndex(drawerOffsets['slide-up'], 0); offsets['slide-right'] += getArrayIndex(drawerOffsets['slide-right'], 0); offsets['slide-down'] += getArrayIndex(drawerOffsets['slide-down'], 0); offsets['slide-left'] += getArrayIndex(drawerOffsets['slide-left'], 0); } return false; }); return offsets; } }, { key: "isTop", get: function get() { var _this3 = this; var is = true; containerInstances.some(function (instance) { if (instance !== _this3 && !instance.maskHidden) { is = false; return true; } if (instance === _this3) { return true; } return false; }); return is; } }, { key: "top", value: function top() { _modalManager["default"].addInstance(this); return this; } }, { key: "componentDidUpdate", value: function componentDidUpdate(prevProps) { var location = prevProps.location; var currentLocation = this.props.location; if (location && currentLocation && location.pathname !== currentLocation.pathname) { _modalManager["default"].clear(true); } } }, { key: "componentWillUnmount", value: function componentWillUnmount() { var _this$state = this.state, modals = _this$state.modals, mount = _this$state.mount; _modalManager["default"].removeInstance(this); if (!mount && modals.length) { var container = this.getContainer(); if (container) { var current = _modalManager["default"].containerInstances.find(function (instance) { return !instance.state.mount && instance.getContainer() === container; }); if (current) { current.mergeModals(modals.reduce(function (list, modal) { return modal.__deprecate__ && (!modal.hidden || !modal.destroyOnClose) ? list.concat((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, modal), {}, { transitionAppear: false })) : list; }, [])); } } } } }, { key: "updateModals", value: function updateModals(modals) { this.top(); var maskHidden = true; var active = false; var drawerOffsets = { 'slide-up': [], 'slide-right': [], 'slide-down': [], 'slide-left': [] }; modals.slice().reverse().forEach(function (_ref3) { var hidden = _ref3.hidden, drawer = _ref3.drawer, drawerOffset = _ref3.drawerOffset, drawerTransitionName = _ref3.drawerTransitionName, mask = _ref3.mask; if (!hidden) { active = true; if (mask) { maskHidden = false; } var transitionName = (0, _utils2.toUsefulDrawerTransitionName)(drawerTransitionName); if (drawer && transitionName) { var offsets = drawerOffsets[transitionName]; var offset = offsets[0] || 0; offsets.unshift(offset + (drawerOffset || 0)); } } }); this.drawerOffsets = drawerOffsets; this.maskHidden = maskHidden; // modals.every(({ hidden }) => hidden); this.active = active; this.setState({ modals: modals }); } }, { key: "mergeModals", value: function mergeModals(newModals) { var modals = this.state.modals; var map = new Map(); modals.forEach(function (modal) { if (modal.key) { map.set(modal.key, modal); } }); newModals.forEach(function (modal) { if (modal.key) { map.set(modal.key, modal); } }); this.updateModals(Array.from(map.values())); } }, { key: "findIndex", value: function findIndex(modalKey) { var modals = this.state.modals; return modals.findIndex(function (_ref4) { var key = _ref4.key; return key === modalKey; }); } }, { key: "open", value: function open(props) { var modals = this.state.modals; if (!props.key) { props.key = _modalManager["default"].getKey(); (0, _warning["default"])(!!props.destroyOnClose, "The modal which opened has no key, please provide a key or set the `destroyOnClose` as true."); } else { var index = this.findIndex(props.key); if (index !== -1) { modals.splice(index, 1); } } modals.push((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { hidden: false })); this.updateModals(modals); } }, { key: "close", value: function close(props) { var modals = this.state.modals; var target = modals.find(function (_ref5) { var key = _ref5.key; return key === props.key; }); if (target) { (0, _extends2["default"])(target, props, { hidden: true }); this.updateModals(modals); } } }, { key: "update", value: function update(props) { var originModals = this.state.modals; var modals = (0, _toConsumableArray2["default"])(originModals); if (props.key) { var index = this.findIndex(props.key); if (index !== -1) { modals[index] = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, modals[index]), props); this.updateModals(modals); } } } }, { key: "clear", value: function clear(closeByLocationChange) { var modals = this.state.modals; this.updateModals(modals.map(function (modal) { return closeByLocationChange && !modal.closeOnLocationChange ? modal : (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, modal), {}, { destroyOnClose: true, hidden: true }); })); } }, { key: "getModalWidth", value: function getModalWidth(modal) { return modal && modal.style && modal.style.width || 520; } }, { key: "getComponent", value: function getComponent(mount) { var _this4 = this; var maskHidden = this.maskHidden, isTop = this.isTop, drawerOffsets = this.drawerOffsets, baseOffsets = this.baseOffsets, getContainer = this.props.getContainer; var modals = this.state.modals; var context = this.context; var indexes = { 'slide-up': 1, 'slide-right': 1, 'slide-down': 1, 'slide-left': 1 }; var activeModalIndex = isTop ? (0, _findLastIndex["default"])(modals, function (_ref6) { var mask = _ref6.mask, hidden = _ref6.hidden; return Boolean(!hidden && mask); }) : -1; var activeModal = modals[activeModalIndex]; var maskTransition = true; var offsetContainer = this.getOffsetContainer(); var isEmbeddedContainer = offsetContainer.tagName.toLowerCase() !== 'body'; var prefixCls = context.getProPrefixCls("".concat(_utils2.suffixCls, "-container")); var items = modals.map(function (props, index) { var _props$drawerTransiti = props.drawerTransitionName, drawerTransitionName = _props$drawerTransiti === void 0 ? context.getConfig('drawerTransitionName') : _props$drawerTransiti, drawer = props.drawer, key = props.key, _props$transitionAppe = props.transitionAppear, transitionAppear = _props$transitionAppe === void 0 ? true : _props$transitionAppe, mask = props.mask; var transitionName = (0, _utils2.toUsefulDrawerTransitionName)(drawerTransitionName); var style = (0, _objectSpread2["default"])({}, props.style); if (drawer) { var i = indexes[transitionName]; indexes[transitionName] += 1; var offset = getArrayIndex(drawerOffsets[transitionName], i) + baseOffsets[transitionName]; if (offset) { switch (transitionName) { case 'slide-up': style.marginTop = offset; break; case 'slide-down': style.marginBottom = offset; break; case 'slide-left': style.marginLeft = offset; break; default: style.marginRight = offset; } } } else if (isEmbeddedContainer) { style.top = (0, _UnitConvertor.pxToRem)(offsetContainer.scrollTop + (props.autoCenter ? 0 : (0, _UnitConvertor.toPx)(style.top) || 100), true); } if (transitionAppear === false) { maskTransition = false; } var wrapperClassName = (0, _classnames["default"])(props.drawer ? "".concat(prefixCls, "-drawer") : "".concat(prefixCls, "-pristine"), (0, _defineProperty2["default"])({}, "".concat(prefixCls, "-embedded"), isEmbeddedContainer)); return /*#__PURE__*/_react["default"].createElement(_animate["default"], { key: key, component: "div", // UED 用类名判断 className: wrapperClassName, transitionAppear: transitionAppear, transitionName: drawer ? transitionName : 'zoom', hiddenProp: "hidden", onEnd: _this4.handleAnimationEnd }, /*#__PURE__*/_react["default"].createElement(_Modal["default"], (0, _extends2["default"])({ eventKey: key, mousePosition: _modalManager["default"].mousePosition }, props, { style: style, active: index === activeModalIndex || isTop && !mask && index > activeModalIndex, onTop: mask || drawer ? undefined : _this4.handleModalTopChange }))); }); var animationProps = {}; if (mount) { if (containerInstances.every(function (instance) { return !instance.active || instance.getOffsetContainer() !== offsetContainer; })) { animationProps.onEnd = function () { return showBodyScrollBar(offsetContainer); }; } else { hideBodyScrollBar(offsetContainer); } } var maskProps = {}; var style = {}; if (activeModal) { var _activeModal$maskClos = activeModal.maskClosable, maskClosable = _activeModal$maskClos === void 0 ? context.getConfig('modalMaskClosable') : _activeModal$maskClos, maskStyle = activeModal.maskStyle, maskClassName = activeModal.maskClassName; maskProps.className = maskClassName; maskProps.onMouseDown = _EventManager.stopEvent; if (maskClosable === 'dblclick') { maskProps.onDoubleClick = this.handleMaskClick; } else { maskProps.onClick = this.handleMaskClick; } (0, _extends2["default"])(style, maskStyle); if (isEmbeddedContainer) { style.position = 'absolute'; style.height = (0, _UnitConvertor.pxToRem)(offsetContainer.scrollHeight, true); } } if (this.active) { maskProps.hidden = false; if (maskHidden) { style.display = 'none'; } maskProps.style = style; this.maskStyle = style; } else { maskProps.hidden = true; maskProps.style = this.maskStyle; } return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_animate["default"], (0, _extends2["default"])({ component: "", transitionAppear: true, transitionName: maskTransition ? 'fade' : undefined, hiddenProp: "hidden" }, animationProps), /*#__PURE__*/_react["default"].createElement(_Mask["default"], (0, _extends2["default"])({}, maskProps))), items, getContainer === false && /*#__PURE__*/_react["default"].createElement("span", { ref: this.saveMount })); } }, { key: "getContainer", value: function getContainer() { var getModalContainer = this.props.getContainer; if (typeof getModalContainer === 'function') { return getModalContainer(); } if (getModalContainer) { return getModalContainer; } return undefined; } }, { key: "getOffsetContainer", value: function getOffsetContainer() { var mount = this.state.mount; if (mount) { var parentElement = mount.parentElement; if (parentElement) { return parentElement; } } var container = this.getContainer(); if (container && container !== _modalManager["default"].root) { return container; } return (0, _DocumentUtils.getDocument)(window).body; } }, { key: "render", value: function render() { var getModalContainer = this.props.getContainer; if (getModalContainer === false) { var _mount = this.state.mount; return this.getComponent(_mount); } var mount = this.getContainer(); if (mount) { return /*#__PURE__*/(0, _reactDom.createPortal)(this.getComponent(mount), mount); } return null; } }], [{ key: "contextType", get: function get() { return _ConfigContext["default"]; } }]); return ModalContainer; }(_react.Component); ModalContainer.displayName = 'ModalContainer'; ModalContainer.defaultProps = { getContainer: getRoot }; (0, _tslib.__decorate)([_mobx.observable], ModalContainer.prototype, "maskHidden", void 0); (0, _tslib.__decorate)([_mobx.observable], ModalContainer.prototype, "active", void 0); (0, _tslib.__decorate)([_mobx.observable], ModalContainer.prototype, "drawerOffsets", void 0); (0, _tslib.__decorate)([_mobx.computed], ModalContainer.prototype, "baseOffsets", null); (0, _tslib.__decorate)([_mobx.computed], ModalContainer.prototype, "isTop", null); (0, _tslib.__decorate)([_mobx.action], ModalContainer.prototype, "top", null); (0, _tslib.__decorate)([_mobx.action], ModalContainer.prototype, "updateModals", null); ModalContainer = (0, _tslib.__decorate)([_mobxReact.observer], ModalContainer); var _default = ModalContainer; exports["default"] = _default; function getContainer() { return _getContainer.apply(this, arguments); } function _getContainer() { _getContainer = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() { var length; return _regenerator["default"].wrap(function _callee5$(_context6) { while (1) { switch (_context6.prev = _context6.next) { case 0: length = containerInstances.length; if (!length) { _context6.next = 3; break; } return _context6.abrupt("return", containerInstances.find(function (instance) { return instance.getOffsetContainer().tagName.toLowerCase() === 'body'; }) || containerInstances[0]); case 3: _context6.next = 5; return new Promise(function (resolve) { (0, _reactDom.render)( /*#__PURE__*/_react["default"].createElement(ModalContainer, null), getRoot(), resolve); }); case 5: return _context6.abrupt("return", getContainer()); case 6: case "end": return _context6.stop(); } } }, _callee5); })); return _getContainer.apply(this, arguments); } function open(props) { var containerPromise = getContainer(); function getCurrentContainer() { return _getCurrentContainer.apply(this, arguments); } function _getCurrentContainer() { _getCurrentContainer = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() { var container; return _regenerator["default"].wrap(function _callee$(_context2) { while (1) { switch (_context2.prev = _context2.next) { case 0: _context2.next = 2; return containerPromise; case 2: container = _context2.sent; return _context2.abrupt("return", containerInstances.includes(container) ? container : getContainer()); case 4: case "end": return _context2.stop(); } } }, _callee); })); return _getCurrentContainer.apply(this, arguments); } function close(_x) { return _close.apply(this, arguments); } function _close() { _close = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(destroy) { var _props3, _props3$onClose, onClose, $container; return _regenerator["default"].wrap(function _callee2$(_context3) { while (1) { switch (_context3.prev = _context3.next) { case 0: _props3 = props, _props3$onClose = _props3.onClose, onClose = _props3$onClose === void 0 ? _noop["default"] : _props3$onClose; _context3.next = 3; return onClose(); case 3: _context3.t0 = _context3.sent; if (!(_context3.t0 !== false)) { _context3.next = 9; break; } _context3.next = 7; return getCurrentContainer(); case 7: $container = _context3.sent; if (destroy) { $container.close((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { destroyOnClose: true })); } else { $container.close(props); } case 9: case "end": return _context3.stop(); } } }, _callee2); })); return _close.apply(this, arguments); } function update(_x2) { return _update.apply(this, arguments); } function _update() { _update = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(newProps) { var $container; return _regenerator["default"].wrap(function _callee3$(_context4) { while (1) { switch (_context4.prev = _context4.next) { case 0: _context4.next = 2; return getCurrentContainer(); case 2: $container = _context4.sent; $container.update((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, newProps), {}, { key: props.key })); case 4: case "end": return _context4.stop(); } } }, _callee3); })); return _update.apply(this, arguments); } props = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({ __deprecate__: true, close: close, update: update }, _Modal["default"].defaultProps), props); containerPromise.then(function ($container) { var _props2 = props, _props2$autoCenter = _props2.autoCenter, autoCenter = _props2$autoCenter === void 0 ? $container.context.getConfig('modalAutoCenter') : _props2$autoCenter; props = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), {}, { autoCenter: autoCenter }); $container.open(props); }); function show(_x3) { return _show.apply(this, arguments); } function _show() { _show = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(newProps) { var $container; return _regenerator["default"].wrap(function _callee4$(_context5) { while (1) { switch (_context5.prev = _context5.next) { case 0: _context5.next = 2; return getCurrentContainer(); case 2: $container = _context5.sent; $container.open((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), newProps)); case 4: case "end": return _context5.stop(); } } }, _callee4); })); return _show.apply(this, arguments); } return { close: close, open: show, update: update }; } //# sourceMappingURL=ModalContainer.js.map