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 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | // 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 CodeBlock from './CodeBlock';
import StyledDemo from './StyledDemo';
import classNames from 'classnames';
import '../styles/doc.scss';
import SLDSFrame from './SLDSFrame';
class CodeView extends React.Component {
renderChildren() {
const { demoStyles, isViewport, isMobile } = this.props;
// 2021.05.04 [FB] – handle default examples that have metadata without modifying existing MDX files
let children = this.props.children;
if (Array.isArray(this.props.children)) {
children = this.props.children[0].element;
}
return (
<div
className={classNames('docs-codeblock-example', {
'docs-codeblock-example_viewport': isViewport,
'docs-codeblock-example_mobile': isMobile
})}
>
{demoStyles ? (
<StyledDemo
className={classNames({
'demo-only_viewport': isViewport,
'slds-is-mobile': isMobile
})}
styles={demoStyles}
>
{children}
</StyledDemo>
) : (
children
)}
</div>
);
}
render() {
const {
codeExample,
position,
toggleCode,
exampleOnly,
frameOnly,
frameStyles,
frameTitle,
hideDeviceSelector
} = this.props;
// 2021.05.04 [FB] – handle default examples that have metadata without modifying existing MDX files
let children = this.props.children;
if (Array.isArray(this.props.children)) {
children = this.props.children[0].element;
}
let content = (
<React.Fragment>
{position === 'bottom' ? this.renderChildren() : null}
{!exampleOnly && (
<CodeBlock language="html" toggleCode={toggleCode}>
{codeExample || children}
</CodeBlock>
)}
{position === 'top' ? this.renderChildren() : null}
</React.Fragment>
);
if (frameOnly) {
content = (
<SLDSFrame
hideDeviceSelector={hideDeviceSelector}
frameStyles={frameStyles}
frameTitle={frameTitle || 'Example mobile styles'}
>
{children}
</SLDSFrame>
);
}
return (
<div
className={classNames('docs-codeblock', {
'docs-codeblock_frame': frameOnly
})}
>
{content}
</div>
);
}
}
CodeView.propTypes = {
children: PropTypes.node,
codeExample: PropTypes.node, // utilities stories use this to pass in the element as the code example
position: PropTypes.oneOf(['top', 'bottom']),
demoStyles: PropTypes.string,
isViewport: PropTypes.bool,
isMobile: PropTypes.bool,
toggleCode: PropTypes.bool,
exampleOnly: PropTypes.bool,
frameOnly: PropTypes.bool,
frameStyles: PropTypes.object,
frameTitle: PropTypes.string,
hideDeviceSelector: PropTypes.bool
};
CodeView.defaultProps = {
position: 'bottom',
frameOnly: false
};
export default CodeView;
|