// React Native version of https://codepen.io/mjijackson/pen/xOzyGX
const { AppRegistry, StyleSheet, Text, TouchableHighlight, UIManager, View } = ReactNative
/**
* KeyboardInput
*/
class KeyboardInput extends React.Component {
handleKeyDown(event) {
if (this.props.onKeyDown)
this.props.onKeyDown(event)
}
componentDidMount() {
// Ah, auto-binding. I hardly knew ye.
this.handleKeyDown = this.handleKeyDown.bind(this)
document.addEventListener('keydown', this.handleKeyDown)
}
componentWillUnmount() {
document.removeEventListener('keydown', this.handleKeyDown)
}
render() {
return null
}
}
let counter = 0
/**
* CalculatorDisplay
*/
class CalculatorDisplay extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
scale: 1
}
}
handleTextLayout = (e) => {
const { scale } = this.state
const { width, x } = e.nativeEvent.layout
const maxWidth = width + x
const actualWidth = width / scale
const newScale = maxWidth / actualWidth
if (x < 0) {
this.setState({ scale: newScale })
} else if (x > width) {
this.setState({ scale: 1 })
}
};
render() {
const { value } = this.props
const { scale } = this.state
const language = navigator.language || 'en-US'
let formattedValue = parseFloat(value).toLocaleString(language, {
useGrouping: true,
maximumFractionDigits: 6
})
const trailingZeros = value.match(/\.0*$/)
if (trailingZeros)
formattedValue += trailingZeros
return (
<View style={calculatorDisplayStyles.root}>
<Text
children={formattedValue}
onLayout={this.handleTextLayout}
style={[
calculatorDisplayStyles.text,
{ transform: [ { scale } ] }
]}
/>
</View>
)
}
}
const calculatorDisplayStyles = StyleSheet.create({
root: {
backgroundColor: '#1c191c',
flex: 1,
justifyContent: 'center'
},
text: {
alignSelf: 'flex-end',
color: 'white',
//lineHeight: 130,
fontSize: '6em',
paddingHorizontal: 30,
//position: 'absolute',
right: 0,
transformOrigin: 'right'
}
})
/**
* CalculatorKey
*/
class CalculatorKey extends React.Component {
render() {
const { children, onPress, style, textStyle } = this.props
return (
<TouchableHighlight
accessibilityRole="button"
onPress={onPress}
style={[
calculatorKeyStyles.root,
style
]}
underlayColor='rgba(0,0,0,0.25)'
>
<Text
children={children}
style={[
calculatorKeyStyles.text,
textStyle
]}
/>
</TouchableHighlight>
)
}
}
const calculatorKeyStyles = StyleSheet.create({
root: {
width: 80,
height: 80,
borderTopWidth: 1,
borderTopColor: '#777',
borderTopStyle: 'solid',
borderRightWidth: 1,
borderRightColor: '#666',
borderTopStyle: 'solid',
outline: 'none'
},
text: {
lineHeight: 80,
textAlign: 'center'
}
})
const CalculatorOperations = {
'/': (prevValue, nextValue) => prevValue / nextValue,
'*': (prevValue, nextValue) => prevValue * nextValue,
'+': (prevValue, nextValue) => prevValue + nextValue,
'-': (prevValue, nextValue) => prevValue - nextValue,
'=': (prevValue, nextValue) => nextValue
}
/**
* Calculator
*/
class Calculator extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
value: null,
displayValue: '0',
operator: null,
waitingForOperand: false
}
}
clearAll() {
this.setState({
value: null,
displayValue: '0',
operator: null,
waitingForOperand: false
})
}
clearDisplay() {
this.setState({
displayValue: '0'
})
}
clearLastChar() {
const { displayValue } = this.state
this.setState({
displayValue: displayValue.substring(0, displayValue.length - 1) || '0'
})
}
toggleSign() {
const { displayValue } = this.state
const newValue = parseFloat(displayValue) * -1
this.setState({
displayValue: String(newValue)
})
}
inputPercent() {
const { displayValue } = this.state
const currentValue = parseFloat(displayValue)
if (currentValue === 0)
return
const fixedDigits = displayValue.replace(/^-?\d*\.?/, '')
const newValue = parseFloat(displayValue) / 100
this.setState({
displayValue: String(newValue.toFixed(fixedDigits.length + 2))
})
}
inputDot() {
const { displayValue } = this.state
if (!(/\./).test(displayValue)) {
this.setState({
displayValue: displayValue + '.',
waitingForOperand: false
})
}
}
inputDigit(digit) {
const { displayValue, waitingForOperand } = this.state
if (waitingForOperand) {
this.setState({
displayValue: String(digit),
waitingForOperand: false
})
} else {
this.setState({
displayValue: displayValue === '0' ? String(digit) : displayValue + digit
})
}
}
performOperation(nextOperator) {
const { value, displayValue, operator } = this.state
const inputValue = parseFloat(displayValue)
if (value == null) {
this.setState({
value: inputValue
})
} else if (operator) {
const currentValue = value || 0
const newValue = CalculatorOperations[operator](currentValue, inputValue)
this.setState({
value: newValue,
displayValue: String(newValue)
})
}
this.setState({
waitingForOperand: true,
operator: nextOperator
})
}
handleKeyDown(event) {
let { key } = event
if (key === 'Enter')
key = '='
if ((/\d/).test(key)) {
event.preventDefault()
this.inputDigit(parseInt(key, 10))
} else if (key in CalculatorOperations) {
event.preventDefault()
this.performOperation(key)
} else if (key === '.') {
event.preventDefault()
this.inputDot()
} else if (key === '%') {
event.preventDefault()
this.inputPercent()
} else if (key === 'Backspace') {
event.preventDefault()
this.clearLastChar()
} else if (key === 'Clear') {
event.preventDefault()
if (this.state.displayValue !== '0') {
this.clearDisplay()
} else {
this.clearAll()
}
}
}
render() {
const { displayValue } = this.state
const clearDisplay = displayValue !== '0'
const clearText = clearDisplay ? 'C' : 'AC'
return (
<View style={calculatorStyles.root}>
<KeyboardInput onKeyDown={event => this.handleKeyDown(event)}/>
<CalculatorDisplay value={displayValue}/>
<View style={calculatorStyles.keypad}>
<View style={calculatorStyles.inputKeys}>
<View style={calculatorStyles.functionKeys}>
<FunctionKey onPress={() => clearDisplay ? this.clearDisplay() : this.clearAll()}>{clearText}</FunctionKey>
<FunctionKey onPress={() => this.toggleSign()} style={calculatorStyles.keySign}>±</FunctionKey>
<FunctionKey onPress={() => this.inputPercent()} style={calculatorStyles.keyPercent}>%</FunctionKey>
</View>
<View style={calculatorStyles.digitKeys}>
<DigitKey onPress={() => this.inputDigit(0)} style={calculatorStyles.key0} textStyle={{ textAlign: 'left' }}>0</DigitKey>
<DigitKey onPress={() => this.inputDot()} style={calculatorStyles.keyDot} textStyle={calculatorStyles.keyDotText}>.</DigitKey>
<DigitKey onPress={() => this.inputDigit(1)}>1</DigitKey>
<DigitKey onPress={() => this.inputDigit(2)}>2</DigitKey>
<DigitKey onPress={() => this.inputDigit(3)}>3</DigitKey>
<DigitKey onPress={() => this.inputDigit(4)}>4</DigitKey>
<DigitKey onPress={() => this.inputDigit(5)}>5</DigitKey>
<DigitKey onPress={() => this.inputDigit(6)}>6</DigitKey>
<DigitKey onPress={() => this.inputDigit(7)}>7</DigitKey>
<DigitKey onPress={() => this.inputDigit(8)}>8</DigitKey>
<DigitKey onPress={() => this.inputDigit(9)}>9</DigitKey>
</View>
</View>
<View style={calculatorStyles.operatorKeys}>
<OperatorKey onPress={() => this.performOperation('/')}>÷</OperatorKey>
<OperatorKey onPress={() => this.performOperation('*')}>×</OperatorKey>
<OperatorKey onPress={() => this.performOperation('-')}>−</OperatorKey>
<OperatorKey onPress={() => this.performOperation('+')}>+</OperatorKey>
<OperatorKey onPress={() => this.performOperation('=')}>=</OperatorKey>
</View>
</View>
</View>
)
}
}
const DigitKey = (props) => (
<CalculatorKey
{...props}
style={[calculatorStyles.digitKey, props.style]}
textStyle={[calculatorStyles.digitKeyText, props.textStyle]}
/>
)
const FunctionKey = (props) => (
<CalculatorKey
{...props}
style={[calculatorStyles.functionKey, props.style]}
textStyle={[calculatorStyles.functionKeyText, props.textStyle]}
/>
)
const OperatorKey = (props) => (
<CalculatorKey
{...props}
style={[calculatorStyles.operatorKey, props.style]}
textStyle={[calculatorStyles.operatorKeyText, props.textStyle]}
/>
)
const calculatorStyles = StyleSheet.create({
root: {
width: 320,
height: 520,
backgroundColor: 'black',
boxShadow: '0px 0px 20px 0px #aaa'
},
keypad: {
height: 400,
flexDirection: 'row'
},
inputKeys: {
width: 240
},
calculatorKeyText: {
fontSize: '2em'
},
functionKeys: {
backgroundImage: 'linear-gradient(to bottom, rgba(202,202,204,1) 0%, rgba(196,194,204,1) 100%)',
flexDirection: 'row'
},
functionKey: {
fontSize: '2em'
},
digitKeys: {
backgroundColor: '#e0e0e7',
flexDirection: 'row',
flexWrap: 'wrap-reverse'
},
digitKeyText: {
fontSize: '2.25em'
},
operatorKeys: {
backgroundImage: 'linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%)'
},
operatorKey: {
borderRightWidth: 0
},
operatorKeyText: {
color: 'white',
fontSize: '3em'
},
keyMultiplyText: {
lineHeight: 50
},
key0: {
paddingLeft: 32,
width: 160
},
keyDot: {
overflow: 'hidden'
},
keyDotText: {
fontSize: '5em',
marginTop: -10
}
})
const CalculatorWrapper = () => (
<View style={{
alignItems: 'center',
justifyContent: 'center',
flex: 1
}}>
<Calculator />
</View>
)
AppRegistry.registerComponent('Calculator', () => CalculatorWrapper)
AppRegistry.runApplication(
'Calculator',
{ rootTag: document.getElementById('react-root') }
)
!
