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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { View, StyleSheet, Image, Dimensions, ScrollView } from 'react-native';
import ArrowRightIcon from '@carbon/icons/es/arrow--right/20';
import { getColor } from '../../styles/colors';
import { Button } from '../Button';
import { Text } from '../Text';
import { Link } from '../Link';
import { styleReferenceBreaker } from '../../helpers';
import { ViewWrapper } from '../ViewWrapper';
import { SemiBoldFont } from '../../styles/typography';

/** Props for LandingView component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * 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}
 */
export class LandingView extends React.Component {
  get styles() {
    return StyleSheet.create({
      view: {
        flex: 1,
        backgroundColor: 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,
        ...SemiBoldFont()
      },
      helperContent: {},
      contentWrapper: {
        flex: 1,
        flexGrow: 1
      },
      actionWrapper: {
        marginTop: 32
      }
    });
  }
  get heightSafe() {
    const height = Dimensions.get('window').height;
    return height >= 500;
  }
  get banner() {
    const {
      companyImage,
      productImage,
      productImageSize,
      companyImageSize
    } = this.props;
    const companyImageStyle = styleReferenceBreaker(this.styles.companyImage);
    const productImageStyle = 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__*/_jsxs(View, {
      style: this.styles.logoArea,
      children: [companyImage && /*#__PURE__*/_jsx(Image, {
        resizeMode: "contain",
        style: companyImageStyle,
        source: companyImage
      }), /*#__PURE__*/_jsx(Image, {
        resizeMode: "contain",
        style: productImageStyle,
        source: productImage
      })]
    });
  }
  componentDidMount() {
    this.resizeEvent = 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__*/_jsx(ViewWrapper, {
      topBackgroundColor: this.heightSafe ? '#000000' : getColor('background'),
      bottomBackgroundColor: getColor('background'),
      statusBarStyle: this.heightSafe ? 'light-content' : undefined,
      children: /*#__PURE__*/_jsxs(View, {
        style: this.styles.view,
        children: [this.heightSafe && this.banner, /*#__PURE__*/_jsxs(View, {
          style: this.styles.container,
          children: [/*#__PURE__*/_jsxs(ScrollView, {
            style: this.styles.contentWrapper,
            bounces: false,
            children: [/*#__PURE__*/_jsx(Text, {
              style: this.styles.title,
              text: longProductName,
              type: "heading-04"
            }), /*#__PURE__*/_jsxs(View, {
              style: this.styles.helperContent,
              children: [/*#__PURE__*/_jsx(Text, {
                text: versionText
              }), /*#__PURE__*/_jsx(Text, {
                text: copyrightText
              })]
            }), /*#__PURE__*/_jsx(View, {
              children: !!(privacyPolicyText && privacyPolicyOnPress) && /*#__PURE__*/_jsx(Link, {
                style: this.styles.privacyPolicyLink,
                onPress: privacyPolicyOnPress,
                onLongPress: privacyPolicyOnLongPress,
                text: privacyPolicyText,
                textType: "body-compact-02"
              })
            })]
          }), /*#__PURE__*/_jsx(View, {
            style: this.styles.actionWrapper,
            children: /*#__PURE__*/_jsx(Button, {
              kind: "primary",
              disabled: continueDisabled,
              icon: ArrowRightIcon,
              onPress: continueOnPress,
              onLongPress: continueOnLongPress,
              text: continueText
            })
          })]
        })]
      })
    });
  }
}
//# sourceMappingURL=index.js.map