mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-24 10:27:10 +02:00
81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
|
import { useCallback } from 'react';
|
|
import Button, { ButtonLevel } from '../Button/Button';
|
|
import { MoveDirection } from './utils/movements';
|
|
import styled from 'styled-components';
|
|
|
|
const StyledRoot = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 5px;
|
|
background-color: ${props => props.theme.backgroundColor};
|
|
border-radius: 5px;
|
|
`;
|
|
|
|
const ButtonRow = styled.div`
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
`;
|
|
|
|
const EmptyButton = styled(Button)`
|
|
visibility: hidden;
|
|
`;
|
|
|
|
const ArrowButton = styled(Button)`
|
|
opacity: ${props => props.disabled ? 0.2 : 1};
|
|
`;
|
|
|
|
export interface MoveButtonClickEvent {
|
|
direction: MoveDirection;
|
|
itemKey: string;
|
|
}
|
|
|
|
interface Props {
|
|
onClick(event: MoveButtonClickEvent): void;
|
|
itemKey: string;
|
|
canMoveLeft: boolean;
|
|
canMoveRight: boolean;
|
|
canMoveUp: boolean;
|
|
canMoveDown: boolean;
|
|
}
|
|
|
|
export default function MoveButtons(props: Props) {
|
|
const onButtonClick = useCallback((direction: MoveDirection) => {
|
|
props.onClick({ direction, itemKey: props.itemKey });
|
|
}, [props.onClick, props.itemKey]);
|
|
|
|
function canMove(dir: MoveDirection) {
|
|
if (dir === MoveDirection.Up) return props.canMoveUp;
|
|
if (dir === MoveDirection.Down) return props.canMoveDown;
|
|
if (dir === MoveDirection.Left) return props.canMoveLeft;
|
|
if (dir === MoveDirection.Right) return props.canMoveRight;
|
|
throw new Error('Unreachable');
|
|
}
|
|
|
|
function renderButton(dir: MoveDirection) {
|
|
return <ArrowButton
|
|
disabled={!canMove(dir)}
|
|
level={ButtonLevel.Primary}
|
|
iconName={`fas fa-arrow-${dir}`}
|
|
onClick={() => onButtonClick(dir)}
|
|
/>;
|
|
}
|
|
|
|
return (
|
|
<StyledRoot>
|
|
<ButtonRow>
|
|
{renderButton(MoveDirection.Up)}
|
|
</ButtonRow>
|
|
<ButtonRow>
|
|
{renderButton(MoveDirection.Left)}
|
|
<EmptyButton iconName="fas fa-arrow-down" disabled={true}/>
|
|
{renderButton(MoveDirection.Right)}
|
|
</ButtonRow>
|
|
<ButtonRow>
|
|
{renderButton(MoveDirection.Down)}
|
|
</ButtonRow>
|
|
</StyledRoot>
|
|
);
|
|
}
|