73759e71db
Summary:
Litho renders differently based on whether applicable accessibility services are enabled. In Flipper's accessibility mode this will be forced (with the option to turn it off) so that you don't have to be running an accessibility service to actually see what someone running an accessibility service would.
Here's an example video of what the re-rendering does (this also happens on toggle of accessibility mode, this is just the settings option to force it):
{F137856647}
Reviewed By: jknoxville
Differential Revision: D9667222
fbshipit-source-id: 292353d89f07734f1e525f795b1d7daf4130e203
103 lines
2.4 KiB
JavaScript
103 lines
2.4 KiB
JavaScript
/**
|
|
* Copyright 2018-present Facebook.
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
* @format
|
|
*/
|
|
|
|
import {PureComponent} from 'react';
|
|
import FlexColumn from './FlexColumn.js';
|
|
import styled from '../styled/index.js';
|
|
import {colors} from './colors.js';
|
|
|
|
const Anchor = styled('img')({
|
|
zIndex: 6,
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: '50%',
|
|
transform: 'translate(-50%, calc(100% + 2px))',
|
|
});
|
|
|
|
const PopoverContainer = styled(FlexColumn)(props => ({
|
|
backgroundColor: colors.white,
|
|
borderRadius: 7,
|
|
border: '1px solid rgba(0,0,0,0.3)',
|
|
boxShadow: '0 2px 10px 0 rgba(0,0,0,0.3)',
|
|
position: 'absolute',
|
|
zIndex: 5,
|
|
bottom: 0,
|
|
marginTop: 15,
|
|
left: '50%',
|
|
minWidth: props.opts.minWidth || 'auto',
|
|
transform: props.opts.skewLeft
|
|
? 'translate(calc(-100% + 22px), calc(100% + 15px))'
|
|
: 'translate(-50%, calc(100% + 15px))',
|
|
overflow: 'hidden',
|
|
'&::before': {
|
|
content: '""',
|
|
display: 'block',
|
|
position: 'absolute',
|
|
left: '50%',
|
|
transform: props.opts.skewLeft
|
|
? 'translateX(calc(-100% + 22px))'
|
|
: 'translateX(-50%)',
|
|
height: 13,
|
|
top: -13,
|
|
width: 26,
|
|
backgroundColor: colors.white,
|
|
},
|
|
}));
|
|
|
|
type Props = {|
|
|
children: React.Node,
|
|
onDismiss: Function,
|
|
forceOpts?: Object,
|
|
|};
|
|
|
|
export default class Popover extends PureComponent<Props> {
|
|
_ref: ?Element;
|
|
|
|
componentDidMount() {
|
|
window.document.addEventListener('click', this.handleClick);
|
|
window.document.addEventListener('keydown', this.handleKeydown);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
window.document.addEventListener('click', this.handleClick);
|
|
window.document.addEventListener('keydown', this.handleKeydown);
|
|
}
|
|
|
|
handleClick = (e: SyntheticMouseEvent<>) => {
|
|
// $FlowFixMe
|
|
if (this._ref && !this._ref.contains(e.target)) {
|
|
this.props.onDismiss();
|
|
}
|
|
};
|
|
|
|
handleKeydown = (e: SyntheticKeyboardEvent<>) => {
|
|
if (e.key === 'Escape') {
|
|
this.props.onDismiss();
|
|
}
|
|
};
|
|
|
|
_setRef = (ref: ?Element) => {
|
|
this._ref = ref;
|
|
};
|
|
|
|
render() {
|
|
return [
|
|
<Anchor
|
|
src="./anchor.svg"
|
|
key="anchor"
|
|
opts={this.props.forceOpts || {}}
|
|
/>,
|
|
<PopoverContainer
|
|
innerRef={this._setRef}
|
|
key="popup"
|
|
opts={this.props.forceOpts || {}}>
|
|
{this.props.children}
|
|
</PopoverContainer>,
|
|
];
|
|
}
|
|
}
|