85 lines
2 KiB
TypeScript
85 lines
2 KiB
TypeScript
import React from 'react';
|
|
import { POSITION_TOP, POSITION_BOTTOM } from 'react-svg-pan-zoom';
|
|
|
|
interface IToolbarButtonProps {
|
|
title: string
|
|
name: string
|
|
toolbarPosition: string
|
|
activeColor: string
|
|
onClick: (event: React.MouseEvent | React.TouchEvent) => void
|
|
active: boolean
|
|
children: JSX.Element | JSX.Element[]
|
|
}
|
|
|
|
interface IToolbarButtonState {
|
|
hover: boolean
|
|
}
|
|
|
|
export class ToolbarButton extends React.Component<IToolbarButtonProps, IToolbarButtonState> {
|
|
public state: IToolbarButtonState;
|
|
|
|
constructor(props: IToolbarButtonProps) {
|
|
super(props);
|
|
this.state = { hover: false };
|
|
}
|
|
|
|
change(event: (React.MouseEvent | React.TouchEvent)): void {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
|
|
switch (event.type) {
|
|
case 'mouseenter':
|
|
case 'touchstart':
|
|
this.setState({ hover: true });
|
|
break;
|
|
case 'mouseleave':
|
|
case 'touchend':
|
|
case 'touchcancel':
|
|
this.setState({ hover: false });
|
|
break;
|
|
default:
|
|
// noop
|
|
}
|
|
}
|
|
|
|
render(): JSX.Element {
|
|
const style = {
|
|
display: 'block',
|
|
width: '24px',
|
|
height: '24px',
|
|
margin: [POSITION_TOP, POSITION_BOTTOM].includes(this.props.toolbarPosition)
|
|
? '2px 1px'
|
|
: '1px 2px',
|
|
color: this.props.active || this.state.hover
|
|
? this.props.activeColor
|
|
: '#FFF',
|
|
transition: 'color 200ms ease',
|
|
background: 'none',
|
|
padding: '0px',
|
|
border: '0px',
|
|
outline: '0px',
|
|
cursor: 'pointer'
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onMouseEnter={e => { this.change(e); }}
|
|
onMouseLeave={e => { this.change(e); }}
|
|
|
|
onTouchStart={e => {
|
|
this.change(e);
|
|
this.props.onClick(e);
|
|
}}
|
|
onTouchEnd={e => { this.change(e); }}
|
|
onTouchCancel={e => { this.change(e); }}
|
|
|
|
onClick={this.props.onClick}
|
|
|
|
style={style}
|
|
title={this.props.title}
|
|
name={this.props.name}
|
|
type="button"
|
|
>{this.props.children}</button>
|
|
);
|
|
}
|
|
}
|