crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleand up code component

Browse Source
This commit is contained in:
August Skare
2018-11-19 15:13:52 +01:00
parent 5865d1f62c
commit 8d3e6f77b7
1 changed files with 17 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/dev-tools-pages/ts/components/Code.tsx
View File

@@ -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 { ::before {
content: ''; content: '';
width: calc(0.75rem + ${props => props.gutterLength}ch); 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; margin: 0;
${(props: { isDiff: boolean }) => ${props =>
!props.isDiff !props.isDiff
? ` ? `
padding: 1.5rem; padding: 1.5rem;
@@ -129,15 +133,11 @@ const StyledCopyInput = styled.textarea`
z-index: -1; z-index: -1;
`; `;
const CopyInput = StyledCopyInput as any;
class Code extends React.Component<CodeProps, CodeState> { class Code extends React.Component<CodeProps, CodeState> {
public state: CodeState = {}; public state: CodeState = {};
private readonly _code = React.createRef<HTMLTextAreaElement>(); private readonly _code = React.createRef<HTMLTextAreaElement>();
public componentDidMount(): void { 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 // tslint:disable-next-line:no-floating-promises
this._onMountAsync(); this._onMountAsync();
} }
@@ -145,26 +145,21 @@ class Code extends React.Component<CodeProps, CodeState> {
const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props; const { language, isLight, isDiff, children, gutterLength, canCopy } = this.props;
const { hlCode } = this.state; const { hlCode } = this.state;
let CodeComponent = 'code';
let codeProps = {};
if (isDiff) {
codeProps = { gutterLength };
CodeComponent = StyledCodeDiff as any;
}
return ( return (
<Container> <Container>
<Base language={language} isDiff={isDiff} isLight={isLight}> <Base language={language} isDiff={isDiff} isLight={isLight}>
<StyledPre isDiff={isDiff}> <StyledPre isDiff={isDiff}>
<CodeComponent {hlCode === undefined ? (
{...codeProps} <code>{children}</code>
dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null} ) : (
> <StyledCodeDiff
{hlCode === undefined ? children : null} gutterLength={gutterLength}
</CodeComponent> dangerouslySetInnerHTML={hlCode ? { __html: this.state.hlCode } : null}
/>
)}
</StyledPre> </StyledPre>
{!('clipboard' in navigator) ? ( {!('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} ) : null}
</Base> </Base>
{navigator.userAgent !== 'ReactSnap' && canCopy ? ( {navigator.userAgent !== 'ReactSnap' && canCopy ? (