forked from sombochea/verdaccio-ui
chore: update emotion dependencies
This commit is contained in:
parent
ea19a2bb47
commit
8c9076d0a2
@ -47,7 +47,7 @@
|
||||
"css-loader": "3.2.0",
|
||||
"date-fns": "2.7.0",
|
||||
"detect-secrets": "1.0.5",
|
||||
"emotion": "9.2.12",
|
||||
"emotion": "10.0.23",
|
||||
"enzyme": "3.10.0",
|
||||
"enzyme-adapter-react-16": "1.15.1",
|
||||
"enzyme-to-json": "3.4.3",
|
||||
@ -90,7 +90,6 @@
|
||||
"react": "16.12.0",
|
||||
"react-autosuggest": "9.4.3",
|
||||
"react-dom": "16.12.0",
|
||||
"react-emotion": "9.2.12",
|
||||
"react-hot-loader": "4.12.17",
|
||||
"react-router-dom": "5.1.2",
|
||||
"request": "2.88.0",
|
||||
@ -216,6 +215,8 @@
|
||||
"logo": "https://opencollective.com/verdaccio/logo.txt"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "10.0.22",
|
||||
"@emotion/styled": "10.0.23",
|
||||
"@material-ui/lab": "4.0.0-alpha.31"
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
|
@ -1,5 +1,4 @@
|
||||
import React, { KeyboardEvent } from 'react';
|
||||
import { css } from 'emotion';
|
||||
import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
|
||||
import match from 'autosuggest-highlight/match';
|
||||
import parse from 'autosuggest-highlight/parse';
|
||||
@ -140,12 +139,7 @@ const AutoComplete = ({
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Autosuggest
|
||||
{...autosuggestProps}
|
||||
inputProps={inputProps}
|
||||
onSuggestionSelected={onClick}
|
||||
renderSuggestionsContainer={renderSuggestionsContainer}
|
||||
/>
|
||||
<Autosuggest {...autosuggestProps} inputProps={inputProps} onSuggestionSelected={onClick} renderSuggestionsContainer={renderSuggestionsContainer} />
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import styled, { css } from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import TextField from '../../muiComponents/TextField';
|
||||
import Paper from '../../muiComponents/Paper';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import IconButton from '../../muiComponents/IconButton';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { ChangeEvent, useState, useEffect } from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { default as MuiTabs } from '../../muiComponents/Tabs';
|
||||
import Tab from '../../muiComponents/Tab';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
import ListItemText from '../../muiComponents/ListItemText';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import ListItem from '../../muiComponents/ListItem';
|
||||
|
@ -1,4 +1,5 @@
|
||||
import styled, { css } from 'react-emotion';
|
||||
import { css } from '@emotion/core';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import mq from '../../utils/styles/media';
|
||||
import Icon from '../Icon/Icon';
|
||||
|
@ -1,4 +1,5 @@
|
||||
import styled, { css } from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import mq from '../../utils/styles/media';
|
||||
@ -48,7 +49,7 @@ export const IconSearchButton = styled(IconButton)({
|
||||
});
|
||||
|
||||
export const SearchWrapper = styled('div')({
|
||||
display: 'none',
|
||||
// display: 'none',
|
||||
maxWidth: '393px',
|
||||
width: '100%',
|
||||
});
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { default as Typography } from '../../muiComponents/Heading';
|
||||
import Card from '../../muiComponents/Card';
|
||||
|
@ -1,6 +1,6 @@
|
||||
import styled, { css } from 'react-emotion';
|
||||
import { css } from '@emotion/core';
|
||||
import styled from '@emotion/styled';
|
||||
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
|
||||
import { StyledOtherComponent } from 'create-emotion-styled';
|
||||
import { DetailedHTMLProps, HTMLAttributes } from 'react';
|
||||
|
||||
const getSize = (size: Breakpoint): string => {
|
||||
@ -18,7 +18,7 @@ const getSize = (size: Breakpoint): string => {
|
||||
}
|
||||
};
|
||||
|
||||
const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }): string => css`
|
||||
const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }) => css`
|
||||
&& {
|
||||
display: inline-block;
|
||||
cursor: ${pointer ? 'pointer' : 'Developers'};
|
||||
@ -32,16 +32,7 @@ export const Svg = styled('svg')`
|
||||
box-sizing: initial;
|
||||
`;
|
||||
|
||||
export const ImgWrapper: StyledOtherComponent<
|
||||
{
|
||||
size?: Breakpoint;
|
||||
pointer: boolean;
|
||||
modifiers?: null | undefined;
|
||||
name?: string | unknown;
|
||||
},
|
||||
DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
|
||||
{}
|
||||
> = styled('span')`
|
||||
export const ImgWrapper = styled('span')`
|
||||
${commonStyle};
|
||||
box-sizing: initial;
|
||||
`;
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { useContext } from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { DetailContext } from '../../pages/Version';
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import CopyToClipBoard from '../CopyToClipBoard';
|
||||
import Avatar from '../../muiComponents/Avatar';
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
|
||||
@ -15,7 +15,6 @@ interface WrapperProps {
|
||||
weight: string;
|
||||
modifiers?: null;
|
||||
}
|
||||
|
||||
const Wrapper = styled('div')`
|
||||
font-weight: ${({ weight }: WrapperProps) => fontWeight[weight]};
|
||||
text-transform: ${({ capitalize }: WrapperProps) => (capitalize ? 'capitalize' : 'none')};
|
||||
|
@ -1,4 +1,5 @@
|
||||
import styled, { css } from 'react-emotion';
|
||||
import { css } from '@emotion/core';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const Wrapper = styled('div')`
|
||||
&& {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import logo from './img/logo.svg';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import React, { useCallback } from 'react';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { default as Typography } from '../../muiComponents/Heading';
|
||||
import List from '../../muiComponents/List';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { breakpoints } from '../../utils/styles/media';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { css } from 'emotion';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import { fontWeight, fontSize } from '../../utils/styles/sizes';
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { css } from 'emotion';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import CopyToClipBoard from '../CopyToClipBoard';
|
||||
import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
|
||||
@ -47,13 +47,7 @@ const RegistryInfoContent: React.FC<Props> = props => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
data-testid={'tabs-el'}
|
||||
indicatorColor="primary"
|
||||
onChange={handleChange}
|
||||
textColor="primary"
|
||||
value={tabPosition}
|
||||
variant="fullWidth">
|
||||
<Tabs data-testid={'tabs-el'} indicatorColor="primary" onChange={handleChange} textColor="primary" value={tabPosition} variant="fullWidth">
|
||||
<Tab data-testid={'npm-tab'} label={NODE_MANAGER.npm} />
|
||||
<Tab data-testid={'pnpm-tab'} label={NODE_MANAGER.pnpm} />
|
||||
<Tab data-testid={'yarn-tab'} label={NODE_MANAGER.yarn} />
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const CommandContainer = styled('div')({
|
||||
'&&': {
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { fontSize } from '../../utils/styles/sizes';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Github from '../../icons/GitHub';
|
||||
import colors from '../../utils/styles/colors';
|
||||
|
@ -1,60 +1,68 @@
|
||||
import React, { KeyboardEvent, Component, ReactElement } from 'react';
|
||||
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 debounce from 'lodash/debounce';
|
||||
import React from 'react';
|
||||
import debounce from 'lodash/debounce';
|
||||
|
||||
import InputAdornment from '../../muiComponents/InputAdornment';
|
||||
import AutoComplete from '../../muiComponents/AutoComplete';
|
||||
import colors from '../../utils/styles/colors';
|
||||
import { callSearch } from '../../utils/calls';
|
||||
|
||||
export interface State {
|
||||
search: string;
|
||||
suggestions: unknown[];
|
||||
loading: boolean;
|
||||
loaded: boolean;
|
||||
error: boolean;
|
||||
}
|
||||
|
||||
export type cancelAllSearchRequests = () => void;
|
||||
export type handlePackagesClearRequested = () => void;
|
||||
export type handleSearch = (event: React.FormEvent<HTMLInputElement>, { newValue, method }: ChangeEvent) => void;
|
||||
export type handleClickSearch = (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: object[]; method: string }) => void;
|
||||
export type handleFetchPackages = ({ value: string }) => Promise<void>;
|
||||
export type onBlur = (event: React.FormEvent<HTMLInputElement>) => void;
|
||||
|
||||
const CONSTANTS = {
|
||||
API_DELAY: 300,
|
||||
PLACEHOLDER_TEXT: 'Search Packages',
|
||||
ABORT_ERROR: 'AbortError',
|
||||
};
|
||||
|
||||
export class Search extends Component<RouteComponentProps<{}>, State> {
|
||||
constructor(props: RouteComponentProps<{}>) {
|
||||
super(props);
|
||||
this.state = {
|
||||
search: '',
|
||||
suggestions: [],
|
||||
// loading: A boolean value to indicate that request is in pending state.
|
||||
loading: false,
|
||||
// loaded: A boolean value to indicate that result has been loaded.
|
||||
loaded: false,
|
||||
// error: A boolean value to indicate API error.
|
||||
error: false,
|
||||
};
|
||||
this.requestList = [];
|
||||
}
|
||||
/* eslint-disable @typescript-eslint/explicit-function-return-type */
|
||||
const Search: React.FC = () => {
|
||||
const [suggestions, setSuggestions] = React.useState([]);
|
||||
const [isLoading, setIsLoading] = React.useState();
|
||||
const [hasBeenLoaded, setHasBeenLoaded] = React.useState();
|
||||
const [error, setError] = React.useState();
|
||||
|
||||
public render(): ReactElement<HTMLElement> {
|
||||
const { suggestions, search, loaded, loading, error } = this.state;
|
||||
const handleFetchPackages = debounce(async (value: string) => {
|
||||
try {
|
||||
const controller = new window.AbortController();
|
||||
const signal = controller.signal;
|
||||
// Keep track of search requests.
|
||||
// this.requestList.push(controller);
|
||||
const suggestions = await callSearch(value, signal);
|
||||
setSuggestions(
|
||||
// @ts-ignore
|
||||
suggestions.map(suggestion => ({
|
||||
...suggestion,
|
||||
id: suggestion._id,
|
||||
label: suggestion.name,
|
||||
}))
|
||||
);
|
||||
setHasBeenLoaded(true);
|
||||
} catch (error) {
|
||||
/**
|
||||
* AbortError is not the API error.
|
||||
* It means browser has cancelled the API request.
|
||||
*/
|
||||
if (error.name === CONSTANTS.ABORT_ERROR) {
|
||||
setError(false);
|
||||
setHasBeenLoaded(false);
|
||||
} else {
|
||||
setError(true);
|
||||
setHasBeenLoaded(false);
|
||||
}
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, CONSTANTS.API_DELAY);
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// stops event bubbling
|
||||
event.stopPropagation();
|
||||
setIsLoading(true);
|
||||
setHasBeenLoaded(false);
|
||||
setError(undefined);
|
||||
handleFetchPackages(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<AutoComplete
|
||||
// color={colors.white}
|
||||
// onBlur={this.handleOnBlur}
|
||||
onChange={this.handleSearch}
|
||||
onChange={handleChange}
|
||||
// onCleanSuggestions={this.handlePackagesClearRequested}
|
||||
// onClick={this.handleClickSearch}
|
||||
// onSuggestionsFetch={debounce(this.handleFetchPackages, CONSTANTS.API_DELAY)}
|
||||
@ -67,134 +75,6 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
|
||||
// value={search}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancel all the requests which are in pending state.
|
||||
*/
|
||||
private cancelAllSearchRequests: cancelAllSearchRequests = () => {
|
||||
this.requestList.forEach(request => request.abort());
|
||||
this.requestList = [];
|
||||
};
|
||||
|
||||
/**
|
||||
* Cancel all the request from list and make request list empty.
|
||||
*/
|
||||
private handlePackagesClearRequested: handlePackagesClearRequested = () => {
|
||||
this.setState({
|
||||
suggestions: [],
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* onChange method for the input element.
|
||||
*/
|
||||
private handleSearch: handleSearch = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
// stops event bubbling
|
||||
event.stopPropagation();
|
||||
if (method === 'type') {
|
||||
const value = newValue.trim();
|
||||
this.setState(
|
||||
{
|
||||
search: value,
|
||||
loading: true,
|
||||
loaded: false,
|
||||
error: false,
|
||||
},
|
||||
() => {
|
||||
/**
|
||||
* A use case where User keeps adding and removing value in input field,
|
||||
* so we cancel all the existing requests when input is empty.
|
||||
*/
|
||||
if (value.length === 0) {
|
||||
this.cancelAllSearchRequests();
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* When an user select any package by clicking or pressing return key.
|
||||
*/
|
||||
private handleClickSearch = (
|
||||
event: React.FormEvent<HTMLInputElement>,
|
||||
{ suggestionValue, method }: SuggestionSelectedEventData<unknown>
|
||||
): void | undefined => {
|
||||
const { history } = this.props;
|
||||
// stops event bubbling
|
||||
event.stopPropagation();
|
||||
switch (method) {
|
||||
case 'click':
|
||||
case 'enter':
|
||||
this.setState({ search: '' });
|
||||
history.push(`/-/web/detail/${suggestionValue}`);
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Fetch packages from API.
|
||||
* For AbortController see: https://developer.mozilla.org/en-US/docs/Web/API/AbortController
|
||||
*/
|
||||
private handleFetchPackages: handleFetchPackages = async ({ value }) => {
|
||||
try {
|
||||
const controller = new window.AbortController();
|
||||
const signal = controller.signal;
|
||||
// Keep track of search requests.
|
||||
this.requestList.push(controller);
|
||||
const suggestions = await callSearch(value, signal);
|
||||
// @ts-ignore
|
||||
this.setState({
|
||||
suggestions,
|
||||
loaded: true,
|
||||
});
|
||||
} catch (error) {
|
||||
/**
|
||||
* AbortError is not the API error.
|
||||
* It means browser has cancelled the API request.
|
||||
*/
|
||||
if (error.name === CONSTANTS.ABORT_ERROR) {
|
||||
this.setState({ error: false, loaded: false });
|
||||
} else {
|
||||
this.setState({ error: true, loaded: false });
|
||||
}
|
||||
} finally {
|
||||
this.setState({ loading: false });
|
||||
}
|
||||
};
|
||||
|
||||
private requestList: AbortController[];
|
||||
|
||||
public getAdorment(): JSX.Element {
|
||||
return (
|
||||
<InputAdornment
|
||||
className={css`
|
||||
color: ${colors.white};
|
||||
}
|
||||
`}
|
||||
position={'start'}>
|
||||
<IconSearch />
|
||||
</InputAdornment>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* As user focuses out from input, we cancel all the request from requestList
|
||||
* and set the API state parameters to default boolean values.
|
||||
*/
|
||||
private handleOnBlur: onBlur = event => {
|
||||
// stops event bubbling
|
||||
event.stopPropagation();
|
||||
this.setState(
|
||||
{
|
||||
loaded: false,
|
||||
loading: false,
|
||||
error: false,
|
||||
},
|
||||
() => this.cancelAllSearchRequests()
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default withRouter(Search);
|
||||
export default Search;
|
||||
|
@ -1,4 +1,5 @@
|
||||
import styled, { css } from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
import { css } from '@emotion/core';
|
||||
|
||||
import colors from '../../utils/styles/colors';
|
||||
import CircularProgress from '../../muiComponents/CircularProgress';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
export const Wrapper = styled('span')({
|
||||
'&&': {
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import Text from '../../muiComponents/Text';
|
||||
import { default as MuiListItemText } from '../../muiComponents/ListItemText';
|
||||
|
@ -1,4 +1,4 @@
|
||||
import styled from 'react-emotion';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { fontWeight } from '../../utils/styles/sizes';
|
||||
import Text from '../../muiComponents/Text';
|
||||
|
@ -1,93 +1,93 @@
|
||||
import React, { FC, ChangeEvent, useState } from 'react';
|
||||
import React, { forwardRef, ChangeEvent, useState } from 'react';
|
||||
import { default as MuiAutoComplete, AutocompleteProps } from '@material-ui/lab/Autocomplete';
|
||||
import styled from 'react-emotion';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import styled from '@emotion/styled';
|
||||
import Search from '@material-ui/icons/Search';
|
||||
|
||||
import CircularProgress from '../CircularProgress';
|
||||
import TextField from '../TextField';
|
||||
|
||||
import AutoCompleteTextField from './AutoCompleteTextField';
|
||||
|
||||
const StyledAutoComplete = styled(MuiAutoComplete)({
|
||||
width: '100%',
|
||||
color: 'white',
|
||||
});
|
||||
|
||||
interface Props extends Pick<AutocompleteProps, 'options'> {
|
||||
const StyledSearch = styled(Search)({
|
||||
color: 'white',
|
||||
marginRight: 10,
|
||||
});
|
||||
|
||||
const StyledTextField = styled(TextField)({
|
||||
'& .MuiInputBase-root': {
|
||||
color: 'white',
|
||||
},
|
||||
'& .MuiInput-underline': {
|
||||
':before': {
|
||||
content: "''",
|
||||
border: 'none',
|
||||
},
|
||||
':after': {
|
||||
borderColor: 'white',
|
||||
},
|
||||
':hover:before': {
|
||||
content: 'none',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
interface Props {
|
||||
placeholder?: string;
|
||||
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
||||
options: Array<Option>;
|
||||
}
|
||||
|
||||
// function sleep(delay = 0) {
|
||||
// return new Promise(resolve => {
|
||||
// setTimeout(resolve, delay);
|
||||
// });
|
||||
// }
|
||||
interface Option {
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
type AutoCompleteRef = HTMLDivElement;
|
||||
|
||||
/* eslint-disable react/jsx-no-bind */
|
||||
const AutoComplete: FC<Props> = ({ placeholder, options = [], onChange }) => {
|
||||
|
||||
const AutoComplete = forwardRef<AutoCompleteRef, Props>(function AutoComplete({ placeholder, options = [], onChange }, ref) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const isLoading = open && options.length === 0;
|
||||
|
||||
console.log('options', options);
|
||||
|
||||
// useEffect(() => {
|
||||
// let active = true;
|
||||
|
||||
// if (!loading) {
|
||||
// return undefined;
|
||||
// }
|
||||
|
||||
// (async () => {
|
||||
// const response = await fetch('https://country.register.gov.uk/records.json?page-size=5000');
|
||||
// await sleep(1e3); // For demo purposes.
|
||||
// const countries = await response.json();
|
||||
|
||||
// if (active) {
|
||||
// setOptions(Object.keys(countries).map(key => countries[key].item[0]));
|
||||
// }
|
||||
// })();
|
||||
|
||||
// return () => {
|
||||
// active = false;
|
||||
// };
|
||||
// }, [loading]);
|
||||
|
||||
// useEffect(() => {
|
||||
// if (!open) {
|
||||
// setOptions([]);
|
||||
// }
|
||||
// }, [open]);
|
||||
|
||||
return (
|
||||
<StyledAutoComplete
|
||||
autoHighlight={true}
|
||||
// open={open}
|
||||
// onOpen={() => {
|
||||
// setOpen(true);
|
||||
// }}
|
||||
// onClose={() => {
|
||||
// setOpen(false);
|
||||
// }}
|
||||
// getOptionLabel={option => option.name}
|
||||
freeSolo={true}
|
||||
options={options}
|
||||
loading={isLoading}
|
||||
innerRef={ref}
|
||||
open={open}
|
||||
onOpen={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
onClose={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
getOptionLabel={option => option.label}
|
||||
renderInput={params => (
|
||||
<TextField
|
||||
<StyledTextField
|
||||
{...params}
|
||||
onChange={onChange}
|
||||
label={placeholder}
|
||||
fullWidth={true}
|
||||
variant="standard"
|
||||
placeholder={placeholder}
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
endAdornment: (
|
||||
<>
|
||||
{isLoading ? <CircularProgress color="inherit" size={20} /> : null}
|
||||
{params.InputProps.endAdornment}
|
||||
</>
|
||||
),
|
||||
type: 'search',
|
||||
startAdornment: <StyledSearch />,
|
||||
endAdornment: isLoading ? <CircularProgress color="inherit" size={20} /> : null,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default AutoComplete;
|
||||
|
35
src/muiComponents/AutoComplete/AutoCompleteTextField.tsx
Normal file
35
src/muiComponents/AutoComplete/AutoCompleteTextField.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import React from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import Search from '@material-ui/icons/Search';
|
||||
|
||||
import TextField, { TextFieldProps } from '../TextField';
|
||||
|
||||
const StyledTextField = styled(TextField)({
|
||||
'& .MuiInputBase-root': {
|
||||
color: 'white',
|
||||
},
|
||||
'& .MuiInput-underline': {
|
||||
':before': {
|
||||
content: "''",
|
||||
border: 'none',
|
||||
},
|
||||
':after': {
|
||||
borderColor: 'white',
|
||||
},
|
||||
':hover:before': {
|
||||
content: 'none',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const StyledSearch = styled(Search)({
|
||||
color: 'white',
|
||||
marginRight: 10,
|
||||
});
|
||||
|
||||
const AutoCompleteTextField: React.FC<TextFieldProps> = props => {
|
||||
// @ts-ignore: Types of property 'ref' are incompatible.
|
||||
return <StyledTextField {...props} InputProps={{ startAdornment: <StyledSearch /> }} />;
|
||||
};
|
||||
|
||||
export default AutoCompleteTextField;
|
@ -17,4 +17,5 @@ const TextField = forwardRef<TextFieldRef, TextFieldProps>(function TextField({
|
||||
);
|
||||
});
|
||||
|
||||
export { TextFieldProps };
|
||||
export default TextField;
|
||||
|
@ -1 +1 @@
|
||||
export { default } from './TextField';
|
||||
export { default, TextFieldProps } from './TextField';
|
||||
|
212
yarn.lock
212
yarn.lock
@ -1086,45 +1086,54 @@
|
||||
dependencies:
|
||||
find-up "^4.0.0"
|
||||
|
||||
"@emotion/babel-utils@^0.6.4":
|
||||
version "0.6.10"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fbabel-utils/-/babel-utils-0.6.10.tgz#83dbf3dfa933fae9fc566e54fbb45f14674c6ccc"
|
||||
integrity sha512-/fnkM/LTEp3jKe++T0KyTszVGWNKPNOUJfjNKLO17BzQ6QPxgbg3whayom1Qr2oLFH3V92tDymU+dT5q676uow==
|
||||
"@emotion/cache@^10.0.14", "@emotion/cache@^10.0.17":
|
||||
version "10.0.19"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.19.tgz#d258d94d9c707dcadaf1558def968b86bb87ad71"
|
||||
integrity sha512-BoiLlk4vEsGBg2dAqGSJu0vJl/PgVtCYLBFJaEO8RmQzPugXewQCXZJNXTDFaRlfCs0W+quesayav4fvaif5WQ==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.6.6"
|
||||
"@emotion/memoize" "^0.6.6"
|
||||
"@emotion/serialize" "^0.9.1"
|
||||
convert-source-map "^1.5.1"
|
||||
find-root "^1.1.0"
|
||||
source-map "^0.7.2"
|
||||
"@emotion/sheet" "0.9.3"
|
||||
"@emotion/stylis" "0.8.4"
|
||||
"@emotion/utils" "0.11.2"
|
||||
"@emotion/weak-memoize" "0.2.4"
|
||||
|
||||
"@emotion/core@10.0.22":
|
||||
version "10.0.22"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.22.tgz#2ac7bcf9b99a1979ab5b0a876fbf37ab0688b177"
|
||||
integrity sha512-7eoP6KQVUyOjAkE6y4fdlxbZRA4ILs7dqkkm6oZUJmihtHv0UBq98VgPirq9T8F9K2gKu0J/au/TpKryKMinaA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
"@emotion/cache" "^10.0.17"
|
||||
"@emotion/css" "^10.0.22"
|
||||
"@emotion/serialize" "^0.11.12"
|
||||
"@emotion/sheet" "0.9.3"
|
||||
"@emotion/utils" "0.11.2"
|
||||
|
||||
"@emotion/css@^10.0.22":
|
||||
version "10.0.22"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.22.tgz#37b1abb6826759fe8ac0af0ac0034d27de6d1793"
|
||||
integrity sha512-8phfa5mC/OadBTmGpMpwykIVH0gFCbUoO684LUkyixPq4F1Wwri7fK5Xlm8lURNBrd2TuvTbPUGxFsGxF9UacA==
|
||||
dependencies:
|
||||
"@emotion/serialize" "^0.11.12"
|
||||
"@emotion/utils" "0.11.2"
|
||||
babel-plugin-emotion "^10.0.22"
|
||||
|
||||
"@emotion/hash@0.7.3", "@emotion/hash@^0.7.1":
|
||||
version "0.7.3"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.7.3.tgz#a166882c81c0c6040975dd30df24fae8549bd96f"
|
||||
integrity sha512-14ZVlsB9akwvydAdaEnVnvqu6J2P6ySv39hYyl/aoB6w/V+bXX0tay8cF6paqbgZsN2n5Xh15uF4pE+GvE+itw==
|
||||
|
||||
"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
|
||||
version "0.6.6"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fhash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
|
||||
integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
|
||||
|
||||
"@emotion/is-prop-valid@^0.6.1":
|
||||
version "0.6.8"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fis-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85"
|
||||
integrity sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==
|
||||
"@emotion/is-prop-valid@0.8.5":
|
||||
version "0.8.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.5.tgz#2dda0791f0eafa12b7a0a5b39858405cc7bde983"
|
||||
integrity sha512-6ZODuZSFofbxSbcxwsFz+6ioPjb0ISJRRPLZ+WIbjcU2IMU0Io+RGQjjaTgOvNQl007KICBm7zXQaYQEC1r6Bg==
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.6.6"
|
||||
"@emotion/memoize" "0.7.3"
|
||||
|
||||
"@emotion/memoize@0.7.3":
|
||||
version "0.7.3"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fmemoize/-/memoize-0.7.3.tgz#5b6b1c11d6a6dddf1f2fc996f74cf3b219644d78"
|
||||
integrity sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow==
|
||||
|
||||
"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
|
||||
version "0.6.6"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fmemoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
|
||||
integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
|
||||
|
||||
"@emotion/serialize@^0.11.11":
|
||||
version "0.11.13"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fserialize/-/serialize-0.11.13.tgz#49b93e8e6f7dba70bbf0ecd697bb4e03f45d8cde"
|
||||
@ -1136,40 +1145,59 @@
|
||||
"@emotion/utils" "0.11.2"
|
||||
csstype "^2.5.7"
|
||||
|
||||
"@emotion/serialize@^0.9.1":
|
||||
version "0.9.1"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fserialize/-/serialize-0.9.1.tgz#a494982a6920730dba6303eb018220a2b629c145"
|
||||
integrity sha512-zTuAFtyPvCctHBEL8KZ5lJuwBanGSutFEncqLn/m9T1a6a93smBStK+bZzcNPgj4QS8Rkw9VTwJGhRIUVO8zsQ==
|
||||
"@emotion/serialize@^0.11.12", "@emotion/serialize@^0.11.14", "@emotion/serialize@^0.11.8":
|
||||
version "0.11.14"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.14.tgz#56a6d8d04d837cc5b0126788b2134c51353c6488"
|
||||
integrity sha512-6hTsySIuQTbDbv00AnUO6O6Xafdwo5GswRlMZ5hHqiFx+4pZ7uGWXUQFW46Kc2taGhP89uXMXn/lWQkdyTosPA==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.6.6"
|
||||
"@emotion/memoize" "^0.6.6"
|
||||
"@emotion/unitless" "^0.6.7"
|
||||
"@emotion/utils" "^0.8.2"
|
||||
"@emotion/hash" "0.7.3"
|
||||
"@emotion/memoize" "0.7.3"
|
||||
"@emotion/unitless" "0.7.4"
|
||||
"@emotion/utils" "0.11.2"
|
||||
csstype "^2.5.7"
|
||||
|
||||
"@emotion/stylis@^0.7.0":
|
||||
version "0.7.1"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2fstylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
|
||||
integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
|
||||
"@emotion/sheet@0.9.3":
|
||||
version "0.9.3"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
|
||||
integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
|
||||
|
||||
"@emotion/styled-base@^10.0.23":
|
||||
version "10.0.24"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.24.tgz#9497efd8902dfeddee89d24b0eeb26b0665bfe8b"
|
||||
integrity sha512-AnBImerf0h4dGAJVo0p0VE8KoAns71F28ErGFK474zbNAHX6yqSWQUasb+1jvg/VPwZjCp19+tAr6oOB0pwmLQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
"@emotion/is-prop-valid" "0.8.5"
|
||||
"@emotion/serialize" "^0.11.14"
|
||||
"@emotion/utils" "0.11.2"
|
||||
|
||||
"@emotion/styled@10.0.23":
|
||||
version "10.0.23"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.23.tgz#2f8279bd59b99d82deade76d1046249ddfab7c1b"
|
||||
integrity sha512-gNr04eqBQ2iYUx8wFLZDfm3N8/QUOODu/ReDXa693uyQGy2OqA+IhPJk+kA7id8aOfwAsMuvZ0pJImEXXKtaVQ==
|
||||
dependencies:
|
||||
"@emotion/styled-base" "^10.0.23"
|
||||
babel-plugin-emotion "^10.0.23"
|
||||
|
||||
"@emotion/stylis@0.8.4":
|
||||
version "0.8.4"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
|
||||
integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
|
||||
|
||||
"@emotion/unitless@0.7.4":
|
||||
version "0.7.4"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2funitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
|
||||
integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
|
||||
|
||||
"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
|
||||
version "0.6.7"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2funitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
|
||||
integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
|
||||
|
||||
"@emotion/utils@0.11.2":
|
||||
version "0.11.2"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2futils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183"
|
||||
integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==
|
||||
|
||||
"@emotion/utils@^0.8.2":
|
||||
version "0.8.2"
|
||||
resolved "https://registry.verdaccio.org/@emotion%2futils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
|
||||
integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
|
||||
"@emotion/weak-memoize@0.2.4":
|
||||
version "0.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.4.tgz#622a72bebd1e3f48d921563b4b60a762295a81fc"
|
||||
integrity sha512-6PYY5DVdAY1ifaQW6XYTnOMihmBVT27elqSjEoodchsGjzYlEsTQMcEhSud99kVawatyTZRTiVkJ/c6lwbQ7nA==
|
||||
|
||||
"@hapi/address@2.x.x":
|
||||
version "2.1.2"
|
||||
@ -2827,23 +2855,21 @@ babel-plugin-emotion@10.0.21:
|
||||
find-root "^1.1.0"
|
||||
source-map "^0.5.7"
|
||||
|
||||
babel-plugin-emotion@^9.2.11:
|
||||
version "9.2.11"
|
||||
resolved "https://registry.verdaccio.org/babel-plugin-emotion/-/babel-plugin-emotion-9.2.11.tgz#319c005a9ee1d15bb447f59fe504c35fd5807728"
|
||||
integrity sha512-dgCImifnOPPSeXod2znAmgc64NhaaOjGEHROR/M+lmStb3841yK1sgaDYAYMnlvWNz8GnpwIPN0VmNpbWYZ+VQ==
|
||||
babel-plugin-emotion@^10.0.22, babel-plugin-emotion@^10.0.23:
|
||||
version "10.0.23"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.23.tgz#040d40bf61dcab6d31dd6043d10e180240b8515b"
|
||||
integrity sha512-1JiCyXU0t5S2xCbItejCduLGGcKmF3POT0Ujbexog2MI4IlRcIn/kWjkYwCUZlxpON0O5FC635yPl/3slr7cKQ==
|
||||
dependencies:
|
||||
"@babel/helper-module-imports" "^7.0.0"
|
||||
"@emotion/babel-utils" "^0.6.4"
|
||||
"@emotion/hash" "^0.6.2"
|
||||
"@emotion/memoize" "^0.6.1"
|
||||
"@emotion/stylis" "^0.7.0"
|
||||
"@emotion/hash" "0.7.3"
|
||||
"@emotion/memoize" "0.7.3"
|
||||
"@emotion/serialize" "^0.11.14"
|
||||
babel-plugin-macros "^2.0.0"
|
||||
babel-plugin-syntax-jsx "^6.18.0"
|
||||
convert-source-map "^1.5.0"
|
||||
escape-string-regexp "^1.0.5"
|
||||
find-root "^1.1.0"
|
||||
mkdirp "^0.5.1"
|
||||
source-map "^0.5.7"
|
||||
touch "^2.0.1"
|
||||
|
||||
babel-plugin-istanbul@^5.1.0:
|
||||
version "5.2.0"
|
||||
@ -4099,7 +4125,7 @@ convert-css-length@^2.0.1:
|
||||
resolved "https://registry.verdaccio.org/convert-css-length/-/convert-css-length-2.0.1.tgz#90a76bde5bfd24d72881a5b45d02249b2c1d257c"
|
||||
integrity sha512-iGpbcvhLPRKUbBc0Quxx7w/bV14AC3ItuBEGMahA5WTYqB8lq9jH0kTXFheCBASsYnqeMFZhiTruNxr1N59Axg==
|
||||
|
||||
convert-source-map@1.7.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
|
||||
convert-source-map@1.7.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0, convert-source-map@^1.5.0:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.verdaccio.org/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
|
||||
integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
|
||||
@ -4200,25 +4226,15 @@ create-ecdh@^4.0.0:
|
||||
bn.js "^4.1.0"
|
||||
elliptic "^6.0.0"
|
||||
|
||||
create-emotion-styled@^9.2.8:
|
||||
version "9.2.8"
|
||||
resolved "https://registry.verdaccio.org/create-emotion-styled/-/create-emotion-styled-9.2.8.tgz#c0050e768ba439609bec108600467adf2de67cc3"
|
||||
integrity sha512-2LrNM5MREWzI5hZK+LyiBHglwE18WE3AEbBQgpHQ1+zmyLSm/dJsUZBeFAwuIMb+TjNZP0KsMZlV776ufOtFdg==
|
||||
create-emotion@^10.0.14:
|
||||
version "10.0.14"
|
||||
resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.14.tgz#4c140aaef6a9588ed47c926f9c4679e4719be43e"
|
||||
integrity sha512-5G4naKMxokOur+94eDz7iPKBfwzy4wa/+0isnPhxXyosIQHBq7yvBy4jjdZw/nnRm7G3PM7P9Ug8mUmtoqcaHg==
|
||||
dependencies:
|
||||
"@emotion/is-prop-valid" "^0.6.1"
|
||||
|
||||
create-emotion@^9.2.12:
|
||||
version "9.2.12"
|
||||
resolved "https://registry.verdaccio.org/create-emotion/-/create-emotion-9.2.12.tgz#0fc8e7f92c4f8bb924b0fef6781f66b1d07cb26f"
|
||||
integrity sha512-P57uOF9NL2y98Xrbl2OuiDQUZ30GVmASsv5fbsjF4Hlraip2kyAvMm+2PoYUvFFw03Fhgtxk3RqZSm2/qHL9hA==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.6.2"
|
||||
"@emotion/memoize" "^0.6.1"
|
||||
"@emotion/stylis" "^0.7.0"
|
||||
"@emotion/unitless" "^0.6.2"
|
||||
csstype "^2.5.2"
|
||||
stylis "^3.5.0"
|
||||
stylis-rule-sheet "^0.0.10"
|
||||
"@emotion/cache" "^10.0.14"
|
||||
"@emotion/serialize" "^0.11.8"
|
||||
"@emotion/sheet" "0.9.3"
|
||||
"@emotion/utils" "0.11.2"
|
||||
|
||||
create-hash@^1.1.0, create-hash@^1.1.2:
|
||||
version "1.2.0"
|
||||
@ -5125,13 +5141,13 @@ emojis-list@^2.0.0:
|
||||
resolved "https://registry.verdaccio.org/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
|
||||
integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
|
||||
|
||||
emotion@9.2.12:
|
||||
version "9.2.12"
|
||||
resolved "https://registry.verdaccio.org/emotion/-/emotion-9.2.12.tgz#53925aaa005614e65c6e43db8243c843574d1ea9"
|
||||
integrity sha512-hcx7jppaI8VoXxIWEhxpDW7I+B4kq9RNzQLmsrF6LY8BGKqe2N+gFAQr0EfuFucFlPs2A9HM4+xNj4NeqEWIOQ==
|
||||
emotion@10.0.23:
|
||||
version "10.0.23"
|
||||
resolved "https://registry.yarnpkg.com/emotion/-/emotion-10.0.23.tgz#b1722ca65f4d9955f0917cfcb7635bc34b52805c"
|
||||
integrity sha512-H/x+5rJUnSvI0rdYsAFyDfuQwE0poZgTMj5TQsKirLzyHVWqs6CiUponsdE86sisXw0vS60j91HAbidJJeDt1g==
|
||||
dependencies:
|
||||
babel-plugin-emotion "^9.2.11"
|
||||
create-emotion "^9.2.12"
|
||||
babel-plugin-emotion "^10.0.23"
|
||||
create-emotion "^10.0.14"
|
||||
|
||||
encodeurl@~1.0.2:
|
||||
version "1.0.2"
|
||||
@ -9737,13 +9753,6 @@ nopt@^4.0.1, nopt@~4.0.1:
|
||||
abbrev "1"
|
||||
osenv "^0.1.4"
|
||||
|
||||
nopt@~1.0.10:
|
||||
version "1.0.10"
|
||||
resolved "https://registry.verdaccio.org/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
|
||||
integrity sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
|
||||
dependencies:
|
||||
abbrev "1"
|
||||
|
||||
normalize-package-data@^2.3.0, normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.3.5, normalize-package-data@^2.5.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.verdaccio.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
|
||||
@ -11332,14 +11341,6 @@ react-dom@16.12.0:
|
||||
prop-types "^15.6.2"
|
||||
scheduler "^0.18.0"
|
||||
|
||||
react-emotion@9.2.12:
|
||||
version "9.2.12"
|
||||
resolved "https://registry.verdaccio.org/react-emotion/-/react-emotion-9.2.12.tgz#74d1494f89e22d0b9442e92a33ca052461955c83"
|
||||
integrity sha512-qt7XbxnEKX5sZ73rERJ92JMbEOoyOwG3BuCRFRkXrsJhEe+rFBRTljRw7yOLHZUCQC4GBObZhjXIduQ8S0ZpYw==
|
||||
dependencies:
|
||||
babel-plugin-emotion "^9.2.11"
|
||||
create-emotion-styled "^9.2.8"
|
||||
|
||||
react-hot-loader@4.12.17:
|
||||
version "4.12.17"
|
||||
resolved "https://registry.verdaccio.org/react-hot-loader/-/react-hot-loader-4.12.17.tgz#e48815848865342edd829861634637b8c0d22bed"
|
||||
@ -12494,7 +12495,7 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7:
|
||||
resolved "https://registry.verdaccio.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
|
||||
integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
|
||||
|
||||
source-map@^0.7.2, source-map@^0.7.3:
|
||||
source-map@^0.7.3:
|
||||
version "0.7.3"
|
||||
resolved "https://registry.verdaccio.org/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
|
||||
integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
|
||||
@ -12994,16 +12995,6 @@ stylelint@11.1.1:
|
||||
table "^5.2.3"
|
||||
v8-compile-cache "^2.1.0"
|
||||
|
||||
stylis-rule-sheet@^0.0.10:
|
||||
version "0.0.10"
|
||||
resolved "https://registry.verdaccio.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
|
||||
integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
|
||||
|
||||
stylis@^3.5.0:
|
||||
version "3.5.4"
|
||||
resolved "https://registry.verdaccio.org/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
|
||||
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
|
||||
|
||||
sugarss@^2.0.0:
|
||||
version "2.0.0"
|
||||
resolved "https://registry.verdaccio.org/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d"
|
||||
@ -13332,13 +13323,6 @@ toposort@^1.0.0:
|
||||
resolved "https://registry.verdaccio.org/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
|
||||
integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
|
||||
|
||||
touch@^2.0.1:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.verdaccio.org/touch/-/touch-2.0.2.tgz#ca0b2a3ae3211246a61b16ba9e6cbf1596287164"
|
||||
integrity sha512-qjNtvsFXTRq7IuMLweVgFxmEuQ6gLbRs2jQxL80TtZ31dEKWYIxRXquij6w6VimyDek5hD3PytljHmEtAs2u0A==
|
||||
dependencies:
|
||||
nopt "~1.0.10"
|
||||
|
||||
tough-cookie@^2.3.3, tough-cookie@^2.3.4:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.verdaccio.org/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
|
||||
|
Loading…
Reference in New Issue
Block a user