matrix/matrix-react-sdk
1
0
Fork 0
mirror of https://github.com/matrix-org/matrix-react-sdk.git synced 2025-07-28 15:22:05 +03:00
Code Activity

provide collapsed callback to also collapse on react side of things

Browse Source
This commit is contained in:
Bruno Windels
2018-10-16 14:56:49 +02:00
parent 529845d8fc
commit c095e30ae4
2 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/structures/LoggedInView.js
View File

@ -98,12 +98,17 @@ const LoggedInView = React.createClass({
vertical: "mx_ResizeHandle_vertical", vertical: "mx_ResizeHandle_vertical",
reverse: "mx_ResizeHandle_reverse" reverse: "mx_ResizeHandle_reverse"
}; };
const collapseToggleSize = 260 - 50; const config = {
toggleSize: 260 - 50,
onCollapsed: (collapsed) => {
this.setState({collapseLhs: collapsed});
}
};
makeResizeable( makeResizeable(
this.resizeContainer, this.resizeContainer,
classNames, classNames,
CollapseDistributor, CollapseDistributor,
collapseToggleSize); config);
}, },
componentWillMount: function() { componentWillMount: function() {
@ -524,7 +529,7 @@ const LoggedInView = React.createClass({
<DragDropContext onDragEnd={this._onDragEnd}> <DragDropContext onDragEnd={this._onDragEnd}>
<div ref={(div) => this.resizeContainer = div} className={bodyClasses}> <div ref={(div) => this.resizeContainer = div} className={bodyClasses}>
<LeftPanel <LeftPanel
collapsed={this.props.collapseLhs || false} collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
disabled={this.props.leftDisabled} disabled={this.props.leftDisabled}
/> />
<ResizeHandle/> <ResizeHandle/>

11
src/resizer/distributors.js
View File

@ -17,18 +17,25 @@ class FixedDistributor {
class CollapseDistributor extends FixedDistributor { class CollapseDistributor extends FixedDistributor {
constructor(container, items, handleIndex, direction, sizer, toggleSize) { constructor(container, items, handleIndex, direction, sizer, config) {
super(container, items, handleIndex, direction, sizer); super(container, items, handleIndex, direction, sizer);
this.toggleSize = toggleSize; this.toggleSize = config && config.toggleSize;
this.onCollapsed = config && config.onCollapsed;
} }
resize(offset) { resize(offset) {
let newSize = offset - this.sizer.getItemOffset(this.item); let newSize = offset - this.sizer.getItemOffset(this.item);
if (newSize < this.toggleSize) { if (newSize < this.toggleSize) {
this.item.classList.add("collapsed"); this.item.classList.add("collapsed");
if (this.onCollapsed) {
this.onCollapsed(true, this.item);
}
} }
else { else {
this.item.classList.remove("collapsed"); this.item.classList.remove("collapsed");
if (this.onCollapsed) {
this.onCollapsed(false, this.item);
}
} }
super.resize(newSize); super.resize(newSize);
} }