design-react-kit 5.0.0-1 → 5.0.0-10

package/src/Input/Input.tsx

@@ -4,21 +4,19 @@ import React, {
   Ref,
   ReactNode,
   useCallback,
-  useState
+  useState,
+  useRef,
+  useEffect
 } from 'react';
 import isNumber from 'is-number';
 
 import { InputContainer } from './InputContainer';
 import { Icon } from '../Icon/Icon';
-import {
-  getTag,
-  getFormControlClass,
-  getClasses,
-  getInfoTextControlClass,
-  useFocus
-} from './utils';
+import { getTag, getFormControlClass, getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 import { notifyDeprecation } from '../utils';
+import classNames from 'classnames';
+
 // taken from reactstrap types
 type InputType =
   | 'text'
@@ -45,7 +43,10 @@ type InputType =
   | 'password'
   | 'datetime'
   | 'time'
-  | 'color';
+  | 'color'
+  | 'adaptive'
+  | 'currency'
+  | 'percentage';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** Il tipo specifico di input da utilizzare. Il valore di default è `text`. */
@@ -55,8 +56,14 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   size?: number;
   /** Etichetta del campo Input. */
   label?: string | ReactNode;
+  /** Etichetta del pulsante incremento. */
+  incrementLabel?: string | ReactNode;
+  /** Etichetta del pulsante decremento. */
+  decrementLabel?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
+  /** Testo di validazione per l'elemento del moduleo form. */
+  validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `Input` abbia la prop `id` impostata. */
   infoText?: string;
   /** Il valore nel campo Input. */
@@ -67,13 +74,13 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   normalized?: boolean;
   /** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */
   valid?: boolean;
-  /** Utilizzare per mostrare il fallimento nella validazione del valore nel campo Input */
-  invalid?: boolean;
   innerRef?: Ref<HTMLInputElement>;
   /** Utilizzare per mostrare testo statico non modificabile. */
   plaintext?: boolean;
   /** Utilizzare per mostrare un elemento addon a fianco (prima o dopo) il campo input all'interno del componente */
   addon?: boolean;
+  /** Utilizzare per mostrare un elemento un simbolo attivando la proprietà addon nel campo input all'interno del componente */
+  addonText?: string;
   /** Oggetto contenente la nuova mappatura per le classi CSS. */
   cssModule?: CSSModule;
   /** Classi aggiuntive da usare per il wrapper del componente Input */
@@ -87,11 +94,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   tag?: ElementType;
   /** Classi aggiuntive da usare per il componente Input */
   className?: string;
-  /**
-   * Usare "valid" o "invalid" per indicare lo stato del componente.
-   * @deprecated
-   */
-  state?: string;
   /**
    * Usare "plaintext".
    * @deprecated
@@ -106,14 +108,17 @@ export const Input = ({
   id,
   className,
   cssModule,
-  type,
-  state,
+  type = 'text',
   tag,
   addon,
+  addonText,
   static: staticInput,
   plaintext,
   innerRef,
   label,
+  incrementLabel,
+  decrementLabel,
+  validationText,
   infoText,
   placeholder,
   normalized,
@@ -128,20 +133,34 @@ export const Input = ({
   const [isHidden, setHidden] = useState(true);
   const [hasIcon, toggleIcon] = useState(true);
 
-  const { toggleFocusLabel, toggleBlurLabel, isFocused } =
-    useFocus<HTMLInputElement>({
-      onFocus: attributes.onFocus,
-      onBlur: attributes.onBlur
-    });
+  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus<HTMLInputElement>({
+    onFocus: attributes.onFocus,
+    onBlur: attributes.onBlur
+  });
 
   const toggleShow = useCallback(() => {
     setHidden(!isHidden);
     toggleIcon(!hasIcon);
   }, [hasIcon, isHidden]);
 
-  let { bsSize, valid, invalid, ...rest } = attributes;
+  const divResizeRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [width, setWidth] = useState('100');
+
+  useEffect(() => {
+    if (divResizeRef.current != null && divResizeRef.current.classList.contains('input-number-adaptive')) {
+      if (!value) {
+        setWidth(`calc(70px)`);
+      } else {
+        setWidth(`calc(70px + ${`${value}`.length}ch)`);
+      }
+    }
+  }, [value]);
+
+  let { bsSize, valid, ...rest } = attributes;
 
   const Tag = getTag({ tag, plaintext, staticInput, type });
+  addon = addonText != null ? true : addon;
   const formControlClass = getFormControlClass(
     {
       plaintext,
@@ -152,15 +171,7 @@ export const Input = ({
     },
     cssModule
   );
-  const infoTextControlClass = getInfoTextControlClass(
-    { valid, invalid },
-    cssModule
-  );
-
-  if (state && valid == null && invalid == null) {
-    invalid = state === 'danger';
-    valid = state === 'success';
-  }
+  const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);
 
   const extraAttributes: {
     type?: InputType;
@@ -168,9 +179,7 @@ export const Input = ({
     ['aria-describedby']?: string;
   } = {};
   if (size && !isNumber(size)) {
-    notifyDeprecation(
-      'Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.'
-    );
+    notifyDeprecation('Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.');
     bsSize = size as unknown as InputProps['bsSize'];
   } else {
     extraAttributes.size = size;
@@ -188,13 +197,7 @@ export const Input = ({
 
   if (
     attributes.children &&
-    !(
-      plaintext ||
-      staticInput ||
-      type === 'select' ||
-      typeof Tag !== 'string' ||
-      Tag === 'select'
-    )
+    !(plaintext || staticInput || type === 'select' || typeof Tag !== 'string' || Tag === 'select')
   ) {
     notifyDeprecation(
       `Input with a type of "${type}" cannot have children. Please use "value"/"defaultValue" instead.`
@@ -204,21 +207,23 @@ export const Input = ({
 
   const inputPassword = extraAttributes.type === 'password';
 
+  const indeterminateCheckboxInput = type === 'checkbox' && className?.includes('semi-checked');
+
   // Styling
-  const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
+  const { activeClass, extraLabelClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
     className,
+    type,
     {
       valid,
-      invalid,
       bsSize,
       placeholder,
       value,
       label,
-      infoText,
+      validationText,
       normalized: Boolean(normalized),
       inputPassword,
       formControlClass,
-      infoTextControlClass,
+      validationTextControlClass,
       isFocused: isFocused,
       originalWrapperClass: originalWrapperClass || originalWrapperClassOld
     },
@@ -238,10 +243,12 @@ export const Input = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
+    extraLabelClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
 
@@ -258,6 +265,64 @@ export const Input = ({
     );
   }
 
+  const clickIncrDecr = (mode: number) => {
+    var step = parseFloat(inputRef.current?.step ? inputRef.current.step : '1');
+    const min = parseFloat(inputRef.current?.min ? inputRef.current.min : 'Nan');
+    const max = parseFloat(inputRef.current?.max ? inputRef.current.max : 'Nan');
+    step = isNaN(step) ? 1 : step;
+    const newValue = parseFloat(inputRef.current?.value ? inputRef.current.value : '0') + mode * step;
+    if (!isNaN(max) && newValue > max) {
+      return;
+    }
+    if (!isNaN(min) && newValue < min) {
+      return;
+    }
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
+    nativeInputValueSetter?.call(inputRef.current, `${newValue}`);
+    var ev2 = new Event('input', { bubbles: true });
+    inputRef.current?.dispatchEvent(ev2);
+  };
+
+  if (['currency', 'percentage', 'adaptive', 'number'].includes(type)) {
+    return (
+      <InputContainer {...containerProps}>
+        <div
+          className={classNames({
+            'input-group': true,
+            'input-number': true,
+            disabled: rest.disabled,
+            'input-number-percentage': type == 'percentage',
+            'input-number-currency': type == 'currency',
+            'input-number-adaptive': type == 'adaptive'
+          })}
+          style={{ width }}
+          ref={divResizeRef}
+        >
+          {['currency', 'percentage'].includes(type) && (
+            <span className='input-group-text fw-semibold'>{addonText}</span>
+          )}
+          <Tag
+            {...rest}
+            {...extraAttributes}
+            {...sharedAttributes}
+            className={inputClasses}
+            data-testid={testId}
+            type='number'
+            ref={inputRef}
+          />
+          <span className='input-group-text align-buttons flex-column'>
+            <button className='input-number-add' onClick={() => clickIncrDecr(1)} type='button'>
+              <span className='visually-hidden'>{incrementLabel || ''}</span>
+            </button>
+            <button className='input-number-sub' onClick={() => clickIncrDecr(-1)} type='button'>
+              <span className='visually-hidden'>{decrementLabel || ''}</span>
+            </button>
+          </span>
+        </div>
+      </InputContainer>
+    );
+  }
+
   if (placeholder) {
     return (
       <InputContainer {...containerProps}>
@@ -273,6 +338,21 @@ export const Input = ({
     );
   }
 
+  if (indeterminateCheckboxInput) {
+    return (
+      <InputContainer {...containerProps}>
+        <Tag
+          {...rest}
+          {...extraAttributes}
+          {...sharedAttributes}
+          className={inputClasses}
+          data-testid={testId}
+          indeterminate={'true'}
+        />
+      </InputContainer>
+    );
+  }
+
   if (inputPassword) {
     return (
       <InputContainer {...containerProps}>
@@ -310,27 +390,13 @@ export const Input = ({
       </InputContainer>
     );
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return (
       <InputContainer {...containerProps}>
-        <Tag
-          {...rest}
-          {...extraAttributes}
-          {...sharedAttributes}
-          className={inputClasses}
-          data-testid={testId}
-        />
+        <Tag {...rest} {...extraAttributes} {...sharedAttributes} className={inputClasses} data-testid={testId} />
       </InputContainer>
     );
   }
 
-  return (
-    <Tag
-      {...rest}
-      {...extraAttributes}
-      className={inputClasses}
-      {...sharedAttributes}
-      data-testid={testId}
-    />
-  );
+  return <Tag {...rest} {...extraAttributes} className={inputClasses} {...sharedAttributes} data-testid={testId} />;
 };

package/src/Input/InputContainer.tsx

@@ -3,34 +3,41 @@ import React, { FC, HTMLAttributes, ReactNode } from 'react';
 export interface InputContainerProps extends HTMLAttributes<HTMLElement> {
   wrapperClass: string;
   activeClass: string;
-  infoTextClass: string;
+  extraLabelClass: string;
+  validationTextClass: string;
   label: string | ReactNode | undefined;
-  infoText: string | undefined;
+  validationText: string | undefined;
   id: string | undefined;
   infoId: string | undefined;
+  infoText: string | undefined;
   testId?: string;
 }
 
 export const InputContainer: FC<InputContainerProps> = ({
   id,
   infoId,
+  infoText,
   testId,
   activeClass,
+  extraLabelClass,
   label,
-  infoTextClass,
-  infoText,
+  validationTextClass,
+  validationText,
   wrapperClass,
   children
 }) => {
   return (
     <div className={wrapperClass} data-testid={testId}>
-      {children}
-      <label htmlFor={id} className={activeClass}>
+      <label htmlFor={id} className={activeClass + ' ' + extraLabelClass}>
         {label}
       </label>
-      <small id={infoId} className={infoTextClass}>
-        {infoText}
-      </small>
+      {children}
+      {infoText && (
+        <small id={infoId} className='form-text'>
+          {infoText}
+        </small>
+      )}
+      <div className={validationTextClass}>{validationText}</div>
     </div>
   );
 };

package/src/Input/TextArea.tsx

@@ -1,15 +1,16 @@
 import React, { Ref, ReactNode, TextareaHTMLAttributes } from 'react';
 
 import { InputContainer } from './InputContainer';
-import { getClasses, getInfoTextControlClass, useFocus } from './utils';
+import { getClasses, getValidationTextControlClass, useFocus } from './utils';
 import type { CSSModule } from 'reactstrap/types/lib/utils';
 
-export interface TextAreaProps
-  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   /** Etichetta del campo TextArea. */
   label?: string | ReactNode;
   /** Testo di esempio da utilizzare per il campo. */
   placeholder?: string;
+  /** Testo di validazione per l'elemento del moduleo */
+  validationText?: string;
   /** Testo di aiuto per l'elemento del moduleo form. Richiede che il componente `TextArea` abbia la prop `id` impostata. */
   infoText?: string;
   /** Il valore nel campo TextArea. */
@@ -20,8 +21,6 @@ export interface TextAreaProps
   normalized?: boolean;
   /** Utilizzare per mostrare il successo nella validazione del valore nel campo TextArea */
   valid?: boolean;
-  /** Utilizzare per mostrare il fallimento nella validazione del valore nel campo TextArea */
-  invalid?: boolean;
   innerRef?: Ref<HTMLTextAreaElement>;
   /** Oggetto contenente la nuova mappatura per le classi CSS. */
   cssModule?: CSSModule;
@@ -38,26 +37,22 @@ export const TextArea = ({
   cssModule,
   innerRef,
   label,
+  validationText,
   infoText,
   placeholder,
   normalized,
   value,
   wrapperClassName: originalWrapperClass,
   valid,
-  invalid,
   testId,
   ...attributes
 }: TextAreaProps) => {
-  const { toggleFocusLabel, toggleBlurLabel, isFocused } =
-    useFocus<HTMLTextAreaElement>({
-      onFocus: attributes.onFocus,
-      onBlur: attributes.onBlur
-    });
+  const { toggleFocusLabel, toggleBlurLabel, isFocused } = useFocus<HTMLTextAreaElement>({
+    onFocus: attributes.onFocus,
+    onBlur: attributes.onBlur
+  });
 
-  const infoTextControlClass = getInfoTextControlClass(
-    { valid, invalid },
-    cssModule
-  );
+  const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);
 
   const extraAttributes: { ['aria-describedby']?: string } = {};
 
@@ -68,17 +63,17 @@ export const TextArea = ({
   }
 
   // Styling
-  const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
+  const { activeClass, extraLabelClass, validationTextClass, inputClasses, wrapperClass } = getClasses(
     className,
+    'textarea',
     {
       valid,
-      invalid,
       placeholder,
       value,
       label,
-      infoText,
+      validationText,
       normalized: Boolean(normalized),
-      infoTextControlClass,
+      validationTextControlClass,
       isFocused,
       originalWrapperClass
     },
@@ -98,10 +93,12 @@ export const TextArea = ({
   const containerProps = {
     id,
     infoId,
+    infoText,
     activeClass,
+    extraLabelClass,
     label,
-    infoTextClass,
-    infoText,
+    validationTextClass,
+    validationText,
     wrapperClass
   };
 
@@ -134,7 +131,7 @@ export const TextArea = ({
       </InputContainer>
     );
   }
-  if (label || infoText) {
+  if (label || validationText) {
     return (
       <InputContainer {...containerProps}>
         <textarea

package/src/Input/utils.tsx

@@ -4,19 +4,13 @@ import type { CSSModule } from 'reactstrap/types/lib/utils';
 import { mapToCssModules } from '../utils';
 import type { InputProps } from './Input';
 
-type ValidationProps = Pick<InputProps, 'valid' | 'invalid'>;
+type ValidationProps = Pick<InputProps, 'valid'>;
 type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
   staticInput?: boolean;
 };
 type FormControlProps = Pick<InputProps, 'addon' | 'normalized'> & TypeProps;
 
-function getFormControlClassInternal({
-  plaintext,
-  staticInput,
-  type = 'text',
-  addon,
-  normalized
-}: FormControlProps) {
+function getFormControlClassInternal({ plaintext, staticInput, type = 'text', addon, normalized }: FormControlProps) {
   const formControlClass = 'form-control';
   if (plaintext || staticInput || normalized) {
     return `${formControlClass}-plaintext`;
@@ -32,32 +26,21 @@ function getFormControlClassInternal({
   return formControlClass;
 }
 
-export function getFormControlClass(
-  props: FormControlProps,
-  cssModule?: CSSModule
-) {
+export function getFormControlClass(props: FormControlProps, cssModule?: CSSModule) {
   return mapToCssModules(getFormControlClassInternal(props), cssModule);
 }
 
-export function getInfoTextControlClass(
-  { invalid }: ValidationProps,
-  cssModule?: CSSModule
-) {
+export function getValidationTextControlClass({ valid }: ValidationProps, cssModule?: CSSModule) {
   return mapToCssModules(
     classNames({
       'form-text': true,
-      'form-feedback just-validate-error-label': invalid
+      'form-feedback just-validate-error-label': valid == false
     }),
     cssModule
   );
 }
 
-export function getTag({
-  tag,
-  plaintext,
-  staticInput,
-  type = 'text'
-}: Pick<InputProps, 'tag'> & TypeProps) {
+export function getTag({ tag, plaintext, staticInput, type = 'text' }: Pick<InputProps, 'tag'> & TypeProps) {
   if (tag) {
     return tag;
   }
@@ -71,48 +54,43 @@ export function getTag({
 }
 
 type InputClassesParams = ValidationProps &
-  Pick<
-    InputProps,
-    'bsSize' | 'placeholder' | 'value' | 'label' | 'infoText' | 'normalized'
-  > & {
+  Pick<InputProps, 'bsSize' | 'placeholder' | 'value' | 'label' | 'validationText' | 'normalized'> & {
     isFocused: boolean;
     inputPassword?: boolean;
     formControlClass?: string;
-    infoTextControlClass?: string;
+    validationTextControlClass?: string;
     originalWrapperClass: InputProps['wrapperClassName'];
   };
 
 export function getClasses(
   className: string | undefined,
+  type: string,
   {
     isFocused,
     valid,
-    invalid,
     bsSize,
     placeholder,
     value,
     label,
-    infoText,
+    validationText,
     normalized,
     inputPassword,
     formControlClass,
-    infoTextControlClass,
+    validationTextControlClass,
     originalWrapperClass
   }: InputClassesParams,
   cssModule?: CSSModule
 ) {
-  const hasPlainCondition = placeholder || label || infoText;
+  const hasPlainCondition = placeholder || label || validationText;
   const baseCondition = hasPlainCondition && !normalized && !inputPassword;
-  const passwordOnlyCondition =
-    inputPassword && !hasPlainCondition && !normalized;
-  const normalizedOnlyCondition =
-    normalized && !hasPlainCondition && !inputPassword;
+  const passwordOnlyCondition = inputPassword && !hasPlainCondition && !normalized;
+  const normalizedOnlyCondition = normalized && !hasPlainCondition && !inputPassword;
 
   const classes = mapToCssModules(
     classNames(
       className,
       {
-        'is-invalid': invalid,
+        'is-invalid': valid == false,
         'just-validate-success-field': valid,
         [`form-control-${bsSize}`]: bsSize
       },
@@ -120,17 +98,14 @@ export function getClasses(
     ),
     cssModule
   );
-  const wrapperClass = mapToCssModules(
-    classNames(className, originalWrapperClass, 'form-group'),
-    cssModule
-  );
-  const infoTextClass = mapToCssModules(
+  const wrapperClass = mapToCssModules(classNames(className, originalWrapperClass, 'form-group'), cssModule);
+  const validationTextClass = mapToCssModules(
     classNames(
       {
         'valid-feedback': valid,
-        'invalid-feedback form-feedback just-validate-error-label': invalid
+        'invalid-feedback form-feedback just-validate-error-label': valid == false
       },
-      infoTextControlClass
+      validationTextControlClass
     ),
     cssModule
   );
@@ -151,16 +126,23 @@ export function getClasses(
 
   const activeClass = mapToCssModules(
     classNames({
-      active: isFocused || placeholder || value
+      active: isFocused || placeholder || value || ['date', 'time'].includes(type)
     }),
     cssModule
   );
 
+  const extraLabelClass = mapToCssModules(
+    classNames({
+      'input-number-label': ['number', 'currency', 'adaptive', 'percentage'].includes(type)
+    })
+  );
+
   return {
     wrapperClass,
     inputClasses,
     activeClass,
-    infoTextClass
+    extraLabelClass,
+    validationTextClass
   };
 }