RIEK Components Demo

├── .nvmrc ├── .npmignore ├── .babelrc ├── .gitignore ├── webpack.config.js ├── src ├── index.js ├── RIEToggle.js ├── RIETextArea.js ├── RIESelect.js ├── RIENumber.js ├── RIEBase.js ├── RIEStatefulBase.js └── RIETags.js ├── index.html ├── LICENSE ├── package.json ├── demo ├── style.css └── demo.jsx ├── CHANGELOG.md ├── README.md └── yarn.lock /.nvmrc: -------------------------------------------------------------------------------- 1 | v5.6.0 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | demo -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react", "stage-1"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | .idea 4 | *.log 5 | .DS_Store -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | loaders: [ 4 | { 5 | test: /\.jsx?$/, 6 | exclude: /(node_modules)/, 7 | loader: 'babel' 8 | } 9 | ] 10 | }, 11 | externals: { 12 | react: 'React', 13 | 'react-dom': 'ReactDOM' 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import RIEToggle from './RIEToggle'; 2 | import RIEStatefulBase from './RIEStatefulBase'; 3 | import RIETextArea from './RIETextArea' 4 | import RIENumber from './RIENumber'; 5 | import RIETags from './RIETags' 6 | import RIESelect from './RIESelect' 7 | 8 | class RIEInput extends RIEStatefulBase { 9 | 10 | } 11 | 12 | export {RIEToggle, RIEInput, RIETextArea, RIENumber, RIETags, RIESelect}; 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | RIEK Components Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Loading React...

13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/RIEToggle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import RIEBase from './RIEBase'; 4 | 5 | export default class RIEToggle extends RIEBase { 6 | 7 | static propTypes = { 8 | textTrue: PropTypes.string, 9 | textFalse: PropTypes.string 10 | }; 11 | 12 | elementClick = (e) => { 13 | if(this.props.isDisabled) return; 14 | this.setState({value: !this.props.value}); 15 | this.commit(!this.props.value); 16 | }; 17 | 18 | render = () => { 19 | let valueToRender = this.state.loading ? this.state.value : this.props.value; 20 | return 26 | {valueToRender ? (this.props.textTrue || 'yes') : (this.props.textFalse || 'no')} 27 | ; 28 | }; 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | Copyright (c) 2016 Kai Vik 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "riek", 3 | "version": "1.1.0", 4 | "description": "React Inline Edit Kit", 5 | "author": "Kai Vik ", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git://github.com/kaivi/riek.git" 10 | }, 11 | "main": "lib/index.js", 12 | "keywords": [ 13 | "react", 14 | "in-place", 15 | "edit", 16 | "editor", 17 | "inplace", 18 | "inline" 19 | ], 20 | "scripts": { 21 | "test": "echo \"Error: no test specified\" && exit 1", 22 | "prepublish": "npm run build", 23 | "build-lib": "rm -rf lib/*; babel src --out-dir lib", 24 | "build-demo": "rm demo/demo.js; webpack demo/demo.jsx demo/demo.js", 25 | "build": "npm run build-lib && npm run build-demo" 26 | }, 27 | "peerDependencies": { 28 | "react": "^0.14.0 || ^15.5.4", 29 | "react-dom": "^0.14.0 || ^15.5.4" 30 | }, 31 | "dependencies": { 32 | "debug": "^2.6.8", 33 | "prop-types": "^15.5.10" 34 | }, 35 | "devDependencies": { 36 | "babel-cli": "^6.4.0", 37 | "babel-core": "^6.4.0", 38 | "babel-loader": "^6.2.1", 39 | "babel-preset-es2015": "^6.3.13", 40 | "babel-preset-react": "^6.3.13", 41 | "babel-preset-stage-1": "^6.3.13", 42 | "highlight.js": "^9.1.0", 43 | "react-highlight": "^0.6.1", 44 | "webpack": "^1.12.11" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/RIETextArea.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import RIEStatefulBase from './RIEStatefulBase'; 4 | 5 | export default class RIETextArea extends RIEStatefulBase { 6 | keyDown = (event) => { 7 | if (event.keyCode === 27) { this.cancelEditing() } // Escape 8 | }; 9 | 10 | renderEditingComponent = () => { 11 | return

;
22 |     };
23 | 
24 |     renderNormalComponent = () => {
25 |         const value = this.state.newValue || this.props.value
26 |         const spans_and_brs = []
27 |         let i = 0
28 |         value.split("\n").map(line => {
29 |           spans_and_brs.push(<span key={i}>{line}</span>)
30 |           spans_and_brs.push(<br key={i+1} />)
31 |           i += 2
32 |         })
33 |         spans_and_brs.pop() // remove last br tag
34 | 
35 |         return <span
36 |             tabIndex="0"
37 |             className={this.makeClassString()}
38 |             onFocus={this.startEditing}
39 |             onClick={this.startEditing}
40 |             {...this.props.defaultProps}>{spans_and_brs}</span>;
41 |     };
42 | }
43 |

--------------------------------------------------------------------------------
/demo/style.css:
--------------------------------------------------------------------------------
 1 | html, body, input, span, textarea {
 2 |     font-family: "Trebuchet MS", Helvetica, sans-serif;
 3 |     font-size: 16px;
 4 |     margin: 0;
 5 |     padding: 0;
 6 | }
 7 | 
 8 | .menu, .content {
 9 |     padding: 0 15px 0 15px;
10 | }
11 | 
12 | ul {
13 |     list-style: none;
14 |     padding: 0;
15 | }
16 | 
17 | li {
18 |     margin-bottom: 5px;
19 | }
20 | 
21 | input, textarea {
22 |     border: none;
23 |     border-color: transparent;
24 | }
25 | 
26 | .invalid {
27 |     outline-color: orangered !important;
28 | }
29 | 
30 | .editable {
31 |     background-color: yellow;
32 | }
33 | 
34 | .loading {
35 |     color: grey;
36 |     font-style: italic;
37 |     cursor: wait;
38 | }
39 | 
40 | .tags.loading > div {
41 |     background-color: grey;
42 |     color: white;
43 | }
44 | 
45 | .editable-pill {
46 |     background-color: black;
47 |     color: white;
48 |     border-radius: 5px;
49 |     padding: 0 5px 0 5px;
50 |     cursor: pointer;
51 | }
52 | 
53 | .fifty {
54 |     width: 50%;
55 |     display: inline-block;
56 |     vertical-align: top;
57 | }
58 | 
59 | .menu {
60 |     border-bottom: 1px black solid;
61 | }
62 | 
63 | .tags, .tags div {
64 |     display: inline-block;
65 | }
66 | 
67 | .tags > div {
68 |     padding-left: 5px;
69 |     margin: 0 3px 0 0;
70 |     border-radius: 5px;
71 |     background-color: black;
72 |     color: white;
73 | }
74 | 
75 | .tags > div > div {
76 |     padding: 0 3px 0 0;
77 | }
78 | 
79 | .tags input {
80 |     background-color: transparent;
81 | }
82 | 
83 | .remove {
84 |     padding-right: 2px;
85 |     margin-left: 8px;
86 |     cursor: pointer;
87 | }
88 |

--------------------------------------------------------------------------------
/src/RIESelect.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import PropTypes from 'prop-types';
 4 | import RIEStatefulBase from './RIEStatefulBase';
 5 | 
 6 | export default class RIESelect extends RIEStatefulBase {
 7 |     static propTypes = {
 8 |         options: PropTypes.array.isRequired
 9 |     };
10 | 
11 |     finishEditing = () => {
12 |         // get the object from options that matches user selected value
13 |         const newValue = this.props.options.find(function(option) {
14 |             return option.id === ReactDOM.findDOMNode(this.refs.input).value;
15 |         }, this);
16 |         this.doValidations(newValue);
17 |         if(!this.state.invalid && this.props.value !== newValue) {
18 |             this.commit(newValue);
19 |         }
20 |         this.cancelEditing();
21 |     };
22 | 
23 |     renderEditingComponent = () => {
24 |         const optionNodes = this.props.options.map(function(option) {
25 |             return <option value={option.id} key={option.id}>{option.text}</option>
26 |         });
27 | 
28 |         return <select disabled={(this.props.shouldBlockWhileLoading && this.state.loading)}
29 |                        value={this.props.value.id}
30 |                        className={this.makeClassString()}
31 |                        onChange={this.finishEditing}
32 |                        onBlur={this.cancelEditing}
33 |                        ref="input"
34 |                        onKeyDown={this.keyDown}
35 |                        {...this.props.editProps}>{optionNodes}</select>
36 |     };
37 | 
38 |     renderNormalComponent = () => {
39 |         return <span
40 |             tabIndex="0"
41 |             className={this.makeClassString()}
42 |             onFocus={this.startEditing}
43 |             onClick={this.startEditing}
44 |             {...this.props.defaultProps}>{(!!this.state.newValue) ? this.state.newValue.text : this.props.value.text}</span>;
45 |     };
46 | }
47 |

--------------------------------------------------------------------------------
/src/RIENumber.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | import RIEStatefulBase from './RIEStatefulBase';
 4 | 
 5 | const debug = require('debug')('RIENumber');
 6 | 
 7 | export default class RIENumber extends RIEStatefulBase {
 8 | 
 9 |     constructor(props) {
10 |         super(props);
11 |     }
12 | 
13 |     static propTypes = {
14 |         format: PropTypes.func
15 |     };
16 | 
17 |     validate = (value) => {
18 |         debug(`validate(${value})`)
19 |         return !isNaN(value) && isFinite(value) && value.length > 0;
20 |     };
21 | 
22 |     selectInputText = (element) => {
23 |         debug(`selectInputText(${element})`)
24 |         // element.setSelectionRange won't work for an input of type "number"
25 |         setTimeout(function() { element.select(); }, 10);
26 |     }
27 | 
28 |     elementBlur = (element) => {
29 |         debug(`elementBlur(${element})`)
30 | /*  
31 |             Firefox workaround
32 |             Found at https://tirdadc.github.io/blog/2015/06/11/react-dot-js-firefox-issue-with-onblur/
33 | */
34 |         if (element.nativeEvent.explicitOriginalTarget &&
35 |             element.nativeEvent.explicitOriginalTarget == element.nativeEvent.originalTarget) {
36 |             return;
37 |         }
38 |         this.finishEditing();
39 |     }
40 | 
41 |     renderNormalComponent = () => {
42 |         debug(`renderNormalComponent()`)
43 |         return <span
44 |             tabIndex="0"
45 |             className={this.makeClassString()}
46 |             onFocus={this.startEditing}
47 |             onClick={this.elementClick}
48 |             {...this.props.defaultProps}>{this.props.format ? this.props.format(this.state.newValue || this.props.value) : (this.state.newValue || this.props.value)}</span>;
49 |     };
50 | 
51 |     renderEditingComponent = () => {
52 |         debug(`renderEditingComponent()`)
53 |         return <input disabled={(this.props.shouldBlockWhileLoading && this.state.loading)}
54 |                       type="number"
55 |                       className={this.makeClassString()}
56 |                       defaultValue={this.props.value}
57 |                       onInput={this.textChanged}
58 |                       onBlur={this.elementBlur}
59 |                       ref="input"
60 |                       onKeyDown={this.keyDown}
61 |                       {...this.props.editProps} />;
62 |     };
63 | }
64 |

--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | 1.1.0 / 2017-06-03
 2 | =================
 3 | - Fixed issue [#41](https://github.com/kaivi/riek/issues/41)
 4 |   * Always validate to true if no validator passed
 5 | 
 6 | 1.0.9 / 2017-06-01
 7 | =================
 8 | 
 9 | - Fixed issue [#28](https://github.com/kaivi/riek/issues/28) with RIENumber not working on Firefox
10 | 
11 | 1.0.8 / 2017-06-01
12 | ==================
13 | 
14 | - Bumped React dependency up to v15.5.4
15 | - Now using `prop-types` library as a dependency
16 | - Rework PR [#27](https://github.com/kaivi/riek/pull/27), add hooks `beforeStart, afterStart, beforeFinish, onFinish`
17 | - Use React v15.5.0 in demo
18 | - Use Highlight.js v9.4.0 in demo
19 | 
20 | * Merged PR [18](https://github.com/kaivi/riek/pull/16) manually
21 |   - Not sure what that means, rephrased 1 assertion on [line 9](https://github.com/kaivi/riek/blob/master/src/RIEBase.js#L10) in RIEBase.js
22 | * Merged PR [24](https://github.com/kaivi/riek/pull/24)
23 |   - Fix [Issue #23](https://github.com/kaivi/riek/issues/23) [isDisabled]: enables the isDisabled prop
24 | * Merged PR [#27](https://github.com/kaivi/riek/pull/27)
25 |   - Added onFinish and onStart hooks
26 | * Merged PR [#32](https://github.com/kaivi/riek/pull/32)
27 |   - Remove console.log from demo.js
28 | * Merged PR [#35](https://github.com/kaivi/riek/pull/35)
29 |   - Fix titles in readme
30 | * Merged PR [#36](https://github.com/kaivi/riek/pull/36)
31 |   - Use separate `prop-types` library
32 | * Merged part of [springuper/riek](https://github.com/springuper/riek/commit/741c75d808f25d3ef5ecf1483162e24abb6bd677)
33 |   - Add `shouldRemainWhileInvalid` prop
34 | 
35 | 1.0.6 / 2016-11-01
36 | ==================
37 | 
38 | * Merged PR [16](https://github.com/kaivi/riek/pull/16)
39 |   - Added editProps property to define additional props in edit mode
40 | 
41 | 1.0.5 / 2016-09-26
42 | ==================
43 | 
44 | * Medged PR [10](https://github.com/kaivi/riek/pull/10)
45 |   - Add RIESelect component
46 | 
47 | 1.0.4 / 2016-09-11
48 | ==================
49 | 
50 | * Merged PR [#11](https://github.com/kaivi/riek/pull/9)
51 |   - Fixed text selection code in the case of `number` type
52 | * Merged PR [#12](https://github.com/kaivi/riek/pull/12)
53 |   - remove duplicate export
54 | 
55 | 1.0.3 / 2016-08-23
56 | ==================
57 | 
58 | * Merged PR [#9](https://github.com/kaivi/riek/pull/9)
59 |   - add `RIETextArea`
60 | * Merged PR [#8](https://github.com/kaivi/riek/pull/8)
61 |   - Make input `type = "number"` for `RIENumber`
62 | 
63 | 1.0.2 / 2016-05-19
64 | ==================
65 | 
66 | * Merged PR [#5](https://github.com/kaivi/riek/pull/5)
67 |   - Removed `console.log` calls
68 | 
69 | 1.0.1 / 2016-05-19
70 | ==================
71 | 
72 | * Merged PR [#7](https://github.com/kaivi/riek/pull/7)
73 |   - Added compatibility with react 15.0
74 | 
75 | 1.0.0
76 | ==================
77 | 
78 | * Initial release
79 |

--------------------------------------------------------------------------------
/src/RIEBase.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropTypes from 'prop-types';
 3 | 
 4 | const debug = require('debug')('RIEBase');
 5 | 
 6 | export default class RIEBase extends React.Component {
 7 |     constructor(props){
 8 |         super(props);
 9 | 
10 |         if (!this.props.propName) throw "RTFM: missing 'propName' prop";
11 |         if (!this.props.change) throw "RTFM: missing 'change' prop";
12 |         if (typeof this.props.value == 'undefined') throw "RTFM: missing 'value' prop";
13 | 
14 |         this.state = {
15 |             editing: false,
16 |             loading: false,
17 |             disabled: false,
18 |             invalid: false
19 |         };
20 |     }
21 | 
22 |     static propTypes = {
23 |         value: PropTypes.any.isRequired,
24 |         change: PropTypes.func.isRequired,
25 |         propName: PropTypes.string.isRequired,
26 |         editProps: PropTypes.object,
27 |         defaultProps: PropTypes.object,
28 |         isDisabled: PropTypes.bool,
29 |         validate: PropTypes.func,
30 |         handleValidationFail: PropTypes.func,
31 |         shouldBlockWhileLoading: PropTypes.bool,
32 |         shouldRemainWhileInvalid: PropTypes.bool,
33 |         classLoading: PropTypes.string,
34 |         classEditing: PropTypes.string,
35 |         classDisabled: PropTypes.string,
36 |         classInvalid: PropTypes.string,
37 |         className: PropTypes.string,
38 |         beforeStart: PropTypes.func,
39 |         afterStart: PropTypes.func,
40 |         beforeFinish: PropTypes.func,
41 |         afterFinish: PropTypes.func,
42 |     };
43 | 
44 |     doValidations = (value) => {
45 |         debug(`doValidations(${value})`)
46 |         let isValid;
47 |         if(this.props.validate) {
48 |             isValid = this.props.validate(value);
49 |         } else if (this.validate) {
50 |             isValid = this.validate(value);
51 |         } else return true
52 |         this.setState({invalid: !isValid});
53 |         return isValid;
54 |     };
55 | 
56 |     selectInputText = (element) => {
57 |         debug(`selectInputText(${element.value})`)
58 |         if (element.setSelectionRange) element.setSelectionRange(0, element.value.length);
59 |     };
60 | 
61 |     elementClick = (event) => {
62 |         throw "RIEBase must be subclassed first: use a concrete class like RIEInput, RIEToggle et.c";
63 |     };
64 | 
65 |     componentWillReceiveProps = (nextProps) => {
66 |         debug(`componentWillReceiveProps(${nextProps})`)
67 |         if ('value' in nextProps && !(nextProps.shouldRemainWhileInvalid && this.state.invalid)) {
68 |             this.setState({loading: false, editing: false, invalid: false, newValue: null});
69 |         }
70 |     };
71 | 
72 |     commit = (value) => {
73 |         debug(`commit(${value})`)
74 |         if(!this.state.invalid) {
75 |             let newProp = {};
76 |             newProp[this.props.propName] = value;
77 |             this.setState({loading: true, newValue: value});
78 |             this.props.change(newProp);
79 |         }
80 |     };
81 | 
82 |     makeClassString = () => {
83 |         debug(`makeClassString()`)
84 |         var classNames = [];
85 |         if (this.props.className) classNames.push(this.props.className);
86 |         if (this.state.editing && this.props.classEditing) classNames.push(this.props.classEditing);
87 |         if (this.state.loading && this.props.classLoading) classNames.push(this.props.classLoading);
88 |         if (this.state.disabled && this.props.classDisabled) classNames.push(this.props.classDisabled);
89 |         if (this.state.invalid && this.props.classInvalid) classNames.push(this.props.classInvalid);
90 |         return classNames.join(' ');
91 |     };
92 | 
93 |     render = () => {
94 |         debuf(`render()`)
95 |         return <span {...this.props.defaultProps} tabindex="0" className={this.makeClassString()} onClick={this.elementClick}>{this.props.value}</span>;
96 |     };
97 | }
98 |

--------------------------------------------------------------------------------
/src/RIEStatefulBase.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import RIEBase from './RIEBase';
  4 | 
  5 | const debug = require('debug')('RIEStatefulBase');
  6 | 
  7 | export default class RIEStatefulBase extends RIEBase {
  8 |     constructor(props){
  9 |         super(props);
 10 |     }
 11 | 
 12 |     startEditing = () => {
 13 |         debug('startEditing')
 14 |         this.props.beforeStart ? this.props.beforeStart() : null;
 15 |         if(this.props.isDisabled) return;
 16 |         this.setState({editing: true});
 17 |         this.props.afterStart ? this.props.afterStart() : null;
 18 |     };
 19 | 
 20 |     finishEditing = () => {
 21 |         debug('finishEditing')
 22 |         this.props.beforeFinish ? this.props.beforeFinish() : null;
 23 |         let newValue = ReactDOM.findDOMNode(this.refs.input).value;
 24 |         const result = this.doValidations(newValue);
 25 |         if(result && this.props.value !== newValue) {
 26 |             this.commit(newValue);
 27 |         }
 28 |         if(!result && this.props.handleValidationFail) {
 29 |             this.props.handleValidationFail(result, newValue, () => this.cancelEditing());
 30 |         } else {
 31 |             this.cancelEditing();
 32 |         }
 33 |         this.props.afterFinish ? this.props.afterFinish() : null;
 34 |     };
 35 | 
 36 |     cancelEditing = () => {
 37 |         debug('cancelEditing')
 38 |         this.setState({editing: false, invalid: false});
 39 |     };
 40 | 
 41 |     keyDown = (event) => {
 42 |         debug('keyDown(${event.keyCode})')
 43 |         if(event.keyCode === 13) { this.finishEditing() }           // Enter
 44 |         else if (event.keyCode === 27) { this.cancelEditing() }     // Escape
 45 |     };
 46 | 
 47 |     textChanged = (event) => {
 48 |         debug('textChanged(${event.target.value})')
 49 |         this.doValidations(event.target.value.trim());
 50 |     };
 51 | 
 52 |     componentDidUpdate = (prevProps, prevState) => {
 53 |         debug(`componentDidUpdate(${prevProps}, ${prevState})`)
 54 |         var inputElem = ReactDOM.findDOMNode(this.refs.input);
 55 |         debug(inputElem)
 56 |         if (this.state.editing && !prevState.editing) {
 57 |             debug('entering edit mode')
 58 |             inputElem.focus();
 59 |             this.selectInputText(inputElem);
 60 |         } else if (this.state.editing && prevProps.text != this.props.text) {
 61 |             debug('not editing && text not equal previous props -- finishing editing')
 62 |             this.finishEditing();
 63 |         }
 64 |     };
 65 | 
 66 |     renderEditingComponent = () => {
 67 |         debug('renderEditingComponent()')
 68 |         return <input
 69 |             disabled={this.state.loading}
 70 |             className={this.makeClassString()}
 71 |             defaultValue={this.props.value}
 72 |             onInput={this.textChanged}
 73 |             onBlur={this.elementBlur}
 74 |             ref="input"
 75 |             onKeyDown={this.keyDown}
 76 |             {...this.props.editProps} />;
 77 |     };
 78 | 
 79 |     renderNormalComponent = () => {
 80 |         debug('renderNormalComponent')
 81 |         return <span
 82 |             tabIndex="0"
 83 |             className={this.makeClassString()}
 84 |             onFocus={this.startEditing}
 85 |             onClick={this.startEditing}
 86 |             {...this.props.defaultProps}>{this.state.newValue || this.props.value}</span>;
 87 |     };
 88 | 
 89 |     elementBlur = (event) => {
 90 |         debug(`elementBlur(${event})`)
 91 |         this.finishEditing();
 92 |     };
 93 | 
 94 |     elementClick = (event) => {
 95 |         debug(`elementClick(${event})`)
 96 |         this.startEditing();
 97 |         event.target.element.focus();
 98 |     };
 99 | 
100 |     render = () => {
101 |         debug('render()')
102 |         if(this.state.editing) {
103 |             return this.renderEditingComponent();
104 |         } else {
105 |             return this.renderNormalComponent();
106 |         }
107 |     };
108 | }
109 |

--------------------------------------------------------------------------------
/src/RIETags.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import PropTypes from 'prop-types';
  4 | import RIEStatefulBase from './RIEStatefulBase';
  5 | 
  6 | class RIETag extends React.Component {
  7 |     constructor(props) {
  8 |         super(props);
  9 |     }
 10 | 
 11 |     static propTypes = {
 12 |         text: PropTypes.string.isRequired,
 13 |         removeHandler: PropTypes.func,
 14 |         className: PropTypes.string
 15 |     };
 16 | 
 17 |     remove = () => {
 18 |         this.props.removeHandler(this.props.text);
 19 |     };
 20 | 
 21 |     render = () => {
 22 |         return  <div key={this.props.text}>{this.props.text}<div onClick={this.remove} className={this.props.className || "remove"}> × </div></div>;
 23 |     };
 24 | }
 25 | 
 26 | export default class RIETags extends RIEStatefulBase {
 27 | 
 28 |     constructor(props) {
 29 |         super(props);
 30 |         this.state.currentText = "";
 31 |         this.state.blurTimer = null;
 32 |     }
 33 | 
 34 |     static propTyes = {
 35 |         value: PropTypes.object.isRequired,
 36 |         maxTags: PropTypes.number,
 37 |         minTags: PropTypes.number,
 38 |         separator: PropTypes.string,
 39 |         elementClass: PropTypes.string,
 40 |         blurDelay: PropTypes.number,
 41 |         placeholder: PropTypes.string
 42 |     };
 43 | 
 44 |     addTag = (tag) => {
 45 |         if([...this.props.value].length < (this.props.maxTags || 65535)) {
 46 |             this.commit(this.props.value.add(tag));
 47 |         }
 48 |     };
 49 | 
 50 |     removeTag = (tag) => {
 51 | 
 52 |         clearTimeout(this.state.blurTimer);
 53 | 
 54 |         if ([...this.props.value].length >= (this.props.minTags || 1)) {
 55 |             let newSet = this.props.value;
 56 |             newSet.delete(tag);
 57 |             this.commit(newSet);
 58 |         }
 59 |     };
 60 | 
 61 |     componentWillReceiveProps = (nextProps) => {
 62 |         if ('value' in nextProps) this.setState({loading: false, invalid: false});
 63 |     };
 64 | 
 65 |     keyDown = (event) => {
 66 |         if (event.keyCode === 8) { // Backspace
 67 |             if(event.target.value.length == 0){
 68 |                 let tagToRemove = [...this.props.value].pop();
 69 |                 this.removeTag(tagToRemove);
 70 |             }
 71 | 
 72 |         } else if (event.keyCode === 13) { // Enter
 73 |             event.preventDefault();
 74 |             if(event.target.value.length === 0) {
 75 |                 this.cancelEditing();
 76 |             } else {
 77 |                 this.addTag(event.target.value);
 78 |                 event.target.value = "";
 79 |             }
 80 |         } else if (event.keyCode === 27) { // Escape
 81 |             this.cancelEditing();
 82 |         }
 83 |     };
 84 | 
 85 |     cancelEditingDelayed = () => {
 86 |         this.setState({blurTimer: setTimeout(this.cancelEditing, (this.props.blurDelay || 180))})
 87 |     };
 88 | 
 89 |     cancelEditing = () => {
 90 |         this.setState({editing: false, invalid: false});
 91 |     };
 92 | 
 93 |     componentDidUpdate = (prevProps, prevState) => {
 94 |         var inputElem = ReactDOM.findDOMNode(this.refs.input);
 95 |         if (this.state.editing) {
 96 |             inputElem.focus();
 97 |         }
 98 |     };
 99 | 
100 |     renderNormalComponent = () => {
101 |         let tags = [...this.props.value].join(this.props.separator || ", ");
102 |         return <span
103 |             tabIndex="0"
104 |             className={this.makeClassString()}
105 |             onFocus={this.startEditing}
106 |             {...this.props.defaultProps}>{tags}</span>;
107 |     };
108 | 
109 |     makeTagElement = (text) => {
110 |         return <RIETag key={text} text={text} removeHandler={this.removeTag} />;
111 |     };
112 | 
113 |     renderEditingComponent = () => {
114 |         let elements = [...this.props.value].map(this.makeTagElement);
115 |         return <div tabIndex="1" onClick={this.startEditing} className={this.makeClassString()} {...this.props.editProps}>
116 |             {elements}
117 |             <input
118 |                 onBlur={this.cancelEditingDelayed}
119 |                 onKeyDown={this.keyDown}
120 |                 placeholder={(this.props.placeholder || "New tag")}
121 |                 ref="input" />
122 |         </div>;
123 |     };
124 | }
125 |

--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Inline Edit Kit
  2 | An assortment of common HTML form elements, editable in-line the React way.
  3 | 
  4 | Try out [the demo](http://kaivi.github.io/riek/) and see what it looks like.
  5 | 
  6 | # Installation
  7 | `npm install riek --save-dev`
  8 | 
  9 | *or*
 10 | 
 11 | `yarn add riek --dev`
 12 | 
 13 | *Use `--save-dev` because you don't want to build and pack JS/CSS in production*
 14 | 
 15 | # Usage
 16 | Import the library:
 17 | 
 18 | ```javascript
 19 | import { RIEToggle, RIEInput, RIETextArea, RIENumber, RIETags, RIESelect } from 'riek'
 20 | import _ from 'lodash'
 21 | ```
 22 | 
 23 | 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:
 24 | 
 25 | ```javascript
 26 | this.state = {
 27 |   id: 1,
 28 |   title: 'Cover with tests',
 29 |   completed: false
 30 | }
 31 | ```
 32 | 
 33 | 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:
 34 | 
 35 | ```javascript
 36 | const httpTaskCallback = (task) => {
 37 |   request.post(`/api/task/${this.state.id}`)
 38 |     .send(task)
 39 |     .end((err, res) => {
 40 |       if (!err) return this.setState({ ...task })
 41 |       // Handle HTTP error
 42 |     })
 43 | }
 44 | ```
 45 | 
 46 | Meanwhile, there is a simple Express handler on our API server:
 47 | 
 48 | ```javascript
 49 | app.use('/api/task/:id', async (req, res) => {
 50 |   // req.body will equal to { title: 'A new title' }
 51 |   const { id } = req.params
 52 |   await Task.update({ ...req.body }).where({ id })
 53 |   res.send('OK')
 54 | })
 55 | ```
 56 | 
 57 | Finally, in our `render` method, we add a minimal `RIEInput`:
 58 | 
 59 | ```javascript
 60 | <RIEInput
 61 |   value={this.state.text}
 62 |   change={this.httpTaskCallback}
 63 |   propName='title'
 64 |   validate={_.isString} />
 65 | ```
 66 | 
 67 | ...repeat the last step, adding a Riek component for any object property we wish to edit.
 68 | 
 69 | Components come unstyled, so take a look at [demo.jsx](https://github.com/kaivi/riek/blob/master/demo/demo.jsx) for examples.
 70 | 
 71 | ## Common props
 72 | 
 73 | ### Required
 74 | * **value**: initial prop value
 75 | * **propName**: name of the prop to return to the _change_ function
 76 | * **change**: function which will receive a plain object with a single key, provided in _propName_
 77 | 
 78 | ### Optional
 79 | * **validate**: validator function, returning a boolean
 80 | * **shouldBlockWhileLoading**: disables editing until a new value is confirmed by parent
 81 | * **shouldRemainWhileInvalid**: remain in editing mode if validation fails
 82 | * **defaultProps**: Additional props for idle component.
 83 | 
 84 | #### Customization
 85 | * **classLoading**: CSS class name to use when loading
 86 | * **classEditing**: CSS class name to apply while in editing mode
 87 | * **classInvalid**: CSS class name to apply when _validate_ returned false
 88 | * **className**: CSS base class
 89 | * **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`.
 90 | 
 91 | #### Hooks
 92 | * **beforeStart**: Fires before editing starts
 93 | * **afterStart**: Fires after editing starts
 94 | * **beforeFinish**: Fires before editing ends, before validations
 95 | * **afterFinish**: Fires after editing ends, after validations
 96 | 
 97 | ### Component-specific props
 98 | 
 99 | #### RIENumber
100 | * **format**: custom formatting function, returns formatted string
101 | 
102 | #### RIETextArea
103 | * **rows**: rows property on textarea tag while editing
104 | * **cols**: rows property on textarea tag while editing
105 | 
106 | #### RIESelect
107 | * **options**: an array of objects containing values and text for [select options](http://www.w3schools.com/tags/tag_option.asp)
108 | ```javascript
109 | <RIESelect ... options={[
110 |   {id: '1', text: 'one'},
111 |   {id: '2', text: 'two'},
112 |   {id: '3', text: 'three'}
113 | ]} />
114 | ```
115 | 
116 | # Contributing
117 | 
118 | The build process does not work with Node v6 at the moment: use [Node Version Manager](https://github.com/creationix/nvm), or just plain Node v5.6.0.
119 | 
120 | 1. Clone this repo locally, run `npm i`
121 | 2. Make your changes
122 | 3. Do `npm run build` to compile the lib and demo
123 | 4. Open `index.html` and check if it works
124 | 5. Open JS console in browser, set `localStorage.debug = '*'` to see debug messages, add more if necessary
125 | 6. ???
126 | 7. Submit a pull request

--------------------------------------------------------------------------------
/demo/demo.jsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import Highlight from 'react-highlight';
  4 | import {RIEInput, RIEToggle, RIETextArea, RIENumber, RIETags, RIESelect} from '../src/index.js';
  5 | 
  6 | class Demo extends React.Component {
  7 |   constructor(props){
  8 |     super(props);
  9 |     this.state = {
 10 |       select : {id: "1", text: "broccoli"},
 11 |       selectOptions : [
 12 |         {id: "1", text: "broccoli"},
 13 |         {id: "2", text: "arugula"},
 14 |         {id: "3", text: "leek"},
 15 |         {id: "4", text: "radish"},
 16 |         {id: "5", text: "watercress"},
 17 |         {id: "6", text: "dandelion"}
 18 |       ],
 19 |       boolean : true,
 20 |       number : 9000,
 21 |       text : "Example text value",
 22 |       textarea : `Multiline example
 23 |   text value`,
 24 |       date : Date.now(),
 25 |       tags: new Set(["Bergen", "Asmara", "Göteborg", "Newcastle", "Seattle"]),
 26 |       simulateXHR: false,
 27 |       XHRDelay: 450,
 28 |       highlight: false,
 29 |       showSource: false,
 30 |       isDisabled: false,
 31 |     };
 32 |   }
 33 | 
 34 |   virtualServerCallback = (newState) => {
 35 |     if (this.state.simulateXHR) {
 36 |     window.setTimeout(function() {
 37 |       this.changeState(newState);
 38 |     }.bind(this), this.state.XHRDelay);
 39 |     } else {
 40 |     this.changeState(newState);
 41 |     }
 42 |   };
 43 | 
 44 |   changeState = (newState) => {
 45 |     this.setState(newState);
 46 |   };
 47 | 
 48 |   isStringAcceptable = (string) => {
 49 |     return (string.length >= 1);  // Minimum 4 letters long
 50 |   };
 51 | 
 52 |   isStringEvenNumber = (string) => {
 53 |     var number = parseInt(string);
 54 |     if (isNaN(number) || !isFinite(number)) return false;
 55 |     return number % 2 == 0;
 56 |   };
 57 | 
 58 |   isValidXHRDelay = (text) => {
 59 |     let number = parseInt(text);
 60 |     if (isNaN(number)) return false;
 61 |     return (0 < number) && (number < 50000);
 62 |   };
 63 | 
 64 |   formatInteger = (number) => {
 65 |     return number.toString() + " feet";
 66 |   };
 67 | 
 68 |   formatMillisecondsAppend = (text) => {
 69 |     return text + " ms";
 70 |   };
 71 | 
 72 |   render = () => {
 73 |     let xhrDelaySwitch = (this.state.simulateXHR) ? <li>XHR delay: <RIENumber value={this.state.XHRDelay} change={this.changeState} validate={this.isValidXHRDelay} propName="XHRDelay" className="editable-pill" format={this.formatMillisecondsAppend} /></li> : null;
 74 |     return <div>
 75 |     <div className="menu">
 76 |       <div className="fifty">
 77 |         <h3>Application State</h3>
 78 |         <ul>
 79 |           <li><i>boolean:</i> {this.state.boolean.toString()}</li>
 80 |           <li><i>text:</i> {this.state.text}</li>
 81 |           <li><i>textarea:</i> {this.state.textarea.replace(new RegExp("\n", "g"), "\\n")}</li>
 82 |           <li><i>number:</i> {this.state.number}</li>
 83 |           <li><i>tags:</i> {[...this.state.tags].join(', ')}</li>
 84 |           <li><i>select:</i> {JSON.stringify(this.state.select)}</li>
 85 |         </ul>
 86 |       </div>
 87 |       <div className="fifty">
 88 |         <h3>Options</h3>
 89 |         <ul>
 90 |         <li>Simulate XHR: <RIEToggle value={this.state.simulateXHR} change={this.changeState} propName="simulateXHR" textTrue="yes" textFalse="don't" className="editable-pill"/></li>
 91 |         {xhrDelaySwitch}
 92 |         <li>Highlight editable: <RIEToggle value={this.state.highlight} change={this.changeState} propName="highlight" textTrue="highlight" textFalse="don't" className="editable-pill" /></li>
 93 |         <li><RIEToggle value={this.state.showSource} change={this.changeState} propName="showSource" textTrue="Source shown" textFalse="Source hidden" className="editable-pill"/></li>
 94 |         <li><RIEToggle value={this.state.isDisabled} change={this.changeState} propName="isDisabled" textTrue="fields disabled" textFalse="fields not disabled" className="editable-pill" /></li>
 95 |         </ul>
 96 |       </div>
 97 |     </div>
 98 |     <div className="content">
 99 |       <h3>Toggle</h3>
100 |       <div>
101 |         <span>Default: </span>
102 |         <RIEToggle
103 |           value={this.state.boolean}
104 |           className={this.state.highlight ? "editable" : ""}
105 |           change={this.virtualServerCallback}
106 |           classLoading="loading"
107 |           propName="boolean"
108 |           isDisabled={this.state.isDisabled} />
109 |         {this.state.showSource ? <Highlight className="jsx">
110 |         {`<RIEToggle
111 | value={this.state.boolean}
112 | className={this.state.highlight ? "editable" : ""}
113 | change={this.virtualServerCallback}
114 | classLoading="loading"
115 | propName="boolean"
116 | isDisabled={this.state.isDisabled} />`}
117 |         </Highlight> : null}
118 |         <br />
119 |         <span>Custom labels: </span>
120 |         <RIEToggle
121 |           value={this.state.boolean}
122 |           className={this.state.highlight ? "editable" : ""}
123 |           change={this.virtualServerCallback}
124 |           textTrue="activated"
125 |           textFalse="deactivated"
126 |           classLoading="loading"
127 |           propName="boolean"
128 |           isDisabled={this.state.isDisabled} />
129 |         {this.state.showSource ? <Highlight className="jsx">
130 |         {`<RIEToggle
131 | value={this.state.boolean}
132 | className={this.state.highlight ? "editable" : ""}
133 | change={this.virtualServerCallback}
134 | textTrue="activated"
135 | textFalse="deactivated"
136 | classLoading="loading"
137 | propName="boolean"
138 | isDisabled={this.state.isDisabled} />`}
139 |         </Highlight> : null}
140 |       </div>
141 |       <hr />
142 |       <h3>Input</h3>
143 |       <div>
144 |         <span>Default: </span>
145 |         <RIEInput
146 |           value={this.state.text}
147 |           change={this.virtualServerCallback}
148 |           propName="text"
149 |           className={this.state.highlight ? "editable" : ""}
150 |           classLoading="loading"
151 |           classInvalid="invalid"
152 |           isDisabled={this.state.isDisabled} />
153 |         {this.state.showSource ? <Highlight className="jsx">
154 |         {`<RIEInput
155 |   value={this.state.text}
156 |   change={this.virtualServerCallback}
157 |   propName="text"
158 |   className={this.state.highlight ? "editable" : ""}
159 |   validate={this.isStringAcceptable}
160 |   classLoading="loading"
161 |   classInvalid="invalid"
162 |   isDisabled={this.state.isDisabled} />`}
163 |         </Highlight> : null}
164 |       </div>
165 |       <hr />
166 |       <h3>Textarea</h3>
167 |       <div>
168 |         <p>Default: </p>
169 |         <RIETextArea
170 |           value={this.state.textarea}
171 |           change={this.virtualServerCallback}
172 |           propName="textarea"
173 |           className={this.state.highlight ? "editable" : ""}
174 |           validate={this.isStringAcceptable}
175 |           classLoading="loading"
176 |           classInvalid="invalid"
177 |           isDisabled={this.state.isDisabled} />
178 |         {this.state.showSource ? <Highlight className="jsx">
179 |         {`<RIETextArea
180 |   value={this.state.textarea}
181 |   change={this.virtualServerCallback}
182 |   propName="textarea"
183 |   className={this.state.highlight ? "editable" : ""}
184 |   validate={this.isStringAcceptable}
185 |   classLoading="loading"
186 |   classInvalid="invalid"
187 |   isDisabled={this.state.isDisabled} />`}
188 |         </Highlight> : null}
189 |       </div>
190 |       <hr />
191 |       <h3>Number</h3>
192 |       <div>
193 |         <span>Default: </span>
194 |         <RIENumber
195 |           value={this.state.number}
196 |           change={this.virtualServerCallback}
197 |           propName="number"
198 |           className={this.state.highlight ? "editable" : ""}
199 |           classLoading="loading"
200 |           classInvalid="invalid"
201 |           isDisabled={this.state.isDisabled} />
202 |         {this.state.showSource ? <Highlight className="jsx">
203 |         {`<RIENumber
204 |   value={this.state.number}
205 |   change={this.virtualServerCallback}
206 |   propName="number"
207 |   className={this.state.highlight ? "editable" : ""}
208 |   classLoading="loading"
209 |   classInvalid="invalid"
210 |   isDisabled={this.state.isDisabled} />`}
211 |         </Highlight> : null}
212 |         <br />
213 |         <span>Only even, custom formatter: </span>
214 |         <RIENumber
215 |           value={this.state.number}
216 |           change={this.virtualServerCallback}
217 |           propName="number"
218 |           format={this.formatInteger}
219 |           classLoading="loading"
220 |           className={this.state.highlight ? "editable" : ""}
221 |           validate={this.isStringEvenNumber}
222 |           classInvalid="invalid"
223 |           isDisabled={this.state.isDisabled} />
224 |         {this.state.showSource ? <Highlight className="jsx">
225 |         {`<RIENumber
226 |   value={this.state.number}
227 |   change={this.virtualServerCallback}
228 |   propName="number"
229 |   format={this.formatInteger}
230 |   classLoading="loading"
231 |   className={this.state.highlight ? "editable" : ""}
232 |   validate={this.isStringEvenNumber}
233 |   classInvalid="invalid"
234 |   isDisabled={this.state.isDisabled} />`}
235 |         </Highlight> : null}
236 |       </div>
237 |       <hr />
238 |       <h3>Tags</h3>
239 |       <div>
240 |         <span>Default: </span>
241 |         <RIETags
242 |           value={this.state.tags}
243 |           change={this.virtualServerCallback}
244 |           maxTags={10}
245 |           minTags={2}
246 |           propName="tags"
247 |           placeholder="New"
248 |           className={this.state.highlight ? "tags editable" : "tags"}
249 |           classLoading="loading"
250 |           isDisabled={this.state.isDisabled} />
251 |         {this.state.showSource ? <Highlight className="jsx">
252 |         {`<RIETags
253 |   value={this.state.tags}
254 |   change={this.virtualServerCallback}
255 |   maxTags={10}
256 |   minTags={2}
257 |   propName="tags"
258 |   placeholder="New"
259 |   className={this.state.highlight ? "tags editable" : "tags"}
260 |   classLoading="loading"
261 |   isDisabled={this.state.isDisabled} />`}
262 |         </Highlight> : null}
263 |       </div>
264 |       <hr />
265 |       <h3>Select</h3>
266 |       <div>
267 |         <span>Default: </span>
268 |         <RIESelect
269 |           value={this.state.select}
270 |           className={this.state.highlight ? "editable" : ""}
271 |           options={this.state.selectOptions}
272 |           change={this.virtualServerCallback}
273 |           classLoading="loading"
274 |           propName="select"
275 |           isDisabled={this.state.isDisabled} />
276 |         {this.state.showSource ? <Highlight className="jsx">
277 |         {`<RIESelect
278 |   value={this.state.select}
279 |   className={this.state.highlight ? "editable" : ""}
280 |   options={this.state.selectOptions}
281 |   change={this.virtualServerCallback}
282 |   classLoading="loading"
283 |   propName="select"
284 |   isDisabled={this.state.isDisabled} />`}
285 |         </Highlight> : null}
286 |       </div>
287 |     </div>
288 |     </div>;
289 |   };
290 | }
291 | 
292 | ReactDOM.render(<Demo />, document.getElementById('app'));
293 |

--------------------------------------------------------------------------------