@alifd/meet-react/lib/dialog/dialog.js

Fusion Mobile React UI System Component

"use strict";

exports.__esModule = true;
exports.default = void 0;
var _tslib = require("tslib");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _meetReactComponentOne = require("@alifd/meet-react-component-one");
var _vibrate = require("@uni/vibrate");
var _view = _interopRequireDefault(require("../view"));
var _icon = _interopRequireDefault(require("../icon"));
var _safeArea = _interopRequireDefault(require("../safe-area"));
var _button = _interopRequireDefault(require("../button"));
var _modal = _interopRequireDefault(require("../modal"));
var _locale = require("../locale");
var _zhCn = _interopRequireDefault(require("../locale/lang/zh-cn"));
var _utils = require("../utils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 && Object.prototype.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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var FooterWrapper = function (wrapperProps) {
  var centered = wrapperProps.centered,
    children = wrapperProps.children,
    others = (0, _tslib.__rest)(wrapperProps, ["centered", "children"]);
  if (centered) {
    return /*#__PURE__*/(0, _react.createElement)(_view.default, others, children);
  }
  return /*#__PURE__*/(0, _react.createElement)(_react.Fragment, null, children);
};
var MESSAGE_TYPE = {
  alert: 'warning',
  confirm: 'help',
  success: 'success',
  error: 'error',
  warning: 'warning',
  notice: 'prompt',
  help: 'help'
};
var Dialog = function (props, ref) {
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    _props$visible = props.visible,
    visible = _props$visible === void 0 ? false : _props$visible,
    _props$type = props.type,
    type = _props$type === void 0 ? 'normal' : _props$type,
    _props$platform = props.platform,
    platform = _props$platform === void 0 ? 'ios' : _props$platform,
    titleProp = props.title,
    content = props.content,
    contentClassName = props.contentClassName,
    closeModeProp = props.closeMode,
    footerActionsProp = props.footerActions,
    _props$vibrative = props.vibrative,
    vibrative = _props$vibrative === void 0 ? false : _props$vibrative,
    _props$footer = props.footer,
    footer = _props$footer === void 0 ? true : _props$footer,
    _props$centered = props.centered,
    centered = _props$centered === void 0 ? false : _props$centered,
    _props$okProps = props.okProps,
    okProps = _props$okProps === void 0 ? {
      text: ''
    } : _props$okProps,
    _props$cancelProps = props.cancelProps,
    cancelProps = _props$cancelProps === void 0 ? {
      text: ''
    } : _props$cancelProps,
    className = props.className,
    showIconProp = props.showIcon,
    children = props.children,
    _props$onOk = props.onOk,
    onOk = _props$onOk === void 0 ? function () {} : _props$onOk,
    _props$onCancel = props.onCancel,
    onCancel = _props$onCancel === void 0 ? function () {} : _props$onCancel,
    _props$onClose = props.onClose,
    onClose = _props$onClose === void 0 ? function () {} : _props$onClose,
    others = (0, _tslib.__rest)(props, ["prefix", "visible", "type", "platform", "title", "content", "contentClassName", "closeMode", "footerActions", "vibrative", "footer", "centered", "okProps", "cancelProps", "className", "showIcon", "children", "onOk", "onCancel", "onClose"]);
  var showIcon = showIconProp === true ? true : !centered;
  var closeMode = (0, _react.useMemo)(function () {
    if (closeModeProp) {
      return closeModeProp;
    }
    return centered ? ['ok', 'mask', 'cancel'] : ['close', 'ok', 'mask', 'cancel'];
  }, [closeModeProp, centered]);
  var footerActions = (0, _react.useMemo)(function () {
    if (footerActionsProp) {
      return footerActionsProp;
    }
    if (['alert', 'success', 'error', 'notice', 'warning', 'help'].indexOf(type) > -1) {
      return ['ok'];
    }
    return ['cancel', 'ok'];
  }, [footerActionsProp, type]);
  var iconName = (0, _react.useMemo)(function () {
    return MESSAGE_TYPE[type] || '';
  }, [type]);
  var locale = (0, _locale.useLocale)('Dialog', others, _zhCn.default.Dialog);
  var clsPrefix = prefix + "dialog";
  var closable = closeMode.includes('close');
  var clses = (0, _react.useMemo)(function () {
    var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6, _classNames7, _classNames8, _classNames9, _classNames10;
    return {
      dialog: (0, _classnames.default)("" + clsPrefix, className, (_classNames = {}, _classNames[clsPrefix + "--centered"] = centered, _classNames)),
      header: (0, _classnames.default)(clsPrefix + "-header", (_classNames2 = {}, _classNames2[clsPrefix + "-header--centered"] = centered, _classNames2)),
      closeWrapper: (0, _classnames.default)(clsPrefix + "-close-wrapper", (_classNames3 = {}, _classNames3[clsPrefix + "-close-wrapper--content"] = !titleProp && closable, _classNames3[clsPrefix + "-close-wrapper--centered"] = centered && closable, _classNames3)),
      close: (0, _classnames.default)(clsPrefix + "-close", (_classNames4 = {}, _classNames4[clsPrefix + "-close--centered"] = centered, _classNames4)),
      container: (0, _classnames.default)(clsPrefix + "-container", (_classNames5 = {}, _classNames5[clsPrefix + "-container--centered " + clsPrefix + "-container--" + platform] = centered, _classNames5)),
      icon: (0, _classnames.default)((_classNames6 = {}, _classNames6[clsPrefix + "-icon"] = true, _classNames6[clsPrefix + "-icon--" + type] = true, _classNames6[clsPrefix + "-icon--centered"] = centered, _classNames6)),
      title: (0, _classnames.default)(clsPrefix + "-title", (_classNames7 = {}, _classNames7[clsPrefix + "-title--centered"] = centered, _classNames7[clsPrefix + "-title--" + platform] = platform && centered, _classNames7[clsPrefix + "-title--fullwidth"] = titleProp && closable, _classNames7)),
      content: (0, _classnames.default)(contentClassName, (_classNames8 = {}, _classNames8[clsPrefix + "-content"] = !centered, _classNames8[clsPrefix + "-content--centered " + clsPrefix + "-content--centered-" + platform] = centered, _classNames8)),
      innerContent: (0, _classnames.default)(clsPrefix + "-inner-content", (_classNames9 = {}, _classNames9[clsPrefix + "-inner-content--fullwidth"] = !closable || closable && titleProp, _classNames9[clsPrefix + "-inner-content--centered"] = centered, _classNames9)),
      footer: (0, _classnames.default)((_classNames10 = {}, _classNames10[clsPrefix + "-footer"] = !centered, _classNames10[clsPrefix + "-footer--centered " + clsPrefix + "-footer--centered-" + platform] = centered, _classNames10))
    };
  }, [clsPrefix, className, centered, closable, titleProp, platform]);
  var okBtnText = okProps.text || locale.ok;
  var cancelText = cancelProps.text || locale.cancel;
  var handleIconClose = (0, _react.useCallback)(function (e) {
    if (closable) {
      onClose('close', e);
    }
  }, [closable, onClose]);
  (0, _react.useEffect)(function () {
    if (visible === true && vibrative === true) {
      (0, _vibrate.vibrateLong)({}).then(function () {});
    }
  }, [visible]);
  var titleEl = function renderTitle() {
    var title = titleProp || null;
    if (title) {
      title = (0, _utils.isString)(title) ? /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
        className: clses.title,
        numberOfLines: 3
      }, title) : /*#__PURE__*/(0, _react.createElement)(_view.default, {
        className: clses.title
      }, title);
    }
    return title;
  }();
  return /*#__PURE__*/(0, _react.createElement)(_modal.default, _extends({}, others, {
    ref: ref,
    visible: visible,
    maskClosable: closeMode.includes('mask'),
    placement: centered === true ? 'center' : 'bottom',
    containerClassName: clses.dialog,
    onClose: onClose
  }), /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.container
  }, showIcon && centered && iconName ? /*#__PURE__*/(0, _react.createElement)(_icon.default, {
    name: iconName,
    className: clses.icon,
    size: "xxl"
  }) : null, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clsPrefix + "-main"
  }, titleEl || !centered && iconName || closable && titleProp ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.header
  }, showIcon && !centered && iconName ? /*#__PURE__*/(0, _react.createElement)(_icon.default, {
    name: iconName,
    className: clses.icon,
    size: "s"
  }) : null, titleEl, closable && titleProp ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.closeWrapper
  }, /*#__PURE__*/(0, _react.createElement)(_icon.default, {
    name: "close",
    className: clses.close,
    size: "xxs",
    onClick: handleIconClose
  })) : null) : null, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.content
  }, /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.innerContent
  }, function renderInnerContent() {
    var innerContent = content;
    if ((0, _utils.isString)(content)) {
      innerContent = /*#__PURE__*/(0, _react.createElement)(_meetReactComponentOne.Text, {
        className: clsPrefix + "-content-text"
      }, content);
    } else if (children) {
      innerContent = children;
    }
    return innerContent;
  }()), !titleProp && closable ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
    className: clses.closeWrapper
  }, /*#__PURE__*/(0, _react.createElement)(_icon.default, {
    name: "close",
    className: clses.close,
    size: "xxs",
    onClick: handleIconClose
  })) : null))), function renderFooter() {
    var wrapperClassName = (0, _classnames.default)(clsPrefix + "-btn-col", clsPrefix + "-btn-col--" + platform);
    if (footer) {
      if (!(0, _utils.isBoolean)(footer)) {
        return /*#__PURE__*/(0, _react.createElement)(_view.default, {
          className: clses.footer
        }, footer);
      } else if ((0, _utils.isValidArray)(footerActions)) {
        return /*#__PURE__*/(0, _react.createElement)(_view.default, {
          className: clses.footer
        }, footerActions.map(function (actionType, index) {
          var _classNames11;
          var buttonProps = okProps;
          if (typeof actionType === 'object') {
            buttonProps = actionType;
          } else if (actionType === 'cancel') {
            buttonProps = cancelProps;
          }
          var _buttonProps = buttonProps,
            text = _buttonProps.text,
            btnClassNameProp = _buttonProps.className,
            model = _buttonProps.model,
            _onClick = _buttonProps.onClick,
            restProps = (0, _tslib.__rest)(buttonProps, ["text", "className", "model", "onClick"]);
          var isCancel = actionType === 'cancel';
          var btnClassName = (0, _classnames.default)(btnClassNameProp, (_classNames11 = {}, _classNames11[clsPrefix + "-btn"] = !centered, _classNames11[clsPrefix + "-btn--centered"] = centered, _classNames11[clsPrefix + "-btn--centered-" + actionType] = centered, _classNames11));
          var btnModel = model || 'text';
          if (!centered && !model) {
            btnModel = isCancel ? 'outline' : 'solid';
          }
          var btnText;
          if (text) {
            btnText = text;
          } else if (isCancel) {
            btnText = cancelText;
          } else {
            btnText = okBtnText;
          }
          return /*#__PURE__*/(0, _react.createElement)(FooterWrapper, {
            key: "mt_dialog_" + index,
            centered: centered,
            className: centered ? wrapperClassName : ''
          }, !(index === 0) ? /*#__PURE__*/(0, _react.createElement)(_view.default, {
            className: clsPrefix + "-footer-gap"
          }) : null, /*#__PURE__*/(0, _react.createElement)(_button.default, _extends({
            key: "mt_dialog_" + index,
            type: "primary",
            size: "large",
            model: btnModel
          }, restProps, {
            className: btnClassName,
            onClick: function onClick(e) {
              if ((0, _utils.isString)(actionType)) {
                if (isCancel) {
                  onCancel(e);
                } else {
                  onOk(e);
                }
                if (closeMode.includes(actionType)) {
                  onClose(actionType, e);
                }
              } else if (actionType.onClick) {
                actionType.onClick(e);
              }
            }
          }), btnText));
        }));
      }
    }
    return null;
  }(), !centered ? /*#__PURE__*/(0, _react.createElement)(_safeArea.default, null) : null);
};
Dialog.displayName = 'Dialog';
var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)(Dialog);