mirror of
https://github.com/SomboChea/ui
synced 2024-05-18 01:11:36 +07:00
fix: rest MUI components - Introduced ForwardRef (#224)
* refactor(162): added forwardRef Card * refactor(162): introduced forwardRefDivider * refactor(162): introduced forwardRef MuiComponents * refactor(162): introducing forwardRef * refactor(162): introduced forwardRef * refactor(162): introduced forwardRef * fix(162): fixed link * fix: fixed port number * fix: fixed duplicated id * fix: fixed ref iconbutton * fix: updated snaps * fix: fixed port * fix: fixed eslint errors * fix: the item should be a button * fix: fixed eslint errors
This commit is contained in:
Priscila Oliveira
Juan Picado @jotadeveloper
parent
a4cdd145d2
commit
b56e43846b
|
|
@ -2,6 +2,6 @@
|
|||
|
||||
exports[`<ActionBar /> component should render the component in default state 1`] = `""`;
|
||||
|
||||
exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-z6z5me eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
|
||||
exports[`<ActionBar /> component when there is a button to open an issue 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></a><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
exports[`<ActionBar /> component when there is a button to open an issue 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root MuiFab-root css-z6z5me eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span><span class=\\"MuiTouchRipple-root\\"></span></button></a><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import styled from 'react-emotion';
|
||||
import { default as MuiFab } from '@material-ui/core/Fab';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
||||
|
||||
export const ActionListItem = styled(ListItem)({
|
||||
paddingTop: 0,
|
||||
|
|
@ -10,10 +10,8 @@ export const ActionListItem = styled(ListItem)({
|
|||
paddingRight: 0,
|
||||
});
|
||||
|
||||
export const Fab = styled(MuiFab)({
|
||||
'&&': {
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
marginRight: '10px',
|
||||
},
|
||||
export const Fab = styled(FloatingActionButton)({
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
marginRight: '10px',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
exports[`<Author /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-zw46c6 e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"mailto:verdaccio.user@verdaccio.org?subject=verdaccio@4.0.0\\" target=\\"_top\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div></a><div class=\\"MuiListItemText-root css-fipixf e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
|
||||
exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-xugzlj e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-1vhg3jx e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
exports[`<Author /> component should render the component when there is no author email 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-zw46c6 e1xuehjw1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiAvatar-root\\"><img alt=\\"verdaccio user\\" src=\\"https://www.gravatar.com/avatar/000000\\" class=\\"MuiAvatar-img\\"></div><div class=\\"MuiListItemText-root css-fipixf e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import styled from 'react-emotion';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
|
|
@ -11,17 +11,13 @@ export const StyledText = styled(Text)({
|
|||
});
|
||||
|
||||
export const AuthorListItem = styled(ListItem)({
|
||||
'&&': {
|
||||
padding: 0,
|
||||
},
|
||||
'&&:hover': {
|
||||
padding: 0,
|
||||
':hover': {
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
});
|
||||
|
||||
export const AuthorListItemText = styled(ListItemText)({
|
||||
'&&': {
|
||||
padding: '0 10px',
|
||||
margin: 0,
|
||||
},
|
||||
padding: '0 10px',
|
||||
margin: 0,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { css } from 'emotion';
|
|||
import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
|
||||
import match from 'autosuggest-highlight/match';
|
||||
import parse from 'autosuggest-highlight/parse';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import MenuItem from '../../muiComponents/MenuItem';
|
||||
|
||||
import { Wrapper, InputField, SuggestionContainer } from './styles';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
import styled, { css } from 'react-emotion';
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
|
||||
import TextField from '../../muiComponents/TextField';
|
||||
import Paper from '../../muiComponents/Paper';
|
||||
|
||||
export interface InputFieldProps {
|
||||
color: string;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useContext } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
|
||||
import CardContent from '../../muiComponents/CardContent';
|
||||
import { PackageDependencies } from '../../../types/packageMeta';
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import NoItems from '../NoItems';
|
||||
|
|
|
|||
|
|
@ -1,14 +1,12 @@
|
|||
import styled from 'react-emotion';
|
||||
import Chip from '@material-ui/core/Chip';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import Card from '../../muiComponents/Card';
|
||||
import Chip from '../../muiComponents/Chip';
|
||||
|
||||
export const CardWrap = styled(Card)({
|
||||
'&&': {
|
||||
margin: '0 0 16px',
|
||||
},
|
||||
margin: '0 0 16px',
|
||||
});
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
|
|
@ -17,16 +15,12 @@ export const StyledText = styled(Text)({
|
|||
});
|
||||
|
||||
export const Tags = styled('div')({
|
||||
'&&': {
|
||||
display: 'flex',
|
||||
justifyContent: 'start',
|
||||
flexWrap: 'wrap',
|
||||
margin: '0 -5px',
|
||||
},
|
||||
display: 'flex',
|
||||
justifyContent: 'start',
|
||||
flexWrap: 'wrap',
|
||||
margin: '0 -5px',
|
||||
});
|
||||
|
||||
export const Tag = styled(Chip)({
|
||||
'&&': {
|
||||
margin: '5px',
|
||||
},
|
||||
margin: '5px',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
|
||||
import Box from '@material-ui/core/Box';
|
||||
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import Box from '../../muiComponents/Box';
|
||||
|
||||
import DetailContainerTabs from './DetailContainerTabs';
|
||||
import DetailContainerContent from './DetailContainerContent';
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
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 { default as MuiTabs } from '../../muiComponents/Tabs';
|
||||
import Tab from '../../muiComponents/Tab';
|
||||
|
||||
import { TabPosition } from './tabs';
|
||||
|
||||
interface Props {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { ReactElement } from 'react';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
|
||||
import { ActionBar } from '../ActionBar/ActionBar';
|
||||
import Author from '../Author';
|
||||
|
|
@ -11,6 +10,7 @@ import Repository from '../Repository/Repository';
|
|||
import { DetailContext } from '../../pages/Version';
|
||||
import List from '../../muiComponents/List';
|
||||
import Card from '../../muiComponents/Card';
|
||||
import CardContent from '../../muiComponents/CardContent';
|
||||
|
||||
import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import styled from 'react-emotion';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
|
||||
export const TitleListItem = styled(ListItem)({
|
||||
paddingLeft: 0,
|
||||
|
|
@ -10,21 +10,15 @@ export const TitleListItem = styled(ListItem)({
|
|||
});
|
||||
|
||||
export const TitleListItemText = styled(ListItemText)({
|
||||
'&&': {
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
paddingTop: '8px',
|
||||
},
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
paddingTop: '8px',
|
||||
});
|
||||
|
||||
export const PackageDescription = styled('span')({
|
||||
'&&': {
|
||||
display: 'block',
|
||||
},
|
||||
display: 'block',
|
||||
});
|
||||
|
||||
export const PackageVersion = styled('span')({
|
||||
'&&': {
|
||||
display: 'block',
|
||||
},
|
||||
display: 'block',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import styled from 'react-emotion';
|
||||
import { default as MuiFab } from '@material-ui/core/Fab';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
||||
|
||||
export const Details = styled('span')({
|
||||
display: 'flex',
|
||||
|
|
@ -26,9 +26,7 @@ export const StyledText = styled(Text)({
|
|||
textTransform: 'capitalize',
|
||||
});
|
||||
|
||||
export const Fab = styled(MuiFab)({
|
||||
'&&': {
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
},
|
||||
export const Fab = styled(FloatingActionButton)({
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
|
||||
exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
|
||||
exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import styled from 'react-emotion';
|
||||
import { default as MuiFab } from '@material-ui/core/Fab';
|
||||
import Chip from '@material-ui/core/Chip';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import FloatingActionButton from '../../muiComponents/FloatingActionButton';
|
||||
import Chip from '../../muiComponents/Chip';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
|
|
@ -13,22 +13,16 @@ export const StyledText = styled(Text)({
|
|||
});
|
||||
|
||||
export const DistListItem = styled(ListItem)({
|
||||
'&&': {
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
},
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
});
|
||||
|
||||
export const DistChips = styled(Chip)({
|
||||
'&&': {
|
||||
marginRight: '5px',
|
||||
textTransform: 'capitalize',
|
||||
},
|
||||
marginRight: '5px',
|
||||
textTransform: 'capitalize',
|
||||
});
|
||||
|
||||
export const DownloadButton = styled(MuiFab)({
|
||||
'&&': {
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
},
|
||||
export const DownloadButton = styled(FloatingActionButton)({
|
||||
backgroundColor: colors.primary,
|
||||
color: colors.white,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { Component, ReactElement } from 'react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
|
||||
import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
|
||||
import Avatar from '../../muiComponents/Avatar';
|
||||
import List from '../../muiComponents/List';
|
||||
import npm from '../Install/img/npm.svg';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
import Grid from '../../muiComponents/Grid';
|
||||
|
||||
import { StyledText, EngineListItem } from './styles';
|
||||
// @ts-ignore
|
||||
|
|
|
|||
|
|
@ -50,7 +50,9 @@ const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onTo
|
|||
<InnerMobileNavBar>
|
||||
<Search />
|
||||
</InnerMobileNavBar>
|
||||
<Button color="inherit">{'Cancel'}</Button>
|
||||
<Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
|
||||
{'Cancel'}
|
||||
</Button>
|
||||
</MobileNavBar>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import React, { MouseEvent } from 'react';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import Menu from '@material-ui/core/Menu';
|
||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
||||
|
||||
import IconButton from '../../muiComponents/IconButton';
|
||||
import MenuItem from '../../muiComponents/MenuItem';
|
||||
import Menu from '../../muiComponents/Menu';
|
||||
|
||||
import HeaderGreetings from './HeaderGreetings';
|
||||
|
||||
|
|
@ -39,7 +39,6 @@ const HeaderMenu: React.FC<Props> = ({
|
|||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
id="header--button-account"
|
||||
onClose={onLoggedInMenuClose}
|
||||
open={isMenuOpen}
|
||||
transformOrigin={{
|
||||
|
|
@ -49,7 +48,7 @@ const HeaderMenu: React.FC<Props> = ({
|
|||
<MenuItem disabled={true}>
|
||||
<HeaderGreetings username={username} />
|
||||
</MenuItem>
|
||||
<MenuItem id="header--button-logout" onClick={onLogout}>
|
||||
<MenuItem button={true} id="header--button-logout" onClick={onLogout}>
|
||||
{'Logout'}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,37 @@
|
|||
import React from 'react';
|
||||
import React, { forwardRef } from 'react';
|
||||
import Info from '@material-ui/icons/Info';
|
||||
import Help from '@material-ui/icons/Help';
|
||||
import Search from '@material-ui/icons/Search';
|
||||
|
||||
import IconButton from '../../muiComponents/IconButton';
|
||||
|
||||
import { IconSearchButton, StyledExternalLink } from './styles';
|
||||
import { IconSearchButton, StyledLink } from './styles';
|
||||
|
||||
export type TooltipIconType = 'search' | 'help' | 'info';
|
||||
|
||||
interface Props {
|
||||
tooltipIconType: TooltipIconType;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
|
||||
type HeaderToolTipIconRef = HTMLButtonElement;
|
||||
|
||||
/* eslint-disable react/jsx-no-undef */
|
||||
/* eslint-disable react/display-name */
|
||||
const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
|
||||
{ tooltipIconType, onClick },
|
||||
ref
|
||||
) {
|
||||
switch (tooltipIconType) {
|
||||
case 'help':
|
||||
return (
|
||||
<StyledExternalLink
|
||||
blank={true}
|
||||
<StyledLink
|
||||
data-testid={'header--tooltip-documentation'}
|
||||
external={true}
|
||||
to={'https://verdaccio.org/docs/en/installation'}>
|
||||
<IconButton color={'inherit'}>
|
||||
<Help />
|
||||
</IconButton>
|
||||
</StyledExternalLink>
|
||||
</StyledLink>
|
||||
);
|
||||
case 'info':
|
||||
return (
|
||||
|
|
@ -33,7 +39,8 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
|
|||
color="inherit"
|
||||
data-testid={'header--tooltip-info'}
|
||||
id="header--button-registryInfo"
|
||||
onClick={onClick}>
|
||||
onClick={onClick}
|
||||
ref={ref}>
|
||||
<Info />
|
||||
</IconButton>
|
||||
);
|
||||
|
|
@ -46,6 +53,6 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
|
|||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
export default HeaderToolTipIcon;
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
|
||||
>
|
||||
<div
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
|
||||
>
|
||||
<div
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
|
||||
class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
|
||||
>
|
||||
<a
|
||||
class="css-1dk30lc"
|
||||
|
|
@ -19,7 +19,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
/>
|
||||
</a>
|
||||
<div
|
||||
class="css-13zpdre emotion-3"
|
||||
class="css-12prohx emotion-3"
|
||||
>
|
||||
<div
|
||||
class="css-1crzyyo emotion-2"
|
||||
|
|
@ -40,7 +40,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
|
||||
>
|
||||
<div
|
||||
class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
|
||||
class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -74,10 +74,10 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
|
||||
class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -101,35 +101,40 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
/>
|
||||
</button>
|
||||
<a
|
||||
class="css-1aacqdd emotion-6"
|
||||
class="css-kbn7if emotion-6"
|
||||
data-testid="header--tooltip-documentation"
|
||||
href="https://verdaccio.org/docs/en/installation"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
<h6
|
||||
class="MuiTypography-root MuiTypography-subtitle1"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</h6>
|
||||
</a>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
||||
|
|
@ -193,10 +198,10 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
|
||||
>
|
||||
<div
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
|
||||
>
|
||||
<div
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
|
||||
class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
|
||||
>
|
||||
<a
|
||||
class="css-1dk30lc"
|
||||
|
|
@ -207,7 +212,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
/>
|
||||
</a>
|
||||
<div
|
||||
class="css-13zpdre emotion-3"
|
||||
class="css-12prohx emotion-3"
|
||||
>
|
||||
<div
|
||||
class="css-1crzyyo emotion-2"
|
||||
|
|
@ -228,7 +233,7 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
|
||||
>
|
||||
<div
|
||||
class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
|
||||
class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
|
|
@ -262,10 +267,10 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
|
||||
class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
|
||||
class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
|
|
@ -289,35 +294,40 @@ exports[`<Header /> component with logged in state should load the component in
|
|||
/>
|
||||
</button>
|
||||
<a
|
||||
class="css-1aacqdd emotion-6"
|
||||
class="css-kbn7if emotion-6"
|
||||
data-testid="header--tooltip-documentation"
|
||||
href="https://verdaccio.org/docs/en/installation"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
<h6
|
||||
class="MuiTypography-root MuiTypography-subtitle1"
|
||||
>
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
||||
tabindex="0"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
<span
|
||||
class="MuiIconButton-label"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="MuiSvgIcon-root"
|
||||
focusable="false"
|
||||
role="presentation"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<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"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="MuiTouchRipple-root"
|
||||
/>
|
||||
</button>
|
||||
</h6>
|
||||
</a>
|
||||
<button
|
||||
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
|
||||
|
|
|
|||
|
|
@ -1,72 +1,56 @@
|
|||
import styled, { css } from 'react-emotion';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
import Toolbar from '@material-ui/core/Toolbar';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import mq from '../../utils/styles/media';
|
||||
import IconButton from '../../muiComponents/IconButton';
|
||||
import ExternalLink from '../Link';
|
||||
import AppBar from '../../muiComponents/AppBar';
|
||||
import Toolbar from '../../muiComponents/Toolbar';
|
||||
import Link from '../Link';
|
||||
|
||||
export const InnerNavBar = styled(Toolbar)({
|
||||
'&&': {
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '0 15px',
|
||||
},
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
padding: '0 15px',
|
||||
});
|
||||
|
||||
export const Greetings = styled('span')({
|
||||
'&&': {
|
||||
margin: '0 5px 0 0',
|
||||
},
|
||||
margin: '0 5px 0 0',
|
||||
});
|
||||
|
||||
export const RightSide = styled(Toolbar)({
|
||||
'&&': {
|
||||
display: 'flex',
|
||||
padding: 0,
|
||||
},
|
||||
display: 'flex',
|
||||
padding: 0,
|
||||
});
|
||||
|
||||
export const LeftSide = styled(RightSide)({
|
||||
'&&': {
|
||||
flex: 1,
|
||||
},
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
export const MobileNavBar = styled('div')({
|
||||
'&&': {
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
borderBottom: `1px solid ${colors.greyLight}`,
|
||||
padding: '8px',
|
||||
position: 'relative',
|
||||
},
|
||||
alignItems: 'center',
|
||||
display: 'flex',
|
||||
borderBottom: `1px solid ${colors.greyLight}`,
|
||||
padding: '8px',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
export const InnerMobileNavBar = styled('div')({
|
||||
'&&': {
|
||||
borderRadius: '4px',
|
||||
backgroundColor: colors.greyLight,
|
||||
color: colors.white,
|
||||
width: '100%',
|
||||
padding: '0 5px',
|
||||
margin: '0 10px 0 0',
|
||||
},
|
||||
borderRadius: '4px',
|
||||
backgroundColor: colors.greyLight,
|
||||
color: colors.white,
|
||||
width: '100%',
|
||||
padding: '0 5px',
|
||||
margin: '0 10px 0 0',
|
||||
});
|
||||
|
||||
export const IconSearchButton = styled(IconButton)({
|
||||
'&&': {
|
||||
display: 'block',
|
||||
},
|
||||
display: 'block',
|
||||
});
|
||||
|
||||
export const SearchWrapper = styled('div')({
|
||||
'&&': {
|
||||
display: 'none',
|
||||
maxWidth: '393px',
|
||||
width: '100%',
|
||||
},
|
||||
display: 'none',
|
||||
maxWidth: '393px',
|
||||
width: '100%',
|
||||
});
|
||||
|
||||
export const NavBar = styled(AppBar)`
|
||||
|
|
@ -104,8 +88,6 @@ export const NavBar = styled(AppBar)`
|
|||
}
|
||||
`;
|
||||
|
||||
export const StyledExternalLink = styled(ExternalLink)({
|
||||
'&&': {
|
||||
color: 'white',
|
||||
},
|
||||
export const StyledLink = styled(Link)({
|
||||
color: 'white',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import CardActions from '@material-ui/core/CardActions';
|
||||
import CardContent from '@material-ui/core/CardContent';
|
||||
import React, { Fragment } from 'react';
|
||||
|
||||
import { getRegistryURL } from '../../utils/url';
|
||||
import CopyToClipBoard from '../CopyToClipBoard';
|
||||
import Button from '../../muiComponents/Button';
|
||||
import CardContent from '../../muiComponents/CardContent';
|
||||
import { default as Typography } from '../../muiComponents/Heading';
|
||||
import CardActions from '../../muiComponents/CardActions';
|
||||
import Text from '../../muiComponents/Text';
|
||||
|
||||
import { CardStyled as Card, HelpTitle } from './styles';
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import React from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
|
||||
import CopyToClipBoard from '../CopyToClipBoard';
|
||||
import Avatar from '../../muiComponents/Avatar';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
|
||||
// logos of package managers
|
||||
import npmLogo from './img/npm.svg';
|
||||
|
|
|
|||
|
|
@ -1,14 +0,0 @@
|
|||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
|
||||
import Link from './Link';
|
||||
|
||||
describe('<Link /> component', () => {
|
||||
const props = {
|
||||
to: 'https://github.com/verdaccio/ui',
|
||||
};
|
||||
test('should render the component in default state', () => {
|
||||
const wrapper = mount(<Link blank={true} to={props.to} />);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,15 +1,26 @@
|
|||
import React, { ReactNode } from 'react';
|
||||
import React from 'react';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
|
||||
interface Props {
|
||||
children?: ReactNode;
|
||||
import Text, { TextProps } from '../../muiComponents/Text';
|
||||
|
||||
interface Props extends Pick<TextProps, 'variant'> {
|
||||
external?: boolean;
|
||||
className?: string;
|
||||
to: string;
|
||||
blank?: boolean;
|
||||
}
|
||||
|
||||
const Link: React.FC<Props> = ({ children, to = '#', blank = false, ...props }) => (
|
||||
<a href={to} target={blank ? '_blank' : '_self'} {...props}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
/* eslint-disable verdaccio/jsx-spread */
|
||||
const Link: React.FC<Props> = ({ external, to, children, variant, className, ...props }) => {
|
||||
const LinkTextContent = <Text variant={variant}>{children}</Text>;
|
||||
return external ? (
|
||||
<a className={className} href={to} rel="noopener noreferrer" target="_blank" {...props}>
|
||||
{LinkTextContent}
|
||||
</a>
|
||||
) : (
|
||||
<RouterLink className={className} to={to} {...props}>
|
||||
{LinkTextContent}
|
||||
</RouterLink>
|
||||
);
|
||||
};
|
||||
|
||||
export default Link;
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Link /> component should render the component in default state 1`] = `"<a href=\\"https://github.com/verdaccio/ui\\" target=\\"_blank\\"></a>"`;
|
||||
|
|
@ -1,10 +1,5 @@
|
|||
import React, { Component } from 'react';
|
||||
import SnackbarContent from '@material-ui/core/SnackbarContent';
|
||||
import ErrorIcon from '@material-ui/icons/Error';
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import Input from '@material-ui/core/Input';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import FormHelperText from '@material-ui/core/FormHelperText';
|
||||
import { css } from 'emotion';
|
||||
|
||||
import Button from '../../muiComponents/Button';
|
||||
|
|
@ -12,6 +7,11 @@ import Dialog from '../../muiComponents/Dialog';
|
|||
import DialogTitle from '../../muiComponents/DialogTitle';
|
||||
import DialogContent from '../../muiComponents/DialogContent';
|
||||
import DialogActions from '../../muiComponents/DialogActions';
|
||||
import FormControl from '../../muiComponents/FormControl';
|
||||
import FormHelperText from '../../muiComponents/FormHelperText';
|
||||
import Input from '../../muiComponents/Input';
|
||||
import InputLabel from '../../muiComponents/InputLabel';
|
||||
import SnackbarContent from '../../muiComponents/SnackbarContent';
|
||||
|
||||
import * as classes from './styles';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import Box from '@material-ui/core/Box';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import styled from 'react-emotion';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import Box from '../../muiComponents/Box';
|
||||
import Button from '../../muiComponents/Button';
|
||||
import Heading from '../../muiComponents/Heading';
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { spacings } from '../../utils/styles/spacings';
|
||||
|
||||
|
|
@ -19,7 +19,7 @@ const EmptyPackage = styled('img')({
|
|||
margin: '0 auto',
|
||||
});
|
||||
|
||||
const StyledHeading = styled(Typography)({
|
||||
const StyledHeading = styled(Heading)({
|
||||
color: colors.primary,
|
||||
marginBottom: spacings.sm,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import React from 'react';
|
||||
import BugReport from '@material-ui/icons/BugReport';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import HomeIcon from '@material-ui/icons/Home';
|
||||
|
||||
import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
|
||||
|
|
@ -10,6 +9,7 @@ import { formatDate, formatDateDistance } from '../../utils/package';
|
|||
import Tooltip from '../../muiComponents/Tooltip';
|
||||
import { isURL } from '../../utils/url';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import Grid from '../../muiComponents/Grid';
|
||||
|
||||
import {
|
||||
Author,
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import styled from 'react-emotion';
|
||||
import { Link } from 'react-router-dom';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
|
||||
import { breakpoints } from '../../utils/styles/media';
|
||||
import Ico from '../Icon';
|
||||
|
|
@ -12,6 +10,8 @@ import { default as MuiIconButton } from '../../muiComponents/IconButton';
|
|||
import { default as Photo } from '../../muiComponents/Avatar';
|
||||
import List from '../../muiComponents/List';
|
||||
import { default as Typography } from '../../muiComponents/Heading';
|
||||
import Grid from '../../muiComponents/Grid';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
|
||||
export const OverviewItem = styled('span')`
|
||||
&& {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import * as React from 'react';
|
||||
import React, { Fragment, ReactElement } from 'react';
|
||||
|
||||
import Package from '../Package';
|
||||
import Help from '../Help';
|
||||
|
|
@ -13,16 +13,16 @@ interface Props {
|
|||
}
|
||||
|
||||
export const PackageList: React.FC<Props> = props => {
|
||||
const renderPackages: () => React.ReactElement<HTMLElement>[] = () => {
|
||||
const renderPackages: () => ReactElement<HTMLElement>[] = () => {
|
||||
return props.packages.map((pkg, i) => {
|
||||
const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg;
|
||||
// TODO: move format license to API side.
|
||||
const license = formatLicense(pkg.license);
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<Fragment key={i}>
|
||||
{i !== 0 && <Divider />}
|
||||
<Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
|
||||
</React.Fragment>
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import React, { Component } from 'react';
|
||||
import { css } from 'emotion';
|
||||
import Tabs from '@material-ui/core/Tabs';
|
||||
import Tab from '@material-ui/core/Tab';
|
||||
|
||||
import CopyToClipBoard from '../CopyToClipBoard';
|
||||
import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
|
||||
import { NODE_MANAGER } from '../../utils/constants';
|
||||
import { default as Typography } from '../../muiComponents/Heading';
|
||||
import Tabs from '../../muiComponents/Tabs';
|
||||
import Tab from '../../muiComponents/Tab';
|
||||
|
||||
import { CommandContainer } from './styles';
|
||||
import { Props, State } from './types';
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import styled from 'react-emotion';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import ListItemText from '@material-ui/core/ListItemText';
|
||||
|
||||
import Github from '../../icons/GitHub';
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
import Grid from '../../muiComponents/Grid';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
|
|
@ -14,9 +14,7 @@ export const StyledText = styled(Text)({
|
|||
});
|
||||
|
||||
export const GridRepo = styled(Grid)({
|
||||
'&&': {
|
||||
alignItems: 'center',
|
||||
},
|
||||
alignItems: 'center',
|
||||
});
|
||||
|
||||
export const GithubLink = styled('a')({
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
|
|||
import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest';
|
||||
import { css } from 'emotion';
|
||||
import { default as IconSearch } from '@material-ui/icons/Search';
|
||||
import InputAdornment from '@material-ui/core/InputAdornment';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import InputAdornment from '../../muiComponents/InputAdornment';
|
||||
import AutoComplete from '../AutoComplete';
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { callSearch } from '../../utils/calls';
|
||||
|
|
@ -174,6 +174,7 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
|
|||
<InputAdornment
|
||||
className={css`
|
||||
color: ${colors.white};
|
||||
}
|
||||
`}
|
||||
position={'start'}>
|
||||
<IconSearch />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e1rflf270\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root MuiTextField-root react-autosuggest__input MuiFormControl-fullWidth\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\"><div class=\\"MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input MuiInput-input css-hodoyq MuiInputBase-inputAdornedStart\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container css-cfo6a e1rflf271\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;
|
||||
exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e1rflf270\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root MuiTextField-root react-autosuggest__input MuiFormControl-fullWidth\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\"><div class=\\"MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input MuiInput-input css-hodoyq MuiInputBase-inputAdornedStart\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container css-cfo6a e1rflf271\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;
|
||||
|
|
|
|||
|
|
@ -2,4 +2,4 @@
|
|||
|
||||
exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
|
||||
|
||||
exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1vg6q84 e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;
|
||||
exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1vg6q84 e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-o655gb e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-o655gb e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import styled from 'react-emotion';
|
||||
import { default as MuiListItemText } from '@material-ui/core/ListItemText';
|
||||
|
||||
import Text from '../../muiComponents/Text';
|
||||
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
|
|
@ -16,9 +16,7 @@ export const Spacer = styled('div')({
|
|||
});
|
||||
|
||||
export const ListItemText = styled(MuiListItemText)({
|
||||
'&&': {
|
||||
flex: 'none',
|
||||
color: 'black',
|
||||
opacity: 0.6,
|
||||
},
|
||||
flex: 'none',
|
||||
color: 'black',
|
||||
opacity: 0.6,
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
import React from 'react';
|
||||
import Link from '@material-ui/core/Link';
|
||||
import { Link as RouterLink } from 'react-router-dom';
|
||||
|
||||
import { Versions, Time } from '../../../types/packageMeta';
|
||||
import { formatDateDistance } from '../../utils/package';
|
||||
import List from '../../muiComponents/List';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
|
||||
import { Spacer, ListItemText } from './styles';
|
||||
import { Spacer, ListItemText, StyledLink } from './styles';
|
||||
|
||||
export const NOT_AVAILABLE = 'Not available';
|
||||
|
||||
|
|
@ -23,9 +21,9 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
|
|||
.reverse()
|
||||
.map(version => (
|
||||
<ListItem className="version-item" key={version}>
|
||||
<Link component={RouterLink} to={`/-/web/detail/${packageName}/v/${version}`}>
|
||||
<StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
|
||||
<ListItemText>{version}</ListItemText>
|
||||
</Link>
|
||||
</StyledLink>
|
||||
<Spacer />
|
||||
<ListItemText>{time[version] ? `${formatDateDistance(time[version])} ago` : NOT_AVAILABLE}</ListItemText>
|
||||
</ListItem>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import styled from 'react-emotion';
|
||||
import { default as MuiListItemText } from '@material-ui/core/ListItemText';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
|
||||
import Link from '../Link';
|
||||
|
||||
export const StyledText = styled(Text)({
|
||||
fontWeight: fontWeight.bold,
|
||||
|
|
@ -17,9 +18,11 @@ export const Spacer = styled('div')({
|
|||
});
|
||||
|
||||
export const ListItemText = styled(MuiListItemText)({
|
||||
'&&': {
|
||||
flex: 'none',
|
||||
color: 'black',
|
||||
opacity: 0.6,
|
||||
},
|
||||
flex: 'none',
|
||||
color: 'black',
|
||||
opacity: 0.6,
|
||||
});
|
||||
|
||||
export const StyledLink = styled(Link)({
|
||||
textDecoration: 'none',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIAppBar, AppBarProps } from '@material-ui/core/AppBar';
|
||||
|
||||
type AppBarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const AppBar = forwardRef<AppBarRef, AppBarProps>(function AppBar(props, ref) {
|
||||
return <MaterialUIAppBar {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default AppBar;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './AppBar';
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import React from 'react';
|
||||
import { default as MaterialUIBox, BoxProps } from '@material-ui/core/Box';
|
||||
|
||||
const Box: React.FC<BoxProps> = props => <MaterialUIBox {...props} />;
|
||||
|
||||
export default Box;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Box';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUICardActions, CardActionsProps } from '@material-ui/core/CardActions';
|
||||
|
||||
type CardActionsRef = HTMLDivElement;
|
||||
|
||||
const CardActions = forwardRef<CardActionsRef, CardActionsProps>(function CardContentActions(props, ref) {
|
||||
return <MaterialUICardActions {...props} innerRef={ref} />;
|
||||
});
|
||||
|
||||
export default CardActions;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './CardActions';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUICardContent, CardContentProps } from '@material-ui/core/CardContent';
|
||||
|
||||
type CardContentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const CardContent = forwardRef<CardContentRef, CardContentProps>(function CardContent(props, ref) {
|
||||
return <MaterialUICardContent {...props} innerRef={ref} />;
|
||||
});
|
||||
|
||||
export default CardContent;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './CardContent';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIChip, ChipProps } from '@material-ui/core/Chip';
|
||||
|
||||
type ChipRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const Chip = forwardRef<ChipRef, ChipProps>(function Chip(props, ref) {
|
||||
return <MaterialUIChip {...props} innerRef={ref} />;
|
||||
});
|
||||
|
||||
export default Chip;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Chip';
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIDivider, DividerProps } from '@material-ui/core/Divider';
|
||||
|
||||
type DividerRef = keyof HTMLElementTagNameMap;
|
||||
type DividerRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const Divider = forwardRef<DividerRef, DividerProps>(function Divider(props, ref) {
|
||||
return <MaterialUIDivider {...props} innerRef={ref} />;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIFab, FabProps } from '@material-ui/core/Fab';
|
||||
|
||||
type FloatingActionButtonRef = HTMLButtonElement;
|
||||
|
||||
const FloatingActionButton = forwardRef<FloatingActionButtonRef, FabProps>(function FloatingActionButton(props, ref) {
|
||||
return <MaterialUIFab {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default FloatingActionButton;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './FloatingActionButton';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIFormControl, FormControlProps } from '@material-ui/core/FormControl';
|
||||
|
||||
type FormControlRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const FormControl = forwardRef<FormControlRef, FormControlProps>(function FormControl(props, ref) {
|
||||
return <MaterialUIFormControl {...props} innerRef={ref} />;
|
||||
});
|
||||
|
||||
export default FormControl;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './FormControl';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIFormHelperText, FormHelperTextProps } from '@material-ui/core/FormHelperText';
|
||||
|
||||
type FormHelperTextRef = HTMLButtonElement;
|
||||
|
||||
const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>(function FormHelperText(props, ref) {
|
||||
return <MaterialUIFormHelperText {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default FormHelperText;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './FormHelperText';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIGrid, GridProps } from '@material-ui/core/Grid';
|
||||
|
||||
type GridRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const Grid = forwardRef<GridRef, GridProps>(function Grid(props, ref) {
|
||||
return <MaterialUIGrid {...props} innerRef={ref} />;
|
||||
});
|
||||
|
||||
export default Grid;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Grid';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIInput, InputProps } from '@material-ui/core/Input';
|
||||
|
||||
type InputRef = HTMLDivElement;
|
||||
|
||||
const Input = forwardRef<InputRef, InputProps>(function Input(props, ref) {
|
||||
return <MaterialUIInput {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default Input;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Input';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIInputAdornment, InputAdornmentProps } from '@material-ui/core/InputAdornment';
|
||||
|
||||
type InputAdornmentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const InputAdornment = forwardRef<InputAdornmentRef, InputAdornmentProps>(function InputAdornment(props, ref) {
|
||||
return <MaterialUIInputAdornment {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default InputAdornment;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './InputAdornment';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIInputLabel, InputLabelProps } from '@material-ui/core/InputLabel';
|
||||
|
||||
type InputLabelRef = HTMLLabelElement;
|
||||
|
||||
const InputLabel = forwardRef<InputLabelRef, InputLabelProps>(function InputLabel(props, ref) {
|
||||
return <MaterialUIInputLabel {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default InputLabel;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './InputLabel';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIListItemText, ListItemTextProps } from '@material-ui/core/ListItemText';
|
||||
|
||||
type ListItemTextRef = HTMLDivElement;
|
||||
|
||||
const ListItemText = forwardRef<ListItemTextRef, ListItemTextProps>(function ListItemText(props, ref) {
|
||||
return <MaterialUIListItemText {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default ListItemText;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './ListItemText';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIMenu, MenuProps } from '@material-ui/core/Menu';
|
||||
|
||||
type MenuRef = HTMLDivElement;
|
||||
|
||||
const Menu = forwardRef<MenuRef, MenuProps>(function Menu(props, ref) {
|
||||
return <MaterialUIMenu {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default Menu;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Menu';
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem';
|
||||
|
||||
type HTMLElementTagName = keyof HTMLElementTagNameMap;
|
||||
type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
|
||||
|
||||
interface Props extends Omit<MenuItemProps, 'component'> {
|
||||
component?: HTMLElementTagName;
|
||||
}
|
||||
|
||||
const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem({ button, ...props }, ref) {
|
||||
// it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
return <MaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
|
||||
});
|
||||
|
||||
MenuItem.defaultProps = {
|
||||
component: 'li',
|
||||
};
|
||||
|
||||
export default MenuItem;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './MenuItem';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIPaper, PaperProps } from '@material-ui/core/Paper';
|
||||
|
||||
type PaperRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const Paper = forwardRef<PaperRef, PaperProps>(function Paper(props, ref) {
|
||||
return <MaterialUIPaper {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default Paper;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Paper';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUISnackbarContent, SnackbarContentProps } from '@material-ui/core/SnackbarContent';
|
||||
|
||||
type SnackbarContentRef = HTMLDivElement;
|
||||
|
||||
const SnackbarContent = forwardRef<SnackbarContentRef, SnackbarContentProps>(function SnackbarContent(props, ref) {
|
||||
return <MaterialUISnackbarContent {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default SnackbarContent;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './SnackbarContent';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUITab, TabProps } from '@material-ui/core/Tab';
|
||||
|
||||
type TabRef = HTMLButtonElement;
|
||||
|
||||
const Tab = forwardRef<TabRef, TabProps>(function Tab(props, ref) {
|
||||
return <MaterialUITab {...props} innerRef={ref} />;
|
||||
});
|
||||
|
||||
export default Tab;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Tab';
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUITabs, TabsProps } from '@material-ui/core/Tabs';
|
||||
|
||||
type TabsRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
interface Props extends Omit<TabsProps, 'onChange'> {
|
||||
onChange: (event: React.ChangeEvent<{}>, value: number) => void;
|
||||
}
|
||||
|
||||
const Tabs = forwardRef<TabsRef, Props>(function Tabs(props, ref) {
|
||||
return <MaterialUITabs {...props} innerRef={ref} />;
|
||||
});
|
||||
|
||||
export default Tabs;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Tabs';
|
||||
|
|
@ -2,14 +2,14 @@ import React, { forwardRef } from 'react';
|
|||
import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
|
||||
|
||||
type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
|
||||
type TextRef = keyof HTMLElementTagNameMap;
|
||||
type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
interface Props extends Omit<TypographyProps, 'variant'> {
|
||||
export interface TextProps extends Omit<TypographyProps, 'variant'> {
|
||||
variant?: TextType;
|
||||
}
|
||||
|
||||
// The reference is already from type of the Component, so the any below is not a problem
|
||||
const Text = forwardRef<TextRef, Props>(function Text(props, ref) {
|
||||
const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
|
||||
return <MaterialUITypography {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
export { default } from './Text';
|
||||
export { default, TextProps } from './Text';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
import React, { forwardRef } from 'react';
|
||||
import { default as MaterialUIToolbar, ToolbarProps } from '@material-ui/core/Toolbar';
|
||||
|
||||
type ToolbarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
|
||||
|
||||
const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(props, ref) {
|
||||
return <MaterialUIToolbar {...props} ref={ref} />;
|
||||
});
|
||||
|
||||
export default Toolbar;
|
||||
|
|
@ -0,0 +1 @@
|
|||
export { default } from './Toolbar';
|
||||
Loading…
Reference in New Issue
Block a user