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/MenuRow.tsx
+++ b/app/assets/javascripts/components/MenuRow.tsx
@@ -0,0 +1,120 @@
+import { Component } from 'preact';
+
+type RowProps = {
+  action?: (...args: any[]) => void;
+  actionArgs?: any[];
+  buttonAction?: () => void;
+  buttonClass?: string;
+  buttonText?: string;
+  desc?: string;
+  disabled?: boolean;
+  circle?: string;
+  circleAlign?: string;
+  faded?: boolean;
+  hasButton?: boolean;
+  label: string;
+  spinnerClass?: string;
+  stylekitClass?: string;
+  subRows?: RowProps[];
+  subtitle?: string;
+};
+
+type Props = RowProps;
+
+export class MenuRow extends Component<Props> {
+  onClick = ($event: Event) => {
+    if (this.props.disabled || !this.props.action) {
+      return;
+    }
+    $event.stopPropagation();
+
+    if (this.props.actionArgs) {
+      this.props.action(...this.props.actionArgs);
+    } else {
+      this.props.action();
+    }
+  };
+
+  clickAccessoryButton = ($event: Event) => {
+    if (this.props.disabled) {
+      return;
+    }
+    $event.stopPropagation();
+    this.props.buttonAction?.();
+  };
+
+  render() {
+    return (
+      <div
+        title={this.props.desc}
+        onClick={this.onClick}
+        className="sk-menu-panel-row row"
+      >
+        <div className="sk-menu-panel-column">
+          <div className="left">
+            {this.props.circle &&
+              (!this.props.circleAlign || this.props.circleAlign == 'left') && (
+                <div className="sk-menu-panel-column">
+                  <div className={this.props.circle + ' sk-circle small'} />
+                </div>
+              )}
+
+            <div
+              className={
+                (this.props.faded || this.props.disabled ? 'faded' : '') +
+                ' sk-menu-panel-column'
+              }
+            >
+              <div className={this.props.stylekitClass + ' sk-label'}>
+                {this.props.label}
+              </div>
+              {this.props.subtitle && (
+                <div className="sk-sublabel">{this.props.subtitle}</div>
+              )}
+              {this.props.children}
+            </div>
+          </div>
+
+          {this.props.subRows && this.props.subRows.length > 0 && (
+            <div className="sk-menu-panel-subrows">
+              {this.props.subRows.map((row) => {
+                return (
+                  <MenuRow
+                    action={row.action}
+                    actionArgs={row.actionArgs}
+                    label={row.label}
+                    spinnerClass={row.spinnerClass}
+                    subtitle={row.subtitle}
+                  />
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {this.props.circle && this.props.circleAlign == 'right' && (
+          <div className="sk-menu-panel-column">
+            <div className={this.props.circle + ' sk-circle small'} />
+          </div>
+        )}
+
+        {this.props.hasButton && (
+          <div className="sk-menu-panel-column">
+            <button
+              className={this.props.buttonClass + ' sn-button small'}
+              onClick={this.props.buttonAction!}
+            >
+              {this.props.buttonText}
+            </button>
+          </div>
+        )}
+
+        {this.props.spinnerClass && (
+          <div className="sk-menu-panel-column">
+            <div className={this.props.spinnerClass + ' sk-spinner small'} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}