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

🌈 React Native UI library

"use strict";

import { CrossOutline, CrossCircleOutline } from '@fruits-chain/icons-react-native';
import isNil from 'lodash/isNil';
import React, { useMemo, memo } from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import { varCreator as varCreatorButton } from "../button/style.js";
import LoadingCircular from "../loading/loading-circular.js";
import Locale from "../locale/index.js";
import Theme from "../theme/index.js";
import { varCreator } from "./style.js";
import { styleCreator } from "./style.image.js";

/**
 * UploaderImage 文件上传的缩略图
 */
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const UploaderImage = ({
  theme,
  filepath,
  status = 'done',
  imageComponent: ImageComponent = Image,
  deletable = true,
  size,
  marginRight,
  marginBottom,
  onPress,
  onPressDelete,
  isUpload,
  children
}) => {
  const locale = Locale.useLocale().UploaderImage;
  const [CV, STYLES] = Theme.useStyle({
    varCreator,
    styleCreator,
    theme
  });
  const [CV_BUTTON] = Theme.useStyle({
    varCreator: varCreatorButton
  });
  const customSizeStyle = useMemo(() => ({
    width: size,
    height: size
  }), [size]);
  const customStyle = useMemo(() => ({
    width: size,
    height: size,
    marginRight: marginRight,
    marginBottom: marginBottom
  }), [size, marginRight, marginBottom]);
  const canPress = isUpload || !!filepath && (status === 'done' || status === 'error');
  return /*#__PURE__*/_jsx(TouchableOpacity, {
    style: [STYLES.image, customStyle],
    onPress: canPress ? onPress : undefined,
    activeOpacity: canPress ? CV_BUTTON.button_active_opacity : 1,
    children: !isNil(children) ? children : /*#__PURE__*/_jsxs(_Fragment, {
      children: [/*#__PURE__*/_jsx(ImageComponent, {
        style: customSizeStyle,
        source: {
          uri: filepath
        }
      }), deletable && status !== 'loading' ? /*#__PURE__*/_jsx(CrossOutline, {
        size: CV.uploader_image_delete_size - 4,
        color: "#fff",
        onPress: onPressDelete,
        style: STYLES.delete
      }) : null, status === 'loading' ? /*#__PURE__*/_jsxs(View, {
        style: STYLES.mask,
        children: [/*#__PURE__*/_jsx(LoadingCircular, {
          color: "#fff",
          size: 20
        }), /*#__PURE__*/_jsx(Text, {
          style: STYLES.mask_text,
          children: locale.labelIng
        })]
      }) : null, status === 'error' ? /*#__PURE__*/_jsxs(View, {
        style: STYLES.mask,
        children: [/*#__PURE__*/_jsx(CrossCircleOutline, {
          color: "#fff",
          size: 20
        }), /*#__PURE__*/_jsx(Text, {
          style: STYLES.mask_text,
          children: locale.labelFail
        })]
      }) : null]
    })
  });
};
export default /*#__PURE__*/memo(UploaderImage);
//# sourceMappingURL=uploader-image.js.map