diff --git a/CHANGELOG.md b/CHANGELOG.md index 0ddfd10a340..b8ef171a6ef 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Fixed spacing of `EuiFormErrorText` to match `EuiFormHelpText` ([#2354](https://github.com/elastic/eui/pull/2354)) - Fixed bug in `EuiPopover` where Array.prototype.slice() may have been called on 'undefined' ([#2369](https://github.com/elastic/eui/pull/2369)) +- Properly exported `copy`, `move`, and `reorder` drag-and-drop service methods ([#2377](https://github.com/elastic/eui/pull/2377)) ## [`14.2.0`](https://github.com/elastic/eui/tree/v14.2.0) diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop.js b/src-docs/src/views/drag_and_drop/drag_and_drop.js index d9ea6f4fe9e..dd4d8978688 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop.js @@ -6,7 +6,7 @@ import { EuiPanel, } from '../../../../src/components'; -import { reorder } from '../../../../src/components/drag_and_drop'; +import { euiDragDropReorder } from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -14,7 +14,7 @@ export default () => { const [list, setList] = useState(makeList(3)); const onDragEnd = ({ source, destination }) => { if (source && destination) { - const items = reorder(list, source.index, destination.index); + const items = euiDragDropReorder(list, source.index, destination.index); setList(items); } diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js index 6faa86544db..4056a8b0c44 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_clone.js @@ -10,7 +10,10 @@ import { EuiPanel, } from '../../../../src/components'; -import { copy, reorder } from '../../../../src/components/drag_and_drop'; +import { + euiDragDropCopy, + euiDragDropReorder, +} from '../../../../src/components/drag_and_drop'; import { makeId, makeList } from './helper'; @@ -37,7 +40,7 @@ export default () => { const onDragEnd = ({ source, destination }) => { if (source && destination) { if (source.droppableId === destination.droppableId) { - const items = reorder( + const items = euiDragDropReorder( lists[destination.droppableId], source.index, destination.index @@ -47,7 +50,7 @@ export default () => { } else { const sourceId = source.droppableId; const destinationId = destination.droppableId; - const result = copy( + const result = euiDragDropCopy( lists[sourceId], lists[destinationId], source, diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js index 57b7f3214f5..fa66efafc42 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js @@ -7,7 +7,10 @@ import { EuiPanel, } from '../../../../src/components'; -import { move, reorder } from '../../../../src/components/drag_and_drop'; +import { + euiDragDropMove, + euiDragDropReorder, +} from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -28,7 +31,7 @@ export default () => { const onDragEnd = ({ source, destination }) => { if (source && destination) { if (source.droppableId === destination.droppableId) { - const items = reorder( + const items = euiDragDropReorder( lists[destination.droppableId], source.index, destination.index @@ -38,7 +41,7 @@ export default () => { } else { const sourceId = source.droppableId; const destinationId = destination.droppableId; - const result = move( + const result = euiDragDropMove( lists[sourceId], lists[destinationId], source, diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js index 6ec532719fb..5c7e6e0aef2 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_custom_handle.js @@ -9,7 +9,7 @@ import { EuiPanel, } from '../../../../src/components'; -import { reorder } from '../../../../src/components/drag_and_drop'; +import { euiDragDropReorder } from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -17,7 +17,7 @@ export default () => { const [list, setList] = useState(makeList(3)); const onDragEnd = ({ source, destination }) => { if (source && destination) { - const items = reorder(list, source.index, destination.index); + const items = euiDragDropReorder(list, source.index, destination.index); setList(items); } diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js index ed652dd8e8a..2678930e6ac 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_disable_blocking.js @@ -6,7 +6,7 @@ import { EuiDroppable, } from '../../../../src/components'; -import { reorder } from '../../../../src/components/drag_and_drop'; +import { euiDragDropReorder } from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -14,7 +14,7 @@ export default () => { const [list, setList] = useState(makeList(3)); const onDragEnd = ({ source, destination }) => { if (source && destination) { - const items = reorder(list, source.index, destination.index); + const items = euiDragDropReorder(list, source.index, destination.index); setList(items); } diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js b/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js index db5e1e4a5b2..d61c636515b 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_move_lists.js @@ -9,7 +9,10 @@ import { EuiPanel, } from '../../../../src/components'; -import { move, reorder } from '../../../../src/components/drag_and_drop'; +import { + euiDragDropMove, + euiDragDropReorder, +} from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -21,7 +24,7 @@ export default () => { const actions = { DROPPABLE_AREA_1: setList1, DROPPABLE_AREA_2: setList2 }; if (source && destination) { if (source.droppableId === destination.droppableId) { - const items = reorder( + const items = euiDragDropReorder( lists[destination.droppableId], source.index, destination.index @@ -31,7 +34,7 @@ export default () => { } else { const sourceId = source.droppableId; const destinationId = destination.droppableId; - const result = move( + const result = euiDragDropMove( lists[sourceId], lists[destinationId], source, diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_types.js b/src-docs/src/views/drag_and_drop/drag_and_drop_types.js index 5f8c65800ca..e32cfc6d489 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_types.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_types.js @@ -8,7 +8,10 @@ import { EuiPanel, } from '../../../../src/components'; -import { move, reorder } from '../../../../src/components/drag_and_drop'; +import { + euiDragDropMove, + euiDragDropReorder, +} from '../../../../src/components/drag_and_drop'; import { makeList } from './helper'; @@ -29,7 +32,7 @@ export default () => { }; if (source && destination) { if (source.droppableId === destination.droppableId) { - const items = reorder( + const items = euiDragDropReorder( lists[destination.droppableId], source.index, destination.index @@ -39,7 +42,7 @@ export default () => { } else { const sourceId = source.droppableId; const destinationId = destination.droppableId; - const result = move( + const result = euiDragDropMove( lists[sourceId], lists[destinationId], source, diff --git a/src/components/drag_and_drop/index.ts b/src/components/drag_and_drop/index.ts index 7459f10f00a..720b3da8d7a 100644 --- a/src/components/drag_and_drop/index.ts +++ b/src/components/drag_and_drop/index.ts @@ -1,7 +1,11 @@ export { EuiDragDropContext } from './drag_drop_context'; export { EuiDraggable } from './draggable'; export { EuiDroppable } from './droppable'; -export { copy, move, reorder } from './services'; +export { + euiDragDropCopy, + euiDragDropMove, + euiDragDropReorder, +} from './services'; // Interfaces in react-beautiful-dnd that EUI abstracts over // allows consumers to pull these from EUI instead of react-beautiful-dnd diff --git a/src/components/drag_and_drop/services.ts b/src/components/drag_and_drop/services.ts index a726609e985..083178ce9e4 100644 --- a/src/components/drag_and_drop/services.ts +++ b/src/components/drag_and_drop/services.ts @@ -4,7 +4,7 @@ interface DropResult { [droppableId: string]: any[]; } -export const reorder = ( +export const euiDragDropReorder = ( list: [], startIndex: number, endIndex: number @@ -16,7 +16,7 @@ export const reorder = ( return result; }; -export const move = ( +export const euiDragDropMove = ( sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, @@ -34,7 +34,7 @@ export const move = ( }; }; -export const copy = ( +export const euiDragDropCopy = ( sourceList: any[], destinationList: any[], dropResultSource: DraggableLocation, diff --git a/src/components/index.js b/src/components/index.js index 5d93ff1ab84..da73d4926b5 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -67,6 +67,9 @@ export { EuiDragDropContext, EuiDraggable, EuiDroppable, + euiDragDropCopy, + euiDragDropMove, + euiDragDropReorder, } from './drag_and_drop'; export { EuiEmptyPrompt } from './empty_prompt';