refactor: migrate remaining angular components to react (#833)

* refactor: menuRow directive to MenuRow component * refactor: migrate footer to react * refactor: migrate actions menu to react * refactor: migrate history menu to react * fix: click outside handler use capture to trigger event before re-render occurs which would otherwise cause node.contains to return incorrect result (specifically for the account menu) * refactor: migrate revision preview modal to react * refactor: migrate permissions modal to react * refactor: migrate password wizard to react * refactor: remove unused input modal directive * refactor: remove unused delay hide component * refactor: remove unused filechange directive * refactor: remove unused elemReady directive * refactor: remove unused sn-enter directive * refactor: remove unused lowercase directive * refactor: remove unused autofocus directive * refactor(wip): note view to react * refactor: use mutation observer to deinit textarea listeners * refactor: migrate challenge modal to react * refactor: migrate note group view to react * refactor(wip): migrate remaining classes * fix: navigation parent ref * refactor: fully remove angular assets * fix: account switcher * fix: application view state * refactor: remove unused password wizard type * fix: revision preview and permissions modal * fix: remove angular comment * refactor: react panel resizers for editor * feat: simple panel resizer * fix: use simple panel resizer everywhere * fix: simplify panel resizer state * chore: rename simple panel resizer to panel resizer * refactor: simplify column layout * fix: editor mount safety check * fix: use inline onLoad callback for iframe, as setting onload after it loads will never call it * chore: fix note view test * chore(deps): upgrade snjs
2022-01-30 19:01:30 -06:00
parent 0ecbde6bac
commit 50c92619ce
117 changed files with 4715 additions and 5309 deletions
--- a/app/assets/javascripts/components/PermissionsModal.tsx
+++ b/app/assets/javascripts/components/PermissionsModal.tsx
@@ -0,0 +1,94 @@
+import { WebApplication } from '@/ui_models/application';
+import { SNComponent } from '@standardnotes/snjs';
+import { Component } from 'preact';
+import { findDOMNode, unmountComponentAtNode } from 'preact/compat';
+
+interface Props {
+  application: WebApplication;
+  callback: (approved: boolean) => void;
+  component: SNComponent;
+  permissionsString: string;
+}
+
+export class PermissionsModal extends Component<Props> {
+  getElement(): Element | null {
+    return findDOMNode(this);
+  }
+
+  dismiss = () => {
+    const elem = this.getElement();
+    if (!elem) {
+      return;
+    }
+
+    const parent = elem.parentElement;
+    if (!parent) {
+      return;
+    }
+    parent.remove();
+    unmountComponentAtNode(parent);
+  };
+
+  accept = () => {
+    this.props.callback(true);
+    this.dismiss();
+  };
+
+  deny = () => {
+    this.props.callback(false);
+    this.dismiss();
+  };
+
+  render() {
+    return (
+      <div className="sk-modal">
+        <div onClick={this.deny} className="sk-modal-background" />
+        <div id="permissions-modal" className="sk-modal-content">
+          <div className="sn-component">
+            <div className="sk-panel">
+              <div className="sk-panel-header">
+                <div className="sk-panel-header-title">Activate Component</div>
+                <a onClick={this.deny} className="sk-a info close-button">
+                  Cancel
+                </a>
+              </div>
+              <div className="sk-panel-content">
+                <div className="sk-panel-section">
+                  <div className="sk-panel-row">
+                    <div className="sk-h2">
+                      <strong>{this.props.component.name}</strong>
+                      {' would like to interact with your '}
+                      {this.props.permissionsString}
+                    </div>
+                  </div>
+                  <div className="sk-panel-row">
+                    <p className="sk-p">
+                      Components use an offline messaging system to communicate.
+                      Learn more at{' '}
+                      <a
+                        href="https://standardnotes.com/permissions"
+                        rel="noopener"
+                        target="_blank"
+                        className="sk-a info"
+                      >
+                        https://standardnotes.com/permissions.
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </div>
+              <div className="sk-panel-footer">
+                <button
+                  onClick={this.accept}
+                  className="sn-button info block w-full text-base py-3"
+                >
+                  Continue
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}