useStatus.js 1.9 KB

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