diff --git a/Contributing.md b/Contributing.md index 83ad63c..c2c2991 100644 --- a/Contributing.md +++ b/Contributing.md @@ -2,11 +2,11 @@ Want to contribute to `react-values`? That would be awesome! -* [Reporting Bugs](#reporting-bugs) -* [Submitting Pull Requests](#submitting-pull-requests) -* [Running Examples](#running-examples) -* [Running Tests](#running-tests) -* [Publishing Releases](#publishing-releases) +- [Reporting Bugs](#reporting-bugs) +- [Submitting Pull Requests](#submitting-pull-requests) +- [Running Examples](#running-examples) +- [Running Tests](#running-tests) +- [Publishing Releases](#publishing-releases) ## Reporting Bugs diff --git a/Readme.md b/Readme.md index f2ebce8..6772933 100644 --- a/Readme.md +++ b/Readme.md @@ -31,15 +31,15 @@ It does this using a small render-prop-based API that exposes helpful transforms like `toggle`, `increment`, `filter`, etc. depending on the type of value, all based on JavaScripts native value types... -* `Any` values provide simple transforms like `set` and `clear`. -* `Array` values provide native methods like `push`, `pop`, `filter`, etc. -* `Boolean` values provide `toggle`, which we've all re-implemented 100 times. -* `Date` values provide really helpful transforms like `setHours` and `incrementMonth`. -* `Map` values provide native methods like `set`, `delete` and `clear`. -* `Number` values provide `increment` and `decrement`, which have also been re-written in every codebase ever. -* `Object` values provide helpful transforms like `set`, `unset` and `assign`. -* `Set` values provide native methods like `add`, `delete` and `clear`. -* `String` values provide native methods like `concat`, `repeat`, `trim`, etc. +- `Any` values provide simple transforms like `set` and `clear`. +- `Array` values provide native methods like `push`, `pop`, `filter`, etc. +- `Boolean` values provide `toggle`, which we've all re-implemented 100 times. +- `Date` values provide really helpful transforms like `setHours` and `incrementMonth`. +- `Map` values provide native methods like `set`, `delete` and `clear`. +- `Number` values provide `increment` and `decrement`, which have also been re-written in every codebase ever. +- `Object` values provide helpful transforms like `set`, `unset` and `assign`. +- `Set` values provide native methods like `add`, `delete` and `clear`. +- `String` values provide native methods like `concat`, `repeat`, `trim`, etc. This saves you from constantly re-writing the same state management logic, so you can keep your components focused on behavior and presentation. @@ -156,16 +156,16 @@ In the end, you're now maintaing a lot more logic than necessary, duplicated in To get a sense for how you might use `react-values`, check out a few of the examples: -* [**Basic Toggle**](https://ianstormtaylor.github.io/react-values/#/basic-toggle) — using a `Boolean` to create a simple toggle component. -* [**Reusable Toggle**](https://ianstormtaylor.github.io/react-values/#/reusable-toggle) — showing how you might turn that toggle into a controlled component in your own UI kit. -* [**Counter**](https://ianstormtaylor.github.io/react-values/#/counter) — a simple counter using a `Number` and its convenience transforms. -* [**Connected Counters**](https://ianstormtaylor.github.io/react-values/#/connected-counters) — two counters that are connected together, sharing a single value. -* [**Time Picker**](https://ianstormtaylor.github.io/react-values/#/time-picker) — a more complex time picker component, using `Date` and its convenience transforms. -* [**Filtering**](https://ianstormtaylor.github.io/react-values/#/filtering) — a basic `String` value used for filtering a list. -* [**Checkbox Set**](https://ianstormtaylor.github.io/react-values/#/checkbox-set) — using a `Set` to keep track of a checkbox group. -* [**Simple Tooltip**](https://ianstormtaylor.github.io/react-values/#/tooltip) — a simplistic tooltip implemented as a `Boolean`. -* [**Simple Modal**](https://ianstormtaylor.github.io/react-values/#/modal) — a simplistic modal implemented as a `Boolean`. -* [**Connected Modal**](https://ianstormtaylor.github.io/react-values/#/connected-modal) — a modal whose opened/closed state is controllable from other components. +- [**Basic Toggle**](https://ianstormtaylor.github.io/react-values/#/basic-toggle) — using a `Boolean` to create a simple toggle component. +- [**Reusable Toggle**](https://ianstormtaylor.github.io/react-values/#/reusable-toggle) — showing how you might turn that toggle into a controlled component in your own UI kit. +- [**Counter**](https://ianstormtaylor.github.io/react-values/#/counter) — a simple counter using a `Number` and its convenience transforms. +- [**Connected Counters**](https://ianstormtaylor.github.io/react-values/#/connected-counters) — two counters that are connected together, sharing a single value. +- [**Time Picker**](https://ianstormtaylor.github.io/react-values/#/time-picker) — a more complex time picker component, using `Date` and its convenience transforms. +- [**Filtering**](https://ianstormtaylor.github.io/react-values/#/filtering) — a basic `String` value used for filtering a list. +- [**Checkbox Set**](https://ianstormtaylor.github.io/react-values/#/checkbox-set) — using a `Set` to keep track of a checkbox group. +- [**Simple Tooltip**](https://ianstormtaylor.github.io/react-values/#/tooltip) — a simplistic tooltip implemented as a `Boolean`. +- [**Simple Modal**](https://ianstormtaylor.github.io/react-values/#/modal) — a simplistic modal implemented as a `Boolean`. +- [**Connected Modal**](https://ianstormtaylor.github.io/react-values/#/connected-modal) — a modal whose opened/closed state is controllable from other components. If you have an idea for an example that shows a common use case, pull request it! @@ -175,41 +175,41 @@ If you have an idea for an example that shows a common use case, pull request it If you're using `react-values` for the first time, check out the [Getting Started](./docs/guide.md) guide to familiarize yourself with how it works. Once you've done that, you'll probably want to check out the full [API Reference](http://docs.slatejs.org/react-values-core). -* [**Getting Started**](./docs/guide.md) - * [Installing `react-values`](./docs/guide.md#installing-react-values) - * [Building a Component](./docs/guide.md#building-a-component) - * [Introducing State](./docs/guide.md#introducing-state) - * [Observing Changes](./docs/guide.md#observing-changes) - * [Setting Defaults](./docs/guide.md#settings-defaults) - * [Controlled vs. Uncontrolled](./docs/guide.md#controlled-vs-uncontrolled) - * [Spreading Props](./docs/guide.md#spreading-props) -* [**Reference**](./docs/reference.md) - * [**Components**](./docs/reference.md#value) - * [``](./docs/reference.md#value) - * [``](./docs/reference.md#arrayvalue) - * [``](./docs/reference.md#booleanvalue) - * [``](./docs/reference.md#datevalue) - * [``](./docs/reference.md#mapvalue) - * [``](./docs/reference.md#numbervalue) - * [``](./docs/reference.md#objectvalue) - * [``](./docs/reference.md#setvalue) - * [``](./docs/reference.md#stringvalue) - * [**Connected Components**](./docs/reference.md#createvalue) - * [`createValue`](./docs/reference.md#createvalue) - * [`createArrayValue`](./docs/reference.md#createarrayvalue) - * [`createBooleanValue`](./docs/reference.md#createbooleanvalue) - * [`createDateValue`](./docs/reference.md#createdatevalue) - * [`createMapValue`](./docs/reference.md#createmapvalue) - * [`createNumberValue`](./docs/reference.md#createnumbervalue) - * [`createObjectValue`](./docs/reference.md#createobjectvalue) - * [`createSetValue`](./docs/reference.md#createsetvalue) - * [`createStringValue`](./docs/reference.md#createstringvalue) +- [**Getting Started**](./docs/guide.md) + - [Installing `react-values`](./docs/guide.md#installing-react-values) + - [Building a Component](./docs/guide.md#building-a-component) + - [Introducing State](./docs/guide.md#introducing-state) + - [Observing Changes](./docs/guide.md#observing-changes) + - [Setting Defaults](./docs/guide.md#settings-defaults) + - [Controlled vs. Uncontrolled](./docs/guide.md#controlled-vs-uncontrolled) + - [Spreading Props](./docs/guide.md#spreading-props) +- [**Reference**](./docs/reference.md) + - [**Components**](./docs/reference.md#value) + - [``](./docs/reference.md#value) + - [``](./docs/reference.md#arrayvalue) + - [``](./docs/reference.md#booleanvalue) + - [``](./docs/reference.md#datevalue) + - [``](./docs/reference.md#mapvalue) + - [``](./docs/reference.md#numbervalue) + - [``](./docs/reference.md#objectvalue) + - [``](./docs/reference.md#setvalue) + - [``](./docs/reference.md#stringvalue) + - [**Connected Components**](./docs/reference.md#createvalue) + - [`createValue`](./docs/reference.md#createvalue) + - [`createArrayValue`](./docs/reference.md#createarrayvalue) + - [`createBooleanValue`](./docs/reference.md#createbooleanvalue) + - [`createDateValue`](./docs/reference.md#createdatevalue) + - [`createMapValue`](./docs/reference.md#createmapvalue) + - [`createNumberValue`](./docs/reference.md#createnumbervalue) + - [`createObjectValue`](./docs/reference.md#createobjectvalue) + - [`createSetValue`](./docs/reference.md#createsetvalue) + - [`createStringValue`](./docs/reference.md#createstringvalue) If even that's not enough, you can always [read the source itself](./src). There are also translations of the documentation into other languages: -* [中文 (Chinese)](https://github.com/chinanf-boy/react-values-zh) +- [中文 (Chinese)](https://github.com/chinanf-boy/react-values-zh) If you're maintaining a translation, feel free to pull request it here! diff --git a/docs/guide.md b/docs/guide.md index 8614589..859a95e 100644 --- a/docs/guide.md +++ b/docs/guide.md @@ -1,14 +1,14 @@ # Getting Started -* [Installing `react-values`](#installing-react-values) -* [Building a Component](#building-a-component) -* [Introducing State](#introducing-state) -* [Observing Changes](#observing-changes) -* [Setting Defaults](#settings-defaults) -* [Controlled vs. Uncontrolled](#controlled-vs-uncontrolled) -* [Disabling Components](#disabling-components) -* [Spreading Props](#spreading-props) -* [Connecting Values](#connecting-values) +- [Installing `react-values`](#installing-react-values) +- [Building a Component](#building-a-component) +- [Introducing State](#introducing-state) +- [Observing Changes](#observing-changes) +- [Setting Defaults](#settings-defaults) +- [Controlled vs. Uncontrolled](#controlled-vs-uncontrolled) +- [Disabling Components](#disabling-components) +- [Spreading Props](#spreading-props) +- [Connecting Values](#connecting-values) ## Installing `react-values` diff --git a/docs/reference.md b/docs/reference.md index fea0889..87c307d 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -1,25 +1,25 @@ # API Reference -* **Components** - * [``](#value) - * [``](#arrayvalue) - * [``](#booleanvalue) - * [``](#datevalue) - * [``](#mapvalue) - * [``](#numbervalue) - * [``](#objectvalue) - * [``](#setvalue) - * [``](#stringvalue) -* **Connected Components** - * [`createValue`](#createvalue) - * [`createArrayValue`](#createarrayvalue) - * [`createBooleanValue`](#createbooleanvalue) - * [`createDateValue`](#createdatevalue) - * [`createMapValue`](#createmapvalue) - * [`createNumberValue`](#createnumbervalue) - * [`createObjectValue`](#createobjectvalue) - * [`createSetValue`](#createsetvalue) - * [`createStringValue`](#createstringvalue) +- **Components** + - [``](#value) + - [``](#arrayvalue) + - [``](#booleanvalue) + - [``](#datevalue) + - [``](#mapvalue) + - [``](#numbervalue) + - [``](#objectvalue) + - [``](#setvalue) + - [``](#stringvalue) +- **Connected Components** + - [`createValue`](#createvalue) + - [`createArrayValue`](#createarrayvalue) + - [`createBooleanValue`](#createbooleanvalue) + - [`createDateValue`](#createdatevalue) + - [`createMapValue`](#createmapvalue) + - [`createNumberValue`](#createnumbervalue) + - [`createObjectValue`](#createobjectvalue) + - [`createSetValue`](#createsetvalue) + - [`createStringValue`](#createstringvalue) --- diff --git a/examples/radio-set.js b/examples/radio-set.js new file mode 100644 index 0000000..b9af044 --- /dev/null +++ b/examples/radio-set.js @@ -0,0 +1,83 @@ +import React from 'react' +import styled from 'react-emotion' +import { SetValue } from '..' + +const CHOICES = ['Yes', 'No', 'Maybe'] + +const RadioSetExample = props => ( + + {({ value, add, clear }) => ( + + + {CHOICES.map((choice, i) => ( + + e.target.checked && (clear(), add(choice))} + /> + {choice} + + ))} + + + {Array.from(value).map((item, i) => ( + + {item} + + ))} + + + )} + +) + +const Container = styled('div')` + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +` + +const List = styled('div')` + padding: 20px; + columns: 3; + column-gap: 20px; + + & > * + * { + margin-top: 5px; + } +` + +const Item = styled('div')` + whitespace: no-wrap; +` + +const Radio = styled('input')` + display: inline-block; + vertical-align: middle; +` + +const RadioList = styled('div')` + padding: 20px; + display: flex; + flex-wrap: wrap; + + margin: -5px; + + & > * { + margin: 5px; + } +` + +const ListItem = styled('div')` + display: inline-block; + background: #969ba0; + padding: 0.333em 0.5em; + color: #000; + border-radius: 4px; +` + +export default RadioSetExample diff --git a/examples/support/examples.js b/examples/support/examples.js index 04952a7..cb2bd10 100644 --- a/examples/support/examples.js +++ b/examples/support/examples.js @@ -59,4 +59,10 @@ export default [ Component: require('../connected-modal').default, source: require('!raw-loader!../connected-modal'), }, + { + name: 'Radio Set', + path: '/radio-set', + Component: require('../radio-set').default, + source: require('!raw-loader!../radio-set'), + }, ] diff --git a/src/types/map.js b/src/types/map.js index bc48523..cc5d121 100644 --- a/src/types/map.js +++ b/src/types/map.js @@ -9,7 +9,9 @@ class MapStore extends Store { this.define('set', (v, ...a) => { const first = a[0] return a.length === 1 - ? typeof first === 'function' ? first(v) : first + ? typeof first === 'function' + ? first(v) + : first : v.set(...a) })