pixel-react 1.2.0 → 1.2.1

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -0,0 +1,207 @@
+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';
+
+const getErrorMessage = (
+  inputValue: string,
+  text: string,
+  customError?: string
+): 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 (customError) {
+    return customError;
+  }
+  return '';
+};
+const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
+  label,
+  text,
+  highlightText,
+  customError,
+  confirmIcon,
+  cancelIcon,
+  variant = 'textField',
+  dropdownData = [],
+  width = '300px',
+  height = '22px',
+  confirmAction,
+}) => {
+  const [isEditing, setIsEditing] = useState(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 handleDoubleClick = () => {
+    setIsEditing(true);
+    setShowError('');
+  };
+
+  const handleConfirm = () => {
+    const errorMessage = getErrorMessage(inputValue, text, customError);
+
+    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}
+      style={{ width }}
+    >
+      {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>
+      ) : (
+        <span
+          className="display-text"
+          onDoubleClick={handleDoubleClick}
+          role="button"
+        >
+          <HighlightText text={inputValue} highlight={highlightText} />
+        </span>
+      )}
+      {showError && isEditing && (
+        <Typography as="p" fontSize={8} className="error-text">
+          {showError}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default LabelEditTextField;

package/src/components/LabelEditTextField/index.ts

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

package/src/components/LabelEditTextField/types.ts

@@ -0,0 +1,38 @@
+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;
+}

package/src/components/Select/Select.stories.tsx

@@ -17,10 +17,12 @@ type Story = StoryObj<typeof Select>;
 export const Primary: Story = {
   args: {
     label: 'Select',
+    labelAccessor: 'name',
+    valueAccessor: 'value',
     optionsList: [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-      { label: 'Option 3', value: '3' },
+      { label: 'Option 1', value: '1', name: 'abcd' },
+      { label: 'Option 2', value: '2', name: '123' },
+      { label: 'Option 3', value: '3', name: '456' },
     ],
   },
 };

package/src/components/Select/Select.tsx

@@ -8,6 +8,7 @@ import Icon from '../Icon';
 import './Select.scss';
 import usePortalPosition from '../../hooks/usePortalPosition';
 import Typography from '../Typography';
+import { getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const selectReducer = (
   state: SelectState,
@@ -116,6 +117,8 @@ const Select = ({
   required = false,
   optionsRequired = true,
   selectedOptionColor = 'var(--ff-select-text-color)',
+  labelAccessor,
+  valueAccessor,
 }: SelectProps) => {
   const initialState: SelectState = useMemo(
     () => ({
@@ -164,7 +167,7 @@ const Select = ({
       if (actionType === 'SHOW_ERROR' || actionType === 'BLUR_INPUT') {
         dispatch({
           type: actionType,
-          payload: { optionsList, option: selectedOption.value },
+          payload: { optionsList, option: getValue(selectedOption) },
         });
       } else {
         dispatch({ type: actionType });
@@ -176,9 +179,10 @@ const Select = ({
     if (disabled) return;
     const { value } = e.target;
     const filteredOptions = optionsList.filter((option) => {
-      return typeof option.value === 'string'
-        ? option.value.toLowerCase().includes(value.toLowerCase().trim())
-        : option.value === Number(value);
+      const valueData = getValue(option, valueAccessor);
+      return typeof valueData === 'string'
+        ? valueData.toLowerCase().includes(value.toLowerCase().trim())
+        : valueData === Number(value);
     });
     dispatch({ type: 'UPDATE_OPTION_LIST', payload: filteredOptions });
     dispatch({ type: 'UPDATE_OPTION', payload: value });
@@ -197,7 +201,10 @@ const Select = ({
   const onSelectOptionSelector = (option: Option) => {
     if (!disabled) {
       onSelectBlur();
-      dispatch({ type: 'UPDATE_OPTION', payload: option.value });
+      dispatch({
+        type: 'UPDATE_OPTION',
+        payload: getValue(option, valueAccessor),
+      });
       if (onChange) {
         onChange(option);
       }
@@ -361,6 +368,7 @@ const Select = ({
                 options={options}
                 optionZIndex={optionZIndex}
                 inputRef={InputRef}
+                labelAccessor={labelAccessor}
               />,
               document.body
             )}

package/src/components/Select/components/Dropdown/Dropdown.tsx

@@ -7,6 +7,7 @@ import Typography from '../../../Typography';
 import { ffid } from '../../../../utils/ffID/ffid';
 import { ThemeContext } from '../../../ThemeProvider/ThemeProvider';
 import classNames from 'classnames';
+import { getLabel } from '../../../../utils/getSelectOptionValue/getSelectOptionValue';
 
 const Dropdown = ({
   onSelectBlur,
@@ -15,6 +16,7 @@ const Dropdown = ({
   options = [],
   optionZIndex = 100,
   inputRef,
+  labelAccessor,
 }: DropDownListProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -71,7 +73,7 @@ const Dropdown = ({
               color="var(--ff-select-text-color)"
               onClick={() => onSelectOptionSelector(option)}
             >
-              {option.label}
+              {getLabel(option, labelAccessor)}
             </Typography>
           ))
         ) : (

package/src/components/Select/components/Dropdown/dropdownTypes.ts

@@ -7,6 +7,8 @@ export interface DropDownListProps {
   options?: Option[];
   optionZIndex?: number;
   inputRef?: React.RefObject<HTMLInputElement>;
+  labelAccessor?: string;
+  valueAccessor?: string;
 }
 
 export const dropdownDefaultCSSData = {
@@ -17,3 +19,4 @@ export const dropdownDefaultCSSData = {
   // Future use case if we provide padding-top, padding-bottom for option wrapper
   dropDownWrapperPadding: 0,
 };
+

package/src/components/Select/types.ts

@@ -1,5 +1,3 @@
-import { ReactNode } from 'react';
-
 export interface SelectProps {
   /*
    * Label for the select dropdown
@@ -69,6 +67,15 @@ export interface SelectProps {
    * selectedOptionColor prop provides the custom color for the selected option
    */
   selectedOptionColor?: string;
+
+  /**
+   * Label accessor
+   */
+  labelAccessor?: string;
+  /**
+   * Value accessor
+   */
+  valueAccessor?: string;
 }
 
 export interface DrowdownPosition {
@@ -124,8 +131,8 @@ export type SelectAction =
       };
     };
 
+type OptionValue = any;
+
 export interface Option {
-  label: string | ReactNode;
-  value: string;
-  disabled?: boolean;
+  [key: string]: OptionValue;
 }

package/src/index.ts

@@ -50,6 +50,7 @@ import IconRadioGroup from './components/IconRadioGroup';
 import MachineInputField from './components/MachineInputField';
 import SequentialConnectingBranch from './components/SequentialConnectingBranch';
 import AttachmentButton from './components/AttachmentButton';
+import LabelEditTextField from './components/LabelEditTextField';
 
 // Utils imports
 import { checkEmpty } from './utils/checkEmpty/checkEmpty';
@@ -120,6 +121,7 @@ export {
   MachineInputField,
   SequentialConnectingBranch,
   AttachmentButton,
+  LabelEditTextField,
   IconRadioGroup,
 
   // utils exports

package/src/utils/getSelectOptionValue/getSelectOptionValue.ts

@@ -0,0 +1,31 @@
+type DynamicValues = any;
+
+interface dynamicObject {
+  [key: string]: DynamicValues;
+}
+
+type accessorType = string | undefined;
+
+export const getLabel = (
+  option: dynamicObject,
+  accessor: accessorType = ''
+) => {
+  if (!accessor) {
+    if (option.hasOwnProperty('label')) {
+      return option.label;
+    }
+  }
+  return option[accessor];
+};
+
+export const getValue = (
+  option: dynamicObject,
+  accessor: accessorType = ''
+) => {
+  if (!accessor) {
+    if (option.hasOwnProperty('value')) {
+      return option.label;
+    }
+  }
+  return option[accessor];
+};