@fruits-chain/react-native-xiaoshu/lib/module/uploader/useImageLayout.js

🌈 React Native UI library

"use strict";

import { useCallback, useState, useRef } from 'react';
const isLastCol = (total, colCount, index) => {
  const totalCol = Math.ceil(total / colCount);
  const col = Math.ceil((index + 1) / colCount);
  return totalCol === col;
};
const useImageLayout = () => {
  const [width, setWidth] = useState(0);
  const Size = useRef({});
  const Margin = useRef({});
  const onLayout = useCallback(e => {
    setWidth(Math.floor(e.nativeEvent.layout.width));
  }, []);
  const getSize = useCallback((colCount, colGap) => {
    const sizeKey = [width, colCount, colGap].join('_');
    if (!Size.current[sizeKey]) {
      Size.current[sizeKey] = (width - (colCount - 1) * colGap) / colCount;
    }
    return Size.current[sizeKey];
  }, [width]);

  /**
   * 获取当前的尺寸、边距
   */
  const getMargin = useCallback((total, colCount, index) => {
    const cacheKey = [total, colCount, index].join('_');
    if (!Margin.current[cacheKey]) {
      const marginRight = (index + 1) % colCount === 0 ? false : true;
      const marginBottom = !isLastCol(total, colCount, index);
      Margin.current[cacheKey] = {
        marginRight,
        marginBottom
      };
    }
    return Margin.current[cacheKey];
  }, []);
  return [onLayout, getSize, getMargin];
};
export default useImageLayout;
//# sourceMappingURL=useImageLayout.js.map