pixel-react 1.6.6 → 1.6.8

package/src/components/MultiSelect/Dropdown.tsx

@@ -1,135 +1,142 @@
-import { forwardRef, useContext, useMemo } from 'react';
-import { dropdownDefaultCSSData, DropdownProps } from './dropdownTypes';
-
-import './Dropdown.scss';
-import { ThemeContext } from '../ThemeProvider/ThemeProvider';
-import classNames from 'classnames';
-import Button from '../Button';
-import Typography from '../Typography';
-import Checkbox from '../Checkbox';
-import Tooltip from '../Tooltip';
-import { truncateText } from '../../utils/truncateText/truncateText';
-import { getLabel } from '../../utils/getSelectOptionValue/getSelectOptionValue';
-
-const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
-  (
-    {
-      options,
-      handleOptionChange,
-      searchedKeyword = '',
-      dropdownPosition = {},
-      zIndex,
-      withSelectButton,
-      labelAccessor,
-    },
-    ref
-  ) => {
-    const filteredOptions = options
-      ? options.filter((option) =>
-          getLabel(option, labelAccessor)
-            ?.toLowerCase()
-            .includes(searchedKeyword.toLowerCase())
-        )
-      : [];
-    const { verticalMargin, optionHeight, maxDropdownHeight } =
-      dropdownDefaultCSSData;
-
-    const onSelectClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.stopPropagation();
-      handleOptionChange({}, false);
-    };
-    const topPosition = useMemo(() => {
-      let calculatedDropdownHeight = Math.min(
-        filteredOptions.length * optionHeight,
-        maxDropdownHeight
-      );
-
-      if (filteredOptions.length < 5 && withSelectButton) {
-        calculatedDropdownHeight += 32;
-      }
-
-      const isEnoughSpaceAvailable =
-        dropdownPosition.fromBottom >=
-        calculatedDropdownHeight + verticalMargin;
-      const topPosition = isEnoughSpaceAvailable
-        ? dropdownPosition.top
-        : dropdownPosition.top -
-          calculatedDropdownHeight -
-          dropdownPosition.selectHeight -
-          2 * verticalMargin;
-
-      return topPosition;
-    }, [filteredOptions.length, withSelectButton, dropdownPosition]);
-
-    const themeContext = useContext(ThemeContext);
-    const currentTheme = themeContext?.currentTheme;
-    return (
-      <div
-        role="listbox"
-        ref={ref}
-        className={classNames('ff-multiselect-dropdown-container', {
-          [currentTheme || '']: true,
-        })}
-        style={{
-          left: dropdownPosition.left,
-          top: topPosition,
-          width: dropdownPosition.width,
-          zIndex,
-        }}
-      >
-        <div
-          className="ff-multiselect-options-wrapper"
-          style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
-        >
-          {filteredOptions.length === 0 ? (
-            <div className="dropdown-option-container ">
-              <p className="no-options">No Option</p>
-            </div>
-          ) : (
-            filteredOptions.map((info) => (
-              <div
-                role="option"
-                className={`dropdown-option-container`}
-                key={getLabel(info, labelAccessor)}
-                onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
-                  const target = e.target as HTMLInputElement;
-                  if(target.type==='checkbox'){
-                    return
-                  }
-                  !info?.isDisabled && handleOptionChange(info, !info.isChecked);
-                }
-                }
-              >
-                <Checkbox
-                  checked={info.isChecked}
-                  disabled={info?.isDisabled}
-                />
-                <Tooltip
-                  zIndex={zIndex + 1}
-                  title={
-                    getLabel(info, labelAccessor).length > 25
-                      ? getLabel(info, labelAccessor)
-                      : ''
-                  }
-                  children={
-                    <Typography
-                      className="dropdown-option-label"
-                      children={truncateText(getLabel(info, labelAccessor), 25)}
-                    />
-                  }
-                />
-              </div>
-            ))
-          )}
-        </div>
-        {withSelectButton && filteredOptions.length > 0 && (
-          <div className="select-button-container">
-            <Button label="Select" variant="tertiary" onClick={onSelectClick} />
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
-export default Dropdown;
+import { forwardRef, useContext, useMemo } from 'react';
+import { dropdownDefaultCSSData, DropdownProps } from './dropdownTypes';
+
+import './Dropdown.scss';
+import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
+import Button from '../Button';
+import Typography from '../Typography';
+import Checkbox from '../Checkbox';
+import Tooltip from '../Tooltip';
+import { truncateText } from '../../utils/truncateText/truncateText';
+import { getLabel, getValue } from '../../utils/getSelectOptionValue/getSelectOptionValue';
+
+const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      options,
+      handleOptionChange,
+      searchedKeyword = '',
+      dropdownPosition = {},
+      zIndex,
+      withSelectButton,
+      labelAccessor='label',
+      valueAccessor='value'
+    },
+    ref
+  ) => {
+    const filteredOptions = options
+      ? options.filter((option) =>
+          getValue(option, valueAccessor)
+            ?.toLowerCase()
+            .includes(searchedKeyword.toLowerCase())
+        )
+      : [];
+    const { verticalMargin, optionHeight, maxDropdownHeight } =
+      dropdownDefaultCSSData;
+
+    const onSelectClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      handleOptionChange({}, false);
+    };
+    const renderOption=(info:any, labelAccessor:string)=>{
+      if(typeof info[labelAccessor] ==='string'){
+        return truncateText(getLabel(info, labelAccessor), 25)
+      }
+      return info[labelAccessor]
+    }
+    const topPosition = useMemo(() => {
+      let calculatedDropdownHeight = Math.min(
+        filteredOptions.length * optionHeight,
+        maxDropdownHeight
+      );
+
+      if (filteredOptions.length < 5 && withSelectButton) {
+        calculatedDropdownHeight += 32;
+      }
+
+      const isEnoughSpaceAvailable =
+        dropdownPosition.fromBottom >=
+        calculatedDropdownHeight + verticalMargin;
+      const topPosition = isEnoughSpaceAvailable
+        ? dropdownPosition.top
+        : dropdownPosition.top -
+          calculatedDropdownHeight -
+          dropdownPosition.selectHeight -
+          2 * verticalMargin;
+
+      return topPosition;
+    }, [filteredOptions.length, withSelectButton, dropdownPosition]);
+
+    const themeContext = useContext(ThemeContext);
+    const currentTheme = themeContext?.currentTheme;
+    return (
+      <div
+        role="listbox"
+        ref={ref}
+        className={classNames('ff-multiselect-dropdown-container', {
+          [currentTheme || '']: true,
+        })}
+        style={{
+          left: dropdownPosition.left,
+          top: topPosition,
+          width: dropdownPosition.width,
+          zIndex,
+        }}
+      >
+        <div
+          className="ff-multiselect-options-wrapper"
+          style={{ maxHeight: withSelectButton ? '128px' : '160px' }}
+        >
+          {filteredOptions.length === 0 ? (
+            <div className="dropdown-option-container ">
+              <p className="no-options">No Option</p>
+            </div>
+          ) : (
+            filteredOptions.map((info) => (
+              <div
+                role="option"
+                className={`dropdown-option-container`}
+                key={getLabel(info, labelAccessor)}
+                onClick={(e:React.MouseEvent<HTMLDivElement>) =>{
+                  const target = e.target as HTMLInputElement;
+                  if(target.type==='checkbox'){
+                    return
+                  }
+                  !info?.isDisabled && handleOptionChange(info, !info.isChecked);
+                }
+                }
+              >
+                <Checkbox
+                  checked={info.isChecked}
+                  disabled={info?.isDisabled}
+                />
+                <Tooltip
+                  zIndex={zIndex + 1}
+                  title={
+                   typeof info[labelAccessor]==='string' && getLabel(info, labelAccessor)?.length > 25
+                      ? getLabel(info, labelAccessor)
+                      : ''
+                  }
+                  children={
+                    <Typography
+                      className="dropdown-option-label"
+                      children={renderOption(info,labelAccessor)}
+                    />
+                  }
+                />
+              </div>
+            ))
+          )}
+        </div>
+        {withSelectButton && filteredOptions.length > 0 && (
+          <div className="select-button-container">
+            <Button label="Select" variant="tertiary" onClick={onSelectClick} />
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+export default Dropdown;