smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add theme prop (#3228)

Browse source 
* support appearance when updating scene data

* works!

* whoops, missed a prop

* hide appearance button when prop is not set

* cleanup

* fix export + rename prop to theme

* rename to showThemeBtn, hide via react instead of css

* adapt to new state name

* add tests and css selector to target the dark mode toggle

* updated changelog and readme

* fix markdown rendering in readme

* pr feedback
This commit is contained in:
Jeremy Press 2021-03-15 11:33:46 -07:00 • committed by GitHub
parent 1f295955d0
commit 84a1863233
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 62 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/components/App.tsx
View file

@ -303,9 +303,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
viewModeEnabled = false,
zenModeEnabled = false,
gridModeEnabled = false,
theme = defaultAppState.theme,
} = props;
this.state = {
...defaultAppState,
theme,
isLoading: true,
width,
height,
@ -458,6 +460,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
showExitZenModeBtn={
typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
}
showThemeBtn={typeof this.props?.theme === "undefined"}
libraryReturnUrl={this.props.libraryReturnUrl}
/>
<div className="excalidraw-textEditorContainer" />
@ -519,6 +522,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
let gridSize = actionResult?.appState?.gridSize || null;
let theme = actionResult?.appState?.theme || "light";
if (typeof this.props.viewModeEnabled !== "undefined") {
viewModeEnabled = this.props.viewModeEnabled;
@ -532,6 +536,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
}
if (typeof this.props.theme !== "undefined") {
theme = this.props.theme;
}
this.setState(
(state) => {
// using Object.assign instead of spread to fool TS 4.2.2+ into
@ -547,6 +555,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
viewModeEnabled,
zenModeEnabled,
gridSize,
theme,
});
},
() => {
@ -882,6 +891,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
this.setState({ zenModeEnabled: !!this.props.zenModeEnabled });
}
if (prevProps.theme !== this.props.theme && this.props.theme) {
this.setState({ theme: this.props.theme });
}
if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {
this.setState({
gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,