feat: 联系人搜索
This commit is contained in:
@@ -85,8 +85,10 @@ function getContacts(socket) {
|
||||
nickname: contact.NickName,
|
||||
displayName: getDisplayName(contact),
|
||||
signature: contact.Signature,
|
||||
nameInitial: contact.PYInitial || contact.RemarkPYInitial,
|
||||
nameQuanPin: contact.PYQuanPin || contact.RemarkPYQuanPin,
|
||||
nameInitial: contact.RemarkPYInitial,
|
||||
nickNameInitial: contact.PYInitial,
|
||||
nameQuanPin: contact.RemarkPYQuanPin,
|
||||
nickNameQuanPin: contact.PYQuanPin,
|
||||
avatar: `${config.baseUrl}/session/${socketIDToSessionID.get(
|
||||
socket.id
|
||||
)}/avatar/${contact.UserName}`,
|
||||
|
||||
Generated
+32
@@ -18,6 +18,7 @@
|
||||
"dayjs": "^1.10.7",
|
||||
"filesize": "^7.0.0",
|
||||
"linaria": "^2.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"log4js": "^6.3.0",
|
||||
"multer": "^1.4.3",
|
||||
"normalize.css": "^8.0.1",
|
||||
@@ -60,6 +61,7 @@
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@types/ali-oss": "^6.0.10",
|
||||
"@types/loadable__component": "^5.13.4",
|
||||
"@types/lodash-es": "^4.17.5",
|
||||
"@types/platform": "^1.3.4",
|
||||
"@types/prismjs": "^1.16.6",
|
||||
"@types/pure-render-decorator": "^0.2.28",
|
||||
@@ -2239,6 +2241,21 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.14.177",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz",
|
||||
"integrity": "sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/lodash-es": {
|
||||
"version": "4.17.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.5.tgz",
|
||||
"integrity": "sha512-SHBoI8/0aoMQWAgUHMQ599VM6ZiSKg8sh/0cFqqlQQMyY9uEplc0ULU5yQNzcvdR4ZKa0ey8+vFmahuRbOCT1A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/minimatch": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
|
||||
@@ -13513,6 +13530,21 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.14.177",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.177.tgz",
|
||||
"integrity": "sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/lodash-es": {
|
||||
"version": "4.17.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.5.tgz",
|
||||
"integrity": "sha512-SHBoI8/0aoMQWAgUHMQ599VM6ZiSKg8sh/0cFqqlQQMyY9uEplc0ULU5yQNzcvdR4ZKa0ey8+vFmahuRbOCT1A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"@types/minimatch": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"dayjs": "^1.10.7",
|
||||
"filesize": "^7.0.0",
|
||||
"linaria": "^2.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"log4js": "^6.3.0",
|
||||
"multer": "^1.4.3",
|
||||
"normalize.css": "^8.0.1",
|
||||
@@ -59,6 +60,7 @@
|
||||
"@testing-library/jest-dom": "^4.2.4",
|
||||
"@types/ali-oss": "^6.0.10",
|
||||
"@types/loadable__component": "^5.13.4",
|
||||
"@types/lodash-es": "^4.17.5",
|
||||
"@types/platform": "^1.3.4",
|
||||
"@types/prismjs": "^1.16.6",
|
||||
"@types/pure-render-decorator": "^0.2.28",
|
||||
|
||||
@@ -1,11 +1,25 @@
|
||||
import React from 'react';
|
||||
import { uniq } from 'lodash-es';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { State } from '../../state/reducer';
|
||||
import ContactComponent from './Contact';
|
||||
import Style from './ContactList.less';
|
||||
|
||||
function ContactList() {
|
||||
const contacts = useSelector((state: State) => state.contacts);
|
||||
function ContactList({ keyword = '' }) {
|
||||
let contacts =
|
||||
useSelector((state: State) => [...state.groups, ...state.contacts]) ||
|
||||
[];
|
||||
if (keyword) {
|
||||
keyword = keyword.toLowerCase();
|
||||
contacts = [
|
||||
...contacts.filter((c) => c.displayName?.toLowerCase().includes(keyword)),
|
||||
...contacts.filter((c) => c.nameQuanPin?.toLowerCase().includes(keyword)),
|
||||
...contacts.filter((c) => c.nickname?.toLowerCase().includes(keyword)),
|
||||
...contacts.filter((c) => c.nickname?.toLowerCase().includes(keyword)),
|
||||
];
|
||||
contacts = uniq(contacts);
|
||||
}
|
||||
console.log(contacts);
|
||||
|
||||
return (
|
||||
<div className={Style.linkmanList}>
|
||||
|
||||
@@ -1,23 +1,18 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import useAction from '../../hooks/useAction';
|
||||
import useAero from '../../hooks/useAero';
|
||||
import React, { useState } from 'react';
|
||||
import useIsLogin from '../../hooks/useIsLogin';
|
||||
import { State } from '../../state/reducer';
|
||||
import ContactList from './ContactList';
|
||||
import SearchBar from './SearchBar';
|
||||
import Style from './FunctionBarAndContactList.less';
|
||||
|
||||
function FunctionBarAndContactList() {
|
||||
const isLogin = useIsLogin();
|
||||
const action = useAction();
|
||||
const aero = useAero();
|
||||
const [keyword, setKeyword] = useState('');
|
||||
|
||||
return (
|
||||
<div className={Style.contactList} role="button">
|
||||
<div className={Style.container}>
|
||||
{isLogin && <SearchBar />}
|
||||
<ContactList />
|
||||
{isLogin && <SearchBar onSearch={setKeyword} />}
|
||||
<ContactList keyword={keyword} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,47 +1,30 @@
|
||||
import React, { useContext, useEffect, useState } from 'react';
|
||||
import Avatar from '../../components/Avatar';
|
||||
import IconButton from '../../components/IconButton';
|
||||
import React, { useCallback, useContext, useState } from 'react';
|
||||
import { debounce } from 'lodash-es';
|
||||
import Input from '../../components/Input';
|
||||
import Message from '../../components/Message';
|
||||
import {
|
||||
ScrollableInkTabBar,
|
||||
TabContent,
|
||||
TabPane,
|
||||
Tabs as div,
|
||||
} from '../../components/Tabs';
|
||||
import { ShowUserOrGroupInfoContext } from '../../context';
|
||||
import Style from './SearchBar.less';
|
||||
|
||||
type SearchResult = {
|
||||
users: any[];
|
||||
groups: any[];
|
||||
};
|
||||
function FunctionBar({ onSearch }) {
|
||||
const [keyword, setKeyword] = useState('');
|
||||
|
||||
function FunctionBar() {
|
||||
const [keywords, setKeywords] = useState('');
|
||||
const [searchResultVisible, toggleSearchResultVisible] = useState(false);
|
||||
const [searchResult, setSearchResult] = useState<SearchResult>({
|
||||
users: [],
|
||||
groups: [],
|
||||
});
|
||||
const triggerSearch = useCallback(
|
||||
debounce((kw: string) => {
|
||||
onSearch && onSearch(kw);
|
||||
}, 500),
|
||||
[onSearch],
|
||||
);
|
||||
const handleInputChange = useCallback(
|
||||
(kw) => {
|
||||
console.log('aaaaa',kw);
|
||||
|
||||
const context = useContext(ShowUserOrGroupInfoContext);
|
||||
const placeholder = '搜索群组/用户';
|
||||
setKeyword(kw);
|
||||
triggerSearch(kw);
|
||||
},
|
||||
[triggerSearch],
|
||||
);
|
||||
|
||||
function resetSearch() {
|
||||
setSearchResult({ users: [], groups: [] });
|
||||
setKeywords('');
|
||||
}
|
||||
|
||||
function handleInputChange(value: string) {
|
||||
setKeywords(value);
|
||||
if (!value) {
|
||||
resetSearch();
|
||||
}
|
||||
}
|
||||
|
||||
function handleInputEnter() {
|
||||
}
|
||||
const handleInputEnter = useCallback(() => {
|
||||
triggerSearch.flush();
|
||||
}, [triggerSearch]);
|
||||
|
||||
return (
|
||||
<div className={Style.functionBar}>
|
||||
@@ -51,12 +34,10 @@ function FunctionBar() {
|
||||
onSubmit={(e) => e.preventDefault()}
|
||||
>
|
||||
<Input
|
||||
className={`${Style.input} ${
|
||||
searchResultVisible ? Style.inputFocus : ''
|
||||
}`}
|
||||
className={Style.input}
|
||||
type="text"
|
||||
placeholder={placeholder}
|
||||
value={keywords}
|
||||
placeholder="搜索用户/群组"
|
||||
value={keyword}
|
||||
onChange={handleInputChange}
|
||||
onEnter={handleInputEnter}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user