tntd/lib/drawer/drawer.js

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Drawer = void 0;
var _configProvider = require("../config-provider");
var _drawer = _interopRequireDefault(require("antd/lib/drawer"));
var _LocaleReceiver = _interopRequireDefault(require("antd/lib/locale-provider/LocaleReceiver"));
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../utils");
var _react = _interopRequireWildcard(require("react"));
var _button = require("../button");
require("../icon");
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 _interopRequireDefault(e) {
  return e && e.__esModule ? e : {
    "default": e
  };
}
function _typeof(o) {
  "@babel/helpers - typeof";

  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
    return typeof o;
  } : function (o) {
    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
  }, _typeof(o);
}
function _defineProperty(e, r, t) {
  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
    value: t,
    enumerable: !0,
    configurable: !0,
    writable: !0
  }) : e[r] = t, e;
}
function _toPropertyKey(t) {
  var i = _toPrimitive(t, "string");
  return "symbol" == _typeof(i) ? i : i + "";
}
function _toPrimitive(t, r) {
  if ("object" != _typeof(t) || !t) return t;
  var e = t[Symbol.toPrimitive];
  if (void 0 !== e) {
    var i = e.call(t, r || "default");
    if ("object" != _typeof(i)) return i;
    throw new TypeError("@@toPrimitive must return a primitive value.");
  }
  return ("string" === r ? String : Number)(t);
}
var __rest = void 0 && (void 0).__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
var DefaultFooter = function DefaultFooter(_ref) {
  var locale = _ref.locale,
    onCancel = _ref.onCancel,
    onOk = _ref.onOk,
    okText = _ref.okText,
    okType = _ref.okType,
    cancelText = _ref.cancelText,
    confirmLoading = _ref.confirmLoading,
    okButtonProps = _ref.okButtonProps,
    cancelButtonProps = _ref.cancelButtonProps,
    cancelType = _ref.cancelType;
  return _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_button.Button, Object.assign({
    onClick: onCancel,
    type: cancelType || 'tertiary'
  }, cancelButtonProps), cancelText || (locale === null || locale === void 0 ? void 0 : locale.cancelText)), _react["default"].createElement(_button.Button, Object.assign({
    onClick: onOk,
    type: okType || 'primary',
    loading: confirmLoading
  }, okButtonProps), okText || (locale === null || locale === void 0 ? void 0 : locale.okText)));
};
var Drawer = exports.Drawer = function Drawer(_a) {
  var _a$closable = _a.closable,
    closable = _a$closable === void 0 ? true : _a$closable,
    className = _a.className,
    footer = _a.footer,
    showFooter = _a.showFooter,
    onClose = _a.onClose,
    afterClose = _a.afterClose,
    onSubmit = _a.onSubmit,
    onCancel = _a.onCancel,
    onOk = _a.onOk,
    _a$okText = _a.okText,
    okText = _a$okText === void 0 ? '' : _a$okText,
    _a$cancelText = _a.cancelText,
    cancelText = _a$cancelText === void 0 ? '' : _a$cancelText,
    locale = _a.locale,
    _a$okType = _a.okType,
    okType = _a$okType === void 0 ? 'primary' : _a$okType,
    _a$cancelType = _a.cancelType,
    cancelType = _a$cancelType === void 0 ? 'tertiary' : _a$cancelType,
    _a$confirmLoading = _a.confirmLoading,
    confirmLoading = _a$confirmLoading === void 0 ? false : _a$confirmLoading,
    _a$okButtonProps = _a.okButtonProps,
    okButtonProps = _a$okButtonProps === void 0 ? {} : _a$okButtonProps,
    _a$cancelButtonProps = _a.cancelButtonProps,
    cancelButtonProps = _a$cancelButtonProps === void 0 ? {} : _a$cancelButtonProps,
    _a$clickOnBlankToClos = _a.clickOnBlankToClose,
    clickOnBlankToClose = _a$clickOnBlankToClos === void 0 ? false : _a$clickOnBlankToClos,
    upperCaseIgnore = _a.upperCaseIgnore,
    unUpperConverted = _a.unUpperConverted,
    title = _a.title,
    rest = __rest(_a, ["closable", "className", "footer", "showFooter", "onClose", "afterClose", "onSubmit", "onCancel", "onOk", "okText", "cancelText", "locale", "okType", "cancelType", "confirmLoading", "okButtonProps", "cancelButtonProps", "clickOnBlankToClose", "upperCaseIgnore", "unUpperConverted", "title"]);
  var drawerDom = _react["default"].useRef(null);
  var _onCancel = (0, _react.useCallback)(function () {
    if (onCancel) {
      onCancel();
    } else if (onClose) {
      onClose();
    }
    if (afterClose) {
      afterClose();
    }
  }, [onCancel, onClose, afterClose]);
  var _onOk = onOk || onSubmit;
  (0, _react.useEffect)(function () {
    if (clickOnBlankToClose) {
      var handleOutsideClick = function handleOutsideClick(event) {
        var drawer = drawerDom.current;
        var targetElement = event.target;
        var isInDrawer = false;
        if (drawer && targetElement) {
          isInDrawer = drawer.contains(targetElement) || targetElement === drawer;
        }
        drawerDom.current = null;
        if (rest.visible && !isInDrawer && _onCancel) {
          _onCancel();
        }
      };
      document.removeEventListener('click', handleOutsideClick);
      document.addEventListener('click', handleOutsideClick);
      return function () {
        document.removeEventListener('click', handleOutsideClick);
      };
    }
  }, [rest.visible, clickOnBlankToClose, _onCancel]);
  return _react["default"].createElement(_configProvider.ConfigConsumer, null, function (_ref2) {
    var getPrefixCls = _ref2.getPrefixCls;
    var prefixCls = getPrefixCls('drawer');
    return _react["default"].createElement(_LocaleReceiver["default"], {
      componentName: "Drawer",
      defaultLocale: locale
    }, function (locale) {
      return _react["default"].createElement("div", {
        onClick: function onClick(event) {
          drawerDom.current = event.target;
        }
      }, _react["default"].createElement(_drawer["default"], Object.assign({
        className: (0, _classnames["default"])(prefixCls, 'tnt-drawer', className, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-contain-closable"), closable !== false), "".concat(prefixCls, "-no-header"), closable === false && !title), "".concat(prefixCls, "-footer"), showFooter || footer)),
        closable: closable,
        onClose: _onCancel,
        width: 480
      }, rest, {
        title: !unUpperConverted ? (0, _utils.doUpperTitle)(title, upperCaseIgnore) : title
      }), _react["default"].createElement(_react["default"].Fragment, null, rest.children, (showFooter || footer) && _react["default"].createElement("div", {
        className: "".concat(prefixCls, "-footer-style")
      }, footer || _react["default"].createElement(DefaultFooter, {
        confirmLoading: confirmLoading,
        okButtonProps: okButtonProps,
        cancelButtonProps: cancelButtonProps,
        okType: okType,
        locale: locale,
        okText: okText,
        cancelType: cancelType,
        cancelText: cancelText,
        onOk: _onOk,
        onCancel: _onCancel
      })))));
    });
  });
};