components.form.fields.InputError.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of gears-frontend Show documentation

GEARS Frontend

There is a newer version: 0.80.3

import { useFieldInfo } from 'hooks/field';
import React, { useEffect, useRef, useState } from 'react';
import { SetState } from 'types/react';

import { Box, PopperPlacementType, Tooltip, Zoom } from '@mui/material';

const ErrorTooltip = ({children, error}: {children: React.ReactElement, error: string}) => {
  const [hover, setHover]        = useState(false)
  const [focus, setFocus]        = useState(false)
  const [viewOpen, setViewOpen]  = useState(false)
  const {info : { type } }       = useFieldInfo()

  const isSelect = type.includes("SELECT") || type.includes("DATE") || type.includes("TIME")
  const [placement, setPlacement] = useState(isSelect && focus ? "right" : "bottom-start")

  useEffect(() => {
    if (isSelect) {
      if (viewOpen)
        setPlacement("right")
      else
        setPlacement("bottom-start")
    }
  }, [viewOpen])

  const showError = (Boolean(hover) || Boolean(focus))
  const errorText = error ? error : ""

  return (
     {setHover(false)}}
      onOpen={() =>  {setHover(true)}}
      TransitionComponent={Zoom}
      title={errorText}
      disableInteractive
      
    >
      { /* BUGFIX: this 'div' is required. it reseives the onMouse events, such that the on hover events of the tooltip work properly. */ }
        {React.cloneElement(children, { setFocus, setViewOpen })}
      
    
  )
}

const InputError = ({children}: {children: React.ReactElement}) => {
  const fieldInfo  = useFieldInfo()
  const inMultiple = fieldInfo.info.inMultiple
  const error      = fieldInfo.augProps.error

  if (!inMultiple)
    return React.cloneElement(children, { setFocus: () => {}, setViewOpen: () => {}})
  else
    return 
}

export type InputErrorProps = {
  setFocus: SetState
  setViewOpen: SetState
}

export default InputError