8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
183 lines
4.0 KiB
Plaintext
183 lines
4.0 KiB
Plaintext
---
|
|
title: crwdns60516:0crwdne60516:0
|
|
image: crwdns60518:0crwdne60518:0
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
|
</Frame>
|
|
|
|
## crwdns60520:0crwdne60520:0
|
|
|
|
crwdns60522:0crwdne60522:0
|
|
|
|
crwdns60524:0crwdne60524:0
|
|
|
|
crwdns60526:0crwdne60526:0
|
|
|
|
## crwdns60528:0crwdne60528:0
|
|
|
|
crwdns60530:0crwdne60530:0
|
|
|
|
crwdns60532:0crwdne60532:0
|
|
|
|
## crwdns60534:0crwdne60534:0
|
|
|
|
crwdns60536:0crwdne60536:0
|
|
|
|
1. crwdns60538:0#what-is-a-hotkey-scope-crwdne60538:0
|
|
2. crwdns60540:0crwdne60540:0
|
|
|
|
crwdns60542:0crwdne60542:0
|
|
|
|
## crwdns60544:0crwdne60544:0
|
|
|
|
crwdns60546:0crwdne60546:0
|
|
|
|
1. crwdns60548:0crwdne60548:0
|
|
2. crwdns60550:0crwdne60550:0
|
|
|
|
crwdns60552:0crwdne60552:0
|
|
|
|
### crwdns60554:0crwdne60554:0
|
|
|
|
crwdns60556:0crwdne60556:0
|
|
|
|
```tsx
|
|
const PageListeningEnter = () => {
|
|
const {
|
|
setHotkeyScopeAndMemorizePreviousScope,
|
|
goBackToPreviousHotkeyScope,
|
|
} = usePreviousHotkeyScope();
|
|
|
|
// 1. Set the hotkey scope in a useEffect
|
|
useEffect(() => {
|
|
setHotkeyScopeAndMemorizePreviousScope(
|
|
ExampleHotkeyScopes.ExampleEnterPage,
|
|
);
|
|
|
|
// Revert to the previous hotkey scope when the component is unmounted
|
|
return () => {
|
|
goBackToPreviousHotkeyScope();
|
|
};
|
|
}, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);
|
|
|
|
// 2. Use the useScopedHotkeys hook
|
|
useScopedHotkeys(
|
|
Key.Enter,
|
|
() => {
|
|
// Some logic executed on this page when the user presses Enter
|
|
// ...
|
|
},
|
|
ExampleHotkeyScopes.ExampleEnterPage,
|
|
);
|
|
|
|
return <div>My page that listens for Enter</div>;
|
|
};
|
|
```
|
|
|
|
### crwdns60558:0crwdne60558:0
|
|
|
|
crwdns60560:0crwdne60560:0
|
|
|
|
crwdns60562:0crwdne60562:0
|
|
|
|
```tsx
|
|
const ExamplePageWithModal = () => {
|
|
const [showModal, setShowModal] = useState(false);
|
|
|
|
const {
|
|
setHotkeyScopeAndMemorizePreviousScope,
|
|
goBackToPreviousHotkeyScope,
|
|
} = usePreviousHotkeyScope();
|
|
|
|
const handleOpenModalClick = () => {
|
|
// 1. Set the hotkey scope when user opens the modal
|
|
setShowModal(true);
|
|
setHotkeyScopeAndMemorizePreviousScope(
|
|
ExampleHotkeyScopes.ExampleModal,
|
|
);
|
|
};
|
|
|
|
const handleModalClose = () => {
|
|
// 1. Revert to the previous hotkey scope when the modal is closed
|
|
setShowModal(false);
|
|
goBackToPreviousHotkeyScope();
|
|
};
|
|
|
|
return <div>
|
|
<h1>My page with a modal</h1>
|
|
<button onClick={handleOpenModalClick}>Open modal</button>
|
|
{showModal && <MyModalComponent onClose={handleModalClose} />}
|
|
</div>;
|
|
};
|
|
```
|
|
|
|
crwdns60564:0crwdne60564:0
|
|
|
|
```tsx
|
|
const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
|
|
// 2. Use the useScopedHotkeys hook to listen for Escape.
|
|
// Note that escape is a common hotkey that could be used by many other components
|
|
// So it's important to use a hotkey scope to avoid conflicts
|
|
useScopedHotkeys(
|
|
Key.Escape,
|
|
() => {
|
|
onClose()
|
|
},
|
|
ExampleHotkeyScopes.ExampleModal,
|
|
);
|
|
|
|
return <div>My modal component</div>;
|
|
};
|
|
```
|
|
|
|
crwdns60566:0crwdne60566:0
|
|
|
|
crwdns60568:0crwdne60568:0
|
|
|
|
## crwdns60570:0crwdne60570:0
|
|
|
|
crwdns60572:0crwdne60572:0 crwdns60574:0crwdne60574:0
|
|
|
|
crwdns60576:0crwdne60576:0
|
|
|
|
crwdns60578:0crwdne60578:0
|
|
|
|
crwdns60580:0crwdne60580:0
|
|
|
|
```tsx
|
|
export enum PageHotkeyScope {
|
|
Settings = 'settings',
|
|
CreateWorkspace = 'create-workspace',
|
|
SignInUp = 'sign-in-up',
|
|
CreateProfile = 'create-profile',
|
|
PlanRequired = 'plan-required',
|
|
ShowPage = 'show-page',
|
|
PersonShowPage = 'person-show-page',
|
|
CompanyShowPage = 'company-show-page',
|
|
CompaniesPage = 'companies-page',
|
|
PeoplePage = 'people-page',
|
|
OpportunitiesPage = 'opportunities-page',
|
|
ProfilePage = 'profile-page',
|
|
WorkspaceMemberPage = 'workspace-member-page',
|
|
TaskPage = 'task-page',
|
|
}
|
|
```
|
|
|
|
crwdns60582:0crwdne60582:0
|
|
|
|
```tsx
|
|
export const currentHotkeyScopeState = createState<HotkeyScope>({
|
|
key: 'currentHotkeyScopeState',
|
|
defaultValue: INITIAL_HOTKEYS_SCOPE,
|
|
});
|
|
```
|
|
|
|
crwdns60584:0crwdne60584:0 crwdns60586:0crwdne60586:0
|
|
|
|
## crwdns60588:0crwdne60588:0
|
|
|
|
crwdns60590:0https://react-hotkeys-hook.vercel.app/docs/introcrwdne60590:0
|
|
|
|
crwdns60592:0crwdne60592:0 |