Skip to content

Commit

Permalink
Merge pull request #231 from blueflag/release/scientific-salamander
Browse files Browse the repository at this point in the history
Release/scientific salamander
  • Loading branch information
dxinteractive committed Jul 16, 2019
2 parents 8d1329c + afddc35 commit 1cf6ca3
Show file tree
Hide file tree
Showing 34 changed files with 404 additions and 274 deletions.
21 changes: 7 additions & 14 deletions packages/dataparcels-docs/src/content/API.js
Expand Up @@ -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>
Expand Down
Expand Up @@ -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
});

Expand All @@ -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>);
}
Expand Up @@ -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;
Expand All @@ -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>);
}
Expand Up @@ -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>
Expand Down
Expand Up @@ -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;
Expand All @@ -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>);
}
Expand Up @@ -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;
Expand Down
Expand Up @@ -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
Expand Down
Expand Up @@ -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
});

Expand Down
3 changes: 3 additions & 0 deletions packages/dataparcels-docs/src/layout/index.scss
Expand Up @@ -75,6 +75,9 @@
text-shadow: -6px 6px 0px lighten(color('primary'), 10),
-12px 12px 0px lighten(color('primary'), 30)
}
&-code {
overflow: auto;
}
}
@include DcmeTypography {
input {
Expand Down
7 changes: 4 additions & 3 deletions packages/dataparcels-docs/src/pages/api/useParcelForm.jsx
Expand Up @@ -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>;

0 comments on commit 1cf6ca3

Please sign in to comment.