chore: refactor links

This commit is contained in:
Roman Hotsiy 2018-08-17 14:54:28 +03:00
parent cfddb3afe1
commit 43a22f5531
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
5 changed files with 47 additions and 6 deletions

View File

@ -1,5 +1,10 @@
import * as React from 'react';
import { StoreConsumer } from '../components/StoreBuilder';
import styled, { css } from '../styled-components'; import styled, { css } from '../styled-components';
import { HistoryService } from '../services';
// tslint:disable-next-line // tslint:disable-next-line
export const linkifyMixin = className => css` export const linkifyMixin = className => css`
${className} { ${className} {
@ -27,6 +32,42 @@ export const linkifyMixin = className => css`
} }
`; `;
export const ShareLink = styled.a` const isModifiedEvent = event =>
!!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
export class Link extends React.Component<{ to: string; className?: string; children?: any }> {
navigate = (history: HistoryService, event) => {
if (
!event.defaultPrevented && // onClick prevented default
event.button === 0 && // ignore everything but left clicks
!isModifiedEvent(event) // ignore clicks with modifier keys
) {
event.preventDefault();
history.replace(this.props.to);
}
};
render() {
return (
<StoreConsumer>
{store => (
<a
className={this.props.className}
href={store!.menu.history.linkForId(this.props.to)}
onClick={this.navigate.bind(this, store!.menu.history)}
>
{this.props.children}
</a>
)}
</StoreConsumer>
);
}
}
const StyledShareLink = styled(Link)`
${linkifyMixin('&')}; ${linkifyMixin('&')};
`; `;
export function ShareLink(props: { to: string }) {
return <StyledShareLink to={props.to} />;
}

View File

@ -72,7 +72,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
<Row> <Row>
<MiddlePanel> <MiddlePanel>
<Header> <Header>
<ShareLink href={'#' + this.props.item.id} /> <ShareLink to={this.props.item.id} />
{name} {name}
</Header> </Header>
</MiddlePanel> </MiddlePanel>

View File

@ -45,7 +45,7 @@ export class Operation extends React.Component<OperationProps> {
<OperationRow> <OperationRow>
<MiddlePanel> <MiddlePanel>
<H2> <H2>
<ShareLink href={'#' + operation.id} /> <ShareLink to={operation.id} />
{summary} {deprecated && <Badge type="warning"> Deprecated </Badge>} {summary} {deprecated && <Badge type="warning"> Deprecated </Badge>}
</H2> </H2>
{options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />} {options.pathInMiddlePanel && <Endpoint operation={operation} inverted={true} />}

View File

@ -3,7 +3,7 @@ import * as React from 'react';
import styled from '../../styled-components'; import styled from '../../styled-components';
import { UnderlinedHeader } from '../../common-elements/headers'; import { Link, UnderlinedHeader } from '../../common-elements/';
import { SecurityRequirementModel } from '../../services/models/SecurityRequirement'; import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
import { linksCss } from '../Markdown/styled.elements'; import { linksCss } from '../Markdown/styled.elements';
@ -70,7 +70,7 @@ export class SecurityRequirement extends React.PureComponent<SecurityRequirement
{security.schemes.map(scheme => { {security.schemes.map(scheme => {
return ( return (
<SecurityRequirementAndWrap key={scheme.id}> <SecurityRequirementAndWrap key={scheme.id}>
<a href={'#' + scheme.sectionId}>{scheme.id}</a> <Link to={scheme.sectionId}>{scheme.id}</Link>
{scheme.scopes.length > 0 && ' ('} {scheme.scopes.length > 0 && ' ('}
{scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)} {scheme.scopes.map(scope => <ScopeName key={scope}>{scope}</ScopeName>)}
{scheme.scopes.length > 0 && ') '} {scheme.scopes.length > 0 && ') '}

View File

@ -71,7 +71,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
<Row> <Row>
<MiddlePanel> <MiddlePanel>
<H2> <H2>
<ShareLink href={'#' + scheme.sectionId} /> <ShareLink to={scheme.sectionId} />
{scheme.id} {scheme.id}
</H2> </H2>
<Markdown source={scheme.description || ''} /> <Markdown source={scheme.description || ''} />