pull/21833/head
Bruno Windels 2018-10-17 13:36:15 +02:00
parent 6fdcebb876
commit 8d3347bcfb
4 changed files with 20 additions and 9 deletions

View File

@ -14,7 +14,7 @@ const ResizeHandle = (props) => {
classNames.push('mx_ResizeHandle_reverse'); classNames.push('mx_ResizeHandle_reverse');
} }
return ( return (
<div className={classNames.join(' ')}/> <div className={classNames.join(' ')} />
); );
}; };

View File

@ -46,15 +46,14 @@ class CollapseDistributor extends FixedDistributor {
} }
resize(offset) { resize(offset) {
let newSize = this.sizeFromOffset(offset); const newSize = this.sizeFromOffset(offset);
const isCollapsedSize = newSize < this.toggleSize; const isCollapsedSize = newSize < this.toggleSize;
if (isCollapsedSize && !this.isCollapsed) { if (isCollapsedSize && !this.isCollapsed) {
this.isCollapsed = true; this.isCollapsed = true;
if (this.onCollapsed) { if (this.onCollapsed) {
this.onCollapsed(true, this.item); this.onCollapsed(true, this.item);
} }
} } else if (!isCollapsedSize && this.isCollapsed) {
else if (!isCollapsedSize && this.isCollapsed) {
if (this.onCollapsed) { if (this.onCollapsed) {
this.onCollapsed(false, this.item); this.onCollapsed(false, this.item);
} }

View File

@ -101,6 +101,7 @@ export class Resizer {
const vertical = resizeHandle.classList.contains(this.classNames.vertical); const vertical = resizeHandle.classList.contains(this.classNames.vertical);
const reverse = resizeHandle.classList.contains(this.classNames.reverse); const reverse = resizeHandle.classList.contains(this.classNames.reverse);
// eslint-disable-next-line new-cap
const sizer = new this.sizerCtor(this.container, vertical, reverse); const sizer = new this.sizerCtor(this.container, vertical, reverse);
const items = this._getResizableItems(); const items = this._getResizableItems();
@ -108,6 +109,7 @@ export class Resizer {
// if reverse, resize the item after the handle instead of before, so + 1 // if reverse, resize the item after the handle instead of before, so + 1
const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0); const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0);
const item = items[itemIndex]; const item = items[itemIndex];
// eslint-disable-next-line new-cap
const distributor = new this.distributorCtor( const distributor = new this.distributorCtor(
sizer, item, this.distributorCfg, sizer, item, this.distributorCfg,
items, this.container); items, this.container);

View File

@ -39,7 +39,10 @@ class Sizer {
item.style.flexGrow = Math.round(percent * 1000); item.style.flexGrow = Math.round(percent * 1000);
} }
/** returns how far the edge of the item is from the edge of the container */ /**
@param {Element} item the dom element being resized
@return {number} how far the edge of the item is from the edge of the container
*/
getItemOffset(item) { getItemOffset(item) {
const offset = (this.vertical ? item.offsetTop : item.offsetLeft) - this._getOffset(); const offset = (this.vertical ? item.offsetTop : item.offsetLeft) - this._getOffset();
if (this.reverse) { if (this.reverse) {
@ -49,17 +52,20 @@ class Sizer {
} }
} }
/** returns the width/height of an item in the container */ /**
@param {Element} item the dom element being resized
@return {number} the width/height of an item in the container
*/
getItemSize(item) { getItemSize(item) {
return this.vertical ? item.offsetHeight : item.offsetWidth; return this.vertical ? item.offsetHeight : item.offsetWidth;
} }
/** returns the width/height of the container */ /** @return {number} the width/height of the container */
getTotalSize() { getTotalSize() {
return this.vertical ? this.container.offsetHeight : this.container.offsetWidth; return this.vertical ? this.container.offsetHeight : this.container.offsetWidth;
} }
/** container offset to offsetParent */ /** @return {number} container offset to offsetParent */
_getOffset() { _getOffset() {
return this.vertical ? this.container.offsetTop : this.container.offsetLeft; return this.vertical ? this.container.offsetTop : this.container.offsetLeft;
} }
@ -72,7 +78,11 @@ class Sizer {
} }
} }
/** returns the position of cursor at event relative to the edge of the container */ /**
@param {MouseEvent} event the mouse event
@return {number} the distance between the cursor and the edge of the container,
along the applicable axis (vertical or horizontal)
*/
offsetFromEvent(event) { offsetFromEvent(event) {
const pos = this.vertical ? event.pageY : event.pageX; const pos = this.vertical ? event.pageY : event.pageX;
if (this.reverse) { if (this.reverse) {