@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
160 lines (159 loc) • 6.47 kB
JavaScript
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
import React, { useEffect, useRef } from "react";
import classNames from "classnames";
import { Text, View } from "@tarojs/components";
import { Failure, Loading, Success, Tips } from "@nutui/icons-react-taro";
import Overlay from "../overlay/index";
import { defaultOverlayProps } from "../overlay/overlay";
import { customEvents, useCustomEvent, useCustomEventsPath, useParams } from "../../hooks/taro/use-custom-event";
import { usePropsValue } from "../../hooks/use-props-value";
import { useRtl } from "../configprovider/index";
import { harmony } from "../../utils/taro/platform";
import { mergeProps } from "../../utils/merge-props";
var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
id: '',
duration: 2,
position: 'middle',
title: '',
size: 'base',
icon: null,
content: '',
contentClassName: '',
contentStyle: {},
closeOnOverlayClick: false,
lockScroll: false,
visible: false,
wordBreak: 'break-all',
zIndex: 1300,
onClose: function() {}
});
export var Toast = function(props) {
var _useParams = useParams(mergeProps(defaultProps, props)), _useParams_params = _useParams.params, id = _useParams_params.id, position = _useParams_params.position, contentStyle = _useParams_params.contentStyle, icon = _useParams_params.icon, content = _useParams_params.content, duration = _useParams_params.duration, title = _useParams_params.title, closeOnOverlayClick = _useParams_params.closeOnOverlayClick, lockScroll = _useParams_params.lockScroll, contentClassName = _useParams_params.contentClassName, visible = _useParams_params.visible, size = _useParams_params.size, className = _useParams_params.className, style = _useParams_params.style, wordBreak = _useParams_params.wordBreak, zIndex = _useParams_params.zIndex, onClose = _useParams_params.onClose, setParams = _useParams.setParams;
var classPrefix = 'nut-toast';
var timer = useRef(-1);
var rtl = useRtl();
var _usePropsValue = _sliced_to_array(usePropsValue({
value: visible,
defaultValue: undefined,
finalValue: false,
onChange: function(v) {
!v && (onClose === null || onClose === void 0 ? void 0 : onClose());
}
}), 2), innerVisible = _usePropsValue[0], setInnerVisible = _usePropsValue[1];
useEffect(function() {
if (innerVisible) {
autoClose();
}
}, [
innerVisible,
duration
]);
useCustomEvent(id, function(param) {
var status = param.status, options = param.options;
if (status) {
options.visible = true;
setParams(options);
_$show();
} else {
setParams({
visible: false
});
_$hide();
}
});
var clearTimer = function() {
if (timer.current) {
clearTimeout(timer.current);
timer.current = -1;
}
};
var _$show = function() {
setInnerVisible(true);
};
var _$hide = function() {
clearTimer();
setInnerVisible(false);
};
var autoClose = function() {
clearTimer();
if (duration) {
timer.current = window.setTimeout(function() {
setParams({
visible: false
});
_$hide();
}, duration * 1000);
}
};
var clickCover = function() {
if (closeOnOverlayClick) {
_$hide();
}
};
var renderIcon = function() {
var iconNode = icon;
if (typeof icon === 'string') {
iconNode = ({
success: /*#__PURE__*/ React.createElement(Success, null),
fail: /*#__PURE__*/ React.createElement(Failure, null),
warn: /*#__PURE__*/ React.createElement(Tips, null),
loading: /*#__PURE__*/ React.createElement(Loading, {
className: "nut-icon-loading"
})
})[icon];
}
return iconNode && /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-icon-wrapper")
}, iconNode);
};
var classes = classNames({
'nut-toast-has-icon': icon,
'nut-toast-rtl': rtl
});
var styles = harmony() ? {
left: '50%',
transform: 'translate(-50%, -50%)'
} : null;
return /*#__PURE__*/ React.createElement(React.Fragment, null, innerVisible && /*#__PURE__*/ React.createElement(Overlay, {
visible: innerVisible,
style: style,
zIndex: zIndex,
className: "".concat(classPrefix, "-overlay-default-taro ").concat(className),
closeOnOverlayClick: closeOnOverlayClick,
lockScroll: lockScroll,
onClick: function() {
clickCover();
}
}, /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, " ").concat(classes),
id: id
}, /*#__PURE__*/ React.createElement(View, {
className: classNames("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), _define_property({}, "".concat(classPrefix, "-inner-descrption"), content)),
style: _object_spread({}, styles, contentStyle)
}, renderIcon(), title && /*#__PURE__*/ React.createElement(Text, {
className: "".concat(classPrefix, "-title")
}, title), content && /*#__PURE__*/ React.createElement(View, {
className: "".concat(classPrefix, "-text")
}, content)))));
};
export function show(selector, options) {
// eslint-disable-next-line react-hooks/rules-of-hooks
var path = useCustomEventsPath(selector);
customEvents.trigger(path, {
status: true,
options: options
});
}
export function hide(selector) {
// eslint-disable-next-line react-hooks/rules-of-hooks
var path = useCustomEventsPath(selector);
customEvents.trigger(path, {
status: false
});
}
Toast.displayName = 'NutToast';
Toast.show = show;
Toast.hide = hide;