mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-23 09:54:16 +08:00
45eeee60bb
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* chore: add unstable entrance * chore: rest of it * chore: use React 19 * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: fix lint * chore: test ignore 19 preload * chore: bump rc-util * fix: warning of pure render * fix: warning of 19 * chore: adjust ts * test: fix test logic * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * chore: restore file * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: fix test case * test: update test * test: fix test case * test: update snapshot * test: fix coverage * test: fix coverage * test: add ignore image
58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React, { useCallback, useRef, useState } from 'react';
|
|
import { Mentions } from 'antd';
|
|
import debounce from 'lodash/debounce';
|
|
|
|
const App: React.FC = () => {
|
|
const [loading, setLoading] = useState(false);
|
|
const [users, setUsers] = useState<{ login: string; avatar_url: string }[]>([]);
|
|
const ref = useRef<string>(null);
|
|
|
|
const loadGithubUsers = (key: string) => {
|
|
if (!key) {
|
|
setUsers([]);
|
|
return;
|
|
}
|
|
|
|
fetch(`https://api.github.com/search/users?q=${key}`)
|
|
.then((res) => res.json())
|
|
.then(({ items = [] }) => {
|
|
if (ref.current !== key) return;
|
|
|
|
setLoading(false);
|
|
setUsers(items.slice(0, 10));
|
|
});
|
|
};
|
|
|
|
const debounceLoadGithubUsers = useCallback(debounce(loadGithubUsers, 800), []);
|
|
|
|
const onSearch = (search: string) => {
|
|
console.log('Search:', search);
|
|
ref.current = search;
|
|
setLoading(!!search);
|
|
setUsers([]);
|
|
|
|
debounceLoadGithubUsers(search);
|
|
};
|
|
|
|
return (
|
|
<Mentions
|
|
style={{ width: '100%' }}
|
|
loading={loading}
|
|
onSearch={onSearch}
|
|
options={users.map(({ login, avatar_url: avatar }) => ({
|
|
key: login,
|
|
value: login,
|
|
className: 'antd-demo-dynamic-option',
|
|
label: (
|
|
<>
|
|
<img src={avatar} alt={login} />
|
|
<span>{login}</span>
|
|
</>
|
|
),
|
|
}))}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default App;
|