quine-global/hyper
1
0
Fork 0
mirror of https://github.com/quine-global/hyper.git synced 2026-01-12 20:18:41 -09:00
Code Issues Projects Releases Packages Wiki Activity Actions

Reset splits either side of a divider to an even ratio on double click of the divider #2687 (#2692)

Browse source 
* auto resize panes when dbl click on separator is triggered

* use const instead of let
This commit is contained in:
Lescenco Andrei Bogdan 2018-02-23 13:31:18 +01:00 committed by Timothy
parent 6b9a4f6ff0
commit 82c7afbeec
1 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
lib/components/split-pane.js
View file

@ -1,11 +1,13 @@
/* eslint-disable quote-props */ /* eslint-disable quote-props */
import React from 'react'; import React from 'react';
import {PureComponent} from '../base-components'; import {PureComponent} from '../base-components';
import _ from 'lodash';
export default class SplitPane extends PureComponent { export default class SplitPane extends PureComponent {
constructor(props) { constructor(props) {
super(props); super(props);
this.handleDragStart = this.handleDragStart.bind(this); this.handleDragStart = this.handleDragStart.bind(this);
this.handleAutoResize = this.handleAutoResize.bind(this);
this.onDrag = this.onDrag.bind(this); this.onDrag = this.onDrag.bind(this);
this.onDragEnd = this.onDragEnd.bind(this); this.onDragEnd = this.onDragEnd.bind(this);
this.state = {dragging: false}; this.state = {dragging: false};
@ -18,6 +20,28 @@ export default class SplitPane extends PureComponent {
} }
} }
setupPanes(ev) {
this.panes = Array.from(ev.target.parentNode.childNodes);
this.paneIndex = this.panes.indexOf(ev.target);
this.paneIndex -= Math.ceil(this.paneIndex / 2);
}
handleAutoResize(ev) {
ev.preventDefault();
this.setupPanes(ev);
const sizes_ = this.getSizes();
sizes_[this.paneIndex] = 0;
sizes_[this.paneIndex + 1] = 0;
const availableWidth = 1 - _.sum(sizes_);
sizes_[this.paneIndex] = availableWidth / 2;
sizes_[this.paneIndex + 1] = availableWidth / 2;
this.props.onResize(sizes_);
}
handleDragStart(ev) { handleDragStart(ev) {
ev.preventDefault(); ev.preventDefault();
this.setState({dragging: true}); this.setState({dragging: true});
@ -37,14 +61,12 @@ export default class SplitPane extends PureComponent {
this.dragTarget = ev.target; this.dragTarget = ev.target;
this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2]; this.dragPanePosition = this.dragTarget.getBoundingClientRect()[this.d2];
this.panes = Array.from(ev.target.parentNode.childNodes);
this.panesSize = ev.target.parentNode.getBoundingClientRect()[this.d1]; this.panesSize = ev.target.parentNode.getBoundingClientRect()[this.d1];
this.paneIndex = this.panes.indexOf(ev.target); this.setupPanes(ev);
this.paneIndex -= Math.ceil(this.paneIndex / 2);
} }
onDrag(ev) { getSizes() {
let {sizes} = this.props; const {sizes} = this.props;
let sizes_; let sizes_;
if (sizes) { if (sizes) {
@ -53,9 +75,13 @@ export default class SplitPane extends PureComponent {
const total = this.props.children.length; const total = this.props.children.length;
const count = new Array(total).fill(1 / total); const count = new Array(total).fill(1 / total);
sizes = count;
sizes_ = count; sizes_ = count;
} }
return sizes_;
}
onDrag(ev) {
const sizes_ = this.getSizes();
const i = this.paneIndex; const i = this.paneIndex;
const pos = ev[this.d3]; const pos = ev[this.d3];
@ -106,6 +132,7 @@ export default class SplitPane extends PureComponent {
<div <div
key="divider" key="divider"
onMouseDown={this.handleDragStart} onMouseDown={this.handleDragStart}
onDoubleClick={this.handleAutoResize}
style={{backgroundColor: borderColor}} style={{backgroundColor: borderColor}}
className={css('divider', `divider_${direction}`)} className={css('divider', `divider_${direction}`)}
/> />