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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, Modal as ReactModal, View, Dimensions, Image, ScrollView } from 'react-native';
import { getColor } from '../../styles/colors';
import { modalPresentations } from '../../constants/constants';
import { styleReferenceBreaker } from '../../helpers';
import { zIndexes } from '../../styles/z-index';
import { Button } from '../Button';
import { Text } from '../Text';
import { SafeAreaWrapper } from '../SafeAreaWrapper';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const cameraPermissionImage = require('./camera_permission.png');
const filePermissionImage = require('./file_permission.png');
const locationPermissionImage = require('./location_permission.png');
const notificationsPermissionImage = require('./notifications_permission.png');

/** Props for GrantPermission component */

/**
 * GrantPermission component for showing the grant device permission flow
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/GrantPermission.tsx | Example code}
 */
export class GrantPermission extends React.Component {
  get wideScreen() {
    const width = Dimensions.get('window').width;
    return width >= 500;
  }
  get styles() {
    return StyleSheet.create({
      modal: {
        zIndex: zIndexes.permissions
      },
      safeAreaWrapper: {
        backgroundColor: getColor('background'),
        position: 'relative',
        flexGrow: 1
      },
      wrapper: {
        flexGrow: 1,
        padding: 16
      },
      contentWrapper: {
        flex: 1,
        paddingTop: this.wideScreen ? 32 : 64
      },
      contentWrapperScroll: {
        flexDirection: this.wideScreen ? 'row' : 'column',
        justifyContent: 'flex-start'
      },
      textWrapper: {
        flex: 1
      },
      title: {
        marginBottom: 16
      },
      reasoning: {},
      image: {
        width: 300,
        height: 300,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: this.wideScreen ? 0 : 16
      },
      action: {
        marginTop: 16
      }
    });
  }
  accept = () => {
    const {
      resultsCallback
    } = this.props;
    if (typeof resultsCallback === 'function') {
      resultsCallback(true);
    }
  };
  reject = () => {
    const {
      resultsCallback
    } = this.props;
    if (typeof resultsCallback === 'function') {
      resultsCallback(false);
    }
  };
  get imageSource() {
    const {
      customImage,
      type
    } = this.props;
    if (customImage) {
      return customImage;
    }
    switch (type) {
      case 'camera':
        return cameraPermissionImage;
      case 'location':
        return locationPermissionImage;
      case 'notifications':
        return notificationsPermissionImage;
      case 'files':
      default:
        return filePermissionImage;
    }
  }
  componentWillUnmount() {
    if (this.resizeEvent && typeof this.resizeEvent.remove === 'function') {
      this.resizeEvent.remove();
    }
  }
  componentDidMount() {
    this.resizeEvent = Dimensions.addEventListener('change', () => {
      this.setState({});
    });
  }
  render() {
    const {
      componentProps,
      style,
      title,
      reasoning,
      additionalReasoning,
      continueText,
      cancelText,
      imageStyle
    } = this.props;
    return /*#__PURE__*/_jsx(ReactModal, {
      style: this.styles.modal,
      supportedOrientations: modalPresentations,
      transparent: true,
      animationType: "slide",
      children: /*#__PURE__*/_jsx(SafeAreaWrapper, {
        style: this.styles.safeAreaWrapper,
        children: /*#__PURE__*/_jsxs(View, {
          style: styleReferenceBreaker(this.styles.wrapper, style),
          ...(componentProps || {}),
          children: [/*#__PURE__*/_jsxs(ScrollView, {
            keyboardShouldPersistTaps: "handled",
            contentInsetAdjustmentBehavior: "automatic",
            bounces: false,
            style: this.styles.contentWrapper,
            contentContainerStyle: this.styles.contentWrapperScroll,
            children: [/*#__PURE__*/_jsxs(View, {
              style: this.styles.textWrapper,
              children: [/*#__PURE__*/_jsx(Text, {
                style: this.styles.title,
                text: title,
                type: "heading-05"
              }), /*#__PURE__*/_jsx(Text, {
                style: this.styles.reasoning,
                text: reasoning,
                type: "body-02"
              }), !!additionalReasoning && /*#__PURE__*/_jsx(Text, {
                style: this.styles.reasoning,
                text: additionalReasoning,
                type: "body-02"
              })]
            }), /*#__PURE__*/_jsx(Image, {
              resizeMode: "contain",
              style: styleReferenceBreaker(this.styles.image, imageStyle),
              source: this.imageSource
            })]
          }), /*#__PURE__*/_jsx(Button, {
            style: this.styles.action,
            onPress: this.accept,
            text: continueText
          }), /*#__PURE__*/_jsx(Button, {
            style: this.styles.action,
            kind: "secondary",
            onPress: this.reject,
            text: cancelText
          })]
        })
      })
    });
  }
}
//# sourceMappingURL=index.js.map