feature/IO-3544-Ant-Select-Deprecation - finish

client/src/components/vendor-search-select/vendor-search-select.component.jsx

@@ -3,8 +3,6 @@ import { Select, Space, Tag } from "antd";
 import { useEffect, useState } from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 
-const { Option } = Select;
-
 // To be used as a form element only.
 
 const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone, ref }) => {
@@ -21,10 +19,57 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
       ? options.filter((o) => o.favorite.filter((f) => f.toLowerCase() === preferredMake.toLowerCase()).length > 0)
       : [];
 
+  const formatOption = (o, isFavorite = false) => ({
+    key: isFavorite ? `favorite-${o.id}` : o.id,
+    value: o.id,
+    name: o.name,
+    discount: o.discount,
+    label: (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "nowrap",
+          width: "100%"
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            minWidth: 0,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          }}
+        >
+          {o.name}
+        </div>
+        <Space style={{ marginLeft: "1rem" }}>
+          {isFavorite && <HeartOutlined style={{ color: "red" }} />}
+          {!isFavorite &&
+            o.tags?.map((tag, idx) => (
+              <Tag key={idx} style={{ marginLeft: "0.5rem" }}>
+                {tag}
+              </Tag>
+            ))}
+          {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
+          {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
+        </Space>
+      </div>
+    )
+  });
+
+  const allOptions = [
+    ...(favorites?.map((o) => formatOption(o, true)) || []),
+    ...(options?.map((o) => formatOption(o, false)) || [])
+  ];
+
   return (
     <Select
       ref={ref}
-      showSearch
+      showSearch={{
+        optionFilterProp: "name"
+      }}
       value={option}
       style={{
         width: "100%"
@@ -59,76 +104,11 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
       }}
       popupMatchSelectWidth={false}
       onChange={setOption}
-      optionFilterProp="name"
       onSelect={onSelect}
       disabled={disabled || false}
       optionLabelProp="name"
-    >
-      {favorites &&
-        favorites.map((o) => (
-          <Option key={`favorite-${o.id}`} value={o.id} name={o.name} discount={o.discount}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                flexWrap: "nowrap",
-                width: "100%"
-              }}
-            >
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                {o.name}
-              </div>
-              <Space style={{ marginLeft: "1rem" }}>
-                <HeartOutlined style={{ color: "red" }} />
-                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-              </Space>
-            </div>
-          </Option>
-        ))}
-      {options &&
-        options.map((o) => (
-          <Option key={o.id} value={o.id} name={o.name} discount={o.discount}>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                flexWrap: "nowrap",
-                width: "100%"
-              }}
-            >
-              <div
-                style={{
-                  flex: 1,
-                  minWidth: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap"
-                }}
-              >
-                {o.name}
-              </div>
-              <Space style={{ marginLeft: "1rem" }}>
-                {o.tags?.map((tag, idx) => (
-                  <Tag key={idx} style={{ marginLeft: "0.5rem" }}>
-                    {tag}
-                  </Tag>
-                ))}
-                {o.phone && showPhone && <PhoneNumberFormatter>{o.phone}</PhoneNumberFormatter>}
-                {o.discount && o.discount !== 0 ? <Tag color="green">{`${o.discount * 100}%`}</Tag> : null}
-              </Space>
-            </div>
-          </Option>
-        ))}
-    </Select>
+      options={allOptions}
+    />
   );
 };
 export default VendorSearchSelect;