From bceae2fb4e6106cb2b01e9ab8617ae29e6b6d8ff Mon Sep 17 00:00:00 2001
From: Preet <preetsidhu.bits@gmail.com>
Date: Thu, 17 Mar 2022 10:57:39 +0530
Subject: [PATCH] refactor select button

---
 .../SelectWidget/component/SelectButton.tsx   | 57 +++++++++++++++++
 .../SelectWidget/component/index.styled.tsx   |  2 +-
 .../widgets/SelectWidget/component/index.tsx  | 64 ++-----------------
 3 files changed, 63 insertions(+), 60 deletions(-)
 create mode 100644 app/client/src/widgets/SelectWidget/component/SelectButton.tsx

diff --git a/app/client/src/widgets/SelectWidget/component/SelectButton.tsx b/app/client/src/widgets/SelectWidget/component/SelectButton.tsx
new file mode 100644
index 0000000000..12d96c7c83
--- /dev/null
+++ b/app/client/src/widgets/SelectWidget/component/SelectButton.tsx
@@ -0,0 +1,57 @@
+import React, { memo } from "react";
+import Icon, { IconSize } from "components/ads/Icon";
+import { Button } from "@blueprintjs/core";
+import { Colors } from "constants/Colors";
+import { isNil } from "lodash";
+
+import { isString } from "../../../utils/helpers";
+import { StyledDiv } from "./index.styled";
+
+export const isEmptyOrNill = (value: any) => {
+  return isNil(value) || (isString(value) && value === "");
+};
+
+interface SelectButtonProps {
+  disabled?: boolean;
+  displayText?: string;
+  handleCancelClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
+  togglePopoverVisibility: () => void;
+  value?: string;
+}
+
+function SelectButton(props: SelectButtonProps) {
+  const {
+    disabled,
+    displayText,
+    handleCancelClick,
+    togglePopoverVisibility,
+    value,
+  } = props;
+  return (
+    <Button
+      disabled={disabled}
+      onClick={togglePopoverVisibility}
+      rightIcon={
+        <StyledDiv>
+          {!isEmptyOrNill(value) ? (
+            <Icon
+              className="dropdown-icon cancel-icon"
+              fillColor={disabled ? Colors.GREY_7 : Colors.GREY_10}
+              name="cross"
+              onClick={handleCancelClick}
+              size={IconSize.XXS}
+            />
+          ) : null}
+          <Icon
+            className="dropdown-icon"
+            fillColor={disabled ? Colors.GREY_7 : Colors.GREY_10}
+            name="dropdown"
+          />
+        </StyledDiv>
+      }
+      text={displayText}
+    />
+  );
+}
+
+export default memo(SelectButton);
diff --git a/app/client/src/widgets/SelectWidget/component/index.styled.tsx b/app/client/src/widgets/SelectWidget/component/index.styled.tsx
index 773232de8b..0b97da87bf 100644
--- a/app/client/src/widgets/SelectWidget/component/index.styled.tsx
+++ b/app/client/src/widgets/SelectWidget/component/index.styled.tsx
@@ -12,7 +12,7 @@ import {
   BlueprintCSSTransform,
   createGlobalStyle,
 } from "constants/DefaultTheme";
-import { isEmptyOrNill } from ".";
+import { isEmptyOrNill } from "./SelectButton";
 
 export const TextLabelWrapper = styled.div<{
   compactMode: boolean;
diff --git a/app/client/src/widgets/SelectWidget/component/index.tsx b/app/client/src/widgets/SelectWidget/component/index.tsx
index a86349a976..33c668b565 100644
--- a/app/client/src/widgets/SelectWidget/component/index.tsx
+++ b/app/client/src/widgets/SelectWidget/component/index.tsx
@@ -1,16 +1,14 @@
-import React, { useMemo } from "react";
-import _ from "lodash";
+import React from "react";
 import { ComponentProps } from "widgets/BaseComponent";
-import { Button, Classes } from "@blueprintjs/core";
+import { Classes } from "@blueprintjs/core";
 import { DropdownOption } from "../constants";
 import {
   IItemListRendererProps,
   IItemRendererProps,
 } from "@blueprintjs/select";
-import { debounce, findIndex, isEmpty, isNil } from "lodash";
+import { debounce, findIndex, isEmpty, isNil, isNumber } from "lodash";
 import "../../../../node_modules/@blueprintjs/select/lib/css/blueprint-select.css";
 import { FixedSizeList } from "react-window";
-import { Colors } from "constants/Colors";
 import { TextSize } from "constants/WidgetConstants";
 import {
   StyledLabel,
@@ -20,12 +18,10 @@ import {
   DropdownStyles,
   DropdownContainer,
   MenuItem,
-  StyledDiv,
 } from "./index.styled";
 import Fuse from "fuse.js";
 import { WidgetContainerDiff } from "widgets/WidgetUtils";
-import Icon, { IconSize } from "components/ads/Icon";
-import { isString } from "../../../utils/helpers";
+import SelectButton from "./SelectButton";
 
 const FUSE_OPTIONS = {
   shouldSort: true,
@@ -36,10 +32,6 @@ const FUSE_OPTIONS = {
   keys: ["label", "value"],
 };
 
-export const isEmptyOrNill = (value: any) => {
-  return isNil(value) || (isString(value) && value === "");
-};
-
 const DEBOUNCE_TIMEOUT = 800;
 const ITEM_SIZE = 40;
 
@@ -49,52 +41,6 @@ interface SelectComponentState {
   isOpen?: boolean;
 }
 
-interface SelectButtonProps {
-  disabled?: boolean;
-  displayText?: string;
-  handleCancelClick?: (event: React.MouseEvent<Element, MouseEvent>) => void;
-  togglePopoverVisibility: () => void;
-  value?: string;
-}
-
-function SelectButton(props: SelectButtonProps) {
-  const {
-    disabled,
-    displayText,
-    handleCancelClick,
-    togglePopoverVisibility,
-    value,
-  } = props;
-  return useMemo(
-    () => (
-      <Button
-        disabled={disabled}
-        onClick={togglePopoverVisibility}
-        rightIcon={
-          <StyledDiv>
-            {!isEmptyOrNill(value) ? (
-              <Icon
-                className="dropdown-icon cancel-icon"
-                fillColor={disabled ? Colors.GREY_7 : Colors.GREY_10}
-                name="cross"
-                onClick={handleCancelClick}
-                size={IconSize.XXS}
-              />
-            ) : null}
-            <Icon
-              className="dropdown-icon"
-              fillColor={disabled ? Colors.GREY_7 : Colors.GREY_10}
-              name="dropdown"
-            />
-          </StyledDiv>
-        }
-        text={displayText}
-      />
-    ),
-    [disabled, displayText, handleCancelClick, value],
-  );
-}
-
 class SelectComponent extends React.Component<
   SelectComponentProps,
   SelectComponentState
@@ -246,7 +192,7 @@ class SelectComponent extends React.Component<
       <FixedSizeList
         height={300}
         initialScrollOffset={
-          _.isNumber(activeItemIndex) ? activeItemIndex * ITEM_SIZE : 0
+          isNumber(activeItemIndex) ? activeItemIndex * ITEM_SIZE : 0
         }
         itemCount={items.length}
         itemSize={ITEM_SIZE}