web.lib.components.extensions-picker.extension-row.tsx Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of code-quarkus Show documentation

Customize a Web Interface to generate Quarkus starter projects.

There is a newer version: 37

import React, { useEffect, useRef, useState } from 'react';
import classNames from 'classnames';
import { ExtensionEntry, TagEntry } from './extensions-picker';
import { ExtensionTags } from './extension-tags';
import { ExtensionMoreDropdown } from './extension-more-dropdown';
import { FaRegCheckSquare, FaRegSquare, FaTrashAlt } from 'react-icons/fa';
import './extension-row.scss';
import { ExtensionsOrigin } from './extensions-origin';

export interface ExtensionRowProps extends ExtensionEntry {
  selected?: boolean;
  keyboardActived?: boolean;
  pickerLayout?: boolean;
  buildTool?: string;
  tagsDef: TagEntry[];

  onClick(id: string): void;
}

export function ExtensionRow(props: ExtensionRowProps) {
  const [ hover, setHover ] = useState(false);
  const ref = useRef(null);

  function scrollIntoView() {
    if (ref.current) {
      ref.current.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' });
    }
  }

  const onClick = () => {
    props.onClick(props.id);
    setHover(false);
  };

  const activationEvents = {
    onClick,
    onMouseEnter: () => setHover(true),
    onMouseLeave: () => setHover(false),
  };

  useEffect(() => {
    if (props.keyboardActived) {
      scrollIntoView();
    }
  }, [ props.keyboardActived ])

  const description = props.description || '...';
  const selected = props.selected || props.default;
  const ga = props.id.split(':');
  return (
    
      {props.pickerLayout && (
        
          {!selected && !(hover) && }
          {(hover || selected) && }
        
      )}

      
        {props.name}
         [{ga[1]}]
        
        {props.tags && props.tags.map((s, i) => )}
      

      {!props.pickerLayout && (
        
          {hover && props.selected && }
        
      )}

      {props.pickerLayout && (
        
          {description}
          
            
          
        
      )}
    
  );
}