0675dd924d
Reviewed By: passy Differential Revision: D17863711 fbshipit-source-id: 259dc77826fb803ff1b88c88529d7f679d3b74d8
78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*
|
|
* @format
|
|
*/
|
|
|
|
import React from 'react';
|
|
import ReactDOM from 'react-dom';
|
|
import Sidebar from '../ui/components/Sidebar';
|
|
import {connect} from 'react-redux';
|
|
import {toggleRightSidebarAvailable} from '../reducers/application';
|
|
|
|
type OwnProps = {
|
|
children: any;
|
|
width?: number;
|
|
minWidth?: number;
|
|
};
|
|
|
|
type StateFromProps = {
|
|
rightSidebarVisible: boolean;
|
|
rightSidebarAvailable: boolean;
|
|
};
|
|
|
|
type DispatchFromProps = {
|
|
toggleRightSidebarAvailable: (visible?: boolean) => any;
|
|
};
|
|
|
|
type Props = OwnProps & StateFromProps & DispatchFromProps;
|
|
class DetailSidebar extends React.Component<Props> {
|
|
componentDidMount() {
|
|
this.updateSidebarAvailablility();
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
this.updateSidebarAvailablility();
|
|
}
|
|
|
|
updateSidebarAvailablility() {
|
|
const available = Boolean(this.props.children);
|
|
if (available !== this.props.rightSidebarAvailable) {
|
|
this.props.toggleRightSidebarAvailable(available);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const domNode = document.getElementById('detailsSidebar');
|
|
return (
|
|
this.props.children &&
|
|
this.props.rightSidebarVisible &&
|
|
domNode &&
|
|
ReactDOM.createPortal(
|
|
<Sidebar
|
|
minWidth={this.props.minWidth}
|
|
width={this.props.width || 300}
|
|
position="right">
|
|
{this.props.children}
|
|
</Sidebar>,
|
|
domNode,
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
// @TODO: TS_MIGRATION
|
|
type Store = any;
|
|
export default connect<StateFromProps, DispatchFromProps, OwnProps, Store>(
|
|
({application: {rightSidebarVisible, rightSidebarAvailable}}) => ({
|
|
rightSidebarVisible,
|
|
rightSidebarAvailable,
|
|
}),
|
|
{
|
|
toggleRightSidebarAvailable,
|
|
},
|
|
)(DetailSidebar);
|