mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-08 11:11:53 +08:00
41 lines
1.0 KiB
Plaintext
41 lines
1.0 KiB
Plaintext
```tsx
|
|
// src/Tool.tsx
|
|
|
|
import React, { memo, useCallback, useEffect } from 'react';
|
|
|
|
import { useGlobals, useStorybookApi } from '@storybook/manager-api';
|
|
import { IconButton } from '@storybook/components';
|
|
import { LightningIcon } from '@storybook/icons';
|
|
|
|
import { ADDON_ID, PARAM_KEY, TOOL_ID } from './constants';
|
|
|
|
export const Tool = memo(function MyAddonSelector() {
|
|
const [globals, updateGlobals] = useGlobals();
|
|
const api = useStorybookApi();
|
|
|
|
const isActive = [true, 'true'].includes(globals[PARAM_KEY]);
|
|
|
|
const toggleMyTool = useCallback(() => {
|
|
updateGlobals({
|
|
[PARAM_KEY]: !isActive,
|
|
});
|
|
}, [isActive]);
|
|
|
|
useEffect(() => {
|
|
api.setAddonShortcut(ADDON_ID, {
|
|
label: 'Toggle Addon [8]',
|
|
defaultShortcut: ['8'],
|
|
actionName: 'myaddon',
|
|
showInMenu: false,
|
|
action: toggleMyTool,
|
|
});
|
|
}, [toggleMyTool, api]);
|
|
|
|
return (
|
|
<IconButton key={TOOL_ID} active={isActive} title="Enable my addon" onClick={toggleMyTool}>
|
|
<LightningIcon />
|
|
</IconButton>
|
|
);
|
|
});
|
|
```
|