Skip to content

Commit

Permalink
Add OGM documentation
Browse files Browse the repository at this point in the history
  • Loading branch information
NaridaL committed Apr 10, 2020
1 parent 9c9f2a8 commit 1aba0df
Show file tree
Hide file tree
Showing 2 changed files with 49 additions and 2 deletions.
32 changes: 30 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,14 +79,17 @@ CDN: <https://unpkg.com/mobx-utils/mobx-utils.umd.js>
- [deepObserve](#deepobserve)
- [Parameters](#parameters-17)
- [Examples](#examples-16)
- [ObservableGroupMap](#observablegroupmap)
- [Examples](#examples-17)
- [ObservableMap](#observablemap)
- [computedFn](#computedfn)
- [Parameters](#parameters-18)
- [Examples](#examples-17)
- [Examples](#examples-18)
- [DeepMapEntry](#deepmapentry)
- [DeepMap](#deepmap)
- [actionAsync](#actionasync)
- [Parameters](#parameters-19)
- [Examples](#examples-18)
- [Examples](#examples-19)

## fromPromise

Expand Down Expand Up @@ -739,6 +742,31 @@ const disposer = deepObserve(target, (change, path) => {
})
```

## ObservableGroupMap

Reactively sorts a base observable array into multiple observable arrays based on the value of a
`groupBy: (item: T) => G` function.

This observes the individual computed groupBy values and only updates the source and dest arrays
when there is an actual change, so this is far more efficient than, for example
`base.filter(i => groupBy(i) === 'we')`.

No guarantees are made about the order of items in the grouped arrays.

### Examples

```javascript
const slices = observable([
{ day: "mo", hours: 12 },
{ day: "tu", hours: 2 },
])
const slicesByDay = new ObservableGroupMap(slices, (slice) => slice.day)
autorun(() => console.log(slicesByDay.get("we"))) // outputs undefined
slices[0].day = "we" // outputs [{ day: "we", hours: 12 }]
```

## ObservableMap

## computedFn

computedFn takes a function with an arbitrarily amount of arguments,
Expand Down
19 changes: 19 additions & 0 deletions src/ObservableGroupMap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,25 @@ interface GrouperItemInfo {
grouperArrIndex: number
}

/**
* Reactively sorts a base observable array into multiple observable arrays based on the value of a
* `groupBy: (item: T) => G` function.
*
* This observes the individual computed groupBy values and only updates the source and dest arrays
* when there is an actual change, so this is far more efficient than, for example
* `base.filter(i => groupBy(i) === 'we')`.
*
* No guarantees are made about the order of items in the grouped arrays.
*
* @example
* const slices = observable([
* { day: "mo", hours: 12 },
* { day: "tu", hours: 2 },
* ])
* const slicesByDay = new ObservableGroupMap(slices, (slice) => slice.day)
* autorun(() => console.log(slicesByDay.get("we"))) // outputs undefined
* slices[0].day = "we" // outputs [{ day: "we", hours: 12 }]
*/
export class ObservableGroupMap<G, T> extends ObservableMap<G, IObservableArray<T>> {
private readonly keyToName: (group: G) => string

Expand Down

0 comments on commit 1aba0df

Please sign in to comment.