@spectric/ui 0.0.20 → 0.0.22

package/src/components/table/cell.ts

@@ -1,177 +1,220 @@
-import { html, LitElement, PropertyValues } from 'lit';
-import { customElement, property, query, state, } from 'lit/decorators.js';
-import { HTMLElementTagWithEvents, ReactElementWithPropsAndEvents } from '../types';
-export const TableCellElementTag = "spectric-table-cell"
-import { ColumnSettings, DomRenderable, SpectricTableElement } from './table';
-import { cache } from 'lit/directives/cache.js';
-import { StyleInfo, styleMap } from 'lit/directives/style-map.js';
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import {
+  HTMLElementTagWithEvents,
+  ReactElementWithPropsAndEvents,
+} from "../types";
+export const TableCellElementTag = "spectric-table-cell";
+import { ColumnSettings, DomRenderable, SpectricTableElement } from "./table";
+import { cache } from "lit/directives/cache.js";
+import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 
 interface CellProps<T> {
-    column: ColumnSettings<T>
-    row: T
+  column: ColumnSettings<T>;
+  row: T;
 }
 
 export type FilterEvent<T> = {
-    value?: T,
-    include: boolean
-    column: ColumnSettings<T>
-    row: T
-}
+  value?: T;
+  include: boolean;
+  column: ColumnSettings<T>;
+  row: T;
+};
 
 /**
  * Pagination Element
  */
 @customElement(TableCellElementTag)
 export class TableCellElement<T> extends LitElement implements CellProps<T> {
-    @property({ type: Object, attribute: false })
-    row!: T;
-
-    @property({ type: Number, attribute: false })
-    index!: number;
-    @property({ type: Object, attribute: false })
-    column!: ColumnSettings<T>;
-    columns!: ColumnSettings<T>[];
-    table!: SpectricTableElement<T>
+  @property({ type: Object, attribute: false })
+  row!: T;
 
-    @state()
-    overflow: DomRenderable = ""
-    @query("td")
-    td!: HTMLTableCellElement
-    styleRules: StyleInfo = { whiteSpace: "", width: "" };
-    protected createRenderRoot(): HTMLElement | DocumentFragment {
-        return this
-    }
-    protected updated(_changedProperties: PropertyValues): void {
+  @property({ type: Number, attribute: false })
+  index!: number;
+  @property({ type: Object, attribute: false })
+  column!: ColumnSettings<T>;
+  columns!: ColumnSettings<T>[];
+  @property({ type: Object, attribute: false })
+  table!: SpectricTableElement<T>;
 
+  @state()
+  overflow: DomRenderable = "";
+  @query("td")
+  td!: HTMLTableCellElement;
+  styleRules: StyleInfo = { whiteSpace: "", width: "" };
+  protected createRenderRoot(): HTMLElement | DocumentFragment {
+    return this;
+  }
+  protected updated(_changedProperties: PropertyValues): void {}
+  _emitFilter(filter: FilterEvent<T>) {
+    this.dispatchEvent(
+      new CustomEvent<FilterEvent<T>>("filter", {
+        composed: true,
+        bubbles: true,
+        detail: filter,
+      })
+    );
+  }
+  _handleFilterOut = () => {
+    let value = undefined;
+    if (this.column.key && typeof this.row === "object") {
+      value = rowGetValue(this.row as Record<any, any>, this.column.key);
     }
-    _emitFilter(filter: FilterEvent<T>) {
-        this.dispatchEvent(new CustomEvent<FilterEvent<T>>("filter", {
-            composed: true,
-            bubbles: true,
-            detail: filter
-        }))
+    this._emitFilter({
+      include: false,
+      row: this.row,
+      value,
+      column: this.column,
+    });
+  };
+  _handleFilterFor = () => {
+    let value = undefined;
+    if (this.column.key && typeof this.row === "object") {
+      value = rowGetValue(this.row as Record<any, any>, this.column.key);
     }
-    _handleFilterOut = () => {
-        let value = undefined;
-        if (this.column.key && typeof this.row === "object") {
-            value = rowGetValue(this.row as Record<any, any>, this.column.key)
-        }
-        this._emitFilter({
-            include: false,
-            row: this.row,
-            value,
-            column: this.column
-        })
-
-    }
-    _handleFilterFor = () => {
-        let value = undefined;
-        if (this.column.key && typeof this.row === "object") {
-            value = rowGetValue(this.row as Record<any, any>, this.column.key)
-        }
-        this._emitFilter({
-            include: true,
-            row: this.row,
-            value,
-            column: this.column
-        })
+    this._emitFilter({
+      include: true,
+      row: this.row,
+      value,
+      column: this.column,
+    });
+  };
+  _displayOverflowTooltip = () => {
+    if (this.column.disableCellOverflowTooltip) {
+      this.overflow = null;
+      return;
     }
-    _displayTooltip = () => {
-        let div = this.querySelector("div.cell-contents")
-        let span = this.querySelector("span")
-        if (div && span) {
-            let spanBounds = span.getBoundingClientRect()
-            let divBounds = div.getBoundingClientRect()
-            if ((spanBounds.width * spanBounds.height) > (divBounds.width * divBounds.height)) {
-                console.log("We need to show a tooltip witht he content because we are overflowing")
-                this.overflow = this.getRenderedValue()
-                this.updateComplete.then(() => {
-                    let tooltip = this.querySelector("spectric-tooltip")
-                    if (tooltip) {
-                        tooltip.showToolTip()
-                    }
-                })
-            } else {
-                this.overflow = ""
-            }
-        }
+    let div = this.querySelector("div.cell-contents");
+    let span = this.querySelector("span");
+    if (div && span) {
+      let spanBounds = span.getBoundingClientRect();
+      let divBounds = div.getBoundingClientRect();
+      if (
+        spanBounds.width * spanBounds.height >
+        divBounds.width * divBounds.height
+      ) {
+        console.log(
+          "We need to show a tooltip with the content because we are overflowing"
+        );
+        this.overflow = this.getRenderedValue();
+        this.updateComplete.then(() => {
+          let tooltip = this.querySelector("spectric-tooltip");
+          if (tooltip) {
+            tooltip.showToolTip();
+          }
+        });
+      } else {
+        this.overflow = "";
+      }
     }
-    getRenderedValue() {
-        let rendered
-        if (this.column.render) {
-            rendered = this.column.render(this.row, this.index, this.table)
-        } else if (this.column.key && typeof this.row === 'object') {
-            rendered = rowGetValue(this.row as any, this.column.key)
-        } else {
-            rendered = html`error`
-        }
-        return rendered
+  };
+  getRenderedValue() {
+    let rendered;
+    if (this.column.render) {
+      rendered = this.column.render(this.row, this.index, this.table);
+    } else if (this.column.key && typeof this.row === "object") {
+      rendered = rowGetValue(this.row as any, this.column.key);
+    } else {
+      rendered = html`error`;
     }
-    protected render(): unknown {
-        let rendered = this.getRenderedValue()
-        let classes = ["cell-contents"]
-        if (this.column.filterable) {
-            classes.push("filterable")
-        }
-
-        let filterButtons = cache(this.column.filterable
-            ? html`<div class="table-cell-actions">
-            <spectric-button @click=${this._handleFilterOut} size="tiny" variant="text" icon tooltip="Filter Out Value">-</spectric-button>
-            <spectric-button @click=${this._handleFilterFor} size="tiny" variant="text" icon tooltip="Filter For Value">+</spectric-button></div>`
-            : null
-        )
-        this.styleRules = {
-            width: this.column.width ? this.column.width + "px" : null,
-            whiteSpace: this.column.whiteSpace || null
-        }
-        return html`
-            <td style=${styleMap(this.styleRules)} @mouseenter=${this._displayTooltip}>
-                ${filterButtons}
-                <div class=${classes.join(" ")}>${this.overflow ? html`<spectric-tooltip .text=${this.overflow}></spectric-tooltip>` : null}<span>${rendered}</span></div>
-            </td>
-            `
+    return rendered;
+  }
+  protected render(): unknown {
+    let rendered = this.getRenderedValue();
+    let classes = ["cell-contents"];
+    if (this.column.filterable) {
+      classes.push("filterable");
     }
 
+    let filterButtons = cache(
+      this.column.filterable
+        ? html`<div class="table-cell-actions">
+            <spectric-button
+              @click=${this._handleFilterOut}
+              size="tiny"
+              variant="text"
+              icon
+              tooltip="Filter Out Value"
+              >-</spectric-button
+            >
+            <spectric-button
+              @click=${this._handleFilterFor}
+              size="tiny"
+              variant="text"
+              icon
+              tooltip="Filter For Value"
+              >+</spectric-button
+            >
+          </div>`
+        : null
+    );
+    this.styleRules = {
+      width: this.column.width ? this.column.width + "px" : null,
+      whiteSpace: this.column.whiteSpace || null,
+    };
+    return html`
+      <td
+        style=${styleMap(this.styleRules)}
+        @mouseenter=${this._displayOverflowTooltip}
+      >
+        ${filterButtons}
+        <div class=${classes.join(" ")}>
+          ${this.overflow
+            ? html`<spectric-tooltip .text=${this.overflow}></spectric-tooltip>`
+            : null}<span>${rendered}</span>
+        </div>
+      </td>
+    `;
+  }
 }
 
 interface TableBodyEvents {
-    'filter': (event: CustomEvent<ColumnSettings<any>>) => void; //TODO filter events
+  filter: (event: CustomEvent<ColumnSettings<any>>) => void; //TODO filter events
 }
 
 declare global {
-    interface HTMLElementTagNameMap {
-        [TableCellElementTag]: HTMLElementTagWithEvents<TableCellElement<any>, TableBodyEvents>
-
+  interface HTMLElementTagNameMap {
+    [TableCellElementTag]: HTMLElementTagWithEvents<
+      TableCellElement<any>,
+      TableBodyEvents
+    >;
+  }
+  namespace JSX {
+    interface IntrinsicElements {
+      /**
+       * @see {@link DialogElement}
+       */
+      [TableCellElementTag]: ReactElementWithPropsAndEvents<
+        TableCellElement<any>,
+        CellProps<any>,
+        TableBodyEvents
+      >;
     }
+  }
+  namespace React {
     namespace JSX {
-        interface IntrinsicElements {
-            /**
-             * @see {@link DialogElement}
-             */
-            [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>;
-        }
-    }
-    namespace React {
-        namespace JSX {
-            interface IntrinsicElements {
-                /**
-                 * @see {@link DialogElement}
-                 */
-                [TableCellElementTag]: ReactElementWithPropsAndEvents<TableCellElement<any>, CellProps<any>, TableBodyEvents>
-            }
-        }
+      interface IntrinsicElements {
+        /**
+         * @see {@link DialogElement}
+         */
+        [TableCellElementTag]: ReactElementWithPropsAndEvents<
+          TableCellElement<any>,
+          CellProps<any>,
+          TableBodyEvents
+        >;
+      }
     }
+  }
 }
 
-
 export const rowGetValue = (context: Record<string, any>, key: string) => {
-    let path = key.split(".")
-    let value = context[path[0]]
-    if (value === null || value === undefined) {
-        return value
-    }
-    if (path.length > 1) {
-        value = rowGetValue(value, path.slice(1).join("."))
-    }
-    return value
-}
+  let path = key.split(".");
+  let value = context[path[0]];
+  if (value === null || value === undefined) {
+    return value;
+  }
+  if (path.length > 1) {
+    value = rowGetValue(value, path.slice(1).join("."));
+  }
+  return value;
+};