@hyext-beyond/hy-ui-native/dist/components/MemoryImageMap/index.web.js

A native lib polyfill for huya miniapp

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
// @ts-nocheck
import { UI } from '@hyext/hy-ui';
import React, { useEffect, useState } from 'react';
var View = UI.View,
  BackgroundImage = UI.BackgroundImage,
  Image = UI.Image,
  Text = UI.Text,
  Button = UI.Button,
  ScrollView = UI.ScrollView,
  Modal = UI.Modal,
  Tip = UI.Tip;
var getImageType = function getImageType(url) {
  // rn 开发环境下, url 为 number
  if (typeof url === 'number' || typeof url === 'object') return '';
  if (url.startsWith('data:image/png;') || url.endsWith('.png')) return 'image/png';
  if (url.startsWith('data:image/webp;') || url.endsWith('.webp')) return 'image/webp';
  return 'image/jpeg';
};
var dataUriToBlob = function dataUriToBlob(dataURI) {
  if (!dataURI.startsWith('data:image')) {
    throw new Error('expect arguments to be dataURI');
  }
  var chars = atob(dataURI.split(',')[1]);
  var codes = new Array(chars.length);
  for (var i = 0; i < chars.length; i++) {
    codes[i] = chars.charCodeAt(i);
  }
  return new Blob([new Uint8Array(codes)], {
    type: getImageType(dataURI)
  });
};
function fetchImageAsBlob(url) {
  if (typeof url !== 'string') {
    throw new Error('expect url to be string');
  }
  if (url.startsWith('data:image')) {
    return Promise.resolve(dataUriToBlob(url));
  }
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'blob'; // 设置响应类型为 blob
    xhr.onload = function () {
      if (this.status === 200) {
        var blob = new Blob([this.response], {
          type: getImageType(url)
        });
        resolve(blob);
      } else {
        reject('Failed to retrieve the image.');
      }
    };
    xhr.onerror = function () {
      reject('Network error.');
    };
    xhr.send();
  });
}
var getUrlFromBlog = function getUrlFromBlog(blob) {
  return URL.createObjectURL(blob);
};
var useDataURI = function useDataURI(src, enableMemory) {
  var _useState = useState(),
    uri = _useState[0],
    setUri = _useState[1];
  useEffect(function () {
    var datauri = '';
    var imageExt = getImageType(src).split('/')[1];
    if (!(enableMemory != null && enableMemory.includes(imageExt))) {
      setUri(src);
    } else {
      fetchImageAsBlob(src).then(function (blob) {
        datauri = getUrlFromBlog(blob);
        setUri(datauri);
      })["catch"](function () {
        // fallback to src
        setUri(src);
      });
    }
    return function () {
      setUri('');
      if (datauri) {
        URL.revokeObjectURL(datauri);
      }
    };
  }, [src, enableMemory == null ? void 0 : enableMemory.join(',')]);
  return uri;
};
export var MemoryImage = /*#__PURE__*/React.memo(function (props) {
  var _props$enableMemory;
  var src = props.src;
  var enableMemory = (_props$enableMemory = props.enableMemory) !== null && _props$enableMemory !== void 0 ? _props$enableMemory : ['webp'];
  var uri = useDataURI(src, enableMemory);
  if (!uri) return null;
  return /*#__PURE__*/React.createElement(Image, _extends({}, props, {
    src: uri
  }));
});
export var MemoryBackgroundImage = /*#__PURE__*/React.memo(function (props) {
  var _props$enableMemory2;
  var src = props.src;
  var enableMemory = (_props$enableMemory2 = props.enableMemory) !== null && _props$enableMemory2 !== void 0 ? _props$enableMemory2 : ['webp'];
  var uri = useDataURI(src, enableMemory);
  if (!uri) return null;
  return /*#__PURE__*/React.createElement(BackgroundImage, _extends({}, props, {
    src: uri
  }), props.children);
});
export default {
  MemoryBackgroundImage: MemoryBackgroundImage,
  MemoryImage: MemoryImage
};