refactor

Author: Alexander Kozlovskiy

apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.html

@@ -25,11 +25,10 @@
       [height]="120"
       placeholder="Recognized text will appear here..."
       [inputAttr]="{ 'aria-label': 'Recognized Text' }"
-      (onValueChanged)="onTextAreaValueChanged($event)"
     ></dx-text-area>
     <dx-button
       text="Clear"
-      [disabled]="clearButtonDisabled"
+      [disabled]="textAreaValue === ''"
       (onClick)="onClearButtonClick($event)"
     ></dx-button>
   </div>
@@ -51,7 +50,7 @@
         [dataSource]="stylingModes"
         displayExpr="displayValue"
         valueExpr="value"
-        [disabled]="stylingModeDisabled"
+        [disabled]="displayMode === 'Custom'"
         [inputAttr]="{ 'aria-label': 'Styling Mode' }"
       ></dx-select-box>
     </div>
@@ -62,7 +61,7 @@
         [dataSource]="types"
         displayExpr="displayValue"
         valueExpr="value"
-        [disabled]="typeDisabled"
+        [disabled]="displayMode === 'Custom'"
         [inputAttr]="{ 'aria-label': 'Type' }"
       ></dx-select-box>
     </div>

apps/demos/Demos/SpeechToText/Overview/Angular/app/app.component.ts

@@ -39,22 +39,16 @@ export class AppComponent {
 
   stylingModes: { displayValue: string; value: string }[];
 
-  stylingModeDisabled: boolean;
-
   type: string;
 
   types: { displayValue: string; value: string }[];
 
-  typeDisabled: boolean;
-
   hint: string;
 
   disabled: boolean;
 
   textAreaValue: string;
 
-  clearButtonDisabled: boolean;
-
   language: string;
 
   languages: string[];
@@ -77,14 +71,11 @@ export class AppComponent {
     this.displayMode = this.displayModes[0];
     this.stylingModes = this.appService.getStylingModes();
     this.stylingMode = this.stylingModes[0].value;
-    this.stylingModeDisabled = false;
     this.types = this.appService.getTypes();
     this.type = this.types[2].value;
-    this.typeDisabled = false;
     this.hint = 'Start voice recognition';
     this.disabled = false;
     this.textAreaValue = '';
-    this.clearButtonDisabled = true;
     this.languages = this.appService.getLanguages();
     this.language = this.languages[0];
     this.langMap = this.appService.getLangMap();
@@ -123,19 +114,11 @@ export class AppComponent {
     this.type = 'default';
   }
 
-  onTextAreaValueChanged({ value }) {
-    this.clearButtonDisabled = !value;
-  }
-
   onClearButtonClick() {
     this.textAreaValue = '';
   }
 
   onDisplayModeChanged({ value }) {
-    const isCustomMode = value === 'Custom';
-    this.stylingModeDisabled = isCustomMode;
-    this.typeDisabled = isCustomMode;
-
     if (value === 'Text and Icon') {
       this.startText = 'Dictate';
       this.stopText = 'Stop';
@@ -146,7 +129,7 @@ export class AppComponent {
     this.startText = '';
     this.stopText = '';
 
-    if (isCustomMode) {
+    if (value === 'Custom') {
       this.stylingMode = 'contained';
       this.type = this.state === 'initial' ? 'default' : 'danger';
     }

apps/demos/Demos/SpeechToText/Overview/React/App.tsx

@@ -22,10 +22,7 @@ export default function App() {
   const [hint, setHint] = useState<string>('Start voice recognition');
   const [disabled, setDisabled] = useState<boolean>(false);
   const [textAreaValue, setTextAreaValue] = useState<string>('');
-  const [clearButtonDisabled, setClearButtonDisabled] = useState<boolean>(true);
   const [language, setLanguage] = useState<string>(languages[0]);
-  const [stylingModeDisabled, setStylingModeDisabled] = useState<boolean>(false);
-  const [typeDisabled, setTypeDisabled] = useState<boolean>(false);
   const [interimResults, setInterimResults] = useState<boolean>(true);
   const [continuous, setContinuous] = useState<boolean>(false);
   const [animation, setAnimation] = useState<boolean>(true);
@@ -43,7 +40,7 @@ export default function App() {
     }
 
     setType('danger');
-  }, [displayMode, setHint, setType]);
+  }, [displayMode]);
 
   const onEnd = useCallback(() => {
     state = 'initial';
@@ -54,29 +51,25 @@ export default function App() {
     }
 
     setType('default');
-  }, [displayMode, setHint, setType]);
+  }, [displayMode]);
 
   const onResult = useCallback(({ event }) => {
     const { results } = event;
     const resultText = Object.values(results)
       .map((resultItem: any) => resultItem[0].transcript)
       .join(' ');
     setTextAreaValue(resultText);
-  }, [setTextAreaValue]);
+  }, []);
 
   const onTextAreaValueChanged = useCallback(({ value }) => {
     setTextAreaValue(value);
-    setClearButtonDisabled(!value);
-  }, [setTextAreaValue, setClearButtonDisabled]);
+  }, []);
 
   const onClearButtonClick = useCallback(() => {
     setTextAreaValue('');
-  }, [setTextAreaValue]);
+  }, []);
 
   const onDisplayModeValueChanged = useCallback(({ value }) => {
-    const isCustomMode = value === 'Custom';
-    setStylingModeDisabled(isCustomMode);
-    setTypeDisabled(isCustomMode);
     setDisplayMode(value);
 
     if (value === 'Text and Icon') {
@@ -89,39 +82,39 @@ export default function App() {
     setStartText('');
     setStopText('');
 
-    if (isCustomMode) {
+    if (value === 'Custom') {
       setStylingMode('contained');
       setType(state === 'initial' ? 'default' : 'danger');
     }
-  }, [setStylingModeDisabled, setTypeDisabled, setDisplayMode, setStartText, setStopText, setStylingMode, setType]);
+  }, []);
 
   const onStylingModeValueChanged = useCallback(({ value }) => {
     setStylingMode(value);
-  }, [setStylingMode]);
+  }, []);
 
   const onTypeValueChanged = useCallback(({ value }) => {
     setType(value);
-  }, [setType]);
+  }, []);
 
   const onDisabledValueChanged = useCallback(({ value }) => {
     setDisabled(value);
-  }, [setDisabled]);
+  }, []);
 
   const onLanguageValueChanged = useCallback(({ value }) => {
     setLanguage(value);
-  }, [setLanguage]);
+  }, []);
 
   const onInterimResultsValueChanged = useCallback(({ value }) => {
     setInterimResults(value);
-  }, [setInterimResults]);
+  }, []);
 
   const onContinuousValueChanged = useCallback(({ value }) => {
     setContinuous(value);
-  }, [setContinuous]);
+  }, []);
 
   const onAnimationValueChanged = useCallback(({ value }) => {
     setAnimation(value);
-  }, [setAnimation]);
+  }, []);
 
   return (
     <div className='speech-to-text-demo'>
@@ -152,7 +145,7 @@ export default function App() {
         />
         <Button
           text='Clear'
-          disabled={clearButtonDisabled}
+          disabled={textAreaValue === ''}
           onClick={onClearButtonClick}
         />
       </div>
@@ -174,7 +167,7 @@ export default function App() {
             dataSource={stylingModes}
             valueExpr='value'
             displayExpr='displayValue'
-            disabled={stylingModeDisabled}
+            disabled={displayMode === 'Custom'}
             inputAttr={stylingModeLabel}
             onValueChanged={onStylingModeValueChanged}
           />
@@ -186,7 +179,7 @@ export default function App() {
             dataSource={types}
             valueExpr='value'
             displayExpr='displayValue'
-            disabled={typeDisabled}
+            disabled={displayMode === 'Custom'}
             inputAttr={typeLabel}
             onValueChanged={onTypeValueChanged}
           />