Feature/support decimal (#3)

* feat(support-decimal): support decimal point in the numpad

* feat(readme): add readme with screenshot

Author: nutboltu

README.md

@@ -1,3 +1,42 @@
 # react-random-numpad
 
-A random genarated number pad for react
+[![dependencies Status](https://david-dm.org/nutboltu/react-random-numpad/status.svg)](https://david-dm.org/nutboltu/react-random-numpad)  [![Build Status](https://travis-ci.org/nutboltu/react-random-numpad.svg?branch=master)](https://travis-ci.org/nutboltu/react-random-numpad) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
+
+A random genarated number pad for react
+
+![Screenshot](/docs/react-random-numpad.png)
+
+See [Demo and Documentation](https://nutboltu.github.io/react-random-numpad).
+
+## Props
+
+The component takes the following props.
+
+| Prop              | Type       | Default | Description |
+|-------------------|------------|-------------|-------------|
+| `className`       | string  | - | Additional classnames for the component |
+| `supportDecimal`  | boolean | false| Include decimal point support in the numpad|
+| `onChange`        | _function_ | - |Callback function to invoke when a number is pressed |
+
+## Installation
+
+```bash
+npm install react-random-numpad --save
+```
+
+## Usage
+
+```javascript
+import RandomNumpad from "react-random-numpad";
+import "react-random-numpad/dist/style.min.css";
+
+<RandomNumpad
+  supportDecimal={false}
+  onChange={() => {}}
+  classNames="custom-class"
+/>
+```
+
+## License
+
+MIT Licensed. Copyright (c) Farhad Yasir 2019.

docs/react-random-numpad.png

@@ -4,5 +4,6 @@ export interface IRandomNumpadState {
 
 export interface IRandomNumpadProps {
   className?: string;
+  supportDecimal?: boolean;
   onChange: (value: string) => void;
 }

src/@types/index.d.ts

@@ -19,14 +19,20 @@ class RandomNumpad
     this.randomArray = shuffle([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]);
   }
 
-  public addNumber = (value: number) => {
+  public addNumber = (value: number | string) => {
     this.setState((prevState: IRandomNumpadState) => ({
       input: prevState.input.concat(value.toString()),
     }), () => {
       this.props.onChange(this.state.input);
     });
   }
 
+  public addDecimal = () => {
+    if (this.state.input.indexOf('.') < 0) {
+      this.addNumber('.');
+    }
+  }
+
   public removeNumber = () => {
     this.setState((prevState: IRandomNumpadState) => ({
       input: prevState.input.slice(0, prevState.input.length - 1),
@@ -44,7 +50,7 @@ class RandomNumpad
   }
 
   public render(): React.ReactNode {
-    const { className } = this.props;
+    const { className, supportDecimal } = this.props;
     return (
       <div className={`${className} ${styles.numpad}`}>
         {
@@ -58,8 +64,11 @@ class RandomNumpad
             </button>
           ))
         }
+        {
+          supportDecimal &&
+          <button className={styles.buttonKey} onClick={this.addDecimal}> . </button>
+        }
         <button className={styles.buttonKey} onClick={this.removeNumber}> X </button>
-        <button className={styles.buttonKey} onClick={this.clearNumber}> Cancel </button>
       </div>
     );
   }

src/components/RandomNumpad.tsx

@@ -5,11 +5,15 @@ import { shallow } from 'enzyme';
 import RandomNumpad from '../RandomNumpad';
 
 describe('RandomNumpad Component Suite', () => {
-  const getComponent = () => shallow(<RandomNumpad onChange={spy()} />);
-
   describe('FocusOnScroll Component', () => {
+    test('should render 11 buttons', () => {
+      const component = shallow(<RandomNumpad onChange={spy()} />);
+      const buttonComponents = component.find('button');
+      expect(buttonComponents).toHaveLength(11);
+    });
     test('should render 12 buttons', () => {
-      const buttonComponents = getComponent().find('button');
+      const component = shallow(<RandomNumpad onChange={spy()} supportDecimal />);
+      const buttonComponents = component.find('button');
       expect(buttonComponents).toHaveLength(12);
     });
   });

src/components/__tests__/RandomNumpad.spec.tsx

@@ -3,14 +3,14 @@
   width: 40px;
   background-color: #ddd;
   display: flex;
-  align-items: center;
   justify-content: center;
   cursor: pointer;
-  flex: 1 0 30%;
+  flex: 0 0 30%;
   margin: 5px;
 }
 
 .numpad {
   display: flex;
   flex-wrap: wrap;
+  justify-content: flex-end;
 }

src/components/styles.css

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs/react';
+import * as styles from './styles.css';
+
+import RandomNumpad from '../components/RandomNumpad';
+
+const stories = storiesOf('RandomNumpad', module);
+
+stories.addDecorator(withKnobs);
+
+class StoryComponent extends React.PureComponent<{}, { value: string }> {
+  public state = {
+    value: '',
+  };
+
+  public onChange = (value: string) => {
+    this.setState({
+      value,
+    });
+  }
+
+  public render(): React.ReactNode {
+    return (
+      <div className={styles.storyComponent}>
+        <input value={this.state.value} className={styles.input}/>
+        <RandomNumpad onChange={this.onChange} className='custom-class' supportDecimal />
+      </div>
+    );
+  }
+}
+
+stories.add('With Decimal Support', (() => {
+  return (
+    <StoryComponent />
+   );
+}));