index.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. import { useEffect, useEvent, useRef, useState, } from 'functional-mini/component';
  2. import '../_util/assert-component2';
  3. import { mountComponent } from '../_util/component';
  4. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  5. import { useEvent as useStableCallback } from '../_util/hooks/useEvent';
  6. import { ToastFunctionalProps } from './props';
  7. var Toast = function (props) {
  8. var _a = useState(false), show = _a[0], setShow = _a[1];
  9. var timerRef = useRef(null);
  10. var triggerEventOnly = useComponentEvent(props).triggerEventOnly;
  11. var closeMask = useStableCallback(function () {
  12. if (timerRef.current) {
  13. clearTimeout(timerRef.current);
  14. }
  15. var isShow = show;
  16. setShow(false);
  17. timerRef.current = null;
  18. if (isShow) {
  19. triggerEventOnly('close');
  20. }
  21. });
  22. var handleShowToast = useStableCallback(function () {
  23. setShow(true);
  24. if (props.duration > 0) {
  25. var timer = setTimeout(function () {
  26. closeMask();
  27. }, props.duration);
  28. timerRef.current = timer;
  29. }
  30. });
  31. useEffect(function () {
  32. if (props.visible) {
  33. handleShowToast();
  34. }
  35. else {
  36. closeMask();
  37. }
  38. }, [props.visible]);
  39. useEvent('handleClickMask', function () {
  40. if (props.showMask && props.maskCloseable) {
  41. closeMask();
  42. }
  43. });
  44. var displayContent = typeof props.content === 'string'
  45. ? props.content.substring(0, 24)
  46. : props.content;
  47. return {
  48. displayContent: displayContent,
  49. show: show,
  50. };
  51. };
  52. mountComponent(Toast, ToastFunctionalProps);