design-react-kit 3.3.1 → 4.0.1

package/src/Megamenu/MegamenuHighlightColumn.tsx

@@ -0,0 +1,33 @@
+import React, { FC, HTMLAttributes } from 'react';
+import { Col, Row } from 'reactstrap';
+import classNames from 'classnames';
+
+export interface MegamenuHCProps extends HTMLAttributes<HTMLDivElement> {
+  /** Quanto abilitato gestisce il contenuto della colonna come una sezione che può contentere immagini, testo, ect. */
+  description?: boolean;
+  /** Classi aggiuntive da usare per il componente Megamenu Highlight Column */
+  className?: string;
+}
+export const MegamenuHighlightColumn: FC<MegamenuHCProps> = ({
+  description,
+  className,
+  children,
+  ...attributes
+}) => {
+  const classes = classNames(className, 'it-vertical', {
+    'it-description': description
+  });
+  return (
+    <Col {...attributes}>
+      <Row className='max-height-col'>
+        <Col className={classes}>
+          {description ? (
+            <div className='description-content'>{children}</div>
+          ) : (
+            <>{children}</>
+          )}
+        </Col>
+      </Row>
+    </Col>
+  );
+};

package/src/Megamenu/MegamenuItem.tsx

@@ -0,0 +1,27 @@
+import React, { FC, HTMLAttributes } from 'react';
+import { DropdownMenu, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import classNames from 'classnames';
+
+export interface MegamenuItemProps extends HTMLAttributes<HTMLUListElement> {
+  /** Etichetta del megamenu visibile all'interno della barra di navigazione */
+  itemName: string;
+  /** Classi aggiuntive da usare per il componente UncontrolledDropdown */
+  className?: string;
+}
+
+export const MegamenuItem: FC<MegamenuItemProps> = ({
+  itemName,
+  className,
+  children,
+  ...attributes
+}) => {
+  const classes = classNames(className, 'megamenu');
+  return (
+    <UncontrolledDropdown nav tag='li' className={classes} {...attributes}>
+      <DropdownToggle caret nav>
+        {itemName}
+      </DropdownToggle>
+      <DropdownMenu positionFixed>{children}</DropdownMenu>
+    </UncontrolledDropdown>
+  );
+};

package/src/Modal/Modal.tsx

@@ -0,0 +1,79 @@
+import React, { FC, HTMLAttributes } from 'react';
+import { CSSModule, FadeProps, Modal as InnerModal } from 'reactstrap';
+import classnames from 'classnames';
+
+export interface ModalProps extends HTMLAttributes<HTMLElement> {
+  [key: string]: any;
+  /** Indica lo stato del modale. Valore di default: undefined. */
+  isOpen?: boolean;
+  autoFocus?: boolean;
+  size?: string;
+  /** Funzione da chiamare quando l'utente clicca sul backdrop. Valore di default: undefined. */
+  toggle?: React.KeyboardEventHandler<any> | React.MouseEventHandler<any>;
+  keyboard?: boolean;
+  backdrop?: boolean | 'static';
+  /**
+   * Abilitare quando si vuole che solo il contenuto della modale sia scrollabile.
+   * Valore di default: undefined.
+   * */
+  scrollable?: boolean;
+  onEnter?: () => void;
+  onExit?: () => void;
+  onOpened?: () => void;
+  onClosed?: () => void;
+  cssModule?: CSSModule;
+  wrapClassName?: string;
+  modalClassName?: string;
+  backdropClassName?: string;
+  contentClassName?: string;
+  zIndex?: number | string;
+  fade?: boolean;
+  backdropTransition?: FadeProps;
+  modalTransition?: FadeProps;
+  centered?: boolean;
+  external?: React.ReactNode;
+  labelledBy?: string;
+  unmountOnClose?: boolean;
+  returnFocusAfterClose?: boolean;
+  container?: string | HTMLElement | React.RefObject<HTMLElement>;
+  innerRef?: React.Ref<HTMLElement>;
+  /** Abilitare quando si utilizza una icona nell'intestazione, al fine di formattare correttamente il modale. Valore di default: undefined. */
+  withIcon?: boolean;
+  /** Abilitare quando si utilizza una LinkList nell'intestazione, al fine di formattare correttamente il modale. Valore di default: undefined. */
+  withLinkList?: boolean;
+  /** Abilitare quando si vuole mostrare un breve messaggio di conferma. Valore di default: undefined. */
+  popConfirm?: boolean;
+  /** Abilitare quando si vuole mostrare un modale allineato a sinistra. Valore di default: undefined. */
+  align?: 'left' | 'right';
+}
+
+export const Modal: FC<ModalProps> = ({
+  withIcon,
+  withLinkList,
+  popConfirm,
+  modalClassName,
+  align,
+  scrollable,
+  className,
+  ...props
+}) => {
+  const isAligned = align != null && ['left', 'right'].includes(align);
+  const modalDialogClassnames = classnames(modalClassName, {
+    'alert-modal': withIcon,
+    'it-dialog-link-list': withLinkList,
+    'popconfirm-modal': popConfirm,
+    'it-dialog-scrollable': scrollable && isAligned
+  });
+  const modalClassnames = classnames(className, {
+    'modal-dialog-left': align === 'left',
+    'modal-dialog-right': align === 'right'
+  });
+  return (
+    <InnerModal
+      {...props}
+      scrollable={!isAligned && scrollable}
+      className={modalClassnames}
+      modalClassName={modalDialogClassnames}
+    />
+  );
+};

package/src/Modal/ModalBody.tsx

@@ -0,0 +1,11 @@
+import React, { FC, HTMLAttributes } from 'react';
+import { CSSModule, ModalBody as InnerModalBody } from 'reactstrap';
+
+export interface ModalBodyProps extends HTMLAttributes<HTMLElement> {
+  tag?: React.ElementType;
+  cssModule?: CSSModule;
+}
+
+export const ModalBody: FC<ModalBodyProps> = (props) => (
+  <InnerModalBody {...props} />
+);

package/src/Modal/ModalFooter.tsx

@@ -0,0 +1,11 @@
+import React, { FC, HTMLAttributes } from 'react';
+import { CSSModule, ModalFooter as InnerModalFooter } from 'reactstrap';
+
+export interface ModalFooterProps extends HTMLAttributes<HTMLElement> {
+  tag?: React.ElementType;
+  cssModule?: CSSModule;
+}
+
+export const ModalFooter: FC<ModalFooterProps> = (props) => (
+  <InnerModalFooter {...props} />
+);

package/src/Modal/ModalHeader.tsx

@@ -0,0 +1,70 @@
+import React, { FC, HTMLAttributes } from 'react';
+import { CSSModule, Util } from 'reactstrap';
+import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+// @ts-expect-error
+const { mapToCssModules } = Util;
+
+export interface ModalHeaderProps extends HTMLAttributes<HTMLElement> {
+  [key: string]: any;
+  cssModule?: CSSModule;
+  /** Componente che conterrà il nodo titolo. Valore di default: h5 */
+  tag?: React.ElementType;
+  /** Componente che contenitore per l'header. Valore di default: div. */
+  wrapTag?: React.ElementType;
+  /** Funzione da passare al tasto di chiusura nell'intestazione. Quando questa funzione non è presente il tasto di chiusura non viene mostrato. Valore di default: undefined */
+  toggle?: React.MouseEventHandler<any>;
+  /** Indica il nome dell'icona da utilizzare nel titolo. */
+  icon?: string;
+  /** Classi da aggiungere al nodo contenitore. */
+  className?: string;
+  /** Utilizzato per personalizzare il messaggio peer screen reader per il bottone di chiusura del modale. Valore di default: 'Close' */
+  closeAriaLabel?: string;
+}
+
+export const ModalHeader: FC<ModalHeaderProps> = ({
+  icon,
+  className,
+  children,
+  Util,
+  toggle,
+  tag: Tag = 'h5',
+  wrapTag: WrapTag = 'div',
+  closeAriaLabel = 'Close',
+  close,
+  charCode = 215,
+  cssModule,
+  ...props
+}) => {
+  const classes = mapToCssModules(
+    classNames(className, 'modal-header'),
+    cssModule
+  );
+
+  let CloseButton;
+
+  if (!close && toggle) {
+    var closeIcon =
+      typeof charCode === 'number' ? String.fromCharCode(charCode) : charCode;
+    CloseButton = (
+      <button
+        type='button'
+        onClick={toggle}
+        className={mapToCssModules('close', cssModule)}
+        aria-label={closeAriaLabel}
+      >
+        <span aria-hidden>{closeIcon}</span>
+      </button>
+    );
+  }
+
+  return (
+    <WrapTag {...props} className={classes}>
+      {icon != null ? <Icon icon={icon} /> : null}
+      <Tag className={mapToCssModules('modal-title', cssModule)}>
+        {children}
+      </Tag>
+      {close || CloseButton}
+    </WrapTag>
+  );
+};

package/src/Nav/Nav.tsx

@@ -0,0 +1,56 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import { Nav as NavBase } from 'reactstrap';
+import classNames from 'classnames';
+
+export interface NavProps extends HTMLAttributes<HTMLUListElement> {
+  /**
+   * Renderizza i componenti NavItem al suo interno come tab.
+   */
+  tabs?: boolean;
+  /**
+   * Renderizza i componenti NavItem al suo interno come pills.
+   */
+  pills?: boolean;
+  /**
+   * Renderizza i componenti NavItem al suo interno come card.
+   */
+  card?: boolean;
+  /**
+   * Se utilizzata all'interno di una navbar, impostarlo su `true`. In caso di Header Nav, impostarlo a `true`.
+   */
+  navbar?: boolean;
+  /** Se abilitato tutti i NavItem all'interno avranno la stessa larghezza */
+  justified?: boolean;
+  /** Se abilitato i NavItem all'intero occuperanno tutto lo spazio disponibile  */
+  fill?: boolean;
+  /** Da utilizzare per rendere il componente Nav verticale. Viene abilitato automaticamente in versione mobile. Valori possibili sono `true`, `false` o `"xs"` */
+  vertical?: boolean | 'xs';
+  /** Da utilizzare per cambiare l'allineamento all'interno della Nav. Valori possibili sono `"center"` o `"end"` per posizionare il contenuto a centro o sulla destra. */
+  horizontal?: 'center' | 'end';
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Nav */
+  className?: string;
+  /** Adds ability to incorporate secondary nav items */
+  secondary?: boolean;
+}
+
+export const Nav: FC<NavProps> = ({
+  className,
+  tag = 'ul',
+  vertical = false,
+  secondary,
+  ...attributes
+}) => {
+  const classes = classNames(className, {
+    'navbar-secondary': secondary
+  });
+  return (
+    <NavBase
+      className={classes}
+      tag={tag}
+      vertical={vertical}
+      {...attributes}
+    />
+  );
+};

package/src/Notification/Notification.tsx

@@ -0,0 +1,60 @@
+import React, { CSSProperties, FC, useEffect } from 'react';
+import { ToastProps, useToast, cssTransition } from 'react-toastify';
+import { NotificationToastProps } from './NotificationContent';
+import { NotificationCommonProps } from './types';
+
+export type NotificationProps = Omit<ToastProps, 'transition'> &
+  NotificationCommonProps &
+  NotificationToastProps;
+
+const dummyTransition = cssTransition({ enter: '', exit: '' });
+
+export const Notification: FC<NotificationProps> = (props) => {
+  const { toastRef, eventHandlers } = useToast({
+    ...props,
+    transition: dummyTransition
+  });
+  const {
+    children,
+    autoClose,
+    onClick,
+    role,
+    toastId,
+    deleteToast,
+    closeToast,
+    isIn
+  } = props;
+
+  const customStyle: CSSProperties = {
+    display: isIn ? 'block' : 'none'
+  };
+
+  useEffect(() => {
+    if (!isIn) deleteToast();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isIn]);
+
+  useEffect(() => {
+    let timer: NodeJS.Timeout | number;
+    if (autoClose) {
+      timer = setTimeout(() => closeToast(), autoClose);
+    }
+    return () => {
+      if (timer != null) {
+        clearTimeout(Number(timer));
+      }
+    };
+  }, [autoClose, closeToast]);
+  return (
+    <div
+      id={toastId as string}
+      onClick={onClick}
+      {...eventHandlers}
+      style={customStyle}
+      ref={toastRef}
+      {...(isIn && { role: role })}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Notification/NotificationContent.tsx

@@ -0,0 +1,135 @@
+import React, { CSSProperties, ReactChild } from 'react';
+import { Button } from '../Button/Button';
+import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+import { usePosition } from './usePosition';
+import { NotificationCommonProps } from './types';
+
+export interface NotificationToastProps {
+  /** Indica quale icona affiancare al titolo. */
+  icon?: string;
+  /** Lo stato corrente della notifica (modifica il colore delle icone e bordo) */
+  state?: 'success' | 'error' | 'info' | 'warning';
+  /** Il titolo della notifica */
+  title?: string;
+}
+
+type NotificationElementProps = {
+  closeToast?: () => void;
+  toastProps?: any;
+  title: string;
+  body?: ReactChild;
+  options: NotificationOptions;
+};
+
+export const getBorderStyleFix = (fix: NotificationCommonProps['fix']) => {
+  const borderReset = ['top', 'bottom', 'right', 'left']
+    .filter((curPosition) =>
+      fix === 'left' ? curPosition !== 'right' : curPosition !== 'left'
+    )
+    .map(
+      (borderPosition) =>
+        `border${
+          borderPosition[0].toUpperCase() + borderPosition.substring(1)
+        }` as 'borderTop' | 'borderBottom' | 'borderLeft' | 'borderRight'
+    );
+
+  const customStyle: CSSProperties = {};
+  for (const borderPos of borderReset) {
+    customStyle[borderPos] = 'none';
+  }
+  return customStyle;
+};
+
+export type NotificationOptions = NotificationCommonProps &
+  Pick<NotificationToastProps, 'icon' | 'state'> & {
+    /* Quando abilitato mostra un pulsante per la chiusura del toast prima della chiusura naturale. Default: `false`. */
+    dismissable?: boolean;
+    /* Una funzione invocata all'apertura della notifica */
+    onOpen?: <T = NotificationElementProps>(props: T) => void;
+    /* Una funziona invocata alla chiusura nella notifica */
+    onClose?: <T = NotificationElementProps>(props: T) => void;
+  };
+
+function pickIcon(state: NotificationToastProps['state']) {
+  switch (state) {
+    case 'error':
+      return 'it-close-circle';
+    case 'info':
+      return 'it-info-circle';
+    case 'warning':
+      return 'it-error';
+    case 'success':
+      return 'it-check-circle';
+    default:
+      return undefined;
+  }
+}
+
+function NotificationElement({
+  closeToast,
+  toastProps,
+  title,
+  body,
+  options
+}: NotificationElementProps) {
+  const globalFix = usePosition();
+  const { icon: userIcon, state, fix: localFix, dismissable } = options;
+  const fixPosition =
+    localFix == null && globalFix ? globalFix : localFix || globalFix;
+  const { autoClose, style } = toastProps;
+  const content = typeof body === 'string' ? <p>{body}</p> : body;
+  const icon = userIcon || pickIcon(state);
+
+  const borderFixes = getBorderStyleFix(fixPosition);
+
+  const wrapperClass = classNames('notification', state, {
+    [`${fixPosition}-fix`]: fixPosition,
+    'with-icon': icon,
+    dismissable: dismissable || !autoClose
+  });
+
+  // Need to override some toast styling here
+  const customStyle: CSSProperties = {
+    ...style,
+    ...borderFixes,
+    // force a display as the notification class has a "display: none" set
+    display: 'block'
+  };
+
+  return (
+    <div className={wrapperClass} style={customStyle}>
+      <h5>
+        {title}
+        {icon ? <Icon icon={icon} /> : null}
+      </h5>
+      {content}
+      {(!autoClose || dismissable) && (
+        <Button className='notification-close' onClick={closeToast}>
+          <Icon icon='it-close' />
+          <span className='sr-only'>Chiudi notifica: {title}</span>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Internal use only. Exported for documentation purposes.
+ * @internal
+ */
+export const createNotification = (
+  title: string,
+  body: ReactChild | undefined,
+  options: NotificationOptions,
+  closeToast?: () => void,
+  toastProps?: any
+) => (
+  <NotificationElement
+    title={title}
+    body={body}
+    options={options}
+    closeToast={closeToast}
+    toastProps={toastProps}
+  />
+);

package/src/Notification/NotificationManager.tsx

@@ -0,0 +1,65 @@
+import React, { CSSProperties } from 'react';
+import { cssTransition, useToastContainer } from 'react-toastify';
+import { Notification } from './Notification';
+import { getBorderStyleFix } from './NotificationContent';
+import { NotificationCommonProps } from './types';
+import { PositionContext } from './usePosition';
+
+const KitTransition = cssTransition({
+  enter: `d-block`,
+  exit: `d-none`,
+  appendPosition: false
+});
+
+export interface NotificationManagerProps extends NotificationCommonProps {
+  /* Stili inline da applicare al container */
+  style?: CSSProperties;
+}
+
+export const NotificationManager = (props: NotificationManagerProps) => {
+  const customStyle: CSSProperties = {
+    ...props.style,
+    ...getBorderStyleFix(props.fix)
+  };
+
+  const hookProps = {
+    autoClose: props.duration ?? 6000,
+    closeOnClick: props.closeOnClick ?? true,
+    hideProgressBar: true,
+    transition: KitTransition,
+    rtl: false,
+    pauseOnHover: true,
+    pauseOnFocusLoss: true,
+    newestOnTop: false, // TODO: sort this out
+    draggable: false,
+    role: 'alert',
+    style: customStyle,
+    enableMultiContainer: props.containerId != null // enable multi container when an explicit id is passed
+  };
+
+  const { getToastToRender, containerRef, isToastActive } = useToastContainer(
+    hookProps
+  );
+
+  const { containerId, style, fix } = props;
+
+  return (
+    <PositionContext.Provider value={fix}>
+      <div ref={containerRef} id={containerId as string} style={style}>
+        {getToastToRender((_, toastList) => {
+          return toastList.map(({ content, props: toastProps }) => {
+            return (
+              <Notification
+                {...toastProps}
+                isIn={isToastActive(toastProps.toastId)}
+                key={`notification-${toastProps.key}`}
+              >
+                {content}
+              </Notification>
+            );
+          });
+        })}
+      </div>
+    </PositionContext.Provider>
+  );
+};

package/src/Notification/core.tsx

@@ -0,0 +1,46 @@
+import { ReactChild } from 'react';
+import { toast } from 'react-toastify';
+import { createNotification } from './NotificationContent';
+import type { NotificationOptions } from './NotificationContent';
+import { NotificationId } from './types';
+
+export function notify(
+  title: string,
+  options?: NotificationOptions
+): NotificationId;
+
+export function notify(
+  title: string,
+  body: ReactChild,
+  options?: NotificationOptions
+): NotificationId;
+
+export function notify(
+  title: string,
+  bodyOrOptions?: ReactChild | NotificationOptions,
+  options?: NotificationOptions
+): NotificationId {
+  let body: ReactChild | undefined = isReactChild(bodyOrOptions)
+    ? bodyOrOptions
+    : undefined;
+  const safeOptions = isReactChild(bodyOrOptions)
+    ? { ...options }
+    : bodyOrOptions || {};
+  const NotificationContent = createNotification(title, body, safeOptions);
+  const internalOptions = {
+    ...safeOptions,
+    autoClose: safeOptions.duration
+  };
+  return toast(NotificationContent, internalOptions) as NotificationId;
+}
+
+function isReactChild(
+  el: ReactChild | NotificationOptions | undefined
+): el is ReactChild {
+  return (
+    el != null &&
+    (typeof el === 'string' || typeof el === 'number' || 'type' in el)
+  );
+}
+
+notify.dismiss = (id?: NotificationId) => toast.dismiss(id);

package/src/Notification/index.ts

@@ -0,0 +1,9 @@
+/* @internal */
+export { createNotification } from './NotificationContent';
+export { NotificationManager } from './NotificationManager';
+export { notify } from './core';
+
+export type { NotificationProps } from './Notification';
+export type { NotificationManagerProps } from './NotificationManager';
+export type { NotificationOptions } from './NotificationContent';
+export type { NotificationId } from './types';

package/src/Notification/types.ts

@@ -0,0 +1,12 @@
+export interface NotificationCommonProps {
+  /* Utilizzare questo attributo per gestire più container */
+  containerId?: string | number;
+  /* Indica per quanto tempo la notifica rimarrà visibile prima di sparire. Quanto impostato a 0ms la notifica rimarrà aperta a tempo indefinito e verrà mostrato anche il tasto di chiusura. Il valore di default è 6000 ms. */
+  duration?: number;
+  /* Indica il posizionamento fisso della notifica. Non è abilitato di default. */
+  fix?: 'top' | 'bottom' | 'right' | 'left';
+  /* Quando abilitato permette di chiudere la notifica con un click. Default: `true`. */
+  closeOnClick?: boolean;
+}
+
+export type NotificationId = string;

package/src/Notification/usePosition.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+import { NotificationCommonProps } from './types';
+
+export const PositionContext = createContext<NotificationCommonProps['fix']>(
+  undefined
+);
+
+export function usePosition() {
+  const context = useContext(PositionContext);
+  return context;
+}

package/src/Pager/Pager.tsx

@@ -0,0 +1,48 @@
+import React, { FC, HTMLAttributes, ElementType } from 'react';
+import classNames from 'classnames';
+
+export interface PagerProps extends HTMLAttributes<HTMLElement> {
+  /** Etichetta di descrizione del contenuto del componente Pager */
+  'aria-label': string;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati per la l'elemento lista interno */
+  listTag?: ElementType;
+  /** Classi aggiuntive da usare per il componente Pager */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente di lista interno Pager */
+  listClassName?: string;
+  /** Utilizzare questo attributo per indicare il numero totale di pagine */
+  total?: { ariaLabel: string; label: string };
+}
+
+export const Pager: FC<PagerProps> = ({
+  className,
+  tag = 'nav',
+  listTag: ListTag = 'ul',
+  listClassName,
+  children,
+  total,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const classes = classNames(className, 'pagination-wrapper', {
+    'pagination-total': total
+  });
+  const listClasses = classNames(listClassName, 'pagination');
+  const { ariaLabel, label } = total || {};
+  const totalAriaLabel = ariaLabel ? (
+    <span className='sr-only'>{ariaLabel}</span>
+  ) : null;
+  return (
+    <Tag className={classes} {...attributes}>
+      <ListTag className={listClasses}>{children}</ListTag>
+      {total ? (
+        <p>
+          {totalAriaLabel}
+          {label}
+        </p>
+      ) : null}
+    </Tag>
+  );
+};