react-native-autosize-image/cache.js at master · egorshulga/react-native-autosize-image · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/**
 * @since 2017-04-24 20:50:41
 * @author vivaxy
 */

import { Image } from 'react-native';
// undocumented but part of react-native; see
// https://github.com/facebook/react-native/issues/5603#issuecomment-297959695
import resolveAssetSource from 'react-native/Libraries/Image/resolveAssetSource';

/**
 * store with
 *  key: image
 *  value: {
 *      width: 100,
 *      height: 100,
 *  }
 */
const cache = new Map();

const getImageSizeFromCache = (image) => {
  if (typeof image === 'number') {
    return cache.get(image);
  } else {
    return cache.get(image.uri);
  }
};

const loadImageSize = (image) => {
  return new Promise((resolve, reject) => {
    //number indicates import X or require(X) was used (i.e. local file)
    if (typeof image === 'number') {
      const { width, height } = resolveAssetSource(image);
      resolve({ width, height });
    } else {
      Image.getSize(
        image.uri,
        (width, height) => {
          // success
          resolve({ width, height });
        },
        reject
      );
    }
  });
};

export const getImageSizeFitMainAxisSizeFromCache = (
  image,
  mainAxis,
  toMainAxisSize,
  maxCrossAxisSize
) => {
  const size = getImageSizeFromCache(image);
  if (size) {
    const { width, height } = size;
    if (!width || !height) return { width: 0, height: 0 };
    if (mainAxis === 'horizontal') {
      const scaledHeight = (toMainAxisSize * height) / width;
      return {
        width: toMainAxisSize,
        height:
          scaledHeight > maxCrossAxisSize ? maxCrossAxisSize : scaledHeight
      };
    } else {
      const scaledWidth = (toMainAxisSize * width) / height;
      return {
        width: scaledWidth > maxCrossAxisSize ? maxCrossAxisSize : scaledWidth,
        height: toMainAxisSize
      };
    }
  }
  return {};
};

const getImageSizeMaybeFromCache = async (image) => {
  let size = getImageSizeFromCache(image);
  if (!size) {
    size = await loadImageSize(image);
    if (typeof image === 'number') {
      cache.set(image, size);
    } else {
      cache.set(image.uri, size);
    }
  }
  return size;
};

export const getImageSizeFitMainAxisSize = async (
  image,
  mainAxis,
  toMainAxisSize,
  maxCrossAxisSize
) => {
  const { width, height } = await getImageSizeMaybeFromCache(image);
  if (!width || !height) return { width: 0, height: 0 };
  if (mainAxis === 'horizontal') {
    const scaledHeight = (toMainAxisSize * height) / width;
    return {
      width: toMainAxisSize,
      height: scaledHeight > maxCrossAxisSize ? maxCrossAxisSize : scaledHeight
    };
  } else {
    const scaledWidth = (toMainAxisSize * width) / height;
    return {
      width: scaledWidth > maxCrossAxisSize ? maxCrossAxisSize : scaledWidth,
      height: toMainAxisSize
    };
  }
};