550 lines
14 KiB
JavaScript
Executable File
550 lines
14 KiB
JavaScript
Executable File
/* @flow */
|
|
|
|
import React, {PropTypes} from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
import TransitionGroup from '../lib/transitions/TransitionGroup';
|
|
import classNames from 'classnames';
|
|
import Animated from '../lib/animated';
|
|
import Flux from '../lib/flux/index';
|
|
import ContextMenuStore from '../stores/ContextMenuStore';
|
|
import PopoutStore from '../stores/PopoutStore';
|
|
import PopoutActionCreators from '../actions/PopoutActionCreators';
|
|
import Backdrop from './common/Backdrop';
|
|
import '../styles/popout.styl';
|
|
|
|
// Putting this in the style is sufficiently complex. No cross browser way to compute 'outerHeight'
|
|
const WINDOW_BOTTOM_MARGIN = 10;
|
|
// This maps with the CSS for the arrow + margin on popouts
|
|
const POPOUT_MARGIN = 14;
|
|
|
|
type AnimationOptions = {
|
|
position: string,
|
|
x: number,
|
|
y: number,
|
|
offsetX: ?number,
|
|
offsetY: ?number,
|
|
width: number,
|
|
height: number,
|
|
clickPos?: number,
|
|
};
|
|
|
|
interface Animation {
|
|
run(node: HTMLElement, options: AnimationOptions, callback: Function): void,
|
|
getStyle(options: AnimationOptions): {[key: string]: any},
|
|
}
|
|
|
|
function getEndStyle(position) {
|
|
switch (position) {
|
|
case 'left':
|
|
return {x: -1, y: 0};
|
|
case 'right':
|
|
return {x: 0, y: 0};
|
|
case 'bottom':
|
|
return {x: -0.5, y: 0};
|
|
case 'bottom-right':
|
|
return {x: -1, y: 0};
|
|
case 'top-right':
|
|
return {x: -1, y: -1};
|
|
case 'top':
|
|
default:
|
|
return {x: -0.5, y: -1};
|
|
}
|
|
}
|
|
|
|
class NoneAnimation {
|
|
animated: Animated.ValueXY;
|
|
|
|
constructor() {
|
|
this.animated = new Animated.ValueXY({x: 0, y: 0});
|
|
}
|
|
|
|
run(node, {position}, callback) {
|
|
this.animated.setValue(getEndStyle(position));
|
|
callback();
|
|
}
|
|
|
|
getStyle() {
|
|
return Animated.accelerate({
|
|
transform: [
|
|
{
|
|
translateX: this.animated.x.interpolate({
|
|
inputRange: [-1.05, 1.05],
|
|
outputRange: ['-105%', '105%'],
|
|
}),
|
|
},
|
|
{
|
|
translateY: this.animated.y.interpolate({
|
|
inputRange: [-1.05, 1.05],
|
|
outputRange: ['-105%', '105%'],
|
|
}),
|
|
},
|
|
],
|
|
});
|
|
}
|
|
}
|
|
|
|
class DefaultAnimation {
|
|
animated: Animated.ValueXY;
|
|
|
|
constructor() {
|
|
this.animated = new Animated.ValueXY({x: 0, y: 0});
|
|
}
|
|
|
|
computeStyles(position) {
|
|
let startStyle;
|
|
let endStyle;
|
|
|
|
switch (position) {
|
|
case 'left':
|
|
startStyle = {x: -1.05, y: 0};
|
|
endStyle = {x: -1, y: 0};
|
|
break;
|
|
case 'right':
|
|
startStyle = {x: 0.05, y: 0};
|
|
endStyle = {x: 0, y: 0};
|
|
break;
|
|
case 'bottom':
|
|
startStyle = {x: -0.5, y: 0.05};
|
|
endStyle = {x: -0.5, y: 0};
|
|
break;
|
|
case 'bottom-right':
|
|
startStyle = {x: -1, y: 0.05};
|
|
endStyle = {x: -1, y: 0};
|
|
break;
|
|
case 'top-right':
|
|
startStyle = {x: -1, y: -1.05};
|
|
endStyle = {x: -1, y: -1};
|
|
break;
|
|
case 'top':
|
|
default:
|
|
startStyle = {x: -0.5, y: -1.05};
|
|
endStyle = {x: -0.5, y: -1};
|
|
break;
|
|
}
|
|
|
|
return {
|
|
startStyle,
|
|
endStyle,
|
|
};
|
|
}
|
|
|
|
run(node, {position, x, offsetX}, callback) {
|
|
const {startStyle, endStyle} = this.computeStyles(position);
|
|
|
|
// Clamp the popout to the horizontal width off the screen
|
|
const left = x + offsetX + node.offsetWidth * endStyle.x;
|
|
const right = left + node.offsetWidth;
|
|
|
|
if (left < 0) {
|
|
const percentageOffset = left / node.offsetWidth;
|
|
endStyle.x += percentageOffset;
|
|
startStyle.x += percentageOffset;
|
|
} else if (right > window.innerWidth) {
|
|
const percentageOffset = (window.innerWidth - right) / node.offsetWidth;
|
|
endStyle.x += percentageOffset;
|
|
startStyle.x += percentageOffset;
|
|
}
|
|
|
|
this.animated.setValue(startStyle);
|
|
Animated.timing(this.animated, {
|
|
toValue: endStyle,
|
|
duration: 150,
|
|
easing: Animated.Easing.inOut(Animated.Easing.cubic),
|
|
}).start(callback);
|
|
}
|
|
|
|
getStyle() {
|
|
return Animated.accelerate({
|
|
transform: [
|
|
{
|
|
translateX: this.animated.x.interpolate({
|
|
inputRange: [-1.05, 1.05],
|
|
outputRange: ['-105%', '105%'],
|
|
}),
|
|
},
|
|
{
|
|
translateY: this.animated.y.interpolate({
|
|
inputRange: [-1.05, 1.05],
|
|
outputRange: ['-105%', '105%'],
|
|
}),
|
|
},
|
|
],
|
|
});
|
|
}
|
|
}
|
|
|
|
class SpringAnimation {
|
|
animated: Animated.Value;
|
|
|
|
constructor() {
|
|
this.animated = new Animated.Value(0);
|
|
}
|
|
|
|
run(node, options, callback) {
|
|
this.animated.setValue(0);
|
|
Animated.spring(this.animated, {
|
|
toValue: 1,
|
|
tension: 80,
|
|
friction: 8,
|
|
overshootClamping: true,
|
|
}).start(callback);
|
|
}
|
|
|
|
interpolate(...outputRange: Array<number>) {
|
|
return this.animated.interpolate({inputRange: [0, 1], outputRange});
|
|
}
|
|
|
|
getStyle({position, height, width, x, offsetX, clickPos}) {
|
|
const endStyle = getEndStyle(position);
|
|
|
|
let dimensions;
|
|
if (height > 0) {
|
|
dimensions = {
|
|
height: this.interpolate(0, height),
|
|
width: this.interpolate(0, width),
|
|
left: this.interpolate(x + clickPos, x + offsetX),
|
|
};
|
|
}
|
|
|
|
return Animated.accelerate({
|
|
...dimensions,
|
|
overflow: 'hidden',
|
|
transform: [{translateY: `${endStyle.y * 100}%`}, {translateX: `${endStyle.x * 100}%`}],
|
|
});
|
|
}
|
|
}
|
|
|
|
const Popout = React.createClass({
|
|
mixins: [PureRenderMixin],
|
|
|
|
propTypes: {
|
|
popoutKey: PropTypes.string.isRequired,
|
|
render: PropTypes.func.isRequired,
|
|
position: PropTypes.oneOf(['left', 'top', 'right', 'bottom', 'top-right', 'bottom-right']).isRequired,
|
|
animationType: PropTypes.oneOf(['default', 'spring', 'none']).isRequired,
|
|
x: PropTypes.number.isRequired,
|
|
y: PropTypes.number.isRequired,
|
|
targetWidth: PropTypes.number.isRequired,
|
|
targetHeight: PropTypes.number.isRequired,
|
|
closeOnScroll: PropTypes.bool,
|
|
shadow: PropTypes.bool,
|
|
text: PropTypes.string,
|
|
containerClass: PropTypes.string,
|
|
preventInvert: PropTypes.bool,
|
|
zIndexBoost: PropTypes.number,
|
|
clickPos: PropTypes.number,
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
animationType: 'default',
|
|
closeOnScroll: true,
|
|
preventInvert: false,
|
|
shadow: true,
|
|
text: '',
|
|
};
|
|
},
|
|
|
|
getInitialState(): {
|
|
offsetX: ?number,
|
|
offsetY: ?number,
|
|
width: number,
|
|
height: number,
|
|
position: string,
|
|
animation: Animation,
|
|
invert: boolean,
|
|
} {
|
|
let animation;
|
|
switch (this.props.animationType) {
|
|
case 'default':
|
|
animation = new DefaultAnimation();
|
|
break;
|
|
case 'spring':
|
|
animation = new SpringAnimation();
|
|
break;
|
|
case 'none':
|
|
default:
|
|
animation = new NoneAnimation();
|
|
}
|
|
return {
|
|
width: 0,
|
|
height: 0,
|
|
offsetX: null,
|
|
offsetY: null,
|
|
animation,
|
|
position: '',
|
|
invert: false,
|
|
};
|
|
},
|
|
|
|
preventNextClose: false,
|
|
componentWillEnterCallback: () => {},
|
|
|
|
componentDidMount() {
|
|
document.addEventListener('click', this.close, true);
|
|
document.addEventListener('contextmenu', this.closeContext, true);
|
|
this.updateOffsets();
|
|
},
|
|
|
|
componentWillEnter(callback) {
|
|
this.componentWillEnterCallback = callback;
|
|
},
|
|
|
|
_componentWillEnter() {
|
|
if (this.componentWillEnterCallback) {
|
|
const callback = this.componentWillEnterCallback;
|
|
delete this.componentWillEnterCallback;
|
|
const node = ReactDOM.findDOMNode(this);
|
|
if (!(node instanceof HTMLElement)) {
|
|
throw new Error('node is not an instance of HTMLElement');
|
|
}
|
|
this.state.animation.run(
|
|
node,
|
|
{
|
|
position: this.state.position,
|
|
x: this.props.x,
|
|
y: this.props.y,
|
|
width: this.state.width,
|
|
height: this.state.height,
|
|
targetWidth: this.props.targetWidth,
|
|
targetHeight: this.props.targetHeight,
|
|
offsetX: this.state.offsetX,
|
|
offsetY: this.state.offsetY,
|
|
},
|
|
callback
|
|
);
|
|
}
|
|
},
|
|
|
|
componentWillLeave(callback) {
|
|
callback();
|
|
},
|
|
|
|
componentDidUpdate({text, position, x, y, targetWidth, targetHeight, closeOnScroll}) {
|
|
if (
|
|
this.props.text !== text ||
|
|
this.props.position !== position ||
|
|
this.props.x !== x ||
|
|
this.props.y !== y ||
|
|
this.props.targetWidth !== targetWidth ||
|
|
this.props.targetHeight !== targetHeight ||
|
|
this.props.closeOnScroll !== closeOnScroll
|
|
) {
|
|
this.updateOffsets();
|
|
}
|
|
},
|
|
|
|
componentWillUpdate(nextProps) {
|
|
if (nextProps.needsRerender) {
|
|
PopoutActionCreators.didRerender(this.props.popoutKey);
|
|
}
|
|
},
|
|
|
|
componentWillUnmount() {
|
|
document.removeEventListener('click', this.close, true);
|
|
document.removeEventListener('contextmenu', this.closeContext, true);
|
|
},
|
|
|
|
close(e: Event) {
|
|
if (this.preventNextClose && ContextMenuStore.isOpen()) {
|
|
this.preventNextClose = false;
|
|
return;
|
|
}
|
|
|
|
if (e != null) {
|
|
let target = e.target;
|
|
const myElement = ReactDOM.findDOMNode(this);
|
|
|
|
while (target instanceof Element) {
|
|
if (target === myElement) return;
|
|
if (target.classList != null && target.classList.contains('popout-open')) return;
|
|
target = target.parentNode;
|
|
}
|
|
}
|
|
PopoutActionCreators.close(this.props.popoutKey);
|
|
},
|
|
|
|
closeContext(e: Event) {
|
|
if (e != null) {
|
|
let target = e.target;
|
|
while (target instanceof HTMLElement) {
|
|
if (target === ReactDOM.findDOMNode(this)) {
|
|
this.preventNextClose = true;
|
|
return;
|
|
}
|
|
target = target instanceof HTMLElement ? target.parentNode : null;
|
|
}
|
|
}
|
|
|
|
if (this.preventNextClose && ContextMenuStore.isOpen()) {
|
|
this.preventNextClose = false;
|
|
return;
|
|
}
|
|
|
|
PopoutActionCreators.close(this.props.popoutKey);
|
|
},
|
|
|
|
updateOffsets() {
|
|
const {preventInvert} = this.props;
|
|
let {position} = this.props;
|
|
|
|
const domNode = ReactDOM.findDOMNode(this);
|
|
if (!(domNode instanceof HTMLElement)) {
|
|
throw new Error('domNode is not instance of HTMLElement');
|
|
}
|
|
const width = domNode.offsetWidth;
|
|
const height = domNode.offsetHeight;
|
|
|
|
const isTopside = position === 'top' || position === 'top-right';
|
|
let invert = false;
|
|
if (!preventInvert) {
|
|
if (isTopside) {
|
|
// only invert from top if the target area is in the top half of the window area
|
|
invert = this.props.y < window.innerHeight * 0.5 && this.props.y - domNode.offsetHeight < 0;
|
|
} else {
|
|
invert = this.props.y + this.props.targetHeight + POPOUT_MARGIN + height >= window.innerHeight;
|
|
}
|
|
|
|
if (invert) {
|
|
if (position === 'bottom') {
|
|
position = 'top';
|
|
} else if (position === 'top-right') {
|
|
position = 'bottom-right';
|
|
} else if (position === 'top') {
|
|
position = 'bottom';
|
|
}
|
|
}
|
|
}
|
|
|
|
const newState = {
|
|
invert,
|
|
position,
|
|
height,
|
|
width,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
};
|
|
|
|
switch (position) {
|
|
case 'left':
|
|
newState.offsetX = 0;
|
|
newState.offsetY = this.props.targetHeight / 2;
|
|
break;
|
|
case 'right':
|
|
newState.offsetX = this.props.targetWidth;
|
|
newState.offsetY = this.props.targetHeight / 2;
|
|
break;
|
|
case 'bottom':
|
|
newState.offsetX = this.props.targetWidth / 2;
|
|
newState.offsetY = this.props.targetHeight;
|
|
break;
|
|
case 'bottom-right':
|
|
newState.offsetX = this.props.targetWidth;
|
|
newState.offsetY = this.props.targetHeight;
|
|
break;
|
|
case 'top-right':
|
|
newState.offsetX = this.props.targetWidth;
|
|
newState.offsetY = 0;
|
|
break;
|
|
case 'top':
|
|
default:
|
|
newState.offsetX = this.props.targetWidth / 2;
|
|
newState.offsetY = 0;
|
|
}
|
|
|
|
if (invert && (this.props.position === 'right' || this.props.position === 'left')) {
|
|
if (this.props.closeOnScroll) {
|
|
// align to the item's y position
|
|
newState.offsetY -= height - this.props.targetHeight;
|
|
} else {
|
|
// clamp to end at the bottom of the window
|
|
// FLOWJS Note: Flow thinks height is a string, todo: remove string2int
|
|
newState.offsetY -= this.props.y + +height - window.innerHeight + WINDOW_BOTTOM_MARGIN;
|
|
}
|
|
}
|
|
|
|
this.setState(newState, this._componentWillEnter);
|
|
},
|
|
|
|
render() {
|
|
const {offsetX, offsetY, invert, position, animation} = this.state;
|
|
const {zIndexBoost, closeOnScroll, x, y, popoutKey, animationType, clickPos, render, containerClass} = this.props;
|
|
|
|
const defaultStyle = {
|
|
left: offsetX === null ? null : x + offsetX,
|
|
top: offsetY == null ? null : y + offsetY,
|
|
zIndex: zIndexBoost != null ? 1000 + zIndexBoost : null,
|
|
};
|
|
|
|
const style = {
|
|
...defaultStyle,
|
|
...animation.getStyle({
|
|
position,
|
|
width: this.state.width,
|
|
height: this.state.height,
|
|
x,
|
|
y,
|
|
offsetX,
|
|
offsetY,
|
|
clickPos,
|
|
}),
|
|
};
|
|
|
|
if (!style.visibility) {
|
|
style.visibility = style.transform == null ? 'hidden' : 'visible';
|
|
}
|
|
|
|
const className = {
|
|
popout: true,
|
|
'popout-invert': invert && closeOnScroll,
|
|
[`popout-${position}`]: true,
|
|
'no-arrow': !closeOnScroll,
|
|
'no-shadow': !this.props.shadow || animationType === 'none',
|
|
};
|
|
|
|
if (containerClass) {
|
|
className[containerClass] = true;
|
|
}
|
|
|
|
return (
|
|
<Animated.div className={classNames(className)} style={style}>
|
|
{render({popoutKey, onClose: this.close})}
|
|
</Animated.div>
|
|
);
|
|
},
|
|
});
|
|
|
|
const Popouts = React.createClass({
|
|
mixins: [Flux.LazyStoreListenerMixin(PopoutStore)],
|
|
|
|
getInitialState() {
|
|
return this.getStateFromStores();
|
|
},
|
|
|
|
getStateFromStores() {
|
|
return {
|
|
popouts: PopoutStore.getPopouts(),
|
|
};
|
|
},
|
|
|
|
render() {
|
|
const hasBackdrop = this.state.popouts.some(p => p.backdrop);
|
|
const backdrop = hasBackdrop ? <Backdrop backdropStyle={Backdrop.SUBTLE} /> : null;
|
|
return (
|
|
<TransitionGroup className={`theme-${this.props.theme}`} component="div">
|
|
{backdrop}
|
|
{this.state.popouts.map(popoutData =>
|
|
<Popout popoutKey={String(popoutData.key)} {...popoutData} key={`${popoutData.key}-popout`} />
|
|
)}
|
|
</TransitionGroup>
|
|
);
|
|
},
|
|
});
|
|
|
|
export default Popouts;
|
|
|
|
|
|
|
|
// WEBPACK FOOTER //
|
|
// ./discord_app/components/Popouts.js
|