doc site component examples

component-examples.jsx

const React = require('react');
const createReactClassInternal = require('create-react-class');
const PropTypesInternal = require('prop-types');
const ReactDOM = require('react-dom');
const classNames = require('classnames');
const trim = require('lodash.trim');

import { transform } from 'babel-standalone';
import CodeMirrorEditor from './code-mirror-editor';
import * as SLDS from '@salesforce/design-system-react';

import AppLauncherInternal from '@salesforce/design-system-react/components/app-launcher';
import AppLauncherSectionInternal from '@salesforce/design-system-react/components/app-launcher/section';
import AppLauncherTileInternal from '@salesforce/design-system-react/components/app-launcher/tile';
import GlobalHeaderInternal from '@salesforce/design-system-react/components/global-header';
import GlobalHeaderButtonInternal from '@salesforce/design-system-react/components/global-header/button';
import GlobalHeaderDropdownInternal from '@salesforce/design-system-react/components/global-header/dropdown';
import GlobalHeaderProfileInternal from '@salesforce/design-system-react/components/global-header/profile';
import GlobalHeaderSearchInternal from '@salesforce/design-system-react/components/global-header/search';
import SearchInternal from '@salesforce/design-system-react/components/forms/input/search';
import TreeInternal from '@salesforce/design-system-react/components/tree';

import DropdownTriggerInternal from '@salesforce/design-system-react/components/menu-dropdown/button-trigger';

import Button from '@salesforce/design-system-react/components/button';

const isMarkup = (code) => code && trim(code).indexOf('<') === 0;

const CodeMirror = createReactClassInternal({
	displayName: 'CodeMirror',

	// propTypes: {
	// 	className: PropTypes.string,
	// 	codeText: PropTypes.string,
	// 	exampleClassName: PropTypes.string,
	// 	onChange: PropTypes.func,
	// 	onFocusChange: PropTypes.func,
	// 	options: PropTypes.object,
	// 	path: PropTypes.string,
	// 	value: PropTypes.string
	// },

	getInitialState () {
		return {
			code: this.props.codeText,
			showCode: false
		};
	},

	componentDidMount () {
		this.executeCode();
	},

	renderEditor () {
		if (!this.state.showCode) {
			return null;
		}

		const scrapedCodeText = this.props.codeText
			.replace(/^(export).*$/gm, 'ReactDOM.render(<Example />, mountNode);')
			.replace(/from\s'(~)/gm, 'from \'@salesforce/design-system-react')
			.replace(/\/\/ `~` is replaced with design-system-react at runtime/gm, '');

		return (
			<CodeMirrorEditor
				className="highlight bb-gray bh-gray"
				defaultValue={scrapedCodeText}
				key="jsx"
				onChange={this.handleCodeChange}
			/>
		);
	},

	renderExample () {
		return (
			<div className={classNames('bs-example', this.props.exampleClassName)}>
				<div ref={(component) => { this.mountNode = component; }} />
			</div>
		);
	},

	render () {
		return (

			<div className="playground">
				<div className="slds-p-vertical--medium">
					{this.renderExample()}
				</div>
				<div className="demo-only bb-gray slds-text-align--right slds-p-bottom--x-small">
					<Button
						iconCategory="utility"
						iconName={this.state.showCode ? 'chevronup' : 'chevrondown'}
						iconPosition="left"
						onClick={this.toggleEditor}
					>
						{this.state.showCode ? 'Hide Example Code' : 'Modify Example Code'}
					</Button>
				</div>
				{this.renderEditor()}
			</div>

		);
	},

	toggleEditor () {
		this.setState({ showCode: !this.state.showCode });
	},

	handleCodeChange (code) {
		clearTimeout(this.codeTimeout);
		this.codeTimeout = setTimeout(() => {
			this.setState({ code }, this.executeCode);
		}, 300);
	},

	clearExample () {
		const mountNode = this.mountNode;

		try {
			ReactDOM.unmountComponentAtNode(mountNode);
		} catch (e) {
			console.error(e); // eslint-disable-line no-console
		}

		return mountNode;
	},

	getCode () {
		const code = this.state.code.replace(/^(import|require).*$/gm, '').replace(/^(export).*$/gm, 'ReactDOM.render(<Example />, mountNode);');
		if (!isMarkup(code)) {
			return code;
		}

		return `
			class Example extends React.Component {
				render(){
					return (<section>${code}</section>);
				}
			}
			ReactDOM.render(<Example />, mountNode);
		`;
	},

	executeCode () {
		/* eslint-disable */
		const mountNode = this.clearExample();

		// Webpack strips the variable from scope if not used. These components are not a part of the bundled library.
		const AppLauncher = AppLauncherInternal;
		const AppLauncherSection = AppLauncherSectionInternal;
		const AppLauncherTile = AppLauncherTileInternal;
		const GlobalHeader = GlobalHeaderInternal;
		const GlobalHeaderButton = GlobalHeaderButtonInternal;
		const GlobalHeaderDropdown = GlobalHeaderDropdownInternal;
		const GlobalHeaderProfile = GlobalHeaderProfileInternal;
		const GlobalHeaderSearch = GlobalHeaderSearchInternal;
		const Search = SearchInternal;
		const Tree = TreeInternal;

		const DropdownTrigger = DropdownTriggerInternal;

		const createReactClass = createReactClassInternal;
		window.PropTypes = PropTypesInternal;
		/* eslint-enable */

		Object.keys(SLDS).forEach((key) => {
			window[key] = SLDS[key];
		});

		const { code } = transform(this.getCode(), { presets: ['react', 'es2015', 'stage-0'] });

		eval(code);	// eslint-disable-line no-eval
	}
});

module.exports = CodeMirror;