@genesislcap/foundation-layout 14.92.1 → 14.92.2-beta.revert-PA-913.1

package/docs/api/foundation-layout.layoutcomponentwithstate.md

@@ -1,75 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [@genesislcap/foundation-layout](./foundation-layout.md) &gt; [LayoutComponentWithState](./foundation-layout.layoutcomponentwithstate.md)
-
-## LayoutComponentWithState interface
-
-Interface to implement on an item which is a component of the layout and you wish to serialise state with. This is saved separately for each instance of the component, which allows you to restore multiple instances of the same component with different state.
-
-**Signature:**
-
-```typescript
-export interface LayoutComponentWithState<T> 
-```
-
-## Remarks
-
-When the layout is saved either via the autosave functionality or manually calling [FoundationLayout.getLayout()](./foundation-layout.foundationlayout.getlayout.md)<!-- -->, all contained components will be requested to provide state if they wish.
-
-Any state which is provided will be saved as part of the layout config and will be passed back to the component when the layout is reloaded. Before an item is appended onto the layout DOM, the state will be applied to the component via `applyState`<!-- -->. You will likely want to cache this and then use it later in the lifecycle of the component. The state is `null` when the instance is first created.
-
-See the written documentation for some error scenarios to consider about when implementing this interface.
-
-## Example 1
-
-
-```
-type ComponentState = {
-  foo: string;
-}
-\@customElement({ name: 'my-component' })
-export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
-  \@observable foo: string;
-  private fooCache: ComponentState | null;
-
-  getCurrentState(): ComponentState {
-    if (!this.foo) return null;
-    return {
-      foo: this.foo;
-    }
-  }
-
-  applyState(state: ComponentState | null) {
-    this.fooCache = state;
-  }
-
-  connectedCallback() {
-    // do other required setup
-    if (this.fooCache) {
-      this.foo = this.fooCache.foo;
-    }
-  }
-}
-```
-
-## Example 2
-
-If you are using the autosave functionality you should inform the layout system when you update the state of a component, otherwise the state will only be updated when the user performs an action such as resizing an item. Use the [LayoutReceiveEvents](./foundation-layout.layoutreceiveevents.md) `autosave` event.
-
-```
-// Same component as above
-export class MyComponent extends FASTElement implements LayoutComponentWithState<ComponentState> {
- // can use xChanged pattern as `foo` was declared observable
- fooChanged() {
-   this.$emit(LayoutReceiveEvents.autosave);
- }
-}
-```
-
-## Methods
-
-|  Method | Description |
-|  --- | --- |
-|  [applyState(state)](./foundation-layout.layoutcomponentwithstate.applystate.md) | Handle any state that has been saved previously for this instance of this component. This will be called before the component is appended to the DOM. Due to the lifecycle events not running by this point, it is recommended you cache the state and then apply it in <code>connectedCallback</code>. |
-|  [getCurrentState()](./foundation-layout.layoutcomponentwithstate.getcurrentstate.md) | Provide the state you wish to save. It is recommended if the component which implements this interface has not fully initialised at the point this is called that you return <code>null</code> as the state, following the pattern of <code>null</code> being set as the initial state. |
-