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

🌈 React Native UI library

"use strict";

import { PlusOutline } from '@fruits-chain/icons-react-native';
import isNil from 'lodash/isNil';
import React, { useMemo } from 'react';
import { View, Text, Image } from 'react-native';
import { usePersistFn } from "../hooks/index.js";
import Locale from "../locale/index.js";
import Theme from "../theme/index.js";
import { varCreator, styleCreator } from "./style.js";
import UploaderImage from "./uploader-image.js";
import useImageLayout from "./useImageLayout.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const UploaderRegular = ({
  theme,
  list,
  imageComponent = Image,
  colCount = 4,
  colGap = 'm',
  onPressImage,
  onPressDelete,
  onPressError,
  count,
  onPressUpload,
  deletable = true,
  style,
  onLayout,
  ...restProps
}) => {
  const locale = Locale.useLocale().Uploader;
  const [CV, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  const [onLayoutWrapper, getSizeImage, getMarginImage] = useImageLayout();
  const onLayoutView = usePersistFn(e => {
    onLayoutWrapper(e);
    onLayout?.(e);
  });
  const showList = useMemo(() => {
    return (typeof count === 'number' ? new Array(count).fill(null) : count).map((item, index) => {
      const _i = item || {};
      const text = _i.text ?? locale.uploadText;
      const icon = _i.icon || /*#__PURE__*/_jsx(PlusOutline, {
        color: CV.uploader_upload_text_color,
        pointerEvents: "none"
      });
      const data = list[index];
      return {
        text,
        icon,
        data
      };
    });
  }, [CV.uploader_upload_text_color, count, list, locale.uploadText]);
  const genOnPressDelete = (item, index) => () => {
    onPressDelete?.(item, index, list);
  };
  const genOnPressImage = (item, index) => () => {
    const onPressCallback = item.status === 'error' ? onPressError : onPressImage;
    onPressCallback?.(item, index, list);
  };
  const genOnPressUpload = index => () => {
    onPressUpload?.(index);
  };
  const imageGap = typeof colGap === 'number' ? colGap : CV[`uploader_image_gap_${colGap}`];
  const imageSize = getSizeImage(colCount, imageGap);
  const total = showList.length;
  return /*#__PURE__*/_jsx(View, {
    ...restProps,
    style: style ? [STYLES.uploader, style] : STYLES.uploader,
    onLayout: onLayoutView,
    children: showList.map((item, index) => {
      if (item.data) {
        return /*#__PURE__*/_jsx(UploaderImage, {
          filepath: item.data.filepath,
          status: item.data.status,
          imageComponent: imageComponent,
          deletable: isNil(item.data?.deletable) ? deletable : item.data.deletable,
          size: imageSize,
          marginRight: getMarginImage(total, colCount, index).marginRight ? imageGap : undefined,
          marginBottom: getMarginImage(total, colCount, index).marginBottom ? imageGap : undefined,
          onPress: genOnPressImage(item.data, index),
          onPressDelete: genOnPressDelete(item.data, index)
        }, item.data?.key || index);
      }
      return /*#__PURE__*/_jsxs(UploaderImage, {
        isUpload: true,
        size: imageSize,
        marginRight: getMarginImage(total, colCount, index).marginRight ? imageGap : undefined,
        marginBottom: getMarginImage(total, colCount, index).marginBottom ? imageGap : undefined,
        onPress: genOnPressUpload(index),
        children: [item.icon, /*#__PURE__*/_jsx(Text, {
          style: STYLES.upload_text,
          children: item.text
        })]
      }, index);
    })
  });
};
export default UploaderRegular;
//# sourceMappingURL=uploader-regular.js.map