fix: shadow table and get widths fn

grid-js · afshinm · Jan 16, 2023 · Nov 23, 2022 · Nov 23, 2022 · Nov 24, 2022
commit 62394f6f44db5e67a35a55dfb7aa29b04bf1f7ef
diff --git a/index.ts b/index.ts
@@ -5,9 +5,7 @@ import { h, createElement, Component, createRef } from 'preact';
 import { useEffect, useRef } from 'preact/hooks';
 import { UserConfig, Config } from './src/config';
 import {
-  PluginPosition,
-  PluginBaseComponent,
-  PluginBaseProps,
+  PluginPosition
 } from './src/plugin';
 import { BaseActions } from './src/view/base/actions';
 import { ID } from './src/util/id';
@@ -30,8 +28,6 @@ export {
  UserConfig,
  Config,
  PluginPosition,
-  PluginBaseComponent,
-  PluginBaseProps,
  h,
  createElement,
  Component,

diff --git a/src/header.ts b/src/header.ts
@@ -2,9 +2,8 @@ import { OneDArray, TColumn, TwoDArray } from './types';
 import Base from './base';
 import { Config, UserConfig } from './config';
 import { px, width } from './util/width';
-import { ShadowTable } from './view/table/shadow';
+import { getShadowTableWidths, ShadowTable } from './view/table/shadow';
 import {
-  Component,
  ComponentChild,
  createRef,
  h,
@@ -78,7 +77,7 @@ class Header extends Base {

      render(el, tempRef.current);

-      widths = shadowTable.current.widths();
+      widths = getShadowTableWidths(shadowTable.current);
    }

    for (const column of flatten(Header.tabularFormat(this.columns))) {
@@ -212,7 +211,6 @@ class Header extends Base {
      if (column.plugin !== undefined) {
        userConfig.plugin.add({
          id: column.id,
-          props: {},
          ...column.plugin,
          position: PluginPosition.Cell,
        });

diff --git a/src/view/container.tsx b/src/view/container.tsx
@@ -10,7 +10,6 @@ import { Config, ConfigContext } from '../config';
 import log from '../util/log';
 import { PipelineProcessor } from '../pipeline/processor';
 import { useEffect, useRef, useState } from 'preact/hooks';
-import { useConfig } from '../hooks/useConfig';

 export function Container(props: {
  config: Config;
@@ -19,7 +18,7 @@ export function Container(props: {
  width: string;
  height: string;
 }) {
-  const config = useConfig();
+  const config = props.config;
  const [status, setStatus] = useState(Status.Loading);
  const prevStatusRef = useRef(Status.Loading);
  const [header, setHeader] = useState(props.header);
@@ -31,6 +30,7 @@ export function Container(props: {
      // for the initial load
      await processPipeline();

+      console.log('config', config)
      if (config.header && data && data.length) {
        // now that we have the data, let's adjust columns width
        // NOTE: that we only calculate the columns width once

diff --git a/src/view/htmlElement.tsx b/src/view/htmlElement.tsx
@@ -1,9 +1,11 @@
 import { h } from 'preact';

-export function HTMLElement(props: {
+export interface HTMLContentProps {
  content: string;
  parentElement?: string;
-}) {
+}
+
+export function HTMLElement(props: HTMLContentProps) {
  return h(props.parentElement || 'span', {
    dangerouslySetInnerHTML: { __html: props.content },
  });

diff --git a/src/view/plugin/pagination.tsx b/src/view/plugin/pagination.tsx
@@ -3,7 +3,6 @@ import PaginationLimit from '../../pipeline/limit/pagination';
 import { classJoin, className } from '../../util/className';
 import ServerPaginationLimit from '../../pipeline/limit/serverPagination';
 import Tabular from '../../tabular';
-import { PipelineProcessor } from '../../pipeline/processor';
 import { useConfig } from '../../hooks/useConfig';
 import { useEffect, useState } from 'preact/hooks';
 import { useTranslator } from '../../i18n/language';
@@ -24,10 +23,18 @@ export interface PaginationConfig {
 }

 export function Pagination(props: PaginationConfig) {
+  props.summary = props.summary || true;
+  props.nextButton = props.nextButton || true;
+  props.prevButton = props.prevButton || true;
+  props.buttonsCount = props.buttonsCount || 3;
+  props.limit = props.limit || 10;
+  props.page = props.page || 0;
+  props.resetPageOnUpdate = props.resetPageOnUpdate || true;
+
  let processor: PaginationLimit | ServerPaginationLimit;

-  const [currentPage, setCurrentPage] = useState(props.page || 0);
-  const [limit, setLimit] = useState(props.limit);
+  const [currentPage, setCurrentPage] = useState(props.page);
+  const [limit] = useState(props.limit);
  const [total, setTotal] = useState(0);
  const config = useConfig();
  const _ = useTranslator();
@@ -36,7 +43,7 @@ export function Pagination(props: PaginationConfig) {
    setTotal(tabular.length);
  }

-  if (this.props.server) {
+  if (props.server) {
    processor = new ServerPaginationLimit({
      limit: limit,
      page: currentPage,
@@ -189,33 +196,33 @@ export function Pagination(props: PaginationConfig) {
  const renderSummary = () => {
    return (
      <Fragment>
-        {this.props.summary && this.state.total > 0 && (
+        {props.summary && total > 0 && (
          <div
            role="status"
            aria-live="polite"
            className={classJoin(
              className('summary'),
-              this.config.className.paginationSummary,
+              config.className.paginationSummary,
            )}
-            title={this._(
+            title={_(
              'pagination.navigate',
-              this.state.page + 1,
-              this.pages,
+              currentPage + 1,
+              pages(),
            )}
          >
-            {this._('pagination.showing')}{' '}
-            <b>{this._(`${this.state.page * this.state.limit + 1}`)}</b>{' '}
-            {this._('pagination.to')}{' '}
+            {_('pagination.showing')}{' '}
+            <b>{_(`${currentPage * limit + 1}`)}</b>{' '}
+            {_('pagination.to')}{' '}
            <b>
-              {this._(
+              {_(
                `${Math.min(
-                  (this.state.page + 1) * this.state.limit,
-                  this.state.total,
+                  (currentPage + 1) * limit,
+                  total,
                )}`,
              )}
            </b>{' '}
-            {this._('pagination.of')} <b>{this._(`${this.state.total}`)}</b>{' '}
-            {this._('pagination.results')}
+            {_('pagination.of')} <b>{_(`${total}`)}</b>{' '}
+            {_('pagination.results')}
          </div>
        )}
      </Fragment>

diff --git a/src/view/table/shadow.tsx b/src/view/table/shadow.tsx
@@ -1,4 +1,4 @@
-import { Component, RefObject } from 'preact';
+import { RefObject } from 'preact';
 import { className } from '../../util/className';
 import { useEffect } from 'preact/hooks';

@@ -8,8 +8,6 @@ import { useEffect } from 'preact/hooks';
 */
 export function ShadowTable(props: { tableRef?: RefObject<HTMLTableElement> }) {
  let tableElement: HTMLTableElement;
-  let tableClassName: string;
-  let tableStyle: string;

  useEffect(() => {
    const tableRef = props.tableRef;
@@ -19,54 +17,8 @@ export function ShadowTable(props: { tableRef?: RefObject<HTMLTableElement> }) {
    tableElement.style.width = '100%';
    tableElement.style.zIndex = '-2147483640';
    tableElement.style.visibility = 'hidden';
-
-    tableClassName = tableElement.className;
-    tableStyle = tableElement.style.cssText;
  }, []);

-  const widths = (): {
-    [columnId: string]: { minWidth: number; width: number };
-  } => {
-    tableElement.className = `${tableClassName} ${className('shadowTable')}`;
-
-    tableElement.style.tableLayout = 'auto';
-    tableElement.style.width = 'auto';
-    tableElement.style.padding = '0';
-    tableElement.style.margin = '0';
-    tableElement.style.border = 'none';
-    tableElement.style.outline = 'none';
-
-    let obj = Array.from(
-      // TODO: should this be this.base?
-      tableElement.parentNode.querySelectorAll<HTMLElement>('thead th'),
-    ).reduce((prev, current) => {
-      current.style.width = `${current.clientWidth}px`;
-
-      return {
-        [current.getAttribute('data-column-id')]: {
-          minWidth: current.clientWidth,
-        },
-        ...prev,
-      };
-    }, {});
-
-    tableElement.className = tableClassName;
-    tableElement.style.cssText = tableStyle;
-    tableElement.style.tableLayout = 'auto';
-
-    obj = Array.from(
-      // TODO: should this be this.base?
-      tableElement.parentNode.querySelectorAll<HTMLElement>('thead th'),
-    ).reduce((prev, current) => {
-      prev[current.getAttribute('data-column-id')]['width'] =
-        current.clientWidth;
-
-      return prev;
-    }, obj);
-
-    return obj;
-  };
-
  if (props.tableRef.current) {
    return (
      <div
@@ -79,3 +31,50 @@ export function ShadowTable(props: { tableRef?: RefObject<HTMLTableElement> }) {

  return null;
 }
+
+
+export function getShadowTableWidths(
+  tableElement: HTMLTableElement
+): {
+  [columnId: string]: { minWidth: number; width: number };
+} {
+  const tableClassName = tableElement.className;
+  const tableStyle = tableElement.style.cssText;
+  tableElement.className = `${tableClassName} ${className('shadowTable')}`;
+
+  tableElement.style.tableLayout = 'auto';
+  tableElement.style.width = 'auto';
+  tableElement.style.padding = '0';
+  tableElement.style.margin = '0';
+  tableElement.style.border = 'none';
+  tableElement.style.outline = 'none';
+
+  let obj = Array.from(
+    // TODO: should this be this.base?
+    tableElement.parentNode.querySelectorAll<HTMLElement>('thead th'),
+  ).reduce((prev, current) => {
+    current.style.width = `${current.clientWidth}px`;
+
+    return {
+      [current.getAttribute('data-column-id')]: {
+        minWidth: current.clientWidth,
+      },
+      ...prev,
+    };
+  }, {});
+
+  tableElement.className = tableClassName;
+  tableElement.style.cssText = tableStyle;
+  tableElement.style.tableLayout = 'auto';
+
+  obj = Array.from(
+    // TODO: should this be this.base?
+    tableElement.parentNode.querySelectorAll<HTMLElement>('thead th'),
+  ).reduce((prev, current) => {
+    prev[current.getAttribute('data-column-id')]['width'] = current.clientWidth;
+
+    return prev;
+  }, obj);
+
+  return obj;
+};
diff --git a/tests/jest/view/container.test.tsx b/tests/jest/view/container.test.tsx
@@ -47,12 +47,8 @@ describe('Container component', () => {

  it('should attach styles', async () => {
    config.update({
-      search: {
-        enabled: true,
-      },
-      pagination: {
-        enabled: true,
-      },
+      search: true,
+      pagination: true,
      style: {
        container: {
          border: '1px solid #ccc',
@@ -90,12 +86,8 @@ describe('Container component', () => {

  it('should attach classNames', async () => {
    config.update({
-      search: {
-        enabled: true,
-      },
-      pagination: {
-        enabled: true,
-      },
+      search: true ,
+      pagination: true,
      columns: [
        {
          name: 'c1',
@@ -146,9 +138,7 @@ describe('Container component', () => {

  it('should render a container with searchable table', async () => {
    config.update({
-      search: {
-        enabled: true,
-      },
+      search: true,
    });

    const container = mount(
@@ -165,11 +155,8 @@ describe('Container component', () => {

  it('should render a container with sortable and paginated table', async () => {
    config.update({
-      search: {
-        enabled: true,
-      },
+      search: true,
      pagination: {
-        enabled: true,
        limit: 5,
      },
      columns: [
@@ -240,12 +227,9 @@ describe('Container component', () => {
  it('should not violate accessibility test', async () => {
    config.update({
      pagination: {
-        enabled: true,
        limit: 1,
      },
-      search: {
-        enabled: true,
-      },
+      search: true,
      sort: true,
    });

@@ -385,12 +369,8 @@ describe('Container component', () => {

  it('should remove the EventEmitter listeners', async () => {
    config.update({
-      search: {
-        enabled: true,
-      },
-      pagination: {
-        enabled: true,
-      },
+      search: true,
+      pagination: true,
      columns: ['Name', 'Phone Number'],
      sort: true,
    });
@@ -416,12 +396,8 @@ describe('Container component', () => {

  it('should unregister the processors', async () => {
    config.update({
-      pagination: {
-        enabled: true,
-      },
-      search: {
-        enabled: true,
-      },
+      pagination: true,
+      search: true,
      columns: ['Name', 'Phone Number'],
      sort: true,
    });