84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
|
|
import * as _ from 'lodash';
|
|
import * as React from 'react';
|
|
import { DocsInfo } from 'ts/pages/documentation/docs_info';
|
|
import { Type } from 'ts/pages/documentation/type';
|
|
import { Event, EventArg } from 'ts/types';
|
|
import { colors } from 'ts/utils/colors';
|
|
|
|
interface EventDefinitionProps {
|
|
event: Event;
|
|
sectionName: string;
|
|
docsInfo: DocsInfo;
|
|
}
|
|
|
|
interface EventDefinitionState {
|
|
shouldShowAnchor: boolean;
|
|
}
|
|
|
|
export class EventDefinition extends React.Component<EventDefinitionProps, EventDefinitionState> {
|
|
constructor(props: EventDefinitionProps) {
|
|
super(props);
|
|
this.state = {
|
|
shouldShowAnchor: false,
|
|
};
|
|
}
|
|
public render() {
|
|
const event = this.props.event;
|
|
const id = `${this.props.sectionName}-${event.name}`;
|
|
return (
|
|
<div
|
|
id={id}
|
|
className="pb2"
|
|
style={{ overflow: 'hidden', width: '100%' }}
|
|
onMouseOver={this._setAnchorVisibility.bind(this, true)}
|
|
onMouseOut={this._setAnchorVisibility.bind(this, false)}
|
|
>
|
|
<AnchorTitle
|
|
headerSize={HeaderSizes.H3}
|
|
title={`Event ${event.name}`}
|
|
id={id}
|
|
shouldShowAnchor={this.state.shouldShowAnchor}
|
|
/>
|
|
<div style={{ fontSize: 16 }}>
|
|
<pre>
|
|
<code className="hljs">{this._renderEventCode()}</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
private _renderEventCode() {
|
|
const indexed = <span style={{ color: colors.green }}> indexed</span>;
|
|
const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
|
|
const type = (
|
|
<Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
|
|
);
|
|
return (
|
|
<span key={`eventArg-${eventArg.name}`}>
|
|
{eventArg.name}
|
|
{eventArg.isIndexed ? indexed : ''}: {type},
|
|
</span>
|
|
);
|
|
});
|
|
const argList = _.reduce(eventArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
|
|
return [prev, '\n\t', curr];
|
|
});
|
|
return (
|
|
<span>
|
|
{`{`}
|
|
<br />
|
|
{'\t'}
|
|
{argList}
|
|
<br />
|
|
{`}`}
|
|
</span>
|
|
);
|
|
}
|
|
private _setAnchorVisibility(shouldShowAnchor: boolean) {
|
|
this.setState({
|
|
shouldShowAnchor,
|
|
});
|
|
}
|
|
}
|