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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LandingView = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _ = _interopRequireDefault(require("@carbon/icons/es/arrow--right/20"));
var _colors = require("../../styles/colors");
var _Button = require("../Button");
var _Text = require("../Text");
var _Link = require("../Link");
var _helpers = require("../../helpers");
var _ViewWrapper = require("../ViewWrapper");
var _typography = require("../../styles/typography");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for LandingView component */

/**
 * LandingView component for showing the IBM app landing page
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/LandingView.tsx | Example code}
 */
class LandingView extends _react.default.Component {
  get styles() {
    return _reactNative.StyleSheet.create({
      view: {
        flex: 1,
        backgroundColor: (0, _colors.getColor)('background')
      },
      container: {
        flex: 1,
        padding: 16,
        paddingBottom: 16
      },
      logoArea: {
        backgroundColor: '#000000',
        height: 192
      },
      companyImage: {
        width: 61,
        height: 24,
        position: 'absolute',
        top: 16,
        right: 16
      },
      productImage: {
        height: 96,
        width: 96,
        position: 'absolute',
        bottom: 16,
        left: 16
      },
      privacyPolicyLink: {
        alignSelf: 'flex-start'
      },
      title: {
        marginBottom: 16,
        ...(0, _typography.SemiBoldFont)()
      },
      helperContent: {},
      contentWrapper: {
        flex: 1,
        flexGrow: 1
      },
      actionWrapper: {
        marginTop: 32
      }
    });
  }
  get heightSafe() {
    const height = _reactNative.Dimensions.get('window').height;
    return height >= 500;
  }
  get banner() {
    const {
      companyImage,
      productImage,
      productImageSize,
      companyImageSize
    } = this.props;
    const companyImageStyle = (0, _helpers.styleReferenceBreaker)(this.styles.companyImage);
    const productImageStyle = (0, _helpers.styleReferenceBreaker)(this.styles.productImage);
    if (companyImageSize) {
      companyImageStyle.width = companyImageSize.width;
      companyImageStyle.height = companyImageSize.height;
    }
    if (productImageSize) {
      productImageStyle.width = productImageSize.width;
      productImageStyle.height = productImageSize.height;
    }
    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
      style: this.styles.logoArea,
      children: [companyImage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
        resizeMode: "contain",
        style: companyImageStyle,
        source: companyImage
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Image, {
        resizeMode: "contain",
        style: productImageStyle,
        source: productImage
      })]
    });
  }
  componentDidMount() {
    this.resizeEvent = _reactNative.Dimensions.addEventListener('change', () => {
      this.setState({});
    });
  }
  componentWillUnmount() {
    if (this.resizeEvent && typeof this.resizeEvent.remove === 'function') {
      this.resizeEvent.remove();
    }
  }
  render() {
    const {
      longProductName,
      copyrightText,
      versionText,
      privacyPolicyText,
      privacyPolicyOnPress,
      privacyPolicyOnLongPress,
      continueText,
      continueOnLongPress,
      continueOnPress,
      continueDisabled
    } = this.props;
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewWrapper.ViewWrapper, {
      topBackgroundColor: this.heightSafe ? '#000000' : (0, _colors.getColor)('background'),
      bottomBackgroundColor: (0, _colors.getColor)('background'),
      statusBarStyle: this.heightSafe ? 'light-content' : undefined,
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: this.styles.view,
        children: [this.heightSafe && this.banner, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
          style: this.styles.container,
          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
            style: this.styles.contentWrapper,
            bounces: false,
            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
              style: this.styles.title,
              text: longProductName,
              type: "heading-04"
            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
              style: this.styles.helperContent,
              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
                text: versionText
              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
                text: copyrightText
              })]
            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
              children: !!(privacyPolicyText && privacyPolicyOnPress) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
                style: this.styles.privacyPolicyLink,
                onPress: privacyPolicyOnPress,
                onLongPress: privacyPolicyOnLongPress,
                text: privacyPolicyText,
                textType: "body-compact-02"
              })
            })]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
            style: this.styles.actionWrapper,
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
              kind: "primary",
              disabled: continueDisabled,
              icon: _.default,
              onPress: continueOnPress,
              onLongPress: continueOnLongPress,
              text: continueText
            })
          })]
        })]
      })
    });
  }
}
exports.LandingView = LandingView;
//# sourceMappingURL=index.js.map