useStatus.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
  2. import { useEffect, useRef, useState } from 'react';
  3. import { isImageValid } from "../util";
  4. export default function useStatus(_ref) {
  5. var src = _ref.src,
  6. isCustomPlaceholder = _ref.isCustomPlaceholder,
  7. fallback = _ref.fallback;
  8. var _useState = useState(isCustomPlaceholder ? 'loading' : 'normal'),
  9. _useState2 = _slicedToArray(_useState, 2),
  10. status = _useState2[0],
  11. setStatus = _useState2[1];
  12. var isLoaded = useRef(false);
  13. var isError = status === 'error';
  14. // https://github.com/react-component/image/pull/187
  15. useEffect(function () {
  16. var isCurrentSrc = true;
  17. isImageValid(src).then(function (isValid) {
  18. // https://github.com/ant-design/ant-design/issues/44948
  19. // If src changes, the previous setStatus should not be triggered
  20. if (!isValid && isCurrentSrc) {
  21. setStatus('error');
  22. }
  23. });
  24. return function () {
  25. isCurrentSrc = false;
  26. };
  27. }, [src]);
  28. useEffect(function () {
  29. if (isCustomPlaceholder && !isLoaded.current) {
  30. setStatus('loading');
  31. } else if (isError) {
  32. setStatus('normal');
  33. }
  34. }, [src]);
  35. var onLoad = function onLoad() {
  36. setStatus('normal');
  37. };
  38. var getImgRef = function getImgRef(img) {
  39. isLoaded.current = false;
  40. if (status === 'loading' && img !== null && img !== void 0 && img.complete && (img.naturalWidth || img.naturalHeight)) {
  41. isLoaded.current = true;
  42. onLoad();
  43. }
  44. };
  45. var srcAndOnload = isError && fallback ? {
  46. src: fallback
  47. } : {
  48. onLoad: onLoad,
  49. src: src
  50. };
  51. return [getImgRef, srcAndOnload, status];
  52. }