From 60d4fe932265f9c09efbb04956b68767d9210b7f Mon Sep 17 00:00:00 2001
From: Nick Grosenbacher <nickgrosenbacher@gmail.com>
Date: Fri, 2 Jun 2023 12:34:00 -0400
Subject: [PATCH] Split playground live options to reduce undesirable
 whitespace in layout

---
 packages/playground/src/components/Header.tsx | 68 ++++++++++++-------
 1 file changed, 44 insertions(+), 24 deletions(-)

diff --git a/packages/playground/src/components/Header.tsx b/packages/playground/src/components/Header.tsx
index cebaca8ee9..12da577b7e 100644
--- a/packages/playground/src/components/Header.tsx
+++ b/packages/playground/src/components/Header.tsx
@@ -26,29 +26,32 @@ const HeaderButton: React.FC<
 function HeaderButtons({ playGroundFormRef }: { playGroundFormRef: React.MutableRefObject<any> }) {
   return (
     <>
-      <HeaderButton
-        title='Click me to submit the form programmatically.'
-        onClick={() => playGroundFormRef.current.submit()}
-      >
-        Prog. Submit
-      </HeaderButton>{' '}
-      <HeaderButton
-        title='Click me to validate the form programmatically.'
-        onClick={() => playGroundFormRef.current.validateForm()}
-      >
-        Prog. Validate
-      </HeaderButton>{' '}
-      <HeaderButton
-        title='Click me to reset the form programmatically.'
-        onClick={() => playGroundFormRef.current.reset()}
-      >
-        Prog. Reset
-      </HeaderButton>
+      <label className='control-label'>Programmatic</label>
+      <div className='btn-group'>
+        <HeaderButton
+          title='Click me to submit the form programmatically.'
+          onClick={() => playGroundFormRef.current.submit()}
+        >
+          Submit
+        </HeaderButton>
+        <HeaderButton
+          title='Click me to validate the form programmatically.'
+          onClick={() => playGroundFormRef.current.validateForm()}
+        >
+          Validate
+        </HeaderButton>
+        <HeaderButton
+          title='Click me to reset the form programmatically.'
+          onClick={() => playGroundFormRef.current.reset()}
+        >
+          Reset
+        </HeaderButton>
+      </div>
     </>
   );
 }
 
-const liveSettingsSchema: RJSFSchema = {
+const liveSettingsBooleanSchema: RJSFSchema = {
   type: 'object',
   properties: {
     liveValidate: { type: 'boolean', title: 'Live validation' },
@@ -59,6 +62,12 @@ const liveSettingsSchema: RJSFSchema = {
     noValidate: { type: 'boolean', title: 'Disable validation' },
     noHtml5Validate: { type: 'boolean', title: 'Disable HTML 5 validation' },
     focusOnFirstError: { type: 'boolean', title: 'Focus on 1st Error' },
+  },
+};
+
+const liveSettingsSelectSchema: RJSFSchema = {
+  type: 'object',
+  properties: {
     showErrorList: {
       type: 'string',
       default: 'top',
@@ -115,7 +124,7 @@ const liveSettingsSchema: RJSFSchema = {
   },
 };
 
-const liveSettingsUiSchema: UiSchema = {
+const liveSettingsSelectUiSchema: UiSchema = {
   experimental_defaultFormStateBehavior: {
     'ui:options': {
       label: false,
@@ -188,7 +197,7 @@ export default function Header({
 
   const handleSetLiveSettings = useCallback(
     ({ formData }: IChangeEvent) => {
-      setLiveSettings(formData);
+      setLiveSettings((previousLiveSettings) => ({ ...previousLiveSettings, ...formData }));
     },
     [setLiveSettings]
   );
@@ -220,17 +229,28 @@ export default function Header({
     <div className='page-header'>
       <h1>react-jsonschema-form</h1>
       <div className='row'>
-        <div className='col-sm-6'>
+        <div className='col-sm-4'>
           <Selector onSelected={load} />
         </div>
         <div className='col-sm-2'>
           <Form
             idPrefix='rjsf_options'
-            schema={liveSettingsSchema}
+            schema={liveSettingsBooleanSchema}
+            formData={liveSettings}
+            validator={localValidator}
+            onChange={handleSetLiveSettings}
+          >
+            <div />
+          </Form>
+        </div>
+        <div className='col-sm-2'>
+          <Form
+            idPrefix='rjsf_options'
+            schema={liveSettingsSelectSchema}
             formData={liveSettings}
             validator={localValidator}
             onChange={handleSetLiveSettings}
-            uiSchema={liveSettingsUiSchema}
+            uiSchema={liveSettingsSelectUiSchema}
           >
             <div />
           </Form>