pixel-react 1.6.8 → 1.6.9

package/src/components/EditTextField/EditTextField.stories.tsx

@@ -1,127 +1,127 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import EditTextField from './EditTextField';
-import '../../assets/styles/_colors.scss';
-import './EditTextField.scss';
-import React, { useState } from 'react';
-
-const meta: Meta<typeof EditTextField> = {
-  title: 'Components/EditTextField',
-  component: EditTextField,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof EditTextField>;
-
-export const textFieldWithLabel: Story = {
-  render: () => {
-    const [customError, setCustomError] = useState<string>('');
-
-    const handleConfirmAction = (inputValue: string) => {
-      setCustomError(inputValue);
-    };
-    return (
-      <EditTextField
-        text="Verify The Function Of Categories For"
-        label="Add Module"
-        customError={customError} // Updated to use state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-          color: 'var(--label-edit-confirm-icon)',
-          height: 20,
-          width: 20,
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'var(--label-edit-cancel-icon)',
-          height: 16,
-          width: 16,
-        }}
-        width="300px"
-        height="22px"
-        confirmAction={handleConfirmAction}
-        customErrorCondition={false}
-      />
-    );
-  },
-};
-
-export const textFieldWithOutLabel: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      console.info('Confirmed input value:', inputValue);
-    };
-    return (
-      <EditTextField
-        text="Verify The Function Of Categories For" //it might be state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-          color: 'var(--label-edit-confirm-icon)',
-          height: 20,
-          width: 20,
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'var(--label-edit-cancel-icon)',
-          height: 16,
-          width: 16,
-        }}
-        width="300px"
-        height="22px"
-        confirmAction={handleConfirmAction}
-        customErrorCondition={false}
-      />
-    );
-  },
-};
-export const openTextField: Story = {
-  render: () => {
-    const handleConfirmAction = (inputValue: string) => {
-      //DEMO: we are getting that value from LabelEditTextField
-      console.info('Confirmed input value:', inputValue);
-    };
-    let demoText = 'Verify The Function Of Categories For';
-    return (
-      <EditTextField
-        text={demoText} //it might be state
-        confirmIcon={{
-          name: 'update_icon',
-          onClick: () => {},
-          color: 'yellow',
-          height: 20,
-          width: 20,
-        }}
-        cancelIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'yellow',
-          height: 16,
-          width: 16,
-        }}
-        editIcon={{
-          name: 'close',
-          onClick: () => {},
-          color: 'yellow',
-          height: 16,
-          width: 16,
-        }}
-        width="200px"
-        height="50px"
-        isOpen={true}
-        confirmAction={handleConfirmAction}
-        customError="max char 10"
-        customErrorCondition={demoText.length > 10}
-        onClick={() => {}}
-      />
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import EditTextField from './EditTextField';
+import '../../assets/styles/_colors.scss';
+import './EditTextField.scss';
+import React, { useState } from 'react';
+
+const meta: Meta<typeof EditTextField> = {
+  title: 'Components/EditTextField',
+  component: EditTextField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof EditTextField>;
+
+export const textFieldWithLabel: Story = {
+  render: () => {
+    const [customError, setCustomError] = useState<string>('');
+
+    const handleConfirmAction = (inputValue: string) => {
+      setCustomError(inputValue);
+    };
+    return (
+      <EditTextField
+        text="Verify The Function Of Categories For"
+        label="Add Module"
+        customError={customError} // Updated to use state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+          color: 'var(--label-edit-confirm-icon)',
+          height: 20,
+          width: 20,
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'var(--label-edit-cancel-icon)',
+          height: 16,
+          width: 16,
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+        customErrorCondition={false}
+      />
+    );
+  },
+};
+
+export const textFieldWithOutLabel: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    return (
+      <EditTextField
+        text="Verify The Function Of Categories For" //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+          color: 'var(--label-edit-confirm-icon)',
+          height: 20,
+          width: 20,
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'var(--label-edit-cancel-icon)',
+          height: 16,
+          width: 16,
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+        customErrorCondition={false}
+      />
+    );
+  },
+};
+export const openTextField: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.info('Confirmed input value:', inputValue);
+    };
+    let demoText = 'Verify The Function Of Categories For';
+    return (
+      <EditTextField
+        text={demoText} //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+          color: 'yellow',
+          height: 20,
+          width: 20,
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'yellow',
+          height: 16,
+          width: 16,
+        }}
+        editIcon={{
+          name: 'close',
+          onClick: () => {},
+          color: 'yellow',
+          height: 16,
+          width: 16,
+        }}
+        width="200px"
+        height="50px"
+        isOpen={true}
+        confirmAction={handleConfirmAction}
+        customError="max char 10"
+        customErrorCondition={demoText.length > 10}
+        onClick={() => {}}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/EditTextField/EditTextField.tsx

@@ -1,181 +1,181 @@
-import React, { useState, useRef, FC } from 'react';
-import './EditTextField.scss';
-import { LabelEditTextFieldTypes } from './types';
-import Typography from '../Typography';
-import HighlightText from '../HighlightText';
-import Icon from '../Icon';
-import Tooltip from '../Tooltip';
-import { capitalize } from '../../utils/capitalize/capitalize';
-
-const getErrorMessage = (
-  inputValue: string,
-  text: string,
-  customError?: string,
-  customErrorCondition?: boolean
-): string => {
-  if (inputValue === text) {
-    return 'No changes were made.';
-  }
-  if (!inputValue) {
-    return 'Text is required';
-  }
-  if (inputValue.length < 3) {
-    return 'Please enter at least 3 characters.';
-  }
-  if (customErrorCondition) {
-    return customError ?? '';
-  }
-  return '';
-};
-
-const EditTextField: FC<LabelEditTextFieldTypes> = ({
-  label,
-  text,
-  highlightText,
-  customError,
-  customErrorCondition = false,
-  confirmIcon,
-  cancelIcon,
-  editIcon,
-  dropdownData = [],
-  width = '300px',
-  height = '22px',
-  isOpen = false,
-  confirmAction,
-  onClick,
-  nameTooltipTitle,
-}) => {
-  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 containerRef = useRef<HTMLDivElement | null>(null);
-  const cancelRef = useRef<HTMLDivElement | null>(null);
-
-  const handleEditButtonClick = () => {
-    setIsEditing(true);
-    setShowError('');
-  };
-
-  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('');
-  };
-
-  return (
-    <div className="ff-label-edit-text-field" ref={containerRef}>
-      {isEditing ? (
-        <div className="ff-label-text-field">
-          <div className="ff-label-text-field-without-dropdown">
-            <input
-              type="text"
-              value={inputValue}
-              onChange={handleTextFieldChange}
-              className={`ff-text-field ${
-                showError && isEditing
-                  ? 'ff-text-field-error-border'
-                  : 'ff-text-field-border'
-              } ${isTextFieldModified ? 'modified' : ''}`}
-              placeholder=" "
-              style={{ width, height }}
-            />
-            <label
-              className={`ff-textfield-label  ${
-                showError && isEditing
-                  ? 'ff-text-field-error-text'
-                  : 'ff-text-field-text'
-              }`}
-            >
-              {label}
-            </label>
-          </div>
-          <div className="ff-icon-container">
-            {confirmIcon && (
-              <Icon
-                color={
-                  confirmIcon?.color ?? 'var(--default-confirm-icon-color)'
-                }
-                height={confirmIcon?.height ?? 20}
-                width={confirmIcon?.width ?? 20}
-                name={confirmIcon?.name ?? 'default-confirm-icon'}
-                className={confirmIcon?.className ?? 'default-confirm-class'}
-                onClick={handleConfirm}
-              />
-            )}
-            {cancelIcon && (
-              <Icon
-                color={cancelIcon?.color ?? 'var(--label-edit-cancel-icon)'}
-                height={cancelIcon?.height ?? 12}
-                width={cancelIcon?.width ?? 20}
-                name={cancelIcon?.name ?? 'default-cancel-icon'}
-                className={cancelIcon?.className ?? 'cancel-icon'}
-                onClick={handleCancel}
-                ref={cancelRef}
-              />
-            )}
-          </div>
-        </div>
-      ) : (
-        <div className="display-text-container">
-          {nameTooltipTitle ? (
-            <Tooltip title={nameTooltipTitle}>
-              <span className="display-text" onClick={onClick}>
-                <HighlightText text={inputValue} highlight={highlightText} />
-              </span>
-            </Tooltip>
-          ) : (
-            <span className="display-text" onClick={onClick}>
-              <HighlightText text={inputValue} highlight={highlightText} />
-            </span>
-          )}
-          <Tooltip title={capitalize(editIcon?.name || '') ?? 'Edit'}>
-            <Icon
-              color={editIcon?.color ?? 'var(--label-edit-cancel-icon)'}
-              height={editIcon?.height ?? 20}
-              width={editIcon?.width ?? 20}
-              name={editIcon?.name ?? 'edit'}
-              className={editIcon?.className ?? 'edit-icon'}
-              onClick={handleEditButtonClick}
-            />
-          </Tooltip>
-        </div>
-      )}
-      {showError && isEditing && (
-        <Typography as="p" fontSize={8} className="error-text">
-          {showError}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default EditTextField;
+import React, { useState, useRef, FC } from 'react';
+import './EditTextField.scss';
+import { LabelEditTextFieldTypes } from './types';
+import Typography from '../Typography';
+import HighlightText from '../HighlightText';
+import Icon from '../Icon';
+import Tooltip from '../Tooltip';
+import { capitalize } from '../../utils/capitalize/capitalize';
+
+const getErrorMessage = (
+  inputValue: string,
+  text: string,
+  customError?: string,
+  customErrorCondition?: boolean
+): string => {
+  if (inputValue === text) {
+    return 'No changes were made.';
+  }
+  if (!inputValue) {
+    return 'Text is required';
+  }
+  if (inputValue.length < 3) {
+    return 'Please enter at least 3 characters.';
+  }
+  if (customErrorCondition) {
+    return customError ?? '';
+  }
+  return '';
+};
+
+const EditTextField: FC<LabelEditTextFieldTypes> = ({
+  label,
+  text,
+  highlightText,
+  customError,
+  customErrorCondition = false,
+  confirmIcon,
+  cancelIcon,
+  editIcon,
+  dropdownData = [],
+  width = '300px',
+  height = '22px',
+  isOpen = false,
+  confirmAction,
+  onClick,
+  nameTooltipTitle,
+}) => {
+  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 containerRef = useRef<HTMLDivElement | null>(null);
+  const cancelRef = useRef<HTMLDivElement | null>(null);
+
+  const handleEditButtonClick = () => {
+    setIsEditing(true);
+    setShowError('');
+  };
+
+  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('');
+  };
+
+  return (
+    <div className="ff-label-edit-text-field" ref={containerRef}>
+      {isEditing ? (
+        <div className="ff-label-text-field">
+          <div className="ff-label-text-field-without-dropdown">
+            <input
+              type="text"
+              value={inputValue}
+              onChange={handleTextFieldChange}
+              className={`ff-text-field ${
+                showError && isEditing
+                  ? 'ff-text-field-error-border'
+                  : 'ff-text-field-border'
+              } ${isTextFieldModified ? 'modified' : ''}`}
+              placeholder=" "
+              style={{ width, height }}
+            />
+            <label
+              className={`ff-textfield-label  ${
+                showError && isEditing
+                  ? 'ff-text-field-error-text'
+                  : 'ff-text-field-text'
+              }`}
+            >
+              {label}
+            </label>
+          </div>
+          <div className="ff-icon-container">
+            {confirmIcon && (
+              <Icon
+                color={
+                  confirmIcon?.color ?? 'var(--default-confirm-icon-color)'
+                }
+                height={confirmIcon?.height ?? 20}
+                width={confirmIcon?.width ?? 20}
+                name={confirmIcon?.name ?? 'default-confirm-icon'}
+                className={confirmIcon?.className ?? 'default-confirm-class'}
+                onClick={handleConfirm}
+              />
+            )}
+            {cancelIcon && (
+              <Icon
+                color={cancelIcon?.color ?? 'var(--label-edit-cancel-icon)'}
+                height={cancelIcon?.height ?? 12}
+                width={cancelIcon?.width ?? 20}
+                name={cancelIcon?.name ?? 'default-cancel-icon'}
+                className={cancelIcon?.className ?? 'cancel-icon'}
+                onClick={handleCancel}
+                ref={cancelRef}
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <div className="display-text-container">
+          {nameTooltipTitle ? (
+            <Tooltip title={nameTooltipTitle}>
+              <span className="display-text" onClick={onClick}>
+                <HighlightText text={inputValue} highlight={highlightText} />
+              </span>
+            </Tooltip>
+          ) : (
+            <span className="display-text" onClick={onClick}>
+              <HighlightText text={inputValue} highlight={highlightText} />
+            </span>
+          )}
+          <Tooltip title={capitalize(editIcon?.name || '') ?? 'Edit'}>
+            <Icon
+              color={editIcon?.color ?? 'var(--label-edit-cancel-icon)'}
+              height={editIcon?.height ?? 20}
+              width={editIcon?.width ?? 20}
+              name={editIcon?.name ?? 'edit'}
+              className={editIcon?.className ?? 'edit-icon'}
+              onClick={handleEditButtonClick}
+            />
+          </Tooltip>
+        </div>
+      )}
+      {showError && isEditing && (
+        <Typography as="p" fontSize={8} className="error-text">
+          {showError}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default EditTextField;

package/src/components/EditTextField/index.ts

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