ecency/ecency-mobile
1
1
Fork 0
mirror of https://github.com/ecency/ecency-mobile.git synced 2024-12-30 17:14:22 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactored numberPad

Browse Source
This commit is contained in:
u-e 2019-07-31 23:18:38 +03:00
parent 078b8ebe8f
commit e464b6af03
3 changed files with 39 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/dropdownButton/view/dropdownButtonStyles.js
View File

@ -19,11 +19,11 @@ export default EStyleSheet.create({
paddingTop: 10,
paddingBottom: 10,
minWidth: '$deviceWidth / 2',
borderColor: '$primaryGrayBackground',
borderColor: '$primaryWhiteLightBackground',
borderRadius: 5,
shadowOpacity: 0.3,
shadowColor: '$shadowColor',
backgroundColor: '$primaryBackgroundColor',
backgroundColor: '$primaryLightBackground',
maxHeight: '$deviceHeight / 2',
},
iconWrapper: {

8
src/components/numericKeyboard/views/numericKeyboardStyles.js
View File

@ -3,16 +3,16 @@ import EStyleSheet from 'react-native-extended-stylesheet';
export default EStyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
justifyContent: 'space-between',
width: '$deviceWidth / 1.8',
},
buttonGroup: {
width: '100%',
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
marginBottom: 30,
},
lastButtonGroup: {
width: '63%',
@ -27,8 +27,10 @@ export default EStyleSheet.create({
},
buttonWithoutBorder: {
borderWidth: 0,
backgroundColor: '$primaryWhiteLightBackground',
},
button: {
borderColor: 'rgba(53, 124, 230, 0.2)',
marginBottom: 10,
},
});

135
src/components/numericKeyboard/views/numericKeyboardView.js
View File

@ -1,110 +1,39 @@
import React, { PureComponent } from 'react';
import React from 'react';
import { View } from 'react-native';
import times from 'lodash/times';
import { CircularButton, IconButton } from '../../buttons';
import styles from './numericKeyboardStyles';
class NumericKeyboard extends PureComponent {
/* Props
* @prop { func } onPress - Function will trigger when any button clicked.
*/
constructor(props) {
super(props);
this.state = {};
}
// Component Life Cycles
// Component Functions
_handleOnPress = value => {
alert(value);
};
render() {
const { onPress } = this.props;
return (
<View style={styles.container}>
<View style={styles.buttonGroup}>
<CircularButton
style={styles.button}
text={1}
value={1}
onPress={value => onPress && onPress(value)}
/>
<CircularButton
style={styles.button}
text={2}
value={2}
onPress={value => onPress && onPress(value)}
/>
<CircularButton
style={styles.button}
text={3}
value={3}
onPress={value => onPress && onPress(value)}
/>
</View>
<View style={styles.buttonGroup}>
<CircularButton
style={styles.button}
text={4}
value={4}
onPress={value => onPress && onPress(value)}
/>
<CircularButton
style={styles.button}
text={5}
value={5}
onPress={value => onPress && onPress(value)}
/>
<CircularButton
style={styles.button}
text={6}
value={6}
onPress={value => onPress && onPress(value)}
/>
</View>
<View style={styles.buttonGroup}>
<CircularButton
style={styles.button}
text={7}
value={7}
onPress={value => onPress && onPress(value)}
/>
<CircularButton
style={styles.button}
text={8}
value={8}
onPress={value => onPress && onPress(value)}
/>
<CircularButton
style={styles.button}
text={9}
value={9}
onPress={value => onPress && onPress(value)}
/>
</View>
<View style={styles.lastButtonGroup}>
<CircularButton
style={styles.button}
text={0}
value={0}
onPress={value => onPress && onPress(value)}
/>
<IconButton
handleOnPress={() => onPress && onPress('clear')}
isCircle
buttonStyle={styles.buttonWithoutBorder}
style={styles.iconButton}
name="backspace"
/>
</View>
</View>
);
}
}
const NumericKeyboard = ({ onPress }) => (
<View style={styles.container}>
<View style={styles.buttonGroup}>
{times(9, i => (
<CircularButton
key={i}
style={styles.button}
text={i + 1}
value={i + 1}
onPress={onPress}
/>
))}
</View>
<View style={styles.lastButtonGroup}>
<CircularButton
style={styles.button}
text={0}
value={0}
onPress={value => onPress && onPress(value)}
/>
<IconButton
handleOnPress={() => onPress && onPress('clear')}
isCircle
buttonStyle={styles.buttonWithoutBorder}
style={styles.iconButton}
name="backspace"
/>
</View>
</View>
);
export default NumericKeyboard;