Form rows are multi-column, according to parent width.

mauget · mauget · commit 3a651c71c721 · 2021-02-13T08:39:12.000-05:00
diff --git a/.eslintcache b/.eslintcache
@@ -1 +1 @@
-[{"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js":"1","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx":"2","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx":"3","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js":"4","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js":"5","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js":"6","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js":"7","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx":"8","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js":"9"},{"size":452,"mtime":1613077644221,"results":"10","hashOfConfig":"11"},{"size":460,"mtime":1613147279663,"results":"12","hashOfConfig":"11"},{"size":1478,"mtime":1613148101303,"results":"13","hashOfConfig":"11"},{"size":192,"mtime":1613088855077,"results":"14","hashOfConfig":"11"},{"size":612,"mtime":1613072388235,"results":"15","hashOfConfig":"11"},{"size":830,"mtime":1613089761093,"results":"16","hashOfConfig":"11"},{"size":651,"mtime":1613089723356,"results":"17","hashOfConfig":"11"},{"size":1801,"mtime":1613144044405,"results":"18","hashOfConfig":"11"},{"size":106,"mtime":1613092417203,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"1675vna",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js",[],["39","40","41","42","43"],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js",[],{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","replacedBy":"51"},{"ruleId":"52","replacedBy":"53"},"lines-around-directive",["54"],"global-require",[],"no-buffer-constructor",[],"no-new-require",[],"no-path-concat",[],"padding-line-between-statements"]
+[{"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js":"1","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx":"2","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx":"3","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js":"4","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js":"5","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js":"6","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js":"7","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx":"8","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js":"9"},{"size":452,"mtime":1613077644221,"results":"10","hashOfConfig":"11"},{"size":460,"mtime":1613147279663,"results":"12","hashOfConfig":"11"},{"size":1447,"mtime":1613223053048,"results":"13","hashOfConfig":"11"},{"size":192,"mtime":1613088855077,"results":"14","hashOfConfig":"11"},{"size":612,"mtime":1613072388235,"results":"15","hashOfConfig":"11"},{"size":832,"mtime":1613223006190,"results":"16","hashOfConfig":"11"},{"size":651,"mtime":1613089723356,"results":"17","hashOfConfig":"11"},{"size":1800,"mtime":1613222701333,"results":"18","hashOfConfig":"11"},{"size":106,"mtime":1613092417203,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"1675vna",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js",[],["39","40","41","42","43"],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js",[],{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","replacedBy":"51"},{"ruleId":"52","replacedBy":"53"},"lines-around-directive",["54"],"global-require",[],"no-buffer-constructor",[],"no-new-require",[],"no-path-concat",[],"padding-line-between-statements"]
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ document, a JSON schema describing the document, and a JSON
 UI schema that says how to render the form items of the document.
 
 It uses a custom object field template in its Ui schema to force
-fields into two columns or one column for narrow views.
+fields into multiple columns according to parent weidth.
 
 ## Install
 
diff --git a/doc/registration-form.png b/doc/registration-form.png
diff --git a/src/components/LocationsPanel.jsx b/src/components/LocationsPanel.jsx
@@ -10,19 +10,18 @@ toastr.options.progressBar = true;
 
 const StyledWrapper = styled.section`
     margin: 2rem;
-    padding: 4rem;
+    padding: 1rem;
     border: solid 1px darkred;
     color: darkslateblue;
     border-radius: 12px;
 `;
 
 const StyledTitle = styled.h1`
     font-size: 1.5rem;
-    text-align: center;
 `;
 
 const StyledDetailArea = styled.div`
-    margin: 1.5rem;
+    margin: 2.0rem;
 `;
 
 export default function LocationsPanel() {
@@ -40,7 +39,7 @@ export default function LocationsPanel() {
 
     return (
         <StyledWrapper>
-            <StyledTitle>Demonstration of React JSON Schema</StyledTitle>
+            <StyledTitle>React JSON Schema Form Demo</StyledTitle>
             <StyledDetailArea>
                 <Form
                     dataTestId="testid"
diff --git a/src/components/TwoColObjectFieldTemplate.jsx b/src/components/TwoColObjectFieldTemplate.jsx
@@ -15,8 +15,7 @@ const StyledRow = styled.div`
 `;
 
 const StyledCol = styled.div`
-    min-width: 44%;
-    margin: 0.5rem;
+    margin: 0 2rem 0 0;
     flex-grow: 1;
 `;
 
@@ -25,9 +24,9 @@ const StyledCol = styled.div`
  * It arranges all fields in a single row using flex-wrap and min-width to force the layout
  * to rows of two fields. For form widths approaching min-width each row contains one field.
  *
- * Add this custom object template to a `<form objectFieldTemplate=TwoColObjectFieldTemplate `,
+ * Add this custom object template to a `<form objectFieldTemplate=MultiColumnObjectFieldTemplate `,
  * or to the RJSF UI schema,
- * ` "ui:TwoColObjectFieldTemplate": TwoColObjectFieldTemplate, `
+ * ` "ui:MultiColumnObjectFieldTemplate": MultiColumnObjectFieldTemplate, `
  *
  * @param TitleField
  * @param properties array
diff --git a/src/components/TwoColObjectFieldTemplate.test.jsx b/src/components/TwoColObjectFieldTemplate.test.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import TwoColObjectFieldTemplate from './TwoColObjectFieldTemplate';
+import MultiColumnObjectFieldTemplate from './TwoColObjectFieldTemplate';
 
 configure({ adapter: new Adapter() });
 
-describe('TwoColObjectFieldTemplate', () => {
+describe('MultiColumnObjectFieldTemplate', () => {
     it('should match its snapshot', () => {
         const titleField = jest.fn();
         const properties = [
@@ -14,7 +14,7 @@ describe('TwoColObjectFieldTemplate', () => {
             { content: { ket: 'age' } },
         ];
         const wrapper = shallow(
-            <TwoColObjectFieldTemplate
+            <MultiColumnObjectFieldTemplate
                 TitleField={titleField}
                 properties={properties}
                 title='title'
diff --git a/src/components/__snapshots__/TwoColObjectFieldTemplate.test.jsx.snap b/src/components/__snapshots__/TwoColObjectFieldTemplate.test.jsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TwoColObjectFieldTemplate should match its snapshot 1`] = `ShallowWrapper {}`;
+exports[`MultiColumnObjectFieldTemplate should match its snapshot 1`] = `ShallowWrapper {}`;
diff --git a/src/schemas/jsonSchema.js b/src/schemas/jsonSchema.js
@@ -1,6 +1,6 @@
 const jsonSchema = {
-    title: 'A registration form',
-    description: 'A simple form example.',
+    title: 'Registration form',
+    description: 'Mulci-column form example.',
     type: 'object',
     required: ['firstName', 'lastName'],
     properties: {

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		-[{"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js":"1","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx":"2","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx":"3","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js":"4","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js":"5","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js":"6","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js":"7","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx":"8","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js":"9"},{"size":452,"mtime":1613077644221,"results":"10","hashOfConfig":"11"},{"size":460,"mtime":1613147279663,"results":"12","hashOfConfig":"11"},{"size":1478,"mtime":1613148101303,"results":"13","hashOfConfig":"11"},{"size":192,"mtime":1613088855077,"results":"14","hashOfConfig":"11"},{"size":612,"mtime":1613072388235,"results":"15","hashOfConfig":"11"},{"size":830,"mtime":1613089761093,"results":"16","hashOfConfig":"11"},{"size":651,"mtime":1613089723356,"results":"17","hashOfConfig":"11"},{"size":1801,"mtime":1613144044405,"results":"18","hashOfConfig":"11"},{"size":106,"mtime":1613092417203,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"1675vna",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js",[],["39","40","41","42","43"],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js",[],{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","replacedBy":"51"},{"ruleId":"52","replacedBy":"53"},"lines-around-directive",["54"],"global-require",[],"no-buffer-constructor",[],"no-new-require",[],"no-path-concat",[],"padding-line-between-statements"]
	`1`	+[{"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js":"1","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx":"2","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx":"3","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js":"4","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js":"5","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js":"6","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js":"7","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx":"8","/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js":"9"},{"size":452,"mtime":1613077644221,"results":"10","hashOfConfig":"11"},{"size":460,"mtime":1613147279663,"results":"12","hashOfConfig":"11"},{"size":1447,"mtime":1613223053048,"results":"13","hashOfConfig":"11"},{"size":192,"mtime":1613088855077,"results":"14","hashOfConfig":"11"},{"size":612,"mtime":1613072388235,"results":"15","hashOfConfig":"11"},{"size":832,"mtime":1613223006190,"results":"16","hashOfConfig":"11"},{"size":651,"mtime":1613089723356,"results":"17","hashOfConfig":"11"},{"size":1800,"mtime":1613222701333,"results":"18","hashOfConfig":"11"},{"size":106,"mtime":1613092417203,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"1675vna",{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"27","messages":"28","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"29","messages":"30","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"31","messages":"32","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"35","messages":"36","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},{"filePath":"37","messages":"38","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"22"},"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/reportWebVitals.js",[],["39","40","41","42","43"],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/App.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/LocationsPanel.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/formData.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/index.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/jsonSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/schemas/uiSchema.js",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/components/TwoColObjectFieldTemplate.jsx",[],"/Users/mauget/WebstormProjects/react-json-schema-form-demo/src/services/getFormData.js",[],{"ruleId":"44","replacedBy":"45"},{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","replacedBy":"51"},{"ruleId":"52","replacedBy":"53"},"lines-around-directive",["54"],"global-require",[],"no-buffer-constructor",[],"no-new-require",[],"no-path-concat",[],"padding-line-between-statements"]
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`// Jest Snapshot v1, https://goo.gl/fbAQLP`
`2`	`2`
`3`		-exports[`TwoColObjectFieldTemplate should match its snapshot 1`] = `ShallowWrapper {}`;
	`3`	+exports[`MultiColumnObjectFieldTemplate should match its snapshot 1`] = `ShallowWrapper {}`;