I5852 esc key modal (#6140)
* adding keydown * integrating keydown * updating user prof so integrates with keydown * updating rel test for chgs * Removing test as don't think its needed.. * updating comment * updating per comments * moving keytype into internal props
This commit is contained in:
Родитель
618007a3cb
Коммит
9eaa9361b8
|
@ -228,6 +228,7 @@
|
|||
"react-cookie": "1.0.5",
|
||||
"react-dom": "16.5.0",
|
||||
"react-helmet": "5.2.0",
|
||||
"react-keydown": "1.9.7",
|
||||
"react-nested-status": "0.2.1",
|
||||
"react-onclickoutside": "6.7.1",
|
||||
"react-photoswipe": "1.3.0",
|
||||
|
|
|
@ -219,8 +219,10 @@ export class UserProfileEditBase extends React.Component<Props, State> {
|
|||
this.setState({ showProfileDeletionModal: true });
|
||||
};
|
||||
|
||||
onCancelProfileDeletion = (e: SyntheticEvent<HTMLButtonElement>) => {
|
||||
e.preventDefault();
|
||||
onCancelProfileDeletion = (e: SyntheticEvent<HTMLButtonElement> | null) => {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
this.setState({ showProfileDeletionModal: false });
|
||||
};
|
||||
|
@ -758,6 +760,7 @@ export class UserProfileEditBase extends React.Component<Props, State> {
|
|||
|
||||
{this.state.showProfileDeletionModal && (
|
||||
<OverlayCard
|
||||
onEscapeOverlay={this.onCancelProfileDeletion}
|
||||
className={overlayClassName}
|
||||
header={
|
||||
isEditingCurrentUser
|
||||
|
|
|
@ -3,11 +3,14 @@ import invariant from 'invariant';
|
|||
import makeClassName from 'classnames';
|
||||
import * as React from 'react';
|
||||
import { compose } from 'redux';
|
||||
import keydown, { Keys } from 'react-keydown';
|
||||
|
||||
import withUIState from 'core/withUIState';
|
||||
|
||||
import './styles.scss';
|
||||
|
||||
const { ESC } = Keys;
|
||||
|
||||
type Props = {|
|
||||
className?: string,
|
||||
children: React.Element<any>,
|
||||
|
@ -26,6 +29,7 @@ type InternalProps = {|
|
|||
...Props,
|
||||
setUIState: ($Shape<UIStateType>) => void,
|
||||
uiState: UIStateType,
|
||||
keydown: {| event: SyntheticEvent<any> | null |},
|
||||
|};
|
||||
|
||||
export class OverlayBase extends React.Component<InternalProps> {
|
||||
|
@ -40,7 +44,13 @@ export class OverlayBase extends React.Component<InternalProps> {
|
|||
|
||||
componentWillReceiveProps(nextProps: InternalProps) {
|
||||
const { uiState } = this.props;
|
||||
const { visibleOnLoad: visibleOnLoadNew } = nextProps;
|
||||
const { visibleOnLoad: visibleOnLoadNew, keydown: escKeydown } = nextProps;
|
||||
|
||||
// Pressing the "Esc" key is the only key that will trigger an update here.
|
||||
// escKeydown is only set if the "Esc" key is pressed.
|
||||
if (escKeydown && escKeydown.event) {
|
||||
this.onClickBackground(escKeydown.event);
|
||||
}
|
||||
|
||||
if (
|
||||
visibleOnLoadNew !== undefined &&
|
||||
|
@ -96,6 +106,7 @@ const Overlay: React.ComponentType<Props> = compose(
|
|||
extractId,
|
||||
initialState: initialUIState,
|
||||
}),
|
||||
keydown(ESC),
|
||||
)(OverlayBase);
|
||||
|
||||
export default Overlay;
|
||||
|
|
|
@ -91,6 +91,24 @@ describe(__filename, () => {
|
|||
expect(root).not.toHaveClassName('Overlay--visible');
|
||||
});
|
||||
|
||||
it('hides when the "Esc" key is pressed', () => {
|
||||
const { store } = dispatchClientMetadata();
|
||||
|
||||
const root = render({ visibleOnLoad: true, store });
|
||||
|
||||
// This will trigger the componentWillReceiveProps() method.
|
||||
// keydown.event will be set when "Esc" is hit.
|
||||
root.setProps({
|
||||
keydown: {
|
||||
event: createFakeEvent(),
|
||||
},
|
||||
});
|
||||
|
||||
applyUIStateChanges({ root, store });
|
||||
|
||||
expect(root).not.toHaveClassName('Overlay--visible');
|
||||
});
|
||||
|
||||
describe('extractId', () => {
|
||||
it('returns a unique ID provided by the ID prop', () => {
|
||||
const id = 'custom-overlay';
|
||||
|
|
|
@ -9419,6 +9419,12 @@ react-is@^16.5.0:
|
|||
version "16.5.0"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.5.0.tgz#2ec7c192709698591efe13722fab3ef56144ba55"
|
||||
|
||||
react-keydown@1.9.7:
|
||||
version "1.9.7"
|
||||
resolved "https://registry.yarnpkg.com/react-keydown/-/react-keydown-1.9.7.tgz#cd168d4b0194b6ef71bca47e5c1cbc5d24ab5498"
|
||||
dependencies:
|
||||
core-js "^2.5.0"
|
||||
|
||||
react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
|
|
Загрузка…
Ссылка в новой задаче