import React from 'react' ; import FormatPaintIcon from '@material-ui/icons/FormatPaint' ; import { ButtonGroup , Button , Tooltip } from '@material-ui/core' ; import styled from 'styled-components' ; import { format } from 'sql-formatter' ; import 'codemirror/lib/codemirror.css' ; import 'codemirror/mode/sql/sql' ; import 'codemirror/theme/lesser-dark.css' ; import CodeMirror from '@skidding/react-codemirror' ; const Container = styled . div `
  position: relative;
` ; const SquareBtn = styled ( Button ) `
  padding: 5px;
` ; const Toolbar = styled . div `
  position: absolute;
  z-index: 1000;
  top: 5px;
  right: 23px;
  opacity: 0.3;
  transition: opacity 0.3s ease;

  &:hover {
    opacity: 1;
  }
` ; interface SchemaSqlInputProps { sql : string ; onChange : ( newSql : string ) => void ; runQuery : ( ) => void ; } const SchemaSqlInput = ( { sql , onChange , runQuery } ) => { const formatQuery = ( ) => { const formatted = format ( sql , { language : 'postgresql' , uppercase : true } ) ; onChange ( formatted ) ; } ; const options = { lineNumbers : true , mode : 'sql' , theme : 'lesser-dark' , extraKeys : { 'Ctrl-Enter' : runQuery , 'Ctrl-F' : formatQuery , } , } ; return ( < Container > < Toolbar > < ButtonGroup variant = "contained" > < Tooltip title = "Auto-Format Query" > < SquareBtn onClick = { formatQuery } > < FormatPaintIcon /> < /SquareBtn> < /Tooltip> < /ButtonGroup> < /Toolbar> < CodeMirror onChange = { onChange } options = { options } value = { sql } / > < /Container>); } ; export default SchemaSqlInput ;