@storybook/addon-actions/dist/manager.js

Get UI feedback when an action is performed on an interactive element

"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_react3=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_core_events2=require("@storybook/core-events");var import_react2=__toESM(require("react")),import_dequal=require("dequal"),import_core_events=require("@storybook/core-events");var import_react=__toESM(require("react")),import_theming2=require("@storybook/theming"),import_react_inspector=require("react-inspector"),import_components=require("@storybook/components");var import_theming=require("@storybook/theming"),import_polished=require("polished"),Action=import_theming.styled.div({display:"flex",padding:0,borderLeft:"5px solid transparent",borderBottom:"1px solid transparent",transition:"all 0.1s",alignItems:"flex-start",whiteSpace:"pre"}),Counter=import_theming.styled.div(({theme})=>({backgroundColor:(0,import_polished.opacify)(.5,theme.appBorderColor),color:theme.color.inverseText,fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:1,padding:"1px 5px",borderRadius:20,margin:"2px 0px"})),InspectorContainer=import_theming.styled.div({flex:1,padding:"0 0 0 5px"});var UnstyledWrapped=({children,className})=>import_react.default.createElement(import_components.ScrollArea,{horizontal:!0,vertical:!0,className},children),Wrapper=(0,import_theming2.styled)(UnstyledWrapped)({margin:0,padding:"10px 5px 20px"}),ThemedInspector=(0,import_theming2.withTheme)(({theme,...props})=>import_react.default.createElement(import_react_inspector.Inspector,{theme:theme.addonActionsTheme||"chromeLight",table:!1,...props})),ActionLogger=({actions,onClear})=>import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(Wrapper,null,actions.map(action=>import_react.default.createElement(Action,{key:action.id},action.count>1&&import_react.default.createElement(Counter,null,action.count),import_react.default.createElement(InspectorContainer,null,import_react.default.createElement(ThemedInspector,{sortObjectKeys:!0,showNonenumerable:!1,name:action.data.name,data:action.data.args||action.data}))))),import_react.default.createElement(import_components.ActionBar,{actionItems:[{title:"Clear",onClick:onClear}]}));var PARAM_KEY="actions",ADDON_ID="storybook/actions",PANEL_ID=`${ADDON_ID}/panel`,EVENT_ID=`${ADDON_ID}/action-event`,CLEAR_ID=`${ADDON_ID}/action-clear`;var safeDeepEqual=(a,b)=>{try{return(0,import_dequal.dequal)(a,b)}catch{return!1}},ActionLogger2=class extends import_react2.Component{constructor(props){super(props);this.handleStoryChange=()=>{let{actions}=this.state;actions.length>0&&actions[0].options.clearOnStoryChange&&this.clearActions()};this.addAction=action=>{this.setState(prevState=>{let actions=[...prevState.actions],previous=actions.length&&actions[0];return previous&&safeDeepEqual(previous.data,action.data)?previous.count++:(action.count=1,actions.unshift(action)),{actions:actions.slice(0,action.options.limit)}})};this.clearActions=()=>{let{api}=this.props;api.emit(CLEAR_ID),this.setState({actions:[]})};this.mounted=!1,this.state={actions:[]}}componentDidMount(){this.mounted=!0;let{api}=this.props;api.on(EVENT_ID,this.addAction),api.on(import_core_events.STORY_CHANGED,this.handleStoryChange)}componentWillUnmount(){this.mounted=!1;let{api}=this.props;api.off(import_core_events.STORY_CHANGED,this.handleStoryChange),api.off(EVENT_ID,this.addAction)}render(){let{actions=[]}=this.state,{active}=this.props,props={actions,onClear:this.clearActions};return active?import_react2.default.createElement(ActionLogger,{...props}):null}};function Title({count}){let[_,setRerender]=(0,import_react3.useState)(!1);(0,import_manager_api.useChannel)({[EVENT_ID]:()=>{setRerender(r=>!r)},[import_core_events2.STORY_CHANGED]:()=>{setRerender(r=>!r)},[CLEAR_ID]:()=>{setRerender(r=>!r)}});let suffix=count.current===0?"":` (${count.current})`;return import_react3.default.createElement(import_react3.default.Fragment,null,"Actions",suffix)}import_manager_api.addons.register(ADDON_ID,api=>{let countRef={current:0};api.on(import_core_events2.STORY_CHANGED,id=>{countRef.current=0}),api.on(EVENT_ID,()=>{countRef.current+=1}),api.on(CLEAR_ID,()=>{countRef.current=0}),import_manager_api.addons.addPanel(PANEL_ID,{title:import_react3.default.createElement(Title,{count:countRef}),id:"actions",type:import_manager_api.types.PANEL,render:({active,key})=>import_react3.default.createElement(ActionLogger2,{key,api,active:!!active}),paramKey:PARAM_KEY})});