react-native-surveys/Forms/components/FilePreview.js

Build your own forms, surveys and polls for your React Native apps.

import React, { memo, useState } from "react";
import {
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
  Dimensions
} from "react-native";
import { colors } from "../theme";
import { CloseIcon } from "../assets/icons";
import ScalableImage from "./ScalableImage";
const { width } = Dimensions.get("window");
const isMobile = width <= 500;

const FilePreview = ({ file, removeFile, isPreview }) => {
  const [showRemove, setRemove] = useState(isMobile);
  const isImage = file.type ? file.type.includes("image") : false;
  const fileExtension = file.name ? file.name.split(".")[1] : "?";

  const onRemoveClick = e => {
    e.stopPropagation();
    e.preventDefault();
    removeFile(file);
  };

  if (isPreview) {
    return React.createElement(
      "a",
      {
        style: {
          textDecoration: "none"
        },
        href: file.url,
        rel: "noopener noreferrer",
        target: "_blank"
      },
      isImage
        ? React.createElement(ScalableImage, {
            width: 72,
            height: 72,
            style: styles.imageContainer,
            source: {
              uri: file.url
            }
          })
        : React.createElement(
            View,
            {
              style: styles.fileContainer
            },
            React.createElement(
              Text,
              {
                style: styles.fileType
              },
              fileExtension
            ),
            React.createElement(
              Text,
              {
                style: styles.placeholder
              },
              file.name
            )
          )
    );
  }

  return React.createElement(
    View,
    {
      onMouseEnter: () => setRemove(true),
      onMouseLeave: () => setRemove(false)
    },
    isImage
      ? React.createElement(ScalableImage, {
          width: 72,
          height: 72,
          style: styles.imageContainer,
          source: {
            uri: file.preview
          }
        })
      : React.createElement(
          View,
          {
            style: styles.fileContainer
          },
          React.createElement(
            Text,
            {
              style: styles.fileType
            },
            fileExtension
          ),
          React.createElement(
            Text,
            {
              style: styles.placeholder
            },
            file.name
          )
        ),
    showRemove &&
      React.createElement(
        TouchableOpacity,
        {
          style: styles.closeButton,
          onPress: onRemoveClick
        },
        React.createElement(CloseIcon, {
          size: isMobile ? 20 : 16,
          white: true
        })
      )
  );
};

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  fileContainer: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 4,
    marginRight: 12,
    padding: 8,
    borderRadius: 4,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: colors.border
  },
  placeholder: {
    fontSize: 13,
    color: colors.darkgrey,
    paddingLeft: 6
  },
  fileType: {
    textTransform: "uppercase",
    color: "#ffffff",
    backgroundColor: colors.required,
    textAlign: "center",
    width: 20,
    lineHeight: 20,
    fontSize: 9,
    fontWeight: "bold",
    borderRadius: 2
  },
  imageContainer: {
    maxWidth: 92,
    maxHeight: 92,
    marginVertical: 4,
    marginRight: 12,
    borderRadius: 4,
    borderWidth: 1,
    borderStyle: "solid",
    borderColor: colors.border
  },
  closeButton: {
    position: "absolute",
    top: isMobile ? -8 : -4,
    right: isMobile ? 0 : 4,
    borderRadius: 16,
    backgroundColor: colors.primary,
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }
});
export default memo(FilePreview);