From 7a322a4feac71f7e025c2a1ab2b0f706e71c9850 Mon Sep 17 00:00:00 2001 From: Hashen110 Date: Mon, 24 Jan 2022 10:16:13 +0530 Subject: [PATCH 1/6] update .gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index c452c58..c8fe11c 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ /node_modules /umd npm-debug.log* +.idea From b3d9897b2466cfc2ce56c8c71b70be47e5c47995 Mon Sep 17 00:00:00 2001 From: Hashen110 Date: Mon, 24 Jan 2022 10:16:50 +0530 Subject: [PATCH 2/6] remove redundant unit qualifier --- src/style/index.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style/index.css b/src/style/index.css index f9dacdc..d819347 100644 --- a/src/style/index.css +++ b/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; } From 83152408e7e10e3ed66cf009c7777c127e94667d Mon Sep 17 00:00:00 2001 From: Hashen110 Date: Mon, 24 Jan 2022 10:17:14 +0530 Subject: [PATCH 3/6] add onPaste event --- demo/src/index.js | 27 +++++++++++++++++++-------- src/lib/ButtonPanel.js | 8 ++++---- src/lib/Calculator.js | 9 +++++++-- 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/demo/src/index.js b/demo/src/index.js index a6110ef..e744bc7 100644 --- a/demo/src/index.js +++ b/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
-

Calculator

- -
+ return ( +
+
+

Calculator

+ +
+
+ ) } } diff --git a/src/lib/ButtonPanel.js b/src/lib/ButtonPanel.js index 88783d2..8a60ed7 100644 --- a/src/lib/ButtonPanel.js +++ b/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) => { diff --git a/src/lib/Calculator.js b/src/lib/Calculator.js index 2a6b0e8..0a40197 100644 --- a/src/lib/Calculator.js +++ b/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,6 +131,7 @@ export default class Calculator extends React.Component { this.props.onNewInput({expression: this.state.cur, key: type}) } } + render() { return (
Date: Mon, 24 Jan 2022 10:17:26 +0530 Subject: [PATCH 4/6] update dependencies --- package.json | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 67d4f18..738de9e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "awesome-react-calculator", - "version": "1.0.9", + "version": "1.1.0", "description": "awesome-react-calculator", "main": "lib/index.js", "module": "es/index.js", @@ -22,17 +22,17 @@ "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" }, "author": "avinash sivaraman", "homepage": "https://github.com/avinashsivaraman/awesome-react-calculator", @@ -41,6 +41,9 @@ "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", From 2d5388bcbe905dbc5e074c2d82c15e75b49687c3 Mon Sep 17 00:00:00 2001 From: Hashen110 Date: Mon, 24 Jan 2022 10:20:55 +0530 Subject: [PATCH 5/6] update README.md --- README.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 39cedab..33dd85c 100644 --- a/README.md +++ b/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

Calculator

+ onResultChange={this.onResultChange} + onPaste={this.onPaste} + />
} } @@ -60,8 +67,9 @@ render(, 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 From 7f6f0b9e5fe5e6ba9d80027f396427d01c5b02c3 Mon Sep 17 00:00:00 2001 From: Hashen110 Date: Mon, 24 Jan 2022 10:34:39 +0530 Subject: [PATCH 6/6] add input style prop and browserslist --- package.json | 6 +++++- src/lib/Calculator.js | 7 +++---- src/lib/ResultPanel.js | 5 +++-- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 738de9e..8d85b26 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "awesome-react-calculator", - "version": "1.1.0", + "version": "1.1.1", "description": "awesome-react-calculator", "main": "lib/index.js", "module": "es/index.js", @@ -34,6 +34,10 @@ "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", diff --git a/src/lib/Calculator.js b/src/lib/Calculator.js index 0a40197..e45d606 100644 --- a/src/lib/Calculator.js +++ b/src/lib/Calculator.js @@ -137,10 +137,8 @@ export default class Calculator extends React.Component {
- - {this.keyMap = keyMap}}/> + + {this.keyMap = keyMap}} />
); } @@ -150,4 +148,5 @@ Calculator.propTypes = { onNewInput: PropTypes.func, onResultChange: PropTypes.func, onPaste: PropTypes.func, + inputStyle: PropTypes.object } diff --git a/src/lib/ResultPanel.js b/src/lib/ResultPanel.js index 7c690d0..f819679 100644 --- a/src/lib/ResultPanel.js +++ b/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 (
{finalLast}
- +
); }