Add more presets to example site

Author: tim-soft

example/components/ReactDatGui.js

@@ -11,66 +11,87 @@ import DatGui, {
 } from 'react-dat-gui';
 import 'react-dat-gui/dist/index.css';
 
-class App extends Component {
+/**
+ * Demonstrates presets that extend the default preset (initial state)
+ * as well as presets which extend the current state
+ */
+class DatGUI extends Component {
   constructor() {
     super();
 
-    this.state = {
-      data: {
-        string: 'Hello World',
-        minMaxNumber: 66,
-        number: 80,
-        boolean: true,
-        select: 'one',
-        color: '#2FA1D6',
-        random: null,
-        nested: {
-          string: 'Goodbye Cruel World'
-        }
+    const initialDatState = {
+      string: 'Hello World',
+      minMaxNumber: 66,
+      number: 80,
+      boolean: true,
+      select: 'one',
+      color: '#2FA1D6',
+      random: Math.random(),
+      nested: {
+        string: 'Nested Hello World'
       }
     };
-  }
 
-  componentDidMount = () => this.generateRandomNumber();
-
-  handleClick = () => this.generateRandomNumber();
-
-  handleUpdate = data => this.setState({ data });
+    this.state = {
+      data: initialDatState,
+      defaultData: initialDatState
+    };
+  }
 
-  generateRandomNumber = () =>
+  // Update random number for current state
+  handleButtonClick = () =>
     this.setState(prevState => ({
       data: { ...prevState.data, random: Math.random() }
     }));
 
+  // Update current state with changes from controls
+  handleUpdate = newData =>
+    this.setState(prevState => ({
+      data: { ...prevState.data, ...newData }
+    }));
+
   render() {
-    const { data } = this.state;
-    const swatchStyle = {
-      width: '10px',
-      height: '10px',
-      display: 'inline-block'
-    };
-    const presetA = {
-      string: 'Preset A',
-      minMaxNumber: 33,
-      number: 40,
-      boolean: false,
-      select: 'one',
-      color: '#e61d5f',
-      random: Math.random(),
-      nested: {
-        string: 'Sup'
-      }
-    };
+    const { data, defaultData } = this.state;
     const presets = [
-      { A: { ...data, ...presetA } },
-      { B: { ...data, string: 'Preset B' } },
-      { C: { ...data, string: 'Preset C' } }
+      // Preset A doesn't extend any other presets
+      {
+        A: {
+          string: 'Preset A',
+          minMaxNumber: 33,
+          number: 40,
+          boolean: false,
+          select: 'one',
+          color: '#e61d5f',
+          random: Math.random(),
+          nested: {
+            string: 'Nested Preset A'
+          }
+        }
+      },
+      {
+        B: {
+          string: 'Preset B',
+          minMaxNumber: 12,
+          number: 68,
+          boolean: true,
+          select: 'three',
+          color: '#2FD654',
+          random: Math.random(),
+          nested: {
+            string: 'Nested Preset B'
+          }
+        }
+      },
+      // Preset C extends the default preset
+      { 'C (extends Default)': { ...defaultData, string: 'Preset C' } },
+      // Preset D extends the current state
+      { 'D (extends current state)': { ...data, string: 'Preset D' } }
     ];
 
     return (
-      <main>
+      <main style={{ marginRight: '350px' }}>
         <h1>
-          <b style={{ color: `${data.color}` }}>react-dat-gui</b>
+          <b style={{ color: data.color }}>react-dat-gui</b>
         </h1>
         <h2>Use the controls and watch your changes happen in real time!</h2>
         <section>
@@ -84,14 +105,21 @@ class App extends Component {
             <b>Number value:</b> {data.number}
           </div>
           <div>
-            <b>Checkbox value:</b> {data.boolean ? 'true' : 'false'}
+            <b>Checkbox value:</b> {data.boolean.toString()}
           </div>
           <div>
             <b>Select value:</b> {data.select}
           </div>
           <div>
             <b>Picked color:</b>{' '}
-            <div style={{ ...swatchStyle, backgroundColor: `${data.color}` }} />
+            <div
+              style={{
+                width: '10px',
+                height: '10px',
+                display: 'inline-block',
+                backgroundColor: data.color
+              }}
+            />
           </div>
           <div>
             <b>Click the button for a random number:</b> {data.random}
@@ -116,7 +144,7 @@ class App extends Component {
           />
           <DatNumber path="number" label="Number" />
           <DatBoolean path="boolean" label="Boolean" />
-          <DatButton label="Button" onClick={this.handleClick} />
+          <DatButton label="Button" onClick={this.handleButtonClick} />
           <DatSelect
             label="Select"
             path="select"
@@ -153,4 +181,4 @@ class App extends Component {
   }
 }
 
-export default App;
+export default DatGUI;