How to use the etch.dom function in etch

To help you get started, we’ve selected a few etch examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github TypeStrong / atom-typescript / dist / main / atom / components / statusPanel / index.js View on Github external
renderPending() {
        if (this.props.pending.length > 0) {
            return (etch.dom(tooltip_1.Tooltip, { title: `Pending Requests: <ul>${this.props.pending
                    .map(({ title }) =&gt; `<li>${title}</li>`)
                    .join("")}</ul>`, html: true },
                etch.dom("span", { ref: "pendingCounter" }, this.props.pending.length.toString()),
                etch.dom("span", { ref: "pendingSpinner", className: "loading loading-spinner-tiny inline-block", style: { marginLeft: "5px", opacity: "0.5", verticalAlign: "sub" } })));
        }
        else
            return null;
    }
    renderConfigPath() {
github TypeStrong / atom-typescript / dist / main / atom / views / renameView.js View on Github external
render() {
        return (etch.dom("div", { className: "atomts-rename-view", ref: "main" },
            etch.dom("div", { className: "block" },
                etch.dom("div", null,
                    etch.dom("span", { ref: "title" }, this.props.title),
                    etch.dom("span", { className: "subtle-info-message" },
                        etch.dom("span", null, "Close this panel with "),
                        etch.dom("span", { className: "highlight" }, "esc"),
                        etch.dom("span", null, " key. And commit with the "),
                        etch.dom("span", { className: "highlight" }, "enter"),
                        etch.dom("span", null, " key."))),
                etch.dom("div", { className: "find-container block" },
                    etch.dom("div", { className: "editor-container" },
                        etch.dom(miniEditor_1.MiniEditor, { ref: "editor", initialText: this.props.initialText, selectAll: this.props.selectAll }))),
                this.renderValidationMessage())));
    }
    async destroy() {
github TypeStrong / atom-typescript / dist / main / atom / sigHelp / tooltipView.js View on Github external
        return params.map((p, i) => (etch.dom("span", { className: `atom-typescript-tooltip-signature-help-parameter` },
            i > 0 ? ", " : null,
            etch.dom("span", { className: i === selIdx ? "atom-typescript-tooltip-signature-help-selected" : undefined }, utils_1.partsToStr(p.displayParts)))));
    }
github TypeStrong / atom-typescript / dist / main / atom / components / statusPanel / index.js View on Github external
renderStatus() {
        if (this.props.buildStatus) {
            return etch.dom(buildStatus_1.BuildStatus, { buildStatus: this.props.buildStatus });
        }
        return null;
    }
    renderProgress() {
github TypeStrong / atom-typescript / dist / main / atom / sigHelp / tooltipView.js View on Github external
render() {
        return (etch.dom("div", { className: "atom-typescript-tooltip tooltip", key: this.sigHelpHash() },
            etch.dom("div", { className: "tooltip-inner" }, this.tooltipContents())));
    }
    sigHelpHash() {
github TypeStrong / atom-typescript / dist / main / atom / components / statusPanel / index.js View on Github external
renderVersion() {
        if (this.props.clientVersion !== undefined) {
            return etch.dom(tooltip_1.Tooltip, { title: "Active TypeScript version" }, this.props.clientVersion);
        }
        return null;
    }
    renderPending() {
github TypeStrong / atom-typescript / dist / main / atom / components / statusPanel / index.js View on Github external
renderConfigPath() {
        if (this.props.tsConfigPath !== undefined) {
            return etch.dom(configPath_1.ConfigPath, { tsConfigPath: this.props.tsConfigPath });
        }
        return null;
    }
    renderStatus() {
github TypeStrong / atom-typescript / dist / main / atom / sigHelp / tooltipView.js View on Github external
return sigHelp.items.map((sig, idx) => (etch.dom("div", { className: className(idx) },
            etch.dom("div", null,
                utils_1.partsToStr(sig.prefixDisplayParts),
                this.renderSigHelpParams(sig.parameters, sigHelp.argumentIndex),
                utils_1.partsToStr(sig.suffixDisplayParts),
                etch.dom("div", { className: "atom-typescript-tooltip-signature-help-documentation" }, utils_1.partsToStr(sig.documentation))))));
    }
github wonderunit / storyboarder / src / js / window / scene-timeline-view.js View on Github external
let boardsViews = this.scene.boards.map((board, index) =>
        etch.dom(BoardView, {
          pixelsPerMsec: this.pixelsPerMsec,
          scale: this.scale,
          board: board,
          src: this.mini ? undefined : this.getSrcByUid(board.uid),
          kind: 'board',
          scene: this.scene,
          onBoardPointerDown: this.onBoardPointerDown,
          onBoardPointerUp: this.onBoardPointerUp,
          active: this.currentBoardIndex === index,
          enabled: !this.state.draggableBoardView,
          dragging: !!(this.state.draggableBoardView &&
                    this.state.draggableBoardView.board === board),
          mini: this.mini,
          getAudioBufferByFilename: this.getAudioBufferByFilename
        }))
github TypeStrong / atom-typescript / dist / main / atom / sigHelp / tooltipView.js View on Github external
return sigHelp.items.map((sig, idx) => (etch.dom("div", { className: className(idx) },
            etch.dom("div", null,
                utils_1.partsToStr(sig.prefixDisplayParts),
                this.renderSigHelpParams(sig.parameters, sigHelp.argumentIndex),
                utils_1.partsToStr(sig.suffixDisplayParts),
                etch.dom("div", { className: "atom-typescript-tooltip-signature-help-documentation" }, utils_1.partsToStr(sig.documentation))))));
    }

etch

Perform virtual DOM updates based on changes to a data model.

MIT
Latest version published 4 years ago

Package Health Score

53 / 100
Full package analysis