web.lib.components.generate-project.extensions-cart.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, useState } from 'react';
import './extensions-cart.scss';
import { FaExclamation, FaRocket } from 'react-icons/fa';
import { Alert, Button, ButtonGroup, Dropdown } from 'react-bootstrap';
import { ExtensionRow } from '../extensions-picker/extension-row';
import DropdownToggle from 'react-bootstrap/DropdownToggle';
import { ExtensionEntry, TagEntry } from '../extensions-picker/extensions-picker';
import { useAnalytics } from '../../core/analytics';
import { InputProps } from '../../core/types';
import _ from 'lodash';
import classNames from 'classnames';

const SelectedExtensions = (props: any) => {
  return (
    
      Selected Extensions
      {props.extensions.length === 0 && (
        
           You haven't selected any extension for your Quarkus application. Browse and select from the list below.
        
      )}
      {props.extensions.length > 0 && (
        
          {
            props.extensions.map((ex, i) => (
               props.remove(ex.id, 'Selection')}
                pickerLayout={false}
                tagsDef={props.tagsDef}
              />
            ))
          }
        
      )}
    
  );
}


export interface ExtensionsCartValue {
  extensions: ExtensionEntry[];
}

export interface ExtensionsCartProps extends InputProps {
  tagsDef: TagEntry[];
}


export function ExtensionsCart(props: ExtensionsCartProps) {
  const [ isOpen, setIsOpen ] = useState(false);
  const [ openedFromChange, setOpenedFromChange ] = useState(false);

  const analytics = useAnalytics();

  function onMouseEnterFn(e) {
    onToggleFn(true);
  }

  function onMouseLeaveFn(e) {
    onToggleFn(false);
  }

  function onToggleFn(open: boolean) {
    setIsOpen(open);
    setOpenedFromChange(false);
  }

  function onRemove(id: string, type: string) {
    props.onChange({ extensions: _.filter(props.value.extensions, e => e.id !== id && id !== '*') });
    analytics.event('Unselect extension', { extension: id, type, element: 'extension-cart'});
  }

  useEffect(() => {
    let timeout: any;
    if (props.value.extensions.length > 0) {
      setOpenedFromChange(true);
      timeout = setTimeout(() => setOpenedFromChange(false), 3000);
    }
    return () => {
      if(timeout) {
        clearTimeout(timeout);
      }
    };
  }, [ props.value.extensions.length ])

  return (
    
      
        
        {props.value.extensions.length}
      

      
        
      
    
  );
}