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

refactor: improve types of Event component

Browse Source
This commit is contained in:
lonyele 2019-06-25 14:38:14 +09:00
parent 33f1960b64
commit fa27db5a6d
1 changed files with 35 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
addons/events/src/components/Event.tsx
View File

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