@alifd/meet-react
Version:
Fusion Mobile React UI System Component
262 lines • 13.1 kB
JavaScript
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); }
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(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(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); }
import { __rest } from "tslib";
import React, { createElement, forwardRef, Fragment, useCallback, useMemo, useEffect } from "react";
import classNames from 'classnames';
import { Text } from "@alifd/meet-react-component-one";
import { vibrateLong } from '@uni/vibrate';
import View from '../view';
import Icon from '../icon';
import SafeArea from '../safe-area';
import Button from '../button';
import Modal from '../modal';
import { useLocale } from '../locale';
import defaultLang from '../locale/lang/zh-cn';
import { isBoolean, isString, isValidArray } from '../utils';
var FooterWrapper = function FooterWrapper(wrapperProps) {
var centered = wrapperProps.centered,
children = wrapperProps.children,
others = __rest(wrapperProps, ["centered", "children"]);
if (centered) {
return /*#__PURE__*/React.createElement(View, others, children);
}
return /*#__PURE__*/React.createElement(Fragment, null, children);
};
var MESSAGE_TYPE = {
alert: 'warning',
confirm: 'help',
success: 'success',
error: 'error',
warning: 'warning',
notice: 'prompt',
help: 'help'
};
var Dialog = function Dialog(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 = __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 = useMemo(function () {
if (closeModeProp) {
return closeModeProp;
}
return centered ? ['ok', 'mask', 'cancel'] : ['close', 'ok', 'mask', 'cancel'];
}, [closeModeProp, centered]);
var footerActions = 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 = useMemo(function () {
return MESSAGE_TYPE[type] || '';
}, [type]);
var locale = useLocale('Dialog', others, defaultLang.Dialog);
var clsPrefix = "".concat(prefix, "dialog");
var closable = closeMode.includes('close');
var clses = useMemo(function () {
return {
dialog: classNames("".concat(clsPrefix), className, _defineProperty({}, "".concat(clsPrefix, "--centered"), centered)),
header: classNames("".concat(clsPrefix, "-header"), _defineProperty({}, "".concat(clsPrefix, "-header--centered"), centered)),
closeWrapper: classNames("".concat(clsPrefix, "-close-wrapper"), _defineProperty(_defineProperty({}, "".concat(clsPrefix, "-close-wrapper--content"), !titleProp && closable), "".concat(clsPrefix, "-close-wrapper--centered"), centered && closable)),
close: classNames("".concat(clsPrefix, "-close"), _defineProperty({}, "".concat(clsPrefix, "-close--centered"), centered)),
container: classNames("".concat(clsPrefix, "-container"), _defineProperty({}, "".concat(clsPrefix, "-container--centered ").concat(clsPrefix, "-container--").concat(platform), centered)),
icon: classNames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-icon"), true), "".concat(clsPrefix, "-icon--").concat(type), true), "".concat(clsPrefix, "-icon--centered"), centered)),
title: classNames("".concat(clsPrefix, "-title"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-title--centered"), centered), "".concat(clsPrefix, "-title--").concat(platform), platform && centered), "".concat(clsPrefix, "-title--fullwidth"), titleProp && closable)),
content: classNames(contentClassName, _defineProperty(_defineProperty({}, "".concat(clsPrefix, "-content"), !centered), "".concat(clsPrefix, "-content--centered ").concat(clsPrefix, "-content--centered-").concat(platform), centered)),
innerContent: classNames("".concat(clsPrefix, "-inner-content"), _defineProperty(_defineProperty({}, "".concat(clsPrefix, "-inner-content--fullwidth"), !closable || closable && titleProp), "".concat(clsPrefix, "-inner-content--centered"), centered)),
footer: classNames(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-footer"), !centered), "".concat(clsPrefix, "-footer--centered ").concat(clsPrefix, "-footer--centered-").concat(platform), centered))
};
}, [clsPrefix, className, centered, closable, titleProp, platform]);
var okBtnText = okProps.text || locale.ok;
var cancelText = cancelProps.text || locale.cancel;
var handleIconClose = useCallback(function (e) {
if (closable) {
onClose('close', e);
}
}, [closable, onClose]);
var renderInnerContent = function renderInnerContent() {
var innerContent = content;
if (isString(content)) {
innerContent = /*#__PURE__*/React.createElement(Text, {
className: "".concat(clsPrefix, "-content-text")
}, content);
} else if (children) {
innerContent = children;
}
return innerContent;
};
var renderTitle = function renderTitle() {
var title = titleProp || null;
if (title) {
title = isString(title) ? /*#__PURE__*/React.createElement(Text, {
className: clses.title,
numberOfLines: 3
}, title) : /*#__PURE__*/React.createElement(View, {
className: clses.title
}, title);
}
return title;
};
useEffect(function () {
if (visible === true && vibrative === true) {
vibrateLong({}).then(function () {});
}
}, [visible]);
var renderFooter = function renderFooter() {
var wrapperClassName = classNames("".concat(clsPrefix, "-btn-col"), "".concat(clsPrefix, "-btn-col--").concat(platform));
var emptyFooter = null;
if (footer) {
if (!isBoolean(footer)) {
return /*#__PURE__*/React.createElement(View, {
className: clses.footer
}, footer);
} else if (isValidArray(footerActions)) {
return /*#__PURE__*/React.createElement(View, {
className: clses.footer
}, footerActions.map(function (actionType, index) {
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 = __rest(buttonProps, ["text", "className", "model", "onClick"]);
var isFirst = index === 0;
var isCancel = actionType === 'cancel';
var btnClassName = classNames(btnClassNameProp, _defineProperty(_defineProperty(_defineProperty({}, "".concat(clsPrefix, "-btn"), !centered), "".concat(clsPrefix, "-btn--centered"), centered), "".concat(clsPrefix, "-btn--centered-").concat(actionType), centered));
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__*/React.createElement(FooterWrapper, {
key: "mt_dialog_".concat(index),
centered: centered,
className: centered ? wrapperClassName : ''
}, !isFirst ? /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-footer-gap")
}) : null, /*#__PURE__*/React.createElement(Button, _extends({
key: "mt_dialog_".concat(index),
type: "primary",
size: "large",
model: btnModel
}, restProps, {
className: btnClassName,
onClick: function onClick(e) {
if (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 emptyFooter;
};
var titleEl = renderTitle();
var showHeader = titleEl || !centered && iconName || closable && titleProp;
return /*#__PURE__*/React.createElement(Modal, _extends({}, others, {
ref: ref,
visible: visible,
maskClosable: closeMode.includes('mask'),
placement: centered === true ? 'center' : 'bottom',
containerClassName: clses.dialog,
onClose: onClose
}), /*#__PURE__*/React.createElement(View, {
className: clses.container
}, showIcon && centered && iconName ? /*#__PURE__*/React.createElement(Icon, {
name: iconName,
className: clses.icon,
size: "xxl"
}) : null, /*#__PURE__*/React.createElement(View, {
className: "".concat(clsPrefix, "-main")
}, showHeader ? /*#__PURE__*/React.createElement(View, {
className: clses.header
}, showIcon && !centered && iconName ? /*#__PURE__*/React.createElement(Icon, {
name: iconName,
className: clses.icon,
size: "s"
}) : null, titleEl, closable && titleProp ? /*#__PURE__*/React.createElement(View, {
className: clses.closeWrapper
}, /*#__PURE__*/React.createElement(Icon, {
name: "close",
className: clses.close,
size: "xxs",
onClick: handleIconClose
})) : null) : null, /*#__PURE__*/React.createElement(View, {
className: clses.content
}, /*#__PURE__*/React.createElement(View, {
className: clses.innerContent
}, renderInnerContent()), !titleProp && closable ? /*#__PURE__*/React.createElement(View, {
className: clses.closeWrapper
}, /*#__PURE__*/React.createElement(Icon, {
name: "close",
className: clses.close,
size: "xxs",
onClick: handleIconClose
})) : null))), renderFooter(), !centered ? /*#__PURE__*/React.createElement(SafeArea, null) : null);
};
Dialog.displayName = 'Dialog';
export default /*#__PURE__*/forwardRef(Dialog);