@kylincloud/flamegraph 0.35.6

package/src/shims/Table.spec.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { render, within, screen } from '@testing-library/react';
+import Table, { useTableSort } from './Table';
+
+const mockHeadRow = [
+  { name: 'self', label: 'test col2', sortable: 1 },
+  { name: 'name', label: 'test col1', sortable: 1 },
+  { name: 'total', label: 'test col3', sortable: 1 },
+  { name: 'selfLeft', label: 'test col4', sortable: 1 },
+  { name: 'selfRight', label: 'test col5', sortable: 1 },
+  { name: 'selfDiff', label: 'test col6', sortable: 1 },
+  { name: 'totalLeft', label: 'test col7', sortable: 1 },
+  { name: 'totalRight', label: 'test col8', sortable: 1 },
+  { name: 'totalDiff', label: 'test col9', sortable: 1 },
+];
+
+describe('Hook: useTableSort', () => {
+  const render = () => renderHook(() => useTableSort(mockHeadRow)).result;
+
+  it('should return initial sort values', () => {
+    const hook = render();
+    expect(hook.current).toStrictEqual({
+      sortBy: 'self',
+      sortByDirection: 'desc',
+      updateSortParams: expect.any(Function),
+    });
+  });
+
+  it('should update sort direction', () => {
+    const hook = render();
+
+    expect(hook.current.sortByDirection).toBe('desc');
+    act(() => {
+      hook.current.updateSortParams('self');
+    });
+    expect(hook.current.sortByDirection).toBe('asc');
+  });
+
+  it('should update sort value and sort direction', () => {
+    const hook = render();
+
+    expect(hook.current).toMatchObject({
+      sortBy: 'self',
+      sortByDirection: 'desc',
+    });
+
+    act(() => {
+      hook.current.updateSortParams('name');
+    });
+    expect(hook.current).toMatchObject({
+      sortBy: 'name',
+      sortByDirection: 'desc',
+    });
+
+    act(() => {
+      hook.current.updateSortParams('name');
+    });
+    expect(hook.current).toMatchObject({
+      sortBy: 'name',
+      sortByDirection: 'asc',
+    });
+  });
+});
+
+describe('pagination', () => {
+  const header = [{ name: 'id', label: 'Id' }];
+  const rows = [
+    { cells: [{ value: 1 }] },
+    { cells: [{ value: 2 }] },
+    { cells: [{ value: 3 }] },
+  ];
+
+  it('does not paginate by default', async () => {
+    render(
+      <Table table={{ type: 'filled', headRow: header, bodyRows: rows }} />
+    );
+
+    const tbody = document.getElementsByTagName('tbody')[0];
+    const items = await within(tbody).findAllByRole('row');
+    expect(items).toHaveLength(rows.length);
+  });
+
+  it('paginates', async () => {
+    render(
+      <Table
+        itemsPerPage={1}
+        table={{
+          type: 'filled',
+          headRow: header,
+          bodyRows: rows,
+        }}
+      />
+    );
+
+    const tbody = document.getElementsByTagName('tbody')[0];
+
+    // First page
+    expect(screen.getByLabelText('Previous Page')).toBeDisabled();
+    expect(screen.getByLabelText('Next Page')).toBeEnabled();
+    let items = await within(tbody).findAllByRole('row');
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveTextContent('1');
+
+    // Second page
+    screen.getByLabelText('Next Page').click();
+    expect(screen.getByLabelText('Previous Page')).toBeEnabled();
+    expect(screen.getByLabelText('Next Page')).toBeEnabled();
+    items = await within(tbody).findAllByRole('row');
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveTextContent('2');
+
+    // Third page
+    screen.getByLabelText('Next Page').click();
+    expect(screen.getByLabelText('Previous Page')).toBeEnabled();
+    expect(screen.getByLabelText('Next Page')).toBeDisabled();
+    items = await within(tbody).findAllByRole('row');
+    expect(items).toHaveLength(1);
+    expect(items[0]).toHaveTextContent('3');
+  });
+});

package/src/shims/Table.tsx

@@ -0,0 +1,252 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import React, { useState, ReactNode, CSSProperties, RefObject } from 'react';
+import { faChevronLeft } from '@fortawesome/free-solid-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
+import clsx from 'clsx';
+
+// eslint-disable-next-line css-modules/no-unused-class
+import styles from './Table.module.scss';
+// import LoadingSpinner from './LoadingSpinner';
+import Button from './Button';
+
+interface CustomProp {
+  [k: string]: string | CSSProperties | ReactNode | number | undefined;
+}
+
+export interface Cell extends CustomProp {
+  value: ReactNode | string;
+  style?: CSSProperties;
+}
+
+interface HeadCell extends CustomProp {
+  name: string;
+  label: string;
+  sortable?: number;
+  default?: boolean;
+}
+
+export interface BodyRow {
+  'data-row'?: string;
+  isRowSelected?: boolean;
+  isRowDisabled?: boolean;
+  cells: Cell[];
+  onClick?: () => void;
+  className?: string;
+}
+
+export type TableBodyType =
+  | {
+      type: 'not-filled';
+      value: string | ReactNode;
+      bodyClassName?: string;
+    }
+  | {
+      type: 'filled';
+      bodyRows: BodyRow[];
+    };
+
+type Table = TableBodyType & {
+  headRow: HeadCell[];
+};
+
+interface TableSortProps {
+  sortBy: string;
+  updateSortParams: (v: string) => void;
+  sortByDirection: 'desc' | 'asc';
+}
+
+export const useTableSort = (headRow: HeadCell[]): TableSortProps => {
+  const defaultSortByCell =
+    headRow.filter((row) => row?.default)[0] || headRow[0];
+  const [sortBy, updateSortBy] = useState(defaultSortByCell.name);
+  const [sortByDirection, setSortByDirection] = useState<'desc' | 'asc'>(
+    'desc'
+  );
+
+  const updateSortParams = (newSortBy: string) => {
+    let dir = sortByDirection;
+
+    if (sortBy === newSortBy) {
+      dir = dir === 'asc' ? 'desc' : 'asc';
+    } else {
+      dir = 'desc';
+    }
+
+    updateSortBy(newSortBy);
+    setSortByDirection(dir);
+  };
+
+  return { sortBy, sortByDirection, updateSortParams };
+};
+
+interface TableProps {
+  sortByDirection?: string;
+  sortBy?: string;
+  updateSortParams?: (newSortBy: string) => void;
+  table: Table;
+  tableBodyRef?: RefObject<HTMLTableSectionElement>;
+  className?: string;
+  isLoading?: boolean;
+  /* enables pagination */
+  itemsPerPage?: number;
+}
+
+function Table({
+  sortByDirection,
+  sortBy,
+  updateSortParams,
+  table,
+  tableBodyRef,
+  className,
+  isLoading,
+  itemsPerPage,
+}: TableProps) {
+  const hasSort = sortByDirection && sortBy && updateSortParams;
+  const [currPage, setCurrPage] = useState(0);
+
+  return isLoading ? (
+    <div className={styles.loadingSpinner}>
+      {/* <LoadingSpinner /> */}
+    </div>
+  ) : (
+    <>
+      <table
+        className={clsx(styles.table, {
+          [className || '']: className,
+        })}
+        data-testid="table-ui"
+      >
+        <thead>
+          <tr>
+            {table.headRow.map(
+              ({ sortable, label, name, ...rest }, idx: number) =>
+                !sortable || table.type === 'not-filled' || !hasSort ? (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <th key={idx} {...rest}>
+                    {label}
+                  </th>
+                ) : (
+                  <th
+                    {...rest}
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={idx}
+                    className={styles.sortable}
+                    onClick={() => updateSortParams(name)}
+                  >
+                    {label}
+                    <span
+                      className={clsx(styles.sortArrow, {
+                        [styles[sortByDirection]]: sortBy === name,
+                      })}
+                    />
+                  </th>
+                )
+            )}
+          </tr>
+        </thead>
+        <tbody ref={tableBodyRef}>
+          {table.type === 'not-filled' ? (
+            <tr className={table?.bodyClassName}>
+              <td colSpan={table.headRow.length}>{table.value}</td>
+            </tr>
+          ) : (
+            paginate(table.bodyRows, currPage, itemsPerPage).map(
+              ({ cells, isRowSelected, isRowDisabled, className, ...rest }) => {
+                // The problem is that when you switch apps or time-range and the function
+                // names stay the same it leads to an issue where rows don't get re-rendered
+                // So we force a rerender each time.
+                const renderID = Math.random();
+
+                return (
+                  <tr
+                    key={renderID}
+                    {...rest}
+                    className={clsx(className, {
+                      [styles.isRowSelected]: isRowSelected,
+                      [styles.isRowDisabled]: isRowDisabled,
+                    })}
+                  >
+                    {cells &&
+                      cells.map(
+                        ({ style, value, ...rest }: Cell, index: number) => (
+                          // eslint-disable-next-line react/no-array-index-key
+                          <td key={renderID + index} style={style} {...rest}>
+                            {value}
+                          </td>
+                        )
+                      )}
+                  </tr>
+                );
+              }
+            )
+          )}
+        </tbody>
+      </table>
+      <PaginationNavigation
+        bodyRows={table.type === 'filled' ? table.bodyRows : undefined}
+        itemsPerPage={itemsPerPage}
+        currPage={currPage}
+        setCurrPage={setCurrPage}
+      />
+    </>
+  );
+}
+
+function paginate(
+  bodyRows: Extract<Table, { type: 'filled' }>['bodyRows'],
+  currPage: number,
+  itemsPerPage?: TableProps['itemsPerPage']
+) {
+  if (!itemsPerPage) {
+    return bodyRows;
+  }
+
+  return bodyRows.slice(currPage * itemsPerPage, itemsPerPage * (currPage + 1));
+}
+
+interface PaginationNavigationProps {
+  bodyRows?: Extract<Table, { type: 'filled' }>['bodyRows'];
+  currPage: number;
+  itemsPerPage?: TableProps['itemsPerPage'];
+  setCurrPage: (i: number) => void;
+}
+
+function PaginationNavigation({
+  itemsPerPage,
+  currPage,
+  setCurrPage,
+  bodyRows,
+}: PaginationNavigationProps) {
+  if (!itemsPerPage) {
+    return null;
+  }
+
+  const isThereNextPage = bodyRows
+    ? paginate(bodyRows, currPage + 1, itemsPerPage).length > 0
+    : false;
+
+  const isTherePreviousPage = bodyRows
+    ? paginate(bodyRows, currPage - 1, itemsPerPage).length > 0
+    : false;
+
+  return (
+    <nav className={styles.pagination}>
+      <Button
+        aria-label="Previous Page"
+        disabled={!isTherePreviousPage}
+        kind="float"
+        icon={faChevronLeft}
+        onClick={() => setCurrPage(currPage - 1)}
+      />
+      <Button
+        disabled={!isThereNextPage}
+        aria-label="Next Page"
+        kind="float"
+        icon={faChevronRight}
+        onClick={() => setCurrPage(currPage + 1)}
+      />
+    </nav>
+  );
+}
+
+export default Table;

package/src/shims/Tooltip.tsx

@@ -0,0 +1,51 @@
+// src/shims/Tooltip.tsx
+import React from 'react'
+
+export interface TooltipProps {
+  placement?: string
+  title?: React.ReactNode
+  content?: React.ReactNode
+  children: React.ReactNode
+}
+
+/**
+ * 尝试把 ReactNode 转成纯文本，用于原生 title
+ * 足够应付大部分简单场景（字符串、数字、嵌套一两层标签等）
+ */
+function nodeToPlainText(node: React.ReactNode): string | undefined {
+  if (node == null || node === false) return undefined
+
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node)
+  }
+
+  if (Array.isArray(node)) {
+    const parts = node
+      .map((n) => nodeToPlainText(n))
+      .filter((s): s is string => !!s)
+    return parts.length ? parts.join(' ') : undefined
+  }
+
+  if (React.isValidElement(node)) {
+    return nodeToPlainText(node.props.children)
+  }
+
+  return undefined
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  placement, // 目前不用，但保留参数以兼容原版
+  title,
+  content,
+  children,
+}) => {
+  const text = title ?? content
+  const titleStr = nodeToPlainText(text)
+
+  // 没有文本就不加 title，避免空 tooltip
+  if (!titleStr) {
+    return <>{children}</>
+  }
+
+  return <span title={titleStr}>{children}</span>
+}