perf/modules/commit-detail-picker-sk/commit-detail-picker-sk.js

/**
 * @module modules/commit-detail-picker-sk
 * @description <h2><code>commit-detail-picker-sk</code></h2>
 *
 * @evt commit-selected - Event produced when a commit is selected. The
 *     the event detail contains the serialized cid.CommitDetail.
 *
 *      {
 *        author: "foo (foo@example.org)",
 *        url: "skia.googlesource.com/bar",
 *        message: "Commit from foo.",
 *        ts: 1439649751,
 *      },
 *
 * @attr {Number} selected - The index of the selected commit.
 *
 */

import '../commit-detail-panel-sk'
import 'elements-sk/styles/buttons'

import { define } from 'elements-sk/define'
import { html, render } from 'lit-html'
import { ElementSk } from '../../../infra-sk/modules/ElementSk'
import dialogPolyfill from 'dialog-polyfill'

const NO_COMMIT_SELECTED_MSG = 'Choose a commit.';

function _titleFrom(ele) {
  const index = ele.selected;
  if (index === -1) {
    return NO_COMMIT_SELECTED_MSG;
  }
  const d = ele._details[index];
  if (!d) {
    return NO_COMMIT_SELECTED_MSG;
  }
  return `${d.author} -  ${d.message}`;
}

const template = (ele) => html`
  <button @click=${ele._open}>${_titleFrom(ele)}</button>
  <dialog>
    <commit-detail-panel-sk @commit-selected='${ele._panelSelect}' .details='${ele._details}' selectable selected=${ele.selected}></commit-detail-panel-sk>
    <button @click=${ele._close}>Close</button>
  </dialog>
`;

define('commit-detail-picker-sk', class extends ElementSk {
  constructor() {
    super(template);
    this._details = [];
  }

  connectedCallback() {
    super.connectedCallback();
    this._upgradeProperty('details');
    this._render();
    this._dialog = this.querySelector('dialog');
    dialogPolyfill.registerDialog(this._dialog);
  }

  _panelSelect(e) {
    this.selected = e.detail.selected;
    this._render();
  }

  _close() {
    this._dialog.close();
    this._render();
  }

  _open() {
    this._dialog.showModal();
    this._render();
  }

  static get observedAttributes() {
    return ['selected'];
  }

  /** @prop selected {string} Mirrors the selected attribute. */
  get selected() { return +this.getAttribute('selected'); }
  set selected(val) {
    this.setAttribute('selected', val);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    this._render();
  }

  /** @prop details {Array} An array of serialized cid.CommitDetail, e.g.
   *
   *  [
   *     {
   *       author: "foo (foo@example.org)",
   *       url: "skia.googlesource.com/bar",
   *       message: "Commit from foo.",
   *       ts: 1439649751,
   *     },
   *     ...
   *  ]
   */
  get details() { return this._details }
  set details(val) {
    this._details = val;
    this._render();
  }

});