pixel-react 1.6.9 → 1.7.0

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -1,246 +1,239 @@
-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';
-
-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 ?? '';
-  }
-  return '';
-};
-const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
-  label,
-  text,
-  highlightText,
-  customError,
-  confirmIcon,
-  customErrorCondition,
-  cancelIcon,
-  variant = 'textField',
-  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 [isDropdownModified, setIsDropdownModified] = useState(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 = () => {
-    const errorMessage = getErrorMessage(
-      inputValue,
-      text,
-      customError,
-      customErrorCondition
-    );
-
-    if (errorMessage && isEditing) {
-      setShowError(errorMessage);
-    } else {
-      setIsEditing(false);
-      setShowError('');
-      if (confirmAction) confirmAction(inputValue, dropdownValue);
-    }
-  };
-
-  const handleCancel = () => {
-    setInputValue(text);
-    setDropdownValue(dropdownData[0]?.value ?? '');
-    setIsEditing(false);
-    setShowError('');
-    setIsTextFieldModified(false);
-    setIsDropdownModified(false);
-  };
-
-  const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
-    setIsTextFieldModified(true);
-    setShowError('');
-  };
-
-  const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    setDropdownValue(e.target.value);
-    setIsDropdownModified(true);
-    setShowError('');
-  };
-
-  const handleBlur = (e: MouseEvent) => {
-    if (
-      containerRef.current &&
-      !containerRef.current.contains(e.target as Node) &&
-      cancelRef.current !== e.target // Exclude clicks on cancel icon
-    ) {
-      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
-                type="text"
-                value={inputValue}
-                onChange={handleTextFieldChange}
-                className={`ff-text-dropdown-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{
-                  width,
-                }}
-              />
-              {label && <label className="ff-label">{label}</label>}
-              <select
-                value={dropdownValue}
-                onChange={handleDropdownChange}
-                className={`dropdown ${isDropdownModified ? 'modified' : ''}`}
-              >
-                {dropdownData.map((item) => (
-                  <option key={item.id} value={item.value}>
-                    {item.label}
-                  </option>
-                ))}
-              </select>
-            </div>
-          ) : (
-            <div className="ff-label-text-field-without-dropdown">
-              <input
-                type="text"
-                value={inputValue}
-                onChange={handleTextFieldChange}
-                className={`ff-text-field ${
-                  isTextFieldModified ? 'modified' : ''
-                }`}
-                placeholder=" "
-                style={{ width, height }}
-              />
-              <label className="ff-textfield-label">{label}</label>
-            </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';
+
+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 ?? '';
+  }
+  return '';
+};
+const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
+  label,
+  placeholder,
+  text,
+  highlightText,
+  customError,
+  confirmIcon,
+  customErrorCondition,
+  cancelIcon,
+  variant = 'textField',
+  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 = () => {
+    const errorMessage = getErrorMessage(
+      inputValue,
+      text,
+      customError,
+      customErrorCondition
+    );
+
+    if (errorMessage && isEditing) {
+      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>) => {
+    setInputValue(e.target.value);
+    setIsTextFieldModified(true);
+    setShowError('');
+  };
+
+  const handleBlur = (e: MouseEvent) => {
+    if (
+      containerRef.current &&
+      !containerRef.current.contains(e.target as Node) &&
+      cancelRef.current !== e.target // Exclude clicks on cancel icon
+    ) {
+      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;

package/src/components/LabelEditTextField/index.ts

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

package/src/components/LabelEditTextField/types.ts

@@ -1,46 +1,47 @@
-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;
-  onClick?: () => 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;
+  /** 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;
+  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';
+}