UNPKG

@atlaskit/renderer

Version:
158 lines (157 loc) • 6.84 kB
import React from 'react'; import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model'; import type { TableLayout } from '@atlaskit/adf-schema'; import type { OverflowShadowProps } from '@atlaskit/editor-common/ui'; import { SortOrder } from '@atlaskit/editor-common/types'; import type { RendererAppearance, StickyHeaderConfig } from '../../ui/Renderer/types'; import type { WithSmartCardStorageProps } from '../../ui/SmartCardStorage'; import type { StickyMode } from './table/sticky'; import { OverflowParent } from './table/sticky'; import type { SharedTableProps } from './table/types'; import { TableStickyScrollbar } from './TableStickyScrollbar'; export type TableArrayMapped = { rowNodes: Array<PMNode | null>; rowReact: React.ReactElement; }; export declare const isTableResizingEnabled: (appearance: RendererAppearance) => boolean; export declare const isStickyScrollbarEnabled: (appearance: RendererAppearance) => boolean; export declare const orderChildren: (children: React.ReactElement[], tableNode: PMNode, smartCardStorage: WithSmartCardStorageProps["smartCardStorage"], tableOrderStatus?: TableOrderStatus) => React.ReactElement[]; export declare const hasRowspan: (row: PMNode) => boolean; export declare const getRefTop: (refElement: HTMLElement) => number; export declare const shouldHeaderStick: (scrollTop: number, tableTop: number, tableBottom: number, rowHeight: number) => boolean; export declare const shouldHeaderPinBottom: (scrollTop: number, tableBottom: number, rowHeight: number) => boolean; export declare const addSortableColumn: (rows: React.ReactElement<any>[], tableOrderStatus: TableOrderStatus | undefined, onSorting: (columnIndex: number, sortOrder: SortOrder) => void) => React.ReactElement<any, string | React.JSXElementConstructor<any>>[]; export type TableProps = SharedTableProps & { allowColumnSorting?: boolean; allowTableAlignment?: boolean; allowTableResizing?: boolean; children: React.ReactElement<any> | Array<React.ReactElement<any>>; isPresentational?: boolean; rendererAppearance?: RendererAppearance; stickyHeaders?: StickyHeaderConfig; tableNode?: PMNode; }; export declare const isHeaderRowEnabled: (rows: (React.ReactChild | React.ReactFragment | React.ReactPortal)[]) => any; export declare const tableCanBeSticky: (node: PMNode | undefined, children: (React.ReactChild | React.ReactFragment | React.ReactPortal)[]) => any; export interface TableOrderStatus { columnIndex: number; order: SortOrder; } export interface TableState { headerRowHeight: number; stickyMode: StickyMode; wrapperWidth: number; } /** * Reads `nestedRendererType` from RendererContext and renders the fake left/right * borders only when the current renderer is the nested renderer for a reference * synced block. */ export declare const RefSyncBlockFakeBorders: ({ isNumberColumnEnabled, }: { isNumberColumnEnabled: boolean; }) => React.JSX.Element | null; /** * TableContainer renders tables using only CSS-based rules */ /** * */ export declare class TableContainer extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableState> { state: TableState; tableRef: React.RefObject<HTMLTableElement>; stickyHeaderRef: React.RefObject<HTMLElement>; stickyScrollbarRef: React.RefObject<HTMLDivElement>; stickyWrapperRef: React.RefObject<HTMLDivElement>; wrapperRef: React.RefObject<HTMLDivElement>; stickyScrollbar?: TableStickyScrollbar; nextFrame: number | undefined; overflowParent: OverflowParent | null; updatedLayout: TableLayout | 'custom'; private containerRef; private _isInsideNestedRenderer; private lastComputedStyle; private resizeObserver; private applyResizerChange; /** * Checks if this table is inside a nested renderer (e.g. Include Page macro) * by looking for multiple .ak-renderer-document ancestors in the DOM. * The result is cached since a table's position in the DOM tree is stable after mount. */ private isInsideNestedRenderer; /** * For tables inside nested renderers (e.g. Include Page macro), the parent * renderer's CSS override forces width:100%!important and left:0!important * which overrides the inline styles set by this component. Using * style.setProperty with 'important' priority on inline styles beats * stylesheet !important rules per the CSS cascade. * * Uses lastComputedStyle (populated during render) rather than reading from * element.style, because React may remove properties from the DOM when their * values transition to undefined between renders. */ private applyNestedRendererTableFix; /** * Callback ref that captures the container DOM element and also forwards * to the handleRef prop from the overflow shadow HOC. */ private setContainerRef; /** * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount. * * @example */ componentDidMount(): void; /** * Updates sticky header wiring and scroll synchronization after prop or state changes. * * @param prevProps * @param prevState * @example */ componentDidUpdate(prevProps: TableProps, prevState: TableState): void; componentWillUnmount: () => void; getScrollTop: () => number; updateSticky: () => void; onScroll: () => void; onWrapperScrolled: () => void; /** * Calculates the top offset used when the sticky header is pinned to the table bottom. */ get pinTop(): number | undefined; /** * Determines whether sticky header positioning should include the default scroll root offset. */ get shouldAddOverflowParentOffsetTop_DO_NOT_USE(): boolean | null | undefined; /** * Resolves the top position for the sticky header based on the current sticky mode. */ get stickyTop(): number | undefined; /** * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders. * * @example */ render(): React.JSX.Element; private grabFirstRowRef; } type TableProcessorState = { tableOrderStatus?: TableOrderStatus; }; /** * Processes table children before passing them to the styled table container. */ export declare class TableProcessorWithContainerStyles extends React.Component<TableProps & OverflowShadowProps & WithSmartCardStorageProps, TableProcessorState> { state: { tableOrderStatus: undefined; }; /** * Renders processed table children inside the table container. * * @example */ render(): React.JSX.Element | null; private addSortableColumn; private changeSortOrder; private addNumberColumnIndexes; } export {};