@inceptionbg/iui 2.0.23 → 2.0.24

package/src/components/Inputs/DateInput/components/DatePartInput.tsx

@@ -1,158 +1,159 @@
-import clsx from 'clsx';
-import { FC, Ref, RefObject, useEffect, useRef, useState } from 'react';
-
-interface Props {
-  value: string;
-  setValue: (value: string) => void;
-  setDate: (value: string) => void;
-  values: { day: string; month: string; year: string };
-  required?: boolean;
-  disabled?: boolean;
-  autoFocus?: boolean;
-  min?: number;
-  max: number;
-  part: 'day' | 'month' | 'year';
-  previousInput?: HTMLInputElement | null;
-  nextInput?: HTMLInputElement | null;
-  ref?: Ref<HTMLInputElement>;
-}
-
-const options = {
-  day: {
-    placeholder: '31',
-    regex: `^[0-9]{2}`,
-  },
-  month: {
-    placeholder: '12',
-    regex: `^[0-9]{2}`,
-  },
-  year: {
-    placeholder: '2000',
-    regex: `^[0-9]{4}`,
-  },
-};
-
-const measureTextWidth = (text: string, font: string): number => {
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-  if (!context) return 0;
-
-  context.font = font;
-  const metrics = context.measureText(text ?? '00');
-  return Math.ceil(metrics.width);
-};
-
-export const DatePartInput: FC<Props> = ({
-  value,
-  setValue,
-  setDate,
-  values,
-  required,
-  disabled,
-  autoFocus,
-  min = 1,
-  max,
-  part,
-  previousInput,
-  nextInput,
-  ref,
-}) => {
-  const [isInvalid, setIsInvalid] = useState(false);
-  const localRef = useRef<HTMLInputElement>(null);
-  const inputRef = (ref || localRef) as RefObject<HTMLInputElement>;
-
-  useEffect(() => {
-    if (!value.length) {
-      setIsInvalid(false);
-    } else if ((part === 'year' && value.length !== 4) || +value > max || +value < min) {
-      setIsInvalid(true);
-    } else if (isInvalid) {
-      setIsInvalid(false);
-    }
-  }, [part, min, max, value, isInvalid]);
-
-  const regexTest = `^[0-9]{0,${max.toString().length}}$`;
-
-  const setValueHandler = (newValue: string) => {
-    if (!newValue) {
-      setValue('');
-    } else if (new RegExp(regexTest).test(newValue)) {
-      setValue(newValue);
-      const year = part === 'year' ? newValue : values.year;
-      const month = part === 'month' ? newValue : values.month;
-      const day = part === 'day' ? newValue : values.day;
-
-      if (day && month && year.length === 4) {
-        setDate(
-          `${year}-${month.length === 2 ? month : `0${month}`}-${
-            day.length === 2 ? day : `0${day}`
-          }`
-        );
-      }
-    }
-  };
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const element = inputRef?.current;
-      if (element) {
-        const computedStyle = window.getComputedStyle(element);
-        const font = computedStyle.font;
-
-        const displayValue = value || options[part].placeholder;
-        const measuredWidth = measureTextWidth(displayValue, font);
-        element.style.width = measuredWidth + 'px';
-      }
-    }
-  }, [inputRef, value, part]);
-
-  return (
-    <input
-      ref={inputRef}
-      value={value || ''}
-      onChange={e => setValueHandler(e.target.value)}
-      onClick={e => e.stopPropagation()}
-      onKeyDown={e => {
-        if (e.key === 'ArrowLeft') {
-          e.preventDefault();
-          e.stopPropagation();
-          previousInput?.select();
-        } else if (e.key === 'ArrowRight') {
-          e.preventDefault();
-          e.stopPropagation();
-          nextInput?.select();
-        } else if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          e.stopPropagation();
-          +value < max && setValueHandler(`${value ? +value + 1 : min}`);
-        } else if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          e.stopPropagation();
-          +value > min && setValueHandler(`${value ? +value - 1 : min}`);
-        }
-      }}
-      onKeyUp={e => {
-        if (part !== 'year' && isFinite(+e.key) && value.length === 2) {
-          nextInput?.select();
-        }
-      }}
-      onFocus={e => e.target.select()}
-      onBlur={() => {
-        if (part !== 'year' && value && value.length < 2) {
-          setValueHandler(value.padStart(2, '0'));
-        }
-      }}
-      required={required}
-      disabled={disabled}
-      autoFocus={autoFocus}
-      min={min}
-      max={max}
-      inputMode="numeric"
-      type="text"
-      tabIndex={part !== 'day' ? -1 : undefined}
-      placeholder={options[part].placeholder}
-      pattern={options[part].regex}
-      className={clsx({ error: isInvalid })}
-    />
-  );
-};
+import type { FC, Ref, RefObject } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+
+interface Props {
+  value: string;
+  setValue: (value: string) => void;
+  setDate: (value: string) => void;
+  values: { day: string; month: string; year: string };
+  required?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  min?: number;
+  max: number;
+  part: 'day' | 'month' | 'year';
+  previousInput?: HTMLInputElement | null;
+  nextInput?: HTMLInputElement | null;
+  ref?: Ref<HTMLInputElement>;
+}
+
+const options = {
+  day: {
+    placeholder: '31',
+    regex: `^[0-9]{2}`,
+  },
+  month: {
+    placeholder: '12',
+    regex: `^[0-9]{2}`,
+  },
+  year: {
+    placeholder: '2000',
+    regex: `^[0-9]{4}`,
+  },
+};
+
+const measureTextWidth = (text: string, font: string): number => {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) return 0;
+
+  context.font = font;
+  const metrics = context.measureText(text ?? '00');
+  return Math.ceil(metrics.width);
+};
+
+export const DatePartInput: FC<Props> = ({
+  value,
+  setValue,
+  setDate,
+  values,
+  required,
+  disabled,
+  autoFocus,
+  min = 1,
+  max,
+  part,
+  previousInput,
+  nextInput,
+  ref,
+}) => {
+  const [isInvalid, setIsInvalid] = useState(false);
+  const localRef = useRef<HTMLInputElement>(null);
+  const inputRef = (ref || localRef) as RefObject<HTMLInputElement>;
+
+  useEffect(() => {
+    if (!value.length) {
+      setIsInvalid(false);
+    } else if ((part === 'year' && value.length !== 4) || +value > max || +value < min) {
+      setIsInvalid(true);
+    } else if (isInvalid) {
+      setIsInvalid(false);
+    }
+  }, [part, min, max, value, isInvalid]);
+
+  const regexTest = `^[0-9]{0,${max.toString().length}}$`;
+
+  const setValueHandler = (newValue: string) => {
+    if (!newValue) {
+      setValue('');
+    } else if (new RegExp(regexTest).test(newValue)) {
+      setValue(newValue);
+      const year = part === 'year' ? newValue : values.year;
+      const month = part === 'month' ? newValue : values.month;
+      const day = part === 'day' ? newValue : values.day;
+
+      if (day && month && year.length === 4) {
+        setDate(
+          `${year}-${month.length === 2 ? month : `0${month}`}-${
+            day.length === 2 ? day : `0${day}`
+          }`
+        );
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      const element = inputRef?.current;
+      if (element) {
+        const computedStyle = window.getComputedStyle(element);
+        const font = computedStyle.font;
+
+        const displayValue = value || options[part].placeholder;
+        const measuredWidth = measureTextWidth(displayValue, font);
+        element.style.width = measuredWidth + 'px';
+      }
+    }
+  }, [inputRef, value, part]);
+
+  return (
+    <input
+      ref={inputRef}
+      value={value || ''}
+      onChange={e => setValueHandler(e.target.value)}
+      onClick={e => e.stopPropagation()}
+      onKeyDown={e => {
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          e.stopPropagation();
+          previousInput?.select();
+        } else if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          e.stopPropagation();
+          nextInput?.select();
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          e.stopPropagation();
+          +value < max && setValueHandler(`${value ? +value + 1 : min}`);
+        } else if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          e.stopPropagation();
+          +value > min && setValueHandler(`${value ? +value - 1 : min}`);
+        }
+      }}
+      onKeyUp={e => {
+        if (part !== 'year' && isFinite(+e.key) && value.length === 2) {
+          nextInput?.select();
+        }
+      }}
+      onFocus={e => e.target.select()}
+      onBlur={() => {
+        if (part !== 'year' && value && value.length < 2) {
+          setValueHandler(value.padStart(2, '0'));
+        }
+      }}
+      required={required}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      min={min}
+      max={max}
+      inputMode="numeric"
+      type="text"
+      tabIndex={part !== 'day' ? -1 : undefined}
+      placeholder={options[part].placeholder}
+      pattern={options[part].regex}
+      className={clsx({ error: isInvalid })}
+    />
+  );
+};

package/src/components/Inputs/InputWrapper.tsx

@@ -1,95 +1,95 @@
-import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import clsx from 'clsx';
-import { FC, ReactNode, Ref } from 'react';
-import { faCircleXmark } from '../../assets/icons';
-
-interface Props {
-  label?: string;
-  required?: boolean;
-  disabled?: boolean;
-  className?: string;
-  minWidth?: number;
-  endText?: string;
-  endButton?: {
-    icon: IconDefinition;
-    onClick: () => void;
-    disabled?: boolean;
-  };
-  onClearInput?: () => void;
-  helperText?: string;
-  errorText?: string;
-  error?: boolean;
-  focus?: boolean;
-  heightAuto?: boolean;
-  inputFieldRef?: Ref<HTMLDivElement>;
-  children: ReactNode;
-}
-export const InputWrapper: FC<Props> = ({
-  label,
-  required,
-  disabled,
-  className,
-  minWidth,
-  endText,
-  endButton,
-  onClearInput,
-  helperText,
-  errorText,
-  error,
-  focus,
-  heightAuto,
-  inputFieldRef,
-  children,
-}) => {
-  const withEndSection = !!(endText || endButton || onClearInput);
-
-  return (
-    <div
-      className={clsx('iui-input-container', className, {
-        focus,
-        error,
-        disabled,
-      })}
-      style={{ minWidth }}
-    >
-      {label && <p className={clsx('input-label', { required })}>{label}</p>}
-      <div
-        ref={inputFieldRef}
-        className={clsx('iui-input-wrapper-field', {
-          'with-end-section': withEndSection,
-          'height-auto': heightAuto,
-        })}
-      >
-        {children}
-        {withEndSection && (
-          <div className="end-section">
-            {endText && <p>{endText}</p>}
-            {!!onClearInput && (
-              <FontAwesomeIcon
-                icon={faCircleXmark}
-                className="icon"
-                onClick={onClearInput}
-              />
-            )}
-            {endButton && (
-              <FontAwesomeIcon
-                className={clsx('icon', { disabled: endButton.disabled })}
-                icon={endButton.icon}
-                onClick={!endButton.disabled ? endButton.onClick : undefined}
-                role="button"
-                type="button"
-              />
-            )}
-          </div>
-        )}
-      </div>
-      {helperText && (
-        <p className={clsx('helper-text', { 'helper-hidden': errorText })}>
-          {helperText}
-        </p>
-      )}
-      {errorText && <p className="helper-text error-text">{errorText}</p>}
-    </div>
-  );
-};
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { FC, ReactNode, Ref } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { faCircleXmark } from '../../assets/icons';
+
+interface Props {
+  label?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  minWidth?: number;
+  endText?: string;
+  endButton?: {
+    icon: IconDefinition;
+    onClick: () => void;
+    disabled?: boolean;
+  };
+  onClearInput?: () => void;
+  helperText?: string;
+  errorText?: string;
+  error?: boolean;
+  focus?: boolean;
+  heightAuto?: boolean;
+  inputFieldRef?: Ref<HTMLDivElement>;
+  children: ReactNode;
+}
+export const InputWrapper: FC<Props> = ({
+  label,
+  required,
+  disabled,
+  className,
+  minWidth,
+  endText,
+  endButton,
+  onClearInput,
+  helperText,
+  errorText,
+  error,
+  focus,
+  heightAuto,
+  inputFieldRef,
+  children,
+}) => {
+  const withEndSection = !!(endText || endButton || onClearInput);
+
+  return (
+    <div
+      className={clsx('iui-input-container', className, {
+        focus,
+        error,
+        disabled,
+      })}
+      style={{ minWidth }}
+    >
+      {label && <p className={clsx('input-label', { required })}>{label}</p>}
+      <div
+        ref={inputFieldRef}
+        className={clsx('iui-input-wrapper-field', {
+          'with-end-section': withEndSection,
+          'height-auto': heightAuto,
+        })}
+      >
+        {children}
+        {withEndSection && (
+          <div className="end-section">
+            {endText && <p>{endText}</p>}
+            {!!onClearInput && (
+              <FontAwesomeIcon
+                icon={faCircleXmark}
+                className="icon"
+                onClick={onClearInput}
+              />
+            )}
+            {endButton && (
+              <FontAwesomeIcon
+                className={clsx('icon', { disabled: endButton.disabled })}
+                icon={endButton.icon}
+                onClick={!endButton.disabled ? endButton.onClick : undefined}
+                role="button"
+                type="button"
+              />
+            )}
+          </div>
+        )}
+      </div>
+      {helperText && (
+        <p className={clsx('helper-text', { 'helper-hidden': errorText })}>
+          {helperText}
+        </p>
+      )}
+      {errorText && <p className="helper-text error-text">{errorText}</p>}
+    </div>
+  );
+};