index.js 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. import { useState, useEvent } from 'functional-mini/component';
  2. import '../_util/assert-component2';
  3. import { mountComponent } from '../_util/component';
  4. import { useComponentEvent } from '../_util/hooks/useComponentEvent';
  5. import { useComponentUpdateEffect } from '../_util/hooks/useLayoutEffect';
  6. import { isOldSDKVersion } from '../_util/platform';
  7. var isOldVersion = isOldSDKVersion();
  8. var Popup = function (props) {
  9. var enableAnimation = props.animation && props.duration > 0;
  10. var _a = useState(false), closing = _a[0], setClosing = _a[1];
  11. var triggerEventOnly = useComponentEvent(props).triggerEventOnly;
  12. useComponentUpdateEffect(function () {
  13. if (!props.visible && enableAnimation) {
  14. setClosing(true);
  15. }
  16. if (!enableAnimation) {
  17. triggerEventOnly(props.visible ? 'afterShow' : 'afterClose');
  18. }
  19. }, [props.visible]);
  20. useEvent('onAnimationEnd', function () {
  21. if (closing) {
  22. setClosing(false);
  23. }
  24. if (enableAnimation) {
  25. triggerEventOnly(props.visible ? 'afterShow' : 'afterClose');
  26. }
  27. });
  28. useEvent('onTapMask', function () {
  29. if (closing) {
  30. return;
  31. }
  32. triggerEventOnly('close');
  33. });
  34. return {
  35. closing: closing,
  36. isOldVersion: isOldVersion,
  37. };
  38. };
  39. mountComponent(Popup, {
  40. visible: false,
  41. destroyOnClose: false,
  42. showMask: true,
  43. position: 'bottom',
  44. // 是否开启动画
  45. animation: true,
  46. animationType: 'transform',
  47. // 动画持续时间
  48. duration: 300,
  49. height: null,
  50. width: null,
  51. maskClassName: '',
  52. maskStyle: '',
  53. // 弹窗层级
  54. zIndex: 998,
  55. });