This commit is contained in:
fantasticit 2022-12-17 19:37:33 +08:00
parent d25ad50117
commit ecf2d8ec06
2 changed files with 19 additions and 15 deletions

View File

@ -1,11 +1,10 @@
import React, { MouseEventHandler } from 'react';
type CellProperties = {
active: boolean;
hover: boolean;
disabled: boolean;
cellSize: number;
onClick: MouseEventHandler<HTMLDivElement>;
onMouseDown: MouseEventHandler<HTMLDivElement>;
onMouseEnter: MouseEventHandler<HTMLDivElement>;
styles: Record<string, React.CSSProperties>;
id: string;
@ -38,7 +37,7 @@ const getMergedStyle = (baseStyles, styles, styleClass) => ({
...(styles && styles[styleClass] ? styles[styleClass] : {}),
});
export const GridCell = ({ active, hover, disabled, onClick, onMouseEnter, cellSize, styles, id }: CellProperties) => {
export const GridCell = ({ hover, disabled, onMouseDown, onMouseEnter, cellSize, styles, id }: CellProperties) => {
const baseStyles = getBaseStyles(cellSize);
const cellStyles = {
cell: getMergedStyle(baseStyles, styles, 'cell'),
@ -52,11 +51,10 @@ export const GridCell = ({ active, hover, disabled, onClick, onMouseEnter, cellS
id={id}
style={{
...cellStyles.cell,
...(active && cellStyles.active),
...(hover && cellStyles.hover),
...(!active && disabled && cellStyles.disabled),
...(disabled && cellStyles.disabled),
}}
onClick={onClick}
onMouseDown={onMouseDown}
onMouseEnter={onMouseEnter}
/>
);

View File

@ -44,10 +44,6 @@ export const GridSelect = ({
cellSize = 16,
styles,
}: RegionSelectionProps) => {
const [activeCell, setActiveCell] = useState<CoordsType>({
x: -1,
y: -1,
});
const [hoverCell, setHoverCell] = useState<CoordsType>(null);
const onClick = useCallback(
@ -60,6 +56,15 @@ export const GridSelect = ({
[onSelect]
);
const onClickPanel = useCallback(() => {
if (hoverCell.x + 1 > 0 && hoverCell.y + 1 > 0) {
onSelect({
rows: hoverCell.y + 1,
cols: hoverCell.x + 1,
});
}
}, [hoverCell, onSelect]);
const onHover = useCallback(({ x, y, isCellDisabled }) => {
if (isCellDisabled) {
return setHoverCell(null);
@ -71,16 +76,17 @@ export const GridSelect = ({
const cells = [];
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
const isActive = x <= activeCell.x && y <= activeCell.y;
const isHover = hoverCell && x <= hoverCell.x && y <= hoverCell.y;
const isCellDisabled = disabled;
cells.push(
<GridCell
id={x + '-' + y}
key={x + '-' + y}
onClick={() => onClick({ x, y, isCellDisabled })}
onMouseDown={(e) => {
e.stopPropagation();
onClick({ x, y, isCellDisabled });
}}
onMouseEnter={onHover.bind(null, { x, y, isCellDisabled })}
active={isActive}
hover={isHover}
disabled={isCellDisabled}
styles={styles}
@ -90,12 +96,12 @@ export const GridSelect = ({
}
}
return cells;
}, [rows, cols, disabled, activeCell.x, activeCell.y, cellSize, hoverCell, styles, onClick, onHover]);
}, [rows, cols, disabled, cellSize, hoverCell, styles, onClick, onHover]);
const baseStyles = useMemo(() => getBaseStyles(cols, cellSize), [cols, cellSize]);
return (
<div>
<div onMouseDown={onClickPanel}>
<div
style={
{