diff --git a/README.md b/README.md index f217218b..5f26d533 100644 --- 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,65 +20,79 @@ 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 - { console.log('value', value)}} + { console.log('value', value)}} label={'Total'} placeholder={'my placeholder'} theme={'orange'} + defaultValue={100} /> ``` ### NumPad.Time + Input field with time format. + ```shell - { 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 - { console.log('value', value)}} - label={'Data di nascita di partenza'} + { console.log('value', value)}} + label={'Data di nascita di partenza'} /> ``` ### NumPad.DateTime + Input field with date and time format. + ```shell - { console.log('value', 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 @@ -84,17 +100,20 @@ It's possible to override the InputField component by passing your input field a ``` ## 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 git@github.com:gpietro/react-numpad.git cd react-numpad/ @@ -118,6 +139,7 @@ npm run storybook Visit localhost:6006 to see the NumPad components available so far. ### Build + ```shell npm run build ``` @@ -125,10 +147,12 @@ 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. \ No newline at end of file + +MIT Licensed. Copyright (c) Pietro Ghezzi 2017. diff --git a/lib/components/NumPad.js b/lib/components/NumPad.js index 024bf6a0..7df8c2af 100644 --- 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} /> @@ -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 index 9b7328bb..f4712f91 100644 --- 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 index f744ce4e..92005d76 100644 --- 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 index ff58810c..84a2b472 100644 --- a/stories/index.js +++ b/stories/index.js @@ -18,6 +18,7 @@ storiesOf('Components', module) console.log('value', value); }} label="Totale" + defaultValue={10} > @@ -62,6 +63,7 @@ storiesOf('Components', module) placeholder="HH:mm" label="Sveglia" onChange={value => console.log('changed', value)} + defaultValue={'12:33'} />, console.log('changed', value)} + defaultValue={'28.06.1986'} />, , ]) @@ -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'} />, , ])