9718c517d9
Summary: This adds a web-based playground to try out Yoga. The playground uses yogas javascript bindings to use yoga within the browser. The layout tree can be modified and shared. Code generators for litho, ComponentKit and React Native allow the layout to be copied into any app. allow-large-files Reviewed By: emilsjolander Differential Revision: D6871601 fbshipit-source-id: 3b97c87e91d6bafe8e1c38b8b7eca8d372324c0b
104 lines
3.2 KiB
JavaScript
104 lines
3.2 KiB
JavaScript
// @flow
|
|
import React, {Component} from 'react';
|
|
import SyntaxHighlighter, {
|
|
registerLanguage,
|
|
} from 'react-syntax-highlighter/prism-light';
|
|
import styles from 'react-syntax-highlighter/styles/prism/prism';
|
|
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
|
|
//import javascript from 'react-syntax-highlighter/languages/prism/javascript';
|
|
import java from 'react-syntax-highlighter/languages/prism/java';
|
|
import objectivec from 'react-syntax-highlighter/languages/prism/objectivec';
|
|
import type {LayoutRecordT} from './LayoutRecord';
|
|
import {Radio} from 'antd';
|
|
import CodeJavaScript from './CodeJavaScript';
|
|
import CodeLitho from './CodeLitho';
|
|
import CodeReactNative from './CodeReactNative';
|
|
import CodeComponentKit from './CodeComponentKit';
|
|
import './Code.css';
|
|
import type {Yoga$Direction} from 'yoga-layout';
|
|
const RadioButton = Radio.Button;
|
|
const RadioGroup = Radio.Group;
|
|
registerLanguage('jsx', jsx);
|
|
//registerLanguage('javascript', javascript);
|
|
registerLanguage('java', java);
|
|
registerLanguage('objectivec', objectivec);
|
|
|
|
type Language = 'JavaScript' | 'Litho' | 'ComponentKit' | 'React Native';
|
|
|
|
type Props = {
|
|
layoutDefinition: LayoutRecordT,
|
|
direction: Yoga$Direction,
|
|
languages: Array<Language>,
|
|
};
|
|
|
|
type State = {
|
|
language: Language,
|
|
};
|
|
|
|
export default class Code extends Component<Props, State> {
|
|
static defaultProps = {
|
|
languages: [/*'JavaScript', */ 'Litho', 'ComponentKit', 'React Native'],
|
|
};
|
|
|
|
state = {
|
|
language: 'Litho',
|
|
};
|
|
|
|
generateCode(lang: Language): string {
|
|
if (lang === 'JavaScript') {
|
|
return CodeJavaScript(this.props.layoutDefinition, this.props.direction);
|
|
} else if (lang === 'Litho') {
|
|
return CodeLitho(this.props.layoutDefinition, this.props.direction);
|
|
} else if (lang === 'ComponentKit') {
|
|
return CodeComponentKit(
|
|
this.props.layoutDefinition,
|
|
this.props.direction,
|
|
);
|
|
} else if (lang === 'React Native') {
|
|
return CodeReactNative(this.props.layoutDefinition, this.props.direction);
|
|
} else {
|
|
return '';
|
|
}
|
|
}
|
|
|
|
getLanguage(): string {
|
|
if (this.state.language === 'Litho') {
|
|
return 'java';
|
|
} else if (this.state.language === 'React Native') {
|
|
return 'javascript';
|
|
} else if (this.state.language === 'ComponentKit') {
|
|
return 'objectivec';
|
|
} else {
|
|
return this.state.language;
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className="Code">
|
|
<RadioGroup
|
|
className="CodeLanguageSelector"
|
|
onChange={e => this.setState({language: e.target.value})}
|
|
value={this.state.language}>
|
|
{this.props.languages.map(lang => (
|
|
<RadioButton key={lang} value={lang}>
|
|
{lang}
|
|
</RadioButton>
|
|
))}
|
|
</RadioGroup>
|
|
<div className="CodeContainer">
|
|
<SyntaxHighlighter
|
|
language={this.getLanguage()}
|
|
style={styles}
|
|
customStyle={{fontSize: '13px', backgroundColor: 'white'}}
|
|
lineNumberStyle={{userSelect: 'none', opacity: 0.5}}
|
|
codeTagProps={{style: {tabSize: 4}}}
|
|
showLineNumbers>
|
|
{this.generateCode(this.state.language)}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|