obsidian-douban/src/douban/data/search/DoubanSearchModal.ts

import { App, Editor, Modal, TextComponent } from "obsidian";

import DoubanPlugin from "main";
import { i18nHelper } from "src/lang/helper";

export class DoubanSearchModal extends Modal {
	searchTerm: string;
	plugin: DoubanPlugin;
	editor: Editor;
  
	constructor(app: App, plugin: DoubanPlugin, editor: Editor) {
	  super(app);
	  this.plugin = plugin;
	  this.editor = editor;
	}
  
	onOpen() {
	  let { contentEl } = this;

	  contentEl.createEl("h3", { text: i18nHelper.getMessage('110003') });
  
	  const inputs = contentEl.createDiv("inputs");
	  const searchInput = new TextComponent(inputs).onChange((searchTerm) => {
		this.searchTerm = searchTerm;
	  });
	  searchInput.inputEl.addClass("obsidian_douban_search_input");

	  searchInput.inputEl.focus();
	  searchInput.inputEl.addEventListener("keydown", (event) => {
		if (event.key === "Enter") {
		  this.close();
		}
	  });
	  


	  const controls = contentEl.createDiv("controls");
	  const searchButton = controls.createEl("button", {
		text: i18nHelper.getMessage('110004'),
		cls: "mod-cta",
		attr: {
		  autofocus: true,
		},
	  });
	  searchButton.addClass("obsidian_douban_search_button");

	  searchButton.addEventListener("click", this.close.bind(this));
	  const cancelButton = controls.createEl("button", { text:  i18nHelper.getMessage('110005') });
	  cancelButton.addEventListener("click", this.close.bind(this));
	  cancelButton.addClass("obsidian_douban_search_button");

	}

  
	async onClose() {
	  let { contentEl } = this;
  
	  contentEl.empty();
	  if (this.searchTerm) {
		await this.plugin.search(this.searchTerm, this.editor);
	}
	}

  }