imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Convert MainSplit to TS

Browse source 
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-09-12 08:40:56 +02:00
parent 4673e1aa49
commit 716aba2a0e
No known key found for this signature in database
GPG key ID: 55C211A1226CB17D
1 changed files with 22 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/structures/MainSplit.js → src/components/structures/MainSplit.tsx
View file

@ -16,25 +16,35 @@ limitations under the License.
*/ */
import React from 'react'; import React from 'react';
import { Resizable } from 're-resizable'; import { NumberSize, Resizable } from 're-resizable';
import { replaceableComponent } from "../../utils/replaceableComponent"; import { replaceableComponent } from "../../utils/replaceableComponent";
import ResizeNotifier from "../../utils/ResizeNotifier";
import { Direction } from "re-resizable/lib/resizer";
interface IProps {
resizeNotifier: ResizeNotifier;
collapsedRhs?: boolean;
panel: JSX.Element;
}
@replaceableComponent("structures.MainSplit") @replaceableComponent("structures.MainSplit")
export default class MainSplit extends React.Component { export default class MainSplit extends React.Component<IProps> {
_onResizeStart = () => { private onResizeStart = (): void => {
this.props.resizeNotifier.startResizing(); this.props.resizeNotifier.startResizing();
}; };
_onResize = () => { private onResize = (): void => {
this.props.resizeNotifier.notifyRightHandleResized(); this.props.resizeNotifier.notifyRightHandleResized();
}; };
_onResizeStop = (event, direction, refToElement, delta) => { private onResizeStop = (
event: MouseEvent | TouchEvent, direction: Direction, elementRef: HTMLElement, delta: NumberSize,
): void => {
this.props.resizeNotifier.stopResizing(); this.props.resizeNotifier.stopResizing();
window.localStorage.setItem("mx_rhs_size", this._loadSidePanelSize().width + delta.width); window.localStorage.setItem("mx_rhs_size", (this.loadSidePanelSize().width + delta.width).toString());
}; };
_loadSidePanelSize() { private loadSidePanelSize(): {height: string | number, width: number} {
let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10); let rhsSize = parseInt(window.localStorage.getItem("mx_rhs_size"), 10);
if (isNaN(rhsSize)) { if (isNaN(rhsSize)) {
@ -47,7 +57,7 @@ export default class MainSplit extends React.Component {
}; };
} }
render() { public render(): JSX.Element {
const bodyView = React.Children.only(this.props.children); const bodyView = React.Children.only(this.props.children);
const panelView = this.props.panel; const panelView = this.props.panel;
@ -56,7 +66,7 @@ export default class MainSplit extends React.Component {
let children; let children;
if (hasResizer) { if (hasResizer) {
children = <Resizable children = <Resizable
defaultSize={this._loadSidePanelSize()} defaultSize={this.loadSidePanelSize()}
minWidth={264} minWidth={264}
maxWidth="50%" maxWidth="50%"
enable={{ enable={{
@ -69,9 +79,9 @@ export default class MainSplit extends React.Component {
bottomLeft: false, bottomLeft: false,
topLeft: false, topLeft: false,
}} }}
onResizeStart={this._onResizeStart} onResizeStart={this.onResizeStart}
onResize={this._onResize} onResize={this.onResize}
onResizeStop={this._onResizeStop} onResizeStop={this.onResizeStop}
className="mx_RightPanel_ResizeWrapper" className="mx_RightPanel_ResizeWrapper"
handleClasses={{ left: "mx_RightPanel_ResizeHandle" }} handleClasses={{ left: "mx_RightPanel_ResizeHandle" }}
> >