design-react-kit 3.3.1 → 4.0.1

package/src/Input/TimeInput.tsx

@@ -0,0 +1,303 @@
+import React, { HTMLAttributes, ReactNode, useState } from 'react';
+import classNames from 'classnames';
+
+import { noop } from '../utils';
+import { Input, InputProps } from './Input';
+import { Icon } from '../Icon/Icon';
+import { getClasses, getInfoTextControlClass } from './utils';
+
+export const addTime = (value: string, maxValue: number): string => {
+  const currTime = Number(value);
+  return currTime >= maxValue ? value : (currTime + 1).toString();
+};
+
+export const subtractTime = (value: string, minValue: number): string => {
+  const currTime = Number(value);
+  return currTime <= minValue ? value : (currTime - 1).toString();
+};
+
+export const formatTime = (value: number | string): string =>
+  `0${value}`.substr(-2);
+
+interface TimeInputContainerProps extends HTMLAttributes<HTMLElement> {
+  wrapperClass: string;
+  infoTextClass: string;
+  label: string | ReactNode | undefined;
+  infoText: string | undefined;
+  invalid: boolean;
+  id: string;
+  button: ReactNode;
+  children: ReactNode;
+}
+
+const TimeInputContainer = ({
+  wrapperClass,
+  children,
+  label,
+  id,
+  infoText,
+  button,
+  infoTextClass,
+  invalid
+}: TimeInputContainerProps) => {
+  const infoId = id ? `${id}Description` : undefined;
+  const activeClass = 'active';
+
+  return (
+    <div className={classNames(wrapperClass)}>
+      <div className='input-group'>
+        {children}
+        <label
+          htmlFor={id}
+          className={classNames(activeClass, { 'error-label': invalid })}
+        >
+          {label}
+        </label>
+        <small id={infoId} className={infoTextClass}>
+          {infoText}
+        </small>
+        <div className='input-group-append'>{button}</div>
+      </div>
+    </div>
+  );
+};
+
+type UnusedProps = 'plaintext' | 'onBlur' | 'value' | 'type';
+
+export interface TimeInputProps extends Omit<InputProps, UnusedProps> {
+  id: string;
+  /** Etichetta della sezione per il controllo delle ore e dei minuti - non visibile a schermo */
+  controlsLabel?: string;
+  /** Determina l'uso del tema scuro per la sezione di selezione di ore e minuti */
+  dark?: boolean;
+  /** Il valore del campo */
+  value?: string;
+  /** Funzione callback */
+  onBlur?: (time: string) => void;
+  /** Testo esplicativo per dispositivi screen reader */
+  srText?: string;
+  /** Etichetta del campo per la selezione delle ore -  non visibile a schermo */
+  hoursLabel?: string;
+  /** Etichetta del campo per la selezione dei minuti -  non visibile a schermo */
+  minutesLabel?: string;
+  /** Etichetta del bottone per incrementare le ore -  non visibile a schermo */
+  increaseHoursLabel?: string;
+  /** Etichetta del bottone per incrementare i minuti -  non visibile a schermo */
+  increaseMinutesLabel?: string;
+  /** Etichetta del bottone per diminuire le ore -  non visibile a schermo */
+  decreaseHoursLabel?: string;
+  /** Etichetta del bottone per diminuire i minuti -  non visibile a schermo */
+  decreaseMinutesLabel?: string;
+}
+
+export const TimeInput = ({
+  dark = false,
+  onBlur = noop,
+  label,
+  controlsLabel,
+  invalid = false,
+  value = '',
+  id,
+  placeholder,
+  srText,
+  hoursLabel,
+  minutesLabel,
+  increaseHoursLabel,
+  increaseMinutesLabel,
+  decreaseHoursLabel,
+  decreaseMinutesLabel,
+  ...attributes
+}: TimeInputProps) => {
+  const [initialHours, initialMinutes] = value.split(':');
+  const [isOpen, setIsOpen] = useState(false);
+  const [hours, setHours] = useState(initialHours || '00');
+  const [minutes, setMinutes] = useState(initialMinutes || '00');
+  const [time, setTime] = useState(
+    initialHours && initialMinutes ? `${initialHours}:${initialMinutes}` : ''
+  );
+  const [isFocused, toggleFocus] = useState(false);
+
+  const button = (
+    <button
+      className='btn-time'
+      onClick={() => {
+        setIsOpen(!isOpen);
+        if (isOpen) onBlur(time);
+      }}
+    >
+      <Icon icon='it-clock' />
+    </button>
+  );
+
+  const onHoursChange = (value: string) => {
+    const formattedValue = formatTime(value);
+    setHours(isNaN(Number(formattedValue)) ? `00` : formattedValue);
+    setTime(`${formattedValue}:${minutes}`);
+  };
+
+  const onMinutesChange = (value: string) => {
+    const formattedValue = formatTime(value);
+    setMinutes(isNaN(Number(formattedValue)) ? `00` : formattedValue);
+    setTime(`${hours}:${formattedValue}`);
+  };
+
+  const onTimeChange = (value: string) => {
+    const [hours, minutes] = value.split(':');
+    onHoursChange(hours?.trim());
+    onMinutesChange(minutes?.trim());
+    setTime(value);
+  };
+
+  const infoTextControlClass = getInfoTextControlClass(
+    attributes,
+    attributes.cssModule
+  );
+
+  const { infoTextClass, wrapperClass } = getClasses(
+    attributes.className,
+    {
+      ...attributes,
+      normalized: Boolean(attributes.normalized),
+      inputPassword: false,
+      formControlClass: 'form-control',
+      infoTextControlClass,
+      isFocused,
+      originalWrapperClass:
+        attributes.wrapperClassName || attributes.wrapperClass
+    },
+    attributes.cssModule
+  );
+
+  return (
+    <div
+      className={classNames('it-timepicker-wrapper', {
+        'theme-dark': dark
+      })}
+    >
+      <section className='time-spinner'>
+        <div className='error_container' role='alert' aria-atomic='true'></div>
+        <fieldset>
+          <legend>
+            <span className='sr-only'>{srText}</span>
+          </legend>
+          <div>
+            <div className='calendar-input-container'>
+              <TimeInputContainer
+                wrapperClass={wrapperClass}
+                infoTextClass={infoTextClass}
+                label={label}
+                infoText={attributes.infoText}
+                id={id}
+                button={button}
+                invalid={invalid}
+              >
+                <Input
+                  {...attributes}
+                  type='text'
+                  label={label}
+                  id={id}
+                  placeholder={placeholder}
+                  value={time}
+                  onFocus={() => {
+                    setIsOpen(false);
+                    toggleFocus(true);
+                  }}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    onTimeChange(e.target.value)
+                  }
+                  invalid={invalid}
+                  onBlur={() => {
+                    toggleFocus(false);
+                    onBlur(time);
+                  }}
+                  noWrapper
+                />
+              </TimeInputContainer>
+            </div>
+          </div>
+        </fieldset>
+        <div
+          className='spinner-control'
+          aria-hidden='true'
+          role='region'
+          aria-label={controlsLabel}
+          tabIndex={-1}
+          style={{ display: isOpen ? 'block' : 'none' }}
+        >
+          <div className='spinner-hour spinner'>
+            <Input
+              className='spinnerHour form-control'
+              aria-label={hoursLabel}
+              type='number'
+              value={hours}
+              role='spinbutton'
+              maxLength={2}
+              aria-valuenow={Number(hours)}
+              aria-valuemax={23}
+              aria-valuemin={0}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onHoursChange(e.target.value)
+              }
+            />
+            <div className='button-wrapper'>
+              <button
+                className='button-hour btnHourUp'
+                aria-label={increaseHoursLabel}
+                aria-hidden='true'
+                tabIndex={-1}
+                onClick={() => onHoursChange(addTime(hours, 23))}
+              >
+                <span className='icon-up'></span>
+              </button>
+              <button
+                className='button-hour btnHourDown'
+                aria-label={decreaseHoursLabel}
+                aria-hidden='true'
+                tabIndex={-1}
+                onClick={() => onHoursChange(subtractTime(hours, 0))}
+              >
+                <span className='icon-down'></span>
+              </button>
+            </div>
+          </div>
+          <div className='spinner-min spinner'>
+            <Input
+              className='spinnerMin form-control'
+              aria-label={minutesLabel}
+              type='number'
+              value={minutes}
+              role='spinbutton'
+              maxLength={2}
+              aria-valuenow={Number(minutes)}
+              aria-valuemax={59}
+              aria-valuemin={0}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                onMinutesChange(e.target.value)
+              }
+            />
+            <div className='button-wrapper'>
+              <button
+                className='btnMinUp button-minute'
+                aria-label={increaseMinutesLabel}
+                aria-hidden='true'
+                tabIndex={-1}
+                onClick={() => onMinutesChange(addTime(minutes, 59))}
+              >
+                <span className='icon-up'></span>
+              </button>
+              <button
+                className='btnMinDown button-minute'
+                aria-label={decreaseMinutesLabel}
+                aria-hidden='true'
+                tabIndex={-1}
+                onClick={() => onMinutesChange(subtractTime(minutes, 0))}
+              >
+                <span className='icon-down'></span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};

package/src/Input/utils.tsx

@@ -0,0 +1,166 @@
+import classNames from 'classnames';
+import { Util } from 'reactstrap';
+import type { CSSModule } from 'reactstrap';
+import type { InputProps } from './Input';
+// @ts-ignore
+const { mapToCssModules } = Util;
+
+type ValidationProps = Pick<InputProps, 'valid' | 'invalid'>;
+type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
+  staticInput?: boolean;
+};
+type FormControlProps = Pick<InputProps, 'addon' | 'normalized'> & TypeProps;
+
+function getFormControlClassInternal({
+  plaintext,
+  staticInput,
+  type = 'text',
+  addon,
+  normalized
+}: FormControlProps) {
+  const formControlClass = 'form-control';
+  if (plaintext || staticInput || normalized) {
+    return `${formControlClass}-plaintext`;
+  }
+  if (type === 'file') {
+    return `${formControlClass}-file`;
+  }
+  if (['radio', 'checkbox'].indexOf(type) > -1) {
+    if (addon) {
+      return null;
+    }
+  }
+  return formControlClass;
+}
+
+export function getFormControlClass(
+  props: FormControlProps,
+  cssModule?: CSSModule
+) {
+  return mapToCssModules(getFormControlClassInternal(props), cssModule);
+}
+
+export function getInfoTextControlClass(
+  { valid, invalid }: ValidationProps,
+  cssModule?: CSSModule
+) {
+  return mapToCssModules(
+    classNames({
+      'form-text': valid || invalid,
+      'text-muted': !valid || invalid
+    }),
+    cssModule
+  );
+}
+
+export function getTag({
+  tag,
+  plaintext,
+  staticInput,
+  type = 'text'
+}: Pick<InputProps, 'tag'> & TypeProps) {
+  if (tag) {
+    return tag;
+  }
+  if (['radio', 'checkbox'].indexOf(type) > -1) {
+    return 'input';
+  }
+  if (plaintext || staticInput) {
+    return 'p';
+  }
+  return 'input';
+}
+
+type InputClassesParams = ValidationProps &
+  Pick<
+    InputProps,
+    'bsSize' | 'placeholder' | 'value' | 'label' | 'infoText' | 'normalized'
+  > & {
+    isFocused: boolean;
+    inputPassword?: boolean;
+    formControlClass?: string;
+    infoTextControlClass: string;
+    originalWrapperClass: InputProps['wrapperClassName'];
+  };
+
+export function getClasses(
+  className: string | undefined,
+  {
+    isFocused,
+    valid,
+    invalid,
+    bsSize,
+    placeholder,
+    value,
+    label,
+    infoText,
+    normalized,
+    inputPassword,
+    formControlClass,
+    infoTextControlClass,
+    originalWrapperClass
+  }: InputClassesParams,
+  cssModule?: CSSModule
+) {
+  const hasPlainCondition = placeholder || label || infoText;
+  const baseCondition = hasPlainCondition && !normalized && !inputPassword;
+  const passwordOnlyCondition =
+    inputPassword && !hasPlainCondition && !normalized;
+  const normalizedOnlyCondition =
+    normalized && !hasPlainCondition && !inputPassword;
+
+  const classes = mapToCssModules(
+    classNames(
+      className,
+      {
+        'is-invalid': invalid,
+        'is-valid': valid,
+        [`form-control-${bsSize}`]: bsSize
+      },
+      formControlClass
+    ),
+    cssModule
+  );
+  const wrapperClass = mapToCssModules(
+    classNames(className, originalWrapperClass, 'form-group'),
+    cssModule
+  );
+  const infoTextClass = mapToCssModules(
+    classNames(
+      {
+        'valid-feedback': valid,
+        'invalid-feedback': invalid
+      },
+      infoTextControlClass
+    ),
+    cssModule
+  );
+
+  const inputClasses = mapToCssModules(
+    classNames(
+      classes,
+      !baseCondition && {
+        // we can model here only if stylings
+        'form-control-plaintext': normalizedOnlyCondition,
+        'form-control': passwordOnlyCondition,
+        'input-password': passwordOnlyCondition,
+        'focus--mouse': passwordOnlyCondition || normalizedOnlyCondition
+      }
+    ),
+    cssModule
+  );
+
+  const activeClass = mapToCssModules(
+    classNames({
+      active: isFocused || placeholder || value
+    }),
+    cssModule
+  );
+
+  return {
+    wrapperClass,
+    inputClasses,
+    activeClass,
+    infoTextClass
+  };
+}

package/src/LinkList/LinkList.tsx

@@ -0,0 +1,65 @@
+import React, { FC, HTMLAttributes, ElementType, ReactNode } from 'react';
+import classNames from 'classnames';
+
+export interface LinkListProps extends HTMLAttributes<HTMLUListElement> {
+  /** Da utilizzare in caso di titolo principale della lista. Passare una componente React da mostrare come titolo */
+  header?: ReactNode;
+  /** Classi aggiuntive da usare per il componente lista del LinkList */
+  className?: string;
+  /** Classi aggiuntive da usare per il componente wrapper del LinkList */
+  wrapperClassName?: string;
+  /**
+   * Utilizzarlo in caso di utilizzo di componenti personalizzati per il wrapper della lista.
+   * Nota: viene ignorato quando usato in lista annidate.
+   * */
+  tag?: ElementType;
+  /** Quando abilitato gestisce una lista in cui ciascun elemento è composto da più componenti/elementi. */
+  multiline?: boolean;
+  /** Da utilizzare per una lista annidata */
+  sublist?: boolean;
+  /** Da utilizzare per una lista di avatar */
+  avatar?: boolean;
+  /** Quando attivo rimuove il componente contenitore della ListList. Utile per alcuni tipi di liste annidate. */
+  noWrapper?: boolean;
+}
+
+export const LinkList: FC<LinkListProps> = ({
+  className,
+  wrapperClassName,
+  tag = 'div',
+  multiline,
+  header,
+  sublist,
+  avatar,
+  noWrapper,
+  ...attributes
+}) => {
+  const Tag = tag;
+  const wrapperClasses = classNames('link-list-wrapper', wrapperClassName, {
+    multiline: multiline
+  });
+  const classes = classNames(className, {
+    'link-list': !sublist,
+    'link-sublist': sublist,
+    'avatar-group': avatar
+  });
+
+  if (noWrapper) {
+    return <ul {...attributes} className={classes} />;
+  }
+
+  if (sublist) {
+    return (
+      <>
+        {header}
+        <ul {...attributes} className={classes} />
+      </>
+    );
+  }
+  return (
+    <Tag className={wrapperClasses}>
+      {header}
+      <ul {...attributes} className={classes} />
+    </Tag>
+  );
+};

package/src/LinkList/LinkListItem.tsx

@@ -0,0 +1,98 @@
+import React, {
+  FC,
+  AnchorHTMLAttributes,
+  ElementType,
+  MouseEvent,
+  MouseEventHandler
+} from 'react';
+import classNames from 'classnames';
+
+export interface LinkListItemProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Indica se l'elemento è attivo o no */
+  active?: boolean;
+  /** Indica se l'elemento è disabilitato o no */
+  disabled?: boolean;
+  /** Indica se l'elemento è un titolo. */
+  header?: boolean;
+  /** Indica se l'elemento è un divisore */
+  divider?: boolean;
+  /** Utilizzarlo in caso di utilizzo di componenti personalizzati */
+  tag?: ElementType;
+  /** Classi aggiuntive da usare per il componente LinkListItem */
+  className?: string;
+  /** Classi aggiuntive da usare per l'elemento contenitore dell'item */
+  wrapperClassName?: string;
+  /** Indica il link a cui l'elemento deve puntare. */
+  href?: string;
+  /** Utilizzato per aumentare taglia/grandezza dell'elemento: può essere "medium" o "large". */
+  size?: 'medium' | 'large';
+}
+
+const handleDisabledOnClick = (e: MouseEvent<HTMLAnchorElement>) => {
+  e.preventDefault();
+};
+
+export const LinkListItem: FC<LinkListItemProps> = ({
+  className,
+  active,
+  disabled,
+  header,
+  divider,
+  href,
+  size,
+  tag = 'a',
+  wrapperClassName,
+  children,
+  ...attributes
+}) => {
+  let Tag = tag;
+  const classes = classNames(
+    className,
+    {
+      active,
+      disabled,
+      header,
+      divider,
+      size
+    },
+    'list-item'
+  );
+
+  // Prevent click event when disabled.
+  const handlers: { onClick?: MouseEventHandler<HTMLAnchorElement> } = {};
+  if (disabled) {
+    handlers.onClick = handleDisabledOnClick;
+  }
+
+  if (header) {
+    Tag = 'h3';
+  } else if (divider) {
+    Tag = 'span';
+  }
+
+  if (header && href) {
+    return (
+      <li className={wrapperClassName}>
+        <Tag>
+          <a
+            href={href || '#'}
+            {...attributes}
+            className={classes}
+            {...handlers}
+          >
+            {children}
+          </a>
+        </Tag>
+      </li>
+    );
+  }
+
+  return (
+    <li className={wrapperClassName}>
+      <Tag {...attributes} className={classes} href={href} {...handlers}>
+        {children}
+      </Tag>
+    </li>
+  );
+};

package/src/Megamenu/Megamenu.tsx

@@ -0,0 +1,37 @@
+import React, { FC, HTMLAttributes, useState } from 'react';
+import { Navbar, NavbarBrand, NavbarToggler } from 'reactstrap';
+import classNames from 'classnames';
+import { Collapse } from '../Collapse/Collapse';
+import { Icon } from '../Icon/Icon';
+import { Nav } from '../Nav/Nav';
+
+export interface MegamenuProps extends HTMLAttributes<HTMLDivElement> {
+  /** Eventuale brand da inserire sulla navbar */
+  brand?: NavbarBrand;
+  /** Classi aggiuntive da usare per il componente Nav */
+  className?: string;
+}
+
+export const Megamenu: FC<MegamenuProps> = ({
+  brand,
+  className,
+  children,
+  ...attributes
+}) => {
+  const [openNav, setOpenNav] = useState(false);
+  const toggle = () => {
+    setOpenNav(!openNav);
+  };
+  const classes = classNames(className, 'has-megamenu');
+  return (
+    <Navbar className={classes} {...attributes}>
+      <NavbarToggler className='custom-navbar-toggler' onClick={toggle}>
+        <Icon icon='it-list' size='sm' />
+      </NavbarToggler>
+      {brand}
+      <Collapse isOpen={openNav} megamenu>
+        <Nav navbar>{children}</Nav>
+      </Collapse>
+    </Navbar>
+  );
+};

package/src/Megamenu/MegamenuFooter.tsx

@@ -0,0 +1,20 @@
+import React, { FC, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+export interface MegamenuFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /** Classi aggiuntive da usare per il componente Megamenu Footer */
+  className?: string;
+}
+
+export const MegamenuFooter: FC<MegamenuFooterProps> = ({
+  className,
+  children,
+  ...attributes
+}) => {
+  const classes = classNames(className, 'it-megamenu-footer');
+  return (
+    <div className={classes} {...attributes}>
+      {children}
+    </div>
+  );
+};