github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-21 17:26:29 -05:00
Code Issues Projects Releases Packages Wiki Activity

Restructure Link Components and fix internal link children error (#106)

Browse source 
* Restructure Link Components and fix internal link children error
This commit is contained in:
mrdrogdrog 2020-05-31 13:25:41 +02:00 committed by GitHub
parent 177f639492
commit 5c716bd314
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 42 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/application-loader/loading-screen.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React from 'react'
import { Alert } from 'react-bootstrap'
export interface LoadingScreenProps {

2
src/components/landing/layout/footer/powered-by-links.tsx
View file

@ -18,7 +18,7 @@ export const PoweredByLinks: React.FC = () => {
<ExternalLink href="https://codimd.org" text="CodiMD"/>
</Trans>
&nbsp;|&nbsp;
<TranslatedInternalLink path='/n/release-notes' i18nKey='landing.footer.releases'/>
<TranslatedInternalLink href='/n/release-notes' i18nKey='landing.footer.releases'/>
{
Object.entries({ ...config.specialLinks }).map(([i18nKey, href]) =>
<Fragment key={i18nKey}>

16
src/components/links/external-link.tsx
View file

@ -1,18 +1,8 @@
import React, { Fragment } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { IconProp } from '../../utils/iconProp'
import React, { Fragment } from 'react'
import { LinkWithTextProps } from './types'
export interface ExternalLinkProp {
href: string;
icon?: IconProp;
className?: string
}
export interface ExternalLinkTextProp {
text: string;
}
export const ExternalLink: React.FC<ExternalLinkProp & ExternalLinkTextProp> = ({ href, text, icon, className = 'text-light' }) => {
export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
return (
<a href={href}
target="_blank"

36
src/components/links/internal-link.tsx
View file

@ -1,30 +1,22 @@
import React, { Fragment } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import React, { Fragment } from 'react'
import { LinkContainer } from 'react-router-bootstrap'
import { IconProp } from '../../utils/iconProp'
import { LinkWithTextProps } from './types'
export interface InternalLinkProp {
path: string;
icon?: IconProp;
className?: string
}
export interface InternalLinkTextProp {
text: string;
}
export const InternalLink: React.FC<InternalLinkProp & InternalLinkTextProp> = ({ path, text, icon, className = 'text-light' }) => {
export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, className = 'text-light' }) => {
return (
<LinkContainer to={path}
<LinkContainer to={href}
className={className}>
{
icon
? <Fragment>
<FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
</Fragment>
: null
}
{text}
<Fragment>
{
icon
? <Fragment>
<FontAwesomeIcon icon={icon} fixedWidth={true}/>&nbsp;
</Fragment>
: null
}
{text}
</Fragment>
</LinkContainer>
)
}

13
src/components/links/translated-external-link.tsx
View file

@ -1,18 +1,11 @@
import { StringMap, TOptionsBase } from 'i18next'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { ExternalLink, ExternalLinkProp } from './external-link'
import { ExternalLink } from './external-link'
import { TranslatedLinkProps } from './types'
export interface TranslatedLinkProps {
i18nKey: string;
i18nOption?: (TOptionsBase & StringMap) | string
}
const TranslatedExternalLink: React.FC<TranslatedLinkProps & ExternalLinkProp> = ({ i18nKey, i18nOption, ...props }) => {
export const TranslatedExternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
const { t } = useTranslation()
return (
<ExternalLink text={t(i18nKey, i18nOption)} {...props}/>
)
}
export { TranslatedExternalLink }

6
src/components/links/translated-internal-link.tsx
View file

@ -1,9 +1,9 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { InternalLink, InternalLinkProp } from './internal-link'
import { TranslatedLinkProps } from './translated-external-link'
import { InternalLink } from './internal-link'
import { TranslatedLinkProps } from './types'
export const TranslatedInternalLink: React.FC<TranslatedLinkProps & InternalLinkProp> = ({ i18nKey, i18nOption, ...props }) => {
export const TranslatedInternalLink: React.FC<TranslatedLinkProps> = ({ i18nKey, i18nOption, ...props }) => {
const { t } = useTranslation()
return (
<InternalLink text={t(i18nKey, i18nOption)} {...props}/>

17
src/components/links/types.ts Normal file
View file

@ -0,0 +1,17 @@
import { StringMap, TOptionsBase } from 'i18next'
import { IconProp } from '../../utils/iconProp'
export interface GeneralLinkProp {
href: string;
icon?: IconProp;
className?: string
}
export interface LinkWithTextProps extends GeneralLinkProp {
text: string;
}
export interface TranslatedLinkProps extends GeneralLinkProp{
i18nKey: string;
i18nOption?: (TOptionsBase & StringMap) | string
}