@elliemae/ds-data-table 3.53.0-next.1 → 3.53.0-next.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DataTable.js +1 -1
- package/dist/cjs/DataTable.js.map +2 -2
- package/dist/cjs/configs/useFreezeVirtualScrollOnDrag.js +54 -0
- package/dist/cjs/configs/useFreezeVirtualScrollOnDrag.js.map +7 -0
- package/dist/cjs/configs/useInternalStateConfig.js +7 -2
- package/dist/cjs/configs/useInternalStateConfig.js.map +2 -2
- package/dist/cjs/configs/useStore/useStore.js +2 -1
- package/dist/cjs/configs/useStore/useStore.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js +6 -2
- package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js +1 -1
- package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js +8 -0
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/cjs/parts/VirtualRowsList.js +3 -0
- package/dist/cjs/parts/VirtualRowsList.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/DataTable.js +1 -1
- package/dist/esm/DataTable.js.map +2 -2
- package/dist/esm/configs/useFreezeVirtualScrollOnDrag.js +24 -0
- package/dist/esm/configs/useFreezeVirtualScrollOnDrag.js.map +7 -0
- package/dist/esm/configs/useInternalStateConfig.js +7 -2
- package/dist/esm/configs/useInternalStateConfig.js.map +2 -2
- package/dist/esm/configs/useStore/useStore.js +2 -1
- package/dist/esm/configs/useStore/useStore.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js +8 -4
- package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map +2 -2
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js +1 -1
- package/dist/esm/parts/HoC/withConditionalDnDRowContext.js.map +2 -2
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js +10 -2
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/esm/parts/VirtualRowsList.js +3 -0
- package/dist/esm/parts/VirtualRowsList.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/configs/useFreezeVirtualScrollOnDrag.d.ts +2 -0
- package/dist/types/configs/useInternalStateConfig.d.ts +2 -0
- package/dist/types/react-desc-prop-types.d.ts +3 -0
- package/package.json +28 -28
- package/dist/cjs/tests/utils/index.js +0 -131
- package/dist/cjs/tests/utils/index.js.map +0 -7
- package/dist/esm/tests/utils/index.js +0 -101
- package/dist/esm/tests/utils/index.js.map +0 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { WeakValidationMap } from 'react';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\n\nexport namespace DSDataTableT {\n // ===========================================================================\n // Typescript definition for auxiliary types\n // ===========================================================================\n type PropsT<D, R, O> = Partial<D> & R & O;\n\n type InternalPropsT<D, R, O> = D & R & O;\n\n // ===========================================================================\n // Typescript definition for zustand store\n // ===========================================================================\n\n export type InternalAtoms = {\n drilldownRowId: string | null;\n focusedRowId: string | null;\n isShiftPressed: boolean;\n reduxHeaders: Record<string, ReduxHeader>;\n };\n export type UseAutoCalculatedT = {\n /**\n * visibleRangeRef: React.MutableRefObject<Range>\n * We can use this ref to get the visible range of the virtual list\n * taking in consideration the end-start and overscan.\n */\n visibleRangeRef: React.MutableRefObject<Range>;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n lastSelected: React.MutableRefObject<number>;\n };\n export type Selectors = Record<string, never>;\n export type Reducers = {\n patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n };\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n // ===========================================================================\n // Typescript definition for data table related things\n // ===========================================================================\n\n export interface Filter {\n id: string;\n type: string;\n value: unknown;\n }\n\n export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n startDate: string;\n endDate: string;\n isDateRange: boolean;\n }>;\n export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n\n export interface FilterItemProps {\n column: InternalColumn;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n }\n\n export interface FilterProps<T> {\n column: InternalColumn;\n onValueChange: (type: string, value: T | undefined) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n filterValue: T;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n domIdAffix?: string;\n }\n\n export interface FilterPillProps<T> {\n columnHeader: string;\n column: string;\n value: T;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n prevRef: React.RefObject<HTMLElement>;\n innerRef: React.RefObject<HTMLElement>;\n nextRef: React.RefObject<HTMLElement>;\n }\n\n export interface ReduxHeader {\n hideFilterMenu?: boolean;\n hideFilterButton?: boolean;\n showDnDHandle?: boolean;\n withTabStops?: boolean;\n showSortCaret?: boolean;\n }\n\n export type SelectionItem = boolean | 'mixed';\n\n export type Selection = Record<string | number, SelectionItem>;\n\n export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n export interface SortBy {\n id: string;\n desc: boolean;\n }\n\n export interface Pagination extends DSPaginationT.Props {\n hasPagination: boolean;\n pageIndex?: number;\n canPreviousPage?: boolean;\n canNextPage?: boolean;\n pageSize?: number;\n dataIsPage?: boolean;\n showPerPageSelector?: boolean;\n perPageOptions?: number[];\n perPageStep?: number;\n minPerPage?: number;\n maxPerPage?: number;\n onPageSizeChange?: (pageSize: number) => void;\n onPreviousPage?: () => void;\n onNextPage?: () => void;\n onPageChange?: (page: number) => void;\n pageCount?: number | string;\n isLoadingPageCount?: boolean;\n pageDetails?: string[];\n pageDetailsTitle?: string;\n }\n\n export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n export interface RenderRowActionsConfig {\n columnWidth: number;\n renderer: React.ComponentType<CellProps>;\n }\n\n export type RenderRowActions = false | RenderRowActionsConfig;\n\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n export type DraggablePropsT =\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n\n export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n // ===========================================================================\n // Typescript definition for the row and columns\n // ===========================================================================\n\n export interface Row {\n [key: string]: unknown;\n id: string;\n subRows?: Row[];\n tableRowDetails?: React.ComponentType<DetailsProps>;\n dimsumHeaderValue?: string;\n }\n export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n DefaultCellRender: JSX.Element;\n }\n\n export interface Column {\n id?: string;\n Header: string | React.ComponentType<HeaderProps>;\n accessor?: string;\n filter?: string;\n filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n disableFirstOptionFocusOnFilter?: boolean;\n editOptions?: EditOptionT[] | (() => EditOptionT[]);\n filterMinWidth?: number | string;\n Filter?: React.ComponentType<FilterProps<unknown>>;\n Cell?: React.ComponentType<CellRendererProps>;\n editable?: string | React.ComponentType<EditableCellProps>;\n disableDnD?: boolean;\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n padding?: number;\n columns?: Column[];\n canSort?: boolean;\n isSortedDesc?: boolean;\n canResize?: boolean;\n isFocuseable?: boolean;\n textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n ref?: React.MutableRefObject<HTMLTableColElement | null>;\n required?: boolean;\n cellStyle?: React.CSSProperties;\n alwaysDisplayEditIcon?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the row and columns\n // ===========================================================================\n\n export interface InternalRow {\n id: string;\n uid: string;\n index: number;\n realIndex: number;\n parent: InternalRow | null;\n parentId: string | null;\n parentIndex: number | null;\n depth: number;\n isExpanded: boolean;\n subRows: Row[];\n childrenCount: number;\n original: Row;\n cells: Cell[];\n }\n\n export interface InternalColumn extends Column {\n id: string;\n parentId: string | null;\n depth: number;\n ref: React.MutableRefObject<HTMLTableColElement | null>;\n columns?: InternalColumn[];\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the cell\n // ===========================================================================\n\n export interface CellRendererProps {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n // cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n domIdAffix?: string;\n }\n\n export interface Cell<T extends HTMLElement = HTMLElement> {\n column: InternalColumn;\n value: unknown;\n render: React.ComponentType<CellRendererProps>;\n row: InternalRow;\n ref: React.MutableRefObject<T | null>;\n id: string;\n }\n\n // ===========================================================================\n // Typescript definition for all component props\n // ===========================================================================\n\n export interface HeaderProps {\n column: InternalColumn;\n draggableProps: DraggablePropsT;\n }\n\n export interface CellProps<T extends HTMLElement = HTMLElement> {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell<T>;\n domIdAffix?: string;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n }\n\n export interface DetailsProps {\n detailsIndent: number;\n row: InternalRow;\n }\n export interface RowVariantProps {\n row: DSDataTableT.InternalRow;\n itemIndex: number;\n isDragOverlay: boolean;\n focusedRowId: string | null;\n drilldownRowId: string | null;\n }\n\n // ===========================================================================\n // Typescript definition for the React Context\n // ===========================================================================\n\n export interface Context {\n tableProps: InternalProps;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n drilldownRowId: string | null;\n setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n focusedRowId: string | null;\n setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n reduxHeaders: Record<string, ReduxHeader>;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n isShiftPressed: boolean;\n setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n lastSelected: React.MutableRefObject<number>;\n }\n\n export interface DefaultProps {\n height: string;\n width: string;\n renderRowActions: false | RenderRowActionsConfig;\n getRowVariant: (\n row: InternalRow,\n defaultCellRenderer: React.ComponentType<{\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n }>,\n ) => RowVariant | React.ComponentType<RowVariantProps>;\n withFilterBar: boolean;\n isExpandable: boolean;\n expandedRows: Record<string, boolean>;\n disabledRows: Record<string, boolean>;\n isResizeable: boolean;\n isLoading: boolean;\n pagination: false | Pagination;\n filters: Filter[];\n colsLayoutStyle: ColsLayoutStyleValues;\n hiddenColumns: string[];\n noResultsMessage: string;\n dragAndDropRows: boolean;\n maxDragAndDropLevel: number;\n onRowsReorder: (\n newData: Row[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string | null,\n extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n ) => void;\n dragAndDropColumns: boolean;\n onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n getIsDropValid: (\n active: DnDKitTree.Item<Row>,\n over: DnDKitTree.Item<Row>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n onColumnResize: (headerId: string, width: number) => void;\n onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n onRowClick: TypescriptHelpersT.GenericFunc;\n onRowFocus: TypescriptHelpersT.GenericFunc;\n noSelectionColumn: boolean;\n selectSingle: boolean;\n onSelectionChange: (\n newSelection: Selection,\n selectedControl: string,\n event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n ) => void;\n textWrap: 'wrap' | 'wrap-all' | 'truncate';\n onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n onFiltersChange: TypescriptHelpersT.GenericFunc;\n onPageChanged: TypescriptHelpersT.GenericFunc;\n onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n isSkeleton: boolean;\n domIdAffix?: string;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n uniqueRowAccessor?: UniqueRowAccessorType;\n cellRendererProps?: Record<string, unknown>;\n selection?: Selection;\n groupedRowsRenderHeader?:\n | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n | string;\n filterBarProps?: {\n filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n onClearAllFiltersClick?: () => void;\n onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n onDropdownMenuClickOutside?: () => void;\n onDropdownMenuTriggerClick?: () => void;\n isDropdownMenuOpen?: boolean;\n extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n };\n actionRef?: React.MutableRefObject<{\n scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n }>;\n noResultsSecondaryMessage?: string;\n noResultsButtonLabel?: string;\n noResultsPlaceholder?: TypescriptHelpersT.GenericFunc;\n onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n onTableResize?: TypescriptHelpersT.GenericFunc;\n Pagination?: React.ComponentType<Record<string, never>>;\n getAriaLabelForRow?: (args: {\n row: InternalRow;\n selected: boolean;\n disabled: boolean;\n expandable: boolean;\n expanded: boolean;\n }) => string;\n checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n }\n export interface RequiredProps {\n columns: Column[];\n data: Row[];\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n height: '100%',\n width: '100%',\n renderRowActions: false,\n getRowVariant: () => 'ds-primary-row',\n isExpandable: false,\n expandedRows: {},\n disabledRows: {},\n isResizeable: false,\n isLoading: false,\n pagination: false,\n withFilterBar: false,\n filters: [],\n getIsDropValid: () => true,\n onColumnResize: () => null,\n onColumnSortChange: () => null,\n colsLayoutStyle: ColsLayoutStyle.Fixed,\n hiddenColumns: [],\n noResultsMessage: 'No Results Found',\n dragAndDropRows: false,\n maxDragAndDropLevel: 1,\n onRowsReorder: () => null,\n dragAndDropColumns: false,\n onColumnsReorder: () => null,\n onColumnSizeChange: () => null,\n onRowClick: () => null,\n onRowFocus: () => null,\n noSelectionColumn: false,\n selectSingle: false,\n onSelectionChange: () => null,\n textWrap: 'wrap',\n onCellValueChange: () => null,\n onFiltersChange: () => null,\n onPageChanged: () => null,\n onRowExpand: () => null,\n onColumnSort: () => null,\n isSkeleton: false,\n domIdAffix: uid(4),\n});\n\nexport const DSDataTablePropTypes = {\n ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'Header name or component',\n ).isRequired,\n accessor: PropTypes.string.description('The entry of the data that this column will display'),\n id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'The custom component to render as a filter',\n ),\n Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'The editable out-of-the-box or component to render',\n ),\n disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n canSort: PropTypes.bool.description('Whereas this column is sortable'),\n disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n 'Whereas the first option should not be focused on filter',\n ),\n filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the filter',\n ),\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).description('Filter options'),\n isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n required: PropTypes.bool.description('Whereas this column is required'),\n alwaysDisplayEditIcon: PropTypes.bool.description(\n 'Whereas to always show the edit icon on this column if it is editable',\n ),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n }),\n ).description('Array of columns').isRequired,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n }),\n ).description('Array of rows'),\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n 'The renderer to use for the action toolbar',\n ),\n isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n uniqueRowAccessor: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.func,\n ]).description(\n 'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n ' This is necessary for the selectable and drag and drop features',\n ),\n disabledRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n ),\n expandedRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n ),\n onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n cellRendererProps: PropTypes.object.description(\n 'Object with all the props you want the cells to have available when rendering',\n ),\n selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n selection: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n ),\n onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n 'String | Function to call which will display in the row headers',\n ),\n isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n filters: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string,\n value: PropTypes.any,\n }),\n ).description('Array of filter keys and values'),\n withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n filterBarProps: PropTypes.shape({\n filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'If you specify custom filters, you will need to render their pills here',\n ),\n isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n extraOptions: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string,\n id: PropTypes.string,\n label: PropTypes.string,\n onClick: PropTypes.func,\n }),\n ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n }).description('Props for the filter bar'),\n onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n pagination: PropTypes.oneOfType([\n PropTypes.oneOf([false]),\n PropTypes.shape({\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n perPageOptions: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.number,\n label: PropTypes.string,\n type: PropTypes.oneOf(['single']),\n }),\n ]),\n )\n .description('The available options for page size')\n .defaultValue([10]),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n onPageSizeChange: PropTypes.func\n .description('Function invoked when the page size changes')\n .defaultValue(() => null),\n onPreviousPage: PropTypes.func\n .description('Function invoked when the previous button is pressed')\n .defaultValue(() => null),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n }),\n ]).description('Object containing the data for the pagination'),\n Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'Custom content to show when dataset is empty',\n ),\n isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n onColumnResize: PropTypes.func\n .description('Function invoked when a column is resized')\n .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n onColumnSortChange: PropTypes.func\n .description('Function invoked when a column is sorted')\n .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n onTableResize: PropTypes.func.description(\n 'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n ),\n actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n getRowVariant: PropTypes.func\n .description(\"Function invoked to determine a row's variant\")\n .defaultValue(`() => 'ds-primary-row'`),\n noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNoResultsButtonClick: PropTypes.func\n .description('Function invoked when the no results button is clicked')\n .defaultValue(() => null),\n isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n domIdAffix: PropTypes.string\n .description('Affix to avoid duplicate ids')\n .defaultValue('4 randomly generated characters'),\n checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as WeakValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,iBAAoB;AASpB,8BAAoD;AACpD,8BAA6B;AAC7B,uBAA4D;AAC5D,oCAAkD;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport { uid } from 'uid';\nimport type { WeakValidationMap } from 'react';\nimport type { Range, useVirtual } from 'react-virtual/types';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport type { DSPaginationT } from '@elliemae/ds-pagination';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { DnDKitTree, useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSControlledCheckboxT } from '@elliemae/ds-form-checkbox';\nimport type { DSComboboxT } from '@elliemae/ds-form-combobox';\nimport { PropTypes, getPropsPerSlotPropTypes } from '@elliemae/ds-props-helpers';\nimport { FILTER_TYPES } from './exported-related/index.js';\nimport { type DropIndicatorPosition, ColsLayoutStyle } from './configs/constants.js';\nimport { DSDataTableName, DSDataTableSlots } from './DSDataTableDefinitions.js';\n\nexport namespace DSDataTableT {\n // ===========================================================================\n // Typescript definition for auxiliary types\n // ===========================================================================\n type PropsT<D, R, O> = Partial<D> & R & O;\n\n type InternalPropsT<D, R, O> = D & R & O;\n\n // ===========================================================================\n // Typescript definition for zustand store\n // ===========================================================================\n\n export type InternalAtoms = {\n drilldownRowId: string | null;\n focusedRowId: string | null;\n isShiftPressed: boolean;\n reduxHeaders: Record<string, ReduxHeader>;\n isHeaderCellDragging: boolean;\n };\n export type UseAutoCalculatedT = {\n /**\n * visibleRangeRef: React.MutableRefObject<Range>\n * We can use this ref to get the visible range of the virtual list\n * taking in consideration the end-start and overscan.\n */\n visibleRangeRef: React.MutableRefObject<Range>;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n lastSelected: React.MutableRefObject<number>;\n };\n export type Selectors = Record<string, never>;\n export type Reducers = {\n patchHeader: (headerId: string, newHeader: Partial<ReduxHeader>) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n };\n export type ShuttleInternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n\n // ===========================================================================\n // Typescript definition for data table related things\n // ===========================================================================\n\n export interface Filter {\n id: string;\n type: string;\n value: unknown;\n }\n\n export type FilterFn<T> = (unfilteredData: Row[], filterKey: string, filterValue: T) => Row[];\n export type FilterFnOutOfTheBoxCurrencyRange = DSDataTableT.FilterFn<{ from: string; to: string }>;\n export type FilterFnOutOfTheBoxDateRange = DSDataTableT.FilterFn<{ startDate: string; endDate: string }>;\n export type FilterFnOutOfTheBoxDateSwitcher = DSDataTableT.FilterFn<{\n startDate: string;\n endDate: string;\n isDateRange: boolean;\n }>;\n export type FilterFnOutOfTheBoxMultiSelect = DSDataTableT.FilterFn<{ label: string; value: string }[]>;\n export type FilterFnOutOfTheBoxNumberRange = DSDataTableT.FilterFn<{ from?: number; to?: number }>;\n export type FilterFnOutOfTheBoxSingleDate = DSDataTableT.FilterFn<string>;\n export type FilterFnOutOfTheBoxSingleSelect = DSDataTableT.FilterFn<{ label: string; value: string }>;\n\n export interface FilterItemProps {\n column: InternalColumn;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n }\n\n export interface FilterProps<T> {\n column: InternalColumn;\n onValueChange: (type: string, value: T | undefined) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, newState: boolean) => void;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n filterValue: T;\n reduxHeader: ReduxHeader;\n innerRef: React.MutableRefObject<HTMLButtonElement | null>;\n domIdAffix?: string;\n }\n\n export interface FilterPillProps<T> {\n columnHeader: string;\n column: string;\n value: T;\n filters: Filter[];\n onFiltersChange: (filters: Filter[]) => void;\n prevRef: React.RefObject<HTMLElement>;\n innerRef: React.RefObject<HTMLElement>;\n nextRef: React.RefObject<HTMLElement>;\n }\n\n export interface ReduxHeader {\n hideFilterMenu?: boolean;\n hideFilterButton?: boolean;\n showDnDHandle?: boolean;\n withTabStops?: boolean;\n showSortCaret?: boolean;\n }\n\n export type SelectionItem = boolean | 'mixed';\n\n export type Selection = Record<string | number, SelectionItem>;\n\n export type UniqueRowAccessorType = string | string[] | ((row: Row) => string) | undefined;\n\n export interface SortBy {\n id: string;\n desc: boolean;\n }\n\n export interface Pagination extends DSPaginationT.Props {\n hasPagination: boolean;\n pageIndex?: number;\n canPreviousPage?: boolean;\n canNextPage?: boolean;\n pageSize?: number;\n dataIsPage?: boolean;\n showPerPageSelector?: boolean;\n perPageOptions?: number[];\n perPageStep?: number;\n minPerPage?: number;\n maxPerPage?: number;\n onPageSizeChange?: (pageSize: number) => void;\n onPreviousPage?: () => void;\n onNextPage?: () => void;\n onPageChange?: (page: number) => void;\n pageCount?: number | string;\n isLoadingPageCount?: boolean;\n pageDetails?: string[];\n pageDetailsTitle?: string;\n }\n\n export type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\n export interface RenderRowActionsConfig {\n columnWidth: number;\n renderer: React.ComponentType<CellProps>;\n }\n\n export type RenderRowActions = false | RenderRowActionsConfig;\n\n export type DropIndicatorPositionValues = TypescriptHelpersT.ObjectValues<typeof DropIndicatorPosition>;\n\n export type ColsLayoutStyleValues = TypescriptHelpersT.ObjectValues<typeof ColsLayoutStyle>;\n\n export type DraggablePropsT =\n | false\n | (ReturnType<typeof useSortable> & {\n dropIndicatorPosition: DropIndicatorPositionValues;\n shouldShowDropIndicatorPosition: boolean;\n isDropValid: boolean;\n });\n\n export type FilterOptionT = DSComboboxT.Props['allOptions'][number];\n export type EditOptionT = DSComboboxT.Props['allOptions'][number];\n\n // ===========================================================================\n // Typescript definition for the row and columns\n // ===========================================================================\n\n export interface Row {\n [key: string]: unknown;\n id: string;\n subRows?: Row[];\n tableRowDetails?: React.ComponentType<DetailsProps>;\n dimsumHeaderValue?: string;\n }\n export interface EditableCellProps<T extends HTMLElement = HTMLElement> extends CellProps<T> {\n DefaultCellRender: JSX.Element;\n }\n\n export interface Column {\n id?: string;\n Header: string | React.ComponentType<HeaderProps>;\n accessor?: string;\n filter?: string;\n filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n disableFirstOptionFocusOnFilter?: boolean;\n editOptions?: EditOptionT[] | (() => EditOptionT[]);\n filterMinWidth?: number | string;\n Filter?: React.ComponentType<FilterProps<unknown>>;\n Cell?: React.ComponentType<CellRendererProps>;\n editable?: string | React.ComponentType<EditableCellProps>;\n disableDnD?: boolean;\n width?: number;\n minWidth?: number;\n maxWidth?: number;\n padding?: number;\n columns?: Column[];\n canSort?: boolean;\n isSortedDesc?: boolean;\n canResize?: boolean;\n isFocuseable?: boolean;\n textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n ref?: React.MutableRefObject<HTMLTableColElement | null>;\n required?: boolean;\n cellStyle?: React.CSSProperties;\n alwaysDisplayEditIcon?: boolean;\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the row and columns\n // ===========================================================================\n\n export interface InternalRow {\n id: string;\n uid: string;\n index: number;\n realIndex: number;\n parent: InternalRow | null;\n parentId: string | null;\n parentIndex: number | null;\n depth: number;\n isExpanded: boolean;\n subRows: Row[];\n childrenCount: number;\n original: Row;\n cells: Cell[];\n }\n\n export interface InternalColumn extends Column {\n id: string;\n parentId: string | null;\n depth: number;\n ref: React.MutableRefObject<HTMLTableColElement | null>;\n columns?: InternalColumn[];\n }\n\n // ===========================================================================\n // Typescript definition for the internal representation of the cell\n // ===========================================================================\n\n export interface CellRendererProps {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n // cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n domIdAffix?: string;\n }\n\n export interface Cell<T extends HTMLElement = HTMLElement> {\n column: InternalColumn;\n value: unknown;\n render: React.ComponentType<CellRendererProps>;\n row: InternalRow;\n ref: React.MutableRefObject<T | null>;\n id: string;\n }\n\n // ===========================================================================\n // Typescript definition for all component props\n // ===========================================================================\n\n export interface HeaderProps {\n column: InternalColumn;\n draggableProps: DraggablePropsT;\n }\n\n export interface CellProps<T extends HTMLElement = HTMLElement> {\n row: InternalRow;\n column: InternalColumn;\n cell: Cell<T>;\n domIdAffix?: string;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n shouldAddExpandCell: boolean;\n cellIsNextToExpander: boolean;\n isDisabledRow?: boolean;\n draggableProps?: DraggablePropsT;\n }\n\n export interface DetailsProps {\n detailsIndent: number;\n row: InternalRow;\n }\n export interface RowVariantProps {\n row: DSDataTableT.InternalRow;\n itemIndex: number;\n isDragOverlay: boolean;\n focusedRowId: string | null;\n drilldownRowId: string | null;\n }\n\n // ===========================================================================\n // Typescript definition for the React Context\n // ===========================================================================\n\n export interface Context {\n tableProps: InternalProps;\n columnHeaderRef: React.MutableRefObject<HTMLDivElement | null>;\n virtualListRef: React.MutableRefObject<HTMLDivElement | null>;\n flattenedData: InternalRow[];\n allDataFlattened: InternalRow[];\n isEmptyContent: boolean;\n firstFocuseableColumnHeaderId: string | undefined;\n visibleColumns: InternalColumn[];\n virtualListHelpers: ReturnType<typeof useVirtual>;\n layoutHelpers: {\n totalColumnsWidth: number | string;\n gridLayout: string[];\n };\n paginationHelpers: Pagination;\n drilldownRowId: string | null;\n setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n focusedRowId: string | null;\n setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n reduxHeaders: Record<string, ReduxHeader>;\n patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n isShiftPressed: boolean;\n setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n lastSelected: React.MutableRefObject<number>;\n isHeaderCellDragging: boolean;\n setIsHeaderCellDragging: React.Dispatch<React.SetStateAction<boolean>>;\n }\n\n export interface DefaultProps {\n height: string;\n width: string;\n renderRowActions: false | RenderRowActionsConfig;\n getRowVariant: (\n row: InternalRow,\n defaultCellRenderer: React.ComponentType<{\n row: DSDataTableT.InternalRow;\n isRowSelected: boolean;\n isDragOverlay: boolean;\n }>,\n ) => RowVariant | React.ComponentType<RowVariantProps>;\n withFilterBar: boolean;\n isExpandable: boolean;\n expandedRows: Record<string, boolean>;\n disabledRows: Record<string, boolean>;\n isResizeable: boolean;\n isLoading: boolean;\n pagination: false | Pagination;\n filters: Filter[];\n colsLayoutStyle: ColsLayoutStyleValues;\n hiddenColumns: string[];\n noResultsMessage: string;\n dragAndDropRows: boolean;\n maxDragAndDropLevel: number;\n onRowsReorder: (\n newData: Row[],\n indexes: { targetIndex: number; fromIndex: number },\n considerExpanding: string | null,\n extraData: { flattenedData: InternalRow[]; allDataFlattened: InternalRow[] },\n ) => void;\n dragAndDropColumns: boolean;\n onColumnsReorder: (newData: Column[], indexes: { targetIndex: number; fromIndex: number }) => void;\n getIsDropValid: (\n active: DnDKitTree.Item<Row>,\n over: DnDKitTree.Item<Row>,\n dropIndicatorPosition: DropIndicatorPositionValues,\n ) => boolean;\n onColumnResize: (headerId: string, width: number) => void;\n onColumnSizeChange: (newColumns: Column[], headerId: string, width: number) => void;\n onRowClick: TypescriptHelpersT.GenericFunc;\n onRowFocus: TypescriptHelpersT.GenericFunc;\n noSelectionColumn: boolean;\n selectSingle: boolean;\n onSelectionChange: (\n newSelection: Selection,\n selectedControl: string,\n event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n ) => void;\n textWrap: 'wrap' | 'wrap-all' | 'truncate';\n onCellValueChange: (cellChange: { value: unknown; property: unknown; rowIndex: number }) => void;\n onFiltersChange: TypescriptHelpersT.GenericFunc;\n onPageChanged: TypescriptHelpersT.GenericFunc;\n onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n onColumnSortChange: (newSortRequest: { column: unknown; direction: unknown }) => void;\n onColumnSort: (newColumns: Column[], headerId: string, direction: 'ASC' | 'DESC') => void;\n isSkeleton: boolean;\n domIdAffix?: string;\n }\n export interface OptionalProps\n extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSDataTableName, typeof DSDataTableSlots> {\n uniqueRowAccessor?: UniqueRowAccessorType;\n cellRendererProps?: Record<string, unknown>;\n selection?: Selection;\n groupedRowsRenderHeader?:\n | ((dimsumHeaderValue: string | undefined, subRows: Row[] | undefined) => JSX.Element)\n | string;\n filterBarProps?: {\n filterBarAddonRenderer?: React.ComponentType<{ innerRef: React.MutableRefObject<HTMLButtonElement | null> }>;\n customPillRenderer?: React.ComponentType<FilterPillProps<unknown>>;\n onClearAllFiltersClick?: () => void;\n onDropdownMenuToggle?: (isOpen: boolean, eventType: string) => void;\n onDropdownMenuClickOutside?: () => void;\n onDropdownMenuTriggerClick?: () => void;\n isDropdownMenuOpen?: boolean;\n extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptHelpersT.GenericFunc }[];\n };\n actionRef?: React.MutableRefObject<{\n scrollToIndex: ReturnType<typeof useVirtual>['scrollToIndex'];\n scrollToOffset: ReturnType<typeof useVirtual>['scrollToOffset'];\n }>;\n noResultsSecondaryMessage?: string;\n noResultsButtonLabel?: string;\n noResultsPlaceholder?: TypescriptHelpersT.GenericFunc;\n onNoResultsButtonClick?: TypescriptHelpersT.GenericFunc;\n onTableResize?: TypescriptHelpersT.GenericFunc;\n Pagination?: React.ComponentType<Record<string, never>>;\n getAriaLabelForRow?: (args: {\n row: InternalRow;\n selected: boolean;\n disabled: boolean;\n expandable: boolean;\n expanded: boolean;\n }) => string;\n checkboxSelectAllProps?: DSControlledCheckboxT.Props;\n }\n export interface RequiredProps {\n columns: Column[];\n data: Row[];\n }\n\n export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps>;\n\n export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps>;\n}\n\n// default props is a function to ensure that the uid is unique for each instance of the component\n// this is supported by the useMemoMergePropsWithDefault function.\nexport const defaultProps: () => DSDataTableT.DefaultProps = () => ({\n height: '100%',\n width: '100%',\n renderRowActions: false,\n getRowVariant: () => 'ds-primary-row',\n isExpandable: false,\n expandedRows: {},\n disabledRows: {},\n isResizeable: false,\n isLoading: false,\n pagination: false,\n withFilterBar: false,\n filters: [],\n getIsDropValid: () => true,\n onColumnResize: () => null,\n onColumnSortChange: () => null,\n colsLayoutStyle: ColsLayoutStyle.Fixed,\n hiddenColumns: [],\n noResultsMessage: 'No Results Found',\n dragAndDropRows: false,\n maxDragAndDropLevel: 1,\n onRowsReorder: () => null,\n dragAndDropColumns: false,\n onColumnsReorder: () => null,\n onColumnSizeChange: () => null,\n onRowClick: () => null,\n onRowFocus: () => null,\n noSelectionColumn: false,\n selectSingle: false,\n onSelectionChange: () => null,\n textWrap: 'wrap',\n onCellValueChange: () => null,\n onFiltersChange: () => null,\n onPageChanged: () => null,\n onRowExpand: () => null,\n onColumnSort: () => null,\n isSkeleton: false,\n domIdAffix: uid(4),\n});\n\nexport const DSDataTablePropTypes = {\n ...getPropsPerSlotPropTypes(DSDataTableName, DSDataTableSlots),\n columns: PropTypes.arrayOf(\n PropTypes.shape({\n Header: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'Header name or component',\n ).isRequired,\n accessor: PropTypes.string.description('The entry of the data that this column will display'),\n id: PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),\n filter: PropTypes.oneOf(Object.values(FILTER_TYPES)).description('out-of-the-box filters'),\n Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'The custom component to render as a filter',\n ),\n Cell: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).description('The custom cell renderer component'),\n editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.node]).description(\n 'The editable out-of-the-box or component to render',\n ),\n disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),\n canResize: PropTypes.bool.description('Whereas this column should be resizable'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),\n minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),\n maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),\n canSort: PropTypes.bool.description('Whereas this column is sortable'),\n disableFirstOptionFocusOnFilter: PropTypes.bool.description(\n 'Whereas the first option should not be focused on filter',\n ),\n filterMinWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description(\n 'Minimum width of the filter',\n ),\n filterOptions: PropTypes.arrayOf(\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.string,\n label: PropTypes.string,\n }),\n ).description('Filter options'),\n isSortedDesc: PropTypes.bool.description('Whereas this column is sorted descendingly'),\n required: PropTypes.bool.description('Whereas this column is required'),\n alwaysDisplayEditIcon: PropTypes.bool.description(\n 'Whereas to always show the edit icon on this column if it is editable',\n ),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('How to wrap the text in the column'),\n }),\n ).description('Array of columns').isRequired,\n data: PropTypes.arrayOf(\n PropTypes.shape({\n tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description('Component for row details'),\n dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row'),\n }),\n ).description('Array of rows'),\n height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Height of the datatable component'),\n width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),\n renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description(\n 'The renderer to use for the action toolbar',\n ),\n isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),\n uniqueRowAccessor: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.func,\n ]).description(\n 'Column / Combination of columns / Function to call to produce a unique identifier for each row.' +\n ' This is necessary for the selectable and drag and drop features',\n ),\n disabledRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not',\n ),\n expandedRows: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is expanded or not',\n ),\n onRowExpand: PropTypes.func.description('Function invoked when a row is (un)expanded'),\n cellRendererProps: PropTypes.object.description(\n 'Object with all the props you want the cells to have available when rendering',\n ),\n selectSingle: PropTypes.bool.description('Whether the selectable feature is single').defaultValue(false),\n selection: PropTypes.object.description(\n 'Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is selected or not',\n ),\n onSelectionChange: PropTypes.func.description('Function invoked when a row is selected'),\n groupedRowsRenderHeader: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).description(\n 'String | Function to call which will display in the row headers',\n ),\n isResizeable: PropTypes.bool.description(\"Whether the datatable's columns are resizeable\"),\n filters: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string,\n type: PropTypes.string,\n value: PropTypes.any,\n }),\n ).description('Array of filter keys and values'),\n withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),\n filterBarProps: PropTypes.shape({\n filterBarAddonRenderer: PropTypes.func.description('Render filterbar right addon component'),\n customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'If you specify custom filters, you will need to render their pills here',\n ),\n isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),\n onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),\n onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),\n onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),\n onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),\n extraOptions: PropTypes.arrayOf(\n PropTypes.shape({\n type: PropTypes.string,\n id: PropTypes.string,\n label: PropTypes.string,\n onClick: PropTypes.func,\n }),\n ).description('Any extra option you want in the dropdownmenu of the filter bar'),\n }).description('Props for the filter bar'),\n onFiltersChange: PropTypes.func.description('Function invoked when filters change'),\n pagination: PropTypes.oneOfType([\n PropTypes.oneOf([false]),\n PropTypes.shape({\n pageCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('How many pages are there'),\n isLoadingPageCount: PropTypes.bool.description('Whether the page count is loading'),\n pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),\n canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),\n canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),\n pageSize: PropTypes.number.description('The current page size').defaultValue(10),\n showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),\n perPageOptions: PropTypes.arrayOf(\n PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.shape({\n dsId: PropTypes.string,\n value: PropTypes.number,\n label: PropTypes.string,\n type: PropTypes.oneOf(['single']),\n }),\n ]),\n )\n .description('The available options for page size')\n .defaultValue([10]),\n perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),\n minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),\n maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),\n onPageSizeChange: PropTypes.func\n .description('Function invoked when the page size changes')\n .defaultValue(() => null),\n onPreviousPage: PropTypes.func\n .description('Function invoked when the previous button is pressed')\n .defaultValue(() => null),\n onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),\n pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),\n dataIsPage: PropTypes.bool.description('Whether to treat data as a page').defaultValue(false),\n pageDetailsTitle: PropTypes.string\n .description('The title of the details (usually a column of your dataset)')\n .defaultValue(''),\n }),\n ]).description('Object containing the data for the pagination'),\n Pagination: PropTypes.func.description('Custom component to show in place of the pagination'),\n colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),\n hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),\n dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),\n onRowsReorder: PropTypes.func.description('Function invoked when a row is reordered'),\n maxDragAndDropLevel: PropTypes.number.description('Which level is the maximum allowed to drop into'),\n dragAndDropColumns: PropTypes.bool.description('Whether to turn on the d&d feature for the columns'),\n onColumnsReorder: PropTypes.func.description('Function invoked when a column is reordered'),\n getIsDropValid: PropTypes.func.description('Function to determine if a drop is valid'),\n textWrap: PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']).description('Global wrapping rule'),\n noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),\n noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),\n noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),\n noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).description(\n 'Custom content to show when dataset is empty',\n ),\n isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),\n onColumnResize: PropTypes.func\n .description('Function invoked when a column is resized')\n .deprecated({ version: '4.x', message: 'Use onColumnSizeChange' }),\n onColumnSizeChange: PropTypes.func.description('Function invoked when a column is resized'),\n onRowClick: PropTypes.func.description('Function invoked when clicking a row'),\n onRowFocus: PropTypes.func.description('Function invoked when focusing a row'),\n onCellValueChange: PropTypes.func.description(\"Function invoked when an editable cell's content is changed\"),\n onColumnSortChange: PropTypes.func\n .description('Function invoked when a column is sorted')\n .deprecated({ version: '4.x', message: 'Use onColumnSort' }),\n onColumnSort: PropTypes.func.description('Function invoked when a column is sorted'),\n onTableResize: PropTypes.func.description(\n 'Function invoked when the size of the internal table changes, e.g. when a the browser window is resized',\n ),\n actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n getRowVariant: PropTypes.func\n .description(\"Function invoked to determine a row's variant\")\n .defaultValue(`() => 'ds-primary-row'`),\n noSelectionColumn: PropTypes.bool.description('Whether to show the selection column or not').defaultValue(false),\n onPageChanged: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),\n onNoResultsButtonClick: PropTypes.func\n .description('Function invoked when the no results button is clicked')\n .defaultValue(() => null),\n isSkeleton: PropTypes.bool.description('Whether to show a skeleton loader in the datatable'),\n getAriaLabelForRow: PropTypes.func.description('Function invoked to determine a row aria-label'),\n domIdAffix: PropTypes.string\n .description('Affix to avoid duplicate ids')\n .defaultValue('4 randomly generated characters'),\n checkboxSelectAllProps: PropTypes.object.description('Props for the select all checkbox'),\n};\n\nexport const DSDataTablePropTypesSchema = DSDataTablePropTypes as unknown as WeakValidationMap<DSDataTableT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DataTable.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { withZustand } from "@elliemae/ds-zustand-helpers";
|
|
3
|
+
import { describe } from "@elliemae/ds-props-helpers";
|
|
3
4
|
import { MainContent } from "./parts/MainContent.js";
|
|
4
5
|
import { config } from "./configs/useStore/index.js";
|
|
5
|
-
import { describe } from "@elliemae/ds-props-helpers";
|
|
6
6
|
import { DSDataTablePropTypesSchema } from "./react-desc-prop-types.js";
|
|
7
7
|
const DataTable = withZustand(MainContent, config);
|
|
8
8
|
DataTable.displayName = "DataTable";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DataTable.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { withZustand } from '@elliemae/ds-zustand-helpers';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { MainContent } from './parts/MainContent.js';\nimport { config } from './configs/useStore/index.js';\nimport type { DSDataTableT } from './react-desc-prop-types.js';\nimport { DSDataTablePropTypesSchema } from './react-desc-prop-types.js';\n\nexport const DataTable: React.FunctionComponent<DSDataTableT.Props> = withZustand(MainContent, config);\n\nDataTable.displayName = 'DataTable';\nexport const DataTableWithSchema = describe(DataTable).description('Data Table');\nDataTableWithSchema.propTypes = DSDataTablePropTypesSchema;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAEvB,SAAS,kCAAkC;AAEpC,MAAM,YAAyD,YAAY,aAAa,MAAM;AAErG,UAAU,cAAc;AACjB,MAAM,sBAAsB,SAAS,SAAS,EAAE,YAAY,YAAY;AAC/E,oBAAoB,YAAY;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { useEffect } from "react";
|
|
3
|
+
function useFreezeVirtualScrollOnDrag(containerRef, isDragging) {
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
const container = containerRef.current;
|
|
6
|
+
if (!container || !isDragging) return;
|
|
7
|
+
let lastScrollTop = container.scrollTop;
|
|
8
|
+
const lockVerticalScroll = () => {
|
|
9
|
+
if (container.scrollTop !== lastScrollTop) {
|
|
10
|
+
container.scrollTop = lastScrollTop;
|
|
11
|
+
} else {
|
|
12
|
+
lastScrollTop = container.scrollTop;
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
container.addEventListener("scroll", lockVerticalScroll);
|
|
16
|
+
return () => {
|
|
17
|
+
container.removeEventListener("scroll", lockVerticalScroll);
|
|
18
|
+
};
|
|
19
|
+
}, [isDragging, containerRef]);
|
|
20
|
+
}
|
|
21
|
+
export {
|
|
22
|
+
useFreezeVirtualScrollOnDrag
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=useFreezeVirtualScrollOnDrag.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useFreezeVirtualScrollOnDrag.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\nimport type React from 'react';\nimport { useEffect } from 'react';\nexport function useFreezeVirtualScrollOnDrag(containerRef: React.RefObject<HTMLElement>, isDragging: boolean) {\n useEffect(() => {\n const container = containerRef.current;\n if (!container || !isDragging) return;\n\n let lastScrollTop = container.scrollTop;\n\n const lockVerticalScroll = () => {\n if (container.scrollTop !== lastScrollTop) {\n container.scrollTop = lastScrollTop;\n } else {\n lastScrollTop = container.scrollTop;\n }\n };\n\n container.addEventListener('scroll', lockVerticalScroll);\n\n return () => {\n container.removeEventListener('scroll', lockVerticalScroll);\n };\n }, [isDragging, containerRef]);\n}\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,iBAAiB;AACnB,SAAS,6BAA6B,cAA4C,YAAqB;AAC5G,YAAU,MAAM;AACd,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,aAAa,CAAC,WAAY;AAE/B,QAAI,gBAAgB,UAAU;AAE9B,UAAM,qBAAqB,MAAM;AAC/B,UAAI,UAAU,cAAc,eAAe;AACzC,kBAAU,YAAY;AAAA,MACxB,OAAO;AACL,wBAAgB,UAAU;AAAA,MAC5B;AAAA,IACF;AAEA,cAAU,iBAAiB,UAAU,kBAAkB;AAEvD,WAAO,MAAM;AACX,gBAAU,oBAAoB,UAAU,kBAAkB;AAAA,IAC5D;AAAA,EACF,GAAG,CAAC,YAAY,YAAY,CAAC;AAC/B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from "react";
|
|
|
3
3
|
const useInternalStateConfig = () => {
|
|
4
4
|
const [drilldownRowId, setDrilldownRowId] = useState(null);
|
|
5
5
|
const [focusedRowId, setFocusedRowId] = useState(null);
|
|
6
|
+
const [isHeaderCellDragging, setIsHeaderCellDragging] = useState(false);
|
|
6
7
|
const [reduxHeaders, setReduxHeaders] = useState({});
|
|
7
8
|
const patchHeader = useCallback((headerId, newHeader) => {
|
|
8
9
|
setReduxHeaders((prevReduxHeaders) => {
|
|
@@ -26,7 +27,9 @@ const useInternalStateConfig = () => {
|
|
|
26
27
|
setFocusedRowId,
|
|
27
28
|
reduxHeaders,
|
|
28
29
|
patchHeader,
|
|
29
|
-
patchHeaderFilterButtonAndMenu
|
|
30
|
+
patchHeaderFilterButtonAndMenu,
|
|
31
|
+
isHeaderCellDragging,
|
|
32
|
+
setIsHeaderCellDragging
|
|
30
33
|
}),
|
|
31
34
|
[
|
|
32
35
|
drilldownRowId,
|
|
@@ -35,7 +38,9 @@ const useInternalStateConfig = () => {
|
|
|
35
38
|
setFocusedRowId,
|
|
36
39
|
reduxHeaders,
|
|
37
40
|
patchHeader,
|
|
38
|
-
patchHeaderFilterButtonAndMenu
|
|
41
|
+
patchHeaderFilterButtonAndMenu,
|
|
42
|
+
isHeaderCellDragging,
|
|
43
|
+
setIsHeaderCellDragging
|
|
39
44
|
]
|
|
40
45
|
);
|
|
41
46
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/useInternalStateConfig.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useMemo, useState } from 'react';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\n\nexport const useInternalStateConfig = () => {\n const [drilldownRowId, setDrilldownRowId] = useState<string | null>(null);\n const [focusedRowId, setFocusedRowId] = useState<string | null>(null);\n const [isHeaderCellDragging, setIsHeaderCellDragging] = useState<boolean>(false);\n // TODO: @uluduena partition this state better\n const [reduxHeaders, setReduxHeaders] = useState<Record<string, DSDataTableT.ReduxHeader>>({});\n\n const patchHeader = useCallback((headerId: string, newHeader: Partial<DSDataTableT.ReduxHeader>) => {\n setReduxHeaders((prevReduxHeaders) => {\n const nextReduxHeaders = { ...prevReduxHeaders };\n nextReduxHeaders[headerId] = { ...(nextReduxHeaders?.[headerId] ?? {}), ...newHeader };\n return nextReduxHeaders;\n });\n }, []);\n\n const patchHeaderFilterButtonAndMenu = useCallback(\n (headerId: string, value: boolean) => {\n const newState = { hideFilterMenu: value, hideFilterButton: value };\n patchHeader(headerId, newState);\n },\n [patchHeader],\n );\n\n return useMemo(\n () => ({\n drilldownRowId,\n setDrilldownRowId,\n focusedRowId,\n setFocusedRowId,\n reduxHeaders,\n patchHeader,\n patchHeaderFilterButtonAndMenu,\n isHeaderCellDragging,\n setIsHeaderCellDragging,\n }),\n [\n drilldownRowId,\n setDrilldownRowId,\n focusedRowId,\n setFocusedRowId,\n reduxHeaders,\n patchHeader,\n patchHeaderFilterButtonAndMenu,\n isHeaderCellDragging,\n setIsHeaderCellDragging,\n ],\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,SAAS,gBAAgB;AAGxC,MAAM,yBAAyB,MAAM;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAwB,IAAI;AACxE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAwB,IAAI;AACpE,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAkB,KAAK;AAE/E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmD,CAAC,CAAC;AAE7F,QAAM,cAAc,YAAY,CAAC,UAAkB,cAAiD;AAClG,oBAAgB,CAAC,qBAAqB;AACpC,YAAM,mBAAmB,EAAE,GAAG,iBAAiB;AAC/C,uBAAiB,QAAQ,IAAI,EAAE,GAAI,mBAAmB,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AACrF,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iCAAiC;AAAA,IACrC,CAAC,UAAkB,UAAmB;AACpC,YAAM,WAAW,EAAE,gBAAgB,OAAO,kBAAkB,MAAM;AAClE,kBAAY,UAAU,QAAQ;AAAA,IAChC;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/configs/useStore/useStore.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n drilldownRowId: null,\n focusedRowId: null,\n isShiftPressed: false,\n reduxHeaders: {},\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n patchHeader: (headerId, newHeader) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n },\n }));\n },\n patchHeaderFilterButtonAndMenu: (headerId, value) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n },\n }));\n },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n const {\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...tableProps\n } = usePropsStore((state) => state);\n\n const internalStore = useInternalStore((state) => state);\n return {\n tableProps,\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...internalStore,\n };\n};\n\nexport const config = {\n defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAuC;AAChD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,eAAe,kBAAkB,qBAAqB;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n drilldownRowId: null,\n focusedRowId: null,\n isShiftPressed: false,\n reduxHeaders: {},\n isHeaderCellDragging: false,\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n patchHeader: (headerId, newHeader) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n },\n }));\n },\n patchHeaderFilterButtonAndMenu: (headerId, value) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n },\n }));\n },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n const {\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...tableProps\n } = usePropsStore((state) => state);\n\n const internalStore = useInternalStore((state) => state);\n return {\n tableProps,\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...internalStore,\n };\n};\n\nexport const config = {\n defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,oBAAuC;AAChD,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,eAAe,kBAAkB,qBAAqB;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,sBAAsB;AACxB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,cAAc,CAAC,UAAU,KAAK;AAElC,QAAM,gBAAgB,iBAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -64,10 +64,14 @@ const withConditionalDnDColumnContext = (Component) => function(props) {
|
|
|
64
64
|
);
|
|
65
65
|
const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);
|
|
66
66
|
if (dragAndDropColumns)
|
|
67
|
-
return
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
67
|
+
return (
|
|
68
|
+
// For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user
|
|
69
|
+
// drags the column header to the left or right
|
|
70
|
+
/* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, autoScroll: { threshold: { y: 0, x: 0.2 } }, children: [
|
|
71
|
+
/* @__PURE__ */ jsx(DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ jsx(Component, { ...props }) }),
|
|
72
|
+
/* @__PURE__ */ jsx(DragOverlay, { modifiers: [restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ jsx(HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
|
|
73
|
+
] })
|
|
74
|
+
);
|
|
71
75
|
return /* @__PURE__ */ jsx(Component, { ...props });
|
|
72
76
|
};
|
|
73
77
|
export {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n DndContext,\n DragOverlay,\n arrayMove,\n restrictToFirstScrollableAncestor,\n useHierarchyDndkitConfig,\n type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n const { id } = col;\n augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n if (col.columns)\n col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n flatten(subColumn, childIndex, id),\n );\n };\n cols.forEach((col, index) => flatten(col, index));\n return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n function (props) {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n (movedItem, indexes) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n delete colData.columns;\n nodes[dndData.uid] = colData;\n });\n const newData = [] as DSDataTableT.Column[];\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n isHorizontalDnD: true,\n onReorder,\n });\n\n const dragOverlayCol = useMemo(\n () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n [activeId, flattenedItems],\n );\n const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n if (dragAndDropColumns)\n return (\n <DndContext {...dndContextProps}>\n <DnDGroupContext.Provider value={DnDGroupContextVal}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable func-names */\n/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n DndContext,\n DragOverlay,\n arrayMove,\n restrictToFirstScrollableAncestor,\n useHierarchyDndkitConfig,\n type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n const { id } = col;\n augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n if (col.columns)\n col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n flatten(subColumn, childIndex, id),\n );\n };\n cols.forEach((col, index) => flatten(col, index));\n return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n function (props) {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n (movedItem, indexes) => {\n // Send from index to target index\n const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n // Pull the cols's data into an object\n const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n delete colData.columns;\n nodes[dndData.uid] = colData;\n });\n const newData = [] as DSDataTableT.Column[];\n newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n // Don't send internal columns to the user\n if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n return;\n }\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (dndData.parentId) {\n const parentNode = nodes[dndData.parentId];\n if (parentNode.columns) parentNode.columns.push(colData);\n else parentNode.columns = [colData];\n } else newData.push(colData);\n });\n onColumnsReorder(newData, indexes);\n },\n [flattenedItems, onColumnsReorder],\n );\n\n const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n flattenedItems,\n isHorizontalDnD: true,\n onReorder,\n });\n\n const dragOverlayCol = useMemo(\n () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n [activeId, flattenedItems],\n );\n const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n if (dragAndDropColumns)\n return (\n // For some reason we need to limit the autoScroll threshold to avoid the row container to scroll when the user\n // drags the column header to the left or right\n <DndContext {...dndContextProps} autoScroll={{ threshold: { y: 0, x: 0.2 } }}>\n <DnDGroupContext.Provider value={DnDGroupContextVal}>\n <Component {...props} />\n </DnDGroupContext.Provider>\n <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n </DragOverlay>\n </DndContext>\n );\n return <Component {...props} />;\n };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC2Ff,SAEI,KAFJ;AAxFR;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,aAAa,eAAe;AACrC,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAG9B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,iBAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,iBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,qBAAqB,QAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF;AAAA;AAAA;AAAA,MAGE,qBAAC,cAAY,GAAG,iBAAiB,YAAY,EAAE,WAAW,EAAE,GAAG,GAAG,GAAG,IAAI,EAAE,GACzE;AAAA,4BAAC,gBAAgB,UAAhB,EAAyB,OAAO,oBAC/B,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,QACA,oBAAC,eAAY,WAAW,CAAC,iCAAiC,GACvD,qBAAW,oBAAC,mBAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,SACF;AAAA;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -84,7 +84,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
|
|
|
84
84
|
[active, flattenedData]
|
|
85
85
|
);
|
|
86
86
|
if (dragAndDropRows)
|
|
87
|
-
return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
|
|
87
|
+
return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, autoScroll: { layoutShiftCompensation: false }, children: [
|
|
88
88
|
/* @__PURE__ */ jsx(SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Component, { ...props }) }) }),
|
|
89
89
|
createPortal(
|
|
90
90
|
/* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, modifiers: [restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ jsx(Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n restrictToFirstScrollableAncestor,\n useTreeDndkitConfig,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n },\n [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n restrictToFirstScrollableAncestor,\n useTreeDndkitConfig,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n const isExpandable = usePropsStore((state) => state.isExpandable);\n const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n const rootMovedData = movedData.root;\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n rootMovedData.forEach((row) => {\n if (row.original.subRows) delete row.original.subRows;\n delete row.original.subRows;\n nodes[row.uid] = row.original;\n });\n const newUserData = [] as DSDataTableT.Row[];\n rootMovedData.forEach((row) => {\n // If row has parent, insert it to it's subrows\n // otherwise append it to the new user data\n if (row.parentId) {\n const parentNode = nodes[row.parentId];\n if (parentNode?.subRows) parentNode.subRows.push(row.original);\n else parentNode.subRows = [row.original];\n } else newUserData.push(row.original);\n });\n // Tell the user that the order has change, he can chose to commit it or not\n onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n flattenedData,\n allDataFlattened,\n });\n setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n },\n [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n );\n\n const theFlattenedItems = useMemo(\n () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n [allDataFlattened],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: theFlattenedItems,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid,\n });\n\n const containerSortableContextProps = sortableContextProps.root;\n\n const visibleItems = useMemo(() => {\n // active in this case is the row that is being dragged\n // if no drag is happening, return the flattened data as is\n if (!active) return flattenedData;\n // if a drag is happening, exclude the children of the dragged row\n // this is a design choice, this way the user can't drag a parent row into one of it's children.\n const excludeParentIds = [active.id];\n return flattenedData.filter((datum) => {\n const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n if (isParentExcluded) {\n excludeParentIds.push(datum.uid);\n return false;\n }\n return true;\n });\n }, [active, flattenedData]);\n\n const ctx = useMemo(\n () => ({\n visibleItems,\n dropIndicatorPosition,\n isDropValid,\n }),\n [visibleItems, dropIndicatorPosition, isDropValid],\n );\n\n const dragOverlayRow = useMemo(\n () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n [active, flattenedData],\n );\n\n if (dragAndDropRows)\n return (\n <DndContext {...dndContextProps} autoScroll={{ layoutShiftCompensation: false }}>\n <SortableContext {...containerSortableContextProps}>\n <DnDTreeContext.Provider value={ctx}>\n <Component {...props} />\n </DnDTreeContext.Provider>\n </SortableContext>\n {createPortal(\n <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n );\n return <Component {...props} />;\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { useSortable } from "@elliemae/ds-drag-and-drop";
|
|
4
|
-
import { useContext, useMemo } from "react";
|
|
4
|
+
import { useContext, useEffect, useMemo } from "react";
|
|
5
5
|
import { DropIndicatorPosition } from "../../configs/constants.js";
|
|
6
|
-
import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
|
|
6
|
+
import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
|
|
7
7
|
import { SortableItemContext } from "./SortableItemContext.js";
|
|
8
8
|
import { DnDGroupContext } from "./DnDGroupContext.js";
|
|
9
9
|
const withDnDSortableColumnContext = (Component) => (props) => {
|
|
10
10
|
const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);
|
|
11
|
+
const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);
|
|
11
12
|
const { activeIndex } = useContext(DnDGroupContext);
|
|
12
13
|
const draggableOptions = useMemo(
|
|
13
14
|
() => ({
|
|
@@ -16,6 +17,13 @@ const withDnDSortableColumnContext = (Component) => (props) => {
|
|
|
16
17
|
[props.header.id]
|
|
17
18
|
);
|
|
18
19
|
const useSortableHelpers = useSortable(draggableOptions);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (useSortableHelpers.isDragging) {
|
|
22
|
+
setIsHeaderCellDragging(true);
|
|
23
|
+
} else {
|
|
24
|
+
setIsHeaderCellDragging(false);
|
|
25
|
+
}
|
|
26
|
+
}, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);
|
|
19
27
|
const draggableProps = useMemo(() => {
|
|
20
28
|
if (!dragAndDropColumns) return false;
|
|
21
29
|
const { index, overIndex } = useSortableHelpers;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withDnDSortableColumnContext.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n (props: T) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const { activeIndex } = useContext(DnDGroupContext);\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id: props.header.id,\n }),\n [props.header.id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // calculate all the \"useSortable\" values as per required\n const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n if (!dragAndDropColumns) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n dropIndicatorPosition:\n activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n isDropValid: true,\n };\n }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useEffect, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n (props: T) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const setIsHeaderCellDragging = useInternalStore((state) => state.setIsHeaderCellDragging);\n\n const { activeIndex } = useContext(DnDGroupContext);\n\n // onMount generate unique options, so everyting is only ran once\n const draggableOptions = useMemo(\n () => ({\n id: props.header.id,\n }),\n [props.header.id],\n );\n\n const useSortableHelpers = useSortable(draggableOptions);\n\n // Since Header component for some reason is being render inside the virtual scrollable list,\n // we need to bubble this prop up to avoid the row list being scrolled when dragging a header cell.\n useEffect(() => {\n if (useSortableHelpers.isDragging) {\n setIsHeaderCellDragging(true);\n } else {\n setIsHeaderCellDragging(false);\n }\n }, [useSortableHelpers.isDragging, setIsHeaderCellDragging]);\n // calculate all the \"useSortable\" values as per required\n const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n if (!dragAndDropColumns) return false;\n\n const { index, overIndex } = useSortableHelpers;\n\n return {\n ...useSortableHelpers,\n shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n dropIndicatorPosition:\n activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n isDropValid: true,\n };\n }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n // we use a context so we can easly access information wherever without bubbling down\n // this context is all Memoized so as long as component is not re-mounted,\n // the context won't trigger un-required renders per-se...\n const ctx: SortableItemContextType = useMemo(\n () => ({\n draggableProps,\n }),\n [draggableProps],\n );\n // we always add the context, if draggableProps===false we don't have the DnD enabled.\n return (\n <SortableItemContext.Provider value={ctx}>\n <Component {...props} />\n </SortableItemContext.Provider>\n );\n };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+Df;AA9DR,SAAS,mBAAmB;AAC5B,SAAgB,YAAY,WAAW,eAAe;AACtD,SAAS,6BAA6B;AACtC,SAAS,kBAAkB,qBAAqB;AAGhD,SAAS,2BAA2B;AACpC,SAAS,uBAAuB;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,0BAA0B,iBAAiB,CAAC,UAAU,MAAM,uBAAuB;AAEzF,QAAM,EAAE,YAAY,IAAI,WAAW,eAAe;AAGlD,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAIvD,YAAU,MAAM;AACd,QAAI,mBAAmB,YAAY;AACjC,8BAAwB,IAAI;AAAA,IAC9B,OAAO;AACL,8BAAwB,KAAK;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,mBAAmB,YAAY,uBAAuB,CAAC;AAE3D,QAAM,iBAA+C,QAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,sBAAsB,QAAQ,sBAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -8,6 +8,7 @@ import { EmptyContent } from "./EmptyContent.js";
|
|
|
8
8
|
import { Headers } from "./Headers/index.js";
|
|
9
9
|
import { MemoizedLoader as Loader } from "./Loader.js";
|
|
10
10
|
import { RowsWithContext as Rows } from "./Rows.js";
|
|
11
|
+
import { useFreezeVirtualScrollOnDrag } from "../configs/useFreezeVirtualScrollOnDrag.js";
|
|
11
12
|
const VirtualRowsList = () => {
|
|
12
13
|
const isLoading = usePropsStore((state) => state.isLoading);
|
|
13
14
|
const virtualListRef = usePropsStore((state) => state.virtualListRef);
|
|
@@ -16,6 +17,7 @@ const VirtualRowsList = () => {
|
|
|
16
17
|
const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);
|
|
17
18
|
const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);
|
|
18
19
|
const getOwnerProps = usePropsStore((store) => store.get);
|
|
20
|
+
const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);
|
|
19
21
|
const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);
|
|
20
22
|
const onKeyDown = useCallback(
|
|
21
23
|
(e) => {
|
|
@@ -33,6 +35,7 @@ const VirtualRowsList = () => {
|
|
|
33
35
|
() => isEmptyContent || isLoading ? "100%" : totalSize,
|
|
34
36
|
[isEmptyContent, isLoading, totalSize]
|
|
35
37
|
);
|
|
38
|
+
useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);
|
|
36
39
|
return /* @__PURE__ */ jsx(
|
|
37
40
|
StyledVirtualListWrapper,
|
|
38
41
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/VirtualRowsList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable consistent-return */\nimport React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { useFreezeVirtualScrollOnDrag } from '../configs/useFreezeVirtualScrollOnDrag.js';\nexport const VirtualRowsList = () => {\n const isLoading = usePropsStore((state) => state.isLoading);\n\n const virtualListRef = usePropsStore((state) => state.virtualListRef);\n const flattenedData = usePropsStore((state) => state.flattenedData);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n const getOwnerProps = usePropsStore((store) => store.get);\n const isHeaderCellDragging = useInternalStore((state) => state.isHeaderCellDragging);\n const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n\n const onKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.ctrlKey && e.code === 'End') {\n scrollToIndex(flattenedData.length - 1);\n setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n } else if (e.ctrlKey && e.code === 'Home') {\n scrollToIndex(0, { align: 'center' });\n setFocusedRowId(flattenedData[0].uid);\n }\n },\n [scrollToIndex, setFocusedRowId, flattenedData],\n );\n\n const tableContentWrapperHeight = useMemo(\n () => (isEmptyContent || isLoading ? '100%' : totalSize),\n [isEmptyContent, isLoading, totalSize],\n );\n\n useFreezeVirtualScrollOnDrag(virtualListRef, isHeaderCellDragging);\n\n return (\n <StyledVirtualListWrapper\n innerRef={virtualListRef}\n data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n onKeyDown={onKeyDown}\n tabIndex={-1}\n role=\"rowgroup\"\n gridLayout={gridLayout}\n totalColumnsWidth={totalColumnsWidth}\n aria-busy={isLoading}\n getOwnerProps={getOwnerProps}\n >\n <StyledTableContentWrapper\n height={tableContentWrapperHeight}\n rows={['min-content', 'auto']}\n cols={['100%']}\n getOwnerProps={getOwnerProps}\n >\n <Headers />\n {isEmptyContent && <EmptyContent />}\n {isLoading ? <Loader /> : null}\n {!isLoading && !isEmptyContent && <Rows />}\n </StyledTableContentWrapper>\n </StyledVirtualListWrapper>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACsDjB,SAME,KANF;AArDN,SAAgB,aAAa,eAAe;AAC5C,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B,gCAAgC;AACpE,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,kBAAkB,cAAc;AACzC,SAAS,mBAAmB,YAAY;AACxC,SAAS,oCAAoC;AACtC,MAAM,kBAAkB,MAAM;AACnC,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAE1D,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,IAAI,cAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,IAAI,cAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,uBAAuB,iBAAiB,CAAC,UAAU,MAAM,oBAAoB;AACnF,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,YAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,4BAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,+BAA6B,gBAAgB,oBAAoB;AAEjE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,WAAQ;AAAA,YACR,kBAAkB,oBAAC,gBAAa;AAAA,YAChC,YAAY,oBAAC,UAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,oBAAC,QAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|