@ucloud-pccl/react-components
Version:
UCloud pccl react components
190 lines (189 loc) • 8.74 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactTransitionGroup = require("react-transition-group");
var _ContainerContext = require("../../components/Popover/ContainerContext");
var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
var _style = require("./style");
var _this3 = void 0;
var _excluded = ["children", "visible", "mask", "maskClosable", "onClose", "destroyOnClose", "closeHandler"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var Placement = ['left', 'right', 'top', 'bottom'];
var CloseHandler = /*#__PURE__*/function (_PureComponent) {
function CloseHandler() {
(0, _classCallCheck2.default)(this, CloseHandler);
return _callSuper(this, CloseHandler, arguments);
}
(0, _inherits2.default)(CloseHandler, _PureComponent);
return (0, _createClass2.default)(CloseHandler, [{
key: "render",
value: function render() {
var _this$props = this.props,
visible = _this$props.visible,
onClose = _this$props.onClose;
return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
in: visible,
unmountOnExit: false,
classNames: "uc-fe-animation-fade",
timeout: 100
}, /*#__PURE__*/_react.default.createElement(_style.CloseHandlerWrapper, {
onClick: onClose
}, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
type: "cross"
})));
}
}]);
}(_react.PureComponent);
CloseHandler.propTypes = {
visible: _propTypes.default.bool,
onClose: _propTypes.default.func.isRequired
};
var Drawer = /*#__PURE__*/function (_Component) {
function Drawer() {
var _this2 = this;
var _this;
(0, _classCallCheck2.default)(this, Drawer);
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _callSuper(this, Drawer, [].concat(args));
_this.state = {
visible: _this.props.visible
};
_this.onMaskClick = function () {
(0, _newArrowCheck2.default)(this, _this2);
var _this$props2 = _this.props,
onClose = _this$props2.onClose,
maskClosable = _this$props2.maskClosable;
maskClosable && onClose();
}.bind(this);
_this.afterVisibleChange = function (visible) {
(0, _newArrowCheck2.default)(this, _this2);
_this.setState({
visible: visible
});
}.bind(this);
_this.getDestroy = function () {
(0, _newArrowCheck2.default)(this, _this2);
var _this$props3 = _this.props,
destroyOnClose = _this$props3.destroyOnClose,
visible = _this$props3.visible;
var visibleState = _this.state.visible;
return destroyOnClose && !visible && !visibleState;
}.bind(this);
_this.getShow = function () {
(0, _newArrowCheck2.default)(this, _this2);
var visible = _this.props.visible;
var visibleState = _this.state.visible;
return visible || visibleState;
}.bind(this);
_this.renderCloseHandler = function (_ref) {
(0, _newArrowCheck2.default)(this, _this2);
var closeHandler = _ref.closeHandler,
onClose = _ref.onClose,
show = _ref.show,
visible = _ref.visible;
if (!show) return null;
return closeHandler === undefined ? /*#__PURE__*/_react.default.createElement(CloseHandler, {
visible: visible,
onClose: onClose
}) : closeHandler;
}.bind(this);
return _this;
}
(0, _inherits2.default)(Drawer, _Component);
return (0, _createClass2.default)(Drawer, [{
key: "render",
value: function render() {
// eslint-disable-next-line no-unused-vars
var _this$props4 = this.props,
children = _this$props4.children,
visible = _this$props4.visible,
mask = _this$props4.mask,
maskClosable = _this$props4.maskClosable,
onClose = _this$props4.onClose,
destroyOnClose = _this$props4.destroyOnClose,
closeHandler = _this$props4.closeHandler,
rest = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
var destroy = this.getDestroy();
var show = this.getShow();
return !destroy && /*#__PURE__*/_react.default.createElement(_ContainerContext.Provider, {
value: {}
}, /*#__PURE__*/_react.default.createElement(_style.DrawerWrap, (0, _extends2.default)({}, rest, {
open: visible,
onMaskClick: this.onMaskClick,
showMask: mask,
handler: false,
afterVisibleChange: this.afterVisibleChange,
show: show,
closeHandler: this.renderCloseHandler({
closeHandler: closeHandler,
onClose: onClose,
show: show,
visible: visible
})
}), children));
}
}]);
}(_react.Component);
Drawer.propTypes = {
/** @ignore */
children: _propTypes.default.node.isRequired,
/** 是否显示，controlled */
visible: _propTypes.default.bool,
/** 是否有遮罩 */
mask: _propTypes.default.bool,
/** 是否可以点击遮罩关闭 */
maskClosable: _propTypes.default.bool,
/** 是否可以esc关闭 */
keyboard: _propTypes.default.bool,
/** 点击关闭按钮、遮罩进行关闭时的回调 */
onClose: _propTypes.default.func,
/** 关闭后是否自动销毁 */
destroyOnClose: _propTypes.default.bool,
/** 弹出位置 */
placement: _propTypes.default.oneOf(Placement),
/** 抽屉的宽度，left right可用 */
width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** 抽屉的高度，top bottom可用 */
height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
/** 设置抽屉容器 */
getContainer: _propTypes.default.func,
/** 弹出层的z-index */
zIndex: _propTypes.default.number,
/** 传入 false/null 隐藏关闭控件，或自定义控件 */
closeHandler: _propTypes.default.oneOfType([_propTypes.default.oneOf([null, false]), _propTypes.default.node]),
/** @ignore */
level: _propTypes.default.any
};
Drawer.defaultProps = {
visible: false,
mask: true,
maskClosable: true,
keyboard: false,
onClose: function onClose() {
(0, _newArrowCheck2.default)(this, _this3);
}.bind(void 0),
level: null,
placement: 'right',
zIndex: 1010
};
Drawer.Placement = Placement;
var _default = exports.default = Drawer;