@nutui/nutui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
186 lines (185 loc) • 7.85 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: Object.getOwnPropertyDescriptor(all, name).get
});
}
_export(exports, {
get Toast () {
return Toast;
},
get hide () {
return hide;
},
get show () {
return show;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
var _define_property = require("@swc/helpers/_/_define_property");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
var _components = require("@tarojs/components");
var _iconsreacttaro = require("@nutui/icons-react-taro");
var _index = /*#__PURE__*/ _interop_require_default._(require("../overlay/index"));
var _overlay = require("../overlay/overlay");
var _usecustomevent = require("../../hooks/taro/use-custom-event");
var _usepropsvalue = require("../../hooks/use-props-value");
var _index1 = require("../configprovider/index");
var _platform = require("../../utils/taro/platform");
var _mergeprops = require("../../utils/merge-props");
var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _overlay.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 onClose() {}
});
var Toast = function Toast(props) {
var _useParams = (0, _usecustomevent.useParams)((0, _mergeprops.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 = (0, _react.useRef)(-1);
var rtl = (0, _index1.useRtl)();
var _usePropsValue = (0, _sliced_to_array._)((0, _usepropsvalue.usePropsValue)({
value: visible,
defaultValue: undefined,
finalValue: false,
onChange: function onChange(v) {
!v && (onClose === null || onClose === void 0 ? void 0 : onClose());
}
}), 2), innerVisible = _usePropsValue[0], setInnerVisible = _usePropsValue[1];
(0, _react.useEffect)(function() {
if (innerVisible) {
autoClose();
}
}, [
innerVisible,
duration
]);
(0, _usecustomevent.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 clearTimer() {
if (timer.current) {
clearTimeout(timer.current);
timer.current = -1;
}
};
var _$show = function _$show() {
setInnerVisible(true);
};
var _$hide = function _$hide() {
clearTimer();
setInnerVisible(false);
};
var autoClose = function autoClose() {
clearTimer();
if (duration) {
timer.current = window.setTimeout(function() {
setParams({
visible: false
});
_$hide();
}, duration * 1000);
}
};
var clickCover = function clickCover() {
if (closeOnOverlayClick) {
_$hide();
}
};
var renderIcon = function renderIcon() {
var iconNode = icon;
if (typeof icon === 'string') {
iconNode = ({
success: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Success, null),
fail: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Failure, null),
warn: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Tips, null),
loading: /*#__PURE__*/ _react.default.createElement(_iconsreacttaro.Loading, {
className: "nut-icon-loading"
})
})[icon];
}
return iconNode && /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-icon-wrapper")
}, iconNode);
};
var classes = (0, _classnames.default)({
'nut-toast-has-icon': icon,
'nut-toast-rtl': rtl
});
var styles = (0, _platform.harmony)() ? {
left: '50%',
transform: 'translate(-50%, -50%)'
} : null;
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, innerVisible && /*#__PURE__*/ _react.default.createElement(_index.default, {
visible: innerVisible,
style: style,
zIndex: zIndex,
className: "".concat(classPrefix, "-overlay-default-taro ").concat(className),
closeOnOverlayClick: closeOnOverlayClick,
lockScroll: lockScroll,
onClick: function onClick() {
clickCover();
}
}, /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, " ").concat(classes),
id: id
}, /*#__PURE__*/ _react.default.createElement(_components.View, {
className: (0, _classnames.default)("".concat(classPrefix, "-inner"), "".concat(classPrefix, "-").concat(position), contentClassName, "".concat(classPrefix, "-inner-").concat(size), "".concat(classPrefix, "-inner-").concat(wordBreak), (0, _define_property._)({}, "".concat(classPrefix, "-inner-descrption"), content)),
style: (0, _object_spread._)({}, styles, contentStyle),
ariaRole: "alert"
}, renderIcon(), title && /*#__PURE__*/ _react.default.createElement(_components.Text, {
className: "".concat(classPrefix, "-title")
}, title), content && ((0, _platform.td)() ? /*#__PURE__*/ _react.default.createElement(_components.Text, {
className: "".concat(classPrefix, "-text")
}, content) : /*#__PURE__*/ _react.default.createElement(_components.View, {
className: "".concat(classPrefix, "-text")
}, content))))));
};
function show(selector, options) {
// eslint-disable-next-line react-hooks/rules-of-hooks
var path = (0, _usecustomevent.useCustomEventsPath)(selector);
_usecustomevent.customEvents.trigger(path, {
status: true,
options: options
});
}
function hide(selector) {
// eslint-disable-next-line react-hooks/rules-of-hooks
var path = (0, _usecustomevent.useCustomEventsPath)(selector);
_usecustomevent.customEvents.trigger(path, {
status: false
});
}
Toast.displayName = 'NutToast';
Toast.show = show;
Toast.hide = hide;