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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { Pressable, ScrollView, StyleSheet, View, Modal as ReactModal } from 'react-native';
import { zIndexes } from '../../styles/z-index';
import { modalPresentations } from '../../constants/constants';
import { getColor } from '../../styles/colors';
import { Overlay } from '../Overlay';
import { Text } from '../Text';
import { pressableFeedbackStyle } from '../../helpers';
import { SafeAreaWrapper } from '../SafeAreaWrapper';

/** Props for Modal component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Modal component for showing a center modal (overlay) with info and call to actions
 *
 * Multiple React Modals are not currently supported in React Native.
 * However, you can open a modal from within a modal. Just not side by side.
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Modal.tsx | Example code}
 */
export class Modal extends React.Component {
  get styles() {
    const baseButtonStyle = {
      height: 72,
      padding: 16,
      paddingTop: 13,
      flex: 1
    };
    return StyleSheet.create({
      modal: {
        zIndex: zIndexes.modal
      },
      safeAreaWrapper: {
        position: 'relative',
        flexGrow: 1
      },
      blurBackground: {
        zIndex: zIndexes.behind,
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        flex: 1
      },
      wrapper: {
        marginTop: 'auto',
        marginBottom: 'auto',
        backgroundColor: getColor('layer01'),
        alignSelf: 'center',
        marginRight: 16,
        marginLeft: 16,
        minWidth: 320
      },
      headerArea: {
        padding: 16
      },
      description: {
        marginTop: 16
      },
      content: {
        flexGrow: 0,
        padding: 16,
        paddingBottom: 48
      },
      actions: {
        flexDirection: 'row'
      },
      secondaryButton: {
        backgroundColor: getColor('buttonSecondary'),
        ...baseButtonStyle
      },
      primaryButton: {
        backgroundColor: getColor('buttonPrimary'),
        ...baseButtonStyle
      },
      buttonText: {
        color: getColor('textOnColor')
      }
    });
  }
  getPrimaryStateStyle = state => {
    return state.pressed ? {
      backgroundColor: getColor('buttonPrimaryActive')
    } : undefined;
  };
  getSecondaryStateStyle = state => {
    return state.pressed ? {
      backgroundColor: getColor('buttonSecondaryActive')
    } : undefined;
  };
  render() {
    const {
      open,
      title,
      description,
      primaryActionOnPress,
      primaryActionText,
      secondaryActionOnPress,
      secondaryActionText,
      children
    } = this.props;
    if (!open) {
      return null;
    }
    const hasPrimary = typeof primaryActionOnPress === 'function' && !!primaryActionText;
    const hasSecondary = typeof secondaryActionOnPress === 'function' && !!secondaryActionText;
    return /*#__PURE__*/_jsxs(ReactModal, {
      style: this.styles.modal,
      supportedOrientations: modalPresentations,
      transparent: true,
      children: [/*#__PURE__*/_jsx(Overlay, {
        style: this.styles.blurBackground
      }), /*#__PURE__*/_jsx(SafeAreaWrapper, {
        style: this.styles.safeAreaWrapper,
        children: /*#__PURE__*/_jsxs(View, {
          style: this.styles.wrapper,
          children: [/*#__PURE__*/_jsxs(View, {
            style: this.styles.headerArea,
            children: [/*#__PURE__*/_jsx(Text, {
              type: "heading-03",
              text: title
            }), !!description && /*#__PURE__*/_jsx(Text, {
              style: this.styles.description,
              type: "helper-text-01",
              text: description
            })]
          }), /*#__PURE__*/_jsx(ScrollView, {
            bounces: false,
            style: this.styles.content,
            children: children
          }), (hasPrimary || hasSecondary) && /*#__PURE__*/_jsxs(View, {
            style: this.styles.actions,
            children: [hasSecondary && /*#__PURE__*/_jsx(Pressable, {
              onPress: secondaryActionOnPress,
              style: state => pressableFeedbackStyle(state, this.styles.secondaryButton, this.getSecondaryStateStyle),
              accessibilityLabel: secondaryActionText,
              accessibilityRole: "button",
              children: /*#__PURE__*/_jsx(Text, {
                style: this.styles.buttonText,
                text: secondaryActionText
              })
            }), hasPrimary && /*#__PURE__*/_jsx(Pressable, {
              onPress: primaryActionOnPress,
              style: state => pressableFeedbackStyle(state, this.styles.primaryButton, this.getPrimaryStateStyle),
              accessibilityLabel: primaryActionText,
              accessibilityRole: "button",
              children: /*#__PURE__*/_jsx(Text, {
                style: this.styles.buttonText,
                text: primaryActionText
              })
            })]
          })]
        })
      })]
    });
  }
}
//# sourceMappingURL=index.js.map