paulmataruso/zulip-desktop
1
0
Fork 0
mirror of https://github.com/zulip/zulip-desktop.git synced 2025-11-04 14:03:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Explode BaseComponent class to a function.

Browse Source 
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit is contained in:
Anders Kaseorg
2021-04-01 19:14:49 -07:00
parent 54f02c9616
commit 07ffb09391
11 changed files with 28 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/renderer/js/components/base.ts
View File

@@ -1,9 +1,7 @@
import type {HTML} from "../../../common/html"; import type {HTML} from "../../../common/html";
export default class BaseComponent { export function generateNodeFromHTML(html: HTML): Element | null {
generateNodeFromHTML(html: HTML): Element | null {
const wrapper = document.createElement("div"); const wrapper = document.createElement("div");
wrapper.innerHTML = html.html; wrapper.innerHTML = html.html;
return wrapper.firstElementChild; return wrapper.firstElementChild;
}
} }

3
app/renderer/js/components/functional-tab.ts
View File

@@ -1,6 +1,7 @@
import type {HTML} from "../../../common/html"; import type {HTML} from "../../../common/html";
import {html} from "../../../common/html"; import {html} from "../../../common/html";
import {generateNodeFromHTML} from "./base";
import type {TabProps} from "./tab"; import type {TabProps} from "./tab";
import Tab from "./tab"; import Tab from "./tab";
@@ -10,7 +11,7 @@ export default class FunctionalTab extends Tab {
constructor(props: TabProps) { constructor(props: TabProps) {
super(props); super(props);
this.$el = this.generateNodeFromHTML(this.templateHTML()); this.$el = generateNodeFromHTML(this.templateHTML());
if (this.props.name !== "Settings") { if (this.props.name !== "Settings") {
this.props.$root.append(this.$el); this.props.$root.append(this.$el);
this.$closeButton = this.$el.querySelector(".server-tab-badge"); this.$closeButton = this.$el.querySelector(".server-tab-badge");

3
app/renderer/js/components/server-tab.ts
View File

@@ -4,6 +4,7 @@ import type {HTML} from "../../../common/html";
import {html} from "../../../common/html"; import {html} from "../../../common/html";
import * as SystemUtil from "../utils/system-util"; import * as SystemUtil from "../utils/system-util";
import {generateNodeFromHTML} from "./base";
import type {TabProps} from "./tab"; import type {TabProps} from "./tab";
import Tab from "./tab"; import Tab from "./tab";
@@ -13,7 +14,7 @@ export default class ServerTab extends Tab {
constructor(props: TabProps) { constructor(props: TabProps) {
super(props); super(props);
this.$el = this.generateNodeFromHTML(this.templateHTML()); this.$el = generateNodeFromHTML(this.templateHTML());
this.props.$root.append(this.$el); this.props.$root.append(this.$el);
this.registerListeners(); this.registerListeners();
this.$badge = this.$el.querySelector(".server-tab-badge"); this.$badge = this.$el.querySelector(".server-tab-badge");

5
app/renderer/js/components/tab.ts
View File

@@ -1,4 +1,3 @@
import BaseComponent from "./base";
import type WebView from "./webview"; import type WebView from "./webview";
export interface TabProps { export interface TabProps {
@@ -16,13 +15,11 @@ export interface TabProps {
onDestroy?: () => void; onDestroy?: () => void;
} }
export default class Tab extends BaseComponent { export default class Tab {
props: TabProps; props: TabProps;
webview: WebView; webview: WebView;
$el: Element; $el: Element;
constructor(props: TabProps) { constructor(props: TabProps) {
super();
this.props = props; this.props = props;
this.webview = this.props.webview; this.webview = this.props.webview;
} }

10
app/renderer/js/components/webview.ts
View File

@@ -6,7 +6,7 @@ import * as ConfigUtil from "../../../common/config-util";
import {HTML, html} from "../../../common/html"; import {HTML, html} from "../../../common/html";
import * as SystemUtil from "../utils/system-util"; import * as SystemUtil from "../utils/system-util";
import BaseComponent from "./base"; import {generateNodeFromHTML} from "./base";
import {contextMenu} from "./context-menu"; import {contextMenu} from "./context-menu";
import handleExternalLink from "./handle-external-link"; import handleExternalLink from "./handle-external-link";
@@ -30,7 +30,7 @@ interface WebViewProps {
hasPermission?: (origin: string, permission: string) => boolean; hasPermission?: (origin: string, permission: string) => boolean;
} }
export default class WebView extends BaseComponent { export default class WebView {
props: WebViewProps; props: WebViewProps;
zoomFactor: number; zoomFactor: number;
badgeCount: number; badgeCount: number;
@@ -41,8 +41,6 @@ export default class WebView extends BaseComponent {
domReady?: Promise<void>; domReady?: Promise<void>;
constructor(props: WebViewProps) { constructor(props: WebViewProps) {
super();
this.props = props; this.props = props;
this.zoomFactor = 1; this.zoomFactor = 1;
this.loading = true; this.loading = true;
@@ -74,9 +72,7 @@ export default class WebView extends BaseComponent {
} }
init(): void { init(): void {
this.$el = this.generateNodeFromHTML( this.$el = generateNodeFromHTML(this.templateHTML()) as Electron.WebviewTag;
this.templateHTML(),
) as Electron.WebviewTag;
this.domReady = new Promise((resolve) => { this.domReady = new Promise((resolve) => {
this.$el.addEventListener( this.$el.addEventListener(
"dom-ready", "dom-ready",

6
app/renderer/js/pages/preference/base-section.ts
View File

@@ -2,7 +2,7 @@ import {ipcRenderer} from "electron";
import type {HTML} from "../../../../common/html"; import type {HTML} from "../../../../common/html";
import {html} from "../../../../common/html"; import {html} from "../../../../common/html";
import BaseComponent from "../../components/base"; import {generateNodeFromHTML} from "../../components/base";
interface BaseSectionProps { interface BaseSectionProps {
$element: HTMLElement; $element: HTMLElement;
@@ -11,13 +11,13 @@ interface BaseSectionProps {
clickHandler: () => void; clickHandler: () => void;
} }
export default class BaseSection extends BaseComponent { export default class BaseSection {
generateSettingOption(props: BaseSectionProps): void { generateSettingOption(props: BaseSectionProps): void {
const {$element, disabled, value, clickHandler} = props; const {$element, disabled, value, clickHandler} = props;
$element.textContent = ""; $element.textContent = "";
const $optionControl = this.generateNodeFromHTML( const $optionControl = generateNodeFromHTML(
this.generateOptionHTML(value, disabled), this.generateOptionHTML(value, disabled),
); );
$element.append($optionControl); $element.append($optionControl);

7
app/renderer/js/pages/preference/find-accounts.ts
View File

@@ -1,20 +1,19 @@
import type {HTML} from "../../../../common/html"; import type {HTML} from "../../../../common/html";
import {html} from "../../../../common/html"; import {html} from "../../../../common/html";
import * as t from "../../../../common/translation-util"; import * as t from "../../../../common/translation-util";
import BaseComponent from "../../components/base"; import {generateNodeFromHTML} from "../../components/base";
import * as LinkUtil from "../../utils/link-util"; import * as LinkUtil from "../../utils/link-util";
interface FindAccountsProps { interface FindAccountsProps {
$root: Element; $root: Element;
} }
export default class FindAccounts extends BaseComponent { export default class FindAccounts {
props: FindAccountsProps; props: FindAccountsProps;
$findAccounts: Element | null; $findAccounts: Element | null;
$findAccountsButton: Element | null; $findAccountsButton: Element | null;
$serverUrlField: HTMLInputElement | null; $serverUrlField: HTMLInputElement | null;
constructor(props: FindAccountsProps) { constructor(props: FindAccountsProps) {
super();
this.props = props; this.props = props;
} }
@@ -35,7 +34,7 @@ export default class FindAccounts extends BaseComponent {
} }
init(): void { init(): void {
this.$findAccounts = this.generateNodeFromHTML(this.templateHTML()); this.$findAccounts = generateNodeFromHTML(this.templateHTML());
this.props.$root.append(this.$findAccounts); this.props.$root.append(this.$findAccounts);
this.$findAccountsButton = this.$findAccounts.querySelector( this.$findAccountsButton = this.$findAccounts.querySelector(
"#find-accounts-button", "#find-accounts-button",

7
app/renderer/js/pages/preference/nav.ts
View File

@@ -1,7 +1,7 @@
import type {HTML} from "../../../../common/html"; import type {HTML} from "../../../../common/html";
import {html} from "../../../../common/html"; import {html} from "../../../../common/html";
import * as t from "../../../../common/translation-util"; import * as t from "../../../../common/translation-util";
import BaseComponent from "../../components/base"; import {generateNodeFromHTML} from "../../components/base";
export type NavItem = export type NavItem =
| "General" | "General"
@@ -15,12 +15,11 @@ interface PreferenceNavProps {
onItemSelected: (navItem: NavItem) => void; onItemSelected: (navItem: NavItem) => void;
} }
export default class PreferenceNav extends BaseComponent { export default class PreferenceNav {
props: PreferenceNavProps; props: PreferenceNavProps;
navItems: NavItem[]; navItems: NavItem[];
$el: Element; $el: Element;
constructor(props: PreferenceNavProps) { constructor(props: PreferenceNavProps) {
super();
this.props = props; this.props = props;
this.navItems = [ this.navItems = [
"General", "General",
@@ -50,7 +49,7 @@ export default class PreferenceNav extends BaseComponent {
} }
init(): void { init(): void {
this.$el = this.generateNodeFromHTML(this.templateHTML()); this.$el = generateNodeFromHTML(this.templateHTML());
this.props.$root.append(this.$el); this.props.$root.append(this.$el);
this.registerListeners(); this.registerListeners();
} }

7
app/renderer/js/pages/preference/new-server-form.ts
View File

@@ -3,7 +3,7 @@ import {ipcRenderer, remote} from "electron";
import {html} from "../../../../common/html"; import {html} from "../../../../common/html";
import type {HTML} from "../../../../common/html"; import type {HTML} from "../../../../common/html";
import * as t from "../../../../common/translation-util"; import * as t from "../../../../common/translation-util";
import BaseComponent from "../../components/base"; import {generateNodeFromHTML} from "../../components/base";
import * as DomainUtil from "../../utils/domain-util"; import * as DomainUtil from "../../utils/domain-util";
import * as LinkUtil from "../../utils/link-util"; import * as LinkUtil from "../../utils/link-util";
@@ -14,13 +14,12 @@ interface NewServerFormProps {
onChange: () => void; onChange: () => void;
} }
export default class NewServerForm extends BaseComponent { export default class NewServerForm {
props: NewServerFormProps; props: NewServerFormProps;
$newServerForm: Element; $newServerForm: Element;
$saveServerButton: HTMLButtonElement; $saveServerButton: HTMLButtonElement;
$newServerUrl: HTMLInputElement; $newServerUrl: HTMLInputElement;
constructor(props: NewServerFormProps) { constructor(props: NewServerFormProps) {
super();
this.props = props; this.props = props;
} }
@@ -68,7 +67,7 @@ export default class NewServerForm extends BaseComponent {
} }
initForm(): void { initForm(): void {
this.$newServerForm = this.generateNodeFromHTML(this.templateHTML()); this.$newServerForm = generateNodeFromHTML(this.templateHTML());
this.$saveServerButton = this.$newServerForm.querySelector("#connect"); this.$saveServerButton = this.$newServerForm.querySelector("#connect");
this.props.$root.textContent = ""; this.props.$root.textContent = "";
this.props.$root.append(this.$newServerForm); this.props.$root.append(this.$newServerForm);

4
app/renderer/js/pages/preference/preference.ts
View File

@@ -1,7 +1,6 @@
import {ipcRenderer} from "electron"; import {ipcRenderer} from "electron";
import type {DNDSettings} from "../../../../common/dnd-util"; import type {DNDSettings} from "../../../../common/dnd-util";
import BaseComponent from "../../components/base";
import ConnectedOrgSection from "./connected-org-section"; import ConnectedOrgSection from "./connected-org-section";
import GeneralSection from "./general-section"; import GeneralSection from "./general-section";
@@ -18,13 +17,12 @@ type Section =
| ConnectedOrgSection | ConnectedOrgSection
| ShortcutsSection; | ShortcutsSection;
export default class PreferenceView extends BaseComponent { export default class PreferenceView {
$sidebarContainer: Element; $sidebarContainer: Element;
$settingsContainer: Element; $settingsContainer: Element;
nav: Nav; nav: Nav;
section: Section; section: Section;
constructor() { constructor() {
super();
this.$sidebarContainer = document.querySelector("#sidebar"); this.$sidebarContainer = document.querySelector("#sidebar");
this.$settingsContainer = document.querySelector("#settings-container"); this.$settingsContainer = document.querySelector("#settings-container");
} }

7
app/renderer/js/pages/preference/server-info-form.ts
View File

@@ -5,7 +5,7 @@ import type {HTML} from "../../../../common/html";
import * as Messages from "../../../../common/messages"; import * as Messages from "../../../../common/messages";
import * as t from "../../../../common/translation-util"; import * as t from "../../../../common/translation-util";
import type {ServerConf} from "../../../../common/types"; import type {ServerConf} from "../../../../common/types";
import BaseComponent from "../../components/base"; import {generateNodeFromHTML} from "../../components/base";
import * as DomainUtil from "../../utils/domain-util"; import * as DomainUtil from "../../utils/domain-util";
const {dialog} = remote; const {dialog} = remote;
@@ -17,7 +17,7 @@ interface ServerInfoFormProps {
onChange: () => void; onChange: () => void;
} }
export default class ServerInfoForm extends BaseComponent { export default class ServerInfoForm {
props: ServerInfoFormProps; props: ServerInfoFormProps;
$serverInfoForm: Element; $serverInfoForm: Element;
$serverInfoAlias: Element; $serverInfoAlias: Element;
@@ -25,7 +25,6 @@ export default class ServerInfoForm extends BaseComponent {
$deleteServerButton: Element; $deleteServerButton: Element;
$openServerButton: Element; $openServerButton: Element;
constructor(props: ServerInfoFormProps) { constructor(props: ServerInfoFormProps) {
super();
this.props = props; this.props = props;
} }
@@ -61,7 +60,7 @@ export default class ServerInfoForm extends BaseComponent {
} }
initForm(): void { initForm(): void {
this.$serverInfoForm = this.generateNodeFromHTML(this.templateHTML()); this.$serverInfoForm = generateNodeFromHTML(this.templateHTML());
this.$serverInfoAlias = this.$serverInfoForm.querySelector( this.$serverInfoAlias = this.$serverInfoForm.querySelector(
".server-info-alias", ".server-info-alias",
); );