components.process.ProcessApps.tsx Maven / Gradle / Ivy

Go to download
import Loader from 'components/common/Loader';
import MuiIcon from 'components/common/MuiIcon';
import SearchField from 'components/common/SearchField';
import StickyBannerLayout from 'components/layout/common/StickyBannerLayout';
import ProcessRenderProvider from 'contexts/ProcessRenderContext';
import { ProcessInfo, useTranslatedProcesses } from 'hooks/process';
import { useProcessRenderContext, useTiles } from 'hooks/render';
import { useTranslator } from 'hooks/translator';
import React, { useState } from 'react';
import { Anchor, SetState } from 'types/react';

import { Close as CloseIcon } from '@mui/icons-material';
import { Box, useTheme } from '@mui/material';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import Tooltip from '@mui/material/Tooltip';

import { PathViewer } from './ProcessOptionBar';
import Tile from './Tile';

const ProcesseAppsItem = () => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event: React.SyntheticEvent) => {
    setAnchorEl(event.currentTarget);
  }

  return (
    
      
      
    
  )
}

const AppsButton = ({onClick}: {onClick: (e: React.SyntheticEvent) => void}) => {
  const iconStyle = { height: '32px', width: '32px' }
  const theme     = useTheme()
  // @ts-ignore
  const color     = theme?.components?.banner?.color
  const { t } = useTranslator()

  return (
    
      
        
      
    
  )
}

export const AppsMenu = ({anchorEl, setAnchorEl}: {anchorEl: Anchor, setAnchorEl: SetState}) => {
  const open = Boolean(anchorEl);
  const {loading, processInfo} = useTranslatedProcesses()

  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
      
      
         theme.palette.grey[500],
          }}
        >
          
        
      
        { loading 
          ? 
          : 
        }
      
  )
}

const AppsLoader = () => {
  return (
    
      
    
  ) 
}

const AppsPanel = ({processInfo, onClick}: {processInfo: ProcessInfo, onClick?: (e?: React.SyntheticEvent) => void}) => {
  return (
    
      
        } >
          

        
      
    
  )
}

const ProcessAppsView = ({onClick}: {onClick?: (e?: React.SyntheticEvent) => void}) => {
  const tiles = useTiles() 

  return (
    
      { tiles.map((tile, index) => 
        ) 
      }
    
  )
}

const ProcessOptionBar = () => {
  const {filter, setFilter, setCurrentFilter, groupBy, setGroupBy, processRendering, setProcessRendering, path, setPath} = useProcessRenderContext()
  const { t } = useTranslator()

  return (
    
      
        
          
        
        { processRendering != 'standard' 
          ? ( 
               
              )
            : null
        }
      
    
  )
}


const menuProps = {
  elevation: 0,
  sx: {
    display: "flex",
    minWidth: "320px",
    width: "320px",
    maxHeight: "90%",
    filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
    mt: 1.5,
    '& .MuiAvatar-root': {
      width: 32,
      height: 32,
      ml: -0.5,
      mr: 1,
    },
    '&:before': {
      content: '""',
      display: 'block',
      position: 'absolute',
      top: -20,
      right: 18,
      width: 10,
      height: 10,
      bgcolor: 'background.paper',
      transform: 'translateY(-50%) rotate(45deg)',
      zIndex: 0,
    },
  },
}

export default ProcesseAppsItem