fcc-challenges/calculator-react/src/Decimal.js

76 lines
2.4 KiB
JavaScript

import React from 'react';
import { connect } from "react-redux";
import { colors,makeInputAndOperationsStrings } from './globals'
import { inputStringAction } from "./actions/inputStringAction";
import { operationStringAction } from "./actions/operationStringAction";
const mapStateToProps = (state) => ({ ...state });
const mapDispatchToProps = (dispatch) => ({
inputStringAction: (inputString) => dispatch(inputStringAction(inputString)),
operationStringAction: (operationString) => dispatch(operationStringAction(operationString)),
});
class Decimal extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.handleMouseEvent = this.handleMouseEvent.bind(this);
this.state = {
backgroundColor: colors.secondColor,
};
};
handleClick() {
const [inputString,operationString] = makeInputAndOperationsStrings(this.props.inputString,this.props.operationString,'.');
if (inputString !== this.props.inputString) {
this.props.inputStringAction(inputString);
}
if (operationString !== this.props.operationString) {
this.props.operationStringAction(operationString);
}
}
handleMouseEvent(e) {
if (e.type === 'mousedown' || e.type === 'touchstart') {
this.setState({backgroundColor: colors.firstColor});
} else if (e.type === 'mouseup' || e.type === 'touchend') {
this.setState({backgroundColor: colors.secondColor});
}
}
render() {
const width = this.props.innerWindowWidth;
const height = this.props.innerWindowHeight;
const style = {
gridColumnStart: 1,
gridColumnEnd: 2,
gridRowStart: 3,
gridRowEnd: 4,
borderRight: '3px solid black',
borderBottom: '3px solid black',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
backgroundColor: this.state.backgroundColor,
};
if (height > width) {
style['gridRowStart'] = 6;
style['gridRowEnd'] = 7;
style['gridColumnStart'] = 3;
style['gridColumnEnd'] = 4;
style['borderBottom'] = 'unset';
}
return (
<div id="decimal" style={style} className='clickable' onClick={this.handleClick}
onTouchStart={this.handleMouseEvent} onTouchEnd={this.handleMouseEvent}
onMouseDown={this.handleMouseEvent} onMouseUp={this.handleMouseEvent}>.</div>
);
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Decimal);