diff --git a/README.md b/README.md
index fb64682..929bb00 100644
--- a/README.md
+++ b/README.md
@@ -102,7 +102,7 @@ class App extends React.Component {
## Props
#### keyboardType
-Type: enum('number-pad', 'decimal-pad');
+Type: enum('number-pad', 'decimal-pad','number-pad-comma');
#### onKeyPress
Type: func
diff --git a/lib/images/icon_enter@2x.png b/lib/images/icon_enter@2x.png
new file mode 100755
index 0000000..55a06e7
Binary files /dev/null and b/lib/images/icon_enter@2x.png differ
diff --git a/lib/images/icon_enter@3x.png b/lib/images/icon_enter@3x.png
new file mode 100755
index 0000000..55a06e7
Binary files /dev/null and b/lib/images/icon_enter@3x.png differ
diff --git a/lib/images/icon_space@2x.png b/lib/images/icon_space@2x.png
new file mode 100755
index 0000000..ae1815f
Binary files /dev/null and b/lib/images/icon_space@2x.png differ
diff --git a/lib/images/icon_space@3x.png b/lib/images/icon_space@3x.png
new file mode 100755
index 0000000..ae1815f
Binary files /dev/null and b/lib/images/icon_space@3x.png differ
diff --git a/lib/index.js b/lib/index.js
index 281c45f..b6f7485 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -7,204 +7,297 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
- View, Text, Image, TouchableHighlight
+ View, Text, Image, TouchableHighlight
} from 'react-native';
import styles, {
- keyStyle, BG_COLOR
+ keyStyle, BG_COLOR
} from './styles';
const numberKeys = [
- [
- { mainText: '1', otherText: '' },
- { mainText: '2', otherText: 'ABC' },
- { mainText: '3', otherText: 'DEF' }
- ],
- [
- { mainText: '4', otherText: 'GHI' },
- { mainText: '5', otherText: 'JKL' },
- { mainText: '6', otherText: 'MNO' }
- ],
- [
- { mainText: '7', otherText: 'PQRS' },
- { mainText: '8', otherText: 'TUV' },
- { mainText: '9', otherText: 'WXYZ' }
- ]
+ [
+ { mainText: '1', otherText: '' },
+ { mainText: '2', otherText: '' },
+ { mainText: '3', otherText: '' }
+ ],
+ [
+ { mainText: '4', otherText: '' },
+ { mainText: '5', otherText: '' },
+ { mainText: '6', otherText: '' }
+ ],
+ [
+ { mainText: '7', otherText: '' },
+ { mainText: '8', otherText: '' },
+ { mainText: '9', otherText: '' }
+ ],
+
];
-
class Keyboard extends Component {
- constructor(props) {
- super(props);
- }
-
- _clearAll() {
- this.props.onClear();
- }
-
- _onPress(key) {
- if (key === '') {
- return;
-
- // delete key
- } else if (key === 'del') {
- this.props.onDelete();
-
- // number key
- } else {
- this.props.onKeyPress(key);
- }
- }
-
- _renderOtherText(key) {
- if (this.props.disableOtherText !== true) {
- return ({key.otherText});
- }
-
- return null;
- }
-
- _disableBorder() {
- if (this.props.disableBorder !== true) {
- return keyStyle.bd;
- }
-
- return keyStyle.border;
- }
-
- _disableClearButtonBackground() {
- if (this.props.disableClearButtonBackground !== true) {
- return keyStyle.bg_d2d5dc;
- }
-
- return keyStyle.bgLess;
- }
-
- _clearBtnUnderlayColor() {
- if (this.props.disableClearButtonBackground !== true) {
- return '#ffffff';
- }
-
- return '#d2d5dc';
- }
-
- _renderKey(key, index) {
- return (
-
-
- {key.mainText}
- {this._renderOtherText(key)}
-
-
- );
- }
-
- _renderNumberKeys() {
- return numberKeys.map((group, groupIndex) => {
- return (
-
- {group.map(this._renderKey.bind(this))}
-
- );
- });
- }
-
- _isDecimalPad() {
- return this.props.keyboardType === 'decimal-pad';
- }
-
- _renderDotKey() {
- if (this.props.disableDot !== true) {
- let dotNode = null,
- dotText = '';
- if (this._isDecimalPad()) {
- dotText = '.';
- dotNode = .;
- }
- return (
-
- {dotNode}
-
- );
- }
-
- return (
-
-
-
- );
- }
-
- render() {
- const props = this.props;
-
- return (
-
-
-
- {this._renderNumberKeys()}
-
-
- {this._renderDotKey()}
-
-
-
- 0
-
-
-
-
-
-
-
-
-
-
-
- );
- }
+ constructor(props) {
+ super(props);
+ }
+
+ _clearAll() {
+ this.props.onClear();
+ }
+
+ _onPress(key) {
+ if (key === '') {
+ return;
+
+ // delete key
+ } else if (key === 'del') {
+ this.props.onDelete();
+ // space key
+ } else if (key === 'space') {
+ this.props.onKeyPress(' ');
+ // enter key
+ } else if (key === 'enter') {
+ this.props.onKeyPress('\n');
+
+ // number key
+ } else {
+ this.props.onKeyPress(key);
+ }
+
+ }
+
+ _renderOtherText(key) {
+ if (this.props.disableOtherText !== true) {
+ return ({key.otherText});
+ }
+
+ return null;
+ }
+
+ _disableBorder() {
+ if (this.props.disableBorder !== true) {
+ return keyStyle.bd;
+ }
+
+ return keyStyle.border;
+ }
+
+ _disableClearButtonBackground() {
+ if (this.props.disableClearButtonBackground !== true) {
+ return keyStyle.bg_d2d5dc;
+ }
+
+ return keyStyle.bgLess;
+ }
+
+ _clearBtnUnderlayColor() {
+ if (this.props.disableClearButtonBackground !== true) {
+ return '#ffffff';
+ }
+
+ return '#d2d5dc';
+ }
+
+ _renderKey(key, index) {
+ return (
+
+
+ {key.mainText}
+ {this._renderOtherText(key)}
+
+
+ );
+ }
+
+ _renderNumberKeys() {
+ return numberKeys.map((group, groupIndex) => {
+ return (
+
+ {group.map(this._renderKey.bind(this))}
+
+ );
+ });
+ }
+
+ _isDecimalPad() {
+ return this.props.keyboardType === 'decimal-pad';
+ }
+
+ _renderDotKey() {
+ if (this.props.disableDot !== true) {
+ let dotNode = null,
+ dotText = '';
+ if (this._isDecimalPad()) {
+ dotText = '.';
+ dotNode = .;
+ }
+
+ return (
+
+ {dotNode}
+
+ );
+ }
+
+ return (
+
+
+
+ );
+ }
+
+ _isNumberPadWithComma(){
+ return this.props.keyboardType === 'number-pad-comma';
+ }
+
+ render() {
+ const props = this.props;
+
+ return (
+
+
+ {this._renderNumberKeys()}
+
+
+ {
+ (this.props.keyboardType === 'number-pad-comma')
+ ?
+
+
+
+
+ .
+
+
+
+
+
+ 0
+
+
+
+
+
+
+ ,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ :
+
+ {this._renderDotKey()}
+
+
+
+ 0
+
+
+
+
+
+
+
+
+
+
+ }
+
+
+
+
+
+ );
+ }
}
Keyboard.propTypes = {
- // 是否显示小数点符号
- keyboardType: PropTypes.oneOf(['number-pad', 'decimal-pad']),
- // 点击键盘按键
- onKeyPress: PropTypes.func,
- // 点击删除按钮
- onDelete: PropTypes.func,
- // 长按删除按钮
- onClear: PropTypes.func
+ // 是否显示小数点符号
+ keyboardType: PropTypes.oneOf(['number-pad', 'decimal-pad','number-pad-comma']),
+ // 点击键盘按键
+ onKeyPress: PropTypes.func,
+ // 点击删除按钮
+ onDelete: PropTypes.func,
+ // 长按删除按钮
+ onClear: PropTypes.func
};
Keyboard.defaultProps = {
- keyboardType: 'number-pad',
- onKeyPress: () => {},
- onDelete: () => {},
- onClear: () => {}
+ keyboardType: 'number-pad',
+ onKeyPress: () => {},
+ onDelete: () => {},
+ onClear: () => {}
};