@antmjs/vantui
Version:
一套适用于Taro3及React的vantui组件库
313 lines (312 loc) • 14.3 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.Dialog = Dialog;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _components = require("@tarojs/components");
var _react = require("react");
var _taro = require("@tarojs/taro");
var _utils = require("../common/utils");
var _index = _interopRequireDefault(require("../goods-action-button/index"));
var _index2 = _interopRequireDefault(require("../goods-action/index"));
var _index3 = _interopRequireDefault(require("../button/index"));
var _index4 = _interopRequireDefault(require("../popup/index"));
var _defaultProps = require("../default-props");
var _events = require("./events");
var utils = _interopRequireWildcard(require("./../wxs/utils"));
var _createOnlyDialog = require("./create-only-dialog");
var _dialog = _interopRequireDefault(require("./dialog"));
var _jsxRuntime = require("react/jsx-runtime");
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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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) { (0, _defineProperty2.default)(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; }
function Dialog(props) {
var _useState = (0, _react.useState)({}),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
options = _useState2[0],
setOptions = _useState2[1];
var _useState3 = (0, _react.useState)((0, _defaultProps.get)().Dialog),
_useState4 = (0, _slicedToArray2.default)(_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 = (0, _objectWithoutProperties2.default)(_d$options, _excluded);
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
confirmLoading = _useState6[0],
setConfirmLoading = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
cancelLoading = _useState8[0],
setCancelLoading = _useState8[1];
var _useState9 = (0, _react.useState)(_show),
_useState10 = (0, _slicedToArray2.default)(_useState9, 2),
show = _useState10[0],
setShow = _useState10[1];
var _close = (0, _react.useCallback)(function (action) {
setShow(false);
(0, _taro.nextTick)(function () {
onClose === null || onClose === void 0 ? void 0 : onClose({
detail: action
});
});
}, [onClose]);
var _onClickOverlay = (0, _react.useCallback)(function () {
_close('overlay');
}, [_close]);
var _stopLoading = (0, _react.useCallback)(function () {
setConfirmLoading(false);
setCancelLoading(false);
}, []);
var _handleAction = (0, _react.useCallback)(function (action) {
if (action === 'confirm') {
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
detail: {
action: action,
dialog: {
dialog: null
}
}
});
// 触发promise
(0, _events.trigger)('confirm');
} else if (action === 'cancel') {
onCancel === null || onCancel === void 0 ? void 0 : onCancel({
detail: {
action: action,
dialog: {
dialog: null
}
}
});
(0, _events.trigger)('cancel');
} else {
(0, _events.trigger)('cancel');
}
if (!asyncClose && !beforeClose) {
_close(action);
return;
}
if (action === 'confirm') {
setConfirmLoading(true);
} else {
setCancelLoading(true);
}
if (beforeClose) {
(0, _utils.toPromise)(beforeClose(action)).then(function (value) {
if (value) {
_close(action);
_stopLoading();
} else {
_stopLoading();
}
}).catch(function () {
_stopLoading();
});
}
}, [_close, _stopLoading, asyncClose, beforeClose, onCancel, onConfirm]);
var _onConfirm = (0, _react.useCallback)(function () {
_handleAction('confirm');
}, [_handleAction]);
var _onCancel = (0, _react.useCallback)(function () {
_handleAction('cancel');
}, [_handleAction]);
(0, _react.useEffect)(function () {
setOptions(_objectSpread(_objectSpread({}, options), props));
if (!props.show) {
_stopLoading();
}
// eslint-disable-next-line
}, [props]);
(0, _react.useEffect)(function () {
setShow(options.show);
}, [options.show]);
var alertFn = (0, _react.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');
};
(0, _taro.useDidShow)(function () {
if (!props.id) {
return;
}
(0, _events.on)('alert', alertFn);
(0, _events.on)('close', closeFn);
(0, _events.on)('stopLoading', stopLoadingFn);
});
(0, _taro.useDidHide)(function () {
(0, _events.off)('alert', alertFn);
(0, _events.off)('close', closeFn);
(0, _events.off)('stopLoading', stopLoadingFn);
});
(0, _react.useEffect)(function () {
if (!props.id) {
return;
}
(0, _events.on)('alert', alertFn);
}, [alertFn, props.id]);
(0, _taro.useDidHide)(function () {
(0, _events.off)('confirm');
(0, _events.off)('cancel');
// 设计 咏于
(0, _events.off)('alert');
(0, _events.off)('close');
(0, _events.off)('stopLoading');
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index4.default, {
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__*/(0, _jsxRuntime.jsx)(_components.View, {
className: utils.bem('dialog__header', {
isolated: !(message || renderTitle)
}),
children: renderTitle ? renderTitle : title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: title
})
}), children ? children : message && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: utils.bem('dialog__message', [theme, messageAlign, {
hasTitle: !!title
}]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
className: "van-dialog__message-text",
children: message
})
}), theme === 'round-button' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index2.default, {
className: "van-dialog__footer--round-button",
children: [showCancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
loading: cancelLoading,
className: "van-dialog__button van-hairline--right van-dialog__cancel",
style: cancelButtonColor ? {
color: cancelButtonColor
} : {},
onClick: _onCancel,
children: cancelButtonText
}), showConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, _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__*/(0, _jsxRuntime.jsxs)(_components.View, {
className: "van-hairline--top van-dialog__footer",
children: [showCancelButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, {
size: "large",
loading: cancelLoading,
className: "van-dialog__button van-dialog__cancel",
style: cancelButtonColor ? {
color: cancelButtonColor
} : {},
onClick: _onCancel,
children: cancelButtonText
}), showConfirmButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.default, _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.default.alert(options);
};
Dialog.confirm = function (options) {
return _dialog.default.confirm(options);
};
Dialog.close = function () {
_dialog.default.close();
};
Dialog.stopLoading = function () {
_dialog.default.stopLoading();
};
Dialog.setDefaultOptions = function (options) {
_dialog.default.setDefaultOptions(options);
};
Dialog.resetDefaultOptions = function () {
_dialog.default.resetDefaultOptions();
};
Dialog.createOnlyDialog = function () {
return (0, _createOnlyDialog.createOnlyDialog)(Dialog);
};
var _default = Dialog;
exports.default = _default;