Make apply button work for ExportsMode of ProxyEditor

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Main.js

@@ -38,7 +38,8 @@ export default function getMain(theState) {
 
       super(props);
       this.state = {
-        ifModsChangesStashed: false,
+        ifModsChangesAreStashed: false,
+        ifModsChangesAreValid: true,
         catToOrderedMods: {
           'general': props.apis.pacKitchen.getOrderedConfigs('general'),
           'ownProxies': props.apis.pacKitchen.getOrderedConfigs('ownProxies'),
@@ -58,24 +59,46 @@ export default function getMain(theState) {
 
     handleModApply(that) {
 
+      if (!that.state.ifModsChangesAreValid) {
+        // Error message must be already set by a config validator.
+        return;
+      }
       const modsMutated = that.props.apis.pacKitchen.getPacMods();
       const newMods = that.getAllMods().reduce((_, conf) => {
 
         modsMutated[conf.key] = conf.value;
         return modsMutated;
 
-      }, modsMutated/*< Needed for index 0*/);
+      }, modsMutated/* Needed for index 0*/);
       that.props.funs.conduct(
         'Применяем настройки...',
         (cb) => that.props.apis.pacKitchen.keepCookedNowAsync(newMods, cb),
         'Настройки применены.',
-        () => that.setState({ifModsChangesStashed: false})
+        () => that.setState({
+          ifModsChangesAreStashed: false,
+          ifModsChangesAreValid: true,
+        })
       );
 
     }
 
-    handleModChange({targetConf, targetIndex, newValue}) {
+    handleModChange({ifValid, targetConf, targetIndex, newValue}) {
 
+      if (ifValid === undefined) {
+        // User input some data, but not validated yet.
+        this.setState({
+          // Make apply button clickable when user only starts writing.
+          ifModsChangesAreStashed: true,
+        });
+        return;
+      }
+      if (ifValid === false) {
+        this.setState({
+          ifModsChangesAreValid: false,
+          ifModsChangesAreStashed: true,
+        })
+        return;
+      }
       const oldCats = this.state.catToOrderedMods;
       const newCats = Object.keys(this.state.catToOrderedMods).reduce((acc, cat) => {
 
@@ -99,7 +122,8 @@ export default function getMain(theState) {
 
       this.setState({
         catToOrderedMods: newCats,
-        ifModsChangesStashed: true,
+        ifModsChangesAreStashed: true,
+        ifModsChangesAreValid: true,
       });
 
     }
@@ -108,7 +132,7 @@ export default function getMain(theState) {
 
       const applyModsEl = createElement(ApplyMods, Object.assign({}, props,
         {
-          ifInputsDisabled: !this.state.ifModsChangesStashed || props.ifInputsDisabled,
+          ifInputsDisabled: !this.state.ifModsChangesAreStashed || props.ifInputsDisabled,
           onClick: linkEvent(this, this.handleModApply),
         }
       ));

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ModList.js

@@ -26,17 +26,18 @@ export default function getModList(theState) {
         )
       });
       if (ifChecked === false || !confMeta.ifChild) {
-        this.handleNewValue(confMeta, ifChecked);
+        this.handleNewValue(true, confMeta, ifChecked);
       }
 
     }
 
-    handleNewValue({ conf, index }, newValue) {
+    handleNewValue(ifValid, { conf, index }, newValue) {
 
       this.props.onConfChanged({
         targetConf: conf,
         targetIndex: index,
         newValue: newValue,
+        ifValid,
       });
 
     }
@@ -54,7 +55,7 @@ export default function getModList(theState) {
             const child = ifMayHaveChild && this.state.checks[index]
               && createElement(
                 props.childrenOfMod[conf.key],
-                Object.assign({}, props, {conf, onNewValue: (newValue) => this.handleNewValue(confMeta, newValue)})
+                Object.assign({}, props, {conf, onNewValue: (ifValid, newValue) => this.handleNewValue(ifValid, confMeta, newValue)})
               );
 
             return (<InfoLi

extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/ProxyEditor.js

@@ -222,7 +222,7 @@ export default function getProxyEditor(theState) {
 
       const newValue = `${that.props.proxyStringRaw}; ${type} ${hostname}:${port}`
         .trim().replace(/(\s*;\s*)+/, '; ');
-      that.props.setProxyStringRaw(newValue);
+      that.props.setProxyStringRaw(true, newValue);
 
     }
 
@@ -232,7 +232,7 @@ export default function getProxyEditor(theState) {
       const proxyStrings = splitBySemi(that.props.proxyStringRaw);
       proxyStrings.splice(index, 1);
 
-      that.props.setProxyStringRaw( joinBySemi(proxyStrings) );
+      that.props.setProxyStringRaw(true, joinBySemi(proxyStrings) );
 
     }
 
@@ -245,7 +245,7 @@ export default function getProxyEditor(theState) {
       const proxyStrings = splitBySemi(that.props.proxyStringRaw);
       proxyStrings.splice(index - 1, 2, proxyStrings[index], proxyStrings[index-1]);
 
-      that.props.setProxyStringRaw( joinBySemi(proxyStrings) );
+      that.props.setProxyStringRaw(true, joinBySemi(proxyStrings) );
 
     }
 
@@ -367,11 +367,13 @@ export default function getProxyEditor(theState) {
       super(props);
       this.state = getInitState();
       this.resetState = linkEvent(this, this.resetState);
+      this.showApply =  linkEvent(undefined,  props.setProxyStringRaw);
 
     }
 
     resetState(that, event) {
 
+      that.props.setProxyStringRaw(true, that.props.proxyStringRaw);
       if (that.state.ifHasErrors) {
         that.props.funs.setStatusTo(''); // Clear errors
       }
@@ -421,7 +423,6 @@ export default function getProxyEditor(theState) {
 
     handleModeSwitch(that, event) {
 
-      console.log('SWITCH!');
       if (that.state.ifHasErrors) {
         return;
       }
@@ -431,18 +432,18 @@ export default function getProxyEditor(theState) {
 
     handleTextareaChange(that, event) {
 
-      console.log('CHANGE!');
       that.setState({
         stashedExports: normalizeProxyString(event.target.value),
       });
       const errors = that.getErrorsInStashedExports();
       if (errors) {
+        that.props.setProxyStringRaw(false);
         that.setState({ifHasErrors: true});
         that.props.funs.showErrors(...errors);
         return;
       }
       // No errors.
-      that.props.setProxyStringRaw(that.state.stashedExports);
+      that.props.setProxyStringRaw(true, that.state.stashedExports);
       that.setState({
         stashedExports: false,
         ifHasErrors: false,
@@ -490,6 +491,7 @@ SOCKS5 localhost:9150; # Tor Browser
 HTTPS 11.22.33.44:3143;
 PROXY foobar.com:8080; # Not HTTP!`.trim()}
                     onChange={linkEvent(this, this.handleTextareaChange)}
+                    onFocus={this.showApply}
                     value={
                       this.state.stashedExports !== false
                         ? this.state.stashedExports
@@ -531,6 +533,7 @@ PROXY foobar.com:8080; # Not HTTP!`.trim()}
       this.state = {
         proxyStringRaw: newValue,
         ifExportsMode: false,
+        ifValid: true,
       };
       this.handleSwitch = () => this.setState({ifExportsMode: !this.state.ifExportsMode});
       waitingTillMount.push(newValue); // Wait till mount or eat bugs.
@@ -552,12 +555,12 @@ PROXY foobar.com:8080; # Not HTTP!`.trim()}
 
     }
 
-    mayEmitNewValue(oldValue, newValue) {
+    mayEmitNewValue(oldValue, newValue, ifValidityChanged) {
 
       if ( // Reject: 1) both `false` OR 2) both `===`.
-        ( Boolean(oldValue) || Boolean(newValue) ) && oldValue !== newValue
+        ifValidityChanged || ( Boolean(oldValue) || Boolean(newValue) ) && oldValue !== newValue
       ) {
-        this.props.onNewValue(newValue);
+        this.props.onNewValue(this.state.ifValid, newValue);
       }
 
     }
@@ -567,12 +570,21 @@ PROXY foobar.com:8080; # Not HTTP!`.trim()}
       const props = Object.assign({
         proxyStringRaw: this.state.proxyStringRaw,
         onSwitch: this.handleSwitch,
-        setProxyStringRaw: (newValue) => {
+        setProxyStringRaw: (ifValid, newValue) => {
+
+          const ifValidityChanged = this.state.ifValid !== ifValid;
+          if (!ifValid) {
+            if (ifValidityChanged || ifValid === undefined) {
+              this.props.onNewValue(ifValid);
+              this.setState({ ifValid });
+            }
+            return;
+          }
 
           const oldValue = this.state.proxyStringRaw;
           localStorage.setItem(UI_RAW, newValue);
-          this.setState({proxyStringRaw: newValue});
+          this.setState({proxyStringRaw: newValue, ifValid});
-          this.mayEmitNewValue(oldValue, newValue);
+          this.mayEmitNewValue(oldValue, newValue, ifValidityChanged);
 
         },
       }, originalProps);