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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FileUploaderItem = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _Text = require("../Text");
var _Button = require("../Button");
var _defaultText = require("../../constants/defaultText");
var _ = _interopRequireDefault(require("@carbon/icons/es/close/20"));
var _2 = _interopRequireDefault(require("@carbon/icons/es/warning--filled/20"));
var _3 = _interopRequireDefault(require("@carbon/icons/es/checkmark--filled/20"));
var _Loading = require("../Loading");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for FileUploaderItem component */

/**
 * 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}
 */
class FileUploaderItem extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      wrapper: {
        backgroundColor: (0, _colors.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: (0, _colors.getColor)('borderSubtle01'),
        borderTopWidth: 1,
        padding: 16,
        paddingTop: 15,
        paddingBottom: 15
      },
      errorTitle: {
        color: (0, _colors.getColor)('supportError')
      }
    });
  }
  get visualIndicator() {
    const {
      status,
      invalid
    } = this.props;
    if (invalid) {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.indicator,
        children: (0, _helpers.createIcon)(_2.default, 20, 20, (0, _colors.getColor)('supportError'))
      });
    } else if (status === 'uploading') {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.indicator,
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {
          style: this.styles.loadingIndicator,
          type: "small"
        })
      });
    } else if (status === 'complete') {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: this.styles.indicator,
        children: (0, _helpers.createIcon)(_3.default, 20, 20, (0, _colors.getColor)('supportInfo'))
      });
    }
    return null;
  }
  get deleteItem() {
    const {
      status,
      invalid,
      onDelete,
      deleteFileButtonText
    } = this.props;
    if (typeof onDelete === 'function') {
      if (invalid || !status || status === 'edit') {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
          kind: "ghost",
          overrideColor: (0, _colors.getColor)('iconPrimary'),
          text: deleteFileButtonText || _defaultText.defaultText.deleteFile,
          iconOnlyMode: true,
          icon: _.default,
          onPress: onDelete
        });
      }
    }
    return null;
  }
  get errorArea() {
    const {
      errorDetails,
      errorTitle,
      invalid
    } = this.props;
    if (invalid && (errorDetails || errorTitle)) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: this.styles.errorWrapper,
        children: [!!errorTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
          style: this.styles.errorTitle,
          text: errorTitle
        }), !!errorDetails && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
          text: errorDetails
        })]
      });
    }
    return null;
  }
  render() {
    const {
      componentProps,
      style,
      name
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
      ...(componentProps || {}),
      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: this.styles.mainWrapper,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
          style: this.styles.text,
          text: name,
          breakMode: "middle"
        }), this.visualIndicator, this.deleteItem]
      }), this.errorArea]
    });
  }
}
exports.FileUploaderItem = FileUploaderItem;
//# sourceMappingURL=index.js.map