@elliemae/ds-data-table 2.0.0-next.7 → 2.0.0-rc.10
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/cjs/DataTable.js +5 -0
- package/cjs/DataTableSchema.js +24 -12
- package/cjs/addons/Columns/ColumnDragHandle/ColumnDragHandle.js +9 -8
- package/cjs/addons/Columns/ColumnExpand/ColumnExpand.js +22 -14
- package/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +23 -16
- package/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +18 -12
- package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js +15 -10
- package/cjs/addons/Editables/DateEditableCell/DateEditableCell.js +14 -7
- package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js +14 -7
- package/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js +166 -0
- package/cjs/addons/Filters/Components/DateRangeFilter/index.js +16 -11
- package/cjs/addons/Filters/Components/DateSwitcherFilter/index.js +142 -0
- package/cjs/addons/Filters/Components/NumberRangeFilter/index.js +85 -33
- package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +86 -90
- package/cjs/addons/Filters/Components/SelectFilter/MultiSelectFilter.js +39 -29
- package/cjs/addons/Filters/Components/SelectFilter/SingleSelectFilter.js +39 -27
- package/cjs/addons/Filters/Components/SelectFilter/useSelectFilterHandlers.js +16 -12
- package/cjs/addons/Filters/Components/SelectFilter/utils.js +10 -4
- package/cjs/addons/Filters/Components/SingleDateFilter/index.js +16 -11
- package/cjs/addons/Filters/Components/index.js +8 -6
- package/cjs/addons/Filters/index.js +8 -6
- package/cjs/addons/Pagination/Pagination.js +18 -53
- package/cjs/configs/constants.js +1 -3
- package/cjs/configs/fixedSizes.js +1 -1
- package/cjs/configs/useDatatableConfig.js +5 -0
- package/cjs/configs/usePaginationConfig.js +10 -4
- package/cjs/configs/useRowFlattenization.js +13 -6
- package/cjs/configs/useTableColsWithAddons.js +33 -19
- package/cjs/exported-related/EditableCell.js +2 -2
- package/cjs/exported-related/FilterPopover.js +62 -25
- package/cjs/exported-related/FilterTypes.js +3 -2
- package/cjs/exported-related/Filters/applyOutOfTheBoxFilters.js +8 -3
- package/cjs/exported-related/Filters/currencyRangeFilterFn.js +24 -0
- package/cjs/exported-related/Filters/dateRangeFilterFn.js +10 -4
- package/cjs/exported-related/Filters/dateSwitcherFilterFn.js +12 -0
- package/cjs/exported-related/Filters/index.js +2 -2
- package/cjs/exported-related/Filters/multiSelectFilterFn.js +9 -3
- package/cjs/exported-related/Filters/numberRangeFilterFn.js +7 -1
- package/cjs/exported-related/Filters/singleDateFilterFn.js +10 -4
- package/cjs/exported-related/Filters/singleSelectFilterFn.js +5 -1
- package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js +9 -0
- package/cjs/exported-related/RowRenderer/index.js +10 -4
- package/cjs/exported-related/RowRenderer/useRowRendererHandlers.js +32 -19
- package/cjs/exported-related/RowRenderer/useRowRendererProperties.js +11 -3
- package/cjs/exported-related/Toolbar/Toolbar.js +18 -13
- package/cjs/exported-related/groupBy.js +13 -5
- package/cjs/exported-related/index.js +2 -2
- package/cjs/helpers/addCellData.js +9 -4
- package/cjs/helpers/cellPadding.js +11 -9
- package/cjs/helpers/columnsToGrid.js +3 -0
- package/cjs/helpers/getIdFromUniqueRowAccessor.js +3 -0
- package/cjs/helpers/refs-helpers.js +13 -3
- package/cjs/index.js +2 -2
- package/cjs/parts/Cells/Cell.js +33 -22
- package/cjs/parts/Cells/index.js +2 -0
- package/cjs/parts/DnDHandle.js +26 -17
- package/cjs/parts/DropIndicator.js +27 -21
- package/cjs/parts/EmptyContent.js +12 -9
- package/cjs/parts/FilterBar/FiltersBar.js +29 -19
- package/cjs/parts/FilterBar/components/DateRangePill.js +14 -10
- package/cjs/parts/FilterBar/components/DateSwitcherPill.js +45 -0
- package/cjs/parts/FilterBar/components/MultiSelectPill.js +24 -17
- package/cjs/parts/FilterBar/components/NumberRangePill.js +14 -10
- package/cjs/parts/FilterBar/components/SelectPill.js +15 -11
- package/cjs/parts/FilterBar/components/SingleDatePill.js +14 -10
- package/cjs/parts/FilterBar/components/index.js +2 -2
- package/cjs/parts/Filters/index.js +24 -13
- package/cjs/parts/Footer.js +8 -5
- package/cjs/parts/Headers/HeaderCell.js +15 -9
- package/cjs/parts/Headers/HeaderCellGroup.js +21 -13
- package/cjs/parts/Headers/HeaderCellTitle.js +43 -31
- package/cjs/parts/Headers/HeaderResizer.js +14 -7
- package/cjs/parts/Headers/index.js +3 -1
- package/cjs/parts/Headers/useHeaderCellConfig.js +12 -7
- package/cjs/parts/Headers/useHeaderCellHandlers.js +31 -20
- package/cjs/parts/HoC/withConditionalDnDColumnContext.js +49 -19
- package/cjs/parts/HoC/withConditionalDnDRowContext.js +16 -12
- package/cjs/parts/HoC/withConditionalDnDSortableContext.js +23 -13
- package/cjs/parts/HoC/withDnDSortableColumnContext.js +10 -19
- package/cjs/parts/HoC/withDnDSortableRowContext.js +8 -17
- package/cjs/parts/Row.js +15 -10
- package/cjs/parts/RowLoading.js +10 -4
- package/cjs/parts/RowVariants/RowVariantHeader.js +32 -20
- package/cjs/parts/RowVariants/RowVariantPrimary.js +10 -9
- package/cjs/parts/RowVariants/RowVariantSecondary.js +10 -9
- package/cjs/parts/RowVariants/index.js +13 -6
- package/cjs/parts/Rows.js +8 -1
- package/cjs/parts/SortByCaret.js +16 -16
- package/cjs/parts/SortableHeaderCell.js +5 -0
- package/cjs/parts/TableContent.js +10 -4
- package/cjs/parts/VirtualRowsList.js +10 -3
- package/cjs/parts/index.js +1 -1
- package/cjs/prop-types.js +5 -0
- package/cjs/redux/reducers/headersReducers/logic.js +10 -4
- package/cjs/styled.js +87 -63
- package/esm/DataTable.js +5 -0
- package/esm/DataTableSchema.js +24 -12
- package/esm/addons/Columns/ColumnDragHandle/ColumnDragHandle.js +9 -8
- package/esm/addons/Columns/ColumnExpand/ColumnExpand.js +22 -14
- package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js +21 -13
- package/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js +17 -10
- package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js +14 -8
- package/esm/addons/Editables/DateEditableCell/DateEditableCell.js +14 -7
- package/esm/addons/Editables/TextEditableCell/TextEditableCell.js +14 -7
- package/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +156 -0
- package/esm/addons/Filters/Components/DateRangeFilter/index.js +16 -10
- package/esm/addons/Filters/Components/DateSwitcherFilter/index.js +133 -0
- package/esm/addons/Filters/Components/NumberRangeFilter/index.js +85 -31
- package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +86 -87
- package/esm/addons/Filters/Components/SelectFilter/MultiSelectFilter.js +39 -29
- package/esm/addons/Filters/Components/SelectFilter/SingleSelectFilter.js +39 -27
- package/esm/addons/Filters/Components/SelectFilter/useSelectFilterHandlers.js +16 -12
- package/esm/addons/Filters/Components/SelectFilter/utils.js +10 -4
- package/esm/addons/Filters/Components/SingleDateFilter/index.js +16 -10
- package/esm/addons/Filters/Components/index.js +2 -1
- package/esm/addons/Filters/index.js +2 -1
- package/esm/addons/Pagination/Pagination.js +17 -52
- package/esm/configs/constants.js +1 -3
- package/esm/configs/fixedSizes.js +1 -1
- package/esm/configs/useDatatableConfig.js +5 -0
- package/esm/configs/usePaginationConfig.js +10 -4
- package/esm/configs/useRowFlattenization.js +13 -6
- package/esm/configs/useTableColsWithAddons.js +34 -20
- package/esm/exported-related/EditableCell.js +2 -2
- package/esm/exported-related/FilterPopover.js +62 -26
- package/esm/exported-related/FilterTypes.js +3 -2
- package/esm/exported-related/Filters/applyOutOfTheBoxFilters.js +8 -3
- package/esm/exported-related/Filters/currencyRangeFilterFn.js +20 -0
- package/esm/exported-related/Filters/dateRangeFilterFn.js +10 -4
- package/esm/exported-related/Filters/dateSwitcherFilterFn.js +8 -0
- package/esm/exported-related/Filters/index.js +1 -1
- package/esm/exported-related/Filters/multiSelectFilterFn.js +9 -3
- package/esm/exported-related/Filters/numberRangeFilterFn.js +7 -1
- package/esm/exported-related/Filters/singleDateFilterFn.js +10 -4
- package/esm/exported-related/Filters/singleSelectFilterFn.js +5 -1
- package/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js +9 -0
- package/esm/exported-related/RowRenderer/index.js +10 -4
- package/esm/exported-related/RowRenderer/useRowRendererHandlers.js +32 -19
- package/esm/exported-related/RowRenderer/useRowRendererProperties.js +11 -3
- package/esm/exported-related/Toolbar/Toolbar.js +16 -10
- package/esm/exported-related/groupBy.js +13 -5
- package/esm/exported-related/index.js +1 -1
- package/esm/helpers/addCellData.js +9 -4
- package/esm/helpers/cellPadding.js +11 -9
- package/esm/helpers/columnsToGrid.js +3 -0
- package/esm/helpers/getIdFromUniqueRowAccessor.js +3 -0
- package/esm/helpers/refs-helpers.js +13 -3
- package/esm/index.js +1 -1
- package/esm/parts/Cells/Cell.js +33 -22
- package/esm/parts/Cells/index.js +2 -0
- package/esm/parts/DnDHandle.js +25 -15
- package/esm/parts/DropIndicator.js +27 -21
- package/esm/parts/EmptyContent.js +11 -7
- package/esm/parts/FilterBar/FiltersBar.js +29 -18
- package/esm/parts/FilterBar/components/DateRangePill.js +14 -10
- package/esm/parts/FilterBar/components/DateSwitcherPill.js +37 -0
- package/esm/parts/FilterBar/components/MultiSelectPill.js +24 -17
- package/esm/parts/FilterBar/components/NumberRangePill.js +14 -10
- package/esm/parts/FilterBar/components/SelectPill.js +15 -11
- package/esm/parts/FilterBar/components/SingleDatePill.js +14 -10
- package/esm/parts/FilterBar/components/index.js +1 -1
- package/esm/parts/Filters/index.js +20 -9
- package/esm/parts/Footer.js +8 -5
- package/esm/parts/Headers/HeaderCell.js +15 -9
- package/esm/parts/Headers/HeaderCellGroup.js +21 -14
- package/esm/parts/Headers/HeaderCellTitle.js +43 -31
- package/esm/parts/Headers/HeaderResizer.js +14 -7
- package/esm/parts/Headers/index.js +4 -2
- package/esm/parts/Headers/useHeaderCellConfig.js +12 -7
- package/esm/parts/Headers/useHeaderCellHandlers.js +31 -20
- package/esm/parts/HoC/withConditionalDnDColumnContext.js +48 -18
- package/esm/parts/HoC/withConditionalDnDRowContext.js +15 -11
- package/esm/parts/HoC/withConditionalDnDSortableContext.js +22 -12
- package/esm/parts/HoC/withDnDSortableColumnContext.js +11 -20
- package/esm/parts/HoC/withDnDSortableRowContext.js +9 -18
- package/esm/parts/Row.js +12 -10
- package/esm/parts/RowLoading.js +10 -4
- package/esm/parts/RowVariants/RowVariantHeader.js +32 -20
- package/esm/parts/RowVariants/RowVariantPrimary.js +10 -9
- package/esm/parts/RowVariants/RowVariantSecondary.js +10 -9
- package/esm/parts/RowVariants/index.js +13 -6
- package/esm/parts/Rows.js +7 -0
- package/esm/parts/SortByCaret.js +16 -14
- package/esm/parts/SortableHeaderCell.js +5 -0
- package/esm/parts/TableContent.js +10 -4
- package/esm/parts/VirtualRowsList.js +10 -3
- package/esm/prop-types.js +5 -0
- package/esm/redux/reducers/headersReducers/logic.js +10 -4
- package/esm/styled.js +87 -60
- package/package.json +54 -108
- package/types/DataTable.d.ts +245 -43
- package/types/DataTableSchema.d.ts +245 -43
- package/types/addons/Filters/Components/CurrencyRangeFilter/index.d.ts +3 -0
- package/types/addons/Filters/Components/{TextInputFilter → DateSwitcherFilter}/index.d.ts +1 -1
- package/types/addons/Filters/Components/SelectFilter/BaseSelectFilter.d.ts +7 -1
- package/types/addons/Filters/Components/SelectFilter/components.d.ts +6 -6
- package/types/addons/Filters/Components/index.d.ts +2 -1
- package/types/configs/constants.d.ts +1 -3
- package/types/exported-related/FilterPopover.d.ts +3 -0
- package/types/exported-related/FilterTypes.d.ts +2 -1
- package/types/exported-related/Filters/currencyRangeFilterFn.d.ts +5 -0
- package/types/exported-related/Filters/dateSwitcherFilterFn.d.ts +6 -0
- package/types/exported-related/Filters/index.d.ts +1 -1
- package/types/exported-related/Filters/multiSelectFilterFn.d.ts +3 -1
- package/types/exported-related/Filters/singleDateFilterFn.d.ts +1 -1
- package/types/exported-related/Filters/singleSelectFilterFn.d.ts +3 -1
- package/types/helpers/refs-helpers.d.ts +1 -1
- package/types/parts/FilterBar/components/DateSwitcherPill.d.ts +6 -0
- package/types/parts/FilterBar/components/MultiSelectPill.d.ts +2 -2
- package/types/parts/FilterBar/components/SelectPill.d.ts +2 -2
- package/types/parts/FilterBar/components/index.d.ts +1 -1
- package/types/parts/FilterBar/styled.d.ts +167 -32
- package/types/parts/FilterBar/types.d.ts +6 -0
- package/types/parts/Headers/HeaderCellGroup.d.ts +4 -3
- package/types/parts/Row.d.ts +2 -1
- package/types/styled.d.ts +19 -21
- package/types/types/props.d.ts +14 -4
- package/cjs/addons/Filters/Components/TextInputFilter/index.js +0 -86
- package/cjs/addons/Pagination/ActiveZoneButtons.js +0 -63
- package/cjs/addons/Pagination/PagesButtons.js +0 -77
- package/cjs/addons/Pagination/PerPageSelector.js +0 -84
- package/cjs/exported-related/Filters/textFilterFn.js +0 -10
- package/cjs/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -64
- package/cjs/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -128
- package/cjs/helpers/dndkit/hierarchy/types.js +0 -2
- package/cjs/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -54
- package/cjs/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -36
- package/cjs/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -93
- package/cjs/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -78
- package/cjs/helpers/dndkit/tree/customCollisionDetection.js +0 -86
- package/cjs/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -127
- package/cjs/helpers/dndkit/tree/types.js +0 -2
- package/cjs/helpers/dndkit/tree/useTreeActionHandlers.js +0 -74
- package/cjs/helpers/dndkit/tree/useTreeAnnouncements.js +0 -55
- package/cjs/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -128
- package/cjs/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -51
- package/cjs/helpers/dndkit/types.js +0 -2
- package/cjs/helpers/dndkit/utilities.js +0 -51
- package/cjs/parts/FilterBar/components/TextPill.js +0 -38
- package/cjs/parts/HoC/DragOverlayContext.js +0 -11
- package/esm/addons/Filters/Components/TextInputFilter/index.js +0 -77
- package/esm/addons/Pagination/ActiveZoneButtons.js +0 -57
- package/esm/addons/Pagination/PagesButtons.js +0 -69
- package/esm/addons/Pagination/PerPageSelector.js +0 -73
- package/esm/exported-related/Filters/textFilterFn.js +0 -6
- package/esm/helpers/dndkit/hierarchy/customCollisionDetection.js +0 -60
- package/esm/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js +0 -120
- package/esm/helpers/dndkit/hierarchy/types.js +0 -1
- package/esm/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js +0 -50
- package/esm/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js +0 -32
- package/esm/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js +0 -87
- package/esm/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js +0 -74
- package/esm/helpers/dndkit/tree/customCollisionDetection.js +0 -82
- package/esm/helpers/dndkit/tree/getTreeKeyboardCoordinates.js +0 -119
- package/esm/helpers/dndkit/tree/types.js +0 -1
- package/esm/helpers/dndkit/tree/useTreeActionHandlers.js +0 -70
- package/esm/helpers/dndkit/tree/useTreeAnnouncements.js +0 -51
- package/esm/helpers/dndkit/tree/useTreeDndkitConfig.js +0 -122
- package/esm/helpers/dndkit/tree/useTreePreviewHandlers.js +0 -47
- package/esm/helpers/dndkit/types.js +0 -1
- package/esm/helpers/dndkit/utilities.js +0 -46
- package/esm/parts/FilterBar/components/TextPill.js +0 -30
- package/esm/parts/HoC/DragOverlayContext.js +0 -7
- package/types/addons/Pagination/ActiveZoneButtons.d.ts +0 -9
- package/types/addons/Pagination/PagesButtons.d.ts +0 -4
- package/types/addons/Pagination/PerPageSelector.d.ts +0 -8
- package/types/exported-related/Filters/textFilterFn.d.ts +0 -2
- package/types/helpers/dndkit/hierarchy/customCollisionDetection.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/types.d.ts +0 -66
- package/types/helpers/dndkit/hierarchy/useHierarchyActionHandlers.d.ts +0 -2
- package/types/helpers/dndkit/hierarchy/useHierarchyAnnouncements.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.d.ts +0 -3
- package/types/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.d.ts +0 -2
- package/types/helpers/dndkit/tree/customCollisionDetection.d.ts +0 -4
- package/types/helpers/dndkit/tree/getTreeKeyboardCoordinates.d.ts +0 -3
- package/types/helpers/dndkit/tree/types.d.ts +0 -83
- package/types/helpers/dndkit/tree/useTreeActionHandlers.d.ts +0 -2
- package/types/helpers/dndkit/tree/useTreeAnnouncements.d.ts +0 -4
- package/types/helpers/dndkit/tree/useTreeDndkitConfig.d.ts +0 -3
- package/types/helpers/dndkit/tree/useTreePreviewHandlers.d.ts +0 -2
- package/types/helpers/dndkit/types.d.ts +0 -20
- package/types/helpers/dndkit/utilities.d.ts +0 -7
- package/types/parts/FilterBar/components/TextPill.d.ts +0 -2
- package/types/parts/HoC/DragOverlayContext.d.ts +0 -6
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
2
|
-
import { DATA_TESTID } from '../../../configs/constants.js';
|
|
3
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
4
|
-
import 'react-virtual';
|
|
5
|
-
import '../../../configs/useRowFlattenization.js';
|
|
6
|
-
import '@babel/runtime/helpers/esm/defineProperty';
|
|
7
|
-
import '@babel/runtime/helpers/esm/jsx';
|
|
8
|
-
import '@elliemae/ds-icons';
|
|
9
|
-
import 'styled-components';
|
|
10
|
-
import '../../../styled.js';
|
|
11
|
-
import 'react/jsx-runtime';
|
|
12
|
-
import '@elliemae/ds-form/Checkbox';
|
|
13
|
-
import '@elliemae/ds-form/Radio';
|
|
14
|
-
import '../../../parts/TableContent.js';
|
|
15
|
-
import '@elliemae/ds-grid';
|
|
16
|
-
import '@elliemae/ds-circular-progress-indicator';
|
|
17
|
-
import '@elliemae/ds-icons/WarningTriangle';
|
|
18
|
-
import '@elliemae/ds-system';
|
|
19
|
-
import '@elliemae/ds-button';
|
|
20
|
-
import '../../../DataTableContext.js';
|
|
21
|
-
import '../../../parts/Row.js';
|
|
22
|
-
import '../../../parts/Footer.js';
|
|
23
|
-
import '@elliemae/ds-icons/GripperVertical';
|
|
24
|
-
import '../../../parts/HoC/SortableItemContext.js';
|
|
25
|
-
|
|
26
|
-
const useHierarchyPreviewHandlers = ({
|
|
27
|
-
setOverId,
|
|
28
|
-
setActiveId
|
|
29
|
-
}) => {
|
|
30
|
-
const resetState = useCallback(() => {
|
|
31
|
-
setOverId(null);
|
|
32
|
-
setActiveId(null);
|
|
33
|
-
document.body.style.setProperty('cursor', '');
|
|
34
|
-
const el = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
|
|
35
|
-
|
|
36
|
-
el.onscroll = () => null;
|
|
37
|
-
}, [setOverId, setActiveId]);
|
|
38
|
-
const handlePreviewDragStart = useCallback(({
|
|
39
|
-
active: {
|
|
40
|
-
id
|
|
41
|
-
}
|
|
42
|
-
}) => {
|
|
43
|
-
setActiveId(id);
|
|
44
|
-
setOverId(id);
|
|
45
|
-
document.body.style.setProperty('cursor', 'grabbing');
|
|
46
|
-
const el = document.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
|
|
47
|
-
const y = el.scrollTop;
|
|
48
|
-
|
|
49
|
-
el.onscroll = () => el.scrollTo(0, y);
|
|
50
|
-
}, [setActiveId, setOverId]);
|
|
51
|
-
const handlePreviewDragMove = useCallback(() => null, []);
|
|
52
|
-
const handlePreviewDragOver = useCallback(({
|
|
53
|
-
over
|
|
54
|
-
}) => {
|
|
55
|
-
var _over$id;
|
|
56
|
-
|
|
57
|
-
setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
|
|
58
|
-
}, [setOverId]);
|
|
59
|
-
const handlePreviewDragEnd = useCallback(() => {
|
|
60
|
-
resetState();
|
|
61
|
-
}, [resetState]);
|
|
62
|
-
const handlePreviewDragCancel = useCallback(() => {
|
|
63
|
-
resetState();
|
|
64
|
-
}, [resetState]);
|
|
65
|
-
return {
|
|
66
|
-
handlePreviewDragStart,
|
|
67
|
-
handlePreviewDragMove,
|
|
68
|
-
handlePreviewDragOver,
|
|
69
|
-
handlePreviewDragEnd,
|
|
70
|
-
handlePreviewDragCancel
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export { useHierarchyPreviewHandlers };
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
2
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext.js';
|
|
3
|
-
|
|
4
|
-
const DUMMY_ID = 'DUMMY_ID_INTERNAL_USE_ONLY';
|
|
5
|
-
const RECT_UP = {
|
|
6
|
-
offsetTop: -Infinity,
|
|
7
|
-
offsetLeft: 0,
|
|
8
|
-
// Doesn't matter,
|
|
9
|
-
width: 0,
|
|
10
|
-
// Doesn't matter
|
|
11
|
-
height: 0 // Doesn't matter
|
|
12
|
-
|
|
13
|
-
};
|
|
14
|
-
const RECT_DOWN = {
|
|
15
|
-
offsetTop: Infinity,
|
|
16
|
-
offsetLeft: 0,
|
|
17
|
-
// Doesn't matter,
|
|
18
|
-
width: 0,
|
|
19
|
-
// Doesn't matter
|
|
20
|
-
height: 0 // Doesn't matter
|
|
21
|
-
|
|
22
|
-
}; // Percentage of height to take into consideration when looking for colliding rects
|
|
23
|
-
|
|
24
|
-
const thresholdRatio = 0.2; // Percentage to be inside
|
|
25
|
-
|
|
26
|
-
const insideThreshold = 0.7;
|
|
27
|
-
const customCollisionDetection = (activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition) => (rects, rect) => {
|
|
28
|
-
const originalRect = rects.find(([rectId]) => rectId === activeId); // We first check if the item was moved up or down
|
|
29
|
-
// This modifies how to search the matching colliding rect
|
|
30
|
-
|
|
31
|
-
let isUp = lastPosition === 'up';
|
|
32
|
-
|
|
33
|
-
if (originalRect) {
|
|
34
|
-
isUp = originalRect[1].offsetTop > rect.top;
|
|
35
|
-
} // Threshold
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
const threshold = rect.height * thresholdRatio;
|
|
39
|
-
let collidingRect = null;
|
|
40
|
-
|
|
41
|
-
if (isUp) {
|
|
42
|
-
// Up -- We need to find the first rectangle downwards
|
|
43
|
-
collidingRect = rects.reduce((acc, [rectID, rectData]) => {
|
|
44
|
-
if (rectData.offsetTop + threshold > rect.top && rectData.offsetTop < acc[1].offsetTop) {
|
|
45
|
-
return [rectID, rectData];
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return acc;
|
|
49
|
-
}, [DUMMY_ID, RECT_DOWN]);
|
|
50
|
-
} else {
|
|
51
|
-
// Down -- We need to find the first rectangle upwards
|
|
52
|
-
collidingRect = rects.reduce((acc, [rectID, rectData]) => {
|
|
53
|
-
if (rectData.offsetTop - threshold < rect.top && rectData.offsetTop > acc[1].offsetTop) {
|
|
54
|
-
return [rectID, rectData];
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
return acc;
|
|
58
|
-
}, [DUMMY_ID, RECT_UP]);
|
|
59
|
-
} // If we didn't find a match, return null
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
if (collidingRect[0] === DUMMY_ID) {
|
|
63
|
-
return null;
|
|
64
|
-
} // Calculate the intersection interval
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
const [top, bottom] = [Math.max(rect.top, collidingRect[1].offsetTop), Math.min(rect.bottom, collidingRect[1].offsetTop + collidingRect[1].height)]; // Calculate the percentage of intersection
|
|
68
|
-
|
|
69
|
-
const intersectionPercentage = Math.abs(bottom - top) / collidingRect[1].height;
|
|
70
|
-
|
|
71
|
-
if (intersectionPercentage > insideThreshold && visibleItemsDictionary[collidingRect[0]].depth + 1 <= maxDragAndDropLevel && collidingRect[0] !== activeId) {
|
|
72
|
-
setDropIndicatorPosition(DropIndicatorPosition.Inside);
|
|
73
|
-
} else {
|
|
74
|
-
setDropIndicatorPosition(isUp ? DropIndicatorPosition.Before : DropIndicatorPosition.After);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
if (isUp && lastPosition !== 'up') setLastPosition('up');else if (!isUp && lastPosition !== 'down') setLastPosition('down'); // Return the id of the match rectangle
|
|
78
|
-
|
|
79
|
-
return collidingRect[0];
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
export { customCollisionDetection };
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
|
-
import { KeyboardCode, getViewRect, closestCorners } from '@dnd-kit/core';
|
|
4
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext.js';
|
|
5
|
-
|
|
6
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
7
|
-
|
|
8
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
9
|
-
const directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
|
|
10
|
-
const horizontal = [KeyboardCode.Left, KeyboardCode.Right]; // const vertical: string[] = [KeyboardCode.Up, KeyboardCode.Down];
|
|
11
|
-
|
|
12
|
-
const getVerticalKeyboardCoordinates = ({
|
|
13
|
-
items,
|
|
14
|
-
active,
|
|
15
|
-
over,
|
|
16
|
-
event,
|
|
17
|
-
currentCoordinates,
|
|
18
|
-
droppableContainers,
|
|
19
|
-
translatedRect,
|
|
20
|
-
dropIndicatorPosition,
|
|
21
|
-
maxDragAndDropLevel
|
|
22
|
-
}) => {
|
|
23
|
-
if (horizontal.includes(event.code)) return undefined;
|
|
24
|
-
const activeRect = droppableContainers[active].rect.current;
|
|
25
|
-
const overRect = over.rect;
|
|
26
|
-
const layoutRects = []; // Get the reacheable rects depending on the arrow key pressed
|
|
27
|
-
|
|
28
|
-
Object.entries(droppableContainers).forEach(([id, container]) => {
|
|
29
|
-
if (container !== null && container !== void 0 && container.disabled || !overRect) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
const node = container === null || container === void 0 ? void 0 : container.node.current;
|
|
34
|
-
|
|
35
|
-
if (!node) {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
const rect = getViewRect(node);
|
|
40
|
-
|
|
41
|
-
if (event.code === KeyboardCode.Down && translatedRect.top - 2 <= rect.top) {
|
|
42
|
-
layoutRects.push([id, rect]);
|
|
43
|
-
} else if (event.code === KeyboardCode.Up && translatedRect.top >= rect.top) {
|
|
44
|
-
layoutRects.push([id, rect]);
|
|
45
|
-
}
|
|
46
|
-
});
|
|
47
|
-
const closestId = closestCorners(layoutRects, translatedRect);
|
|
48
|
-
if (!closestId) return undefined;
|
|
49
|
-
const closestItem = items.find(item => item.uid === closestId);
|
|
50
|
-
const closestRect = getViewRect(droppableContainers[closestId].node.current);
|
|
51
|
-
|
|
52
|
-
if (event.code === KeyboardCode.Up) {
|
|
53
|
-
// If the drop indicator is inside (or over ourselves)
|
|
54
|
-
// We are gonna go to the before position
|
|
55
|
-
// Else we are gonna go inside the over rect
|
|
56
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
57
|
-
return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
|
|
58
|
-
y: closestRect.top - translatedRect.height / 2
|
|
59
|
-
});
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
|
|
63
|
-
y: closestRect.top + Math.abs(closestRect.height - activeRect.height) / 2
|
|
64
|
-
});
|
|
65
|
-
} // If the drop indicator is inside (or over ourselves)
|
|
66
|
-
// We are gonna go to the after position
|
|
67
|
-
// Else we are gonna go inside the over rect
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Inside || closestId === active || closestItem.depth + 1 > maxDragAndDropLevel) {
|
|
71
|
-
return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
|
|
72
|
-
y: closestRect.top + translatedRect.height / 2
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
|
|
77
|
-
y: closestRect.top + Math.abs(closestRect.height - activeRect.height) / 2
|
|
78
|
-
});
|
|
79
|
-
};
|
|
80
|
-
|
|
81
|
-
const getTreeKeyboardCoordinates = (context, isHorizontalDnD, maxDragAndDropLevel) => (event, {
|
|
82
|
-
active,
|
|
83
|
-
currentCoordinates,
|
|
84
|
-
context: {
|
|
85
|
-
over,
|
|
86
|
-
translatedRect,
|
|
87
|
-
droppableContainers
|
|
88
|
-
}
|
|
89
|
-
}) => {
|
|
90
|
-
if (directions.includes(event.code)) {
|
|
91
|
-
if (!translatedRect) {
|
|
92
|
-
return undefined;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
const {
|
|
96
|
-
current: {
|
|
97
|
-
items,
|
|
98
|
-
dropIndicatorPosition
|
|
99
|
-
}
|
|
100
|
-
} = context;
|
|
101
|
-
const args = {
|
|
102
|
-
items,
|
|
103
|
-
active,
|
|
104
|
-
over,
|
|
105
|
-
event,
|
|
106
|
-
currentCoordinates,
|
|
107
|
-
droppableContainers,
|
|
108
|
-
translatedRect,
|
|
109
|
-
dropIndicatorPosition,
|
|
110
|
-
maxDragAndDropLevel
|
|
111
|
-
};
|
|
112
|
-
if (isHorizontalDnD) return undefined;
|
|
113
|
-
return getVerticalKeyboardCoordinates(args);
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
return undefined;
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
export { getTreeKeyboardCoordinates };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import { arrayMove } from '@dnd-kit/sortable';
|
|
2
|
-
import { cloneDeep } from 'lodash';
|
|
3
|
-
import { useCallback } from 'react';
|
|
4
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext.js';
|
|
5
|
-
|
|
6
|
-
const useTreeActionHandlers = ({
|
|
7
|
-
handlePreviewDragStart,
|
|
8
|
-
handlePreviewDragMove,
|
|
9
|
-
handlePreviewDragOver,
|
|
10
|
-
handlePreviewDragEnd,
|
|
11
|
-
handlePreviewDragCancel,
|
|
12
|
-
onReorder,
|
|
13
|
-
flattenedItems,
|
|
14
|
-
projected,
|
|
15
|
-
dropIndicatorPosition
|
|
16
|
-
}) => {
|
|
17
|
-
const onDragStart = useCallback(e => {
|
|
18
|
-
handlePreviewDragStart(e);
|
|
19
|
-
}, [handlePreviewDragStart]);
|
|
20
|
-
const onDragMove = useCallback(e => {
|
|
21
|
-
handlePreviewDragMove(e);
|
|
22
|
-
}, [handlePreviewDragMove]);
|
|
23
|
-
const onDragOver = useCallback(e => {
|
|
24
|
-
handlePreviewDragOver(e);
|
|
25
|
-
}, [handlePreviewDragOver]);
|
|
26
|
-
const onDragEnd = useCallback(e => {
|
|
27
|
-
handlePreviewDragEnd(e);
|
|
28
|
-
const {
|
|
29
|
-
active,
|
|
30
|
-
over
|
|
31
|
-
} = e;
|
|
32
|
-
if (over === null) return;
|
|
33
|
-
const activeIndex = flattenedItems.findIndex(item => item.uid === active.id);
|
|
34
|
-
let considerExpanding = null;
|
|
35
|
-
let overIndex = flattenedItems.findIndex(item => item.uid === over.id); // If drop indicator is inside, then put it last,
|
|
36
|
-
// It will be reconstructed well later
|
|
37
|
-
|
|
38
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
|
|
39
|
-
var _flattenedItems$overI, _flattenedItems$overI2;
|
|
40
|
-
|
|
41
|
-
considerExpanding = over.id;
|
|
42
|
-
overIndex = flattenedItems[overIndex].realIndex + ((_flattenedItems$overI = (_flattenedItems$overI2 = flattenedItems[overIndex].original.subRows) === null || _flattenedItems$overI2 === void 0 ? void 0 : _flattenedItems$overI2.length) !== null && _flattenedItems$overI !== void 0 ? _flattenedItems$overI : 0) + 1;
|
|
43
|
-
} // If we are dropping the item in a new position, or new depth
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
if (activeIndex !== overIndex || flattenedItems[activeIndex].depth !== projected.depth) {
|
|
47
|
-
// Change parent and depth from projected data
|
|
48
|
-
flattenedItems[activeIndex].parentId = projected.parentId;
|
|
49
|
-
flattenedItems[activeIndex].depth = projected.depth; // If same index, don't move the array, just copy it
|
|
50
|
-
|
|
51
|
-
const newFlattenedData = activeIndex !== overIndex ? arrayMove(flattenedItems, activeIndex, overIndex) : cloneDeep(flattenedItems);
|
|
52
|
-
onReorder(newFlattenedData, {
|
|
53
|
-
targetIndex: overIndex,
|
|
54
|
-
fromIndex: activeIndex
|
|
55
|
-
}, considerExpanding);
|
|
56
|
-
}
|
|
57
|
-
}, [handlePreviewDragEnd, flattenedItems, projected, onReorder, dropIndicatorPosition]);
|
|
58
|
-
const onDragCancel = useCallback(e => {
|
|
59
|
-
handlePreviewDragCancel(e);
|
|
60
|
-
}, [handlePreviewDragCancel]);
|
|
61
|
-
return {
|
|
62
|
-
onDragStart,
|
|
63
|
-
onDragMove,
|
|
64
|
-
onDragOver,
|
|
65
|
-
onDragEnd,
|
|
66
|
-
onDragCancel
|
|
67
|
-
};
|
|
68
|
-
};
|
|
69
|
-
|
|
70
|
-
export { useTreeActionHandlers };
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
2
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext.js';
|
|
3
|
-
|
|
4
|
-
const useTreeAnnouncements = (visibleItemsDictionary, dropIndicatorPosition) => {
|
|
5
|
-
const onDragStart = useCallback(id => "Picked up draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, "."), [visibleItemsDictionary]);
|
|
6
|
-
const onDragMove = useCallback((id, overId) => {
|
|
7
|
-
if (overId) {
|
|
8
|
-
const overIndex = visibleItemsDictionary[overId].realIndex + 1;
|
|
9
|
-
|
|
10
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
|
|
11
|
-
return "Draggable item was moved inside the item at position ".concat(overIndex, ".");
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Before) {
|
|
15
|
-
return "Draggable item was moved to position ".concat(overIndex - 1, ".");
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
return "Draggable item was moved to position ".concat(overIndex, ".");
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
return "Draggable item is no longer over a droppable area.";
|
|
22
|
-
}, [visibleItemsDictionary, dropIndicatorPosition]);
|
|
23
|
-
const onDragOver = onDragMove;
|
|
24
|
-
const onDragEnd = useCallback((id, overId) => {
|
|
25
|
-
if (overId) {
|
|
26
|
-
const overIndex = visibleItemsDictionary[overId].realIndex + 1;
|
|
27
|
-
|
|
28
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Inside) {
|
|
29
|
-
return "Draggable item was dropped inside the item at position ".concat(overIndex, ".");
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Before) {
|
|
33
|
-
return "Draggable item was dropped over position ".concat(overIndex - 1, ".");
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
return "Draggable item was dropped over position ".concat(overIndex, ".");
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
return "Draggable item was dropped at it's original position.";
|
|
40
|
-
}, [dropIndicatorPosition, visibleItemsDictionary]);
|
|
41
|
-
const onDragCancel = useCallback(id => "Dragging was cancelled. Draggable item from position ".concat(visibleItemsDictionary[id].realIndex + 1, " was dropped at it's initial position."), [visibleItemsDictionary]);
|
|
42
|
-
return {
|
|
43
|
-
onDragStart,
|
|
44
|
-
onDragOver,
|
|
45
|
-
onDragMove,
|
|
46
|
-
onDragEnd,
|
|
47
|
-
onDragCancel
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export { useTreeAnnouncements };
|
|
@@ -1,122 +0,0 @@
|
|
|
1
|
-
import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
|
|
2
|
-
import 'core-js/modules/web.dom-collections.iterator.js';
|
|
3
|
-
import { useState, useMemo, useRef, useEffect } from 'react';
|
|
4
|
-
import { LayoutMeasuringStrategy, useSensors, useSensor, PointerSensor, KeyboardSensor } from '@dnd-kit/core';
|
|
5
|
-
import { horizontalListSortingStrategy, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
6
|
-
import { useTreePreviewHandlers } from './useTreePreviewHandlers.js';
|
|
7
|
-
import { getTreeKeyboardCoordinates } from './getTreeKeyboardCoordinates.js';
|
|
8
|
-
import { removeChildrenOf, getProjection } from '../utilities.js';
|
|
9
|
-
import { useTreeActionHandlers } from './useTreeActionHandlers.js';
|
|
10
|
-
import { customCollisionDetection } from './customCollisionDetection.js';
|
|
11
|
-
import { useTreeAnnouncements } from './useTreeAnnouncements.js';
|
|
12
|
-
|
|
13
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
-
|
|
15
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
16
|
-
// if second parameter is true, the space will be done on the horizontal axis
|
|
17
|
-
|
|
18
|
-
const adjustTranslate = ({
|
|
19
|
-
transform
|
|
20
|
-
}, isHorizontalDnD = false) => {
|
|
21
|
-
const newTransform = _objectSpread({}, transform);
|
|
22
|
-
|
|
23
|
-
if (isHorizontalDnD) {
|
|
24
|
-
newTransform.x = transform.x + 25;
|
|
25
|
-
} else {
|
|
26
|
-
newTransform.x = transform.x + 15;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return newTransform;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
const layoutMeasuring = {
|
|
33
|
-
strategy: LayoutMeasuringStrategy.BeforeDragging
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
const useTreeDndkitConfig = ({
|
|
37
|
-
flattenedItems,
|
|
38
|
-
visibleItems: preVisibleItems,
|
|
39
|
-
isHorizontalDnD = false,
|
|
40
|
-
isExpandable = false,
|
|
41
|
-
onReorder,
|
|
42
|
-
maxDragAndDropLevel
|
|
43
|
-
}) => {
|
|
44
|
-
var _visibleItemsDictiona, _visibleItemsDictiona2;
|
|
45
|
-
|
|
46
|
-
const [activeId, setActiveId] = useState(null);
|
|
47
|
-
const [overId, setOverId] = useState(null);
|
|
48
|
-
const [dropIndicatorPosition, setDropIndicatorPosition] = useState(null);
|
|
49
|
-
const [lastPosition, setLastPosition] = useState(null); // Remove activeId's children
|
|
50
|
-
|
|
51
|
-
const visibleItems = useMemo(() => removeChildrenOf(preVisibleItems, activeId), [preVisibleItems, activeId]); // Sorted ids for the library
|
|
52
|
-
|
|
53
|
-
const sortedIds = useMemo(() => visibleItems.map(item => item.uid), [visibleItems]);
|
|
54
|
-
/**
|
|
55
|
-
* Dictionary from UID to ITEM
|
|
56
|
-
* This dictionary is computed since on every DnD move, I need to know the
|
|
57
|
-
* depth of a particular row, so O(1) per DnD move instead of O(#ITEMS)
|
|
58
|
-
*/
|
|
59
|
-
|
|
60
|
-
const visibleItemsDictionary = useMemo(() => {
|
|
61
|
-
// Using plain for to achieve O(#ITEMS) performance
|
|
62
|
-
const dictionary = {};
|
|
63
|
-
visibleItems.forEach(item => {
|
|
64
|
-
dictionary[item.uid] = item;
|
|
65
|
-
});
|
|
66
|
-
return dictionary;
|
|
67
|
-
}, [visibleItems]);
|
|
68
|
-
const modifiers = useMemo(() => [options => adjustTranslate(options, isHorizontalDnD)], [isHorizontalDnD]);
|
|
69
|
-
const sensorContext = useRef({
|
|
70
|
-
items: visibleItems,
|
|
71
|
-
dropIndicatorPosition,
|
|
72
|
-
setDropIndicatorPosition
|
|
73
|
-
});
|
|
74
|
-
useEffect(() => {
|
|
75
|
-
sensorContext.current = {
|
|
76
|
-
items: visibleItems,
|
|
77
|
-
dropIndicatorPosition,
|
|
78
|
-
setDropIndicatorPosition
|
|
79
|
-
};
|
|
80
|
-
}, [visibleItems, dropIndicatorPosition, setDropIndicatorPosition]);
|
|
81
|
-
const coordinateGetter = useMemo(() => getTreeKeyboardCoordinates(sensorContext, isHorizontalDnD, maxDragAndDropLevel), [sensorContext, isHorizontalDnD, maxDragAndDropLevel]);
|
|
82
|
-
const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
|
|
83
|
-
coordinateGetter
|
|
84
|
-
})); // where is the activeItem being positioned (depth and parent)
|
|
85
|
-
|
|
86
|
-
const projected = useMemo(() => overId ? getProjection(visibleItems, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) : null, [overId, visibleItems, visibleItemsDictionary, dropIndicatorPosition, isExpandable]);
|
|
87
|
-
const dragPreviewHandlers = useTreePreviewHandlers({
|
|
88
|
-
setActiveId,
|
|
89
|
-
setOverId,
|
|
90
|
-
setDropIndicatorPosition
|
|
91
|
-
});
|
|
92
|
-
const dragActionHandlers = useTreeActionHandlers(_objectSpread(_objectSpread({}, dragPreviewHandlers), {}, {
|
|
93
|
-
onReorder,
|
|
94
|
-
projected,
|
|
95
|
-
flattenedItems,
|
|
96
|
-
dropIndicatorPosition
|
|
97
|
-
}));
|
|
98
|
-
const announcements = useTreeAnnouncements(visibleItemsDictionary, dropIndicatorPosition);
|
|
99
|
-
const dndContextProps = useMemo(() => _objectSpread({
|
|
100
|
-
announcements,
|
|
101
|
-
modifiers,
|
|
102
|
-
sensors,
|
|
103
|
-
layoutMeasuring,
|
|
104
|
-
collisionDetection: customCollisionDetection(activeId, visibleItemsDictionary, setDropIndicatorPosition, maxDragAndDropLevel, lastPosition, setLastPosition)
|
|
105
|
-
}, dragActionHandlers), [announcements, modifiers, sensors, dragActionHandlers, visibleItemsDictionary, setDropIndicatorPosition, activeId, maxDragAndDropLevel, lastPosition, setLastPosition]);
|
|
106
|
-
const sortableContextProps = useMemo(() => ({
|
|
107
|
-
items: sortedIds,
|
|
108
|
-
strategy: isHorizontalDnD ? horizontalListSortingStrategy : verticalListSortingStrategy
|
|
109
|
-
}), [sortedIds, isHorizontalDnD]);
|
|
110
|
-
return {
|
|
111
|
-
dndContextProps,
|
|
112
|
-
sortableContextProps,
|
|
113
|
-
activeId,
|
|
114
|
-
activeIndex: (_visibleItemsDictiona = (_visibleItemsDictiona2 = visibleItemsDictionary[activeId]) === null || _visibleItemsDictiona2 === void 0 ? void 0 : _visibleItemsDictiona2.realIndex) !== null && _visibleItemsDictiona !== void 0 ? _visibleItemsDictiona : -1,
|
|
115
|
-
overId,
|
|
116
|
-
depth: projected ? projected.depth : 0,
|
|
117
|
-
dropIndicatorPosition,
|
|
118
|
-
visibleItems
|
|
119
|
-
};
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
export { useTreeDndkitConfig as default };
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import { useCallback } from 'react';
|
|
2
|
-
import { DropIndicatorPosition } from '../../../parts/HoC/SortableItemContext.js';
|
|
3
|
-
|
|
4
|
-
const useTreePreviewHandlers = ({
|
|
5
|
-
setOverId,
|
|
6
|
-
setActiveId,
|
|
7
|
-
setDropIndicatorPosition
|
|
8
|
-
}) => {
|
|
9
|
-
const resetState = useCallback(() => {
|
|
10
|
-
setOverId(null);
|
|
11
|
-
setActiveId(null);
|
|
12
|
-
document.body.style.setProperty('cursor', '');
|
|
13
|
-
}, [setOverId, setActiveId]);
|
|
14
|
-
const handlePreviewDragStart = useCallback(({
|
|
15
|
-
active: {
|
|
16
|
-
id
|
|
17
|
-
}
|
|
18
|
-
}) => {
|
|
19
|
-
setActiveId(id);
|
|
20
|
-
setOverId(id);
|
|
21
|
-
setDropIndicatorPosition(DropIndicatorPosition.Inside);
|
|
22
|
-
document.body.style.setProperty('cursor', 'grabbing');
|
|
23
|
-
}, [setActiveId, setDropIndicatorPosition, setOverId]);
|
|
24
|
-
const handlePreviewDragMove = useCallback(() => null, []);
|
|
25
|
-
const handlePreviewDragOver = useCallback(({
|
|
26
|
-
over
|
|
27
|
-
}) => {
|
|
28
|
-
var _over$id;
|
|
29
|
-
|
|
30
|
-
setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
|
|
31
|
-
}, [setOverId]);
|
|
32
|
-
const handlePreviewDragEnd = useCallback(() => {
|
|
33
|
-
resetState();
|
|
34
|
-
}, [resetState]);
|
|
35
|
-
const handlePreviewDragCancel = useCallback(() => {
|
|
36
|
-
resetState();
|
|
37
|
-
}, [resetState]);
|
|
38
|
-
return {
|
|
39
|
-
handlePreviewDragStart,
|
|
40
|
-
handlePreviewDragMove,
|
|
41
|
-
handlePreviewDragOver,
|
|
42
|
-
handlePreviewDragEnd,
|
|
43
|
-
handlePreviewDragCancel
|
|
44
|
-
};
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export { useTreePreviewHandlers };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { DropIndicatorPosition } from '../../parts/HoC/SortableItemContext.js';
|
|
2
|
-
|
|
3
|
-
/* eslint-disable max-params */
|
|
4
|
-
|
|
5
|
-
const getMinDepth = item => {
|
|
6
|
-
if (item) return item.depth;
|
|
7
|
-
return 0;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
const getProjection = (items, visibleItemsDictionary, overId, dropIndicatorPosition, isExpandable) => {
|
|
11
|
-
const overItemIndex = visibleItemsDictionary[overId].realIndex;
|
|
12
|
-
const previousItem = items[overItemIndex];
|
|
13
|
-
const nextItem = items[overItemIndex + 1];
|
|
14
|
-
|
|
15
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Inside && isExpandable) {
|
|
16
|
-
return {
|
|
17
|
-
depth: visibleItemsDictionary[overId].depth + 1,
|
|
18
|
-
parentId: overId
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
if (dropIndicatorPosition === DropIndicatorPosition.Before) {
|
|
23
|
-
return {
|
|
24
|
-
depth: getMinDepth(previousItem),
|
|
25
|
-
parentId: previousItem.parentId
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return {
|
|
30
|
-
depth: getMinDepth(nextItem),
|
|
31
|
-
parentId: nextItem === null || nextItem === void 0 ? void 0 : nextItem.parentId
|
|
32
|
-
};
|
|
33
|
-
};
|
|
34
|
-
const removeChildrenOf = (items, id) => {
|
|
35
|
-
const excludeParentIds = [id];
|
|
36
|
-
return items.filter(item => {
|
|
37
|
-
if (item.parentId !== null && excludeParentIds.includes(item.parentId)) {
|
|
38
|
-
excludeParentIds.push(item.uid);
|
|
39
|
-
return false;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return true;
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export { getProjection, removeChildrenOf };
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import _jsx from '@babel/runtime/helpers/esm/jsx';
|
|
2
|
-
import { useCallback } from 'react';
|
|
3
|
-
import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
|
|
4
|
-
|
|
5
|
-
const TextPill = ({
|
|
6
|
-
columnHeader,
|
|
7
|
-
column,
|
|
8
|
-
value,
|
|
9
|
-
filters,
|
|
10
|
-
onFiltersChange,
|
|
11
|
-
prevRef,
|
|
12
|
-
innerRef,
|
|
13
|
-
nextRef
|
|
14
|
-
}) => {
|
|
15
|
-
const handleOnRemove = useCallback(() => {
|
|
16
|
-
if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
|
|
17
|
-
onFiltersChange(filters.filter(filter => filter.id !== column));
|
|
18
|
-
}, [onFiltersChange, filters, prevRef, nextRef, column]);
|
|
19
|
-
return value ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
|
|
20
|
-
type: "label",
|
|
21
|
-
label: columnHeader
|
|
22
|
-
}), /*#__PURE__*/_jsx(DSPillV2, {
|
|
23
|
-
type: "removable",
|
|
24
|
-
label: value,
|
|
25
|
-
onRemove: handleOnRemove,
|
|
26
|
-
innerRef: innerRef
|
|
27
|
-
})) : null;
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export { TextPill };
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
interface ActiveZoneButtonsProps {
|
|
3
|
-
pageIndex: number;
|
|
4
|
-
pageCount: number;
|
|
5
|
-
onPageChange: (n: number) => void;
|
|
6
|
-
ButtonComponent: any;
|
|
7
|
-
}
|
|
8
|
-
declare const ActiveZoneButtons: React.ComponentType<ActiveZoneButtonsProps>;
|
|
9
|
-
export default ActiveZoneButtons;
|