Uiselect

src/AsyncUserSelect/index.css

@@ -3,79 +3,84 @@
   height: auto !important;
   min-height: 38px;
   max-width: calc(100% - 10px);
+  padding: .375rem 40px .375rem 1rem;
+  position: relative;
+}
+
+.dtable-ui-selected-users-container.focus {
+  border: 1px solid var(--bs-bg-border-color) !important;
 }
 
 .dtable-ui-selected-users-container .dtable-ui-user-select-placeholder {
-  color: #808080;
+  color: var(--bs-icon-color);
+}
+
+.select-dropdown-indicator {
+  margin-left: -2px;
+  position: absolute;
+  right: 16px;
+  top: 50%;
+  transform: translateY(-50%)
+}
+
+.select-dropdown-indicator .multicolor-icon {
+  font-size: 12px;
+  width: 12px;
+  height: 12px;
 }
 
 .dtable-ui-user-select-popover .popover {
   width: 385px;
   max-width: 385px;
-  background: var(--bs-popover-bg);
-	border: 1px solid var(--bs-border-secondary-color);
-	border-radius: 4px;
-	box-shadow: var(--bs-border-secondary-shadow);
   margin-top: -4px;
 }
 
 .dtable-ui-user-select-container {
   position: relative;
 }
 
-.dtable-ui-user-select-container .dtable-ui-user-search-container {
-  padding: 10px 10px 0 10px;
-}
-
-.dtable-ui-user-select-container .dtable-ui-user-search-container input {
-  height: 28px;
-}
-
 .dtable-ui-user-select-container .dtable-ui-user-list-container {
   min-height: 160px;
   max-height: 200px;
-  margin: 10px 0;
+  padding: 8px;
   overflow: auto;
+  position: relative;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 30px;
-  padding: 0 10px;
+  height: 32px;
+  padding: 0 8px;
   font-size: 14px;
   cursor: pointer;
+  border-radius: 4px;
 }
 
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover,
 .dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight {
-  background: #f5f5f5;
+  background-color: var(--bs-btn-background-hover);
   cursor: pointer;
 }
 
-.no-user-search-result {
-  color: #666666;
-  font-size: 14px;
-  padding-left: 10px;
-  padding: 10px;
-  overflow: auto;
+.dtable-ui-user-select-container .dtable-ui-user-list-container {
+  margin: 0 !important;
 }
 
 .dtable-ui-user-select-popover .popover .dtable-ui-user-item {
   background: transparent;
 }
 
-.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check-mark {
-  color: #798d99;
-  font-size: 12px;
+.dtable-ui-user-list-container .dtable-ui-collaborator-check-icon .dtable-icon-check {
+  color: var(--bs-icon-color);
+  font-size: 14px;
 }
 
-/* user-item */
 .dtable-ui-user-item {
   display: inline-flex;
   align-items: center;
-  margin: 2px 10px 2px 0;
+  margin: 2px 4px 2px 0;
   padding: 0 8px 0 2px;
   height: 20px;
   font-size: 13px;
@@ -95,6 +100,7 @@
   justify-content: center;
   transform: translateY(0);
   flex-shrink: 0;
+  margin-right: 4px;
 }
 
 .dtable-ui-user-item .user-name {
@@ -125,3 +131,7 @@
   color: #666666;
   cursor: pointer;
 }
+
+.dtable-ui-selected-users-container .dtable-ui-users-input {
+  padding-right: 37px;
+}

src/AsyncUserSelect/index.js

@@ -3,14 +3,15 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Popover } from 'reactstrap';
 import ClickOutside from '../ClickOutside';
-import DtableSearchInput from '../DTableSearchInput';
+import DTableCustomizeSearchInput from '../DTableCustomizeSearchInput';
 import UserItem from './user-item';
 import { getLocale } from '../lang';
 import keyCodes from '../constants/key-codes';
+import DTableIcon from '../DTableIcon';
 
 import './index.css';
 
-const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder = '', isMulti = true, enableShowIDInOrgWhenSearchUser = false, selectedUsers = [], loadOptions, modifySelectedUsers }) => {
+const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder = '', isMulti = true, enableShowIDInOrgWhenSearchUser = false, selectedUsers = [], loadOptions, modifySelectedUsers, showDeptBtn = false }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [searchValue, setSearchValue] = useState('');
   const [searchedUsers, setSearchedUsers] = useState([]);
@@ -191,20 +192,23 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
     <ClickOutside onClickOutside={onClickOutside}>
       <>
         <div className={classnames('dtable-ui-selected-users-container form-control d-flex align-items-center', className, { 'focus': isPopoverOpen })} onClick={onTogglePopover} ref={selectorRef}>
-          {selectedUsers.map((user, index) => {
-            return (
-              <UserItem
-                key={`dtable-ui-user-selector-selected-user-${index}`}
-                user={user}
-                deleteUser={deselectUser}
-              />
-            );
-          })}
-          {selectedUsers.length === 0 && (
-            <div className="dtable-ui-user-select-placeholder">
-              {emptyPlaceholder || getLocale('Search_users')}
-            </div>
-          )}
+          <div className='dtable-ui-users-input'>
+            {selectedUsers.map((user, index) => {
+              return (
+                <UserItem
+                  key={`dtable-ui-user-selector-selected-user-${index}`}
+                  user={user}
+                  deleteUser={deselectUser}
+                />
+              );
+            })}
+            {selectedUsers.length === 0 && (
+              <div className="dtable-ui-user-select-placeholder">
+                {emptyPlaceholder || getLocale('Search_users')}
+              </div>
+            )}
+            {!showDeptBtn && <span className="select-dropdown-indicator d-inline-flex align-items-center"><DTableIcon symbol="down" color='var(--bs-icon-color)'/></span>}
+          </div>
         </div>
         {selectorRef.current && (
           <Popover
@@ -215,15 +219,16 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
             fade={false}
             className="dtable-ui-user-select-popover"
           >
-            <div className="dtable-ui-user-select-container" ref={userSelectContainerRef} onMouseDown={e => e.stopPropagation()} >
-              <div className="dtable-ui-user-search-container">
-                <DtableSearchInput
-                  autoFocus
+            <div className="dtable-ui-user-select-container" ref={userSelectContainerRef} onMouseDown={e => e.stopPropagation()}>
+              <div className="seatable-select-search">
+                <DTableCustomizeSearchInput
+                  className="option-search-control"
                   placeholder={searchPlaceholder || getLocale('Search_users')}
-                  value={searchValue}
-                  wait={200}
                   onChange={onSearchValueChanged}
-                  onKeyDown={onKeyDown}
+                  clearValue={() => onSearchValueChanged('')}
+                  autoFocus={true}
+                  isClearable={true}
+                  value={searchValue}
                 />
               </div>
               <div className="dtable-ui-user-list-container" ref={userListContainerRef}>
@@ -239,7 +244,7 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder =
                         <UserItem key={`dtable-ui-user-selector-searched-user-${index}`} user={user} enableShowIDInOrgWhenSearchUser={enableShowIDInOrgWhenSearchUser} />
                         {selectedUsers.find(u => u.email === user.email) && (
                           <div className='dtable-ui-collaborator-check-icon'>
-                            <i className="dtable-font dtable-icon-check-mark" aria-hidden="true"></i>
+                            <i className="dtable-font dtable-icon-check" aria-hidden="true"></i>
                           </div>
                         )}
                       </div>
@@ -269,6 +274,7 @@ AsyncUserSelect.propTypes = {
   selectedUsers: PropTypes.array,
   loadOptions: PropTypes.func,
   modifySelectedUsers: PropTypes.func,
+  showDeptBtn: PropTypes.bool,
 };
 
 export default AsyncUserSelect;