Basic react 18 update
This commit is contained in:
Nathan Evans
Родитель
35bc598c2e
Коммит
7d24aba3f0
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Двоичный файл не отображается.
Двоичные данные
.yarn/cache/@types-react-dom-npm-18.0.1-3444453ba7-6c183e2e50.zip
поставляемый
Normal file
Двоичные данные
.yarn/cache/@types-react-dom-npm-18.0.1-3444453ba7-6c183e2e50.zip
поставляемый
Normal file
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
Двоичный файл не отображается.
|
|
@ -27,8 +27,8 @@
|
|||
"@fluentui/utilities": "^8.8.2",
|
||||
"@types/jest": "^27.4.1",
|
||||
"@types/node": "^17.0.25",
|
||||
"@types/react": "^16.14.25",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"@types/react": "^18.0.5",
|
||||
"@types/react-dom": "^18.0.1",
|
||||
"@types/react-rnd": "^8.0.0",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
"core-js": "^3.22.1",
|
||||
|
|
@ -40,8 +40,8 @@
|
|||
"npm-run-all": "^4.1.5",
|
||||
"office-ui-fabric-react": "^7.185.3",
|
||||
"prettier": "^2.6.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-rnd": "^10.3.7",
|
||||
"react-router-dom": "^5.3.1",
|
||||
"regenerator-runtime": "^0.13.9",
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
"@types/node": "^17.0.25",
|
||||
"@types/react": "^18.0.5",
|
||||
"arquero": "^4.8.8",
|
||||
"react": "^17.0.2",
|
||||
"react": "^18.0.0",
|
||||
"styled-components": "^5.3.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
"@types/d3-scale": "^4.0.2",
|
||||
"@types/node": "^17.0.25",
|
||||
"@types/react": "^18.0.5",
|
||||
"react": "^17.0.2",
|
||||
"react": "^18.0.0",
|
||||
"styled-components": "^5.3.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -44,9 +44,9 @@
|
|||
"office-ui-fabric-react": "^7.185.3",
|
||||
"prop-types": "^15.8.1",
|
||||
"query-string": "^7.1.1",
|
||||
"react": "^17.0.2",
|
||||
"react": "^18.0.0",
|
||||
"react-animate-height": "^2.1.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-dom": "^18.0.0",
|
||||
"react-dropzone": "^11.7.1",
|
||||
"react-if": "^4.1.3",
|
||||
"react-infinite-scroller": "^1.2.6",
|
||||
|
|
@ -68,8 +68,8 @@
|
|||
"@types/prettier": "^2.6.0",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/query-string": "^6.3.0",
|
||||
"@types/react": "^16.14.25",
|
||||
"@types/react-dom": "^16.9.14",
|
||||
"@types/react": "^18.0.5",
|
||||
"@types/react-dom": "^18.0.1",
|
||||
"@types/react-infinite-scroller": "^1.2.3",
|
||||
"@types/react-rnd": "^8.0.0",
|
||||
"@types/react-router-dom": "^5.3.3",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { HashRouter, Route } from 'react-router-dom'
|
||||
import { HashRouter, Route } from '~/react-patch/react-router-dom'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { LazyCachingSwitch } from '~/components/LazyCachingSwitch'
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { memo, useMemo } from 'react'
|
||||
import { memo, useMemo, ReactNode } from 'react'
|
||||
|
||||
import { usePresetData, useTestFiles, useUrlFiles } from './App.hooks'
|
||||
export const DataContext: React.FC<{
|
||||
children: JSX.Element | JSX.Element[]
|
||||
children?: ReactNode
|
||||
}> = memo(function DataContext({ children }) {
|
||||
useData()
|
||||
return <>{children}</>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { memo } from 'react'
|
||||
import { memo, ReactNode } from 'react'
|
||||
import { RecoilRoot } from 'recoil'
|
||||
|
||||
export const StateContext: React.FC<{
|
||||
children: JSX.Element | JSX.Element[]
|
||||
children?: ReactNode
|
||||
}> = memo(function StateContext({ children }) {
|
||||
return <RecoilRoot>{children}</RecoilRoot>
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,13 +4,13 @@
|
|||
*/
|
||||
import { ThematicFluentProvider } from '@thematic/fluent'
|
||||
import { ApplicationStyles } from '@thematic/react'
|
||||
import { memo } from 'react'
|
||||
import { ThemeProvider } from 'styled-components'
|
||||
import { memo, ReactNode } from 'react'
|
||||
import { ThemeProvider } from '~/react-patch/styled-components'
|
||||
|
||||
import { useTheme } from '~/state'
|
||||
|
||||
export const StyleContext: React.FC<{
|
||||
children: JSX.Element | JSX.Element[]
|
||||
children?: ReactNode
|
||||
}> = memo(function StyleContext({ children }) {
|
||||
const theme = useTheme()
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@
|
|||
|
||||
import { useMicrosoftConsentBanner } from '@essex/hooks'
|
||||
import type { FC } from 'react'
|
||||
import { memo } from 'react'
|
||||
import { memo, ReactNode } from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { useTheme } from '~/state'
|
||||
|
||||
export const Footer: FC = memo(function Footer() {
|
||||
export const Footer: FC<{
|
||||
children?: ReactNode
|
||||
}> = memo(function Footer() {
|
||||
const theme = useTheme()
|
||||
const CONSENT_CONF = {
|
||||
theme: theme.variant,
|
||||
|
|
@ -45,6 +47,7 @@ const Link: FC<{
|
|||
className?: string
|
||||
style?: React.CSSProperties
|
||||
onClick?: () => void
|
||||
children?: ReactNode
|
||||
}> = memo(function Link({ id, className, children, href, style, onClick }) {
|
||||
return href == null ? (
|
||||
<LinkDiv style={style} className={className} id={id} onClick={onClick}>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,12 @@ import type { GraphContainer, InputGraph } from '@graspologic/graph'
|
|||
import {
|
||||
Camera,
|
||||
Edges,
|
||||
GraphView,
|
||||
|
||||
HighlightHoveredNode,
|
||||
Nodes,
|
||||
NodeSetHighlight,
|
||||
} from '@graspologic/react'
|
||||
import {GraphView } from '~/react-patch/graspologic'
|
||||
import type { GraphRenderer } from '@graspologic/renderer'
|
||||
import { useCallback } from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import { withRouter } from 'react-router-dom'
|
|||
* 2. It only supports Route, not Redirect, and must use Route.component prop
|
||||
* 3. It only supports exact matches
|
||||
*/
|
||||
export const LazyCachingSwitch = withRouter(({ location, children }) => {
|
||||
export const LazyCachingSwitch: any = withRouter(({ location, children }) => {
|
||||
const [cache, setCache] = useState<any>({})
|
||||
|
||||
// first iteration ensures we've rendered the matched component, and updates the cache as necessary
|
||||
|
|
@ -29,13 +29,14 @@ export const LazyCachingSwitch = withRouter(({ location, children }) => {
|
|||
let foundFirst = false
|
||||
Children.forEach(children, child => {
|
||||
if (!foundFirst && isValidElement(child)) {
|
||||
const { path } = child.props
|
||||
const props = child.props as any
|
||||
const { path } = props
|
||||
const matched = location.pathname.match(`^${path}$`)
|
||||
if (matched) {
|
||||
foundFirst = true
|
||||
let instance = updated[path]
|
||||
if (!instance) {
|
||||
instance = <child.props.component />
|
||||
instance = <props.component />
|
||||
updated[path] = instance
|
||||
isDirty = true
|
||||
}
|
||||
|
|
@ -51,7 +52,8 @@ export const LazyCachingSwitch = withRouter(({ location, children }) => {
|
|||
const rendered = useMemo(() => {
|
||||
return Children.map(children, child => {
|
||||
if (isValidElement(child)) {
|
||||
const { path } = child.props
|
||||
const props = child.props as any
|
||||
const { path } = props
|
||||
const matched = location.pathname.match(`^${path}$`)
|
||||
const style: CSSProperties = {}
|
||||
if (!matched) {
|
||||
|
|
|
|||
|
|
@ -22,4 +22,4 @@ const LinkButton: React.FC<RouterLinkIconButtonProps> = props => {
|
|||
return <IconButton onClick={handleClick} {...buttonProps} />
|
||||
}
|
||||
|
||||
export const RouterLinkIconButton = withRouter(LinkButton)
|
||||
export const RouterLinkIconButton: any = withRouter(LinkButton)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,8 @@
|
|||
*/
|
||||
import type { NodeCollection } from '@graph-drilldown/arquero'
|
||||
import type { GraphContainer, InputGraph } from '@graspologic/graph'
|
||||
import { GraphView, Nodes, NodeSetHighlight } from '@graspologic/react'
|
||||
import { Nodes, NodeSetHighlight } from '@graspologic/react'
|
||||
import {GraphView } from '~/react-patch/graspologic'
|
||||
import { useCallback } from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@ export const ResizableBrowser: React.FC<GraphPanelProps> = memo(
|
|||
},
|
||||
)
|
||||
|
||||
const StyledRnd = styled(Rnd)`
|
||||
const StyledRnd = styled(Rnd as any)`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
import {
|
||||
CollapsiblePanel,
|
||||
CollapsiblePanelContainer,
|
||||
} from '@essex-js-toolkit/themed-components'
|
||||
} from '~/react-patch/themed-components'
|
||||
import { ToggleHeader } from '@graph-drilldown/components'
|
||||
import { format } from 'd3-format'
|
||||
import { useCallback } from 'react'
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* Copyright (c) Microsoft. All rights reserved.
|
||||
* Licensed under the MIT license. See LICENSE file in the project.
|
||||
*/
|
||||
import { CollapsiblePanel } from '@essex-js-toolkit/themed-components'
|
||||
import { CollapsiblePanel } from '~/react-patch/themed-components'
|
||||
import { useCallback } from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import { GraphView as GraphViewOriginal} from '@graspologic/react'
|
||||
|
||||
export const GraphView = GraphViewOriginal as any
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
|
||||
import { HashRouter as HashRouterOriginal, Route as RouteOriginal} from 'react-router-dom'
|
||||
|
||||
export const HashRouter = HashRouterOriginal as any
|
||||
export const Route = RouteOriginal as any
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { ThemeProvider as ThemeProviderOriginal } from "styled-components";
|
||||
|
||||
export const ThemeProvider = ThemeProviderOriginal as any
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
import { CollapsiblePanelContainer as CollapsiblePanelContainerOriginal, CollapsiblePanel as CollapsiblePanelOriginal } from "@essex-js-toolkit/themed-components";
|
||||
|
||||
export const CollapsiblePanelContainer = CollapsiblePanelContainerOriginal as any
|
||||
export const CollapsiblePanel = CollapsiblePanelOriginal as any
|
||||
85
yarn.lock
85
yarn.lock
|
|
@ -3516,7 +3516,7 @@ __metadata:
|
|||
d3-format: ^3.1.0
|
||||
d3-scale: ^4.0.2
|
||||
d3-selection: 3.0.0
|
||||
react: ^17.0.2
|
||||
react: ^18.0.0
|
||||
styled-components: ^5.3.5
|
||||
peerDependencies:
|
||||
"@fluentui/react": ">= 8"
|
||||
|
|
@ -3557,7 +3557,7 @@ __metadata:
|
|||
"@types/node": ^17.0.25
|
||||
"@types/react": ^18.0.5
|
||||
d3-scale: ^4.0.2
|
||||
react: ^17.0.2
|
||||
react: ^18.0.0
|
||||
styled-components: ^5.3.5
|
||||
peerDependencies:
|
||||
"@fluentui/react": ">= 8"
|
||||
|
|
@ -3594,8 +3594,8 @@ __metadata:
|
|||
"@fluentui/utilities": ^8.8.2
|
||||
"@types/jest": ^27.4.1
|
||||
"@types/node": ^17.0.25
|
||||
"@types/react": ^16.14.25
|
||||
"@types/react-dom": ^16.9.14
|
||||
"@types/react": ^18.0.5
|
||||
"@types/react-dom": ^18.0.1
|
||||
"@types/react-rnd": ^8.0.0
|
||||
"@types/react-router-dom": ^5.3.3
|
||||
core-js: ^3.22.1
|
||||
|
|
@ -3607,8 +3607,8 @@ __metadata:
|
|||
npm-run-all: ^4.1.5
|
||||
office-ui-fabric-react: ^7.185.3
|
||||
prettier: ^2.6.2
|
||||
react: ^17.0.2
|
||||
react-dom: ^17.0.2
|
||||
react: ^18.0.0
|
||||
react-dom: ^18.0.0
|
||||
react-rnd: ^10.3.7
|
||||
react-router-dom: ^5.3.1
|
||||
regenerator-runtime: ^0.13.9
|
||||
|
|
@ -3682,8 +3682,8 @@ __metadata:
|
|||
"@types/prettier": ^2.6.0
|
||||
"@types/prop-types": ^15.7.5
|
||||
"@types/query-string": ^6.3.0
|
||||
"@types/react": ^16.14.25
|
||||
"@types/react-dom": ^16.9.14
|
||||
"@types/react": ^18.0.5
|
||||
"@types/react-dom": ^18.0.1
|
||||
"@types/react-infinite-scroller": ^1.2.3
|
||||
"@types/react-rnd": ^8.0.0
|
||||
"@types/react-router-dom": ^5.3.3
|
||||
|
|
@ -3703,9 +3703,9 @@ __metadata:
|
|||
prop-types: ^15.8.1
|
||||
query-string: ^7.1.1
|
||||
raw-loader: ^4.0.2
|
||||
react: ^17.0.2
|
||||
react: ^18.0.0
|
||||
react-animate-height: ^2.1.2
|
||||
react-dom: ^17.0.2
|
||||
react-dom: ^18.0.0
|
||||
react-dropzone: ^11.7.1
|
||||
react-if: ^4.1.3
|
||||
react-infinite-scroller: ^1.2.6
|
||||
|
|
@ -5135,12 +5135,12 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/react-dom@npm:^16.9.14":
|
||||
version: 16.9.14
|
||||
resolution: "@types/react-dom@npm:16.9.14"
|
||||
"@types/react-dom@npm:^18.0.1":
|
||||
version: 18.0.1
|
||||
resolution: "@types/react-dom@npm:18.0.1"
|
||||
dependencies:
|
||||
"@types/react": ^16
|
||||
checksum: 68a4ee88f7a56cdbfbca24b1936b9aa5dad8b40ffbf1f047ddf990454aec6e0c9da2a01c9ae87045e95236602061646c90d02f01281533e14f1970687873030f
|
||||
"@types/react": "*"
|
||||
checksum: 6c183e2e50240b77ed767cd968fe061ef4f2b47f84da5ec9e412a767d68c9a004d1f6ccca4295a5aa2c3ee723377e59006a2031f3767c00d8ac9e240a51bb142
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
|
|
@ -5194,28 +5194,6 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/react@npm:^16":
|
||||
version: 16.14.21
|
||||
resolution: "@types/react@npm:16.14.21"
|
||||
dependencies:
|
||||
"@types/prop-types": "*"
|
||||
"@types/scheduler": "*"
|
||||
csstype: ^3.0.2
|
||||
checksum: 9660ea0a2c7ad364295c1e5abd6b98a05fd372a0f06f97850f60fcc254bcec766d19b101c0acc382746a4e0b71848d88097a1db7124e3fd441c0472fb6b3f849
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/react@npm:^16.14.25":
|
||||
version: 16.14.25
|
||||
resolution: "@types/react@npm:16.14.25"
|
||||
dependencies:
|
||||
"@types/prop-types": "*"
|
||||
"@types/scheduler": "*"
|
||||
csstype: ^3.0.2
|
||||
checksum: 3a06cf26f2cad40b14bea707a0ca5343d6bcce133a27ecc291c269d65d9998fd56807371c8e912b95c6fe5c426751ac2e419ae6df0e69bba59e4d84e1165f48f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/react@npm:^18.0.5":
|
||||
version: 18.0.5
|
||||
resolution: "@types/react@npm:18.0.5"
|
||||
|
|
@ -15056,19 +15034,6 @@ fsevents@^1.2.7:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-dom@npm:^17.0.2":
|
||||
version: 17.0.2
|
||||
resolution: "react-dom@npm:17.0.2"
|
||||
dependencies:
|
||||
loose-envify: ^1.1.0
|
||||
object-assign: ^4.1.1
|
||||
scheduler: ^0.20.2
|
||||
peerDependencies:
|
||||
react: 17.0.2
|
||||
checksum: 1c1eaa3bca7c7228d24b70932e3d7c99e70d1d04e13bb0843bbf321582bc25d7961d6b8a6978a58a598af2af496d1cedcfb1bf65f6b0960a0a8161cb8dab743c
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-dom@npm:^18.0.0":
|
||||
version: 18.0.0
|
||||
resolution: "react-dom@npm:18.0.0"
|
||||
|
|
@ -15297,16 +15262,6 @@ fsevents@^1.2.7:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react@npm:^17.0.2":
|
||||
version: 17.0.2
|
||||
resolution: "react@npm:17.0.2"
|
||||
dependencies:
|
||||
loose-envify: ^1.1.0
|
||||
object-assign: ^4.1.1
|
||||
checksum: b254cc17ce3011788330f7bbf383ab653c6848902d7936a87b09d835d091e3f295f7e9dd1597c6daac5dc80f90e778c8230218ba8ad599f74adcc11e33b9d61b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react@npm:^18.0.0":
|
||||
version: 18.0.0
|
||||
resolution: "react@npm:18.0.0"
|
||||
|
|
@ -16056,16 +16011,6 @@ resolve@^2.0.0-next.3:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"scheduler@npm:^0.20.2":
|
||||
version: 0.20.2
|
||||
resolution: "scheduler@npm:0.20.2"
|
||||
dependencies:
|
||||
loose-envify: ^1.1.0
|
||||
object-assign: ^4.1.1
|
||||
checksum: c4b35cf967c8f0d3e65753252d0f260271f81a81e427241295c5a7b783abf4ea9e905f22f815ab66676f5313be0a25f47be582254db8f9241b259213e999b8fc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"scheduler@npm:^0.21.0":
|
||||
version: 0.21.0
|
||||
resolution: "scheduler@npm:0.21.0"
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче