change dtable select style

src/DTableSelect/utils.js

@@ -2,6 +2,47 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { components } from 'react-select';
 
+// DtableSelect is based on seatable-ui.css, so use the following content to override the default react-select style
+const DEFAULT_CONTROL_STYLE = {
+  border: '1px solid rgba(0, 40, 100, 0.12) !important',
+};
+
+const FOCUS_CONTROL_STYLE = {
+  fontSize: '14px',
+  backgroundColor: '#ffffff',
+  borderColor: '#1991eb',
+  outline: '0',
+  boxShadow: '0 0 0 2px rgba(70, 127, 207, 0.25)',
+};
+
+const noneCallback = () => ({
+  display: 'none',
+});
+
+const controlCallback = (provided, state) => {
+  const { isDisabled, isFocused } = state;
+  if (isFocused && !isDisabled) {
+    return {
+      ...provided,
+      ...FOCUS_CONTROL_STYLE,
+      '&:hover': {
+        ...provided,
+        ...FOCUS_CONTROL_STYLE,
+      }
+    };
+  }
+  return {
+    ...provided,
+    fontSize: '14px',
+    lineHeight: '1.5',
+    cursor: 'pointer',
+    ...DEFAULT_CONTROL_STYLE,
+    '&:hover': {
+      ...DEFAULT_CONTROL_STYLE,
+    }
+  };
+};
+
 const UserSelectStyle = {
   option: (provided, state) => {
     const { isDisabled, isFocused } = state;
@@ -11,21 +52,10 @@ const UserSelectStyle = {
       backgroundColor: isFocused ? '#f5f5f5' : '#fff',
     });
   },
-  control: (provided) => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5',
-  }),
-  indicatorSeparator: () => ({
-    display: 'none',
-  }),
-  dropdownIndicator: () => ({
-    display: 'none',
-  }),
-  clearIndicator: () => ({
-    display: 'none',
-  }),
+  control: controlCallback,
+  indicatorSeparator: noneCallback,
+  dropdownIndicator: noneCallback,
+  clearIndicator: noneCallback,
   multiValue: (provided) => {
     return {
       ...provided,
@@ -81,14 +111,9 @@ const MenuSelectStyle = {
       },
     });
   },
-  control: (provided) => ({
-    ...provided,
-    fontSize: '14px',
-    cursor: 'pointer',
-    lineHeight: '1.5',
-  }),
+  control: controlCallback,
   menuPortal: base => ({ ...base, zIndex: 9999 }),
-  indicatorSeparator: () => {},
+  indicatorSeparator: noneCallback,
 };
 
 const DropdownIndicator = props => {