115 lines
2.5 KiB
TypeScript
115 lines
2.5 KiB
TypeScript
import * as React from "react";
|
|
import { action, observable } from "mobx";
|
|
import { Transition } from "react-transition-group";
|
|
import { CloseButton } from "./svg/CloseButton";
|
|
import color from "color";
|
|
import { observer } from "mobx-react";
|
|
import ScreenReaderOnlyText from "./ScreenReaderOnlyText";
|
|
|
|
interface DefaultCloseButtonProps {
|
|
onClick?: () => void
|
|
}
|
|
|
|
const mainColor = '#969696'
|
|
const darkenedColor = color(mainColor).darken(0.1).hex()
|
|
const defaultStyles = {
|
|
foreground: {
|
|
fill: mainColor
|
|
},
|
|
background: {
|
|
stroke: mainColor,
|
|
fill: '#FFFFFF'
|
|
}
|
|
}
|
|
|
|
const states: { [state: string]: any } = {
|
|
entering: {
|
|
foreground: {
|
|
fill: darkenedColor,
|
|
transition: 'fill 250ms ease-in-out'
|
|
},
|
|
background: {
|
|
stroke: darkenedColor,
|
|
transition: 'stroke 250ms ease-in-out'
|
|
}
|
|
},
|
|
entered: {
|
|
foreground: {
|
|
fill: darkenedColor,
|
|
},
|
|
background: {
|
|
stroke: darkenedColor,
|
|
}
|
|
},
|
|
exiting: {
|
|
foreground: {
|
|
fill: mainColor,
|
|
transition: 'fill 250ms ease-in-out'
|
|
},
|
|
background: {
|
|
stroke: mainColor,
|
|
transition: 'stroke 250ms ease-in-out'
|
|
}
|
|
},
|
|
exited: {
|
|
foreground: {
|
|
fill: mainColor,
|
|
},
|
|
background: {
|
|
stroke: mainColor,
|
|
}
|
|
}
|
|
}
|
|
|
|
@observer
|
|
export class DefaultCloseButton extends React.Component<DefaultCloseButtonProps, {}> {
|
|
@observable
|
|
hovering: boolean
|
|
|
|
@observable
|
|
focusing: boolean
|
|
|
|
@action.bound
|
|
mouseEnter() {
|
|
this.hovering = true;
|
|
}
|
|
|
|
@action.bound
|
|
mouseLeave() {
|
|
this.hovering = false;
|
|
}
|
|
|
|
@action.bound
|
|
keyDown(event: React.KeyboardEvent<HTMLAnchorElement>) {
|
|
if (event.key == 'Enter') {
|
|
event.preventDefault();
|
|
this.props.onClick();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return <Transition in={this.hovering} timeout={250}>
|
|
{(hoverState) => {
|
|
const backgroundStyle = {
|
|
...defaultStyles.background,
|
|
...((states[hoverState] && states[hoverState].background) || {})
|
|
}
|
|
|
|
const foregroundStyle =
|
|
{
|
|
...defaultStyles.foreground,
|
|
...((states[hoverState] && states[hoverState].foreground) || {})
|
|
}
|
|
|
|
return <a onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave} onClick={this.props.onClick} onKeyDown={this.keyDown} tabIndex={0} className={'focusable_item'}>
|
|
<CloseButton backgroundCircleStyle={backgroundStyle}
|
|
foregroundCircleStyle={foregroundStyle}
|
|
/><ScreenReaderOnlyText>Close modal</ScreenReaderOnlyText>
|
|
</a>
|
|
|
|
}
|
|
}
|
|
</Transition>
|
|
|
|
}
|
|
}
|