moving files around
parent
871ae13bb6
commit
c08aa1e4f8
|
@ -2,12 +2,17 @@ import React from "react";
|
|||
|
||||
import Button from "./Button";
|
||||
import EditorState from "./EditorState";
|
||||
import { Checkbox } from "./inputs";
|
||||
import { DebugPanel, InputPanel, OutputPanel } from "./panels";
|
||||
import PrettierFormat from "./PrettierFormat";
|
||||
import SidebarOptions from "./SidebarOptions";
|
||||
|
||||
import { Sidebar, SidebarCategory } from "./sidebar/components";
|
||||
import Option from "./sidebar/options";
|
||||
import { Checkbox } from "./sidebar/inputs";
|
||||
|
||||
import WorkerApi from "./WorkerApi";
|
||||
|
||||
const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
|
||||
|
||||
const ENABLED_OPTIONS = [
|
||||
"parser",
|
||||
"printWidth",
|
||||
|
@ -24,23 +29,6 @@ const ENABLED_OPTIONS = [
|
|||
"requirePragma"
|
||||
].map(option => (typeof option === "string" ? { name: option } : option));
|
||||
|
||||
function Sidebar({ visible, children }) {
|
||||
return (
|
||||
<div className={`options-container ${visible ? "open" : ""}`}>
|
||||
<div className="options">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SidebarCategory({ title, children }) {
|
||||
return (
|
||||
<details className="sub-options" open="true">
|
||||
<summary>{title}</summary>
|
||||
{children}
|
||||
</details>
|
||||
);
|
||||
}
|
||||
|
||||
class Playground extends React.Component {
|
||||
constructor() {
|
||||
super();
|
||||
|
@ -98,11 +86,21 @@ class Playground extends React.Component {
|
|||
<div className="playground-container">
|
||||
<div className="editors-container">
|
||||
<Sidebar visible={editorState.showSidebar}>
|
||||
<SidebarOptions
|
||||
availableOptions={availableOptions}
|
||||
prettierOptions={options}
|
||||
onOptionValueChange={this.handleOptionValueChange}
|
||||
{categorizeOptions(
|
||||
availableOptions,
|
||||
(category, categoryOptions) => (
|
||||
<SidebarCategory key={category} title={category}>
|
||||
{categoryOptions.map(option => (
|
||||
<Option
|
||||
key={option.name}
|
||||
option={option}
|
||||
value={options[option.name]}
|
||||
onChange={this.handleOptionValueChange}
|
||||
/>
|
||||
))}
|
||||
</SidebarCategory>
|
||||
)
|
||||
)}
|
||||
<SidebarCategory title="Debug">
|
||||
<Checkbox
|
||||
label="show AST"
|
||||
|
@ -169,6 +167,19 @@ class Playground extends React.Component {
|
|||
}
|
||||
}
|
||||
|
||||
function categorizeOptions(availableOptions, render) {
|
||||
const optionsByCategory = availableOptions.reduce((acc, option) => {
|
||||
let options;
|
||||
acc[option.category] = options = acc[option.category] || [];
|
||||
options.push(option);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return CATEGORIES_ORDER.filter(c => optionsByCategory[c]).map(category =>
|
||||
render(category, optionsByCategory[category])
|
||||
);
|
||||
}
|
||||
|
||||
function getDefaultOptions(availableOptions) {
|
||||
return availableOptions.reduce((acc, option) => {
|
||||
acc[option.name] = option.default;
|
||||
|
|
|
@ -1,33 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
import Option from "./Option";
|
||||
|
||||
const CATEGORIES_ORDER = ["Global", "JavaScript", "Markdown", "Special"];
|
||||
|
||||
export default function({
|
||||
availableOptions,
|
||||
prettierOptions,
|
||||
onOptionValueChange
|
||||
}) {
|
||||
const optionsByCategory = availableOptions.reduce((acc, option) => {
|
||||
let options;
|
||||
acc[option.category] = options = acc[option.category] || [];
|
||||
options.push(option);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
return CATEGORIES_ORDER.map(category => (
|
||||
<details key={category} className="sub-options" open="true">
|
||||
<summary>{category}</summary>
|
||||
|
||||
{(optionsByCategory[category] || []).map(option => (
|
||||
<Option
|
||||
key={option.name}
|
||||
option={option}
|
||||
value={prettierOptions[option.name]}
|
||||
onChange={onOptionValueChange}
|
||||
/>
|
||||
))}
|
||||
</details>
|
||||
));
|
||||
}
|
|
@ -1,14 +0,0 @@
|
|||
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>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
import React from "react";
|
||||
|
||||
export function Sidebar({ visible, children }) {
|
||||
return (
|
||||
<div className={`options-container ${visible ? "open" : ""}`}>
|
||||
<div className="options">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SidebarCategory({ title, children }) {
|
||||
return (
|
||||
<details className="sub-options" open="true">
|
||||
<summary>{title}</summary>
|
||||
{children}
|
||||
</details>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,52 @@
|
|||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export function Select({ label: _label, values, selected, onChange }) {
|
||||
return (
|
||||
<label>
|
||||
{_label}{" "}
|
||||
<select onChange={ev => onChange(ev.target.value)}>
|
||||
{values.map(val => (
|
||||
<option value={val} selected={val === selected}>
|
||||
{val}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
export function NumberInput({
|
||||
label: _label,
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
onChange
|
||||
}) {
|
||||
return (
|
||||
<label>
|
||||
{_label}{" "}
|
||||
<input
|
||||
type="number"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={value}
|
||||
onChange={ev => onChange(parseInt(ev.target.value, 10))}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
|
||||
import { Checkbox } from "./inputs";
|
||||
import { Checkbox, Select, NumberInput } from "./inputs";
|
||||
|
||||
export function BooleanOption({ option, value, onChange }) {
|
||||
function maybeInvert(value) {
|
||||
|
@ -17,32 +17,25 @@ export function BooleanOption({ option, value, onChange }) {
|
|||
|
||||
export function ChoiceOption({ option, value, onChange }) {
|
||||
return (
|
||||
<label>
|
||||
{option.cliName}{" "}
|
||||
<select onChange={ev => onChange(option, ev.target.value)}>
|
||||
{option.choices.map(choice => (
|
||||
<option value={choice.value} selected={choice.value === value}>
|
||||
{choice.value}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<Select
|
||||
label={option.cliName}
|
||||
values={option.choices.map(choice => choice.value)}
|
||||
selected={value}
|
||||
onChange={val => onChange(option, val)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function NumberOption({ option, value, onChange }) {
|
||||
return (
|
||||
<label>
|
||||
{option.cliName}{" "}
|
||||
<input
|
||||
type="number"
|
||||
<NumberInput
|
||||
label={option.cliName}
|
||||
min={option.range.start}
|
||||
max={option.range.end}
|
||||
step={option.range.step}
|
||||
value={value}
|
||||
onChange={ev => onChange(option, parseInt(ev.target.value, 10))}
|
||||
onChange={val => onChange(option, val)}
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue