mirror of
https://github.com/tulir/gomuks.git
synced 2025-04-20 10:33:41 -05:00
55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
// gomuks - A Matrix client written in Go.
|
|
// Copyright (C) 2024 Tulir Asokan
|
|
//
|
|
// This program is free software: you can redistribute it and/or modify
|
|
// it under the terms of the GNU Affero General Public License as published by
|
|
// the Free Software Foundation, either version 3 of the License, or
|
|
// (at your option) any later version.
|
|
//
|
|
// This program is distributed in the hope that it will be useful,
|
|
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
// GNU Affero General Public License for more details.
|
|
//
|
|
// You should have received a copy of the GNU Affero General Public License
|
|
// along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
import React, { CSSProperties } from "react"
|
|
import useEvent from "@/util/useEvent.ts"
|
|
import "./ResizeHandle.css"
|
|
|
|
export interface ResizeHandleProps {
|
|
width: number
|
|
minWidth: number
|
|
maxWidth: number
|
|
setWidth: (width: number) => void
|
|
className?: string
|
|
style?: CSSProperties
|
|
inverted?: boolean
|
|
}
|
|
|
|
const ResizeHandle = ({ width, minWidth, maxWidth, setWidth, style, className, inverted }: ResizeHandleProps) => {
|
|
const onMouseDown = useEvent((evt: React.MouseEvent<HTMLDivElement>) => {
|
|
const origWidth = width
|
|
const startPos = evt.clientX
|
|
const onMouseMove = (evt: MouseEvent) => {
|
|
let delta = evt.clientX - startPos
|
|
if (inverted) {
|
|
delta = -delta
|
|
}
|
|
setWidth(Math.max(minWidth, Math.min(maxWidth, origWidth + delta)))
|
|
evt.preventDefault()
|
|
}
|
|
const onMouseUp = () => {
|
|
document.removeEventListener("mousemove", onMouseMove)
|
|
document.removeEventListener("mouseup", onMouseUp)
|
|
}
|
|
document.addEventListener("mousemove", onMouseMove)
|
|
document.addEventListener("mouseup", onMouseUp)
|
|
evt.preventDefault()
|
|
})
|
|
return <div className={`resize-handle-outer ${className ?? ""}`} style={style}>
|
|
<div className="resize-handle-inner" onMouseDown={onMouseDown}/>
|
|
</div>
|
|
}
|
|
|
|
export default ResizeHandle
|