12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- import { useEffect, useEvent, useRef, useState, } from 'functional-mini/component';
- import '../_util/assert-component2';
- import { mountComponent } from '../_util/component';
- import { useComponentEvent } from '../_util/hooks/useComponentEvent';
- import { useEvent as useStableCallback } from '../_util/hooks/useEvent';
- import { ToastFunctionalProps } from './props';
- var Toast = function (props) {
- var _a = useState(false), show = _a[0], setShow = _a[1];
- var timerRef = useRef(null);
- var triggerEventOnly = useComponentEvent(props).triggerEventOnly;
- var closeMask = useStableCallback(function () {
- if (timerRef.current) {
- clearTimeout(timerRef.current);
- }
- var isShow = show;
- setShow(false);
- timerRef.current = null;
- if (isShow) {
- triggerEventOnly('close');
- }
- });
- var handleShowToast = useStableCallback(function () {
- setShow(true);
- if (props.duration > 0) {
- var timer = setTimeout(function () {
- closeMask();
- }, props.duration);
- timerRef.current = timer;
- }
- });
- useEffect(function () {
- if (props.visible) {
- handleShowToast();
- }
- else {
- closeMask();
- }
- }, [props.visible]);
- useEvent('handleClickMask', function () {
- if (props.showMask && props.maskCloseable) {
- closeMask();
- }
- });
- var displayContent = typeof props.content === 'string'
- ? props.content.substring(0, 24)
- : props.content;
- return {
- displayContent: displayContent,
- show: show,
- };
- };
- mountComponent(Toast, ToastFunctionalProps);
|