GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 15:11:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14728 from apapadopoulou/next

Browse Source 
Addon-actions: Add 'New Action' indicator
This commit is contained in:
Michael Shilman 2021-04-30 13:41:56 +08:00 committed by GitHub
commit 4d020f2744
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
addons/actions/src/register.tsx
View File

@ -1,11 +1,27 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { addons, types } from '@storybook/addons';
import { STORY_CHANGED } from '@storybook/core-events';
import ActionLogger from './containers/ActionLogger';
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { ADDON_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';
addons.register(ADDON_ID, (api) => {
addons.addPanel(PANEL_ID, {
title: 'Actions',
title() {
const [actionsCount, setActionsCount] = useState(0);
const onEvent = () => setActionsCount(previous => previous + 1);
const onChange = () => setActionsCount(0);
useEffect(() => {
api.on(EVENT_ID, onEvent);
api.on(STORY_CHANGED, onChange);
return () => {
api.off(EVENT_ID, onEvent);
api.off(STORY_CHANGED, onChange);
};
});
const suffix = actionsCount === 0 ? '' : ` (${actionsCount})`;
return `Actions${suffix}`;
},
type: types.PANEL,
render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
paramKey: PARAM_KEY,