├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── docs
    ├── 0.bundle.js
    ├── bundle.js
    └── index.html
├── example
    ├── components
    │   ├── CodeMirror.js
    │   ├── Preview.js
    │   ├── index.js
    │   ├── sample.js
    │   └── utils.js
    └── index.js
├── lib
    └── index.js
├── package.json
├── src
    └── index.js
├── webpack
    ├── build.sh
    ├── index-template.html
    ├── webpack.config.dev.js
    ├── webpack.config.docs.js
    └── webpack.config.lib.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [["es2015", {"modules": false}], "stage-0", "react"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | lib
4 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {"browser": true},
 3 |   "parser": "babel-eslint",
 4 |   "extends": "airbnb",
 5 |   "plugins": ["babel"],
 6 |   "rules": {
 7 |     "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
 8 |     "react/prefer-stateless-function": ["off"],
 9 |     "import/prefer-default-export": ["off"],
10 |     "jsx-a11y/no-static-element-interactions": ["off"],
11 |     "no-console": ["error", { allow: ["warn"] }],
12 |     "semi": ["error", "never"],
13 |     "max-len": ["error", 80]
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | docs
 4 | example
 5 | src
 6 | wepback
 7 | .babelrc
 8 | .eslintrc
 9 | .eslintignore
10 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 In Extenso Digital
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### [Live](https://inextensodigital.github.io/react-enhanced-form/)
 2 | ### [Show-room](https://inextensodigital.github.io/react-showroom/#input)
 3 | 
 4 | # react-enhanced-form
 5 | 
 6 | ## Usage
 7 | 
 8 | ```sh
 9 | yarn add react-enhanced-form
10 | ```
11 | 
12 | ```jsx
13 | import React from 'react'
14 | import Input from 'react-enhanced-form'
15 | 
16 | class Main extends React.Component {
17 | 
18 |   style = {
19 |     default: { width: 300 },
20 |     onFocus: { borderBottom: '1px solid green' },
21 |     onError: { borderBottom: '1px solid red' }
22 |   }
23 | 
24 |   check = newValue => newValue < 10
25 |   format = value => `${value} $`
26 | 
27 |   render = () => (
28 |     <form onSubmit={this.handleSubmit}>
29 |       <Input
30 |         type='number'
31 |         value='1'
32 |         onChange={(data, error) => console.log('change', data, error)}
33 |         onMount={(data,error) => console.log('mount', data, error)}
34 |         style={this.style}
35 |         check={this.check}
36 |         format={this.format}
37 |         required
38 |       />
39 |     </form>
40 |  )
41 | }
42 | ```
43 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>react-enhanced-form</title>
 4 |     <meta charset="UTF-8">
 5 |   </head>
 6 |   <body style="margin:0px;">
 7 |     <div id="root"></div>
 8 |     <script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
 9 |   <script type="text/javascript" src="/react-enhanced-form/bundle.js"></script></body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/example/components/CodeMirror.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import debounce from 'lodash/debounce'
 3 | import PropTypes from 'prop-types'
 4 | import styled from 'styled-components'
 5 | import codemirror from 'codemirror/lib/codemirror'
 6 | import 'codemirror/lib/codemirror.css'
 7 | import 'codemirror/theme/material.css'
 8 | import 'codemirror/mode/jsx/jsx'
 9 | 
10 | 
11 | const Container = styled.div`
12 |   width: 100%;
13 |   height: 100%;
14 |   .CodeMirror {
15 |     height: 100%;
16 |   }
17 | `
18 | 
19 | const normalizeLineEndings = (str) => {
20 |   if (!str) return str
21 |   return str.replace(/\r\n|\r/g, '\n')
22 | }
23 | 
24 | class CodeMirror extends React.Component {
25 |   componentWillMount = () => {
26 |     this.componentWillReceiveProps = debounce(this.componentWillReceiveProps, 0)
27 |   }
28 | 
29 |   componentDidMount = () => {
30 |     this.codeMirror = codemirror.fromTextArea(this.textarea, this.props.options)
31 |     this.codeMirror.on('change', this.codemirrorValueChanged)
32 |     this.codeMirror.setValue(this.props.defaultValue || this.props.value || '')
33 |   }
34 | 
35 |   componentWillReceiveProps = (nextProps) => {
36 |     if (this.codeMirror && nextProps.value !== undefined) {
37 |       const codeValue = normalizeLineEndings(this.codeMirror.getValue())
38 |       const propsValue = normalizeLineEndings(nextProps.value)
39 | 
40 |       if (codeValue !== propsValue) {
41 |         this.codeMirror.setValue(nextProps.value)
42 |       }
43 |     }
44 | 
45 |     const options = nextProps.options
46 |     if (options) {
47 |       Object.keys(options).forEach((optionName) => {
48 |         if (options[optionName]) {
49 |           this.codeMirror.setOption(optionName, options[optionName])
50 |         }
51 |       })
52 |     }
53 |   }
54 | 
55 |   componentWillUnmount = () => {
56 |     if (this.codeMirror) { this.codeMirror.toTextArea() }
57 |   }
58 | 
59 |   codemirrorValueChanged = (doc, change) => {
60 |     if (this.props.onChange && change.origin !== 'setValue') {
61 |       this.props.onChange(doc.getValue(), change)
62 |     }
63 |   }
64 | 
65 |   render = () => (
66 |     <Container>
67 |       <textarea
68 |         ref={(ref) => { this.textarea = ref }}
69 |         defaultValue={this.props.value}
70 |         autoComplete="off"
71 |       />
72 |     </Container>
73 |   )
74 | }
75 | 
76 | CodeMirror.defaultProps = {
77 |   defaultValue: undefined,
78 |   value: undefined,
79 |   options: {
80 |     mode: 'jsx',
81 |     lineNumbers: true,
82 |     theme: 'material',
83 |   },
84 | }
85 | 
86 | CodeMirror.propTypes = {
87 |   defaultValue: PropTypes.string,
88 |   onChange: PropTypes.func.isRequired,
89 |   options: PropTypes.shape({}),
90 |   value: PropTypes.string,
91 | }
92 | 
93 | export default CodeMirror
94 | 


--------------------------------------------------------------------------------
/example/components/Preview.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import PropTypes from 'prop-types'
 4 | import styled from 'styled-components'
 5 | import { transform } from 'babel-standalone'
 6 | 
 7 | const ERROR_TIMEOUT = 500
 8 | 
 9 | const Container = styled.div`
10 |   padding: 10px;
11 |   box-sizing: border-box;
12 | `
13 | 
14 | class Preview extends React.Component {
15 |   state = { error: null }
16 | 
17 |   componentDidMount = () => { this.executeCode() }
18 | 
19 |   componentDidUpdate = (prevProps) => {
20 |     clearTimeout(this.timeoutID)
21 |     if (this.props.code !== prevProps.code) { this.executeCode() }
22 |   }
23 | 
24 |   getScope = () => ({ React, ...this.props.scope })
25 | 
26 |   compileCode = () => {
27 |     const code = `
28 |       (function (${Object.keys(this.getScope()).join(', ')}, mountNode) {
29 |         ${this.props.code}
30 |       });`
31 | 
32 |     return transform(code, {
33 |       presets: ['es2015', 'stage-0', 'react'],
34 |     }).code
35 |   }
36 | 
37 |   buildScope = (mountNode) => {
38 |     const scope = this.getScope()
39 |     return (Object.keys(scope).map(key => scope[key]).concat(mountNode))
40 |   }
41 | 
42 |   executeCode = () => {
43 |     const mountNode = this.mount
44 |     const scope = this.buildScope(mountNode)
45 | 
46 |     try {
47 |       ReactDOM.unmountComponentAtNode(mountNode)
48 |     } catch (e) {
49 |       console.warn(e)
50 |     }
51 | 
52 |     try {
53 |       // eslint-disable-next-line no-eval
54 |       ReactDOM.render(eval(this.compileCode())(...scope), mountNode)
55 |       if (this.state.error) { this.setState({ error: null }) }
56 |     } catch (e) {
57 |       clearTimeout(this.timeoutID)
58 |       this.timeoutID = setTimeout(() => {
59 |         this.setState({ error: e.toString() })
60 |       }, ERROR_TIMEOUT)
61 |     }
62 |   }
63 | 
64 |   render = () => (
65 |     <Container>
66 |       {this.state.error !== null && <span>{this.state.error}</span>}
67 |       <div ref={(ref) => { this.mount = ref }} />
68 |     </Container>
69 |   )
70 | }
71 | 
72 | Preview.defaultProps = {
73 |   scope: undefined,
74 | }
75 | 
76 | Preview.propTypes = {
77 |   code: PropTypes.string.isRequired,
78 |   scope: PropTypes.shape({}),
79 | }
80 | 
81 | export default Preview
82 | 


--------------------------------------------------------------------------------
/example/components/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import styled from 'styled-components'
 3 | 
 4 | import CodeMirror from './CodeMirror'
 5 | import Preview from './Preview'
 6 | import sample from './sample'
 7 | import Input from '../../src'
 8 | import isEmail from './utils'
 9 | 
10 | 
11 | const Container = styled.div`
12 |   width: 100%;
13 |   height: 100%;
14 |   display: flex;
15 |   flex-direction: row;
16 | `
17 | 
18 | const SubContainer = styled.div`
19 |   height: 100%;
20 |   display: flex;
21 |   align-items: center;
22 |   justify-content: center;
23 | `
24 | 
25 | class Sample extends React.Component {
26 |   state = { code: sample }
27 | 
28 |   options = {
29 |     lineNumbers: true,
30 |     theme: 'material',
31 |     mode: 'jsx',
32 |   }
33 | 
34 |   updateCode = (code) => { this.setState({ code }) }
35 | 
36 |   render = () => (
37 |     <Container>
38 |       <SubContainer style={{ width: '60%' }}>
39 |         <CodeMirror
40 |           className="CodeMirror"
41 |           value={this.state.code}
42 |           onChange={this.updateCode}
43 |           options={this.options}
44 |         />
45 |       </SubContainer>
46 |       <SubContainer style={{ width: '40%' }}>
47 |         <Preview code={this.state.code} scope={{ Input, isEmail }} />
48 |       </SubContainer>
49 |     </Container>
50 |   )
51 | }
52 | 
53 | export default Sample
54 | 


--------------------------------------------------------------------------------
/example/components/sample.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | export default `
 3 | const PreviewInput = () => {
 4 | 
 5 |   const stylized = {
 6 |     height: 50,
 7 |     backgroundColor: '#fafafa',
 8 |     borderRadius: 3,
 9 |     paddingLeft: 10,
10 |     fontSize: 20,
11 |   }
12 | 
13 |   const style = {
14 |     default: {color: 'black', outline: 'none', width: 300, border: 'none', ...stylized},
15 |     onFocus: {borderBottom: '1px solid green', ...stylized},
16 |     onError: {borderBottom: '1px solid red', ...stylized},
17 |   }
18 | 
19 |   const lessThan1000 = newValue => newValue < 1000
20 |   const email = newValue => isEmail(newValue)
21 | 
22 |   const handleSubmit = (e) => { alert(e) }
23 | 
24 |   const Label = ({ children }) => {
25 | 
26 |     const style = {
27 |       fontFamily: 'Sans-serif',
28 |       fontWeight: 400,
29 |       paddingLeft: 5,
30 |       color: '#666',
31 |     }
32 | 
33 |     return <h3 style={style}>{children}</h3>
34 |   }
35 | 
36 |   return (
37 |     <form onSubmit={handleSubmit}>
38 |       <Label>{'Must be less than 1000'}</Label>
39 |       <Input
40 |         type='number'
41 |         value={1000}
42 |         // onChange={(data, error) => console.log('change', data, error)}
43 |         // onMount={(data,error) => console.log('mount', data, error)}
44 |         style={style}
45 |         check={lessThan1000}
46 |         required
47 |       />
48 |       <br />
49 |       <Label>{'Must be an email'}</Label>
50 |       <Input
51 |         type='text'
52 |         value='name@domain.com'
53 |         // onChange={(data, error) => console.log('change', data, error)}
54 |         // onMount={(data,error) => console.log('mount', data, error)}
55 |         style={style}
56 |         check={email}
57 |         required
58 |       />
59 |     </form>
60 |   )
61 | }
62 | 
63 | return <PreviewInput />
64 | `
65 | 


--------------------------------------------------------------------------------
/example/components/utils.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-len */
2 | const isEmail = string => (
3 |   string.match(/^[-a-z0-9~!$%^&*_=+}{'?]+(.[-a-z0-9~!$%^&*_=+}{'?]+)*@([a-z0-9_][-a-z0-9_]*(.[-a-z0-9_]+)*.(aero|arpa|biz|com|coop|edu|gov|info|int|mil|museum|name|net|org|pro|travel|mobi|[a-z][a-z])|([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}))(:[0-9]{1,5})?$/i)
4 | )
5 | 
6 | export default isEmail
7 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | 
 4 | import App from './components'
 5 | 
 6 | const render = () => {
 7 |   ReactDOM.render(<App />, document.getElementById('root'))
 8 | }
 9 | 
10 | render()
11 | 
12 | // Hot Module Replacement API
13 | if (module.hot) module.hot.accept('./components', render)
14 | 


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | !function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=5)}([function(e,t,n){"use strict";function r(e,t,n,r,u,i,a,c){if(o(t),!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var s=[n,r,u,i,a,c],f=0;l=new Error(t.replace(/%s/g,function(){return s[f++]})),l.name="Invariant Violation"}throw l.framesToPop=1,l}}var o=function(e){};e.exports=r},function(e,t,n){"use strict";function r(e){return function(){return e}}var o=function(){};o.thatReturns=r,o.thatReturnsFalse=r(!1),o.thatReturnsTrue=r(!0),o.thatReturnsNull=r(null),o.thatReturnsThis=function(){return this},o.thatReturnsArgument=function(e){return e},e.exports=o},function(e,t){function n(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}e.exports=n},function(e,t,n){var r=n(13),o="object"==typeof self&&self&&self.Object===Object&&self,u=r||o||Function("return this")();e.exports=u},function(e,t,n){var r=n(3),o=r.Symbol;e.exports=o},function(e,t,n){e.exports=n(6)},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var i=n(7),a=n.n(i),c=n(11),l=n.n(c),s=n(21),f=n.n(s),p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},y=function(e){return{default:e?e.default:{},onFocus:e?e.onFocus:{},onError:e?e.onError:{},normalizr:{borderBottom:"none",borderTop:"none",borderLeft:"none",borderRight:"none"}}},d=function(e){function t(){var e,n,u,i;r(this,t);for(var c=arguments.length,s=Array(c),f=0;f<c;f++)s[f]=arguments[f];return n=u=o(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(s))),u.state={value:u.props.value,style:y(u.props.style).default},u.componentDidMount=function(){u.next=l()(u.next,500),u.propagate(!0)},u.componentWillReceiveProps=function(e){var t=e.value;u.setState({value:u.props.format?u.props.format(t):t},u.propagate)},u.componentDidUpdate=function(){void 0!==u.range&&(u.input.setSelectionRange(u.range,u.range),u.range=void 0)},u.onBlur=function(){var e=y(u.props.style);u.setState({style:u.state.error?p({},e.normalizr,e.default,e.onError):p({},e.normalizr,e.default)})},u.onChange=function(e){var t=e.target.value;if(u.setState({value:u.props.format?u.props.format(t):t},u.propagate),u.props.format){var n=e.target.selectionStart,r=u.props.format(e.target.value).length,o=e.target.value.length,i=n-(o-r);u.range=i}},u.onFocus=function(){var e=y(u.props.style);u.setState({style:p({},e.normalizr,e.default,e.onFocus,u.state.error?e.onError:null)})},u.propagate=function(e){var t=u.state.value,n=!u.props.check(t);""===t&&u.props.required&&(n=!0),""!==t||u.props.required||(n=!1);var r=y(u.props.style),o=p({},r.normalizr,r.default,r.onFocus),i=p({},r.normalizr,r.default,r.onError);n?u.setState({style:i,error:n},u.next):e?u.setState({error:n},u.next(!0)):u.setState({style:o,error:n},u.next)},u.next=function(e){e&&u.props.onMount&&u.props.onMount(u.state.value,u.state.error),!e&&u.props.onChange&&u.props.onChange(u.state.value,u.state.error)},u.byType=function(e){switch(u.props.type){case"textarea":return a.a.createElement("textarea",p({ref:function(e){u.input=e}},e));case"text":default:return a.a.createElement("input",p({ref:function(e){u.input=e}},e))}},u.render=function(){var e={onKeyDown:u.props.onKeyDown,type:u.props.type,disabled:u.props.disabled,onBlur:u.onBlur,onChange:u.onChange,style:u.state.style,onFocus:u.onFocus,required:u.props.required,spellCheck:u.props.spellCheck||!1,min:u.props.min,step:u.props.step,value:u.state.value,placeholder:u.props.placeholder};return a.a.createElement("div",{onClick:u.onClick},u.byType(e))},i=n,o(u,i)}return u(t,e),t}(a.a.Component);d.defaultProps={style:void 0,type:void 0,value:"",format:void 0,onMount:void 0,onChange:void 0,onKeyDown:void 0,placeholder:void 0,step:void 0,min:void 0,spellCheck:!1,required:!1,disabled:!1,check:function(){return!0}},d.propTypes={style:f.a.shape({default:f.a.shape({}),onFocus:f.a.shape({}),onError:f.a.shape({})}),value:f.a.oneOfType([f.a.string,f.a.number]),placeholder:f.a.string,type:f.a.string,step:f.a.number,min:f.a.number,format:f.a.func,onKeyDown:f.a.func,spellCheck:f.a.bool,required:f.a.bool,disabled:f.a.bool,check:f.a.func,onMount:f.a.func,onChange:f.a.func},t.default=d},function(e,t,n){"use strict";e.exports=n(8)},function(e,t,n){"use strict";function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e,r=0;r<t;r++)n+="&args[]="+encodeURIComponent(arguments[r+1]);throw t=Error(n+" for the full message or use the non-minified dev environment for full errors and additional helpful warnings."),t.name="Invariant Violation",t.framesToPop=1,t}function o(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||x}function u(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||x}function i(){}function a(e,t,n){this.props=e,this.context=t,this.refs=b,this.updater=n||x}function c(e,t,n,r,o,u,i){return{$$typeof:S,type:e,key:t,ref:n,props:i,_owner:u}}function l(e){var t={"=":"=0",":":"=2"};return"$"+(""+e).replace(/[=:]/g,function(e){return t[e]})}function s(e,t,n,r){if(R.length){var o=R.pop();return o.result=e,o.keyPrefix=t,o.func=n,o.context=r,o.count=0,o}return{result:e,keyPrefix:t,func:n,context:r,count:0}}function f(e){e.result=null,e.keyPrefix=null,e.func=null,e.context=null,e.count=0,10>R.length&&R.push(e)}function p(e,t,n,o){var u=typeof e;if("undefined"!==u&&"boolean"!==u||(e=null),null===e||"string"===u||"number"===u||"object"===u&&e.$$typeof===C)return n(o,e,""===t?"."+y(e,0):t),1;var i=0;if(t=""===t?".":t+":",Array.isArray(e))for(var a=0;a<e.length;a++){u=e[a];var c=t+y(u,a);i+=p(u,c,n,o)}else if("function"==typeof(c=k&&e[k]||e["@@iterator"]))for(e=c.call(e),a=0;!(u=e.next()).done;)u=u.value,c=t+y(u,a++),i+=p(u,c,n,o);else"object"===u&&(n=""+e,r("31","[object Object]"===n?"object with keys {"+Object.keys(e).join(", ")+"}":n,""));return i}function y(e,t){return"object"==typeof e&&null!==e&&null!=e.key?l(e.key):t.toString(36)}function d(e,t){e.func.call(e.context,t,e.count++)}function v(e,t,n){var r=e.result,o=e.keyPrefix;e=e.func.call(e.context,t,e.count++),Array.isArray(e)?h(e,r,n,g.thatReturnsArgument):null!=e&&(c.isValidElement(e)&&(e=c.cloneAndReplaceKey(e,o+(!e.key||t&&t.key===e.key?"":(""+e.key).replace(T,"$&/")+"/")+n)),r.push(e))}function h(e,t,n,r,o){var u="";null!=n&&(u=(""+n).replace(T,"$&/")+"/"),t=s(t,u,r,o),null==e||p(e,"",v,t),f(t)}var m=n(9),b=n(10);n(0);var g=n(1),x={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}};o.prototype.isReactComponent={},o.prototype.setState=function(e,t){"object"!=typeof e&&"function"!=typeof e&&null!=e&&r("85"),this.updater.enqueueSetState(this,e,t,"setState")},o.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},i.prototype=o.prototype;var O=u.prototype=new i;O.constructor=u,m(O,o.prototype),O.isPureReactComponent=!0;var j=a.prototype=new i;j.constructor=a,m(j,o.prototype),j.unstable_isAsyncReactComponent=!0,j.render=function(){return this.props.children};var _={Component:o,PureComponent:u,AsyncComponent:a},w={current:null},E=Object.prototype.hasOwnProperty,S="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,P={key:!0,ref:!0,__self:!0,__source:!0};c.createElement=function(e,t,n){var r,o={},u=null,i=null,a=null,l=null;if(null!=t)for(r in void 0!==t.ref&&(i=t.ref),void 0!==t.key&&(u=""+t.key),a=void 0===t.__self?null:t.__self,l=void 0===t.__source?null:t.__source,t)E.call(t,r)&&!P.hasOwnProperty(r)&&(o[r]=t[r]);var s=arguments.length-2;if(1===s)o.children=n;else if(1<s){for(var f=Array(s),p=0;p<s;p++)f[p]=arguments[p+2];o.children=f}if(e&&e.defaultProps)for(r in s=e.defaultProps)void 0===o[r]&&(o[r]=s[r]);return c(e,u,i,a,l,w.current,o)},c.createFactory=function(e){var t=c.createElement.bind(null,e);return t.type=e,t},c.cloneAndReplaceKey=function(e,t){return c(e.type,t,e.ref,e._self,e._source,e._owner,e.props)},c.cloneElement=function(e,t,n){var r=m({},e.props),o=e.key,u=e.ref,i=e._self,a=e._source,l=e._owner;if(null!=t){if(void 0!==t.ref&&(u=t.ref,l=w.current),void 0!==t.key&&(o=""+t.key),e.type&&e.type.defaultProps)var s=e.type.defaultProps;for(f in t)E.call(t,f)&&!P.hasOwnProperty(f)&&(r[f]=void 0===t[f]&&void 0!==s?s[f]:t[f])}var f=arguments.length-2;if(1===f)r.children=n;else if(1<f){s=Array(f);for(var p=0;p<f;p++)s[p]=arguments[p+2];r.children=s}return c(e.type,o,u,i,a,l,r)},c.isValidElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===S};var k="function"==typeof Symbol&&Symbol.iterator,C="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,T=/\/+/g,R=[],A={forEach:function(e,t,n){if(null==e)return e;t=s(null,null,t,n),null==e||p(e,"",d,t),f(t)},map:function(e,t,n){if(null==e)return e;var r=[];return h(e,r,null,t,n),r},count:function(e){return null==e?0:p(e,"",g.thatReturnsNull,null)},toArray:function(e){var t=[];return h(e,t,null,g.thatReturnsArgument),t}};e.exports={Children:{map:A.map,forEach:A.forEach,count:A.count,toArray:A.toArray,only:function(e){return c.isValidElement(e)||r("143"),e}},Component:_.Component,PureComponent:_.PureComponent,unstable_AsyncComponent:_.AsyncComponent,createElement:c.createElement,cloneElement:c.cloneElement,isValidElement:c.isValidElement,createFactory:c.createFactory,version:"16.0.0",__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED:{ReactCurrentOwner:w,assign:m}}},function(e,t,n){"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}/*
2 | object-assign
3 | (c) Sindre Sorhus
4 | @license MIT
5 | */
6 | var o=Object.getOwnPropertySymbols,u=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable;e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map(function(e){return t[e]}).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach(function(e){r[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,t){for(var n,a,c=r(e),l=1;l<arguments.length;l++){n=Object(arguments[l]);for(var s in n)u.call(n,s)&&(c[s]=n[s]);if(o){a=o(n);for(var f=0;f<a.length;f++)i.call(n,a[f])&&(c[a[f]]=n[a[f]])}}return c}},function(e,t,n){"use strict";var r={};e.exports=r},function(e,t,n){function r(e,t,n){function r(t){var n=b,r=g;return b=g=void 0,w=t,O=e.apply(r,n)}function s(e){return w=e,j=setTimeout(y,t),E?r(e):O}function f(e){var n=e-_,r=e-w,o=t-n;return S?l(o,x-r):o}function p(e){var n=e-_,r=e-w;return void 0===_||n>=t||n<0||S&&r>=x}function y(){var e=u();if(p(e))return d(e);j=setTimeout(y,f(e))}function d(e){return j=void 0,P&&b?r(e):(b=g=void 0,O)}function v(){void 0!==j&&clearTimeout(j),w=0,b=_=g=j=void 0}function h(){return void 0===j?O:d(u())}function m(){var e=u(),n=p(e);if(b=arguments,g=this,_=e,n){if(void 0===j)return s(_);if(S)return j=setTimeout(y,t),r(_)}return void 0===j&&(j=setTimeout(y,t)),O}var b,g,x,O,j,_,w=0,E=!1,S=!1,P=!0;if("function"!=typeof e)throw new TypeError(a);return t=i(t)||0,o(n)&&(E=!!n.leading,S="maxWait"in n,x=S?c(i(n.maxWait)||0,t):x,P="trailing"in n?!!n.trailing:P),m.cancel=v,m.flush=h,m}var o=n(2),u=n(12),i=n(15),a="Expected a function",c=Math.max,l=Math.min;e.exports=r},function(e,t,n){var r=n(3),o=function(){return r.Date.now()};e.exports=o},function(e,t,n){(function(t){var n="object"==typeof t&&t&&t.Object===Object&&t;e.exports=n}).call(t,n(14))},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){function r(e){if("number"==typeof e)return e;if(u(e))return i;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(a,"");var n=l.test(e);return n||s.test(e)?f(e.slice(2),n?2:8):c.test(e)?i:+e}var o=n(2),u=n(16),i=NaN,a=/^\s+|\s+$/g,c=/^[-+]0x[0-9a-f]+$/i,l=/^0b[01]+$/i,s=/^0o[0-7]+$/i,f=parseInt;e.exports=r},function(e,t,n){function r(e){return"symbol"==typeof e||u(e)&&o(e)==i}var o=n(17),u=n(20),i="[object Symbol]";e.exports=r},function(e,t,n){function r(e){return null==e?void 0===e?c:a:l&&l in Object(e)?u(e):i(e)}var o=n(4),u=n(18),i=n(19),a="[object Null]",c="[object Undefined]",l=o?o.toStringTag:void 0;e.exports=r},function(e,t,n){function r(e){var t=i.call(e,c),n=e[c];try{e[c]=void 0;var r=!0}catch(e){}var o=a.call(e);return r&&(t?e[c]=n:delete e[c]),o}var o=n(4),u=Object.prototype,i=u.hasOwnProperty,a=u.toString,c=o?o.toStringTag:void 0;e.exports=r},function(e,t){function n(e){return o.call(e)}var r=Object.prototype,o=r.toString;e.exports=n},function(e,t){function n(e){return null!=e&&"object"==typeof e}e.exports=n},function(e,t,n){e.exports=n(22)()},function(e,t,n){"use strict";var r=n(1),o=n(0),u=n(23);e.exports=function(){function e(e,t,n,r,i,a){a!==u&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return n.checkPropTypes=r,n.PropTypes=n,n}},function(e,t,n){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}])});


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@ied/react-enhanced-form",
 3 |   "version": "1.5.1",
 4 |   "description": "Enhanced form input for your React application",
 5 |   "main": "lib/index.js",
 6 |   "scripts": {
 7 |     "lint": "./node_modules/.bin/eslint ./",
 8 |     "start": "webpack-dev-server --config webpack/webpack.config.dev.js",
 9 |     "build:lib": "sh webpack/build.sh lib",
10 |     "build:docs": "sh webpack/build.sh docs"
11 |   },
12 |   "author": "Didier Franc",
13 |   "license": "MIT",
14 |   "bugs": {
15 |     "url": "https://github.com/xeonys/react-enhanced-form/issues"
16 |   },
17 |   "homepage": "https://github.com/xeonys/react-enhanced-form#readme",
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "git+https://github.com/xeonys/react-enhanced-form.git"
21 |   },
22 |   "keywords": [
23 |     "xeonys",
24 |     "inextenso digital",
25 |     "textarea",
26 |     "input",
27 |     "form",
28 |     "redux",
29 |     "react"
30 |   ],
31 |   "devDependencies": {
32 |     "babel-core": "^6.24.0",
33 |     "babel-eslint": "^7.2.1",
34 |     "babel-loader": "^6.4.1",
35 |     "babel-polyfill": "^6.23.0",
36 |     "babel-preset-es2015": "^6.24.0",
37 |     "babel-preset-react": "^6.23.0",
38 |     "babel-preset-stage-0": "^6.22.0",
39 |     "babel-standalone": "^6.26.0",
40 |     "codemirror": "^5.30.0",
41 |     "css-loader": "^0.28.0",
42 |     "eslint": "^3.19.0",
43 |     "eslint-config-airbnb": "^14.0.0",
44 |     "eslint-friendly-formatter": "^2.0.7",
45 |     "eslint-plugin-babel": "^4.1.1",
46 |     "eslint-plugin-import": "^2.2.0",
47 |     "eslint-plugin-jsx-a11y": "^4.0.0",
48 |     "eslint-plugin-react": "^6.10.3",
49 |     "html-webpack-plugin": "^2.28.0",
50 |     "style-loader": "^0.16.1",
51 |     "webpack": "^3.7.1",
52 |     "webpack-dev-server": "^2.9.2"
53 |   },
54 |   "dependencies": {
55 |     "lodash": "^4.17.4",
56 |     "prop-types": "^15.6.0",
57 |     "react": "^16.0.0",
58 |     "react-dom": "^16.0.0",
59 |     "styled-components": "^2.2.1"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import debounce from 'lodash/debounce'
  3 | import PropTypes from 'prop-types'
  4 | 
  5 | const getStyle = s => ({
  6 |   default: s ? s.default : {},
  7 |   onFocus: s ? s.onFocus : {},
  8 |   onError: s ? s.onError : {},
  9 |   normalizr: {
 10 |     borderBottom: 'none',
 11 |     borderTop: 'none',
 12 |     borderLeft: 'none',
 13 |     borderRight: 'none',
 14 |   },
 15 | })
 16 | 
 17 | class EnhancedInput extends React.Component {
 18 | 
 19 |   state = {
 20 |     value: this.props.value,
 21 |     style: getStyle(this.props.style).default,
 22 |   }
 23 | 
 24 |   componentDidMount = () => {
 25 |     this.next = debounce(this.next, 500)
 26 |     this.propagate(true)
 27 |   }
 28 | 
 29 |   componentWillReceiveProps = ({ value }) => {
 30 |     this.setState({
 31 |       value: this.props.format ? this.props.format(value) : value,
 32 |     }, this.propagate)
 33 |   }
 34 | 
 35 |   componentDidUpdate = () => {
 36 |     if (this.range !== undefined) {
 37 |       this.input.setSelectionRange(this.range, this.range)
 38 |       this.range = undefined
 39 |     }
 40 |   }
 41 | 
 42 |   onBlur = () => {
 43 |     const style = getStyle(this.props.style)
 44 |     this.setState({
 45 |       style: this.state.error
 46 |         ? {
 47 |           ...style.normalizr,
 48 |           ...style.default,
 49 |           ...style.onError,
 50 |         }
 51 |         : {
 52 |           ...style.normalizr,
 53 |           ...style.default,
 54 |         },
 55 |     })
 56 |   }
 57 | 
 58 |   onChange = (e) => {
 59 |     const value = e.target.value
 60 |     this.setState({
 61 |       value: this.props.format ? this.props.format(value) : value,
 62 |     }, this.propagate)
 63 | 
 64 |     if (this.props.format) {
 65 |       const range = e.target.selectionStart
 66 |       const lengthFormat = this.props.format(e.target.value).length
 67 |       const length = e.target.value.length
 68 | 
 69 |       const newRange = range - (length - lengthFormat)
 70 |       this.range = newRange
 71 |     }
 72 |   }
 73 | 
 74 |   onFocus = () => {
 75 |     const style = getStyle(this.props.style)
 76 |     this.setState({
 77 |       style: {
 78 |         ...style.normalizr,
 79 |         ...style.default,
 80 |         ...style.onFocus,
 81 |         ...this.state.error ? style.onError : null,
 82 |       },
 83 |     })
 84 |   }
 85 | 
 86 |   propagate = (init) => {
 87 |     const value = this.state.value
 88 | 
 89 |     let error = !this.props.check(value)
 90 |     if (value === '' && this.props.required) error = true
 91 |     if (value === '' && !this.props.required) error = false
 92 | 
 93 |     const style = getStyle(this.props.style)
 94 | 
 95 |     const onFocus = {
 96 |       ...style.normalizr,
 97 |       ...style.default,
 98 |       ...style.onFocus,
 99 |     }
100 |     const onError = {
101 |       ...style.normalizr,
102 |       ...style.default,
103 |       ...style.onError,
104 |     }
105 | 
106 |     if (error) this.setState({ style: onError, error }, this.next)
107 |     else if (init) this.setState({ error }, this.next(true))
108 |     else this.setState({ style: onFocus, error }, this.next)
109 |   }
110 | 
111 |   next = (init) => {
112 |     if (init && this.props.onMount) {
113 |       this.props.onMount(this.state.value, this.state.error)
114 |     }
115 | 
116 |     if (!init && this.props.onChange) {
117 |       this.props.onChange(this.state.value, this.state.error)
118 |     }
119 |   }
120 | 
121 |   byType = (props) => {
122 |     switch (this.props.type) {
123 |       case 'textarea':
124 |         return <textarea ref={(ref) => { this.input = ref }} {...props} />
125 |       case 'text':
126 |       default:
127 |         return <input ref={(ref) => { this.input = ref }} {...props} />
128 |     }
129 |   }
130 | 
131 |   render = () => {
132 |     const props = {
133 |       onKeyDown: this.props.onKeyDown,
134 |       type: this.props.type,
135 |       disabled: this.props.disabled,
136 |       onBlur: this.onBlur,
137 |       onChange: this.onChange,
138 |       style: this.state.style,
139 |       onFocus: this.onFocus,
140 |       required: this.props.required,
141 |       spellCheck: this.props.spellCheck || false,
142 |       min: this.props.min,
143 |       step: this.props.step,
144 |       value: this.state.value,
145 |       placeholder: this.props.placeholder,
146 |     }
147 | 
148 |     return <div onClick={this.onClick}>{this.byType(props)}</div>
149 |   }
150 | }
151 | 
152 | EnhancedInput.defaultProps = {
153 |   style: undefined,
154 |   type: undefined,
155 |   value: '',
156 |   format: undefined,
157 |   onMount: undefined,
158 |   onChange: undefined,
159 |   onKeyDown: undefined,
160 |   placeholder: undefined,
161 |   step: undefined,
162 |   min: undefined,
163 |   spellCheck: false,
164 |   required: false,
165 |   disabled: false,
166 |   check: () => true,
167 | }
168 | 
169 | EnhancedInput.propTypes = {
170 |   style: PropTypes.shape({
171 |     default: PropTypes.shape({}),
172 |     onFocus: PropTypes.shape({}),
173 |     onError: PropTypes.shape({}),
174 |   }),
175 |   value: PropTypes.oneOfType([
176 |     PropTypes.string,
177 |     PropTypes.number,
178 |   ]),
179 |   placeholder: PropTypes.string,
180 |   type: PropTypes.string,
181 |   step: PropTypes.number,
182 |   min: PropTypes.number,
183 |   format: PropTypes.func,
184 |   onKeyDown: PropTypes.func,
185 |   spellCheck: PropTypes.bool,
186 |   required: PropTypes.bool,
187 |   disabled: PropTypes.bool,
188 |   check: PropTypes.func,
189 |   onMount: PropTypes.func,
190 |   onChange: PropTypes.func,
191 | }
192 | 
193 | export default EnhancedInput
194 | 


--------------------------------------------------------------------------------
/webpack/build.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/sh
 2 | 
 3 | lib () {
 4 |   echo 'Start building lib 👷'
 5 |   webpack --config webpack/webpack.config.lib.js --bail
 6 |   echo '👏'
 7 | }
 8 | 
 9 | docs () {
10 |   echo 'Start building docs 👷'
11 |   webpack --config webpack/webpack.config.docs.js --bail
12 |   echo '👏'
13 | }
14 | 
15 | 
16 | if [ $1 == "lib" ]; then lib
17 | elif [ $1 == "docs" ]; then docs
18 | fi
19 | 


--------------------------------------------------------------------------------
/webpack/index-template.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <title>react-enhanced-form</title>
 4 |     <meta charset="UTF-8">
 5 |   </head>
 6 |   <body style="margin:0px;">
 7 |     <div id="root"></div>
 8 |     <script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,fetch"></script>
 9 |   </body>
10 | </html>
11 | 


--------------------------------------------------------------------------------
/webpack/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | const webpack = require('webpack')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   context: resolve(__dirname, '../'),
 7 |   entry: [
 8 |     'webpack-dev-server/client?http://localhost:3000',
 9 |     'webpack/hot/only-dev-server',
10 |     'babel-polyfill',
11 |     './example/index.js',
12 |   ],
13 |   output: {
14 |     filename: 'bundle.js',
15 |     path: resolve(__dirname),
16 |     publicPath: '/',
17 |   },
18 |   devtool: 'inline-source-map',
19 |   devServer: {
20 |     port: 3000,
21 |     hot: true,
22 |     publicPath: '/',
23 |     historyApiFallback: true,
24 |   },
25 |   module: {
26 |     loaders: [
27 |       {
28 |         test: /\.js$/,
29 |         loaders: [
30 |           'babel-loader',
31 |         ],
32 |         exclude: /node_modules/,
33 |       },
34 |       {
35 |         test: /\.css$/,
36 |         use: ['style-loader', 'css-loader'],
37 |       },
38 |     ],
39 |   },
40 |   plugins: [
41 |     new webpack.HotModuleReplacementPlugin(),
42 |     new webpack.NamedModulesPlugin(),
43 |     new HtmlWebpackPlugin({ template: 'webpack/index-template.html' }),
44 |   ],
45 | }
46 | 


--------------------------------------------------------------------------------
/webpack/webpack.config.docs.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | const webpack = require('webpack')
 3 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 4 | 
 5 | module.exports = {
 6 |   context: resolve(__dirname, '../'),
 7 |   entry: [
 8 |     'babel-polyfill',
 9 |     './example/index.js',
10 |   ],
11 |   output: {
12 |     filename: 'bundle.js',
13 |     path: resolve(__dirname, '../docs'),
14 |     publicPath: '/react-enhanced-form/',
15 |   },
16 |   module: {
17 |     loaders: [
18 |       {
19 |         test: /\.js$/,
20 |         loaders: [
21 |           'babel-loader',
22 |         ],
23 |         exclude: /node_modules/,
24 |       },
25 |       {
26 |         test: /\.css$/,
27 |         use: ['style-loader', 'css-loader'],
28 |       },
29 |     ],
30 |   },
31 |   plugins: [
32 |     new webpack.DefinePlugin({
33 |       'process.env': {
34 |         NODE_ENV: JSON.stringify('production'),
35 |       },
36 |     }),
37 |     new webpack.optimize.UglifyJsPlugin(),
38 |     new HtmlWebpackPlugin({ template: 'webpack/index-template.html' }),
39 |   ],
40 | }
41 | 


--------------------------------------------------------------------------------
/webpack/webpack.config.lib.js:
--------------------------------------------------------------------------------
 1 | const { resolve } = require('path')
 2 | const webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   context: resolve(__dirname, '../'),
 6 |   entry: [
 7 |     './src/index.js',
 8 |   ],
 9 |   output: {
10 |     filename: 'index.js',
11 |     path: resolve(__dirname, '../lib'),
12 |     libraryTarget: 'umd',
13 |   },
14 |   module: {
15 |     loaders: [
16 |       {
17 |         test: /\.js$/,
18 |         loaders: [
19 |           'babel-loader',
20 |         ],
21 |         exclude: /node_modules/,
22 |       },
23 |     ],
24 |   },
25 |   plugins: [
26 |     new webpack.DefinePlugin({
27 |       'process.env': {
28 |         NODE_ENV: JSON.stringify('production'),
29 |       },
30 |     }),
31 |     new webpack.optimize.UglifyJsPlugin(),
32 |   ],
33 | }
34 | 


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