moving stuff
parent
d3924d7bdf
commit
602f47c185
|
@ -8,15 +8,12 @@ export default class extends React.Component {
|
|||
super();
|
||||
this.state = Object.assign(
|
||||
{
|
||||
sidebarExpanded: false,
|
||||
astPanelVisible: false,
|
||||
docPanelVisible: false,
|
||||
toggleAstPanelVisible: () =>
|
||||
this.setState(stateToggler("astPanelVisible")),
|
||||
toggleDocPanelVisible: () =>
|
||||
this.setState(stateToggler("docPanelVisible")),
|
||||
toggleSidebarExpanded: () =>
|
||||
this.setState(stateToggler("sidebarExpanded"))
|
||||
showSidebar: false,
|
||||
showAst: false,
|
||||
showDoc: false,
|
||||
toggleSidebar: () => this.setState(stateToggler("showSidebar")),
|
||||
toggleAst: () => this.setState(stateToggler("showAst")),
|
||||
toggleDoc: () => this.setState(stateToggler("showDoc"))
|
||||
},
|
||||
storage.get("editor_state")
|
||||
);
|
||||
|
|
|
@ -1,18 +1,17 @@
|
|||
import React from "react";
|
||||
|
||||
import { Checkbox } from "./inputs";
|
||||
|
||||
export function BooleanOption({ option, value, onChange }) {
|
||||
function maybeInvert(value) {
|
||||
return option.inverted ? !value : value;
|
||||
}
|
||||
return (
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
<Checkbox
|
||||
label={option.cliName}
|
||||
checked={maybeInvert(value)}
|
||||
onChange={ev => onChange(option, maybeInvert(ev.target.checked))}
|
||||
/>{" "}
|
||||
{option.cliName}
|
||||
</label>
|
||||
onChange={checked => onChange(option, maybeInvert(checked))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -87,7 +87,7 @@ class Playground extends React.Component {
|
|||
formatted,
|
||||
loaded,
|
||||
options,
|
||||
sidebarExpanded
|
||||
showSidebar
|
||||
} = this.state;
|
||||
|
||||
if (!loaded) return "Loading...";
|
||||
|
@ -99,13 +99,13 @@ class Playground extends React.Component {
|
|||
<div className="editors-container">
|
||||
<div
|
||||
className={`options-container ${
|
||||
editorState.sidebarExpanded ? "open" : ""
|
||||
editorState.showSidebar ? "open" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="options">
|
||||
<SidebarOptions
|
||||
availableOptions={availableOptions}
|
||||
currentOptions={options}
|
||||
prettierOptions={options}
|
||||
onOptionValueChange={this.handleOptionValueChange}
|
||||
/>
|
||||
</div>
|
||||
|
@ -116,10 +116,10 @@ class Playground extends React.Component {
|
|||
value={content}
|
||||
onChange={this.setContent}
|
||||
/>
|
||||
{editorState.astPanelVisible ? (
|
||||
{editorState.showAst ? (
|
||||
<DebugPanel value={"ast here"} />
|
||||
) : null}
|
||||
{editorState.docPanelVisible ? (
|
||||
{editorState.showDoc ? (
|
||||
<DebugPanel value={"doc here"} />
|
||||
) : null}
|
||||
<OutputPanel mode="jsx" value={formatted} />
|
||||
|
@ -127,8 +127,8 @@ class Playground extends React.Component {
|
|||
</div>
|
||||
<div className="bottom-bar">
|
||||
<div className="bottom-bar-buttons">
|
||||
<Button onClick={editorState.toggleSidebarExpanded}>
|
||||
{editorState.sidebarExpanded ? "Hide" : "Show"} options
|
||||
<Button onClick={editorState.toggleSidebar}>
|
||||
{editorState.showSidebar ? "Hide" : "Show"} options
|
||||
</Button>
|
||||
<Button onClick={this.clearContent}>Clear</Button>
|
||||
</div>
|
||||
|
|
|
@ -6,7 +6,7 @@ const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
|
|||
|
||||
export default function({
|
||||
availableOptions,
|
||||
currentOptions,
|
||||
prettierOptions,
|
||||
onOptionValueChange
|
||||
}) {
|
||||
const optionsByCategory = availableOptions.reduce((acc, option) => {
|
||||
|
@ -16,7 +16,9 @@ export default function({
|
|||
return acc;
|
||||
}, {});
|
||||
|
||||
return CATEGORIES_ORDER.map(category => (
|
||||
return (
|
||||
<div className="options">
|
||||
{CATEGORIES_ORDER.map(category => (
|
||||
<details key={category} className="sub-options" open="true">
|
||||
<summary>{category}</summary>
|
||||
|
||||
|
@ -24,10 +26,12 @@ export default function({
|
|||
<Option
|
||||
key={option.name}
|
||||
option={option}
|
||||
value={currentOptions[option.name]}
|
||||
value={prettierOptions[option.name]}
|
||||
onChange={onOptionValueChange}
|
||||
/>
|
||||
))}
|
||||
</details>
|
||||
));
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -0,0 +1,14 @@
|
|||
import React from "react";
|
||||
|
||||
export function Checkbox({ label: _label, checked, onChange }) {
|
||||
return (
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={ev => onChange(ev.target.checked)}
|
||||
/>{" "}
|
||||
{_label}
|
||||
</label>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue