@reltio/components 1.4.2255 → 1.4.2256
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/features/crosswalks/AttributesTable/AttributesTable.d.ts +3 -1
- package/cjs/features/crosswalks/AttributesTable/AttributesTable.js +12 -8
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.d.ts +4 -9
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js +17 -10
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.module.css.js +9 -0
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.d.ts +1 -1
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.js +4 -1
- package/cjs/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.d.ts +4 -4
- package/cjs/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.js +16 -11
- package/cjs/features/crosswalks/CrosswalkDndComponent/index.d.ts +1 -1
- package/cjs/features/crosswalks/types/DnD.d.ts +7 -0
- package/cjs/features/crosswalks/types/DnD.js +2 -0
- package/cjs/features/crosswalks/types/index.d.ts +1 -0
- package/cjs/features/crosswalks/utils/DnD.d.ts +2 -0
- package/cjs/features/crosswalks/utils/DnD.js +6 -0
- package/features/crosswalks/AttributesTable/AttributesTable.d.ts +3 -1
- package/features/crosswalks/AttributesTable/AttributesTable.js +12 -8
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.d.ts +4 -9
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js +15 -6
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.module.css.js +9 -0
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.d.ts +1 -1
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/index.js +1 -1
- package/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.d.ts +4 -4
- package/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.js +17 -12
- package/features/crosswalks/CrosswalkDndComponent/index.d.ts +1 -1
- package/features/crosswalks/types/DnD.d.ts +7 -0
- package/features/crosswalks/types/DnD.js +1 -0
- package/features/crosswalks/types/index.d.ts +1 -0
- package/features/crosswalks/utils/DnD.d.ts +2 -0
- package/features/crosswalks/utils/DnD.js +2 -0
- package/package.json +1 -1
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.d.ts +0 -1
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.js +0 -36
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.d.ts +0 -1
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/styles.js +0 -33
|
@@ -22,6 +22,8 @@ type Props = {
|
|
|
22
22
|
className?: string;
|
|
23
23
|
activeSurvivorshipGroupUri?: string;
|
|
24
24
|
tableRef?: React.ElementRef<typeof BasicTable>;
|
|
25
|
+
onHideAttributeType?: (attributeType: AttributeType) => void;
|
|
26
|
+
attributeRowReorderingEnabled?: boolean;
|
|
25
27
|
};
|
|
26
|
-
declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef }: Props) => React.JSX.Element>;
|
|
28
|
+
declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef, onHideAttributeType, attributeRowReorderingEnabled }: Props) => React.JSX.Element>;
|
|
27
29
|
export default _default;
|
|
@@ -65,7 +65,7 @@ var getRowCellKey = function (_a) {
|
|
|
65
65
|
};
|
|
66
66
|
var debouncedNotifyLazyRenderer = (0, mdm_sdk_1.debounce)(LazyRenderer_1.LazyRenderer.notify, 0);
|
|
67
67
|
var AttributesTable = function (_a) {
|
|
68
|
-
var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
|
|
68
|
+
var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef, onHideAttributeType = _a.onHideAttributeType, _j = _a.attributeRowReorderingEnabled, attributeRowReorderingEnabled = _j === void 0 ? false : _j;
|
|
69
69
|
var styles = (0, styles_1.useStyles)();
|
|
70
70
|
var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
|
|
71
71
|
var visibleColumnsData = (0, react_1.useMemo)(function () {
|
|
@@ -74,7 +74,7 @@ var AttributesTable = function (_a) {
|
|
|
74
74
|
return visibleColumns.includes(id);
|
|
75
75
|
}), helpers_1.getBasicTableColumnsData)(helpers_1.COLUMNS_DATA);
|
|
76
76
|
}, [visibleColumns]);
|
|
77
|
-
var
|
|
77
|
+
var _k = entity || {}, parentTypeUri = _k.type, parentUri = _k.uri, _l = _k.attributes, attributes = _l === void 0 ? {} : _l;
|
|
78
78
|
(0, react_1.useEffect)(function () {
|
|
79
79
|
if (entity && (0, ramda_1.isNil)(selectedAttributeTypes)) {
|
|
80
80
|
var initialAttrTypes = (0, ramda_1.pipe)(ramda_1.keys, (0, ramda_1.without)(['paging']), (0, ramda_1.map)((0, mdm_sdk_1.makeAttrTypeUri)(parentTypeUri)), (0, ramda_1.map)(function (attrTypeUri) { return (0, mdm_sdk_1.findAttributeTypeByUri)(metadata, attrTypeUri, parentTypeUri); }), (0, ramda_1.filter)((0, ramda_1.both)(ramda_1.identity, mdm_sdk_1.isReadableAttribute)))(attributes);
|
|
@@ -94,7 +94,7 @@ var AttributesTable = function (_a) {
|
|
|
94
94
|
crosswalksMap,
|
|
95
95
|
activeSurvivorshipGroupUri
|
|
96
96
|
]);
|
|
97
|
-
var
|
|
97
|
+
var _m = (0, useDynamicRowCellHeight_1.useDynamicRowCellHeight)(getRowCellKey), getDynamicRowCellHeight = _m.getDynamicRowCellHeight, changeRowCellHeight = _m.changeRowCellHeight;
|
|
98
98
|
var renderRowCell = (0, react_1.useCallback)(function (props) { return react_1.default.createElement(CommonRowCellRenderer_1.CommonRowCellRenderer, __assign({ changeRowCellHeight: changeRowCellHeight }, props)); }, [changeRowCellHeight]);
|
|
99
99
|
var getRowCellHeight = (0, react_1.useCallback)((0, ramda_1.either)(getDynamicRowCellHeight, (0, ramda_1.always)(DEFAULT_ROW_HEIGHT)), [
|
|
100
100
|
getDynamicRowCellHeight
|
|
@@ -102,8 +102,8 @@ var AttributesTable = function (_a) {
|
|
|
102
102
|
(0, react_1.useEffect)(function () {
|
|
103
103
|
debouncedNotifyLazyRenderer();
|
|
104
104
|
}, [getRowCellHeight]);
|
|
105
|
-
var
|
|
106
|
-
var
|
|
105
|
+
var _o = (0, react_1.useState)(null), pendingDeletion = _o[0], setPendingDeletion = _o[1];
|
|
106
|
+
var _p = (0, react_1.useState)(null), pendingIgnoredEditing = _p[0], setPendingIgnoredEditing = _p[1];
|
|
107
107
|
var handleEdit = (0, react_1.useCallback)(function (event) {
|
|
108
108
|
if (event.attributeValue.ignored) {
|
|
109
109
|
setPendingIgnoredEditing(event);
|
|
@@ -130,7 +130,9 @@ var AttributesTable = function (_a) {
|
|
|
130
130
|
selectedAttributeTypes: selectedAttributeTypes,
|
|
131
131
|
onSelectAttributeTypes: onSelectAttributeTypes,
|
|
132
132
|
emptyTempAttributeUris: emptyTempAttributeUris,
|
|
133
|
-
readOnly: readOnly
|
|
133
|
+
readOnly: readOnly,
|
|
134
|
+
onHideAttributeType: onHideAttributeType,
|
|
135
|
+
attributeRowReorderingEnabled: attributeRowReorderingEnabled
|
|
134
136
|
}); }, [
|
|
135
137
|
setPendingDeletion,
|
|
136
138
|
onPin,
|
|
@@ -142,7 +144,9 @@ var AttributesTable = function (_a) {
|
|
|
142
144
|
selectedAttributeTypes,
|
|
143
145
|
onSelectAttributeTypes,
|
|
144
146
|
emptyTempAttributeUris,
|
|
145
|
-
readOnly
|
|
147
|
+
readOnly,
|
|
148
|
+
onHideAttributeType,
|
|
149
|
+
attributeRowReorderingEnabled
|
|
146
150
|
]);
|
|
147
151
|
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.tableContainer, className) },
|
|
148
152
|
react_1.default.createElement(BasicViewHeader_1.BasicViewHeader, { classes: { root: styles.tableHeader, title: styles.tableTitle }, title: ui_i18n_1.default.text('Sources') },
|
|
@@ -153,7 +157,7 @@ var AttributesTable = function (_a) {
|
|
|
153
157
|
react_1.default.createElement(AttributeValuesSortContext_1.AttributeValuesSortContext.Provider, { value: helpers_1.sortByPinIgnorePriority },
|
|
154
158
|
react_1.default.createElement(SyncedExpandedAttributesContext_1.SyncedExpandedAttributesProvider, null,
|
|
155
159
|
react_1.default.createElement(SyncedValueHeightsContext_1.SyncedValueHeightsProvider, null,
|
|
156
|
-
react_1.default.createElement(BasicTable_1.BasicTable, {
|
|
160
|
+
react_1.default.createElement(BasicTable_1.BasicTable, { columnsData: visibleColumnsData, context: tableContext, defaultColumnMinWidth: 200, defaultColumnWidth: 250, dndRowReorderingEnabled: attributeRowReorderingEnabled, dndRowReorderingHandler: handleReorderAttributeTypes, externalDndContext: true, fixFirstColumn: true, getIdFromRowValue: getIdFromRowValue, getRowCellHeight: getRowCellHeight, headRowHeight: 48, hoverStateEnabled: Boolean(onHideAttributeType), onScroll: debouncedNotifyLazyRenderer, ref: tableRef, renderRowCell: renderRowCell, rowsData: rowsData }))))),
|
|
157
161
|
react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
|
|
158
162
|
react_1.default.createElement(ConfirmEditIgnoredDialog_1.ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
|
|
159
163
|
if (pendingIgnoredEditing)
|
package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.d.ts
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
someRowIsDragging?: boolean;
|
|
7
|
-
draggableProps?: DraggableProps;
|
|
8
|
-
};
|
|
9
|
-
export declare const OvValuesRenderer: ({ value: { values, attributeType }, someRowIsDragging, draggableProps }: Props) => React.JSX.Element;
|
|
10
|
-
export {};
|
|
2
|
+
declare const _default: React.ComponentType<{
|
|
3
|
+
[x: string]: unknown;
|
|
4
|
+
}>;
|
|
5
|
+
export default _default;
|
package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js
CHANGED
|
@@ -37,30 +37,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
37
37
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
38
38
|
};
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
|
-
exports.OvValuesRenderer = void 0;
|
|
41
40
|
var react_1 = __importStar(require("react"));
|
|
42
41
|
var classnames_1 = __importDefault(require("classnames"));
|
|
42
|
+
var ramda_1 = require("ramda");
|
|
43
43
|
var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
|
|
44
|
+
var Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
|
|
45
|
+
var ui_i18n_1 = __importDefault(require("ui-i18n"));
|
|
46
|
+
var SmallIconButton_1 = require("../../../../../SmallIconButton");
|
|
44
47
|
var AttributeValuesSortContext_1 = require("../../../contexts/AttributeValuesSortContext");
|
|
45
48
|
var ReadOnlyAttributeValuesBlock_1 = require("../../../../../ReadOnlyAttributeValuesBlock");
|
|
46
49
|
var AttributeTitle_1 = require("../../../../../AttributeTitle");
|
|
47
50
|
var EntityContext_1 = require("../../../../../contexts/EntityContext");
|
|
48
51
|
var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
|
|
52
|
+
var withTableContext_1 = require("../../../../../HOCs/withTableContext");
|
|
49
53
|
var FallbackIndicator_1 = require("../FallbackIndicator");
|
|
50
54
|
var styles_1 = require("../../styles");
|
|
51
55
|
var SyncedValueHeight_1 = require("../../../../../SyncedValueHeight");
|
|
52
|
-
var
|
|
56
|
+
var OvValuesRenderer_module_css_1 = __importDefault(require("./OvValuesRenderer.module.css"));
|
|
53
57
|
var OvValuesRenderer = function (_a) {
|
|
54
|
-
var _b = _a.value, values = _b.values, attributeType = _b.attributeType,
|
|
55
|
-
var styles = (0, styles_2.useStyles)();
|
|
58
|
+
var _b = _a.value, values = _b.values, attributeType = _b.attributeType, draggableProps = _a.draggableProps, onHideAttributeType = _a.onHideAttributeType, someRowIsDragging = _a.someRowIsDragging;
|
|
56
59
|
var commonStyles = (0, styles_1.useCommonStyles)();
|
|
57
60
|
var entity = (0, MdmModuleContext_1.useMdmEntity)();
|
|
61
|
+
var handleHideClick = (0, react_1.useCallback)(function () {
|
|
62
|
+
onHideAttributeType === null || onHideAttributeType === void 0 ? void 0 : onHideAttributeType(attributeType);
|
|
63
|
+
}, [onHideAttributeType, attributeType]);
|
|
58
64
|
var sortAttributeValuesForDisplay = (0, react_1.useContext)(AttributeValuesSortContext_1.AttributeValuesSortContext);
|
|
59
|
-
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(
|
|
60
|
-
react_1.default.createElement("div", __assign({}, draggableProps, { className:
|
|
61
|
-
react_1.default.createElement(DragIndicator_1.default, { className:
|
|
62
|
-
react_1.default.createElement(AttributeTitle_1.AttributeTitle, { className:
|
|
65
|
+
return (react_1.default.createElement("div", { className: (0, classnames_1.default)(OvValuesRenderer_module_css_1.default.root, commonStyles.basicCell) },
|
|
66
|
+
react_1.default.createElement("div", __assign({}, draggableProps, { className: OvValuesRenderer_module_css_1.default.dragIndicator }),
|
|
67
|
+
react_1.default.createElement(DragIndicator_1.default, { className: OvValuesRenderer_module_css_1.default.dragIndicatorIcon })),
|
|
68
|
+
react_1.default.createElement(AttributeTitle_1.AttributeTitle, { className: OvValuesRenderer_module_css_1.default.attributeTitle, label: attributeType.label }),
|
|
63
69
|
!someRowIsDragging && (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity },
|
|
64
|
-
react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName:
|
|
70
|
+
react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: OvValuesRenderer_module_css_1.default.ovValue, AttributeValueWrapper: SyncedValueHeight_1.ValueHeightReporter, FallbackSlot: FallbackIndicator_1.FallbackIndicator }))),
|
|
71
|
+
onHideAttributeType && (react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { type: "button", className: OvValuesRenderer_module_css_1.default.hideButton, "aria-label": ui_i18n_1.default.text('Hide attribute'), tooltipTitle: ui_i18n_1.default.text('Hide attribute'), icon: Clear_1.default, iconClassName: OvValuesRenderer_module_css_1.default.hideIcon, onClick: handleHideClick }))));
|
|
65
72
|
};
|
|
66
|
-
exports.
|
|
73
|
+
exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pick)(['onHideAttributeType']))(OvValuesRenderer);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const styles = {"root":"OvValuesRenderer-root--WVjxR","hideButton":"OvValuesRenderer-hideButton--oOX09","dragIndicatorIcon":"OvValuesRenderer-dragIndicatorIcon--CLnlx","hideIcon":"OvValuesRenderer-hideIcon--gdZkH","dragIndicator":"OvValuesRenderer-dragIndicator--GQHS9","attributeTitle":"OvValuesRenderer-attributeTitle--Gnp-c","ovValue":"OvValuesRenderer-ovValue--bO54I"};
|
|
2
|
+
if (typeof document !== 'undefined') {
|
|
3
|
+
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
const style = document.createElement('style');
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
style.innerHTML = `.OvValuesRenderer-root--WVjxR{position:relative}.OvValuesRenderer-hideButton--oOX09{display:none;position:absolute;right:8px;top:8px;z-index:1}.hoveredRow .OvValuesRenderer-hideButton--oOX09{display:flex}.hoveredRow .OvValuesRenderer-dragIndicatorIcon--CLnlx{display:inline}.OvValuesRenderer-hideIcon--gdZkH{height:16px;width:16px}.OvValuesRenderer-dragIndicator--GQHS9{cursor:move;left:0;position:absolute;top:15px}.OvValuesRenderer-dragIndicatorIcon--CLnlx{display:none;height:16px;opacity:.38;width:16px}.OvValuesRenderer-attributeTitle--Gnp-c{display:block;margin-left:3px}.OvValuesRenderer-attributeTitle--Gnp-c:not(:last-child){margin-bottom:5px}.OvValuesRenderer-ovValue--bO54I+.OvValuesRenderer-ovValue--bO54I{margin-top:4px}`;
|
|
7
|
+
head.appendChild(style);
|
|
8
|
+
}
|
|
9
|
+
module.exports = styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { OvValuesRenderer } from './OvValuesRenderer';
|
|
1
|
+
export { default as OvValuesRenderer } from './OvValuesRenderer';
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.OvValuesRenderer = void 0;
|
|
4
7
|
var OvValuesRenderer_1 = require("./OvValuesRenderer");
|
|
5
|
-
Object.defineProperty(exports, "OvValuesRenderer", { enumerable: true, get: function () { return OvValuesRenderer_1.
|
|
8
|
+
Object.defineProperty(exports, "OvValuesRenderer", { enumerable: true, get: function () { return __importDefault(OvValuesRenderer_1).default; } });
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BasicTable } from '../../../BasicTable';
|
|
3
|
-
type
|
|
4
|
-
tableRef: React.ElementRef<typeof BasicTable>;
|
|
3
|
+
export type CrosswalkDndComponentProps = {
|
|
4
|
+
tableRef: React.RefObject<React.ElementRef<typeof BasicTable> | null>;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
tableRowReorderingEnabled?: boolean;
|
|
6
7
|
};
|
|
7
|
-
export declare const CrosswalkDndComponent: ({ children, tableRef }:
|
|
8
|
-
export {};
|
|
8
|
+
export declare const CrosswalkDndComponent: ({ children, tableRef, tableRowReorderingEnabled }: CrosswalkDndComponentProps) => React.JSX.Element;
|
|
@@ -30,22 +30,27 @@ var useDraggingCrosswalk_1 = require("../hooks/useDraggingCrosswalk");
|
|
|
30
30
|
var modifiers_1 = require("@dnd-kit/modifiers");
|
|
31
31
|
var core_1 = require("@dnd-kit/core");
|
|
32
32
|
var CrosswalkDragPreview_1 = require("../CrosswalkDragPreview");
|
|
33
|
+
var useTableDndKit_1 = require("react-components/dist/Table/hooks/useTableDndKit");
|
|
33
34
|
var CrosswalkDndComponent = function (_a) {
|
|
34
|
-
var children = _a.children, tableRef = _a.tableRef;
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
var
|
|
35
|
+
var children = _a.children, tableRef = _a.tableRef, _b = _a.tableRowReorderingEnabled, tableRowReorderingEnabled = _b === void 0 ? false : _b;
|
|
36
|
+
var _c = (0, useDndBasicTableScrollModifier_1.useDndBasicTableScrollModifier)({ tableRef: tableRef }), scrollModifier = _c.scrollModifier, stopScroll = _c.stopScroll;
|
|
37
|
+
var _d = (0, useDraggingCrosswalk_1.useDraggingCrosswalk)(), draggingCrosswalk = _d.draggingCrosswalk, onDragEndCrosswalk = _d.onDragEnd, onCrosswalkDragStart = _d.onDragStart;
|
|
38
|
+
var tableDnd = (0, useTableDndKit_1.useTableDndKit)({
|
|
39
|
+
dndColumnReorderingEnabled: false,
|
|
40
|
+
dndRowReorderingEnabled: tableRowReorderingEnabled
|
|
41
|
+
});
|
|
42
|
+
var onDragStart = (0, react_1.useCallback)(function (event) {
|
|
43
|
+
onCrosswalkDragStart(event);
|
|
44
|
+
}, [onCrosswalkDragStart]);
|
|
38
45
|
var onDragEnd = (0, react_1.useCallback)(function () {
|
|
39
46
|
onDragEndCrosswalk();
|
|
40
47
|
stopScroll();
|
|
41
48
|
}, [onDragEndCrosswalk, stopScroll]);
|
|
42
49
|
var dndContextModifiers = (0, react_1.useMemo)(function () { return [scrollModifier]; }, [scrollModifier]);
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
react_1.default.createElement(CrosswalkDragPreview_1.CrosswalkDragPreview, { crosswalk: draggingCrosswalk })),
|
|
49
|
-
children));
|
|
50
|
+
var crosswalkOverlayModifiers = (0, react_1.useMemo)(function () { return [modifiers_1.snapCenterToCursor]; }, []);
|
|
51
|
+
return (react_1.default.createElement(core_1.DndContext, { sensors: tableDnd.sensors, collisionDetection: tableDnd.collisionDetection, measuring: tableDnd.measuring, autoScroll: tableDnd.autoScrollOptions, modifiers: dndContextModifiers, onDragStart: onDragStart, onDragEnd: onDragEnd },
|
|
52
|
+
children,
|
|
53
|
+
draggingCrosswalk ? (react_1.default.createElement(core_1.DragOverlay, { style: { width: 'max-content' }, modifiers: crosswalkOverlayModifiers, dropAnimation: null },
|
|
54
|
+
react_1.default.createElement(CrosswalkDragPreview_1.CrosswalkDragPreview, { crosswalk: draggingCrosswalk }))) : null));
|
|
50
55
|
};
|
|
51
56
|
exports.CrosswalkDndComponent = CrosswalkDndComponent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { CrosswalkDndComponent } from './CrosswalkDndComponent';
|
|
1
|
+
export { CrosswalkDndComponent, type CrosswalkDndComponentProps } from './CrosswalkDndComponent';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export type { AddCrosswalkEvent, CreateAttributeEvent, DeleteCrosswalkEvent, EditCrosswalkEvent } from './events';
|
|
2
2
|
export type { CrosswalksByOwnerTypeMap, CrosswalksByTypes } from './crosswalks';
|
|
3
3
|
export { CrosswalkType } from './crosswalks';
|
|
4
|
+
export type { TableRowDragPayload } from './DnD';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.isTableRowDrag = void 0;
|
|
4
|
+
var constants_1 = require("react-components/dist/Table/constants");
|
|
5
|
+
var isTableRowDrag = function (data) { return data.type === constants_1.DND_ROW_TYPE; };
|
|
6
|
+
exports.isTableRowDrag = isTableRowDrag;
|
|
@@ -22,6 +22,8 @@ type Props = {
|
|
|
22
22
|
className?: string;
|
|
23
23
|
activeSurvivorshipGroupUri?: string;
|
|
24
24
|
tableRef?: React.ElementRef<typeof BasicTable>;
|
|
25
|
+
onHideAttributeType?: (attributeType: AttributeType) => void;
|
|
26
|
+
attributeRowReorderingEnabled?: boolean;
|
|
25
27
|
};
|
|
26
|
-
declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef }: Props) => React.JSX.Element>;
|
|
28
|
+
declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef, onHideAttributeType, attributeRowReorderingEnabled }: Props) => React.JSX.Element>;
|
|
27
29
|
export default _default;
|
|
@@ -37,7 +37,7 @@ var getRowCellKey = function (_a) {
|
|
|
37
37
|
};
|
|
38
38
|
var debouncedNotifyLazyRenderer = debounce(LazyRenderer.notify, 0);
|
|
39
39
|
var AttributesTable = function (_a) {
|
|
40
|
-
var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? identity : _c, _d = _a.onPin, onPin = _d === void 0 ? identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
|
|
40
|
+
var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? identity : _c, _d = _a.onPin, onPin = _d === void 0 ? identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef, onHideAttributeType = _a.onHideAttributeType, _j = _a.attributeRowReorderingEnabled, attributeRowReorderingEnabled = _j === void 0 ? false : _j;
|
|
41
41
|
var styles = useStyles();
|
|
42
42
|
var metadata = useMdmMetadata();
|
|
43
43
|
var visibleColumnsData = useMemo(function () {
|
|
@@ -46,7 +46,7 @@ var AttributesTable = function (_a) {
|
|
|
46
46
|
return visibleColumns.includes(id);
|
|
47
47
|
}), getBasicTableColumnsData)(COLUMNS_DATA);
|
|
48
48
|
}, [visibleColumns]);
|
|
49
|
-
var
|
|
49
|
+
var _k = entity || {}, parentTypeUri = _k.type, parentUri = _k.uri, _l = _k.attributes, attributes = _l === void 0 ? {} : _l;
|
|
50
50
|
useEffect(function () {
|
|
51
51
|
if (entity && isNil(selectedAttributeTypes)) {
|
|
52
52
|
var initialAttrTypes = pipe(keys, without(['paging']), map(makeAttrTypeUri(parentTypeUri)), map(function (attrTypeUri) { return findAttributeTypeByUri(metadata, attrTypeUri, parentTypeUri); }), filter(both(identity, isReadableAttribute)))(attributes);
|
|
@@ -66,7 +66,7 @@ var AttributesTable = function (_a) {
|
|
|
66
66
|
crosswalksMap,
|
|
67
67
|
activeSurvivorshipGroupUri
|
|
68
68
|
]);
|
|
69
|
-
var
|
|
69
|
+
var _m = useDynamicRowCellHeight(getRowCellKey), getDynamicRowCellHeight = _m.getDynamicRowCellHeight, changeRowCellHeight = _m.changeRowCellHeight;
|
|
70
70
|
var renderRowCell = useCallback(function (props) { return React.createElement(CommonRowCellRenderer, __assign({ changeRowCellHeight: changeRowCellHeight }, props)); }, [changeRowCellHeight]);
|
|
71
71
|
var getRowCellHeight = useCallback(either(getDynamicRowCellHeight, always(DEFAULT_ROW_HEIGHT)), [
|
|
72
72
|
getDynamicRowCellHeight
|
|
@@ -74,8 +74,8 @@ var AttributesTable = function (_a) {
|
|
|
74
74
|
useEffect(function () {
|
|
75
75
|
debouncedNotifyLazyRenderer();
|
|
76
76
|
}, [getRowCellHeight]);
|
|
77
|
-
var
|
|
78
|
-
var
|
|
77
|
+
var _o = useState(null), pendingDeletion = _o[0], setPendingDeletion = _o[1];
|
|
78
|
+
var _p = useState(null), pendingIgnoredEditing = _p[0], setPendingIgnoredEditing = _p[1];
|
|
79
79
|
var handleEdit = useCallback(function (event) {
|
|
80
80
|
if (event.attributeValue.ignored) {
|
|
81
81
|
setPendingIgnoredEditing(event);
|
|
@@ -102,7 +102,9 @@ var AttributesTable = function (_a) {
|
|
|
102
102
|
selectedAttributeTypes: selectedAttributeTypes,
|
|
103
103
|
onSelectAttributeTypes: onSelectAttributeTypes,
|
|
104
104
|
emptyTempAttributeUris: emptyTempAttributeUris,
|
|
105
|
-
readOnly: readOnly
|
|
105
|
+
readOnly: readOnly,
|
|
106
|
+
onHideAttributeType: onHideAttributeType,
|
|
107
|
+
attributeRowReorderingEnabled: attributeRowReorderingEnabled
|
|
106
108
|
}); }, [
|
|
107
109
|
setPendingDeletion,
|
|
108
110
|
onPin,
|
|
@@ -114,7 +116,9 @@ var AttributesTable = function (_a) {
|
|
|
114
116
|
selectedAttributeTypes,
|
|
115
117
|
onSelectAttributeTypes,
|
|
116
118
|
emptyTempAttributeUris,
|
|
117
|
-
readOnly
|
|
119
|
+
readOnly,
|
|
120
|
+
onHideAttributeType,
|
|
121
|
+
attributeRowReorderingEnabled
|
|
118
122
|
]);
|
|
119
123
|
return (React.createElement("div", { className: classnames(styles.tableContainer, className) },
|
|
120
124
|
React.createElement(BasicViewHeader, { classes: { root: styles.tableHeader, title: styles.tableTitle }, title: i18n.text('Sources') },
|
|
@@ -125,7 +129,7 @@ var AttributesTable = function (_a) {
|
|
|
125
129
|
React.createElement(AttributeValuesSortContext.Provider, { value: sortByPinIgnorePriority },
|
|
126
130
|
React.createElement(SyncedExpandedAttributesProvider, null,
|
|
127
131
|
React.createElement(SyncedValueHeightsProvider, null,
|
|
128
|
-
React.createElement(BasicTable, {
|
|
132
|
+
React.createElement(BasicTable, { columnsData: visibleColumnsData, context: tableContext, defaultColumnMinWidth: 200, defaultColumnWidth: 250, dndRowReorderingEnabled: attributeRowReorderingEnabled, dndRowReorderingHandler: handleReorderAttributeTypes, externalDndContext: true, fixFirstColumn: true, getIdFromRowValue: getIdFromRowValue, getRowCellHeight: getRowCellHeight, headRowHeight: 48, hoverStateEnabled: Boolean(onHideAttributeType), onScroll: debouncedNotifyLazyRenderer, ref: tableRef, renderRowCell: renderRowCell, rowsData: rowsData }))))),
|
|
129
133
|
React.createElement(ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
|
|
130
134
|
React.createElement(ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
|
|
131
135
|
if (pendingIgnoredEditing)
|
package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.d.ts
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
someRowIsDragging?: boolean;
|
|
7
|
-
draggableProps?: DraggableProps;
|
|
8
|
-
};
|
|
9
|
-
export declare const OvValuesRenderer: ({ value: { values, attributeType }, someRowIsDragging, draggableProps }: Props) => React.JSX.Element;
|
|
10
|
-
export {};
|
|
2
|
+
declare const _default: React.ComponentType<{
|
|
3
|
+
[x: string]: unknown;
|
|
4
|
+
}>;
|
|
5
|
+
export default _default;
|
|
@@ -9,28 +9,37 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import React, { useContext } from 'react';
|
|
12
|
+
import React, { useCallback, useContext } from 'react';
|
|
13
13
|
import classnames from 'classnames';
|
|
14
|
+
import { pick } from 'ramda';
|
|
14
15
|
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
|
|
16
|
+
import ClearIcon from '@mui/icons-material/Clear';
|
|
17
|
+
import i18n from 'ui-i18n';
|
|
18
|
+
import { SmallIconButtonWithTooltip } from '../../../../../SmallIconButton';
|
|
15
19
|
import { AttributeValuesSortContext } from '../../../contexts/AttributeValuesSortContext';
|
|
16
20
|
import { ReadOnlyAttributeValuesBlock } from '../../../../../ReadOnlyAttributeValuesBlock';
|
|
17
21
|
import { AttributeTitle } from '../../../../../AttributeTitle';
|
|
18
22
|
import { EntityContext } from '../../../../../contexts/EntityContext';
|
|
19
23
|
import { useMdmEntity } from '../../../../../contexts/MdmModuleContext';
|
|
24
|
+
import { withTableContext } from '../../../../../HOCs/withTableContext';
|
|
20
25
|
import { FallbackIndicator } from '../FallbackIndicator';
|
|
21
26
|
import { useCommonStyles } from '../../styles';
|
|
22
27
|
import { ValueHeightReporter } from '../../../../../SyncedValueHeight';
|
|
23
|
-
import
|
|
24
|
-
|
|
25
|
-
var _b = _a.value, values = _b.values, attributeType = _b.attributeType,
|
|
26
|
-
var styles = useStyles();
|
|
28
|
+
import styles from './OvValuesRenderer.module.css';
|
|
29
|
+
var OvValuesRenderer = function (_a) {
|
|
30
|
+
var _b = _a.value, values = _b.values, attributeType = _b.attributeType, draggableProps = _a.draggableProps, onHideAttributeType = _a.onHideAttributeType, someRowIsDragging = _a.someRowIsDragging;
|
|
27
31
|
var commonStyles = useCommonStyles();
|
|
28
32
|
var entity = useMdmEntity();
|
|
33
|
+
var handleHideClick = useCallback(function () {
|
|
34
|
+
onHideAttributeType === null || onHideAttributeType === void 0 ? void 0 : onHideAttributeType(attributeType);
|
|
35
|
+
}, [onHideAttributeType, attributeType]);
|
|
29
36
|
var sortAttributeValuesForDisplay = useContext(AttributeValuesSortContext);
|
|
30
37
|
return (React.createElement("div", { className: classnames(styles.root, commonStyles.basicCell) },
|
|
31
38
|
React.createElement("div", __assign({}, draggableProps, { className: styles.dragIndicator }),
|
|
32
39
|
React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon })),
|
|
33
40
|
React.createElement(AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
|
|
34
41
|
!someRowIsDragging && (React.createElement(EntityContext.Provider, { value: entity },
|
|
35
|
-
React.createElement(ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: ValueHeightReporter, FallbackSlot: FallbackIndicator })))
|
|
42
|
+
React.createElement(ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: ValueHeightReporter, FallbackSlot: FallbackIndicator }))),
|
|
43
|
+
onHideAttributeType && (React.createElement(SmallIconButtonWithTooltip, { type: "button", className: styles.hideButton, "aria-label": i18n.text('Hide attribute'), tooltipTitle: i18n.text('Hide attribute'), icon: ClearIcon, iconClassName: styles.hideIcon, onClick: handleHideClick }))));
|
|
36
44
|
};
|
|
45
|
+
export default withTableContext(pick(['onHideAttributeType']))(OvValuesRenderer);
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const styles = {"root":"OvValuesRenderer-root--WVjxR","hideButton":"OvValuesRenderer-hideButton--oOX09","dragIndicatorIcon":"OvValuesRenderer-dragIndicatorIcon--CLnlx","hideIcon":"OvValuesRenderer-hideIcon--gdZkH","dragIndicator":"OvValuesRenderer-dragIndicator--GQHS9","attributeTitle":"OvValuesRenderer-attributeTitle--Gnp-c","ovValue":"OvValuesRenderer-ovValue--bO54I"};
|
|
2
|
+
if (typeof document !== 'undefined') {
|
|
3
|
+
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
const style = document.createElement('style');
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
style.innerHTML = `.OvValuesRenderer-root--WVjxR{position:relative}.OvValuesRenderer-hideButton--oOX09{display:none;position:absolute;right:8px;top:8px;z-index:1}.hoveredRow .OvValuesRenderer-hideButton--oOX09{display:flex}.hoveredRow .OvValuesRenderer-dragIndicatorIcon--CLnlx{display:inline}.OvValuesRenderer-hideIcon--gdZkH{height:16px;width:16px}.OvValuesRenderer-dragIndicator--GQHS9{cursor:move;left:0;position:absolute;top:15px}.OvValuesRenderer-dragIndicatorIcon--CLnlx{display:none;height:16px;opacity:.38;width:16px}.OvValuesRenderer-attributeTitle--Gnp-c{display:block;margin-left:3px}.OvValuesRenderer-attributeTitle--Gnp-c:not(:last-child){margin-bottom:5px}.OvValuesRenderer-ovValue--bO54I+.OvValuesRenderer-ovValue--bO54I{margin-top:4px}`;
|
|
7
|
+
head.appendChild(style);
|
|
8
|
+
}
|
|
9
|
+
export default styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { OvValuesRenderer } from './OvValuesRenderer';
|
|
1
|
+
export { default as OvValuesRenderer } from './OvValuesRenderer';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { OvValuesRenderer } from './OvValuesRenderer';
|
|
1
|
+
export { default as OvValuesRenderer } from './OvValuesRenderer';
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BasicTable } from '../../../BasicTable';
|
|
3
|
-
type
|
|
4
|
-
tableRef: React.ElementRef<typeof BasicTable>;
|
|
3
|
+
export type CrosswalkDndComponentProps = {
|
|
4
|
+
tableRef: React.RefObject<React.ElementRef<typeof BasicTable> | null>;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
+
tableRowReorderingEnabled?: boolean;
|
|
6
7
|
};
|
|
7
|
-
export declare const CrosswalkDndComponent: ({ children, tableRef }:
|
|
8
|
-
export {};
|
|
8
|
+
export declare const CrosswalkDndComponent: ({ children, tableRef, tableRowReorderingEnabled }: CrosswalkDndComponentProps) => React.JSX.Element;
|
|
@@ -2,23 +2,28 @@ import React, { useCallback, useMemo } from 'react';
|
|
|
2
2
|
import { useDndBasicTableScrollModifier } from '../../../hooks/useDndBasicTableScrollModifier';
|
|
3
3
|
import { useDraggingCrosswalk } from '../hooks/useDraggingCrosswalk';
|
|
4
4
|
import { snapCenterToCursor } from '@dnd-kit/modifiers';
|
|
5
|
-
import { DndContext, DragOverlay
|
|
5
|
+
import { DndContext, DragOverlay } from '@dnd-kit/core';
|
|
6
6
|
import { CrosswalkDragPreview } from '../CrosswalkDragPreview';
|
|
7
|
+
import { useTableDndKit } from 'react-components/dist/Table/hooks/useTableDndKit';
|
|
7
8
|
export var CrosswalkDndComponent = function (_a) {
|
|
8
|
-
var children = _a.children, tableRef = _a.tableRef;
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
9
|
+
var children = _a.children, tableRef = _a.tableRef, _b = _a.tableRowReorderingEnabled, tableRowReorderingEnabled = _b === void 0 ? false : _b;
|
|
10
|
+
var _c = useDndBasicTableScrollModifier({ tableRef: tableRef }), scrollModifier = _c.scrollModifier, stopScroll = _c.stopScroll;
|
|
11
|
+
var _d = useDraggingCrosswalk(), draggingCrosswalk = _d.draggingCrosswalk, onDragEndCrosswalk = _d.onDragEnd, onCrosswalkDragStart = _d.onDragStart;
|
|
12
|
+
var tableDnd = useTableDndKit({
|
|
13
|
+
dndColumnReorderingEnabled: false,
|
|
14
|
+
dndRowReorderingEnabled: tableRowReorderingEnabled
|
|
15
|
+
});
|
|
16
|
+
var onDragStart = useCallback(function (event) {
|
|
17
|
+
onCrosswalkDragStart(event);
|
|
18
|
+
}, [onCrosswalkDragStart]);
|
|
12
19
|
var onDragEnd = useCallback(function () {
|
|
13
20
|
onDragEndCrosswalk();
|
|
14
21
|
stopScroll();
|
|
15
22
|
}, [onDragEndCrosswalk, stopScroll]);
|
|
16
23
|
var dndContextModifiers = useMemo(function () { return [scrollModifier]; }, [scrollModifier]);
|
|
17
|
-
var
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
React.createElement(CrosswalkDragPreview, { crosswalk: draggingCrosswalk })),
|
|
23
|
-
children));
|
|
24
|
+
var crosswalkOverlayModifiers = useMemo(function () { return [snapCenterToCursor]; }, []);
|
|
25
|
+
return (React.createElement(DndContext, { sensors: tableDnd.sensors, collisionDetection: tableDnd.collisionDetection, measuring: tableDnd.measuring, autoScroll: tableDnd.autoScrollOptions, modifiers: dndContextModifiers, onDragStart: onDragStart, onDragEnd: onDragEnd },
|
|
26
|
+
children,
|
|
27
|
+
draggingCrosswalk ? (React.createElement(DragOverlay, { style: { width: 'max-content' }, modifiers: crosswalkOverlayModifiers, dropAnimation: null },
|
|
28
|
+
React.createElement(CrosswalkDragPreview, { crosswalk: draggingCrosswalk }))) : null));
|
|
24
29
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { CrosswalkDndComponent } from './CrosswalkDndComponent';
|
|
1
|
+
export { CrosswalkDndComponent, type CrosswalkDndComponentProps } from './CrosswalkDndComponent';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export type { AddCrosswalkEvent, CreateAttributeEvent, DeleteCrosswalkEvent, EditCrosswalkEvent } from './events';
|
|
2
2
|
export type { CrosswalksByOwnerTypeMap, CrosswalksByTypes } from './crosswalks';
|
|
3
3
|
export { CrosswalkType } from './crosswalks';
|
|
4
|
+
export type { TableRowDragPayload } from './DnD';
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "dragIndicator" | "dragIndicatorIcon" | "attributeTitle" | "ovValue">;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.useStyles = void 0;
|
|
4
|
-
var styles_1 = require("@mui/styles");
|
|
5
|
-
exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
|
|
6
|
-
root: {
|
|
7
|
-
position: 'relative'
|
|
8
|
-
// '&:hover $dragIndicator': {
|
|
9
|
-
// display: 'block'
|
|
10
|
-
// }
|
|
11
|
-
},
|
|
12
|
-
dragIndicator: {
|
|
13
|
-
display: 'none',
|
|
14
|
-
position: 'absolute',
|
|
15
|
-
top: '15px',
|
|
16
|
-
left: 0,
|
|
17
|
-
cursor: 'grab'
|
|
18
|
-
},
|
|
19
|
-
dragIndicatorIcon: {
|
|
20
|
-
fill: theme.palette.text.secondary,
|
|
21
|
-
width: '14px',
|
|
22
|
-
height: '14px'
|
|
23
|
-
},
|
|
24
|
-
attributeTitle: {
|
|
25
|
-
display: 'block',
|
|
26
|
-
marginLeft: '3px',
|
|
27
|
-
'&:not(:last-child)': {
|
|
28
|
-
marginBottom: '5px'
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
ovValue: {
|
|
32
|
-
'& + &': {
|
|
33
|
-
marginTop: '4px'
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}); });
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "dragIndicator" | "dragIndicatorIcon" | "attributeTitle" | "ovValue">;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { makeStyles } from '@mui/styles';
|
|
2
|
-
export var useStyles = makeStyles(function (theme) { return ({
|
|
3
|
-
root: {
|
|
4
|
-
position: 'relative'
|
|
5
|
-
// '&:hover $dragIndicator': {
|
|
6
|
-
// display: 'block'
|
|
7
|
-
// }
|
|
8
|
-
},
|
|
9
|
-
dragIndicator: {
|
|
10
|
-
display: 'none',
|
|
11
|
-
position: 'absolute',
|
|
12
|
-
top: '15px',
|
|
13
|
-
left: 0,
|
|
14
|
-
cursor: 'grab'
|
|
15
|
-
},
|
|
16
|
-
dragIndicatorIcon: {
|
|
17
|
-
fill: theme.palette.text.secondary,
|
|
18
|
-
width: '14px',
|
|
19
|
-
height: '14px'
|
|
20
|
-
},
|
|
21
|
-
attributeTitle: {
|
|
22
|
-
display: 'block',
|
|
23
|
-
marginLeft: '3px',
|
|
24
|
-
'&:not(:last-child)': {
|
|
25
|
-
marginBottom: '5px'
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
ovValue: {
|
|
29
|
-
'& + &': {
|
|
30
|
-
marginTop: '4px'
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
}); });
|