1 | "use strict";
|
2 | Object.defineProperty(exports, "__esModule", { value: true });
|
3 | exports.DataList = exports.DataListContext = exports.DataListWrapModifier = void 0;
|
4 | const tslib_1 = require("tslib");
|
5 | const React = tslib_1.__importStar(require("react"));
|
6 | const react_styles_1 = require("@patternfly/react-styles");
|
7 | const data_list_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/DataList/data-list"));
|
8 | const data_list_grid_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/DataList/data-list-grid"));
|
9 | const gridBreakpointClasses = {
|
10 | none: data_list_grid_1.default.modifiers.gridNone,
|
11 | always: 'pf-m-grid',
|
12 | sm: data_list_grid_1.default.modifiers.gridSm,
|
13 | md: data_list_grid_1.default.modifiers.gridMd,
|
14 | lg: data_list_grid_1.default.modifiers.gridLg,
|
15 | xl: data_list_grid_1.default.modifiers.gridXl,
|
16 | '2xl': data_list_grid_1.default.modifiers.grid_2xl
|
17 | };
|
18 | var DataListWrapModifier;
|
19 | (function (DataListWrapModifier) {
|
20 | DataListWrapModifier["nowrap"] = "nowrap";
|
21 | DataListWrapModifier["truncate"] = "truncate";
|
22 | DataListWrapModifier["breakWord"] = "breakWord";
|
23 | })(DataListWrapModifier = exports.DataListWrapModifier || (exports.DataListWrapModifier = {}));
|
24 | exports.DataListContext = React.createContext({
|
25 | isSelectable: false
|
26 | });
|
27 | const moveItem = (arr, i1, toIndex) => {
|
28 | const fromIndex = arr.indexOf(i1);
|
29 | if (fromIndex === toIndex) {
|
30 | return arr;
|
31 | }
|
32 | const temp = arr.splice(fromIndex, 1);
|
33 | arr.splice(toIndex, 0, temp[0]);
|
34 | return arr;
|
35 | };
|
36 | class DataList extends React.Component {
|
37 | constructor(props) {
|
38 | super(props);
|
39 | this.dragFinished = false;
|
40 | this.html5DragDrop = false;
|
41 | this.arrayCopy = React.Children.toArray(this.props.children);
|
42 | this.ref = React.createRef();
|
43 | this.state = {
|
44 | tempItemOrder: [],
|
45 | draggedItemId: null,
|
46 | draggingToItemIndex: null,
|
47 | dragging: false
|
48 | };
|
49 | this.getIndex = (id) => Array.from(this.ref.current.children).findIndex(item => item.id === id);
|
50 | this.move = (itemOrder) => {
|
51 | const ulNode = this.ref.current;
|
52 | const nodes = Array.from(ulNode.children);
|
53 | if (nodes.map(node => node.id).every((id, i) => id === itemOrder[i])) {
|
54 | return;
|
55 | }
|
56 | while (ulNode.firstChild) {
|
57 | ulNode.removeChild(ulNode.lastChild);
|
58 | }
|
59 | itemOrder.forEach(id => {
|
60 | ulNode.appendChild(nodes.find(n => n.id === id));
|
61 | });
|
62 | };
|
63 | this.dragStart0 = (el) => {
|
64 | const { onDragStart } = this.props;
|
65 | const draggedItemId = el.id;
|
66 | el.classList.add(data_list_1.default.modifiers.ghostRow);
|
67 | el.setAttribute('aria-pressed', 'true');
|
68 | this.setState({
|
69 | draggedItemId,
|
70 | dragging: true
|
71 | });
|
72 | onDragStart && onDragStart(draggedItemId);
|
73 | };
|
74 | this.dragStart = (evt) => {
|
75 | evt.dataTransfer.effectAllowed = 'move';
|
76 | evt.dataTransfer.setData('text/plain', evt.currentTarget.id);
|
77 | this.dragStart0(evt.currentTarget);
|
78 | };
|
79 | this.onDragCancel = () => {
|
80 | this.move(this.props.itemOrder);
|
81 | Array.from(this.ref.current.children).forEach(el => {
|
82 | el.classList.remove(data_list_1.default.modifiers.ghostRow);
|
83 | el.classList.remove(data_list_1.default.modifiers.dragOver);
|
84 | el.setAttribute('aria-pressed', 'false');
|
85 | });
|
86 | this.setState({
|
87 | draggedItemId: null,
|
88 | draggingToItemIndex: null,
|
89 | dragging: false
|
90 | });
|
91 | if (this.props.onDragCancel) {
|
92 | this.props.onDragCancel();
|
93 | }
|
94 | };
|
95 | this.dragLeave = (evt) => {
|
96 |
|
97 | if (!this.isValidDrop(evt)) {
|
98 | this.move(this.props.itemOrder);
|
99 | this.setState({
|
100 | draggingToItemIndex: null
|
101 | });
|
102 | }
|
103 | };
|
104 | this.dragEnd0 = (el) => {
|
105 | el.classList.remove(data_list_1.default.modifiers.ghostRow);
|
106 | el.classList.remove(data_list_1.default.modifiers.dragOver);
|
107 | el.setAttribute('aria-pressed', 'false');
|
108 | this.setState({
|
109 | draggedItemId: null,
|
110 | draggingToItemIndex: null,
|
111 | dragging: false
|
112 | });
|
113 | };
|
114 | this.dragEnd = (evt) => {
|
115 | this.dragEnd0(evt.target);
|
116 | };
|
117 | this.isValidDrop = (evt) => {
|
118 | const ulRect = this.ref.current.getBoundingClientRect();
|
119 | return (evt.clientX > ulRect.x &&
|
120 | evt.clientX < ulRect.x + ulRect.width &&
|
121 | evt.clientY > ulRect.y &&
|
122 | evt.clientY < ulRect.y + ulRect.height);
|
123 | };
|
124 | this.drop = (evt) => {
|
125 | if (this.isValidDrop(evt)) {
|
126 | this.props.onDragFinish(this.state.tempItemOrder);
|
127 | }
|
128 | else {
|
129 | this.onDragCancel();
|
130 | }
|
131 | };
|
132 | this.dragOver0 = (id) => {
|
133 | const draggingToItemIndex = Array.from(this.ref.current.children).findIndex(item => item.id === id);
|
134 | if (draggingToItemIndex !== this.state.draggingToItemIndex) {
|
135 | const tempItemOrder = moveItem([...this.props.itemOrder], this.state.draggedItemId, draggingToItemIndex);
|
136 | this.move(tempItemOrder);
|
137 | this.setState({
|
138 | draggingToItemIndex,
|
139 | tempItemOrder
|
140 | });
|
141 | }
|
142 | };
|
143 | this.dragOver = (evt) => {
|
144 | evt.preventDefault();
|
145 | const curListItem = evt.target.closest('li');
|
146 | if (!curListItem || !this.ref.current.contains(curListItem) || curListItem.id === this.state.draggedItemId) {
|
147 |
|
148 | return null;
|
149 | }
|
150 | else {
|
151 | this.dragOver0(curListItem.id);
|
152 | }
|
153 | };
|
154 | this.handleDragButtonKeys = (evt) => {
|
155 | const { dragging } = this.state;
|
156 | if (![' ', 'Escape', 'Enter', 'ArrowUp', 'ArrowDown'].includes(evt.key) || !this.html5DragDrop) {
|
157 | if (dragging) {
|
158 | evt.preventDefault();
|
159 | }
|
160 | return;
|
161 | }
|
162 | evt.preventDefault();
|
163 | const dragItem = evt.target.closest('li');
|
164 | if (evt.key === ' ' || (evt.key === 'Enter' && !dragging)) {
|
165 | this.dragStart0(dragItem);
|
166 | }
|
167 | else if (dragging) {
|
168 | if (evt.key === 'Escape' || evt.key === 'Enter') {
|
169 | this.setState({
|
170 | dragging: false
|
171 | });
|
172 | this.dragFinished = true;
|
173 | if (evt.key === 'Enter') {
|
174 | this.dragEnd0(dragItem);
|
175 | this.props.onDragFinish(this.state.tempItemOrder);
|
176 | }
|
177 | else {
|
178 | this.onDragCancel();
|
179 | }
|
180 | }
|
181 | else if (evt.key === 'ArrowUp') {
|
182 | const nextSelection = dragItem.previousSibling;
|
183 | if (nextSelection) {
|
184 | this.dragOver0(nextSelection.id);
|
185 | dragItem.querySelector(`.${data_list_1.default.dataListItemDraggableButton}`).focus();
|
186 | }
|
187 | }
|
188 | else if (evt.key === 'ArrowDown') {
|
189 | const nextSelection = dragItem.nextSibling;
|
190 | if (nextSelection) {
|
191 | this.dragOver0(nextSelection.id);
|
192 | dragItem.querySelector(`.${data_list_1.default.dataListItemDraggableButton}`).focus();
|
193 | }
|
194 | }
|
195 | }
|
196 | };
|
197 | this.html5DragDrop = Boolean(props.onDragFinish || props.onDragStart || props.onDragMove || props.onDragCancel);
|
198 | if (this.html5DragDrop) {
|
199 |
|
200 | console.warn("DataList's onDrag API is deprecated. Use DragDrop instead.");
|
201 | }
|
202 | }
|
203 | componentDidUpdate(oldProps) {
|
204 | if (this.dragFinished) {
|
205 | this.dragFinished = false;
|
206 | this.setState({
|
207 | tempItemOrder: [...this.props.itemOrder],
|
208 | draggedItemId: null,
|
209 | dragging: false
|
210 | });
|
211 | }
|
212 | if (oldProps.itemOrder !== this.props.itemOrder) {
|
213 | this.move(this.props.itemOrder);
|
214 | }
|
215 | }
|
216 | render() {
|
217 | const _a = this.props, { className, children, onSelectDataListItem, selectedDataListItemId, isCompact, wrapModifier,
|
218 |
|
219 | onDragStart, onDragMove, onDragCancel, onDragFinish, gridBreakpoint, itemOrder } = _a,
|
220 |
|
221 | props = tslib_1.__rest(_a, ["className", "children", "onSelectDataListItem", "selectedDataListItemId", "isCompact", "wrapModifier", "onDragStart", "onDragMove", "onDragCancel", "onDragFinish", "gridBreakpoint", "itemOrder"]);
|
222 | const { dragging } = this.state;
|
223 | const isSelectable = onSelectDataListItem !== undefined;
|
224 | const updateSelectedDataListItem = (id) => {
|
225 | onSelectDataListItem(id);
|
226 | };
|
227 | const dragProps = this.html5DragDrop && {
|
228 | onDragOver: this.dragOver,
|
229 | onDrop: this.dragOver,
|
230 | onDragLeave: this.dragLeave
|
231 | };
|
232 | return (React.createElement(exports.DataListContext.Provider, { value: {
|
233 | isSelectable,
|
234 | selectedDataListItemId,
|
235 | updateSelectedDataListItem,
|
236 | isDraggable: this.html5DragDrop,
|
237 | dragStart: this.dragStart,
|
238 | dragEnd: this.dragEnd,
|
239 | drop: this.drop,
|
240 | dragKeyHandler: this.handleDragButtonKeys
|
241 | } },
|
242 | React.createElement("ul", Object.assign({ className: react_styles_1.css(data_list_1.default.dataList, isCompact && data_list_1.default.modifiers.compact, gridBreakpointClasses[gridBreakpoint], wrapModifier && data_list_1.default.modifiers[wrapModifier], dragging && data_list_1.default.modifiers.dragOver, className), style: props.style }, props, dragProps, { ref: this.ref }), children)));
|
243 | }
|
244 | }
|
245 | exports.DataList = DataList;
|
246 | DataList.displayName = 'DataList';
|
247 | DataList.defaultProps = {
|
248 | children: null,
|
249 | className: '',
|
250 | selectedDataListItemId: '',
|
251 | isCompact: false,
|
252 | gridBreakpoint: 'md',
|
253 | wrapModifier: null
|
254 | };
|
255 |
|
\ | No newline at end of file |