CONTEXT: I have this matrix which is mainly made of some instances of a react component i’ve created earlier called “Cell”. Each time a cell is clicked it changes it’s state.color to red.
Problem: Looking for an approach to turn them red onMouseDown ( as you’re making a square translucent selection in windows explorer) besides onClick
Cell.js :
import * as React from 'react';
class Cell extends React.Component {
state = {
color: '#bbdefb',
};
onChange = () => {
this.setState({color: 'red'});
};
render() {
return (
<div
style={{
backgroundColor: this.state.color,
display: 'inline-block',
width: 20,
height: 20,
opacity: '60%',
outlineStyle: 'solid',
inlineStyle: 'solid',
outlineWidth: '1px',
inlineWidth: '1px',
outlineColor: '#1a237e',
}}
onClick={this.onChange}
/>
);
}
}
export default Cell;Main.js :
import {Box} from '@mui/material';
import * as React from 'react';
import MathGrid from '../../core/Components/MathGrid/MathGrid';
import Cell from './Cell';
// =====================================================================================================================
// D E C L A R A T I O N S
// =====================================================================================================================
const ROWS = 7;
const COLUMNS = 10;
const PADDING = 8;
const SX = {
root: {
width: '100%',
height: '100%',
},
footer: {
position: 'absolute',
backgroundColor: 'red',
display: 'flex',
left: PADDING,
top: '70%',
right: PADDING,
height: '100px',
},
counter: {
position: 'absolute',
top: '50%',
left: '50%',
},
matrix: {
position: 'absolute',
left: PADDING,
top: 0,
right: PADDING,
bottom: PADDING,
},
math1: {
height: '100%',
width: '100%',
backgroundPosition: 'calc(50% + 10px) calc(50% + 10px)',
pointerEvents: 'none',
},
};
// =====================================================================================================================
// C O M P O N E N T
// =====================================================================================================================
const generateMatrix = () => {
return [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
};
class Main extends React.PureComponent {
state = {matrix: generateMatrix()};
render() {
const matrix = this.state.matrix;
const rows = [];
for (let i = 0; i < matrix.length; i++) {
for (let j = 1; j < matrix.length / 2; j++) {
if (i > j) {
rows.push(this.renderRow(matrix[i], i));
}
}
}
return (
<Box sx={SX.root}>
<Box sx={SX.matrix}>{rows}</Box>
</Box>
);
}
// -----------------------------------------------------------------------------------------------------------------
// I N T E R N A L
// -----------------------------------------------------------------------------------------------------------------
renderRow = (row, index) => {
console.log(row);
const cells = [];
for (let i = 0; i < row.length; i++) {
cells.push(<Cell key={i} />);
}
return <Box key={index}>{cells}</Box>;
};
}
// =====================================================================================================================
// E X P O R T
// =====================================================================================================================
export default Main;