Skip to content
This repository has been archived by the owner on Sep 10, 2022. It is now read-only.

Commit

Permalink
Misc fixes & improvements (#267)
Browse files Browse the repository at this point in the history
* Fix mapPropsStream's example

It seems like in the docs, `Observable` refers to `Rx.Observable`.

In Rx4 and Rx5, `Rx.Observable.interval` emits numbers, not objects.

* Advertise `withProps`

* Clean-up some comments

* Fix links to the React documentation

* Improve renderComponent's doc

Since faaafb0 (#227), branch's third argument defaults to the identity
function. This is a nice addition and we probably want to advertise it
in renderComponent's doc.

* Remove dead code

Since 390697a (#180, 2016-05-21), branch()'s `{Left,Right}Component`
internal instance variables are not used anymore.
  • Loading branch information
matthieuprat authored and istarkov committed Oct 31, 2016
1 parent e9b8746 commit 20d578f
Show file tree
Hide file tree
Showing 3 changed files with 10 additions and 19 deletions.
24 changes: 10 additions & 14 deletions docs/API.md
Original file line number Diff line number Diff line change
Expand Up @@ -253,16 +253,15 @@ stateUpdater<T>((prevValue: T) => T, ?callback: Function): void
stateUpdate(newValue: any, ?callback: Function): void
```

The first form accepts a function which maps the previous state value to a new state value. You'll likely want to use this state updater along with `mapProps()` to create specific updater functions. For example, to create an HoC that adds basic counting functionality to a component:
The first form accepts a function which maps the previous state value to a new state value. You'll likely want to use this state updater along with `withHandlers()` or `withProps()` to create specific updater functions. For example, to create an HoC that adds basic counting functionality to a component:

```js
const addCounting = compose(
withState('counter', 'setCounter', 0),
mapProps(({ setCounter, ...rest }) => ({
withProps(({ setCounter }) => ({
increment: () => setCounter(n => n + 1),
decrement: () => setCounter(n => n - 1),
reset: () => setCounter(0),
...rest
reset: () => setCounter(0)
}))
)
```
Expand Down Expand Up @@ -313,15 +312,12 @@ Takes a component and returns a higher-order component version of that component
This is useful in combination with another helper that expects a higher-order component, like `branch()`:

```js
const identity = t => t

// `hasLoaded()` is a function that returns whether or not the the component
// `hasLoaded()` is a function that returns whether or not the component
// has all the props it needs
const spinnerWhileLoading = hasLoaded =>
branch(
hasLoaded,
identity, // Component => Component
renderComponent(Spinner) // <Spinner> is a React component
props => !hasLoaded(props),
renderComponent(Spinner) // `Spinner` is a React component
)

// Now use the `spinnerWhileLoading()` helper to add a loading spinner to any
Expand Down Expand Up @@ -354,7 +350,7 @@ shouldUpdate(
): HigherOrderComponent
```

Higher-order component version of [`shouldComponentUpdate()`](https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate). The test function accepts both the current props and the next props.
Higher-order component version of [`shouldComponentUpdate()`](https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate). The test function accepts both the current props and the next props.


### `pure()`
Expand Down Expand Up @@ -455,7 +451,7 @@ lifecycle(
): HigherOrderComponent
```

A higher-order component version of [`React.createClass()`](https://facebook.github.io/react/docs/top-level-api.html#react.createclass). It supports the entire `createClass()` API, except the `render()` method, which is implemented by default (and overridden if specified; an error will be logged to the console). You should use this helper as an escape hatch, in case you need to access component lifecycle methods.
A higher-order component version of [`React.createClass()`](https://facebook.github.io/react/docs/react-api.html#createclass). It supports the entire `createClass()` API, except the `render()` method, which is implemented by default (and overridden if specified; an error will be logged to the console). You should use this helper as an escape hatch, in case you need to access component lifecycle methods.

### `toClass()`

Expand Down Expand Up @@ -574,7 +570,7 @@ createEagerFactory(
) => ReactElement
```

The factory form of `createEagerElement()`. Given a component, it returns a [factory](https://facebook.github.io/react/docs/glossary.html#factories).
The factory form of `createEagerElement()`. Given a component, it returns a [factory](https://facebook.github.io/react/docs/react-api.html#createfactory).

### `createSink()`

Expand Down Expand Up @@ -718,7 +714,7 @@ You may want to use this version to interoperate with other Recompose higher-ord

```js
const enhance = mapPropsStream(props$ => {
const timeElapsed$ = Observable.interval(1000).pluck('value')
const timeElapsed$ = Observable.interval(1000)
return props$.combineLatest(timeElapsed$, (props, timeElapsed) => ({
...props,
timeElapsed
Expand Down
3 changes: 0 additions & 3 deletions src/packages/recompose/branch.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,6 @@ const identity = component => component

const branch = (test, left, right = identity) => BaseComponent =>
class extends React.Component {
LeftComponent = null;
RightComponent = null;

constructor(props, context) {
super(props, context)
this.computeChildComponent(this.props)
Expand Down
2 changes: 0 additions & 2 deletions src/packages/recompose/renderComponent.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
// import React from 'react'
import createHelper from './createHelper'
import createEagerFactory from './createEagerFactory'

const renderComponent = Component => _ => {
const factory = createEagerFactory(Component)
const RenderComponent = props => factory(props)
// const RenderComponent = props => <Component {...props} />
if (process.env.NODE_ENV !== 'production') {
/* eslint-disable global-require */
const wrapDisplayName = require('./wrapDisplayName').default
Expand Down

0 comments on commit 20d578f

Please sign in to comment.