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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View, Image } from 'react-native';
import { styleReferenceBreaker } from '../../helpers';
import { Text } from '../Text';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const accessImage = require('./access_error.png');
const emptyImage = require('./empty_error.png');
const genericImage = require('./generic_error.png');

/** Types of errors */

/** Props for ErrorState component */

/**
 * ErrorState component for showing an error message and screen
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ErrorState.tsx | Example code}
 */
export class ErrorState extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        flexDirection: 'row',
        flexWrap: 'wrap'
      },
      image: {
        width: 320,
        height: 405,
        margin: 16,
        marginRight: 32
      },
      textWrapper: {
        flex: 1,
        minWidth: 300
      },
      title: {
        marginBottom: 16
      },
      subTitle: {
        marginBottom: 16
      },
      errorCode: {}
    });
  }
  get image() {
    const {
      customImage,
      type
    } = this.props;
    if (customImage) {
      return customImage;
    }
    switch (type) {
      case 'access':
        return accessImage;
      case 'empty':
        return emptyImage;
      case 'generic':
      default:
        return genericImage;
    }
  }
  render() {
    const {
      componentProps,
      style,
      title,
      subTitle,
      errorCode,
      imageStyle,
      noImage
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: styleReferenceBreaker(this.styles.wrapper, style),
      accessibilityLabel: title,
      accessibilityHint: subTitle + ' ' + errorCode,
      accessibilityRole: "summary",
      ...(componentProps || {}),
      children: [!noImage && /*#__PURE__*/_jsx(Image, {
        resizeMode: "contain",
        style: styleReferenceBreaker(this.styles.image, imageStyle),
        source: this.image
      }), /*#__PURE__*/_jsxs(View, {
        style: this.styles.textWrapper,
        children: [/*#__PURE__*/_jsx(Text, {
          style: this.styles.title,
          text: title,
          type: "heading-04"
        }), !!subTitle && /*#__PURE__*/_jsx(Text, {
          style: this.styles.subTitle,
          text: subTitle
        }), !!errorCode && /*#__PURE__*/_jsx(Text, {
          style: this.styles.errorCode,
          text: errorCode,
          type: "code-02"
        })]
      })]
    });
  }
}
//# sourceMappingURL=index.js.map