Mute disabled board row control icons

This commit is contained in:
Mike Cao 2026-02-14 22:52:50 -08:00
parent 1ef7909dbb
commit 6d4d7a3121

View file

@ -37,6 +37,9 @@ export function BoardEditRow({
}) { }) {
const { board, updateBoard } = useBoard(); const { board, updateBoard } = useBoard();
const [showActions, setShowActions] = useState(false); const [showActions, setShowActions] = useState(false);
const moveUpDisabled = rowIndex === 0;
const addColumnDisabled = columns.length >= MAX_COLUMNS;
const moveDownDisabled = rowIndex === rowCount - 1;
const handleGroupRef = (ref: GroupImperativeHandle | null) => { const handleGroupRef = (ref: GroupImperativeHandle | null) => {
onRegisterRef(rowId, ref); onRegisterRef(rowId, ref);
@ -146,8 +149,13 @@ export function BoardEditRow({
style={{ transform: 'translateY(-50%)' }} style={{ transform: 'translateY(-50%)' }}
> >
<TooltipTrigger delay={0}> <TooltipTrigger delay={0}>
<Button variant="outline" onPress={() => onMoveUp(rowId)} isDisabled={rowIndex === 0}> <Button
<Icon rotate={180}> variant="outline"
onPress={() => onMoveUp(rowId)}
isDisabled={moveUpDisabled}
style={moveUpDisabled ? { pointerEvents: 'none' } : undefined}
>
<Icon rotate={180} color={moveUpDisabled ? 'muted' : undefined}>
<ChevronDown /> <ChevronDown />
</Icon> </Icon>
</Button> </Button>
@ -157,9 +165,10 @@ export function BoardEditRow({
<Button <Button
variant="outline" variant="outline"
onPress={handleAddColumn} onPress={handleAddColumn}
isDisabled={columns.length >= MAX_COLUMNS} isDisabled={addColumnDisabled}
style={addColumnDisabled ? { pointerEvents: 'none' } : undefined}
> >
<Icon> <Icon color={addColumnDisabled ? 'muted' : undefined}>
<Plus /> <Plus />
</Icon> </Icon>
</Button> </Button>
@ -177,9 +186,10 @@ export function BoardEditRow({
<Button <Button
variant="outline" variant="outline"
onPress={() => onMoveDown(rowId)} onPress={() => onMoveDown(rowId)}
isDisabled={rowIndex === rowCount - 1} isDisabled={moveDownDisabled}
style={moveDownDisabled ? { pointerEvents: 'none' } : undefined}
> >
<Icon> <Icon color={moveDownDisabled ? 'muted' : undefined}>
<ChevronDown /> <ChevronDown />
</Icon> </Icon>
</Button> </Button>