feat: Allow host app to update title of drawing (#3273)
* Allow updating name on updateScene * Revert "Allow updating name on updateScene" This reverts commit 4e07a608d38a585e0f3c04e26b9f5e0e404824b1. * Make requested changes * Make requested changes * Remove customName from state * Remove redundant if statement * Add tests, update changelog and minor fixes * remove eempty lines * minor fixes * no border and on hover no background change * Give preference to name prop when initialData.appState.name is present and update specs * minor fix * Fix name input style in dark mode Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
@ -303,6 +303,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
||||
zenModeEnabled = false,
|
||||
gridModeEnabled = false,
|
||||
theme = defaultAppState.theme,
|
||||
name = defaultAppState.name,
|
||||
} = props;
|
||||
this.state = {
|
||||
...defaultAppState,
|
||||
@ -314,6 +315,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
||||
viewModeEnabled,
|
||||
zenModeEnabled,
|
||||
gridSize: gridModeEnabled ? GRID_SIZE : null,
|
||||
name,
|
||||
};
|
||||
if (excalidrawRef) {
|
||||
const readyPromise =
|
||||
@ -523,6 +525,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
||||
let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
|
||||
let gridSize = actionResult?.appState?.gridSize || null;
|
||||
let theme = actionResult?.appState?.theme || "light";
|
||||
let name = actionResult?.appState?.name || this.state.name;
|
||||
|
||||
if (typeof this.props.viewModeEnabled !== "undefined") {
|
||||
viewModeEnabled = this.props.viewModeEnabled;
|
||||
@ -540,6 +543,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
||||
theme = this.props.theme;
|
||||
}
|
||||
|
||||
if (typeof this.props.name !== "undefined") {
|
||||
name = this.props.name;
|
||||
}
|
||||
|
||||
this.setState(
|
||||
(state) => {
|
||||
// using Object.assign instead of spread to fool TS 4.2.2+ into
|
||||
@ -556,6 +563,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
||||
zenModeEnabled,
|
||||
gridSize,
|
||||
theme,
|
||||
name,
|
||||
});
|
||||
},
|
||||
() => {
|
||||
@ -890,6 +898,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
||||
gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
|
||||
});
|
||||
}
|
||||
|
||||
if (this.props.name && prevProps.name !== this.props.name) {
|
||||
this.setState({
|
||||
name: this.props.name,
|
||||
});
|
||||
}
|
||||
|
||||
document
|
||||
.querySelector(".excalidraw")
|
||||
?.classList.toggle("theme--dark", this.state.theme === "dark");
|
||||
|
Reference in New Issue
Block a user