diff --git a/addons/events/src/components/Event.tsx b/addons/events/src/components/Event.tsx index 4ac0732b88e..427ba7b37fa 100644 --- a/addons/events/src/components/Event.tsx +++ b/addons/events/src/components/Event.tsx @@ -5,10 +5,15 @@ import isEqual from 'lodash/isEqual'; import { styled } from '@storybook/theming'; import json from 'format-json'; - import Textarea from 'react-textarea-autosize'; +import { OnEmitEvent } from '../index'; -const StyledTextarea = styled(Textarea)( +interface StyledTextareaProps { + shown: boolean; + failed: boolean; +} + +const StyledTextarea = styled(Textarea)( { flex: '1 0 0', boxSizing: 'border-box', @@ -24,7 +29,7 @@ const StyledTextarea = styled(Textarea)( minHeight: '32px', resize: 'vertical', }, - ({ shown }: any) => + ({ shown }) => shown ? {} : { @@ -77,15 +82,29 @@ const Wrapper = styled.div({ width: '100%', }); -function getJSONFromString(str: any) { +function getJSONFromString(str: string) { try { return JSON.parse(str); } catch (e) { return str; } } +interface ItemProps { + name: string; + title: string; + onEmit: (event: OnEmitEvent) => void; + payload: unknown; +} -class Item extends Component { +interface ItemState { + isTextAreaShowed: boolean; + failed: boolean; + payload: unknown; + payloadString: string; + prevPayload: unknown; +} + +class Item extends Component { static propTypes = { name: PropTypes.string.isRequired, title: PropTypes.string.isRequired, @@ -98,12 +117,17 @@ class Item extends Component { payload: {}, }; - state: any = { + state: ItemState = { isTextAreaShowed: false, + failed: false, + payload: null, + payloadString: '', + // eslint-disable-next-line react/no-unused-state, + prevPayload: null, }; - onChange = ({ target: { value } }: any) => { - const newState: any = { + onChange = ({ target: { value } }: React.ChangeEvent) => { + const newState: Partial = { payloadString: value, }; @@ -114,7 +138,7 @@ class Item extends Component { newState.failed = true; } - this.setState(newState); + this.setState(newState as ItemState); }; onEmitClick = () => { @@ -128,12 +152,12 @@ class Item extends Component { }; onToggleEditClick = () => { - this.setState(({ isTextAreaShowed }: any) => ({ + this.setState(({ isTextAreaShowed }) => ({ isTextAreaShowed: !isTextAreaShowed, })); }; - static getDerivedStateFromProps = ({ payload }: any, { prevPayload }: any) => { + static getDerivedStateFromProps = ({ payload }: ItemProps, { prevPayload }: ItemState) => { if (!isEqual(payload, prevPayload)) { const payloadString = json.plain(payload); const refinedPayload = getJSONFromString(payloadString); @@ -150,7 +174,6 @@ class Item extends Component { render() { const { title, name } = this.props; const { failed, isTextAreaShowed, payloadString } = this.state; - return (