add defaultValue

gpietro · Jan 25, 2018 · e869088 · e869088
1 parent 03c07fb
commit e869088
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,12 @@
 ![Logo of the project](https://raw.githubusercontent.com/gpietro/react-numpad/master/logo.png)
 
 # React numpad
+
 A numpad for number, date and time, built with and for React.
 It's written with the extensibility in mind. The idea of this project is to cover the majority of input types in a form.
 
 ## Installation
+
 To use React-Numpad, install it from NPM and include it in your own React build process (using Webpack, etc).
 
 ```shell
@@ -18,83 +20,100 @@ import NumPad from 'react-numpad';
 ```
 
 ## Usage
+
 React-NumPad generates an input field containing the selected value, so you can submit it as part of a standard form. You can also listen for changes with the onChange event property.
 When the value is changed, onChange(selectedValue) will fire.
 
 React-NumPad is built based on a "main" component (NumPad.js). Following the higher-order component technique, is possible to create new components by simply overriding few common properties.
 
 ### NumPad.Number
+
 Input field for numeric value. There are also **PositiveNumber**, **IntegerNumber**, **PositiveIntegerNumber** components with the same properties.
 
 ```shell
-<NumPad.Number 
-    onChange={(value) => { console.log('value', value)}} 
+<NumPad.Number
+    onChange={(value) => { console.log('value', value)}}
     label={'Total'}
     placeholder={'my placeholder'}
     theme={'orange'}
+    defaultValue={100}
 />
 ```
 
 ### NumPad.Time
+
 Input field with time format.
+
 ```shell
-<NumPad.Time 
+<NumPad.Time
     onChange={(value) => { console.log('value', value)}}
-    label={'Ora di partenza'} 
+    label={'Ora di partenza'}
     placeholder={'my placeholder'}
     theme={'blackAndWhite'}
 />
 ```
 
 ### NumPad.Date
+
 Input field with date format.
+
 ```shell
-<NumPad.Date 
-    onChange={(value) => { console.log('value', value)}} 
-    label={'Data di nascita di partenza'} 
+<NumPad.Date
+    onChange={(value) => { console.log('value', value)}}
+    label={'Data di nascita di partenza'}
 />
 ```
 
 ### NumPad.DateTime
+
 Input field with date and time format.
+
 ```shell
-<NumPad.DateTime 
-    onChange={(value) => { console.log('value', value)}} 
+<NumPad.DateTime
+    onChange={(value) => { console.log('value', value)}}
     dateFormat={'DD.MM.YYYY'}
     label={'Data e ora di partenza'}
+    defaultValue={'10.02.2018 10:00'}
 />
 ```
 
 ## Properties
-| Property | Type | Default | Description
-:---|:---|:---|:---
-| `onChange` | function | **required** | function called when value change and is valid. |
-| `placeholder` | string | none | text to display as input placeholder. |
-| `label` | string | none | text to display as input label. |
-| `theme` | string | 'blue' | name for selecting a different theme. |
-| `dateFormat` | string | 'MM/DD/YYYY' | specify a different date format. |
-| `inputButtonContent` | object | none | override input button content |
+
+| Property             | Type             | Default      | Description                                     |
+| :------------------- | :--------------- | :----------- | :---------------------------------------------- |
+| `onChange`           | function         | **required** | function called when value change and is valid. |
+| `placeholder`        | string           | none         | text to display as input placeholder.           |
+| `label`              | string           | none         | text to display as input label.                 |
+| `theme`              | string           | 'blue'       | name for selecting a different theme.           |
+| `dateFormat`         | string           | 'MM/DD/YYYY' | specify a different date format.                |
+| `defaultValue`       | string or number | none         | default value for the input field.              |
+| `inputButtonContent` | object           | none         | override input button content                   |
 
 ## Custom input field
+
 It's possible to override the InputField component by passing your input field as child component of NumPad
+
 ```shell
 <NumPad.Number>
     <MyCustomInputField />
 </NumPad.Number>
 ```
 
 ## Themes
-There are themes available, in /styles folder, you can choose from: **blue**, **orange**, **blackAndWhite**. 
+
+There are themes available, in /styles folder, you can choose from: **blue**, **orange**, **blackAndWhite**.
 Any css style is customizable using styled components.
 To install styled-components
+
 ```shell
     npm install styled-components
 ```
 
 Usage example
+
 ```shell
     import styled from 'styled-components';
-    import {NumPad} from 'react-numpad';    
+    import {NumPad} from 'react-numpad';
 
     const Styled = styled(NumPad)`
         ${InputField} {
@@ -104,9 +123,11 @@ Usage example
 ```
 
 ## Demo / Examples
+
 Live demo: [gpietro.github.io/docs](https://gpietro.github.io/docs)
 
 ## Developing
+
 ```shell
 git clone [email protected]:gpietro/react-numpad.git
 cd react-numpad/
@@ -118,17 +139,20 @@ npm run storybook
 Visit localhost:6006 to see the NumPad components available so far.
 
 ### Build
+
 ```shell
 npm run build
 ```
 
 A bundle will be created in the dist directory.
 
 ## Contribute
+
 If you'd like to contribute, please fork the repository and use a feature
 branch. Pull requests are warmly welcome.
 
 See our [CONTRIBUTING.md](https://github.com/gpietro/react-numpad/blob/master/CONTRIBUTING.md) for information on how to contribute.
 
 ## License
-MIT Licensed. Copyright (c) Pietro Ghezzi 2017.
+
+MIT Licensed. Copyright (c) Pietro Ghezzi 2017.
diff --git a/lib/components/NumPad.js b/lib/components/NumPad.js
@@ -12,7 +12,10 @@ export default ({ validation, displayRule, inputButtonContent, keyValid }) => {
   class NumPad extends Component {
     constructor(props) {
       super(props);
-      this.state = { show: false, value: '' };
+      this.state = {
+        show: false,
+        value: props.defaultValue.toString().replace(/\D+/g, ''),
+      };
       this.toggleKeyPad = this.toggleKeyPad.bind(this);
       this.confirm = this.confirm.bind(this);
     }
@@ -63,6 +66,7 @@ export default ({ validation, displayRule, inputButtonContent, keyValid }) => {
                     validation={validation}
                     keyValid={keyValid}
                     label={label}
+                    value={value}
                     {...this.props}
                   />
                 </Wrapper>
@@ -81,6 +85,7 @@ export default ({ validation, displayRule, inputButtonContent, keyValid }) => {
     label: undefined,
     theme: undefined,
     dateFormat: undefined,
+    defaultValue: '',
   };
 
   NumPad.propTypes = {
@@ -91,6 +96,7 @@ export default ({ validation, displayRule, inputButtonContent, keyValid }) => {
     label: PropTypes.string,
     theme: PropTypes.string,
     dateFormat: PropTypes.string,
+    defaultValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   };
 
   return NumPad;

diff --git a/lib/elements/InputField.js b/lib/elements/InputField.js
@@ -34,6 +34,7 @@ const InputField = ({
                 placeholder,
                 value: value ? displayRule(value, dateFormat) : value,
                 disabled,
+                readOnly: true,
               }
             : {}
         )

diff --git a/lib/elements/KeyPad.js b/lib/elements/KeyPad.js
@@ -85,7 +85,8 @@ const Keys = styled.div`
 class KeyPad extends Component {
   constructor(props) {
     super(props);
-    this.state = { input: '' };
+    console.log('props', props);
+    this.state = { input: props.value };
     this.handleClick = this.handleClick.bind(this);
     this.keyDown = this.keyDown.bind(this);
     this.cancelLastInsert = this.cancelLastInsert.bind(this);
@@ -207,12 +208,14 @@ KeyPad.propTypes = {
   validation: PropTypes.func.isRequired,
   keyValid: PropTypes.func.isRequired,
   dateFormat: PropTypes.string,
+  value: PropTypes.string,
 };
 
 KeyPad.defaultProps = {
   label: undefined,
   theme: undefined,
   dateFormat: 'MM/DD/YYYY',
+  value: '',
 };
 
 export default onClickOutside(KeyPad);
diff --git a/stories/index.js b/stories/index.js
@@ -18,6 +18,7 @@ storiesOf('Components', module)
           console.log('value', value);
         }}
         label="Totale"
+        defaultValue={10}
       >
         <input placeholder="test" type="number" />
         <button>ciao</button>
@@ -62,6 +63,7 @@ storiesOf('Components', module)
       placeholder="HH:mm"
       label="Sveglia"
       onChange={value => console.log('changed', value)}
+      defaultValue={'12:33'}
     />,
     <NumPad.Time
       key="time-2"
@@ -92,6 +94,7 @@ storiesOf('Components', module)
       dateFormat="DD.MM.YYYY"
       label="Data di nascita"
       onChange={value => console.log('changed', value)}
+      defaultValue={'28.06.1986'}
     />,
     <LoremIpsum key="lorem" />,
   ])
@@ -105,6 +108,7 @@ storiesOf('Components', module)
       key="date-2"
       dateFormat="DD.MM.YYYY"
       onChange={value => console.log('changed', value)}
+      defaultValue={'28.06.1986 10:00'}
     />,
     <LoremIpsum key="lorem" />,
   ])