Web:Common:AdvancedSelector: refactoring and remove useless code

packages/asc-web-common/components/AdvancedSelector/sub-components/Option.js

@@ -13,13 +13,18 @@ const Option = ({
   avatarUrl,
   label,
   keyProp,
-  tooltipProps,
   onOptionChange,
   onLinkClick,
   isLoader,
   loadingLabel,
 }) => {
-  console.log("render option", index, isLoader);
+  const onOptionChangeAction = React.useCallback(() => {
+    onOptionChange && onOptionChange(index, isChecked);
+  }, [onOptionChange, index, isChecked]);
+
+  const onLinkClickAction = React.useCallback(() => {
+    onLinkClick && onLinkClick(index);
+  }, [onLinkClick, index]);
 
   return isLoader ? (
     <div style={style} className="row-option">
@@ -43,8 +48,7 @@ const Option = ({
       className="row-option"
       value={`${index}`}
       name={`selector-row-option-${index}`}
-      onClick={() => onOptionChange(index, isChecked)}
-      {...tooltipProps}
+      onClick={onOptionChangeAction}
     >
       <div className="option-info">
         <Avatar
@@ -77,8 +81,7 @@ const Option = ({
       className="row-option"
       data-index={index}
       name={`selector-row-option-${index}`}
-      onClick={() => onLinkClick(index)}
-      {...tooltipProps}
+      onClick={onLinkClickAction}
     >
       <div className="option-info">
         <Avatar

packages/asc-web-common/components/AdvancedSelector/sub-components/Selector.js

@@ -254,7 +254,6 @@ const Selector = (props) => {
 
       const option = options[index];
       const isChecked = isOptionChecked(option);
-      let tooltipProps = {};
 
       ReactTooltip.rebuild();
 
@@ -264,7 +263,6 @@ const Selector = (props) => {
           style={style}
           {...option}
           isChecked={isChecked}
-          tooltipProps={tooltipProps}
           onOptionChange={onOptionChange}
           onLinkClick={onLinkClick}
           isMultiSelect={isMultiSelect}
@@ -379,6 +377,7 @@ const Selector = (props) => {
     if (groups.length === 0) {
       return <Option isLoader={true} loadingLabel={loadingLabel} />;
     }
+
     return (
       <AutoSizer>
         {({ width, height }) => (
@@ -446,7 +445,6 @@ const Selector = (props) => {
   }, [isMultiSelect, groupHeader, selectedOptionList, getGroupSelectedOptions]);
 
   const renderOptionList = React.useCallback(() => {
-    console.log("option list render");
     return (
       <AutoSizer>
         {({ width, height }) => (
@@ -487,8 +485,6 @@ const Selector = (props) => {
     onArrowClick && onArrowClick();
   }, [groups, groupHeader, onArrowClick, onGroupChanged]);
 
-  console.log("render selector");
-
   return (
     <StyledSelector
       isMultiSelect={isMultiSelect}

packages/asc-web-common/components/AdvancedSelector/sub-components/StyledSelector.js

@@ -1,17 +1,14 @@
-import React from "react";
 import styled, { css } from "styled-components";
 
 import Base from "@appserver/components/themes/base";
 
 /* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
-const Container = ({ isMultiSelect, hasSelected, ...props }) => (
-  <div {...props} />
-);
+
 /* eslint-enable react/prop-types */
 /* eslint-enable no-unused-vars */
 
-const StyledSelector = styled(Container)`
+const StyledSelector = styled.div`
   display: grid;
 
   height: 100%;