fix: detailContainer Component - Replaced class by func. comp (#130)

* refactor: coverted class comp. into func.comp

* refactor: added forward ref comp.

* fix: fixed external link color

* fix: fixed typo

* refactor: applied feedbacks
This commit is contained in:
Priscila Oliveira 2019-10-03 18:17:04 +02:00 committed by Juan Picado @jotadeveloper
parent 28c982a7da
commit f84fd79c5b
30 changed files with 824 additions and 343 deletions

View File

@ -4,12 +4,12 @@ import BugReportIcon from '@material-ui/icons/BugReport';
import DownloadIcon from '@material-ui/icons/CloudDownload'; import DownloadIcon from '@material-ui/icons/CloudDownload';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import Tooltip from '@material-ui/core/Tooltip';
import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version'; import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
import { Fab, ActionListItem } from './styles'; import { Fab, ActionListItem } from './styles';
import { isURL, extractFileName, downloadFile } from '../../utils/url'; import { isURL, extractFileName, downloadFile } from '../../utils/url';
import api from '../../utils/api'; import api from '../../utils/api';
import Tooltip from '../../muiComponents/Tooltip';
export interface Action { export interface Action {
icon: string; icon: string;

View File

@ -2,7 +2,7 @@ import React from 'react';
import styled, { css } from 'react-emotion'; import styled, { css } from 'react-emotion';
import Paper from '@material-ui/core/Paper'; import Paper from '@material-ui/core/Paper';
import TextField from '../TextField'; import TextField from '../../muiComponents/TextField';
export interface InputFieldProps { export interface InputFieldProps {
color: string; color: string;
@ -17,6 +17,7 @@ export const Wrapper = styled('div')({
}, },
}); });
/* eslint-disable verdaccio/jsx-spread */
export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => ( export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
<TextField <TextField
{...others} {...others}

View File

@ -1,9 +1,10 @@
import React, { FC } from 'react'; import React, { FC } from 'react';
import Avatar from '@material-ui/core/Avatar'; import Avatar from '@material-ui/core/Avatar';
import Tooltip from '@material-ui/core/Tooltip';
import { isEmail } from '../../utils/url'; import { isEmail } from '../../utils/url';
import Tooltip from '../../muiComponents/TextField';
export interface AvatarDeveloper { export interface AvatarDeveloper {
name: string; name: string;
packageName: string; packageName: string;

View File

@ -1,9 +1,9 @@
import Tooltip from '@material-ui/core/Tooltip';
import FileCopy from '@material-ui/icons/FileCopy'; import FileCopy from '@material-ui/icons/FileCopy';
import React from 'react'; import React from 'react';
import { copyToClipBoardUtility } from '../../utils/cli-utils'; import { copyToClipBoardUtility } from '../../utils/cli-utils';
import { TEXT } from '../../utils/constants'; import { TEXT } from '../../utils/constants';
import Tooltip from '../../muiComponents/Tooltip';
import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles'; import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';

View File

@ -1,4 +1,4 @@
import IconButton from '@material-ui/core/IconButton'; import IconButton from '../../muiComponents/IconButton';
import styled from 'react-emotion'; import styled from 'react-emotion';
export const ClipBoardCopy = styled('div')({ export const ClipBoardCopy = styled('div')({

View File

@ -76,10 +76,6 @@ class DependencyBlock extends Component<{ title: string; dependencies: [] }> {
} }
class Dependencies extends Component { class Dependencies extends Component {
public state = {
tabPosition: 0,
};
public render(): ReactElement<HTMLElement> { public render(): ReactElement<HTMLElement> {
return ( return (
<DetailContextConsumer> <DetailContextConsumer>

View File

@ -0,0 +1,13 @@
import React from 'react';
import { render } from '@testing-library/react';
import DetailContainer from './DetailContainer';
describe('DetailContainer', () => {
test('renders correctly', () => {
const { container } = render(<DetailContainer />);
expect(container.firstChild).toMatchSnapshot();
});
test.todo('should test click on tabs');
});

View File

@ -1,77 +1,33 @@
import React, { Component, ReactElement, Fragment } from 'react'; import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
import Box from '@material-ui/core/Box';
import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version'; import { DetailContext } from '../../pages/Version';
import Readme from '../Readme';
import Versions from '../Versions';
import { preventXSS } from '../../utils/sec-utils';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import { Content } from './styles';
import Dependencies from '../Dependencies';
import UpLinks from '../UpLinks';
interface DetailContainerState { import DetailContainerTabs from './DetailContainerTabs';
tabPosition: number; import DetailContainerContent from './DetailContainerContent';
} import { TabPosition } from './tabs';
export const README_LABEL = 'Readme'; const DetailContainer: React.FC = () => {
export const DEPS_LABEL = 'Dependencies'; const [tabPosition, setTabPosition] = useState(TabPosition.README);
export const VERSION_LABEL = 'Versions'; const detailContext = useContext(DetailContext);
export const UPLINKS_LABEL = 'Uplinks'; const { readMe } = detailContext;
class DetailContainer<P> extends Component<P, DetailContainerState> { const handleChangeTabPosition = useCallback(
public state = { (event: ChangeEvent<{}>) => {
tabPosition: 0,
};
public render(): ReactElement<HTMLElement> {
return (
<DetailContextConsumer>
{context => {
return this.renderTabs(context as VersionPageConsumerProps);
}}
</DetailContextConsumer>
);
}
private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => {
event.preventDefault(); event.preventDefault();
this.setState({ tabPosition }); const eventTarget = event.target as HTMLSpanElement;
}; const chosentab = eventTarget.innerText as TabPosition;
setTabPosition(TabPosition[chosentab]);
private renderListTabs(tabPosition: number): React.ReactElement<HTMLElement> { },
return ( [setTabPosition]
<Tabs indicatorColor={'primary'} onChange={this.handleChange} textColor={'primary'} value={tabPosition} variant={'fullWidth'}>
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={README_LABEL} />
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={DEPS_LABEL} />
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={VERSION_LABEL} />
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={UPLINKS_LABEL} />
</Tabs>
); );
}
private renderTabs = ({ readMe }) => {
const { tabPosition } = this.state;
return ( return (
<Fragment> <Box component="div" display="flex" flexDirection="column" padding={2}>
<Content> <DetailContainerTabs onChangeTabPosition={handleChangeTabPosition} tabPosition={tabPosition} />
{this.renderListTabs(tabPosition)} <DetailContainerContent readDescription={readMe} tabPosition={tabPosition} />
<br /> </Box>
{tabPosition === 0 && this.renderReadme(readMe)}
{tabPosition === 1 && <Dependencies />}
{tabPosition === 2 && <Versions />}
{tabPosition === 3 && <UpLinks />}
</Content>
</Fragment>
); );
}; };
private renderReadme = (readMe: string): ReactElement<HTMLElement> => {
const encodedReadme = preventXSS(readMe);
return <Readme description={encodedReadme} />;
};
}
export default DetailContainer; export default DetailContainer;

View File

@ -0,0 +1,30 @@
import React from 'react';
import Dependencies from '../Dependencies';
import UpLinks from '../UpLinks';
import Versions from '../Versions';
import DetailContainerContentReadme from './DetailContainerContentReadme';
import { TabPosition } from './tabs';
interface Props {
tabPosition: TabPosition;
readDescription?: string;
}
const DetailContainerContent: React.FC<Props> = ({ tabPosition, readDescription }) => {
switch (tabPosition) {
case TabPosition.README:
return <DetailContainerContentReadme description={readDescription} />;
case TabPosition.UPLINKS:
return <UpLinks />;
case TabPosition.VERSIONS:
return <Versions />;
case TabPosition.DEPENDENCIES:
return <Dependencies />;
default:
return null;
}
};
export default DetailContainerContent;

View File

@ -0,0 +1,17 @@
import React from 'react';
import { preventXSS } from '../../utils/sec-utils';
import Readme from '../Readme';
interface Props {
description?: string;
}
const DetailContainerContentReadme: React.FC<Props> = ({ description }) => {
if (!description) return null;
const encodedReadme = preventXSS(description);
return <Readme description={encodedReadme} />;
};
export default DetailContainerContentReadme;

View File

@ -0,0 +1,37 @@
import React, { ChangeEvent, useState, useEffect } from 'react';
import { default as MuiTabs } from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import styled from 'react-emotion';
import { TabPosition } from './tabs';
interface Props {
tabPosition: TabPosition;
onChangeTabPosition: (event: ChangeEvent<{}>) => void;
}
const Tabs = styled(MuiTabs)({
marginBottom: 16,
});
const getTabIndex = (tabPosition: TabPosition): number => Object.keys(TabPosition).findIndex(position => position === String(tabPosition).toUpperCase());
const DetailContainerTabs: React.FC<Props> = ({ tabPosition, onChangeTabPosition }) => {
const [tabPositionIndex, setTabPositionIndex] = useState(0);
useEffect(() => {
const tabIndex = getTabIndex(tabPosition);
setTabPositionIndex(tabIndex);
}, [tabPosition]);
return (
<Tabs indicatorColor={'primary'} onChange={onChangeTabPosition} textColor={'primary'} value={tabPositionIndex} variant={'fullWidth'}>
<Tab data-testid={'readme-tab'} id={'readme-tab'} label={TabPosition.README} />
<Tab data-testid={'dependencies-tab'} id={'dependencies-tab'} label={TabPosition.DEPENDENCIES} />
<Tab data-testid={'versions-tab'} id={'versions-tab'} label={TabPosition.VERSIONS} />
<Tab data-testid={'uplinks-tab'} id={'uplinks-tab'} label={TabPosition.UPLINKS} />
</Tabs>
);
};
export default DetailContainerTabs;

View File

@ -0,0 +1,98 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`DetailContainer renders correctly 1`] = `
<div
class="MuiBox-root MuiBox-root-2"
>
<div
class="MuiTabs-root css-1qm1lh emotion-0"
>
<div
class="MuiTabs-scroller MuiTabs-fixed"
style="overflow: hidden;"
>
<div
class="MuiTabs-flexContainer"
role="tablist"
>
<button
aria-selected="true"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-fullWidth"
data-testid="readme-tab"
id="readme-tab"
role="tab"
tabindex="0"
type="button"
>
<span
class="MuiTab-wrapper"
>
Readme
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
aria-selected="false"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
data-testid="dependencies-tab"
id="dependencies-tab"
role="tab"
tabindex="0"
type="button"
>
<span
class="MuiTab-wrapper"
>
Dependencies
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
aria-selected="false"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
data-testid="versions-tab"
id="versions-tab"
role="tab"
tabindex="0"
type="button"
>
<span
class="MuiTab-wrapper"
>
Versions
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
<button
aria-selected="false"
class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary MuiTab-fullWidth"
data-testid="uplinks-tab"
id="uplinks-tab"
role="tab"
tabindex="0"
type="button"
>
<span
class="MuiTab-wrapper"
>
Uplinks
</span>
<span
class="MuiTouchRipple-root"
/>
</button>
</div>
<span
class="PrivateTabIndicator-root-27 PrivateTabIndicator-colorPrimary-28 MuiTabs-indicator"
style="left: 0px; width: 0px;"
/>
</div>
</div>
</div>
`;

View File

@ -1,7 +0,0 @@
import styled from 'react-emotion';
export const Content = styled('div')({
'&&': {
padding: '15px',
},
});

View File

@ -0,0 +1,6 @@
export enum TabPosition {
README = 'Readme',
DEPENDENCIES = 'Dependencies',
VERSIONS = 'Versions',
UPLINKS = 'Uplinks',
}

View File

@ -1,7 +0,0 @@
import { ReactNode } from 'react';
export interface Props {
children: ReactNode;
open: boolean;
onClose: () => void;
}

View File

@ -72,79 +72,150 @@ exports[`test Developers should render the component for contributors with items
name="dmethvin" name="dmethvin"
version="1.0.0" version="1.0.0"
> >
<WithStyles(ForwardRef(Tooltip)) <ForwardRef(ToolTip)
title="dmethvin" title="dmethvin"
> >
<ForwardRef(Tooltip) <WithStyles(ForwardRef(TextField))
InputProps={
Object {
"classes": undefined,
}
}
innerRef={null}
title="dmethvin"
>
<ForwardRef(TextField)
InputProps={
Object {
"classes": undefined,
}
}
classes={ classes={
Object { Object {
"popper": "MuiTooltip-popper", "root": "MuiTextField-root",
"popperInteractive": "MuiTooltip-popperInteractive",
"tooltip": "MuiTooltip-tooltip",
"tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
"tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
"tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
"tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
"touch": "MuiTooltip-touch",
} }
} }
title="dmethvin" title="dmethvin"
> >
<a <WithStyles(ForwardRef(FormControl))
aria-describedby={null} className="MuiTextField-root"
className="" required={false}
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0" title="dmethvin"
variant="standard"
>
<ForwardRef(FormControl)
className="MuiTextField-root"
classes={
Object {
"fullWidth": "MuiFormControl-fullWidth",
"marginDense": "MuiFormControl-marginDense",
"marginNormal": "MuiFormControl-marginNormal",
"root": "MuiFormControl-root",
}
}
required={false}
title="dmethvin"
variant="standard"
>
<div
className="MuiFormControl-root MuiTextField-root"
title="dmethvin"
>
<WithStyles(ForwardRef(Input))>
<ForwardRef(Input)
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root",
"underline": "MuiInput-underline",
}
}
>
<WithStyles(ForwardRef(InputBase))
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root MuiInput-underline",
"underline": null,
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<ForwardRef(InputBase)
classes={
Object {
"adornedEnd": "MuiInputBase-adornedEnd",
"adornedStart": "MuiInputBase-adornedStart",
"disabled": "Mui-disabled Mui-disabled",
"error": "Mui-error Mui-error",
"focused": "Mui-focused Mui-focused",
"formControl": "MuiInputBase-formControl MuiInput-formControl",
"fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
"input": "MuiInputBase-input MuiInput-input",
"inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
"inputAdornedStart": "MuiInputBase-inputAdornedStart",
"inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
"inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
"inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
"inputSelect": "MuiInputBase-inputSelect",
"inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
"marginDense": "MuiInputBase-marginDense",
"multiline": "MuiInputBase-multiline MuiInput-multiline",
"root": "MuiInputBase-root MuiInput-root MuiInput-underline",
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<div
className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
onClick={[Function]}
>
<input
aria-invalid={false}
className="MuiInputBase-input MuiInput-input"
disabled={false}
onAnimationStart={[Function]}
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseLeave={[Function]} required={false}
onMouseOver={[Function]} type="text"
onTouchEnd={[Function]}
onTouchStart={[Function]}
target="_top"
title="dmethvin"
>
<WithStyles(ForwardRef(Avatar))
aria-label="dmethvin"
>
<ForwardRef(Avatar)
aria-label="dmethvin"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="dmethvin"
className="MuiAvatar-root MuiAvatar-colorDefault"
/> />
</ForwardRef(Avatar)> </div>
</WithStyles(ForwardRef(Avatar))> </ForwardRef(InputBase)>
</a> </WithStyles(ForwardRef(InputBase))>
<ForwardRef(Popper) </ForwardRef(Input)>
anchorEl={ </WithStyles(ForwardRef(Input))>
<a </div>
class="" </ForwardRef(FormControl)>
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0" </WithStyles(ForwardRef(FormControl))>
target="_top" </ForwardRef(TextField)>
title="dmethvin" </WithStyles(ForwardRef(TextField))>
> </ForwardRef(ToolTip)>
<div
aria-label="dmethvin"
class="MuiAvatar-root MuiAvatar-colorDefault"
/>
</a>
}
className="MuiTooltip-popper"
id={null}
open={false}
placement="bottom"
transition={true}
/>
</ForwardRef(Tooltip)>
</WithStyles(ForwardRef(Tooltip))>
</AvatarTooltip> </AvatarTooltip>
</span> </span>
</Styled(span)> </Styled(span)>
@ -159,79 +230,150 @@ exports[`test Developers should render the component for contributors with items
name="mgol" name="mgol"
version="1.0.0" version="1.0.0"
> >
<WithStyles(ForwardRef(Tooltip)) <ForwardRef(ToolTip)
title="mgol" title="mgol"
> >
<ForwardRef(Tooltip) <WithStyles(ForwardRef(TextField))
InputProps={
Object {
"classes": undefined,
}
}
innerRef={null}
title="mgol"
>
<ForwardRef(TextField)
InputProps={
Object {
"classes": undefined,
}
}
classes={ classes={
Object { Object {
"popper": "MuiTooltip-popper", "root": "MuiTextField-root",
"popperInteractive": "MuiTooltip-popperInteractive",
"tooltip": "MuiTooltip-tooltip",
"tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
"tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
"tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
"tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
"touch": "MuiTooltip-touch",
} }
} }
title="mgol" title="mgol"
> >
<a <WithStyles(ForwardRef(FormControl))
aria-describedby={null} className="MuiTextField-root"
className="" required={false}
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0" title="mgol"
variant="standard"
>
<ForwardRef(FormControl)
className="MuiTextField-root"
classes={
Object {
"fullWidth": "MuiFormControl-fullWidth",
"marginDense": "MuiFormControl-marginDense",
"marginNormal": "MuiFormControl-marginNormal",
"root": "MuiFormControl-root",
}
}
required={false}
title="mgol"
variant="standard"
>
<div
className="MuiFormControl-root MuiTextField-root"
title="mgol"
>
<WithStyles(ForwardRef(Input))>
<ForwardRef(Input)
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root",
"underline": "MuiInput-underline",
}
}
>
<WithStyles(ForwardRef(InputBase))
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root MuiInput-underline",
"underline": null,
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<ForwardRef(InputBase)
classes={
Object {
"adornedEnd": "MuiInputBase-adornedEnd",
"adornedStart": "MuiInputBase-adornedStart",
"disabled": "Mui-disabled Mui-disabled",
"error": "Mui-error Mui-error",
"focused": "Mui-focused Mui-focused",
"formControl": "MuiInputBase-formControl MuiInput-formControl",
"fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
"input": "MuiInputBase-input MuiInput-input",
"inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
"inputAdornedStart": "MuiInputBase-inputAdornedStart",
"inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
"inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
"inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
"inputSelect": "MuiInputBase-inputSelect",
"inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
"marginDense": "MuiInputBase-marginDense",
"multiline": "MuiInputBase-multiline MuiInput-multiline",
"root": "MuiInputBase-root MuiInput-root MuiInput-underline",
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<div
className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
onClick={[Function]}
>
<input
aria-invalid={false}
className="MuiInputBase-input MuiInput-input"
disabled={false}
onAnimationStart={[Function]}
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseLeave={[Function]} required={false}
onMouseOver={[Function]} type="text"
onTouchEnd={[Function]}
onTouchStart={[Function]}
target="_top"
title="mgol"
>
<WithStyles(ForwardRef(Avatar))
aria-label="mgol"
>
<ForwardRef(Avatar)
aria-label="mgol"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="mgol"
className="MuiAvatar-root MuiAvatar-colorDefault"
/> />
</ForwardRef(Avatar)> </div>
</WithStyles(ForwardRef(Avatar))> </ForwardRef(InputBase)>
</a> </WithStyles(ForwardRef(InputBase))>
<ForwardRef(Popper) </ForwardRef(Input)>
anchorEl={ </WithStyles(ForwardRef(Input))>
<a </div>
class="" </ForwardRef(FormControl)>
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0" </WithStyles(ForwardRef(FormControl))>
target="_top" </ForwardRef(TextField)>
title="mgol" </WithStyles(ForwardRef(TextField))>
> </ForwardRef(ToolTip)>
<div
aria-label="mgol"
class="MuiAvatar-root MuiAvatar-colorDefault"
/>
</a>
}
className="MuiTooltip-popper"
id={null}
open={false}
placement="bottom"
transition={true}
/>
</ForwardRef(Tooltip)>
</WithStyles(ForwardRef(Tooltip))>
</AvatarTooltip> </AvatarTooltip>
</span> </span>
</Styled(span)> </Styled(span)>
@ -312,79 +454,150 @@ exports[`test Developers should render the component for maintainers with items
name="dmethvin" name="dmethvin"
version="1.0.0" version="1.0.0"
> >
<WithStyles(ForwardRef(Tooltip)) <ForwardRef(ToolTip)
title="dmethvin" title="dmethvin"
> >
<ForwardRef(Tooltip) <WithStyles(ForwardRef(TextField))
InputProps={
Object {
"classes": undefined,
}
}
innerRef={null}
title="dmethvin"
>
<ForwardRef(TextField)
InputProps={
Object {
"classes": undefined,
}
}
classes={ classes={
Object { Object {
"popper": "MuiTooltip-popper", "root": "MuiTextField-root",
"popperInteractive": "MuiTooltip-popperInteractive",
"tooltip": "MuiTooltip-tooltip",
"tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
"tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
"tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
"tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
"touch": "MuiTooltip-touch",
} }
} }
title="dmethvin" title="dmethvin"
> >
<a <WithStyles(ForwardRef(FormControl))
aria-describedby={null} className="MuiTextField-root"
className="" required={false}
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0" title="dmethvin"
variant="standard"
>
<ForwardRef(FormControl)
className="MuiTextField-root"
classes={
Object {
"fullWidth": "MuiFormControl-fullWidth",
"marginDense": "MuiFormControl-marginDense",
"marginNormal": "MuiFormControl-marginNormal",
"root": "MuiFormControl-root",
}
}
required={false}
title="dmethvin"
variant="standard"
>
<div
className="MuiFormControl-root MuiTextField-root"
title="dmethvin"
>
<WithStyles(ForwardRef(Input))>
<ForwardRef(Input)
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root",
"underline": "MuiInput-underline",
}
}
>
<WithStyles(ForwardRef(InputBase))
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root MuiInput-underline",
"underline": null,
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<ForwardRef(InputBase)
classes={
Object {
"adornedEnd": "MuiInputBase-adornedEnd",
"adornedStart": "MuiInputBase-adornedStart",
"disabled": "Mui-disabled Mui-disabled",
"error": "Mui-error Mui-error",
"focused": "Mui-focused Mui-focused",
"formControl": "MuiInputBase-formControl MuiInput-formControl",
"fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
"input": "MuiInputBase-input MuiInput-input",
"inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
"inputAdornedStart": "MuiInputBase-inputAdornedStart",
"inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
"inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
"inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
"inputSelect": "MuiInputBase-inputSelect",
"inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
"marginDense": "MuiInputBase-marginDense",
"multiline": "MuiInputBase-multiline MuiInput-multiline",
"root": "MuiInputBase-root MuiInput-root MuiInput-underline",
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<div
className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
onClick={[Function]}
>
<input
aria-invalid={false}
className="MuiInputBase-input MuiInput-input"
disabled={false}
onAnimationStart={[Function]}
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseLeave={[Function]} required={false}
onMouseOver={[Function]} type="text"
onTouchEnd={[Function]}
onTouchStart={[Function]}
target="_top"
title="dmethvin"
>
<WithStyles(ForwardRef(Avatar))
aria-label="dmethvin"
>
<ForwardRef(Avatar)
aria-label="dmethvin"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="dmethvin"
className="MuiAvatar-root MuiAvatar-colorDefault"
/> />
</ForwardRef(Avatar)> </div>
</WithStyles(ForwardRef(Avatar))> </ForwardRef(InputBase)>
</a> </WithStyles(ForwardRef(InputBase))>
<ForwardRef(Popper) </ForwardRef(Input)>
anchorEl={ </WithStyles(ForwardRef(Input))>
<a </div>
class="" </ForwardRef(FormControl)>
href="mailto:dave.methvin@gmail.com?subject=undefined@1.0.0" </WithStyles(ForwardRef(FormControl))>
target="_top" </ForwardRef(TextField)>
title="dmethvin" </WithStyles(ForwardRef(TextField))>
> </ForwardRef(ToolTip)>
<div
aria-label="dmethvin"
class="MuiAvatar-root MuiAvatar-colorDefault"
/>
</a>
}
className="MuiTooltip-popper"
id={null}
open={false}
placement="bottom"
transition={true}
/>
</ForwardRef(Tooltip)>
</WithStyles(ForwardRef(Tooltip))>
</AvatarTooltip> </AvatarTooltip>
</span> </span>
</Styled(span)> </Styled(span)>
@ -399,79 +612,150 @@ exports[`test Developers should render the component for maintainers with items
name="mgol" name="mgol"
version="1.0.0" version="1.0.0"
> >
<WithStyles(ForwardRef(Tooltip)) <ForwardRef(ToolTip)
title="mgol" title="mgol"
> >
<ForwardRef(Tooltip) <WithStyles(ForwardRef(TextField))
InputProps={
Object {
"classes": undefined,
}
}
innerRef={null}
title="mgol"
>
<ForwardRef(TextField)
InputProps={
Object {
"classes": undefined,
}
}
classes={ classes={
Object { Object {
"popper": "MuiTooltip-popper", "root": "MuiTextField-root",
"popperInteractive": "MuiTooltip-popperInteractive",
"tooltip": "MuiTooltip-tooltip",
"tooltipPlacementBottom": "MuiTooltip-tooltipPlacementBottom",
"tooltipPlacementLeft": "MuiTooltip-tooltipPlacementLeft",
"tooltipPlacementRight": "MuiTooltip-tooltipPlacementRight",
"tooltipPlacementTop": "MuiTooltip-tooltipPlacementTop",
"touch": "MuiTooltip-touch",
} }
} }
title="mgol" title="mgol"
> >
<a <WithStyles(ForwardRef(FormControl))
aria-describedby={null} className="MuiTextField-root"
className="" required={false}
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0" title="mgol"
variant="standard"
>
<ForwardRef(FormControl)
className="MuiTextField-root"
classes={
Object {
"fullWidth": "MuiFormControl-fullWidth",
"marginDense": "MuiFormControl-marginDense",
"marginNormal": "MuiFormControl-marginNormal",
"root": "MuiFormControl-root",
}
}
required={false}
title="mgol"
variant="standard"
>
<div
className="MuiFormControl-root MuiTextField-root"
title="mgol"
>
<WithStyles(ForwardRef(Input))>
<ForwardRef(Input)
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root",
"underline": "MuiInput-underline",
}
}
>
<WithStyles(ForwardRef(InputBase))
classes={
Object {
"disabled": "Mui-disabled",
"error": "Mui-error",
"focused": "Mui-focused",
"formControl": "MuiInput-formControl",
"fullWidth": "MuiInput-fullWidth",
"input": "MuiInput-input",
"inputMarginDense": "MuiInput-inputMarginDense",
"inputMultiline": "MuiInput-inputMultiline",
"inputTypeSearch": "MuiInput-inputTypeSearch",
"multiline": "MuiInput-multiline",
"root": "MuiInput-root MuiInput-underline",
"underline": null,
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<ForwardRef(InputBase)
classes={
Object {
"adornedEnd": "MuiInputBase-adornedEnd",
"adornedStart": "MuiInputBase-adornedStart",
"disabled": "Mui-disabled Mui-disabled",
"error": "Mui-error Mui-error",
"focused": "Mui-focused Mui-focused",
"formControl": "MuiInputBase-formControl MuiInput-formControl",
"fullWidth": "MuiInputBase-fullWidth MuiInput-fullWidth",
"input": "MuiInputBase-input MuiInput-input",
"inputAdornedEnd": "MuiInputBase-inputAdornedEnd",
"inputAdornedStart": "MuiInputBase-inputAdornedStart",
"inputHiddenLabel": "MuiInputBase-inputHiddenLabel",
"inputMarginDense": "MuiInputBase-inputMarginDense MuiInput-inputMarginDense",
"inputMultiline": "MuiInputBase-inputMultiline MuiInput-inputMultiline",
"inputSelect": "MuiInputBase-inputSelect",
"inputTypeSearch": "MuiInputBase-inputTypeSearch MuiInput-inputTypeSearch",
"marginDense": "MuiInputBase-marginDense",
"multiline": "MuiInputBase-multiline MuiInput-multiline",
"root": "MuiInputBase-root MuiInput-root MuiInput-underline",
}
}
fullWidth={false}
inputComponent="input"
multiline={false}
type="text"
>
<div
className="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-formControl MuiInput-formControl"
onClick={[Function]}
>
<input
aria-invalid={false}
className="MuiInputBase-input MuiInput-input"
disabled={false}
onAnimationStart={[Function]}
onBlur={[Function]} onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]} onFocus={[Function]}
onMouseLeave={[Function]} required={false}
onMouseOver={[Function]} type="text"
onTouchEnd={[Function]}
onTouchStart={[Function]}
target="_top"
title="mgol"
>
<WithStyles(ForwardRef(Avatar))
aria-label="mgol"
>
<ForwardRef(Avatar)
aria-label="mgol"
classes={
Object {
"colorDefault": "MuiAvatar-colorDefault",
"img": "MuiAvatar-img",
"root": "MuiAvatar-root",
}
}
>
<div
aria-label="mgol"
className="MuiAvatar-root MuiAvatar-colorDefault"
/> />
</ForwardRef(Avatar)> </div>
</WithStyles(ForwardRef(Avatar))> </ForwardRef(InputBase)>
</a> </WithStyles(ForwardRef(InputBase))>
<ForwardRef(Popper) </ForwardRef(Input)>
anchorEl={ </WithStyles(ForwardRef(Input))>
<a </div>
class="" </ForwardRef(FormControl)>
href="mailto:m.goleb@gmail.com?subject=undefined@1.0.0" </WithStyles(ForwardRef(FormControl))>
target="_top" </ForwardRef(TextField)>
title="mgol" </WithStyles(ForwardRef(TextField))>
> </ForwardRef(ToolTip)>
<div
aria-label="mgol"
class="MuiAvatar-root MuiAvatar-colorDefault"
/>
</a>
}
className="MuiTooltip-popper"
id={null}
open={false}
placement="bottom"
transition={true}
/>
</ForwardRef(Tooltip)>
</WithStyles(ForwardRef(Tooltip))>
</AvatarTooltip> </AvatarTooltip>
</span> </span>
</Styled(span)> </Styled(span)>

View File

@ -3,24 +3,35 @@ import { Link } from 'react-router-dom';
import { css } from 'emotion'; import { css } from 'emotion';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuItem from '@material-ui/core/MenuItem'; import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu'; import Menu from '@material-ui/core/Menu';
import Info from '@material-ui/icons/Info'; import Info from '@material-ui/icons/Info';
import Help from '@material-ui/icons/Help'; import Help from '@material-ui/icons/Help';
import Tooltip from '@material-ui/core/Tooltip';
import AccountCircle from '@material-ui/icons/AccountCircle'; import AccountCircle from '@material-ui/icons/AccountCircle';
import { default as IconSearch } from '@material-ui/icons/Search'; import { default as IconSearch } from '@material-ui/icons/Search';
import { getRegistryURL } from '../../utils/url'; import { getRegistryURL } from '../../utils/url';
import ExternalLink from '../Link';
import Logo from '../Logo'; import Logo from '../Logo';
import RegistryInfoDialog from '../RegistryInfoDialog/RegistryInfoDialog'; import RegistryInfoDialog from '../RegistryInfoDialog/RegistryInfoDialog';
import Label from '../Label/Label'; import Label from '../Label/Label';
import Search from '../Search/Search'; import Search from '../Search/Search';
import RegistryInfoContent from '../RegistryInfoContent/RegistryInfoContent'; import RegistryInfoContent from '../RegistryInfoContent/RegistryInfoContent';
import { Greetings, NavBar, InnerNavBar, MobileNavBar, InnerMobileNavBar, LeftSide, RightSide, IconSearchButton, SearchWrapper } from './styles'; import IconButton from '../../muiComponents/IconButton';
import Tooltip from '../../muiComponents/Tooltip';
import {
Greetings,
NavBar,
InnerNavBar,
MobileNavBar,
InnerMobileNavBar,
LeftSide,
RightSide,
IconSearchButton,
SearchWrapper,
StyledExternalLink,
} from './styles';
interface Props { interface Props {
logo?: string; logo?: string;
@ -174,9 +185,11 @@ class Header extends Component<Props, State> {
case 'help': case 'help':
content = ( content = (
// @ts-ignore // @ts-ignore
<IconButton blank={true} color={'inherit'} component={ExternalLink} to={'https://verdaccio.org/docs/en/installation'}> <StyledExternalLink blank={true} to={'https://verdaccio.org/docs/en/installation'}>
<IconButton color={'inherit'}>
<Help /> <Help />
</IconButton> </IconButton>
</StyledExternalLink>
); );
break; break;
case 'info': case 'info':

View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-account\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\\"></path></svg></span></button></div></div></header></div>"`; exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" title=\\"Documentation\\" class=\\"css-1aacqdd e1jf5lit9\\"><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></button></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-account\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\\"></path></svg></span></button></div></div></header></div>"`;
exports[`<Header /> component with logged out state should load the component in logged out state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-login\\"><span class=\\"MuiButton-label\\">Login</span></button></div></div></header></div>"`; exports[`<Header /> component with logged out state should load the component in logged out state 1`] = `"<div><header class=\\"MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc e1jf5lit8 MuiAppBar-colorPrimary\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1pwdmmq e1jf5lit0 MuiToolbar-gutters\\"><div class=\\"MuiToolbar-root MuiToolbar-regular css-1vacr9s e1jf5lit3 MuiToolbar-gutters\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root MuiToolbar-regular css-m61s5i e1jf5lit2 MuiToolbar-gutters\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" title=\\"Documentation\\" class=\\"css-1aacqdd e1jf5lit9\\"><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></button></a><button class=\\"MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-colorInherit\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-login\\"><span class=\\"MuiButton-label\\">Login</span></button></div></div></header></div>"`;

View File

@ -1,11 +1,13 @@
import styled, { css } from 'react-emotion'; import styled, { css } from 'react-emotion';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
import mq from '../../utils/styles/media'; import mq from '../../utils/styles/media';
import IconButton from '../../muiComponents/IconButton';
import ExternalLink from '../Link';
export const InnerNavBar = styled(Toolbar)({ export const InnerNavBar = styled(Toolbar)({
'&&': { '&&': {
justifyContent: 'space-between', justifyContent: 'space-between',
@ -108,3 +110,9 @@ export const NavBar = styled(AppBar)`
}}; }};
} }
`; `;
export const StyledExternalLink = styled(ExternalLink)({
'&&': {
color: 'white',
},
});

View File

@ -4,12 +4,12 @@ import BugReport from '@material-ui/icons/BugReport';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import HomeIcon from '@material-ui/icons/Home'; import HomeIcon from '@material-ui/icons/Home';
import ListItem from '@material-ui/core/ListItem'; import ListItem from '@material-ui/core/ListItem';
import Tooltip from '@material-ui/core/Tooltip';
import { PackageMetaInterface } from 'types/packageMeta'; import { PackageMetaInterface } from 'types/packageMeta';
import Tag from '../Tag'; import Tag from '../Tag';
import fileSizeSI from '../../utils/file-size'; import fileSizeSI from '../../utils/file-size';
import { formatDate, formatDateDistance } from '../../utils/package'; import { formatDate, formatDateDistance } from '../../utils/package';
import Tooltip from '../../muiComponents/Tooltip';
import { import {
Author, Author,
Avatar, Avatar,

View File

@ -4,7 +4,6 @@ import { Link } from 'react-router-dom';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import List from '@material-ui/core/List'; import List from '@material-ui/core/List';
import ListItemText from '@material-ui/core/ListItemText'; import ListItemText from '@material-ui/core/ListItemText';
import MuiIconButton from '@material-ui/core/IconButton';
import Photo from '@material-ui/core/Avatar'; import Photo from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
@ -13,6 +12,7 @@ import Ico from '../Icon';
import Label from '../Label'; import Label from '../Label';
import colors from '../../utils/styles/colors'; import colors from '../../utils/styles/colors';
import { fontWeight } from '../../utils/styles/sizes'; import { fontWeight } from '../../utils/styles/sizes';
import { default as MuiIconButton } from '../../muiComponents/IconButton';
export const OverviewItem = styled('span')` export const OverviewItem = styled('span')`
&& { && {

View File

@ -1,14 +0,0 @@
import { default as TextFieldMaterialUI, TextFieldProps } from '@material-ui/core/TextField';
import React from 'react';
const TextField: React.FC<TextFieldProps> = ({ InputProps, classes, ...other }) => (
<TextFieldMaterialUI
{...other}
InputProps={{
...InputProps,
classes,
}}
/>
);
export default TextField;

View File

@ -0,0 +1,12 @@
import React, { forwardRef } from 'react';
import { default as MuiIconButton, IconButtonProps } from '@material-ui/core/IconButton';
type IconButtonRef = HTMLElementTagNameMap['button'];
/* eslint-disable verdaccio/jsx-spread */
// eslint-disable-next-line react/display-name
const IconButton = forwardRef<IconButtonRef, IconButtonProps>(function IconButton(props, ref) {
return <MuiIconButton {...props} ref={ref} />;
});
export default IconButton;

View File

@ -0,0 +1 @@
export { default } from './IconButton';

View File

@ -0,0 +1,22 @@
import React, { forwardRef } from 'react';
import { default as TextFieldMaterialUI, TextFieldProps } from '@material-ui/core/TextField';
// The default element type of MUI's TextField is 'div'
type TextFieldRef = HTMLElementTagNameMap['div'];
/* eslint-disable verdaccio/jsx-spread */
// eslint-disable-next-line react/display-name
const TextField = forwardRef<TextFieldRef, TextFieldProps>(function ToolTip({ InputProps, classes, ...props }, ref) {
return (
<TextFieldMaterialUI
{...props}
InputProps={{
...InputProps,
classes,
}}
innerRef={ref}
/>
);
});
export default TextField;

View File

@ -0,0 +1,13 @@
import React, { forwardRef } from 'react';
import { default as MuiTooltip, TooltipProps } from '@material-ui/core/Tooltip';
// The default element type of MUI's Tooltip is 'div' and the change of this prop is not allowed
type TooltipRef = HTMLElementTagNameMap['div'];
/* eslint-disable verdaccio/jsx-spread */
// eslint-disable-next-line react/display-name
const Tooltip = forwardRef<TooltipRef, TooltipProps>(function ToolTip(props, ref) {
return <MuiTooltip {...props} innerRef={ref} />;
});
export default Tooltip;

View File

@ -0,0 +1 @@
export { default } from './Tooltip';