gio
/
think
mirror of https://github.com/fantasticit/think.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

close #216

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/client/src/components/grid-select/grid-cell.tsx
View File

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

24
packages/client/src/components/grid-select/grid-select.tsx
View File

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