Update dependencies and add onPaste event

.gitignore

@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
+.idea

README.md

@@ -3,7 +3,7 @@
 Awesome React Calculator is a React Component library. It gives you a simple calculator component to work in your project. It supports keyboard and you can paste your expression to get the result.
 
 
-[![npm version](https://img.shields.io/badge/npm-1.0.9-blue.svg)](https://www.npmjs.com/package/awesome-react-calculator)
+[![npm version](https://img.shields.io/badge/npm-1.1.0-blue.svg)](https://www.npmjs.com/package/awesome-react-calculator)
 
 ## Installation
 
@@ -43,12 +43,19 @@ class Demo extends Component {
     console.log(newResult)
     console.log(`${newResult.expression} is validated as ${newResult.result} `)
   }
+
+  onPaste(pastedData) {
+    console.log(pastedData)
+  }
+
   render() {
     return <div className='calculator-demo' style={style}>
       <h1>Calculator</h1>
       <Calculator
         onNewInput={this.handleInput}
-        onResultChange={this.onResultChange}/>
+        onResultChange={this.onResultChange}
+        onPaste={this.onPaste}
+      />
     </div>
   }
 }
@@ -60,8 +67,9 @@ render(<Demo/>, document.querySelector('#demo'))
 ### Props
 | Props  | Return Type   | Usage |
 |---|---|--- |
-| onNewInput  | object {expression: string, key: string} | Triggered when some input is entered|
-| onResultChange  | object {expression: string, result: string}  | Returns the result shown in calculator and triggered whenever the result is changed|
+| onNewInput  | object {expression: `string`, key: `string`} | Triggered when some input is entered|
+| onResultChange  | object {expression: `string`, result: `string`}  | Returns the result shown in calculator and triggered whenever the result is changed|
+| onPaste | pastedData: `string` | Triggered when some input is pasted |
 
 
 ### Note

demo/src/index.js

@@ -3,8 +3,8 @@ import {render} from 'react-dom'
 
 import Calculator from '../../src'
 const style = {
-  height: '24rem',
-  width: '15rem'
+  height: '50vh',
+  width: '50vw'
 }
 class Demo extends Component {
   handleInput(input) {
@@ -15,13 +15,24 @@ class Demo extends Component {
     console.log(newResult)
     console.log(`${newResult.expression} is validated as ${newResult.result} `)
   }
+
+  onPaste(pastedData) {
+    console.log(pastedData)
+  }
+
   render() {
-    return <div className='calculator-demo' style={style}>
-      <h1>Calculator</h1>
-      <Calculator
-        onNewInput={this.handleInput}
-        onResultChange={this.onResultChange}/>
-    </div>
+    return (
+      <section style={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+        <div className='calculator-demo' style={style}>
+          <h1>Calculator</h1>
+          <Calculator
+            onNewInput={this.handleInput}
+            onResultChange={this.onResultChange}
+            onPaste={this.onPaste}
+          />
+        </div>
+      </section>
+    )
   }
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "awesome-react-calculator",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "description": "awesome-react-calculator",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,25 +22,32 @@
     "test:watch": "nwb test-react --server"
   },
   "dependencies": {
-    "mathjs": "6.0.2"
+    "mathjs": "^10.1.0"
   },
   "peerDependencies": {
-    "react": "15.x"
+    "react": "16.x"
   },
   "devDependencies": {
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "mathjs": "6.0.2",
-    "nwb": "0.23.x",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "nwb": "0.25.2",
+    "prop-types": "^15.8.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0"
   },
+  "browserslist": [
+    "cover 100%",
+    "not dead"
+  ],
   "author": "avinash sivaraman",
   "homepage": "https://github.com/avinashsivaraman/awesome-react-calculator",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/avinashsivaraman/awesome-react-calculator.git"
   },
+  "bugs": {
+    "url": "https://github.com/avinashsivaraman/awesome-react-calculator/issues"
+  },
   "keywords": [
     "react-component",
     "calculator",

src/lib/ButtonPanel.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
 export default class ButtonPanel extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.onClick = this.onClick.bind(this)
   }
 
   onClick(event){
-    var target = event.target;
+    const target = event.target;
     target.classList.remove('clicked');
     setTimeout(() => {
       target.classList.add('clicked');
@@ -16,7 +16,7 @@ export default class ButtonPanel extends React.Component {
   }
 
   componentDidMount() {
-    var buttons = document.querySelectorAll('.react-calc button');
+    let buttons = document.querySelectorAll('.react-calc button');
     buttons = [].slice.call(buttons);
     const keyMapping = {}
     buttons.forEach((button) => {

src/lib/Calculator.js

@@ -5,8 +5,8 @@ import ButtonPanel from './ButtonPanel';
 import { evaluate } from 'mathjs';
 
 export default class Calculator extends React.Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = {
       last: '',
       cur: '0'
@@ -37,6 +37,9 @@ export default class Calculator extends React.Component {
           last: 'Not a valid expression'
         })
       }
+      if (this.props.onPaste) {
+        this.props.onPaste({ pastedData })
+      }
     }
   }
 
@@ -128,15 +131,14 @@ export default class Calculator extends React.Component {
         this.props.onNewInput({expression: this.state.cur, key: type})
       }
   }
+
   render() {
     return (
       <div className="react-calculator"
         onPaste={this.onPaste}
         onKeyDown={this.handleKeyDown}>
-        <ResultPanel {...this.state} />
-        <ButtonPanel
-          onClick={this.onButtonClick}
-          onLoad={keyMap => {this.keyMap = keyMap}}/>
+        <ResultPanel {...this.state} inputStyle={this.props.inputStyle} />
+        <ButtonPanel onClick={this.onButtonClick} onLoad={keyMap => {this.keyMap = keyMap}} />
       </div>
     );
   }
@@ -145,4 +147,6 @@ export default class Calculator extends React.Component {
 Calculator.propTypes = {
   onNewInput: PropTypes.func,
   onResultChange: PropTypes.func,
+  onPaste: PropTypes.func,
+  inputStyle: PropTypes.object
 }

src/lib/ResultPanel.js

@@ -16,7 +16,8 @@ export default class ResultPanel extends React.Component {
   static propTypes = {
     last: PropTypes.string,
     cur: PropTypes.string,
-    onInputChange: PropTypes.func
+    onInputChange: PropTypes.func,
+    inputStyle: PropTypes.object
   };
   static defaultProps = {
     curr: '0',
@@ -34,7 +35,7 @@ export default class ResultPanel extends React.Component {
     return (
       <div className="result-panel">
         <div className="last-row">{finalLast}</div>
-        <input className="cur-row" value={finalCur} readOnly />
+        <input className="cur-row" value={finalCur} style={this.props.inputStyle} readOnly />
       </div>
     );
   }

src/style/index.css

@@ -11,7 +11,7 @@
     flex-direction: column;
     background-color: #e3e7e9;
     text-align: right;
-    padding: 0px 1rem;
+    padding: 0 1rem;
     line-height: 1.5rem;
     overflow: scroll;
 }
@@ -51,7 +51,7 @@
     border: none;
     background-color: #fafafa;
     font-size: 20px;
-    line-height: 0px;
+    line-height: 0;
     text-align: center;
     overflow: hidden;
 }