- {this.state.loadingTime}
+ return (
+
+
+ Dynamo Core {dynamoVersion}
+
+
- );
- }
-
- setBarProperties(dynamoVersion, loadDescription, barSize, loadingTime) {
- this.setState({
- barSize: barSize,
- dynamoVersion: dynamoVersion,
- loadDescription: loadDescription,
- loadingTime: loadingTime
- });
- document.getElementsByClassName('progress-bar-indicator')[0].style.display = 'flex';
- }
+
+ {loadDescription}
+
+
+
+
+ {loadingTime}
+
+
+ );
}
export default Dynamic;
diff --git a/src/Static.js b/src/Static.js
index 9d239a8..c5630ce 100644
--- a/src/Static.js
+++ b/src/Static.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
@@ -15,290 +15,250 @@ const importStatusEnum = {
success: 3,
};
-let checked = false;
-
-class Static extends React.Component {
- constructor(props) {
- super(props);
-
- this.state = {
- importStatus: importStatusEnum.none,
- errorDescription: 'Something went wrong when importing your custom setting file. Please try again or proceed with default settings.',
- signInTitle: this.props.signInStatus ? this.props.labels.signOutTitle : this.props.labels.signInTitle,
- signInTooltip: this.props.signInStatus ? this.props.labels.signOutTooltip : this.props.labels.signInTooltip,
- signInStatus: this.props.signInStatus,
- loadingTime: 'Total loading time: ',
- importSettingsTitle: this.props.labels.importSettingsTitle,
- showRestartMessage: false
+function Static({ signInStatus: initialSignInStatus, labels, onCheckedChange }) {
+ const [importStatus, setImportStatus] = useState(importStatusEnum.none);
+ const [errorDescription, setErrorDescription] = useState(
+ 'Something went wrong when importing your custom setting file. Please try again or proceed with default settings.'
+ );
+ const [signInTitle, setSignInTitle] = useState(
+ initialSignInStatus ? labels.signOutTitle : labels.signInTitle
+ );
+ const [signInTooltip, setSignInTooltip] = useState(
+ initialSignInStatus ? labels.signOutTooltip : labels.signInTooltip
+ );
+ const [signInStatus, setSignInStatus] = useState(initialSignInStatus);
+ const [signInDisabled, setSignInDisabled] = useState(false);
+ const [loadingTime, setLoadingTime] = useState('Total loading time: ');
+ const [showRestartMessage, setShowRestartMessage] = useState(false);
+
+ // checkedRef holds the checkbox value passed to LaunchDynamo — a ref avoids
+ // stale closure issues in the launchDynamo handler.
+ const checkedRef = useRef(false);
+ // labelsRef gives window methods stable access to the latest labels prop
+ // without needing to re-register those methods when labels changes.
+ const labelsRef = useRef(labels);
+ labelsRef.current = labels;
+
+ const importSettingsLabelRef = useRef(null);
+ const importSettingsInputRef = useRef(null);
+
+ useEffect(() => {
+ window.setImportStatus = (status) => {
+ setImportStatus(status.status);
+ setErrorDescription(status.errorDescription || '');
+ if (status.status === importStatusEnum.success) {
+ setShowRestartMessage(true);
+ if (window.showToast) {
+ const msg = labelsRef.current?.restartMessage ?? Static.defaultProps.labels.restartMessage;
+ window.showToast(msg, 'success');
+ }
+ } else if (status.status === importStatusEnum.none) {
+ setShowRestartMessage(false);
+ window.hideToast?.();
+ }
+ };
+ window.setTotalLoadingTime = (time) => setLoadingTime(time);
+ window.setEnableSignInButton = ({ enable }) => setSignInDisabled(enable !== 'True');
+ window.handleSignInStateChange = (auth) => {
+ const isSignedIn = auth.status === 'True';
+ setSignInStatus(isSignedIn);
+ setSignInTitle(isSignedIn ? labelsRef.current.signOutTitle : labelsRef.current.signInTitle);
+ setSignInTooltip(isSignedIn ? labelsRef.current.signOutTooltip : labelsRef.current.signInTooltip);
+ };
+ window.showRestartMessage = () => {
+ setShowRestartMessage(true);
+ if (window.showToast) {
+ const msg = labelsRef.current?.restartMessage ?? Static.defaultProps.labels.restartMessage;
+ window.showToast(msg, 'success');
+ }
+ };
+ window.hideRestartMessage = () => {
+ setShowRestartMessage(false);
+ window.hideToast?.();
};
- window.setImportStatus = this.setImportStatus.bind(this);
- window.setTotalLoadingTime = this.setTotalLoadingTime.bind(this);
- window.setEnableSignInButton = this.setEnableSignInButton.bind(this);
- window.handleSignInStateChange = this.handleSignInStateChange.bind(this);
- window.showRestartMessage = this.showRestartMessage.bind(this);
- window.hideRestartMessage = this.hideRestartMessage.bind(this);
- this.handleChange = this.handleChange.bind(this);
- }
-
- componentDidMount() {
- document.addEventListener('keydown', this.handleKeyDown);
- }
-
- //Every time the checkbox is clicked, this method is called
- handleChange() {
- checked = !checked;
- this.props.onCheckedChange(checked);
- }
-
- render() {
- return (
-
-
-
-
-
-
- {this.state.signInTooltip}
- }>
-
-
-
-
-
-
- {this.state.importStatus === importStatusEnum.error ? this.state.errorDescription : this.props.labels.importSettingsTooltipDescription}
-
- }>
-
-
- {this.state.showRestartMessage && (
-
- )}
-
-
-
-
-
-
-
-
- {this.state.loadingTime}
-
-
-
- );
- }
-
- //Opens a page to signin
- signIn = async () => {
- if (typeof chrome !== 'undefined' && chrome.webview !== undefined) {
- if (this.state.signInStatus) {
- let status = await chrome.webview.hostObjects.scriptObject.SignOut();
- this.setState({
- signInStatus: !status,
- signInTitle: this.props.labels.signInTitle,
- signInTooltip: this.props.labels.signInTooltip
- });
+ return () => {
+ delete window.setImportStatus;
+ delete window.setTotalLoadingTime;
+ delete window.setEnableSignInButton;
+ delete window.handleSignInStateChange;
+ delete window.showRestartMessage;
+ delete window.hideRestartMessage;
+ };
+ }, []);
+
+ useEffect(() => {
+ // The import settings control is a
-