Skip to content

Commit

Permalink
add disabled prop (ianstormtaylor#15)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianstormtaylor
ianstormtaylor authored Jul 11, 2018
1 parent 8b01ae0 commit 73092d9
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 20 deletions.
49 changes: 38 additions & 11 deletions docs/guide.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
* [Observing Changes](#observing-changes)
* [Setting Defaults](#settings-defaults)
* [Controlled vs. Uncontrolled](#controlled-vs-uncontrolled)
* [Disabling Components](#disabling-components)
* [Spreading Props](#spreading-props)

## Installing `react-values`
Expand All @@ -22,7 +23,7 @@ npm install --save react-values

You can then import any of its helpers into your code base:

```js
```jsx
import { BooleanValue, NumberValue } from 'react-values'
```

Expand All @@ -40,7 +41,7 @@ With `react-values` installed, now you can start building components with it. Fo
To start, setup an non-interactive toggle component with some styles:
```js
```jsx
import React from 'react'
import styled from 'react-emotion'
Expand Down Expand Up @@ -74,7 +75,7 @@ const Toggle = () => (
Which you can render like so:

```js
```jsx
<Toggle />
```

Expand All @@ -84,7 +85,7 @@ This works, but the toggle is not interactive. It has no way of managing any sta

To make it stateful, lets use a `<BooleanValue>` helper from `react-values`:

```js
```jsx
import { BooleanValue } from 'react-values'

const Toggle = () => (
Expand Down Expand Up @@ -112,7 +113,7 @@ But we're not done yet... There is no way to observe the toggle as it changes, s

To observe the toggle's state, you can pass in an `onChange` prop to the `<BooleanValue>`:

```js
```jsx
const Toggle = ({ onChange }) => (
<BooleanValue onChange={onChange}>
{({ value, toggle }) => (
Expand All @@ -126,7 +127,7 @@ const Toggle = ({ onChange }) => (

Now you can listen for changes to the toggle by passing in an `onChange` handler:

```js
```jsx
<Toggle onChange={value => ...} />
```

Expand All @@ -136,7 +137,7 @@ If you want to share this component with others, they might ask you to be able t

To do this, use the `defaultValue` prop:

```js
```jsx
const Toggle = ({ defaultValue, onChange }) => (
<BooleanValue defaultValue={defaultValue} onChange={onChange}>
{({ value, toggle }) => (
Expand All @@ -150,7 +151,7 @@ const Toggle = ({ defaultValue, onChange }) => (

That way people can do:

```js
```jsx
<Toggle
defaultValue={true}
onChange={value => ...}
Expand All @@ -163,7 +164,7 @@ But wait! What if someone wants to use the toggle in a "controlled" manner, just

To do that, you can use the `value` prop:

```js
```jsx
const Toggle = ({ value, defaultValue, onChange }) => (
<BooleanValue value={value} defaultValue={defaultValue} onChange={onChange}>
{({ value, toggle }) => (
Expand All @@ -177,7 +178,7 @@ const Toggle = ({ value, defaultValue, onChange }) => (

Now anyone who renders the toggle can choose whether they want to use it in a "controlled" manner or an "uncontrolled" manner, by passing either a `value` or a `defaultValue`:

```js
```jsx
<Toggle
value={true}
onChange={value => ...}
Expand All @@ -189,11 +190,37 @@ Now anyone who renders the toggle can choose whether they want to use it in a "c
/>
```

## Disabling Components

You can also pass in a `disabled` prop to disable the value helper. This will make it so that it ignores any state changes, just like how React's native `<input>` and `<select>` components do.

```jsx
const Toggle = ({ value, defaultValue, onChange }) => (
<BooleanValue value={value} defaultValue={defaultValue} onChange={onChange}>
{({ value, toggle }) => (
<Track on={value} onClick={toggle}>
<Thumb on={value} />
</Track>
)}
</BooleanValue>
)
```

Then anyone can disable the component with:

```jsx
<Toggle
value={true}
disabled={true}
onChange={value => ...}
/>
```

## Spreading Props

One final change, just for simplicity's sake. You'll notice how we were passing the props in explicitly, but to make your code even simpler you can just spread them directly onto the `<BooleanValue>` instead:

```js
```jsx
const Toggle = props => (
<BooleanValue {...props}>
{({ value, toggle }) => (
Expand Down
80 changes: 72 additions & 8 deletions docs/reference.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,12 @@ The `<AnyValue>` component is the most generic component exposed by `react-value

It takes either a `value` or `defaultValue` and an `onChange` handler. Depending on whether you pass it `value` or `defaultValue` it will either be "controlled" or "uncontrolled", respectively.

```js
```jsx
<AnyValue
value={Any|undefined}
defaultValue={Any|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand All @@ -34,6 +35,13 @@ It takes either a `value` or `defaultValue` and an `onChange` handler. Depending
</AnyValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ----------- | ----------------------- | ----------------------------------------------------------- |
| `value` | `Any` | The state's current value. |
Expand All @@ -47,11 +55,12 @@ It takes either a `value` or `defaultValue` and an `onChange` handler. Depending

A value for an `Array`.

```js
```jsx
<ArrayValue
value={Array|undefined}
defaultValue={Array|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand All @@ -75,6 +84,13 @@ A value for an `Array`.
</ArrayValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ----------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| `value` | `Array` | The current array value. |
Expand Down Expand Up @@ -104,11 +120,12 @@ A value for an `Array`.

A value for a `Boolean`.

```js
```jsx
<BooleanValue
value={Boolean|undefined}
defaultValue={Boolean|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand All @@ -122,6 +139,13 @@ A value for a `Boolean`.
</BooleanValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ----------- | ------------------------- | ----------------------------------------------------------- |
| `value` | `Boolean` | The current boolean value. |
Expand All @@ -136,11 +160,12 @@ A value for a `Boolean`.

A value for a `Date`.

```js
```jsx
<DateValue
value={Date|undefined}
defaultValue={Date|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand Down Expand Up @@ -181,6 +206,13 @@ A value for a `Date`.
</DateValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ----------------------- | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` | `Date` | The current date value. |
Expand Down Expand Up @@ -222,11 +254,12 @@ A value for a `Date`.

A value for a `Map`.

```js
```jsx
<MapValue
value={Map|undefined}
defaultValue={Map|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand All @@ -241,6 +274,13 @@ A value for a `Map`.
</MapValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ----------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` | `Any` | The current map value. |
Expand All @@ -256,11 +296,12 @@ A value for a `Map`.

A value for a `Number`.

```js
```jsx
<NumberValue
value={Number|undefined}
defaultValue={Number|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand All @@ -274,6 +315,13 @@ A value for a `Number`.
</NumberValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ----------- | ----------------------------- | ----------------------------------------------------------- |
| `value` | `Number` | The current number value. |
Expand All @@ -289,11 +337,12 @@ A value for a `Number`.

A value for a `Set`.

```js
```jsx
<SetValue
value={Set|undefined}
defaultValue={Set|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand All @@ -310,6 +359,13 @@ A value for a `Set`.
</SetValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ----------- | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `value` | `Set` | The current set value. |
Expand All @@ -327,11 +383,12 @@ A value for a `Set`.

A value for a `String`.

```js
```jsx
<StringValue
value={String|undefined}
defaultValue={String|undefined}
onChange={Function}
disabled={Boolean}
>
{({
value,
Expand All @@ -357,6 +414,13 @@ A value for a `String`.
</StringValue>
```

| Prop | Type | Description |
| -------------- | ---------------------------- | ------------------------------------------------------------------ |
| `value` | `Any` | The value, for controlled components. |
| `defaultValue` | `Any` | The default value, for uncontrolled components. |
| `onChange` | `Function` `onChange(value)` | A handler that will be called whenever the current value changes. |
| `disabled` | `Boolean` | Whether the component is current disabled, ignoring state changes. |

| Render Prop | Type | Description |
| ------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `value` | `String` | The current string value. |
Expand Down
3 changes: 2 additions & 1 deletion src/components/any-value.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ class AnyValue extends React.Component {
}

transform(fn, options) {
const { value, onChange } = this.props
const { disabled, value, onChange } = this.props
if (disabled) return

if (this.state.controlled) {
const next = this.apply(value, fn, options)
Expand Down
9 changes: 9 additions & 0 deletions test/components/any-value.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,4 +61,13 @@ describe('<AnyValue>', () => {
Renderer.create(<AnyValue render={fake} value={42} />)
assert.equal(fake.lastArg.value, 42)
})

it('disabled', () => {
const fake = sinon.fake.returns(null)
Renderer.create(<AnyValue children={fake} disabled />)
const { callCount } = fake
fake.lastArg.set(true)
assert.notEqual(fake.lastArg.value, true)
assert.equal(fake.callCount, callCount)
})
})

0 comments on commit 73092d9

Please sign in to comment.