@mijadesign/mjui-react-taro
Version:
京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序
250 lines (249 loc) • 8.1 kB
JavaScript
import { _ as __rest } from "./tslib.es6-iWu3F_1J.js";
import classNames from "classnames";
import React, { useRef, useEffect } from "react";
import { c as c$1 } from "./Failure-DtMPSYQj.js";
import { l } from "./DynamicLoading-BbSSKJQx.js";
/* empty css */
import { View } from "@tarojs/components";
import { Success, Failure, Tips, Loading } from "@nutui/icons-react-taro";
import { useParams, useRtl, usePropsValue, useCustomEvent, harmony, Overlay, useCustomEventsPath, customEvents } from "@nutui/nutui-react-taro";
import "react-transition-group";
import { C as ComponentDefaults } from "./typings-DV9RBfhj.js";
const n = {
size: "",
classPrefix: "icon",
fontClassName: "iconfont",
color: "",
tag: "i",
onClick: (e) => {
},
className: ""
};
function h$1(e) {
return e === "" ? "" : Number.isNaN(Number(e)) ? String(e) : `${e}px`;
}
function a$1(e) {
const i = "success", {
size: r,
classPrefix: l2,
color: f,
tag: m,
children: u,
className: p,
fontClassName: N,
style: d,
logValue: s,
onClick: o,
...k
} = {
...n,
...e
}, C = (g) => {
o && o(g);
}, c2 = {}, t = h$1(r);
return t && (c2.fontSize = t), React.createElement(
m,
{
className: classNames(`${N} ${l2}-${i} ${p || ""}`, { "auto-track": !!s }),
style: {
color: f,
...c2,
...d
},
...k,
onClick: C,
"data-log-name": s
},
u
);
}
a$1.defaultProps = n;
a$1.displayName = "FiresoonMobileIcon-success";
const a = {
size: "",
classPrefix: "icon",
fontClassName: "iconfont",
color: "",
tag: "i",
onClick: (e) => {
},
className: ""
};
function h(e) {
return e === "" ? "" : Number.isNaN(Number(e)) ? String(e) : `${e}px`;
}
function c(e) {
const i = "warning", {
size: r,
classPrefix: l2,
color: f,
tag: m,
children: p,
className: N,
fontClassName: u,
style: d,
logValue: o,
onClick: n2,
...g
} = {
...a,
...e
}, k = (C) => {
n2 && n2(C);
}, s = {}, t = h(r);
return t && (s.fontSize = t), React.createElement(
m,
{
className: classNames(`${u} ${l2}-${i} ${N || ""}`, { "auto-track": !!o }),
style: {
color: f,
...s,
...d
},
...g,
onClick: k,
"data-log-name": o
},
p
);
}
c.defaultProps = a;
c.displayName = "FiresoonMobileIcon-warning";
function mergeProps(defaultProps2, props) {
return Object.assign(Object.assign({}, defaultProps2), props);
}
const defaultOverlayProps = Object.assign(Object.assign({}, ComponentDefaults), { zIndex: 1e3, duration: 300, closeOnOverlayClick: true, visible: false, lockScroll: true, onClick: (event) => {
} });
const defaultProps = Object.assign(Object.assign({}, 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: () => {
} });
const Toast$1 = (props) => {
const { params: { id, position, contentStyle, icon, content, duration, title, closeOnOverlayClick, lockScroll, contentClassName, visible, size, className, style, wordBreak, zIndex, onClose }, setParams } = useParams(mergeProps(defaultProps, props));
const classPrefix = "nut-toast";
const timer = useRef(-1);
const rtl = useRtl();
const [innerVisible, setInnerVisible] = usePropsValue({
value: visible,
defaultValue: void 0,
finalValue: false,
onChange: (v) => {
!v && (onClose === null || onClose === void 0 ? void 0 : onClose());
}
});
useEffect(() => {
if (innerVisible) {
autoClose();
}
}, [innerVisible, duration]);
useCustomEvent(id, ({ status, options }) => {
if (status) {
options.visible = true;
setParams(options);
show2();
} else {
setParams({ visible: false });
hide2();
}
});
const clearTimer = () => {
if (timer.current) {
clearTimeout(timer.current);
timer.current = -1;
}
};
const show2 = () => {
setInnerVisible(true);
};
const hide2 = () => {
clearTimer();
setInnerVisible(false);
};
const autoClose = () => {
clearTimer();
if (duration) {
timer.current = window.setTimeout(() => {
setParams({ visible: false });
hide2();
}, duration * 1e3);
}
};
const clickCover = () => {
if (closeOnOverlayClick) {
hide2();
}
};
const renderIcon = () => {
let iconNode = icon;
if (typeof icon === "string") {
iconNode = {
success: React.createElement(Success, null),
fail: React.createElement(Failure, null),
warn: React.createElement(Tips, null),
loading: React.createElement(Loading, { className: "nut-icon-loading" })
}[icon];
}
return iconNode && React.createElement(View, { className: `${classPrefix}-icon-wrapper` }, iconNode);
};
const classes = classNames({
"nut-toast-has-icon": icon,
"nut-toast-rtl": rtl
});
const styles = harmony() ? { left: "50%", transform: "translate(-50%, -50%)" } : null;
return React.createElement(React.Fragment, null, innerVisible && React.createElement(
Overlay,
{ visible: innerVisible, style, zIndex, className: `${classPrefix}-overlay-default-taro ${className}`, closeOnOverlayClick, lockScroll, onClick: () => {
clickCover();
} },
React.createElement(
View,
{ className: `${classPrefix} ${classes}`, id },
React.createElement(
View,
{ className: classNames(`${classPrefix}-inner`, `${classPrefix}-${position}`, contentClassName, `${classPrefix}-inner-${size}`, `${classPrefix}-inner-${wordBreak}`, {
[`${classPrefix}-inner-descrption`]: content
}), style: Object.assign(Object.assign({}, styles), contentStyle) },
renderIcon(),
title && React.createElement("div", { className: `${classPrefix}-title` }, title),
content && React.createElement("div", { className: `${classPrefix}-text` }, content)
)
)
));
};
function show(selector, options) {
const path = useCustomEventsPath(selector);
customEvents.trigger(path, { status: true, options });
}
function hide(selector) {
const path = useCustomEventsPath(selector);
customEvents.trigger(path, { status: false });
}
Toast$1.displayName = "NutToast";
Toast$1.show = show;
Toast$1.hide = hide;
const mjPrefix = "mj-toast";
const CustomIcon = ({ icon }) => {
switch (icon) {
case "success":
return React.createElement(a$1, { className: `${mjPrefix}-custom-icon` });
case "fail":
return React.createElement(c$1, { className: `${mjPrefix}-custom-icon` });
case "warn":
return React.createElement(c, { className: `${mjPrefix}-custom-icon` });
case "loading":
return React.createElement(l, { size: 28, className: `${mjPrefix}-custom-icon` });
default:
return icon;
}
};
const Toast = (_a) => {
var { className, duration = 2.5, title, icon = "text", wordBreak = "break-word" } = _a, rest = __rest(_a, ["className", "duration", "title", "icon", "wordBreak"]);
return React.createElement(Toast$1, Object.assign({ className: classNames(className, mjPrefix), wordBreak, duration, title, icon: icon === "warn" || icon === "success" || icon === "fail" || icon === "loading" ? React.createElement(CustomIcon, { icon }) : icon }, rest));
};
Toast.displayName = "MJToast";
Toast.hide = Toast$1.hide;
Toast.show = (selector, _a) => {
var { duration = 2.5, className, title, icon = "text", wordBreak = "break-word" } = _a, rest = __rest(_a, ["duration", "className", "title", "icon", "wordBreak"]);
Toast$1.show(selector, Object.assign({ duration, className: classNames(className, mjPrefix, { [`${mjPrefix}-pure-text`]: !title && !icon && icon === "text" }), title, icon: icon === "warn" || icon === "success" || icon === "fail" || icon === "loading" ? React.createElement(CustomIcon, { icon }) : icon, wordBreak }, rest));
};
export {
Toast as T
};