pixel-react 1.6.6 → 1.6.7

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -1,246 +1,246 @@
-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 = '22px',
-  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';
+
+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;

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,46 @@
-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;
+  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';
+}

package/src/components/LazyLoad/LazyLoad.stories.tsx

@@ -1,33 +1,33 @@
-import { Meta, StoryObj } from '@storybook/react';
-import LazyLoading from './LazyLoading';
-
-const meta: Meta = {
-  title: 'Components/LazyLoad',
-  component: LazyLoading,
-  parameters: {
-    layout: 'centered',
-    docs: {
-      description: {
-        component: `
-        The \`LazyLoading\` component is designed to optimize performance by only rendering the necessary parts of a large dataset that are visible within the viewport.
-        This component is particularly useful for applications that handle a significant amount of content, such as image galleries or infinite scrolling lists.
-
-        LazyLoad works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
-
-          i) It reduces the amount of work (and time) required to render the initial view and to process updates. \n
-          ii) It reduces the memory footprint by avoiding over-allocation of DOM nodes.`,
-        story:
-          'This is a description with [library](https://www.npmjs.com/package/react-window) to an external website.',
-      },
-    },
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof LazyLoading>;
-
-export const Primary: Story = {
-  render: () => <LazyLoading />,
-};
-
-export default meta;
+import { Meta, StoryObj } from '@storybook/react';
+import LazyLoading from './LazyLoading';
+
+const meta: Meta = {
+  title: 'Components/LazyLoad',
+  component: LazyLoading,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+        The \`LazyLoading\` component is designed to optimize performance by only rendering the necessary parts of a large dataset that are visible within the viewport.
+        This component is particularly useful for applications that handle a significant amount of content, such as image galleries or infinite scrolling lists.
+
+        LazyLoad works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:
+
+          i) It reduces the amount of work (and time) required to render the initial view and to process updates. \n
+          ii) It reduces the memory footprint by avoiding over-allocation of DOM nodes.`,
+        story:
+          'This is a description with [library](https://www.npmjs.com/package/react-window) to an external website.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof LazyLoading>;
+
+export const Primary: Story = {
+  render: () => <LazyLoading />,
+};
+
+export default meta;

package/src/components/LazyLoad/LazyLoad.ts

@@ -1,2 +1,2 @@
-import * as LazyLoad from 'react-window';
-export default LazyLoad;
+import * as LazyLoad from 'react-window';
+export default LazyLoad;