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

🌈 React Native UI library

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';
import { getDefaultValue } from '../helpers';
import CrossOutline from '../icon/cross';
import CrossCircleOutline from '../icon/cross-circle';
import LoadingCircular from '../loading/loading-circular';
import Locale from '../locale';
import Theme from '../theme';
import { varCreator } from './style';
import { styleCreator } from './style.image';
/**
 * UploaderImage 文件上传的缩略图
 */

const UploaderImage = _ref => {
  let {
    filepath,
    status = 'done',
    imageComponent: ImageComponent = Image,
    deletable = true,
    size = 80,
    gap,
    onPress,
    onPressDelete,
    isUpload,
    children
  } = _ref;
  const locale = Locale.useLocale().UploaderImage;
  const TOKENS = Theme.useThemeTokens();
  const CV = Theme.createVar(TOKENS, varCreator);
  const CV_BUTTON = Theme.createVar(TOKENS, varCreatorButton);
  const STYLES = Theme.createStyle(CV, styleCreator); // 修正数据

  gap = getDefaultValue(gap, CV.uploader_image_gap);
  const customSizeStyle = useMemo(() => ({
    width: size,
    height: size
  }), [size]);
  const customStyle = useMemo(() => ({
    width: size,
    height: size,
    marginRight: gap,
    marginBottom: gap
  }), [size, gap]);
  const canPress = isUpload || !!filepath && (status === 'done' || status === 'error');
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    style: [STYLES.image, customStyle],
    onPress: canPress ? onPress : undefined,
    activeOpacity: canPress ? CV_BUTTON.button_active_opacity : 1
  }, !isNil(children) ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImageComponent, {
    style: customSizeStyle,
    source: {
      uri: filepath
    }
  }), deletable && status !== 'loading' ? /*#__PURE__*/React.createElement(CrossOutline, {
    size: CV.uploader_image_delete_size - 4,
    color: "#fff",
    onPress: onPressDelete,
    style: STYLES.delete
  }) : null, status === 'loading' ? /*#__PURE__*/React.createElement(View, {
    style: STYLES.mask
  }, /*#__PURE__*/React.createElement(LoadingCircular, {
    color: "#fff",
    size: 20
  }), /*#__PURE__*/React.createElement(Text, {
    style: STYLES.mask_text
  }, locale.labelIng)) : null, status === 'error' ? /*#__PURE__*/React.createElement(View, {
    style: STYLES.mask
  }, /*#__PURE__*/React.createElement(CrossCircleOutline, {
    color: "#fff",
    size: 20
  }), /*#__PURE__*/React.createElement(Text, {
    style: STYLES.mask_text
  }, locale.labelFail)) : null));
};

export default /*#__PURE__*/memo(UploaderImage);
//# sourceMappingURL=uploader-image.js.map