kopia lustrzana https://github.com/Tldraw/Tldraw
fix: update tldraw to respond to dark mode prop (#659)
* fix: update tldraw to respond to darkMode prop * fix: update dark mode route in examplespull/658/head^2
rodzic
5493403663
commit
eff858d0a7
|
@ -1,6 +1,7 @@
|
||||||
import * as React from 'react'
|
import * as React from 'react'
|
||||||
import { Routes, Route, Link } from 'react-router-dom'
|
import { Routes, Route, Link } from 'react-router-dom'
|
||||||
import Basic from './basic'
|
import Basic from './basic'
|
||||||
|
import DarkMode from './dark-mode'
|
||||||
import ReadOnly from './readonly'
|
import ReadOnly from './readonly'
|
||||||
import PropsControl from './props-control'
|
import PropsControl from './props-control'
|
||||||
import ApiControl from './api-control'
|
import ApiControl from './api-control'
|
||||||
|
@ -25,6 +26,8 @@ export default function App(): JSX.Element {
|
||||||
|
|
||||||
<Route path="/basic" element={<Basic />} />
|
<Route path="/basic" element={<Basic />} />
|
||||||
|
|
||||||
|
<Route path="/dark-mode" element={<DarkMode />} />
|
||||||
|
|
||||||
<Route path="/ui-options" element={<UIOptions />} />
|
<Route path="/ui-options" element={<UIOptions />} />
|
||||||
|
|
||||||
<Route path="/persisted" element={<Persisted />} />
|
<Route path="/persisted" element={<Persisted />} />
|
||||||
|
@ -63,6 +66,9 @@ export default function App(): JSX.Element {
|
||||||
<li>
|
<li>
|
||||||
<Link to="/basic">Basic</Link>
|
<Link to="/basic">Basic</Link>
|
||||||
</li>
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/dark-mode">Dark Mode</Link>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<Link to="/ui-options">UI Options</Link>
|
<Link to="/ui-options">UI Options</Link>
|
||||||
</li>
|
</li>
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
import * as React from 'react'
|
||||||
|
import { Tldraw } from '@tldraw/tldraw'
|
||||||
|
|
||||||
|
export default function DarkMode(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<div className="tldraw">
|
||||||
|
<Tldraw darkMode />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
|
@ -107,6 +107,7 @@ export function Tldraw({
|
||||||
readOnly = false,
|
readOnly = false,
|
||||||
showSponsorLink = false,
|
showSponsorLink = false,
|
||||||
disableAssets = false,
|
disableAssets = false,
|
||||||
|
darkMode = false,
|
||||||
onMount,
|
onMount,
|
||||||
onChange,
|
onChange,
|
||||||
onChangePresence,
|
onChangePresence,
|
||||||
|
@ -212,6 +213,13 @@ export function Tldraw({
|
||||||
app.readOnly = readOnly
|
app.readOnly = readOnly
|
||||||
}, [app, readOnly])
|
}, [app, readOnly])
|
||||||
|
|
||||||
|
// Toggle the app's darkMode when the `darkMode` prop changes.
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (darkMode !== app.settings.isDarkMode){
|
||||||
|
app.toggleDarkMode()
|
||||||
|
}
|
||||||
|
}, [app, darkMode])
|
||||||
|
|
||||||
// Update the app's callbacks when any callback changes.
|
// Update the app's callbacks when any callback changes.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
app.callbacks = {
|
app.callbacks = {
|
||||||
|
|
Ładowanie…
Reference in New Issue