Refactor Inferno components, add areInputsDisabled

2024-11-24 02:13:43 +03:00 · 2017-05-18 11:51:34 +05:00 · 2017-05-18 11:51:34 +05:00 · b01999a737
commit b01999a737
parent e97a2bcff5
12 changed files with 115 additions and 146 deletions
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/new.html
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/new.html
@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html style="display: none; will-change: contents, display">
-  <head>
-    <meta charset="utf-8">
-    <title>Настройки</title>
-  </head>
-  <body>
-    <div id="app-mount-point">old info</div>
-    <script src="./dist/bundle.min.js"></script>
-  </body>
-</html>
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/old/.index.js.swp
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/old/.index.js.swp
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/package.json
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/package.json
@ -10,21 +10,12 @@
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "babili-webpack-plugin": "^0.0.11",
-    "bel": "^4.6.1",
    "concat-stream": "^1.6.0",
-    "csjs": "^1.1.0",
    "csjs-inject": "^1.0.1",
-    "csjs-injectify": "^1.0.1",
    "flow-bin": "^0.45.0",
    "inferno": "^3.1.2",
    "inferno-component": "^3.1.2",
    "inferno-create-element": "^3.1.2",
-    "inferno-redux": "^3.1.2",
-    "microcomponent": "^3.1.1",
-    "nanomorph": "^4.0.5",
-    "nanomount": "^1.0.1",
-    "sheetify": "^6.0.2",
-    "transform-loader": "^0.2.4",
    "webpack": "^2.5.1"
  },
  "scripts": {
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/App.js
@ -26,12 +26,6 @@ export default function getApp(theState) {

    }

-    componentDidMount() {
-
-      this.showErrors({ message: 'PANIC!' });
-
-    }
-
    setStatusTo(msg) {

      this.setState(
@ -140,6 +134,7 @@ export default function getApp(theState) {
          setStatusTo: this.setStatusTo.bind(this),
          conduct: this.conduct.bind(this),
        },
+        areInputsDisabled: this.state.areInputsDisabled,
      });

      return createElement('div', null, [
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/Footer.js
@ -1,6 +1,5 @@
 import Inferno from 'inferno';
 import css from 'csjs-inject';
-import Component from 'inferno-component';

 export default function getFooter() {

@ -27,7 +26,7 @@ export default function getFooter() {
        </section>

        <footer class={scopedCss.controlRow + ' horFlex nowrap'}>
-          <input type="button" value="Готово" onClick={() => window.close()} />
+          <input type="button" value="Готово" disabled={props.areInputsDisabled} onClick={() => window.close()} />
          <a href="../troubleshoot/index.html">
            Проблемы?
          </a>
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/InfoLi.js
@ -1,5 +1,4 @@
 import Inferno from 'inferno';
-import Component from 'inferno-component';
 import css from 'csjs-inject';

 export default function getInfoRow() {
@ -83,8 +82,7 @@ export default function getInfoRow() {
  const camelToDash = (name) => name.replace(/([A-Z])/g, (_, p1) => '-' + p1.toLowerCase());
  // const dashToCamel = (name) => name.replace(/-(.)/g, (_, p1) => p1.toUpperCase());

-
-  const InfoIcon = function InfoIcom(props) {
+  const InfoIcon = function InfoIcon(props) {

      return (
        <svg class="icon" style="position: relative; top: 0.08em">$
@ -94,9 +92,7 @@ export default function getInfoRow() {

  };

-  return class InfoRow extends Component {
-
-    render(props) {
+  return function InfoRow(props) {

    props = Object.assign({}, {
      idPrefix: '',
@ -107,7 +103,14 @@ export default function getInfoRow() {
    const iddy = props.idPrefix + ( props.ifDashify ? camelToDash(props.conf.key) : props.conf.key );
    return (
      <li class={scopedCss.infoRow + ' horFlex'}>
-          <input type={props.type} name={props.name} checked={props.checked} id={iddy} onClick={props.onClick}/>
+        <input
+          type={props.type}
+          name={props.name}
+          checked={props.checked}
+          id={iddy}
+          onClick={props.onClick}
+          disabled={props.disabled}
+        />
        <div class={scopedCss.labelContainer}>
          <label for={iddy}>{props.conf.label}</label>
          {props.children}
@ -125,8 +128,6 @@ export default function getInfoRow() {
      </li>
    );

-    }
-
  };

 };
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/LastUpdateDate.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/LastUpdateDate.js
@ -0,0 +1,62 @@
+import Inferno from 'inferno';
+import Component from 'inferno-component';
+
+export default function getLastUpdateDate(theState) {
+
+  return class LastUpdateDate extends Component {
+
+    componentWillMount() {
+
+      this.onStorageChangedHandler = (changes) =>
+        changes.lastPacUpdateStamp.newValue && this.forceUpdate();
+
+      chrome.storage.onChanged.addListener( this.onStorageChangedHandler );
+
+    }
+
+    componentWillUnmount() {
+
+      chrome.storage.onChanged.removeListener( this.onStorageChangedHandler );
+
+    }
+
+    getDate(antiCensorRu) {
+
+      let dateForUser = 'никогда';
+      if( antiCensorRu.lastPacUpdateStamp ) {
+        let diff = Date.now() - antiCensorRu.lastPacUpdateStamp;
+        let units = 'мс';
+        const gauges = [
+          [1000, 'с'],
+          [60, 'мин'],
+          [60, 'ч'],
+          [24, 'дн'],
+          [7, ' недель'],
+          [4, ' месяцев'],
+        ];
+        for(const g of gauges) {
+          const diffy = Math.floor(diff / g[0]);
+          if (!diffy)
+            break;
+          diff = diffy;
+          units = g[1];
+        }
+        dateForUser = diff + units + ' назад';
+      }
+      return {
+        text: `${dateForUser} / ${antiCensorRu.pacUpdatePeriodInMinutes/60}ч`,
+        title: new Date(antiCensorRu.lastPacUpdateStamp).toLocaleString('ru-RU'),
+      };
+
+    }
+
+    render(props) {
+
+      const date = this.getDate(props.apis.antiCensorRu);
+      return (<div>Обновлялись: <span class="updateDate" title={date.title}>{ date.text }</span></div>);
+
+    }
+
+  };
+
+};
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/NotControlledWarning.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/NotControlledWarning.js
@ -1,11 +1,7 @@
 // @flow

-//import mComponent from 'microcomponent';
-//import html from 'bel';
 import css from 'csjs-inject';
-
 import Inferno from 'inferno';
-import Component from 'inferno-component';

 export default function getNotControlledWarning({ flags }) {

@ -34,15 +30,7 @@ export default function getNotControlledWarning({ flags }) {
    }
  `;

-  return class NotControlledWarning extends Component {
-
-    constructor(props) {
-
-      super(props);
-
-    }
-
-    render(props) {
+  return function NotControlledWarning(props) {

    return (
      <section class={cssClasses.warningContainer + " horPadded"} dangerouslySetInnerHTML={{ __html: props.utils.messages.whichExtensionHtml() }} />
@ -50,6 +38,4 @@ export default function getNotControlledWarning({ flags }) {

  }

-  };
-
 }
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/PacChooser.js
@ -3,9 +3,10 @@ import Component from 'inferno-component';
 import createElement from 'inferno-create-element';
 import css from 'csjs-inject';

+import getLastUpdateDate from './LastUpdateDate';
 import getInfoLi from './InfoLi';

-export default function getPacChooser(...args) {
+export default function getPacChooser(theState) {

  const scopedCss = css`
    /* OTHER VERSION */
@ -45,57 +46,8 @@ export default function getPacChooser(...args) {

  `;

-  class LastUpdateDate extends Component {
-
-    constructor(props) {
-
-      super(props);
-      chrome.storage.onChanged.addListener(
-        (changes) => changes.lastPacUpdateStamp.newValue && this.forceUpdate()
-      );
-
-    }
-
-    getDate(antiCensorRu) {
-
-      let dateForUser = 'никогда';
-      if( antiCensorRu.lastPacUpdateStamp ) {
-        let diff = Date.now() - antiCensorRu.lastPacUpdateStamp;
-        let units = 'мс';
-        const gauges = [
-          [1000, 'с'],
-          [60, 'мин'],
-          [60, 'ч'],
-          [24, 'дн'],
-          [7, ' недель'],
-          [4, ' месяцев'],
-        ];
-        for(const g of gauges) {
-          const diffy = Math.floor(diff / g[0]);
-          if (!diffy)
-            break;
-          diff = diffy;
-          units = g[1];
-        }
-        dateForUser = diff + units + ' назад';
-      }
-      return {
-        text: `${dateForUser} / ${antiCensorRu.pacUpdatePeriodInMinutes/60}ч`,
-        title: new Date(antiCensorRu.lastPacUpdateStamp).toLocaleString('ru-RU'),
-      };
-
-    }
-
-    render(props) {
-
-      const date = this.getDate(props.apis.antiCensorRu);
-      return (<div>Обновлялись: <span class="updateDate" title={date.title}>{ date.text }</span></div>);
-
-    }
-
-  }
-
-  const InfoLi = getInfoLi(...args);
+  const LastUpdateDate = getLastUpdateDate(theState);
+  const InfoLi = getInfoLi(theState);

  return class PacChooser extends Component {

@ -170,6 +122,7 @@ export default function getPacChooser(...args) {
                  type="radio"
                  name="pacProvider"
                  checked={iddyToCheck === provConf.key}
+                  disabled={props.areInputsDisabled}
                >
                  &nbsp;<a href="" class={scopedCss.updateButton} onClick={(evt) => { evt.preventDefault(); updatePac(); }}>[обновить]</a>
                </InfoLi>)
@ -181,6 +134,7 @@ export default function getPacChooser(...args) {
              name="pacProvider"
              conf={{key: 'none', label: 'Отключить'}}
              checked={iddyToCheck === 'none'}
+              disabled={props.areInputsDisabled}
            />
          </ul>
          <div id="updateMessage" class="horFlex" style="align-items: center">
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/components/TabPanel.js
@ -1,6 +1,3 @@
-//import mComponent from 'microcomponent';
-//import html from 'bel';
-
 import Inferno, { linkEvent } from 'inferno';
 import Component from 'inferno-component';
 import css from 'csjs-inject';
@ -99,8 +96,8 @@ export default function getTabsPannel({ flags }) {
      {
        visibility: initial;
      }
-      .navLabels li:after {
-        content: '\\a0';
+      .navLabels li {
+        margin: 0 0.125em; /* 1.5px */
      }

    /* LABELS ends. */
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/globalCss.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/globalCss.js
@ -1,4 +1,4 @@
-export default function append(document, props) {
+export default function append(document, { flags }) {

  // innerText converts \n to <br>, so:
  document.head.querySelector('style').innerHTML = `
@ -12,7 +12,7 @@ export default function append(document, props) {
      --cr-icon-selected: #d7d7d7;
      --cr-popup-border: #bababa;
      --cr-grey-panel: #f2f2f2;
-      max-width: 24em;
+      ${ flags.ifInsideOptionsPage ? '' : 'max-width: 24em;' }
    }

    /* BASE ELEMENTS */
@ -68,7 +68,7 @@ export default function append(document, props) {

    /* IF INSIDE OPTIONS */
    ${
-      props.flags.ifInsideOptionsPage
+      flags.ifInsideOptionsPage
        ? `

            ul, ol {
--- a/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/index.js
+++ b/extensions/chromium/runet-censorship-bypass/src/extension-common/pages/options/src/index.js
@ -1,15 +1,10 @@
 // @flow

 import Inferno from 'inferno';
-import Component from 'inferno-component';
 import createElement from 'inferno-create-element';
-
-import { createStore } from 'redux';
-
-import css from 'csjs-inject';
 import appendGlobalCss from './globalCss';
-
 import getApp from './components/App';
+
 /*
       #list-of-notifiers {
          margin-left: 0.4em;