diff --git a/website/playground/Playground.js b/website/playground/Playground.js
index b5e1be41..67d16394 100644
--- a/website/playground/Playground.js
+++ b/website/playground/Playground.js
@@ -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 (
-
- );
-}
-
-function SidebarCategory({ title, children }) {
- return (
-
- {title}
- {children}
-
- );
-}
-
class Playground extends React.Component {
constructor() {
super();
@@ -98,11 +86,21 @@ class Playground extends React.Component {
-
+ {categorizeOptions(
+ availableOptions,
+ (category, categoryOptions) => (
+
+ {categoryOptions.map(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;
diff --git a/website/playground/SidebarOptions.js b/website/playground/SidebarOptions.js
deleted file mode 100644
index b51dd063..00000000
--- a/website/playground/SidebarOptions.js
+++ /dev/null
@@ -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 => (
-
- {category}
-
- {(optionsByCategory[category] || []).map(option => (
-
- ))}
-
- ));
-}
diff --git a/website/playground/inputs.js b/website/playground/inputs.js
deleted file mode 100644
index 4cbfaf9a..00000000
--- a/website/playground/inputs.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-
-export function Checkbox({ label: _label, checked, onChange }) {
- return (
-
- );
-}
diff --git a/website/playground/sidebar/components.js b/website/playground/sidebar/components.js
new file mode 100644
index 00000000..38710d24
--- /dev/null
+++ b/website/playground/sidebar/components.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+export function Sidebar({ visible, children }) {
+ return (
+
+ );
+}
+
+export function SidebarCategory({ title, children }) {
+ return (
+
+ {title}
+ {children}
+
+ );
+}
diff --git a/website/playground/sidebar/inputs.js b/website/playground/sidebar/inputs.js
new file mode 100644
index 00000000..254bbf44
--- /dev/null
+++ b/website/playground/sidebar/inputs.js
@@ -0,0 +1,52 @@
+import React from "react";
+
+export function Checkbox({ label: _label, checked, onChange }) {
+ return (
+
+ );
+}
+
+export function Select({ label: _label, values, selected, onChange }) {
+ return (
+
+ );
+}
+
+export function NumberInput({
+ label: _label,
+ value,
+ min,
+ max,
+ step,
+ onChange
+}) {
+ return (
+
+ );
+}
diff --git a/website/playground/Option.js b/website/playground/sidebar/options.js
similarity index 56%
rename from website/playground/Option.js
rename to website/playground/sidebar/options.js
index 960e56a4..6feddbec 100644
--- a/website/playground/Option.js
+++ b/website/playground/sidebar/options.js
@@ -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 (
-
+