React Inline Edit Kit

An assortment of common HTML form elements, editable in-line the React way.

Try out the demo and see what it looks like.

Installation

npm install @attently/riek --save-dev

or

yarn add @attently/riek --dev

Use --save-dev because you don't want to build and pack JS/CSS in production

Usage

Import the library:

``javascript
import { RIEToggle, RIEInput, RIETextArea, RIENumber, RIETags, RIESelect } from '@attently/riek'
import _ from 'lodash'
`

Suppose we want to be able to edit title of a Task and send changes to server. Here is a Task stored flat inside of our parent React component:

`javascript
this.state = {
id: 1,
title: 'Cover with tests',
completed: false
}
`

Now we need a function which will send the single altered { key: value } and upsert local state. You can implement it inside of your flux/redux/mobx store:

`javascript
const httpTaskCallback = (task) => {
request.post(/api/task/${this.state.id})
.send(task)
.end((err, res) => {
if (!err) return this.setState({ ...task })
// Handle HTTP error
})
}
`

Meanwhile, there is a simple Express handler on our API server:

`javascript
app.use('/api/task/:id', async (req, res) => {
// req.body will equal to { title: 'A new title' }
const { id } = req.params
await Task.update({ ...req.body }).where({ id })
res.send('OK')
})
`

Finally, in our render method, we add a minimal RIEInput:

`javascript
value={this.state.text}
change={this.httpTaskCallback}
propName='title'
validate={_.isString} />
`

...repeat the last step, adding a Riek component for any object property we wish to edit.

Components come unstyled, so take a look at demo.jsx for examples.

Common props

$3

* value: initial prop value
* propName: name of the prop to return to the _change_ function
* change: function which will receive a plain object with a single key, provided in _propName_

$3

* editing: editing state, to change editing state programmatically
* validate: validator function, returning a boolean
* shouldBlockWhileLoading: disables editing until a new value is confirmed by parent
* shouldRemainWhileInvalid: remain in editing mode if validation fails
* shouldStartEditOnDoubleClick: start editing mode on click if false or on double click if true, default : false
* defaultProps: Additional props for idle component.

#### Customization
* classLoading: CSS class name to use when loading
* classEditing: CSS class name to apply while in editing mode
* classInvalid: CSS class name to apply when _validate_ returned false
* className: CSS base class
* editProps: Additional props for the editing component. This allows you to, for example, specify a maxLength attribute to control the maximum number of characters in the textarea, or add style.
* selectAll: Default true. When editing, select all the input's contents if true, otherwise simply focus()

#### Hooks
* beforeStart: Fires before editing starts
* afterStart: Fires after editing starts
* beforeFinish: Fires before editing ends, before validations
* afterFinish: Fires after editing ends, after validations

$3

#### RIENumber
* format: custom formatting function, returns formatted string

#### RIETextArea
* rows: rows property on textarea tag while editing
* cols: rows property on textarea tag while editing

#### RIESelect
* options: an array of objects containing values and text for select options
`javascript
{id: '1', text: 'one'},
{id: '2', text: 'two'},
{id: '3', text: 'three'}
]} />
`

Contributing

The build process does not work with Node v6 at the moment: use Node Version Manager, or just plain Node v5.6.0.

1. Clone this repo locally, run npm i
2. Make your changes
3. Do npm run build to compile the lib and demo
4. Open index.html and check if it works
5. Open JS console in browser, set localStorage.debug = '*'` to see debug messages, add more if necessary
6. ???
7. Submit a pull request