diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-03-16 00:57:27 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-03-16 00:57:27 +0800 |
commit | 76029cbf0915df36266bd5e51add07755297ddda (patch) | |
tree | e1692f8cc4ea4642292c61f65ba3911ded26de8e /packages/react-docs/src/components/method_block.tsx | |
parent | b9c1653c1cf6984d56b7825d8747b48d797fa39e (diff) | |
parent | 4a27a7dc581fc6c8a3d4e212ca3712c249a5b417 (diff) | |
download | dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.gz dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.bz2 dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.lz dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.xz dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.tar.zst dexon-0x-contracts-76029cbf0915df36266bd5e51add07755297ddda.zip |
Merge branch 'development' into feature/sra-report/collection-tests
* development: (97 commits)
Keep console.log in monorepo-scripts
Enable coverage for all other packages with tests
Fix parallel coverage results reporting
Fix linter issuesx
Remove outdated comment
Add script copying to build command
Add postpublish script to sol-cov
Move configuration into package.json configs section
Transform input data before encoding for callAsync and getABIEncodedTransactionData
Update CHANGELOGs
Consolidate all console.log into the @0xproject/utils package
Update coverage badge to show development coverage
Configure post build hook
Notify coveralls after all tasks have finished
Address feedback
Revert "Report all coverage reports together"
Separate published packages and typescript typings on README
Consolidate docs generation and uploading logic
Use async/await instead of promise syntax
Move changelog entry
...
Diffstat (limited to 'packages/react-docs/src/components/method_block.tsx')
-rw-r--r-- | packages/react-docs/src/components/method_block.tsx | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/packages/react-docs/src/components/method_block.tsx b/packages/react-docs/src/components/method_block.tsx new file mode 100644 index 000000000..44a1db8af --- /dev/null +++ b/packages/react-docs/src/components/method_block.tsx @@ -0,0 +1,150 @@ +import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { DocsInfo } from '../docs_info'; +import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from '../types'; +import { constants } from '../utils/constants'; +import { typeDocUtils } from '../utils/typedoc_utils'; + +import { Comment } from './comment'; +import { MethodSignature } from './method_signature'; +import { SourceLink } from './source_link'; + +export interface MethodBlockProps { + method: SolidityMethod | TypescriptMethod; + sectionName: string; + libraryVersion: string; + typeDefinitionByName: TypeDefinitionByName; + docsInfo: DocsInfo; + sourceUrl: string; +} + +export interface MethodBlockState { + shouldShowAnchor: boolean; +} + +const styles: Styles = { + chip: { + fontSize: 13, + backgroundColor: colors.lightBlueA700, + color: colors.white, + height: 11, + borderRadius: 14, + lineHeight: 0.9, + }, +}; + +export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockState> { + constructor(props: MethodBlockProps) { + super(props); + this.state = { + shouldShowAnchor: false, + }; + } + public render() { + const method = this.props.method; + if (typeDocUtils.isPrivateOrProtectedProperty(method.name)) { + return null; + } + + return ( + <div + id={`${this.props.sectionName}-${method.name}`} + style={{ overflow: 'hidden', width: '100%' }} + className="pb4" + onMouseOver={this._setAnchorVisibility.bind(this, true)} + onMouseOut={this._setAnchorVisibility.bind(this, false)} + > + {!method.isConstructor && ( + <div className="flex pb2 pt2"> + {(method as TypescriptMethod).isStatic && this._renderChip('Static')} + {(method as SolidityMethod).isConstant && this._renderChip('Constant')} + {(method as SolidityMethod).isPayable && this._renderChip('Payable')} + <div style={{ lineHeight: 1.3 }}> + <AnchorTitle + headerSize={HeaderSizes.H3} + title={method.name} + id={`${this.props.sectionName}-${method.name}`} + shouldShowAnchor={this.state.shouldShowAnchor} + /> + </div> + </div> + )} + <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}> + <MethodSignature + method={method} + sectionName={this.props.sectionName} + typeDefinitionByName={this.props.typeDefinitionByName} + docsInfo={this.props.docsInfo} + /> + </code> + {(method as TypescriptMethod).source && ( + <SourceLink + version={this.props.libraryVersion} + source={(method as TypescriptMethod).source} + sourceUrl={this.props.sourceUrl} + /> + )} + {method.comment && <Comment comment={method.comment} className="py2" />} + {method.parameters && + !_.isEmpty(method.parameters) && ( + <div> + <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}> + ARGUMENTS + </h4> + {this._renderParameterDescriptions(method.parameters)} + </div> + )} + {method.returnComment && ( + <div className="pt1 comment"> + <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}> + RETURNS + </h4> + <Comment comment={method.returnComment} /> + </div> + )} + </div> + ); + } + private _renderChip(text: string) { + return ( + <div className="p1 mr1" style={styles.chip}> + {text} + </div> + ); + } + private _renderParameterDescriptions(parameters: Parameter[]) { + const descriptions = _.map(parameters, parameter => { + const isOptional = parameter.isOptional; + return ( + <div + key={`param-description-${parameter.name}`} + className="flex pb1 mb2" + style={{ borderBottom: '1px solid #f0f4f7' }} + > + <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12"> + <div + className="bold" + style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }} + > + {parameter.name} + </div> + <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}> + {isOptional && 'optional'} + </div> + </div> + <div className="col lg-col-8 md-col-8 sm-col-12 col-12" style={{ paddingLeft: 5 }}> + {parameter.comment && <Comment comment={parameter.comment} />} + </div> + </div> + ); + }); + return descriptions; + } + private _setAnchorVisibility(shouldShowAnchor: boolean) { + this.setState({ + shouldShowAnchor, + }); + } +} |