aboutsummaryrefslogtreecommitdiffstats
path: root/docs/form_persisting_architecture.md
diff options
context:
space:
mode:
authorDan Finlay <dan@danfinlay.com>2016-08-26 05:03:34 +0800
committerDan Finlay <dan@danfinlay.com>2016-08-26 05:03:34 +0800
commitfda126582e47b6d43fd349a4eac86a270220e629 (patch)
treeb43357cff4a1c2b237752ec54b3cbef2750e6fbb /docs/form_persisting_architecture.md
parentd81bde9f6c83c72dd693550494503f8be23a1a20 (diff)
downloadtangerine-wallet-browser-fda126582e47b6d43fd349a4eac86a270220e629.tar
tangerine-wallet-browser-fda126582e47b6d43fd349a4eac86a270220e629.tar.gz
tangerine-wallet-browser-fda126582e47b6d43fd349a4eac86a270220e629.tar.bz2
tangerine-wallet-browser-fda126582e47b6d43fd349a4eac86a270220e629.tar.lz
tangerine-wallet-browser-fda126582e47b6d43fd349a4eac86a270220e629.tar.xz
tangerine-wallet-browser-fda126582e47b6d43fd349a4eac86a270220e629.tar.zst
tangerine-wallet-browser-fda126582e47b6d43fd349a4eac86a270220e629.zip
Update persistient-form docs
Diffstat (limited to 'docs/form_persisting_architecture.md')
-rw-r--r--docs/form_persisting_architecture.md29
1 files changed, 11 insertions, 18 deletions
diff --git a/docs/form_persisting_architecture.md b/docs/form_persisting_architecture.md
index 9e6cb7c41..e2d766ccc 100644
--- a/docs/form_persisting_architecture.md
+++ b/docs/form_persisting_architecture.md
@@ -8,28 +8,21 @@ Since:
This calls for an architecture of a form component that can completely persist its values to LocalStorage on every relevant change, and restore those values on reopening.
-Whenever this class is loaded, it registers an `onChange` listener. On those events, it checks the target for a special ID attribute it listens for.
+ To achieve this, we have defined a class, a subclass of `React.Component`, called `PersistentForm`, and it's stored at `ui/lib/persistent-form.js`.
-Let's say we call our class `PersistentForm`. So then we might check for a `persistent-form-id` on change.
+To use this class, simply take your form component (the component that renders `input`, `select`, or `textarea` elements), and make it subclass from `PersistentForm` instead of `React.Component`.
-The parent element will define a special attribute, let's say `persistent-form-parent-id`.
+You can see an example of this in use in `ui/app/first-time/restore-vault.js`.
-Here's some pseudo-code for it:
-```
-onChange(ev) =>
- persisted = localStorage[parentKey]
- persisted[childKey] = ev.value
- localStorage[parentKey] = persisted
-```
+Additionally, any field whose value should be persisted, should have a `persistentFormId` attribute, which needs to be assigned under a `dataset` key on the main `attributes` hash. For example:
-On startup, we just do the inverse:
-
-```
-onStart() =>
- el = this.getEl()
- parentKey = el.attr('persistent-form-parent-id')
- children = el.children.where('[persistent-form-id]')
- children.each(loadValue)
+```javascript
+ return h('textarea.twelve-word-phrase.letter-spacey', {
+ dataset: {
+ persistentFormId: 'wallet-seed',
+ },
+ })
```
+That's it! This field should be persisted to `localStorage` on each `keyUp`, those values should be restored on view load, and the cached values should be cleared when navigating deliberately away from the form.