@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
303 lines • 11.9 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
var _excluded = ["show", "overlay", "theme", "zIndex", "width", "overlayStyle", "closeOnClickOverlay", "message", "title", "messageAlign", "showCancelButton", "cancelButtonColor", "confirmButtonColor", "cancelButtonText", "showConfirmButton", "confirmButtonOpenType", "sessionFrom", "sendMessageTitle", "sendMessagePath", "sendMessageImg", "showMessageCard", "appParameter", "confirmButtonText", "renderTitle", "onClose", "onConfirm", "onCancel", "beforeClose", "asyncClose", "children", "style", "className"];
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import { View } from '@tarojs/components';
import { useState, useCallback, useEffect } from 'react';
import { nextTick, useDidHide, useDidShow } from '@tarojs/taro';
import { toPromise } from '../common/utils';
import VanGoodsActionButton from '../goods-action-button/index';
import VanGoodsAction from '../goods-action/index';
import VanButton from '../button/index';
import VanPopup from '../popup/index';
import { get } from '../default-props';
import { on, off, trigger } from './events';
import * as utils from './../wxs/utils';
import { createOnlyDialog } from './create-only-dialog';
import dialog from './dialog';
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export function Dialog(props) {
var _useState = useState({}),
_useState2 = _slicedToArray(_useState, 2),
options = _useState2[0],
setOptions = _useState2[1];
var _useState3 = useState(get().Dialog),
_useState4 = _slicedToArray(_useState3, 1),
d = _useState4[0];
var _d$options = _objectSpread(_objectSpread({}, d), options),
_show = _d$options.show,
_d$options$overlay = _d$options.overlay,
overlay = _d$options$overlay === void 0 ? true : _d$options$overlay,
_d$options$theme = _d$options.theme,
theme = _d$options$theme === void 0 ? 'default' : _d$options$theme,
zIndex = _d$options.zIndex,
width = _d$options.width,
overlayStyle = _d$options.overlayStyle,
closeOnClickOverlay = _d$options.closeOnClickOverlay,
message = _d$options.message,
title = _d$options.title,
messageAlign = _d$options.messageAlign,
showCancelButton = _d$options.showCancelButton,
cancelButtonColor = _d$options.cancelButtonColor,
confirmButtonColor = _d$options.confirmButtonColor,
_d$options$cancelButt = _d$options.cancelButtonText,
cancelButtonText = _d$options$cancelButt === void 0 ? '取消' : _d$options$cancelButt,
_d$options$showConfir = _d$options.showConfirmButton,
showConfirmButton = _d$options$showConfir === void 0 ? true : _d$options$showConfir,
confirmButtonOpenType = _d$options.confirmButtonOpenType,
sessionFrom = _d$options.sessionFrom,
sendMessageTitle = _d$options.sendMessageTitle,
sendMessagePath = _d$options.sendMessagePath,
sendMessageImg = _d$options.sendMessageImg,
showMessageCard = _d$options.showMessageCard,
appParameter = _d$options.appParameter,
_d$options$confirmBut = _d$options.confirmButtonText,
confirmButtonText = _d$options$confirmBut === void 0 ? '确认' : _d$options$confirmBut,
renderTitle = _d$options.renderTitle,
onClose = _d$options.onClose,
onConfirm = _d$options.onConfirm,
onCancel = _d$options.onCancel,
beforeClose = _d$options.beforeClose,
asyncClose = _d$options.asyncClose,
children = _d$options.children,
style = _d$options.style,
className = _d$options.className,
others = _objectWithoutProperties(_d$options, _excluded);
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
confirmLoading = _useState6[0],
setConfirmLoading = _useState6[1];
var _useState7 = useState(false),
_useState8 = _slicedToArray(_useState7, 2),
cancelLoading = _useState8[0],
setCancelLoading = _useState8[1];
var _useState9 = useState(_show),
_useState10 = _slicedToArray(_useState9, 2),
show = _useState10[0],
setShow = _useState10[1];
var _close = useCallback(function (action) {
setShow(false);
nextTick(function () {
onClose === null || onClose === void 0 ? void 0 : onClose({
detail: action
});
});
}, [onClose]);
var _onClickOverlay = useCallback(function () {
_close('overlay');
}, [_close]);
var _stopLoading = useCallback(function () {
setConfirmLoading(false);
setCancelLoading(false);
}, []);
var _handleAction = useCallback(function (action) {
if (action === 'confirm') {
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
detail: {
action: action,
dialog: {
dialog: null
}
}
});
// 触发promise
trigger('confirm');
} else if (action === 'cancel') {
onCancel === null || onCancel === void 0 ? void 0 : onCancel({
detail: {
action: action,
dialog: {
dialog: null
}
}
});
trigger('cancel');
} else {
trigger('cancel');
}
if (!asyncClose && !beforeClose) {
_close(action);
return;
}
if (action === 'confirm') {
setConfirmLoading(true);
} else {
setCancelLoading(true);
}
if (beforeClose) {
toPromise(beforeClose(action)).then(function (value) {
if (value) {
_close(action);
_stopLoading();
} else {
_stopLoading();
}
}).catch(function () {
_stopLoading();
});
}
}, [_close, _stopLoading, asyncClose, beforeClose, onCancel, onConfirm]);
var _onConfirm = useCallback(function () {
_handleAction('confirm');
}, [_handleAction]);
var _onCancel = useCallback(function () {
_handleAction('cancel');
}, [_handleAction]);
useEffect(function () {
setOptions(_objectSpread(_objectSpread({}, options), props));
if (!props.show) {
_stopLoading();
}
// eslint-disable-next-line
}, [props]);
useEffect(function () {
setShow(options.show);
}, [options.show]);
var alertFn = useCallback(function () {
var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
if (!(params !== null && params !== void 0 && params.selector) || props.id === params.selector.replace(/^#/, '')) {
setOptions(_objectSpread({}, params));
setShow(!!params.show);
}
}, [props.id]);
var stopLoadingFn = function stopLoadingFn() {
_stopLoading();
};
var closeFn = function closeFn() {
_close('close');
};
useDidShow(function () {
if (!props.id) {
return;
}
on('alert', alertFn);
on('close', closeFn);
on('stopLoading', stopLoadingFn);
});
useDidHide(function () {
off('alert', alertFn);
off('close', closeFn);
off('stopLoading', stopLoadingFn);
});
useEffect(function () {
if (!props.id) {
return;
}
on('alert', alertFn);
}, [alertFn, props.id]);
useDidHide(function () {
off('confirm');
off('cancel');
// 设计 咏于
off('alert');
off('close');
off('stopLoading');
});
return /*#__PURE__*/_jsxs(VanPopup, {
show: show,
zIndex: zIndex,
overlay: overlay,
className: 'van-dialog van-dialog--' + theme + ' ' + "".concat(className || ''),
style: utils.style(['width: ' + utils.addUnit(width) + ';', style]),
overlayStyle: overlayStyle,
closeOnClickOverlay: closeOnClickOverlay,
onClose: _onClickOverlay,
children: [(title || renderTitle) && /*#__PURE__*/_jsx(View, {
className: utils.bem('dialog__header', {
isolated: !(message || renderTitle)
}),
children: renderTitle ? renderTitle : title && /*#__PURE__*/_jsx(_Fragment, {
children: title
})
}), children ? children : message && /*#__PURE__*/_jsx(View, {
className: utils.bem('dialog__message', [theme, messageAlign, {
hasTitle: !!title
}]),
children: /*#__PURE__*/_jsx(View, {
className: "van-dialog__message-text",
children: message
})
}), theme === 'round-button' ? /*#__PURE__*/_jsxs(VanGoodsAction, {
className: "van-dialog__footer--round-button",
children: [showCancelButton && /*#__PURE__*/_jsx(VanGoodsActionButton, {
loading: cancelLoading,
className: "van-dialog__button van-hairline--right van-dialog__cancel",
style: cancelButtonColor ? {
color: cancelButtonColor
} : {},
onClick: _onCancel,
children: cancelButtonText
}), showConfirmButton && /*#__PURE__*/_jsx(VanGoodsActionButton, _objectSpread(_objectSpread({
className: "van-dialog__button van-dialog__confirm",
style: confirmButtonColor ? {
color: confirmButtonColor
} : {},
loading: confirmLoading,
openType: confirmButtonOpenType,
sessionFrom: sessionFrom,
sendMessageTitle: sendMessageTitle,
sendMessagePath: sendMessagePath,
sendMessageImg: sendMessageImg,
appParameter: appParameter,
onClick: _onConfirm
}, others), {}, {
children: confirmButtonText
}))]
}) : /*#__PURE__*/_jsxs(View, {
className: "van-hairline--top van-dialog__footer",
children: [showCancelButton && /*#__PURE__*/_jsx(VanButton, {
size: "large",
loading: cancelLoading,
className: "van-dialog__button van-dialog__cancel",
style: cancelButtonColor ? {
color: cancelButtonColor
} : {},
onClick: _onCancel,
children: cancelButtonText
}), showConfirmButton && /*#__PURE__*/_jsx(VanButton, _objectSpread(_objectSpread({
size: "large",
className: "van-dialog__button van-dialog__confirm ".concat(showCancelButton ? 'van-hairline--left' : ''),
loading: confirmLoading,
style: confirmButtonColor ? {
color: confirmButtonColor
} : {},
openType: confirmButtonOpenType,
sessionFrom: sessionFrom,
sendMessageTitle: sendMessageTitle,
sendMessagePath: sendMessagePath,
sendMessageImg: sendMessageImg,
showMessageCard: showMessageCard,
appParameter: appParameter,
onClick: _onConfirm
}, others), {}, {
children: confirmButtonText
}))]
})]
});
}
Dialog.alert = function (options) {
return dialog.alert(options);
};
Dialog.confirm = function (options) {
return dialog.confirm(options);
};
Dialog.close = function () {
dialog.close();
};
Dialog.stopLoading = function () {
dialog.stopLoading();
};
Dialog.setDefaultOptions = function (options) {
dialog.setDefaultOptions(options);
};
Dialog.resetDefaultOptions = function () {
dialog.resetDefaultOptions();
};
Dialog.createOnlyDialog = function () {
return createOnlyDialog(Dialog);
};
export default Dialog;