[feature]: placeholder for each input (#122)

Author: yahayahu

README.md

@@ -88,6 +88,7 @@ const ReactCodeInput = dynamic(import('react-code-input'));
 | type                   | string | Only types like: `text`, `number`, `password` and `tel` are accepted.                                |
 | fields                 | number | Allowed amount of characters to enter.                                                               |
 | value                  | string | Setting the value of code input field.                                                               |
+| placeholder            | string | Setting the placeholder of code input field.                                                         |
 | name                   | string | Setting the name of component.                                                                       |
 | onChange               | func   | Function, which is called whenever there is a change of value in the input box.                      |
 | touch                  | func   | Marks the given fields as "touched" to show errors.                                                  |

src/ReactCodeInput.d.ts

@@ -17,6 +17,9 @@ export interface ReactCodeInputProps {
     // Allowed amount of characters to enter.
     fields?: number
 
+    // Placeholder of the inputs.
+    placeholder?: string
+
     // Value of the input
     value?: string
 

src/ReactCodeInput.js

@@ -237,7 +237,8 @@ class ReactCodeInput extends Component {
         autoFocus,
         autoComplete,
         pattern,
-        inputMode
+        inputMode,
+        placeholder
       } = this.props,
       { disabled, input, isValid, defaultInputStyle } = this.state,
       styles = {
@@ -299,6 +300,7 @@ class ReactCodeInput extends Component {
               data-valid={isValid}
               pattern={pattern}
               inputMode={inputMode}
+              placeholder={placeholder}
             />
           );
         })}
@@ -324,6 +326,7 @@ ReactCodeInput.defaultProps = {
 ReactCodeInput.propTypes = {
   type: PropTypes.oneOf(['text', 'number', 'password', 'tel']),
   fields: PropTypes.number,
+  placeholder: PropTypes.string,
   value: PropTypes.string,
   onChange: PropTypes.func,
   name: PropTypes.string,

src/ReactCodeInput.spec.js

@@ -2,7 +2,8 @@ import React from 'react';
 import CodeInputField from './ReactCodeInput.js';
 
 const numbers = '123456',
-  chars = '123FE3';
+  chars = '123FE3',
+  placeholder = '0';
 
 describe('CodeInputField', () => {
   test('renders without error', () => {
@@ -13,9 +14,10 @@ describe('CodeInputField', () => {
 
   test('renders field without any values', () => {
     const wrapper = shallow(<CodeInputField/>);
-
+    
     expect(wrapper.find('input')).toHaveLength(4);
     expect(wrapper.state().fields).toEqual(4);
+    expect(CodeInputField.defaultProps.placeholder).toBeUndefined();
     expect(wrapper.state().value).toEqual('');
     expect(wrapper.state().type).toEqual('text');
     expect(wrapper.state().input).toBeInstanceOf(Array);
@@ -40,12 +42,22 @@ describe('CodeInputField', () => {
     }
     expect(val.join('')).toEqual(chars);
   });
+  
+  test(`renders component with placeholder: ${placeholder}`, () => {
+    const wrapper = render(<CodeInputField value={numbers} fields={6} type="number" placeholder={placeholder}/>),
+      val = [];
+    for (let i = 0; i < numbers.length; i += 1) {
+      val.push(wrapper.find('input')[i].attribs.value);
+    }
+    expect(val.join('')).toEqual(numbers);
+  });
 
   test('mount component with props: "fields={6}"', () => {
     const wrapper = mount(<CodeInputField fields={6}/>);
     expect(wrapper.props().fields).toEqual(6);
   });
 
+
   test('should have 4 input felds', () => {
     const wrapper = shallow(<CodeInputField/>);
     expect(wrapper.find('input')).toHaveLength(4);

src/ReactCodeInput.stories.js

@@ -1,9 +1,8 @@
-import React from 'react';
-
-import { storiesOf }                                        from '@storybook/react';
-import { action }                                           from '@storybook/addon-actions';
-import { withKnobs, boolean, object, text, select, number } from '@storybook/addon-knobs';
-import { withInfo }                                         from '@storybook/addon-info';
+import React                                                       from 'react';
+import { storiesOf }                                               from '@storybook/react';
+import { action }                                                  from '@storybook/addon-actions';
+import { array, withKnobs, boolean, object, text, select, number } from '@storybook/addon-knobs';
+import { withInfo }                                                from '@storybook/addon-info';
 
 import ReactCodeInput from './ReactCodeInput.js';
 import CodeInputField from "./ReactCodeInput";
@@ -86,6 +85,9 @@ propVariantStories
   .add('fields', () =>
     <ReactCodeInput fields={number('fields', 6)} />
   )
+  .add('placeholder', () =>
+    <ReactCodeInput placeholder={text('placeholder', '0')} />
+  )
   .add('inputStyle', () =>
     <ReactCodeInput inputStyle={object('inputStyle', inputStyle)} />
   )