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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Modal = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _zIndex = require("../../styles/z-index");
var _constants = require("../../constants/constants");
var _colors = require("../../styles/colors");
var _Overlay = require("../Overlay");
var _Text = require("../Text");
var _helpers = require("../../helpers");
var _SafeAreaWrapper = require("../SafeAreaWrapper");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for Modal component */

/**
 * 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}
 */
class Modal extends _react.default.Component {
  get styles() {
    const baseButtonStyle = {
      height: 72,
      padding: 16,
      paddingTop: 13,
      flex: 1
    };
    return _reactNative.StyleSheet.create({
      modal: {
        zIndex: _zIndex.zIndexes.modal
      },
      safeAreaWrapper: {
        position: 'relative',
        flexGrow: 1
      },
      blurBackground: {
        zIndex: _zIndex.zIndexes.behind,
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        flex: 1
      },
      wrapper: {
        marginTop: 'auto',
        marginBottom: 'auto',
        backgroundColor: (0, _colors.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: (0, _colors.getColor)('buttonSecondary'),
        ...baseButtonStyle
      },
      primaryButton: {
        backgroundColor: (0, _colors.getColor)('buttonPrimary'),
        ...baseButtonStyle
      },
      buttonText: {
        color: (0, _colors.getColor)('textOnColor')
      }
    });
  }
  getPrimaryStateStyle = state => {
    return state.pressed ? {
      backgroundColor: (0, _colors.getColor)('buttonPrimaryActive')
    } : undefined;
  };
  getSecondaryStateStyle = state => {
    return state.pressed ? {
      backgroundColor: (0, _colors.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__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
      style: this.styles.modal,
      supportedOrientations: _constants.modalPresentations,
      transparent: true,
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
        style: this.styles.blurBackground
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SafeAreaWrapper.SafeAreaWrapper, {
        style: this.styles.safeAreaWrapper,
        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: this.styles.wrapper,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: this.styles.headerArea,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
              type: "heading-03",
              text: title
            }), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
              style: this.styles.description,
              type: "helper-text-01",
              text: description
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
            bounces: false,
            style: this.styles.content,
            children: children
          }), (hasPrimary || hasSecondary) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
            style: this.styles.actions,
            children: [hasSecondary && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
              onPress: secondaryActionOnPress,
              style: state => (0, _helpers.pressableFeedbackStyle)(state, this.styles.secondaryButton, this.getSecondaryStateStyle),
              accessibilityLabel: secondaryActionText,
              accessibilityRole: "button",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
                style: this.styles.buttonText,
                text: secondaryActionText
              })
            }), hasPrimary && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
              onPress: primaryActionOnPress,
              style: state => (0, _helpers.pressableFeedbackStyle)(state, this.styles.primaryButton, this.getPrimaryStateStyle),
              accessibilityLabel: primaryActionText,
              accessibilityRole: "button",
              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
                style: this.styles.buttonText,
                text: primaryActionText
              })
            })]
          })]
        })
      })]
    });
  }
}
exports.Modal = Modal;
//# sourceMappingURL=index.js.map