All files / packages/design-system/shared/components MobileFrame.jsx

0% Statements 0/6
100% Branches 0/0
100% Functions 0/0
0% Lines 0/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52                                                                                                       
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
import React from 'react';
import PropTypes from 'prop-types';
import ReactDOMServer from 'react-dom/server';
 
class MobileFrame extends React.Component {
  render() {
    const styles = {
      overflow: 'hidden',
      height: '812px',
      width: '375px',
      border: 'none'
    };
 
    const content = ReactDOMServer.renderToString(this._renderIframe());
 
    return (
      <iframe
        className="docs-mobile_iframe"
        title="Mobile frame/container used for testing purposes"
        style={styles}
        srcDoc={content}
      />
    );
  }
 
  _renderIframe() {
    const { children } = this.props;
 
    return (
      <html lang="en" style={{ backgroundColor: 'transparent' }}>
        <head>
          <link
            type="text/css"
            rel="stylesheet"
            href="/assets/styles/slds-small.css" // small form factor version
          />
        </head>
        <body>{children}</body>
      </html>
    );
  }
}
 
MobileFrame.propTypes = {
  children: PropTypes.node
};
 
export default MobileFrame;