diff options
| author | ljungster <parkerljung@gmail.com> | 2022-08-09 11:52:07 -0500 |
|---|---|---|
| committer | ljungster <parkerljung@gmail.com> | 2022-08-09 11:52:07 -0500 |
| commit | da3cb00f809a482a9fdf732f6a656fbc467cce27 (patch) | |
| tree | 9eb1fd278bc71d080d71bbfb7e3aec482d35f439 /src/client/views/collections/CollectionNoteTakingViewDivider.tsx | |
| parent | 1638527259a072dfc2ab286bd27bbb1751e8434e (diff) | |
| parent | 26670c8b9eb6e2fd981c3a0997bff5556b60504b (diff) | |
Merge branch 'parker' of https://github.com/brown-dash/Dash-Web into parker
Diffstat (limited to 'src/client/views/collections/CollectionNoteTakingViewDivider.tsx')
| -rw-r--r-- | src/client/views/collections/CollectionNoteTakingViewDivider.tsx | 112 |
1 files changed, 57 insertions, 55 deletions
diff --git a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx index ed5dc3715..7d31b3193 100644 --- a/src/client/views/collections/CollectionNoteTakingViewDivider.tsx +++ b/src/client/views/collections/CollectionNoteTakingViewDivider.tsx @@ -1,61 +1,63 @@ -import { action, observable } from "mobx"; -import * as React from "react"; +import { action, observable } from 'mobx'; +import * as React from 'react'; interface DividerProps { - index: number - xMargin: number - setColumnStartXCoords: (movementX: number, colIndex: number) => void + index: number; + xMargin: number; + setColumnStartXCoords: (movementX: number, colIndex: number) => void; } -export default class Divider extends React.Component<DividerProps>{ - @observable private isHoverActive = false; - @observable private isResizingActive = false; - - @action - private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => { - e.stopPropagation(); - e.preventDefault(); - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); - window.addEventListener("pointermove", this.onPointerMove); - window.addEventListener("pointerup", this.onPointerUp); - this.isResizingActive = true; - } +export class CollectionNoteTakingViewDivider extends React.Component<DividerProps> { + @observable private isHoverActive = false; + @observable private isResizingActive = false; - @action - private onPointerUp = () => { - this.isResizingActive = false; - this.isHoverActive = false; - window.removeEventListener("pointermove", this.onPointerMove); - window.removeEventListener("pointerup", this.onPointerUp); - } + @action + private registerResizing = (e: React.PointerEvent<HTMLDivElement>) => { + e.stopPropagation(); + e.preventDefault(); + window.removeEventListener('pointermove', this.onPointerMove); + window.removeEventListener('pointerup', this.onPointerUp); + window.addEventListener('pointermove', this.onPointerMove); + window.addEventListener('pointerup', this.onPointerUp); + this.isResizingActive = true; + }; - @action - onPointerMove = ({ movementX }: PointerEvent) => { - this.props.setColumnStartXCoords(movementX, this.props.index) - } - - render() { - return ( - <div className="columnResizer" - style={{ - display: "flex", - alignItems: "center", - cursor: "col-resize" - }} - onPointerEnter={action(() => this.isHoverActive = true)} - onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))} - > - <div className="columnResizer-handler" onPointerDown={e => this.registerResizing(e)} - style={{ - height: "95%", - width: 12, - borderRight: "4px solid #282828", - borderLeft: "4px solid #282828", - margin: "0px 10px" - }} - /> - </div> - ) - } -}
\ No newline at end of file + @action + private onPointerUp = () => { + this.isResizingActive = false; + this.isHoverActive = false; + window.removeEventListener('pointermove', this.onPointerMove); + window.removeEventListener('pointerup', this.onPointerUp); + }; + + @action + onPointerMove = ({ movementX }: PointerEvent) => { + this.props.setColumnStartXCoords(movementX, this.props.index); + }; + + render() { + return ( + <div + className="columnResizer" + style={{ + display: 'flex', + alignItems: 'center', + cursor: 'col-resize', + }} + onPointerEnter={action(() => (this.isHoverActive = true))} + onPointerLeave={action(() => !this.isResizingActive && (this.isHoverActive = false))}> + <div + className="columnResizer-handler" + onPointerDown={e => this.registerResizing(e)} + style={{ + height: '95%', + width: 12, + borderRight: '4px solid #282828', + borderLeft: '4px solid #282828', + margin: '0px 10px', + }} + /> + </div> + ); + } +} |
