mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
remove non-working example since the work to make it work hasn't even started yet
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
parent
974f4b21fa
commit
1ae1c7ddbb
@ -7,11 +7,11 @@ This helps with having a more declarative style of managing state, as opposed to
|
||||
You should already have a basic understanding of how `React` handles state ([read here](https://reactjs.org/docs/faq-state.html) for more information).
|
||||
However, if you do not, here is a quick overview.
|
||||
|
||||
A `React.Component` is generic over both `Props` and `State` (with default empty object types).
|
||||
`Props` should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.
|
||||
`State` is a component's internal state and can be read by accessing the parent field `state`.
|
||||
`State` **must** be updated using the `setState` parent method which merges the new data with the old state.
|
||||
`React` does do some optimizations around re-rendering components after quick successions of `setState` calls.
|
||||
- A `React.Component` is generic over both `Props` and `State` (with default empty object types).
|
||||
- `Props` should be considered read-only from the point of view of the component and is the mechanism for passing in "arguments" to a component.
|
||||
- `State` is a component's internal state and can be read by accessing the parent field `state`.
|
||||
- `State` **must** be updated using the `setState` parent method which merges the new data with the old state.
|
||||
- `React` does do some optimizations around re-rendering components after quick successions of `setState` calls.
|
||||
|
||||
## How mobx works:
|
||||
|
||||
@ -21,64 +21,3 @@ A `React.Component` is generic over both `Props` and `State` (with default empty
|
||||
- `computed`: data that is derived from `observable` data but is not actually stored. Think of this as computing `isEmpty` vs an `observable` field called `count`.
|
||||
|
||||
Further reading is available from `mobx`'s [website](https://mobx.js.org/the-gist-of-mobx.html).
|
||||
|
||||
## Basic usage of mobx:
|
||||
|
||||
When using `Lens`'s extension's API, some of the provided types are marked as `observable` and are documented as such.
|
||||
These can be used as normal types and the combination of `mobx` and `react` work to determine when a rerender should occur.
|
||||
|
||||
---
|
||||
|
||||
## Example:
|
||||
|
||||
Imagine that your extension wants to conditionally add an app menu if some other observable value is ever `true` (and remove it when it is `false`).
|
||||
That could be achieved using roughly the following code:
|
||||
|
||||
```typescript
|
||||
import { LensMainExtension, MenuRegistration } from "@k8slens/extensions";
|
||||
import observables from "./observables" // a collection of observable data
|
||||
import { IReactionDisposer } from "mobx";
|
||||
|
||||
interface MenuRegistrationWithId extends MenuRegistration {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export default class ExtensionMain extends LensMainExtension {
|
||||
menuReactionDispose?: IReactionDisposer;
|
||||
|
||||
appMenus: MenuRegistrationWithId[] = [
|
||||
{
|
||||
parentId: "file",
|
||||
label: strings.extension.appMenu["label"](),
|
||||
click() {
|
||||
console.log("you clicked the label menu")
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
onActivate() {
|
||||
this.menuReactionDispose = reaction(
|
||||
() => observables.clusterIsInState,
|
||||
clusterIsInState => {
|
||||
if (clusterIsInState) {
|
||||
this.appMenus.push({
|
||||
parentId: "file",
|
||||
label: "Remove from current state",
|
||||
click() {
|
||||
console.log("currently does nothing, removing...")
|
||||
},
|
||||
id: "clusterIsInState",
|
||||
})
|
||||
} else {
|
||||
this.appMenus = this.appMenus.filter(m => x.id !== "clusterIsInState")
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
onDeactivate() {
|
||||
this.menuReactionDispose?.() // always clenaup mobx disposers
|
||||
this.menuReactionDispose = undefined
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user