From c0e6a8919752443b5fa783df803a83fa9024c4e7 Mon Sep 17 00:00:00 2001 From: Sergio Clemente Date: Mon, 19 Nov 2018 12:55:48 -0200 Subject: [PATCH 1/2] Changes to be committed: modified: README.md new file: lib/images/icon_enter@2x.png new file: lib/images/icon_enter@3x.png new file: lib/images/icon_space@2x.png new file: lib/images/icon_space@3x.png modified: lib/index.js I created a new props for the package, number-pad-comma. This layout add one more row on component and change the last line. With this layout after number we see : dot(.) Zero(0) and comma(,) / backspace, space and return. I've be these necessity in one project and i thought it would be good put this in the main project. --- README.md | 2 +- lib/images/icon_enter@2x.png | Bin 0 -> 217 bytes lib/images/icon_enter@3x.png | Bin 0 -> 217 bytes lib/images/icon_space@2x.png | Bin 0 -> 108 bytes lib/images/icon_space@3x.png | Bin 0 -> 108 bytes lib/index.js | 440 +++++++++++++++++++++-------------- 6 files changed, 262 insertions(+), 180 deletions(-) create mode 100755 lib/images/icon_enter@2x.png create mode 100755 lib/images/icon_enter@3x.png create mode 100755 lib/images/icon_space@2x.png create mode 100755 lib/images/icon_space@3x.png 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 0000000000000000000000000000000000000000..55a06e7669acdf38a7b1077778d2425fe2013071 GIT binary patch literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpUt1)eUBAr*{ouPX922MDk|ESKR~ zmcBaQ`Sm?t!Il{m}|Ghd%qK4Ih6p z+~3o%;u))p=np2@nH^@+ZYP|8Bf@@t8Y8d Otqh*7elF{r5}E*acu=nZ literal 0 HcmV?d00001 diff --git a/lib/images/icon_enter@3x.png b/lib/images/icon_enter@3x.png new file mode 100755 index 0000000000000000000000000000000000000000..55a06e7669acdf38a7b1077778d2425fe2013071 GIT binary patch literal 217 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpUt1)eUBAr*{ouPX922MDk|ESKR~ zmcBaQ`Sm?t!Il{m}|Ghd%qK4Ih6p z+~3o%;u))p=np2@nH^@+ZYP|8Bf@@t8Y8d Otqh*7elF{r5}E*acu=nZ literal 0 HcmV?d00001 diff --git a/lib/images/icon_space@2x.png b/lib/images/icon_space@2x.png new file mode 100755 index 0000000000000000000000000000000000000000..ae1815f03f49062b800427b3079ea9359d719d1b GIT binary patch literal 108 zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCV^0^ykP61P=QnaPFmNzCevgl; zj^-A9r%?I>DEnYTPW5+nhXXwfj7-za)f|9A4D6!k=I(do+1-*3;(5CIxvXDEnYTPW5+nhXXwfj7-za)f|9A4D6!k=I(do+1-*3;(5CIxvX{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: () => {} }; From 499e1eef8c419d4999331da11fe8c2fe4a688bc8 Mon Sep 17 00:00:00 2001 From: Sergio Clemente Date: Mon, 19 Nov 2018 13:19:55 -0200 Subject: [PATCH 2/2] Update index.js Add a button before Zero. --- lib/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/lib/index.js b/lib/index.js index 36638e1..b6f7485 100644 --- a/lib/index.js +++ b/lib/index.js @@ -257,6 +257,17 @@ class Keyboard extends Component { 0 + + + + + + }