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