pixel-react 1.8.1 → 1.8.3

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -1,256 +1,267 @@
-import React, { useState, useRef, useEffect, FC } from 'react';
-import './LabelEditTextField.scss';
-import { LabelEditTextFieldTypes } from './types';
-import Typography from '../Typography';
-import HighlightText from '../HighlightText';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import Input from '../Input/Input';
-import Select from '../Select/Select';
-
-const getErrorMessage = (
-  inputValue: string,
-  text: string,
-  customError?: string,
-  customErrorCondition?: boolean
-): string => {
-  if (inputValue === text) {
-    return 'No changes were made.';
-  } else if (!inputValue) {
-    return 'Text is required';
-  } else if (inputValue.length < 3) {
-    return 'Please enter at least 3 characters.';
-  } else if (customErrorCondition) {
-    return customError ?? 'Custom error occurred';
-  }
-  return '';
-};
-const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
-  label,
-  placeholder,
-  text,
-  highlightText,
-  customError,
-  confirmIcon,
-  customErrorCondition,
-  cancelIcon,
-  variant = 'textField',
-  onInputChange,
-  dropdownData = [],
-  // width,
-  height,
-  isOpen = false,
-  confirmAction,
-  onClick,
-  tooltip,
-}) => {
-  const [isEditing, setIsEditing] = useState(isOpen ?? false);
-  const [inputValue, setInputValue] = useState(text ?? '');
-  const [dropdownValue, setDropdownValue] = useState(
-    dropdownData[0]?.value ?? ''
-  );
-  const [showError, setShowError] = useState('');
-  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
-  const isThrowingError = showError && isEditing ? true : false;
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
-  const [clickTimeout, setClickTimeout] = useState<number | null>(null);
-  useEffect(() => {
-    return () => {
-      if (clickTimeout) {
-        clearTimeout(clickTimeout);
-      }
-    };
-  }, [clickTimeout]);
-  const handleDoubleClick = () => {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      setClickTimeout(null);
-    }
-    setIsEditing(true);
-    setShowError('');
-  };
-  const handleSingleClick = () => {
-    if (onClick) onClick();
-  };
-  const handleClick = () => {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      setClickTimeout(null);
-    }
-
-    const timeout = window.setTimeout(() => {
-      handleSingleClick();
-      setClickTimeout(null);
-    }, 1000);
-
-    setClickTimeout(timeout);
-  };
-  const handleConfirm = () => {
-    let errorMessage = '';
-    if (inputValue.length === 0 || inputValue.trim().length === 0) {
-      errorMessage = 'Please type any text.';
-    } else if (inputValue.length < 3) {
-      errorMessage = 'Please enter at least 3 characters.';
-    } else if (customErrorCondition) {
-      errorMessage = customError ?? 'Invalid input.';
-    }
-
-    if (errorMessage) {
-      setShowError(errorMessage);
-    } else {
-      setIsEditing(false);
-      setShowError('');
-      if (confirmAction) confirmAction(inputValue, dropdownValue);
-    }
-  };
-
-  const handleCancel = () => {
-    setInputValue(text ?? '');
-    setDropdownValue(dropdownData[0]?.value ?? '');
-    setIsEditing(false);
-    setShowError('');
-    setIsTextFieldModified(false);
-  };
-
-  const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value;
-    setInputValue(newValue);
-    if (newValue.length === 0 || newValue.trim().length === 0) {
-      setShowError('Please type any text.');
-    } else if (newValue.length < 3) {
-      setShowError('Please enter at least 3 characters.');
-    } else if (customErrorCondition) {
-      setShowError(customError ?? 'Invalid input.');
-    } else {
-      setShowError('');
-    }
-
-    setIsTextFieldModified(newValue !== text);
-
-    if (onInputChange) {
-      onInputChange(newValue);
-    }
-  };
-
-  const handleBlur = (e: MouseEvent) => {
-    if (
-      containerRef.current &&
-      !containerRef.current.contains(e.target as Node) &&
-      cancelRef.current !== e.target
-    ) {
-      const errorMessage = getErrorMessage(inputValue, text ?? '', customError);
-
-      if (errorMessage && isEditing) {
-        setShowError(errorMessage);
-      } else {
-        setIsEditing(false);
-        setShowError('');
-      }
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleBlur);
-    return () => {
-      document.removeEventListener('click', handleBlur);
-    };
-  }, [inputValue]);
-
-  return (
-    <div className="ff-label-edit-text-field" ref={containerRef}>
-      {isEditing ? (
-        <div className="ff-label-text-field">
-          {variant === 'textFieldWithDropdown' ? (
-            <div
-              className={`ff-label-text-field-with-dropdown ${
-                isEditing ? 'open' : ''
-              }`}
-              style={{ height }}
-            >
-              <Input
-                name="input"
-                type="text"
-                label={label ? label : ''}
-                disabled={false}
-                error={isThrowingError}
-                placeholder={placeholder ? placeholder : ''}
-                value={inputValue}
-                onChange={handleTextFieldChange}
-                className={`
-                
-               ${isTextFieldModified ? 'modified' : ''}`}
-              />
-              <Select
-                label={''}
-                optionsList={dropdownData}
-                selectedOption={{ value: dropdownValue, label: dropdownValue }}
-                onChange={(option) => setDropdownValue(option.value)}
-              />
-            </div>
-          ) : (
-            <div className="ff-label-text-field-without-dropdown">
-              <Input
-                name="input"
-                type="text"
-                label={label ? label : ''}
-                disabled={false}
-                placeholder={placeholder ? placeholder : ''}
-                value={inputValue}
-                onChange={handleTextFieldChange}
-                className={`
-               
-               ${isTextFieldModified ? 'modified' : ''}`}
-              />
-            </div>
-          )}
-          <div className="ff-icon-container">
-            {confirmIcon && (
-              <Icon
-                color="var(--label-edit-confirm-icon)"
-                height={20}
-                width={20}
-                name={confirmIcon.name}
-                className="confirm-icon"
-                onClick={handleConfirm}
-              />
-            )}
-            {cancelIcon && (
-              <Icon
-                color="var(--label-edit-cancel-icon)"
-                height={12}
-                width={20}
-                name={cancelIcon.name}
-                className="cancel-icon"
-                onClick={handleCancel}
-                ref={cancelRef}
-              />
-            )}
-          </div>
-        </div>
-      ) : (
-        <Tooltip
-          title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
-          placement={'bottom'}
-        >
-          <span
-            className="display-text"
-            onDoubleClick={handleDoubleClick}
-            role="button"
-            onClick={handleClick}
-          >
-            <HighlightText text={inputValue} highlight={highlightText} />
-          </span>
-        </Tooltip>
-      )}
-      {showError && isEditing && (
-        <Typography as="p" fontSize={8} className="error-text">
-          {showError}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default LabelEditTextField;
+import React, { useState, useRef, useEffect, FC } from 'react';
+import './LabelEditTextField.scss';
+import { LabelEditTextFieldTypes } from './types';
+import Typography from '../Typography';
+import HighlightText from '../HighlightText';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import Input from '../Input/Input';
+import Select from '../Select/Select';
+import useEscapeKey from '../../hooks/keyboardevents/useEscKeyEvent.js';
+
+const getErrorMessage = (
+  inputValue: string,
+  text: string,
+  customError?: string,
+  customErrorCondition?: boolean
+): string => {
+  if (inputValue === text) {
+    return 'No changes were made.';
+  } else if (!inputValue) {
+    return 'Text is required';
+  } else if (inputValue.length < 3) {
+    return 'Please enter at least 3 characters.';
+  } else if (customErrorCondition) {
+    return customError ?? 'Custom error occurred';
+  }
+  return '';
+};
+const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
+  label,
+  placeholder,
+  text,
+  showText = true,
+  highlightText,
+  customError,
+  confirmIcon,
+  customErrorCondition,
+  cancelIcon,
+  variant = 'textField',
+  onInputChange,
+  dropdownData = [],
+  // width,
+  className,
+  height,
+  isOpen = false,
+  confirmAction,
+  onClick,
+  tooltip,
+}) => {
+  const [isEditing, setIsEditing] = useState(isOpen ?? false);
+  const [inputValue, setInputValue] = useState(text ?? '');
+  const [dropdownValue, setDropdownValue] = useState(
+    dropdownData[0]?.value ?? ''
+  );
+  const [showError, setShowError] = useState('');
+  const [disabled, isDisabled] = useState(true);
+  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const cancelRef = useRef<HTMLDivElement | null>(null);
+  const [clickTimeout, setClickTimeout] = useState<number | null>(null);
+  const handleEsc = useEscapeKey('Escape');
+  useEffect(() => {
+    return () => {
+      if (clickTimeout) {
+        clearTimeout(clickTimeout);
+      }
+    };
+  }, [clickTimeout]);
+  const handleDoubleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
+    setIsEditing(true);
+    setShowError('');
+  };
+  const handleSingleClick = () => {
+    if (onClick) onClick();
+  };
+  const handleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
+
+    const timeout = window.setTimeout(() => {
+      handleSingleClick();
+      setClickTimeout(null);
+    }, 1000);
+
+    setClickTimeout(timeout);
+  };
+  const handleConfirm = () => {
+    let errorMessage = '';
+    if (inputValue.length === 0 || inputValue.trim().length === 0) {
+      errorMessage = 'Please type any text.';
+    } else if (inputValue.length < 3) {
+      errorMessage = 'Please enter at least 3 characters.';
+    } else if (customErrorCondition) {
+      errorMessage = customError ?? 'Invalid input.';
+    }
+
+    if (errorMessage) {
+      setShowError(errorMessage);
+    } else {
+      setIsEditing(false);
+      setShowError('');
+      if (confirmAction) confirmAction(inputValue, dropdownValue);
+    }
+  };
+
+  const handleCancel = () => {
+    setInputValue(text ?? '');
+    setDropdownValue(dropdownData[0]?.value ?? '');
+    setIsEditing(false);
+    setShowError('');
+    setIsTextFieldModified(false);
+  };
+
+  const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    isDisabled(false);
+    if (newValue.length === 0 || newValue.trim().length === 0) {
+      setShowError('Please type any text.');
+    } else if (newValue.length < 3) {
+      setShowError('Please enter at least 3 characters.');
+    } else if (customErrorCondition) {
+      setShowError(customError ?? 'Invalid input.');
+    } else {
+      setShowError('');
+    }
+
+    setIsTextFieldModified(newValue !== text);
+
+    if (onInputChange) {
+      onInputChange(newValue);
+    }
+  };
+
+  const handleBlur = (e: MouseEvent) => {
+    if (
+      containerRef.current &&
+      !containerRef.current.contains(e.target as Node) &&
+      cancelRef.current !== e.target
+    ) {
+      const errorMessage = getErrorMessage(inputValue, text ?? '', customError);
+
+      if (errorMessage && isEditing) {
+        setShowError(errorMessage);
+      } else {
+        setIsEditing(false);
+        setShowError('');
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleBlur);
+    return () => {
+      document.removeEventListener('click', handleBlur);
+    };
+  }, [inputValue]);
+  handleEsc(handleCancel);
+  return (
+    <div className="ff-label-edit-text-field" ref={containerRef}>
+      {isEditing ? (
+        <div className="ff-label-text-field">
+          {variant === 'textFieldWithDropdown' ? (
+            <div
+              className={`ff-label-text-field-with-dropdown ${
+                isEditing ? 'open' : ''
+              }`}
+              style={{ height }}
+            >
+              <Input
+                name="input"
+                type="text"
+                label={label ? label : ''}
+                disabled={false}
+                error={isThrowingError}
+                placeholder={placeholder ? placeholder : ''}
+                value={inputValue}
+                onChange={handleTextFieldChange}
+                className={`${className} 
+                
+               ${isTextFieldModified ? 'modified' : ''}`}
+              />
+              <Select
+                label={''}
+                optionsList={dropdownData}
+                selectedOption={{ value: dropdownValue, label: dropdownValue }}
+                onChange={(option) => setDropdownValue(option.value)}
+              />
+            </div>
+          ) : (
+            <div className="ff-label-text-field-without-dropdown">
+              <Input
+                name="input"
+                type="text"
+                label={label ? label : ''}
+                disabled={false}
+                placeholder={placeholder ? placeholder : ''}
+                value={inputValue}
+                onChange={handleTextFieldChange}
+                className={`${className} 
+               
+               ${isTextFieldModified ? 'modified' : ''}`}
+              />
+            </div>
+          )}
+          <div className="ff-icon-container">
+            {confirmIcon && (
+              <Icon
+                color="var(--label-edit-confirm-icon)"
+                height={20}
+                width={20}
+                name={confirmIcon.name}
+                disabled={disabled}
+                className={`${
+                  disabled ? 'disabled-confirm-icon' : 'confirm-icon'
+                }`}
+                onClick={handleConfirm}
+              />
+            )}
+            {cancelIcon && (
+              <Icon
+                color="var(--label-edit-cancel-icon)"
+                height={12}
+                width={20}
+                name={cancelIcon.name}
+                className="cancel-icon"
+                onClick={handleCancel}
+                ref={cancelRef}
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <Tooltip
+          title={tooltip?.tooltipTitle ? tooltip?.tooltipTitle : ''}
+          placement={'bottom'}
+        >
+          {showText && (
+            <span
+              className="display-text"
+              onDoubleClick={handleDoubleClick}
+              role="button"
+              onClick={handleClick}
+            >
+              <HighlightText text={inputValue} highlight={highlightText} />
+            </span>
+          )}
+        </Tooltip>
+      )}
+      {showError && isEditing && (
+        <Typography as="p" fontSize={8} className="error-text">
+          {showError}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default LabelEditTextField;

package/src/components/LabelEditTextField/index.ts

@@ -1 +1 @@
-export { default } from './LabelEditTextField';
+export { default } from './LabelEditTextField';

package/src/components/LabelEditTextField/types.ts

@@ -1,49 +1,51 @@
-export interface IconProps {
-  /** Name of the icon to be displayed. */
-  name: string;
-  /** Optional click handler function for the icon. */
-  onClick?: () => void;
-}
-export interface DropdownOption {
-  /** Unique identifier for the dropdown option. */
-  id: number;
-  /** Value associated with the dropdown option. */
-  value: string;
-  /** Label displayed for the dropdown option. */
-  label: string;
-}
-export interface LabelEditTextFieldTypes {
-  /** Label text displayed above the input field. */
-  label?: string;
-  /** Initial text displayed in the input field. */
-  text?: string;
-  /** Text to be highlighted within the displayed text, if provided. */
-  highlightText?: string;
-  /** Custom error message to be displayed, if applicable. */
-  customError?: string;
-  /** Confirm icon properties including icon name and click handler. */
-  confirmIcon?: IconProps;
-  /** Cancel icon properties including icon name and click handler. */
-  cancelIcon?: IconProps;
-  /** Type of input field - standard text field or text field with a dropdown. */
-  variant?: 'textFieldWithDropdown' | 'textField';
-  /** Array of dropdown options used if the dropdown variant is selected. */
-  dropdownData?: DropdownOption[];
-  /** Width of the input field component. */
-  width?: string;
-  /** Height of the input field component. */
-  height?: string;
-  /** Function called when confirming input changes, with input and dropdown values as arguments. */
-  confirmAction?: (inputValue: string, dropdownValue: string) => void;
-  isOpen?: boolean;
-  /**for conditionally handle custom error */
-  customErrorCondition?: boolean;
-  placeholder?: string;
-  onClick?: () => void;
-  /** Function called when every input character got changed */
-  onInputChange?: (newInputValue: string) => void;
-  tooltip?: {
-    tooltipTitle?: string;
-    tooltipPlacement?: string;
-  };
-}
+export interface IconProps {
+  /** Name of the icon to be displayed. */
+  name: string;
+  /** Optional click handler function for the icon. */
+  onClick?: () => void;
+}
+export interface DropdownOption {
+  /** Unique identifier for the dropdown option. */
+  id: number;
+  /** Value associated with the dropdown option. */
+  value: string;
+  /** Label displayed for the dropdown option. */
+  label: string;
+}
+export interface LabelEditTextFieldTypes {
+  /** Label text displayed above the input field. */
+  label?: string;
+  /** Initial text displayed in the input field. */
+  text?: string;
+  showText?: boolean;
+  /** Text to be highlighted within the displayed text, if provided. */
+  highlightText?: string;
+  /** Custom error message to be displayed, if applicable. */
+  customError?: string;
+  /** Confirm icon properties including icon name and click handler. */
+  confirmIcon?: IconProps;
+  /** Cancel icon properties including icon name and click handler. */
+  cancelIcon?: IconProps;
+  /** Type of input field - standard text field or text field with a dropdown. */
+  variant?: 'textFieldWithDropdown' | 'textField';
+  /** Array of dropdown options used if the dropdown variant is selected. */
+  dropdownData?: DropdownOption[];
+  /** Width of the input field component. */
+  width?: string;
+  /** Height of the input field component. */
+  height?: string;
+  /** Function called when confirming input changes, with input and dropdown values as arguments. */
+  confirmAction?: (inputValue: string, dropdownValue: string) => void;
+  isOpen?: boolean;
+  /**for conditionally handle custom error */
+  customErrorCondition?: boolean;
+  placeholder?: string;
+  onClick?: () => void;
+  /** Function called when every input character got changed */
+  onInputChange?: (newInputValue: string) => void;
+  className?: string;
+  tooltip?: {
+    tooltipTitle?: string;
+    tooltipPlacement?: string;
+  };
+}

package/src/components/LazyLoad/LazyLoad.d.ts

@@ -1,3 +1,3 @@
-declare module 'LazyLoad' {
-  export * from 'react-window';
-}
+declare module 'LazyLoad' {
+  export * from 'react-window';
+}