Feature/on submit

packages/dataparcels-docs/src/content/API.js

@@ -42,34 +42,27 @@ export default () => <Box>
         </Box>}
         image={IconParcelBoundary}
     />
-    <Item
-        name="useParcelState"
-        description={<Box>
-            <Text element="p" modifier="marginMilli">useParcelState is a React hook.</Text>
-            <Text element="p">Its job is to provide a parcel stored in state, and to handle how the parcel responds to changes in React props.</Text>
-        </Box>}
-        image={IconParcelHoc}
-    />
     <Item
         name="useParcelForm"
         description={<Box>
             <Text element="p" modifier="marginMilli">useParcelForm is a React hook.</Text>
-            <Text element="p">Its job is to make submittable forms easy to build, by combining useParcelState and useParcelBuffer together.</Text>
+            <Text element="p">Its job is to make submittable forms easy to build. It provides a parcel stored in state and a buffer to store unsaved changes, and also handles how the parcel responds to changes in React props.</Text>
         </Box>}
-        image={IconParcelBoundaryHoc}
+        image={IconParcelHoc}
     />
     <Item
-        name="useParcelBuffer"
+        name="useParcelState"
         description={<Box>
-            <Text element="p" modifier="marginMilli">useParcelBuffer is a React hook.</Text>
-            <Text element="p">Its job is to control the flow of parcel changes by providing a buffer.</Text>
+            <Text element="p" modifier="marginMilli">useParcelState is a React hook.</Text>
+            <Text element="p">Its job is to provide a parcel stored in state, and to handle how the parcel responds to changes in React props.</Text>
         </Box>}
-        image={IconParcelBoundaryHoc}
+        image={IconParcelHoc}
     />
     <Text element="h3" modifier="marginKilo sizeKilo">See also</Text>
     <BulletList>
         <BulletListItem><Link className="Link" to="/api/ParcelDrag">ParcelDrag</Link></BulletListItem>
         <BulletListItem><Link className="Link" to="/api/validation">validation</Link></BulletListItem>
+        <BulletListItem><Link className="Link" to="/api/useParcelBuffer">useParcelBuffer</Link></BulletListItem>
         <BulletListItem><Link className="Link" to="/api/ChangeRequest">ChangeRequest</Link></BulletListItem>
         <BulletListItem><Link className="Link" to="/api/CancelActionMarker">CancelActionMarker</Link></BulletListItem>
         <BulletListItem><Link className="Link" to="/api/ParcelShape">ParcelShape</Link></BulletListItem>

packages/dataparcels-docs/src/examples/SubmitButtonOnChange.jsx

@@ -25,7 +25,7 @@ export default function SignUpForm(props) {
 
     let [personParcel, personParcelControl] = useParcelForm({
         value: initialValue,
-        onChange: (parcel) => saveMyData(parcel.value)
+        onSubmit: (parcel) => saveMyData(parcel.value)
         // ^ returns a promise
     });
 
@@ -43,8 +43,8 @@ export default function SignUpForm(props) {
 
         <button onClick={() => personParcelControl.submit()}>Submit</button>
 
-        <p>Request state: <strong>{personParcelControl.onChangeStatus.status}</strong>
-            {personParcelControl.onChangeStatus.isPending && <button onClick={rejectRef.current}>reject</button>}
+        <p>Request state: <strong>{personParcelControl.submitStatus.status}</strong>
+            {personParcelControl.submitStatus.isPending && <button onClick={rejectRef.current}>reject</button>}
         </p>
     </div>);
 }

packages/dataparcels-docs/src/examples/SubmitButtonOnChangeClear.jsx

@@ -25,11 +25,11 @@ export default function SignUpForm(props) {
 
     let [personParcel, personParcelControl] = useParcelForm({
         value: initialValue,
-        onChange: async (parcel) => {
+        onSubmit: async (parcel) => {
             await saveMyData(parcel.value);
             return initialValue;
         },
-        onChangeUseResult: true
+        onSubmitUseResult: true
     });
 
     let personParcelState = personParcelControl._outerParcel;
@@ -46,8 +46,8 @@ export default function SignUpForm(props) {
 
         <button onClick={() => personParcelControl.submit()}>Submit</button>
 
-        <p>Request state: <strong>{personParcelControl.onChangeStatus.status}</strong>
-            {personParcelControl.onChangeStatus.isPending && <button onClick={rejectRef.current}>reject</button>}
+        <p>Request state: <strong>{personParcelControl.submitStatus.status}</strong>
+            {personParcelControl.submitStatus.isPending && <button onClick={rejectRef.current}>reject</button>}
         </p>
     </div>);
 }

packages/dataparcels-docs/src/examples/SubmitButtonOnChangeClearSource.txt

@@ -11,11 +11,11 @@ export default function SignUpForm(props) {
 
     let [personParcel, personParcelControl] = useParcelForm({
         value: initialValue,
-        onChange: async (parcel) => {
+        onSubmit: async (parcel) => {
             await saveMyData(parcel.value);
             return initialValue;
         },
-        onChangeUseResult: true
+        onSubmitUseResult: true
     });
 
     return <div>

packages/dataparcels-docs/src/examples/SubmitButtonOnChangeLoad.jsx

@@ -32,8 +32,8 @@ export default function PersonEditor(props) {
 
     let [personParcel, personParcelControl] = useParcelForm({
         value: initialValue,
-        onChange: (parcel) => saveMyData(parcel.value),
-        onChangeUseResult: true
+        onSubmit: (parcel) => saveMyData(parcel.value),
+        onSubmitUseResult: true
     });
 
     let {timeUpdated} = personParcel.value;
@@ -54,8 +54,8 @@ export default function PersonEditor(props) {
 
         <button onClick={() => personParcelControl.submit()}>Submit</button>
 
-        <p>Request state: <strong>{personParcelControl.onChangeStatus.status}</strong>
-            {personParcelControl.onChangeStatus.isPending && <button onClick={rejectRef.current}>reject</button>}
+        <p>Request state: <strong>{personParcelControl.submitStatus.status}</strong>
+            {personParcelControl.submitStatus.isPending && <button onClick={rejectRef.current}>reject</button>}
         </p>
     </div>);
 }

packages/dataparcels-docs/src/examples/SubmitButtonOnChangeLoadSource.txt

@@ -6,8 +6,8 @@ export default function PersonEditor(props) {
 
     let [personParcel, personParcelControl] = useParcelForm({
         value: props.valueLoadedFromServer,
-        onChange: (parcel) => saveMyData(parcel.value),
-        onChangeUseResult: true
+        onSubmit: (parcel) => saveMyData(parcel.value),
+        onSubmitUseResult: true
     });
 
     let {timeUpdated} = personParcel.value;

packages/dataparcels-docs/src/examples/SubmitButtonOnChangeReduxSource.txt

@@ -7,7 +7,7 @@ export default function PersonEditor(props) {
     let [personParcel, personParcelControl] = useParcelForm({
         value: props.personData,
         updateValue: true,
-        onChange: (parcel) => props.dispatchMySaveAction(parcel.value)
+        onSubmit: (parcel) => props.dispatchMySaveAction(parcel.value)
     });
 
     // ^ dispatchMySaveAction should return a promise if it is

packages/dataparcels-docs/src/examples/SubmitButtonOnChangeSource.txt

@@ -11,7 +11,7 @@ export default function SignUpForm(props) {
 
     let [personParcel, personParcelControl] = useParcelForm({
         value: initialValue,
-        onChange: (parcel) => saveMyData(parcel.value)
+        onSubmit: (parcel) => saveMyData(parcel.value)
         // ^ returns a promise
     });
 

packages/dataparcels-docs/src/pages/api/useParcelForm.jsx

@@ -12,16 +12,17 @@ export default () => <Layout>
             '# Params',
             'value',
             'updateValue',
-            'onChange',
-            'onChangeUseResult',
+            'onSubmit',
+            'onSubmitUseResult',
             'buffer',
             'debounce',
             'validation',
             'beforeChange',
             '# Returns',
             'parcel',
             'parcelControl',
-            '# ParcelHookControl'
+            '# ParcelHookControl',
+            '# Inside the hook'
         ]}
     />
 </Layout>;