From fda126582e47b6d43fd349a4eac86a270220e629 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 25 Aug 2016 14:03:34 -0700 Subject: Update persistient-form docs --- docs/form_persisting_architecture.md | 29 +++++++++++------------------ 1 file 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. -- cgit v1.2.3