mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-22 16:46:34 +03:00
chore: upgrade to styled-components@4
This commit is contained in:
Roman Hotsiy
parent
00846e1f55
commit
ef520eacfa
|
|
@ -73,6 +73,7 @@
|
|||
"@types/react-dom": "^16.0.9",
|
||||
"@types/react-hot-loader": "^4.1.0",
|
||||
"@types/react-tabs": "^2.3.0",
|
||||
"@types/styled-components": "^4.0.1",
|
||||
"@types/tapable": "1.0.4",
|
||||
"@types/webpack": "^4.4.17",
|
||||
"@types/webpack-env": "^1.13.0",
|
||||
|
|
@ -107,7 +108,7 @@
|
|||
"shelljs": "^0.8.1",
|
||||
"source-map-loader": "^0.2.4",
|
||||
"style-loader": "^0.23.1",
|
||||
"styled-components": "^3.4.5",
|
||||
"styled-components": "^4.0.2",
|
||||
"swagger2openapi": "^3.2.8",
|
||||
"ts-jest": "23.10.4",
|
||||
"ts-loader": "5.2.2",
|
||||
|
|
@ -126,7 +127,7 @@
|
|||
"mobx": "^4.2.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"styled-components": "^3.4.0"
|
||||
"styled-components": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.6",
|
||||
|
|
@ -134,7 +135,7 @@
|
|||
"dompurify": "^1.0.7",
|
||||
"eventemitter3": "^3.0.0",
|
||||
"json-pointer": "^0.6.0",
|
||||
"json-schema-ref-parser": "^5.1.2",
|
||||
"json-schema-ref-parser": "^6.0.1",
|
||||
"lunr": "^2.3.2",
|
||||
"mark.js": "^8.11.1",
|
||||
"marked": "https://github.com/markedjs/marked#fb48827",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import PerfectScrollbarType, * as PerfectScrollbarNamespace from 'perfect-scroll
|
|||
import psStyles from 'perfect-scrollbar/css/perfect-scrollbar.css';
|
||||
|
||||
import { OptionsContext } from '../components/OptionsProvider';
|
||||
import styled, { injectGlobal } from '../styled-components';
|
||||
import styled, { createGlobalStyle } from '../styled-components';
|
||||
|
||||
/*
|
||||
* perfect scrollbar umd bundle uses exports assignment while module uses default export
|
||||
|
|
@ -14,7 +14,7 @@ import styled, { injectGlobal } from '../styled-components';
|
|||
const PerfectScrollbarConstructor =
|
||||
PerfectScrollbarNamespace.default || ((PerfectScrollbarNamespace as any) as PerfectScrollbarType);
|
||||
|
||||
injectGlobal`${psStyles && psStyles.toString()}`;
|
||||
const PSStyling = createGlobalStyle`${psStyles && psStyles.toString()}`;
|
||||
|
||||
const StyledScrollWrapper = styled.div`
|
||||
position: relative;
|
||||
|
|
@ -58,9 +58,12 @@ export class PerfectScrollbar extends React.Component<PerfectScrollbarProps> {
|
|||
}
|
||||
|
||||
return (
|
||||
<StyledScrollWrapper className={`scrollbar-container ${className}`} innerRef={this.handleRef}>
|
||||
{children}
|
||||
</StyledScrollWrapper>
|
||||
<>
|
||||
<PSStyling />
|
||||
<StyledScrollWrapper className={`scrollbar-container ${className}`} ref={this.handleRef}>
|
||||
{children}
|
||||
</StyledScrollWrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ class Json extends React.PureComponent<JsonProps> {
|
|||
<PrismDiv
|
||||
className={this.props.className}
|
||||
// tslint:disable-next-line
|
||||
innerRef={node => (this.node = node!)}
|
||||
ref={node => (this.node = node!)}
|
||||
dangerouslySetInnerHTML={{ __html: jsonToHTML(this.props.data) }}
|
||||
/>
|
||||
</JsonViewerWrap>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ export class MenuItem extends React.Component<MenuItemProps> {
|
|||
<MenuItemLi
|
||||
onClick={this.activate}
|
||||
depth={item.depth}
|
||||
innerRef={this.saveRef}
|
||||
ref={this.saveRef}
|
||||
data-item-id={item.id}
|
||||
>
|
||||
{item.type === 'operation' ? (
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ export class StickyResponsiveSidebar extends React.Component<StickySidebarProps>
|
|||
className={this.props.className}
|
||||
style={style(options)}
|
||||
// tslint:disable-next-line
|
||||
innerRef={el => {
|
||||
ref={el => {
|
||||
this.stickyElement = el as any;
|
||||
}}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ function withProps<T, U extends HTMLElement = HTMLElement>(
|
|||
const {
|
||||
default: styled,
|
||||
css,
|
||||
injectGlobal,
|
||||
createGlobalStyle,
|
||||
keyframes,
|
||||
ThemeProvider,
|
||||
} = (styledComponents as any) as styledComponents.ThemedStyledComponentsModule<
|
||||
|
|
@ -54,7 +54,7 @@ export const media = {
|
|||
},
|
||||
};
|
||||
|
||||
export { css, injectGlobal, keyframes, ThemeProvider, withProps };
|
||||
export { css, createGlobalStyle, keyframes, ThemeProvider, withProps };
|
||||
export default styled;
|
||||
|
||||
export function extensionsHook(styledName: string) {
|
||||
|
|
|
|||
32
typings/styled-patch.d.ts
vendored
32
typings/styled-patch.d.ts
vendored
|
|
@ -2,42 +2,50 @@ import * as styledComponents from 'styled-components';
|
|||
|
||||
// Styled components typings for using babel-plugin BEFORE typescript
|
||||
declare module 'styled-components' {
|
||||
type Attrs<P, A extends Partial<P>, T> = {
|
||||
[K in keyof A]: ((props: ThemedStyledProps<P, T>) => A[K]) | A[K]
|
||||
};
|
||||
type KeyofBase = keyof any;
|
||||
type Diff<T extends KeyofBase, U extends KeyofBase> = ({ [P in T]: P } & { [P in U]: never })[T];
|
||||
type DiffBetween<T, U> = Pick<T, Diff<keyof T, keyof U>> & Pick<U, Diff<keyof U, keyof T>>;
|
||||
interface ThemedStyledFunction<P, T, O = P> {
|
||||
// adding "| string[]" for transpileTemplateLiterals and similar below
|
||||
(
|
||||
strings: TemplateStringsArray | string[],
|
||||
...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
|
||||
...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
|
||||
): StyledComponentClass<P, T, O>;
|
||||
|
||||
new <U>(
|
||||
<U>(
|
||||
strings: TemplateStringsArray | string[],
|
||||
...interpolations: Interpolation<ThemedStyledProps<P & U, T>>[]
|
||||
...interpolations: Array<Interpolation<ThemedStyledProps<P & U, T>>>
|
||||
): StyledComponentClass<P & U, T, O & U>;
|
||||
attrs<U, A extends Partial<P & U> = {}>(
|
||||
attrs: Attrs<P & U, A, T>,
|
||||
): ThemedStyledFunction<DiffBetween<A, P & U>, T, DiffBetween<A, O & U>>;
|
||||
|
||||
// adding "withConfig" for transpileTemplateLiterals
|
||||
withConfig(config: any): ThemedStyledFunction<P, T, O>;
|
||||
}
|
||||
|
||||
export interface ThemedCssFunction<T> {
|
||||
// adding "| string[]" for transpileTemplateLiterals and similar below
|
||||
export interface BaseThemedCssFunction<T> {
|
||||
(
|
||||
strings: TemplateStringsArray | string[],
|
||||
...interpolations: SimpleInterpolation[]
|
||||
): InterpolationValue[];
|
||||
<P>(
|
||||
strings: TemplateStringsArray | string[],
|
||||
...interpolations: Interpolation<ThemedStyledProps<P, T>>[]
|
||||
): FlattenInterpolation<ThemedStyledProps<P, T>>[];
|
||||
...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
|
||||
): Array<FlattenInterpolation<ThemedStyledProps<P, T>>>;
|
||||
}
|
||||
|
||||
interface ThemedStyledComponentsModule<T> {
|
||||
keyframes(
|
||||
strings: TemplateStringsArray | string[],
|
||||
...interpolations: SimpleInterpolation[]
|
||||
): string;
|
||||
injectGlobal(
|
||||
): Keyframes;
|
||||
|
||||
createGlobalStyle<P = {}>(
|
||||
strings: TemplateStringsArray | string[],
|
||||
...interpolations: SimpleInterpolation[]
|
||||
): void;
|
||||
...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
|
||||
): GlobalStyleClass<P, T>;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
58
yarn.lock
58
yarn.lock
|
|
@ -641,6 +641,16 @@
|
|||
debug "^3.1.0"
|
||||
lodash.once "^4.1.1"
|
||||
|
||||
"@emotion/is-prop-valid@^0.6.8":
|
||||
version "0.6.8"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz#68ad02831da41213a2089d2cab4e8ac8b30cbd85"
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.6.6"
|
||||
|
||||
"@emotion/memoize@^0.6.6":
|
||||
version "0.6.6"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
|
||||
|
||||
"@types/blob-util@1.3.3":
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/@types/blob-util/-/blob-util-1.3.3.tgz#adba644ae34f88e1dd9a5864c66ad651caaf628a"
|
||||
|
|
@ -791,6 +801,13 @@
|
|||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
|
||||
|
||||
"@types/styled-components@^4.0.1":
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.0.1.tgz#5eb9a5474dbde3becab2bcc8f04e0b8e8dcf8c06"
|
||||
dependencies:
|
||||
"@types/node" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/tapable@*", "@types/tapable@1.0.4":
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370"
|
||||
|
|
@ -1494,7 +1511,7 @@ babel-plugin-jest-hoist@^23.2.0:
|
|||
version "23.2.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-23.2.0.tgz#e61fae05a1ca8801aadee57a6d66b8cefaf44167"
|
||||
|
||||
babel-plugin-styled-components@^1.8.0:
|
||||
"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^1.8.0:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.8.0.tgz#9dd054c8e86825203449a852a5746f29f2dab857"
|
||||
dependencies:
|
||||
|
|
@ -1840,13 +1857,6 @@ buffer@^4.3.0:
|
|||
ieee754 "^1.1.4"
|
||||
isarray "^1.0.0"
|
||||
|
||||
buffer@^5.0.3:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
|
||||
dependencies:
|
||||
base64-js "^1.0.2"
|
||||
ieee754 "^1.1.4"
|
||||
|
||||
builtin-modules@^1.0.0, builtin-modules@^1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
|
||||
|
|
@ -2585,7 +2595,7 @@ css-selector-tokenizer@^0.7.0:
|
|||
fastparse "^1.1.1"
|
||||
regexpu-core "^1.0.0"
|
||||
|
||||
css-to-react-native@^2.0.3:
|
||||
css-to-react-native@^2.2.2:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.2.tgz#c077d0f7bf3e6c915a539e7325821c9dd01f9965"
|
||||
dependencies:
|
||||
|
|
@ -3553,7 +3563,7 @@ fb-watchman@^2.0.0:
|
|||
dependencies:
|
||||
bser "^2.0.0"
|
||||
|
||||
fbjs@^0.8.16, fbjs@^0.8.5:
|
||||
fbjs@^0.8.5:
|
||||
version "0.8.17"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||
dependencies:
|
||||
|
|
@ -5177,14 +5187,13 @@ json-pointer@^0.6.0:
|
|||
dependencies:
|
||||
foreach "^2.0.4"
|
||||
|
||||
json-schema-ref-parser@^5.1.2:
|
||||
version "5.1.3"
|
||||
resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-5.1.3.tgz#f86c5868f40898e69169e1bbc854725a4fd0e1ad"
|
||||
json-schema-ref-parser@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/json-schema-ref-parser/-/json-schema-ref-parser-6.0.1.tgz#342a43713df584ab1f3f4d5e5ca76439e0a42bce"
|
||||
dependencies:
|
||||
call-me-maybe "^1.0.1"
|
||||
debug "^3.1.0"
|
||||
js-yaml "^3.12.0"
|
||||
ono "^4.0.6"
|
||||
ono "^4.0.10"
|
||||
|
||||
json-schema-traverse@^0.3.0:
|
||||
version "0.3.1"
|
||||
|
|
@ -6320,7 +6329,7 @@ onetime@^2.0.0:
|
|||
dependencies:
|
||||
mimic-fn "^1.0.0"
|
||||
|
||||
ono@^4.0.6:
|
||||
ono@^4.0.10:
|
||||
version "4.0.10"
|
||||
resolved "https://registry.yarnpkg.com/ono/-/ono-4.0.10.tgz#f7f9c6d1b76270a499d8664c95a740d44175134c"
|
||||
dependencies:
|
||||
|
|
@ -8103,19 +8112,18 @@ style-loader@^0.23.1:
|
|||
loader-utils "^1.1.0"
|
||||
schema-utils "^1.0.0"
|
||||
|
||||
styled-components@^3.4.5:
|
||||
version "3.4.10"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.10.tgz#9a654c50ea2b516c36ade57ddcfa296bf85c96e1"
|
||||
styled-components@^4.0.2:
|
||||
version "4.0.2"
|
||||
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.0.2.tgz#7d4409ada019cdd34c25ba68c4577ea95dbcf0c5"
|
||||
dependencies:
|
||||
buffer "^5.0.3"
|
||||
css-to-react-native "^2.0.3"
|
||||
fbjs "^0.8.16"
|
||||
hoist-non-react-statics "^2.5.0"
|
||||
"@emotion/is-prop-valid" "^0.6.8"
|
||||
babel-plugin-styled-components ">= 1"
|
||||
css-to-react-native "^2.2.2"
|
||||
memoize-one "^4.0.0"
|
||||
prop-types "^15.5.4"
|
||||
react-is "^16.3.1"
|
||||
stylis "^3.5.0"
|
||||
stylis-rule-sheet "^0.0.10"
|
||||
supports-color "^3.2.3"
|
||||
|
||||
stylis-rule-sheet@^0.0.10:
|
||||
version "0.0.10"
|
||||
|
|
@ -8135,7 +8143,7 @@ supports-color@^2.0.0:
|
|||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
|
||||
|
||||
supports-color@^3.1.2, supports-color@^3.2.3:
|
||||
supports-color@^3.1.2:
|
||||
version "3.2.3"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user