diff options
Diffstat (limited to 'packages/website/ts/pages/documentation/event_definition.tsx')
-rw-r--r-- | packages/website/ts/pages/documentation/event_definition.tsx | 50 |
1 files changed, 22 insertions, 28 deletions
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx index 469e6bb37..0e53e38e7 100644 --- a/packages/website/ts/pages/documentation/event_definition.tsx +++ b/packages/website/ts/pages/documentation/event_definition.tsx @@ -1,17 +1,14 @@ 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 {AnchorTitle} from 'ts/pages/shared/anchor_title'; -import {Event, EventArg, HeaderSizes} from 'ts/types'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; - -const KEYWORD_COLOR = '#a81ca6'; -const CUSTOM_GREEN = 'rgb(77, 162, 75)'; +import { DocsInfo } from 'ts/pages/documentation/docs_info'; +import { Type } from 'ts/pages/documentation/type'; +import { AnchorTitle } from 'ts/pages/shared/anchor_title'; +import { Event, EventArg, HeaderSizes } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface EventDefinitionProps { event: Event; + sectionName: string; docsInfo: DocsInfo; } @@ -30,11 +27,11 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event const event = this.props.event; return ( <div - id={event.name} + id={`${this.props.sectionName}-${event.name}`} className="pb2" - style={{overflow: 'hidden', width: '100%'}} - onMouseOver={this.setAnchorVisibility.bind(this, true)} - onMouseOut={this.setAnchorVisibility.bind(this, false)} + style={{ overflow: 'hidden', width: '100%' }} + onMouseOver={this._setAnchorVisibility.bind(this, true)} + onMouseOut={this._setAnchorVisibility.bind(this, false)} > <AnchorTitle headerSize={HeaderSizes.H3} @@ -42,28 +39,24 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event id={event.name} shouldShowAnchor={this.state.shouldShowAnchor} /> - <div style={{fontSize: 16}}> + <div style={{ fontSize: 16 }}> <pre> - <code className="hljs"> - {this.renderEventCode()} - </code> + <code className="hljs">{this._renderEventCode()}</code> </pre> </div> </div> ); } - private renderEventCode() { - const indexed = <span style={{color: CUSTOM_GREEN}}> indexed</span>; + 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} - docsInfo={this.props.docsInfo} - /> + <Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} /> ); return ( <span key={`eventArg-${eventArg.name}`}> - {eventArg.name}{eventArg.isIndexed ? indexed : ''}: {type}, + {eventArg.name} + {eventArg.isIndexed ? indexed : ''}: {type}, </span> ); }); @@ -73,14 +66,15 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event return ( <span> {`{`} - <br /> - {'\t'}{argList} - <br /> + <br /> + {'\t'} + {argList} + <br /> {`}`} </span> ); } - private setAnchorVisibility(shouldShowAnchor: boolean) { + private _setAnchorVisibility(shouldShowAnchor: boolean) { this.setState({ shouldShowAnchor, }); |