Added onHideSheet method to Sheet props

Summary:
This component was added back in January, but it hasn't been used, and thus no one has tested it in the real world.

It needs a onHideSheet method to unmount this component when the plugin sheet becomes hidden. This allows the sheet to appear and dissapear on button clicks, instead of only appearing when the container component loads.

For the old behavior see the test plan in this diff: D13597251

Reviewed By: jknoxville

Differential Revision: D16443836

fbshipit-source-id: 68feec23338287dbafc846689ea2a1b35be4b2b0
This commit is contained in:
Benjamin Elo
2019-07-24 02:48:30 -07:00
committed by Facebook Github Bot
parent 3760e260d6
commit a86ea5131c

View File

@@ -8,7 +8,10 @@
import {Component} from 'react'; import {Component} from 'react';
import {createPortal} from 'react-dom'; import {createPortal} from 'react-dom';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import {setActiveSheet} from '../../reducers/application.js'; import {
ACTIVE_SHEET_PLUGIN_SHEET,
setActiveSheet,
} from '../../reducers/application.js';
import type {ActiveSheet} from '../../reducers/application'; import type {ActiveSheet} from '../../reducers/application';
@@ -21,6 +24,10 @@ type Props = {
* the sheet. * the sheet.
*/ */
children: (onHide: () => void) => ?React.Node, children: (onHide: () => void) => ?React.Node,
/**
* Function that is called when the sheet becomes hidden.
*/
onHideSheet: () => void,
setActiveSheet: (sheet: ActiveSheet) => any, setActiveSheet: (sheet: ActiveSheet) => any,
activeSheet: ActiveSheet, activeSheet: ActiveSheet,
}; };
@@ -58,8 +65,20 @@ class Sheet extends Component<Props, State> {
if (prevState.content !== this.state.content) { if (prevState.content !== this.state.content) {
this.showSheetIfContentsAvailable(); this.showSheetIfContentsAvailable();
} }
if (
prevProps.activeSheet === ACTIVE_SHEET_PLUGIN_SHEET &&
this.props.activeSheet !== ACTIVE_SHEET_PLUGIN_SHEET
) {
this.onHideSheet();
}
} }
onHideSheet = () => {
if (this.props.onHideSheet != null) {
this.props.onHideSheet();
}
};
showSheetIfContentsAvailable = () => { showSheetIfContentsAvailable = () => {
if (this.state.content) { if (this.state.content) {
this.props.setActiveSheet('PLUGIN_SHEET'); this.props.setActiveSheet('PLUGIN_SHEET');