diff options
author | Fabio Berger <me@fabioberger.com> | 2018-03-09 15:39:38 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-03-09 15:39:38 +0800 |
commit | 9699ee4eff8a6594bd862883cac35de80dfbcf56 (patch) | |
tree | 01c5a092bd0180101dcc012e3d21320d9addb073 /packages/react-docs/src/ts/components/method_block.tsx | |
parent | da277f5b2743c666a9a66e4fadf6678edd44fd69 (diff) | |
parent | 0eeaac1f2b5095441f7cd04bc948515d600d1f3a (diff) | |
download | dexon-0x-contracts-9699ee4eff8a6594bd862883cac35de80dfbcf56.tar dexon-0x-contracts-9699ee4eff8a6594bd862883cac35de80dfbcf56.tar.gz dexon-0x-contracts-9699ee4eff8a6594bd862883cac35de80dfbcf56.tar.bz2 dexon-0x-contracts-9699ee4eff8a6594bd862883cac35de80dfbcf56.tar.lz dexon-0x-contracts-9699ee4eff8a6594bd862883cac35de80dfbcf56.tar.xz dexon-0x-contracts-9699ee4eff8a6594bd862883cac35de80dfbcf56.tar.zst dexon-0x-contracts-9699ee4eff8a6594bd862883cac35de80dfbcf56.zip |
Merge branch 'development' into addPackagePublishConfig
* development: (94 commits)
Update CHANGELOG
Add solc 0.4.20 and 0.4.21
Prettier sra-report README
Add new packages to top level README
Updated @0xproject/utils in top level package.json
Publish
Updated CHANGELOGs
Detail tests in the README
Add support for ropsten and rinkeby
Fix yarn.lock
Update list of packages and organize them alphabetically
Fix prettier issues
Add support for going back to previous hashes via the browser back button to wiki
Scroll to previous hashed elements when user clicks back button
Add back strict null checks to react-shared package and fix issues
remove ability to have implicit dependencies and add missing deps
update license
remove no-implicit-this
Add example & screenshot to npmignore
Remove `;` to be nice to windows users
...
Diffstat (limited to 'packages/react-docs/src/ts/components/method_block.tsx')
-rw-r--r-- | packages/react-docs/src/ts/components/method_block.tsx | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/packages/react-docs/src/ts/components/method_block.tsx b/packages/react-docs/src/ts/components/method_block.tsx new file mode 100644 index 000000000..44a1db8af --- /dev/null +++ b/packages/react-docs/src/ts/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, + }); + } +} |