diff options
author | August Skare <post@augustskare.no> | 2018-11-19 22:13:52 +0800 |
---|---|---|
committer | August Skare <post@augustskare.no> | 2018-11-19 22:13:52 +0800 |
commit | 8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac (patch) | |
tree | 12155480fbc5e33626d11610a5cb1d61ade6789a /packages/dev-tools-pages | |
parent | 5865d1f62c8af89bee14c50ec2fea9587a25fc25 (diff) | |
download | dexon-0x-contracts-8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac.tar dexon-0x-contracts-8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac.tar.gz dexon-0x-contracts-8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac.tar.bz2 dexon-0x-contracts-8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac.tar.lz dexon-0x-contracts-8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac.tar.xz dexon-0x-contracts-8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac.tar.zst dexon-0x-contracts-8d3e6f77b751b02bbca72e17ce9c86f54b3fbaac.zip |
cleand up code component
Diffstat (limited to 'packages/dev-tools-pages')
-rw-r--r-- | packages/dev-tools-pages/ts/components/Code.tsx | 39 |
1 files changed, 17 insertions, 22 deletions
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx index 72acc3865..8415f1179 100644 --- a/packages/dev-tools-pages/ts/components/Code.tsx +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -68,7 +68,8 @@ const Base = : ``} `; -const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <code {...props}>{children}</code>)` +const CodeDiff: React.StatelessComponent<any> = ({ gutterLength, ...props }) => <code {...props} />; +const StyledCodeDiff = styled(CodeDiff)` ::before { content: ''; width: calc(0.75rem + ${props => props.gutterLength}ch); @@ -108,9 +109,12 @@ const StyledCodeDiff = styled(({ gutterLength, children, ...props }: any) => <co } `; -const StyledPre = styled.pre` +const StyledPre = + styled.pre < + CodeProps > + ` margin: 0; - ${(props: { isDiff: boolean }) => + ${props => !props.isDiff ? ` padding: 1.5rem; @@ -129,15 +133,11 @@ const StyledCopyInput = styled.textarea` z-index: -1; `; -const CopyInput = StyledCopyInput as any; - class Code extends React.Component<CodeProps, CodeState> { public state: CodeState = {}; private readonly _code = React.createRef<HTMLTextAreaElement>(); public componentDidMount(): void { - /* - * _onMountAsync is only setting state, so no point in handling the promise - */ + // _onMountAsync is only setting state, so no point in handling the promise // tslint:disable-next-line:no-floating-promises this._onMountAsync(); } @@ -145,26 +145,21 @@ class Code extends React.Component<CodeProps, CodeState> { const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props; const { hlCode } = this.state; - let CodeComponent = 'code'; - let codeProps = {}; - if (isDiff) { - codeProps = { gutterLength }; - CodeComponent = StyledCodeDiff as any; - } - return ( <Container> <Base language={language} isDiff={isDiff} isLight={isLight}> <StyledPre isDiff={isDiff}> - <CodeComponent - {...codeProps} - dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null} - > - {hlCode === undefined ? children : null} - </CodeComponent> + {hlCode === undefined ? ( + <code>{children}</code> + ) : ( + <StyledCodeDiff + gutterLength={gutterLength} + dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null} + /> + )} </StyledPre> {!('clipboard' in navigator) ? ( - <CopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} /> + <StyledCopyInput readOnly={true} aria-hidden="true" ref={this._code} value={children} /> ) : null} </Base> {navigator.userAgent !== 'ReactSnap' && canCopy ? ( |