feat(segmentation mode): Add create, and export SEG with Brushes (#3632)

platform/ui/src/components/Dropdown/Dropdown.tsx

@@ -5,44 +5,88 @@ import classnames from 'classnames';
 import Icon from '../Icon';
 import Typography from '../Typography';
 
-const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
+const borderStyle = 'border-b last:border-b-0 border-secondary-main';
+
+const Dropdown = ({
+  id,
+  children,
+  showDropdownIcon,
+  list,
+  itemsClassName,
+  titleClassName,
+  showBorders,
+  alignment,
+  // By default the max characters per line is the longest title
+  // if you wish to override this, you can pass in a number
+  maxCharactersPerLine,
+}) => {
   const [open, setOpen] = useState(false);
   const element = useRef(null);
 
-  const DropdownItem = useCallback(({ id, title, icon, onClick }) => {
-    return (
-      <div
-        key={title}
-        className={classnames(
-          'hover:bg-secondary-main border-secondary-main flex cursor-pointer items-center border-b px-4 py-2 transition duration-300 last:border-b-0'
-        )}
-        onClick={() => {
-          setOpen(false);
-          onClick();
-        }}
-        data-cy={id}
-      >
-        {!!icon && (
-          <Icon
-            name={icon}
-            className="mr-2 w-4 text-white"
-          />
-        )}
-        <Typography className={titleClassName}>{title}</Typography>
-      </div>
-    );
-  }, []);
+  // choose the max characters per line based on the longest title
+  const longestTitle = list.reduce((acc, item) => {
+    if (item.title.length > acc) {
+      return item.title.length;
+    }
+    return acc;
+  }, 0);
 
-  DropdownItem.defaultProps = {
-    icon: '',
-  };
+  maxCharactersPerLine = maxCharactersPerLine ?? longestTitle;
 
-  DropdownItem.propTypes = {
-    id: PropTypes.string,
-    title: PropTypes.string.isRequired,
-    icon: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-  };
+  const DropdownItem = useCallback(
+    ({ id, title, icon, onClick }) => {
+      // Split the title into lines of length maxCharactersPerLine
+      const lines = [];
+      for (let i = 0; i < title.length; i += maxCharactersPerLine) {
+        lines.push(title.substring(i, i + maxCharactersPerLine));
+      }
+
+      return (
+        <div
+          key={title}
+          className={classnames(
+            'hover:bg-secondary-main flex cursor-pointer items-center px-4 py-2 transition duration-300 ',
+            titleClassName,
+            showBorders && borderStyle
+          )}
+          onClick={() => {
+            setOpen(false);
+            onClick();
+          }}
+          data-cy={id}
+        >
+          {!!icon && (
+            <Icon
+              name={icon}
+              className="mr-2 w-4 text-white"
+            />
+          )}
+          <div
+            style={{
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {title.length > maxCharactersPerLine && (
+              <div>
+                {lines.map((line, index) => (
+                  <Typography
+                    key={index}
+                    className={itemsClassName}
+                  >
+                    {line}
+                  </Typography>
+                ))}
+              </div>
+            )}
+            {title.length <= maxCharactersPerLine && (
+              <Typography className={itemsClassName}>{title}</Typography>
+            )}
+          </div>
+        </div>
+      );
+    },
+    [maxCharactersPerLine, itemsClassName, titleClassName, showBorders]
+  );
 
   const renderTitleElement = () => {
     return (
@@ -72,8 +116,10 @@ const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
     return (
       <div
         className={classnames(
-          'top-100 bg-primary-dark border-secondary-main absolute right-0 z-10 mt-2 origin-top-right transform rounded border shadow transition duration-300',
+          'top-100 border-secondary-main absolute z-10 mt-2 transform rounded border bg-black shadow transition duration-300',
           {
+            'right-0 origin-top-right': alignment === 'right',
+            'left-0 origin-top-left': alignment === 'left',
             'scale-0': !open,
             'scale-100': open,
           }
@@ -118,9 +164,10 @@ const Dropdown = ({ id, children, showDropdownIcon, list, titleClassName }) => {
     </div>
   );
 };
-
 Dropdown.defaultProps = {
   showDropdownIcon: true,
+  maxCharactersPerLine: 20,
+  showBorders: true,
 };
 
 Dropdown.propTypes = {
@@ -136,6 +183,9 @@ Dropdown.propTypes = {
       onClick: PropTypes.func.isRequired,
     })
   ).isRequired,
+  alignment: PropTypes.oneOf(['left', 'right']),
+  maxCharactersPerLine: PropTypes.number,
+  showBorders: PropTypes.bool,
 };
 
 export default Dropdown;