How to use the graphiql/dist/utility/elementPosition.getTop function in graphiql
To help you get started, we’ve selected a few graphiql examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
prisma-labs / graphql-playground / packages / graphql-playground-react / src / components / Playground / GraphQLEditor.tsx View on Github 
private handleVariableResizeStart = downEvent => {
downEvent.preventDefault()
let didMove = false
const wasOpen = this.props.variableEditorOpen
const hadHeight = this.props.variableEditorHeight
const offset = downEvent.clientY - getTop(downEvent.target)
if (
wasOpen &&
(downEvent.target === this.queryVariablesRef ||
downEvent.target === this.httpHeadersRef)
) {
return
}
let onMouseMove: any = moveEvent => {
if (moveEvent.buttons === 0) {
return onMouseUp()
}
didMove = truelet onMouseMove: any = moveEvent => {
if (moveEvent.buttons === 0) {
return onMouseUp()
}
didMove = true
const editorBar = ReactDOM.findDOMNode(this.editorBarComponent)
const topSize = moveEvent.clientY - getTop(editorBar) - offset
const bottomSize = editorBar.clientHeight - topSize
if (bottomSize < 60) {
this.props.closeVariables(hadHeight)
} else {
this.props.openVariables(bottomSize)
}
}graphiql
An graphical interactive in-browser GraphQL IDE.
