@prosperitainova/dumbo-react-native/lib/module/components/FileUploaderItem/index.js

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { getColor } from '../../styles/colors';
import { createIcon, styleReferenceBreaker } from '../../helpers';
import { Text } from '../Text';
import { Button } from '../Button';
import { defaultText } from '../../constants/defaultText';
import CloseIcon from '@carbon/icons/es/close/20';
import WarningFilledIcon from '@carbon/icons/es/warning--filled/20';
import CheckmarkFilledIcon from '@carbon/icons/es/checkmark--filled/20';
import { Loading } from '../Loading';

/** Props for FileUploaderItem component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * FileUploaderItem component for rendering an item that has been uploaded or will be
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/FileUploaderItem.tsx | Example code}
 */
export class FileUploaderItem extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        backgroundColor: getColor('layer01')
      },
      mainWrapper: {
        flexDirection: 'row',
        minHeight: 48
      },
      text: {
        padding: 13,
        paddingRight: 16,
        paddingLeft: 16,
        flex: 1
      },
      indicator: {
        paddingLeft: 13,
        paddingTop: 14,
        height: 48,
        width: 48
      },
      loadingIndicator: {
        marginTop: 4,
        marginLeft: 3
      },
      errorWrapper: {
        borderTopColor: getColor('borderSubtle01'),
        borderTopWidth: 1,
        padding: 16,
        paddingTop: 15,
        paddingBottom: 15
      },
      errorTitle: {
        color: getColor('supportError')
      }
    });
  }
  get visualIndicator() {
    const {
      status,
      invalid
    } = this.props;
    if (invalid) {
      return /*#__PURE__*/_jsx(View, {
        style: this.styles.indicator,
        children: createIcon(WarningFilledIcon, 20, 20, getColor('supportError'))
      });
    } else if (status === 'uploading') {
      return /*#__PURE__*/_jsx(View, {
        style: this.styles.indicator,
        children: /*#__PURE__*/_jsx(Loading, {
          style: this.styles.loadingIndicator,
          type: "small"
        })
      });
    } else if (status === 'complete') {
      return /*#__PURE__*/_jsx(View, {
        style: this.styles.indicator,
        children: createIcon(CheckmarkFilledIcon, 20, 20, getColor('supportInfo'))
      });
    }
    return null;
  }
  get deleteItem() {
    const {
      status,
      invalid,
      onDelete,
      deleteFileButtonText
    } = this.props;
    if (typeof onDelete === 'function') {
      if (invalid || !status || status === 'edit') {
        return /*#__PURE__*/_jsx(Button, {
          kind: "ghost",
          overrideColor: getColor('iconPrimary'),
          text: deleteFileButtonText || defaultText.deleteFile,
          iconOnlyMode: true,
          icon: CloseIcon,
          onPress: onDelete
        });
      }
    }
    return null;
  }
  get errorArea() {
    const {
      errorDetails,
      errorTitle,
      invalid
    } = this.props;
    if (invalid && (errorDetails || errorTitle)) {
      return /*#__PURE__*/_jsxs(View, {
        style: this.styles.errorWrapper,
        children: [!!errorTitle && /*#__PURE__*/_jsx(Text, {
          style: this.styles.errorTitle,
          text: errorTitle
        }), !!errorDetails && /*#__PURE__*/_jsx(Text, {
          text: errorDetails
        })]
      });
    }
    return null;
  }
  render() {
    const {
      componentProps,
      style,
      name
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: styleReferenceBreaker(this.styles.wrapper, style),
      ...(componentProps || {}),
      children: [/*#__PURE__*/_jsxs(View, {
        style: this.styles.mainWrapper,
        children: [/*#__PURE__*/_jsx(Text, {
          style: this.styles.text,
          text: name,
          breakMode: "middle"
        }), this.visualIndicator, this.deleteItem]
      }), this.errorArea]
    });
  }
}
//# sourceMappingURL=index.js.map