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 555b6a2e142..87ed68c95b1 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 @@ -3,11 +3,10 @@ import { EuiDragDropContext, EuiDraggable, EuiDroppable, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, EuiPanel, euiDragDropReorder, + EuiAccordion, + EuiButtonIcon, } from '../../../../src/components'; import { htmlIdGenerator } from '../../../../src/services'; @@ -21,7 +20,7 @@ const makeList = (number, start = 1) => }; }); -export default () => { +export const Demo = () => { const [list, setList] = useState(makeList(3)); const onDragEnd = ({ source, destination }) => { if (source && destination) { @@ -37,30 +36,56 @@ export default () => { spacing="m" withPanel > - {list.map(({ content, id }, idx) => ( + {list.map(({ id }, idx) => ( {(provided) => ( - - - Button} + extraAction={[ + - - - - {content} - + aria-label="fsdfsdfsd" + />, + ]} + > + dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ dsfds fsd +
+ )} @@ -69,3 +94,64 @@ export default () => { ); }; + +export default Demo; + +// const makeId = htmlIdGenerator(); +// +// const makeList = (number, start = 1) => +// Array.from({ length: number }, (v, k) => k + start).map((el) => { +// return { +// content: `Item ${el}`, +// id: makeId(), +// }; +// }); +// +// export default () => { +// const [list, setList] = useState(makeList(3)); +// const onDragEnd = ({ source, destination }) => { +// if (source && destination) { +// const items = euiDragDropReorder(list, source.index, destination.index); +// +// setList(items); +// } +// }; +// return ( +// +// +// {list.map(({ content, id }, idx) => ( +// +// {(provided) => ( +// +// +// +// +// +// +// +// {content} +// +// +// )} +// +// ))} +// +// +// ); +// }; diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js index 245a07c6789..d25434e54cd 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_example.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_example.js @@ -1,192 +1,13 @@ import React from 'react'; import { GuideSectionTypes } from '../../components'; -import { - EuiCallOut, - EuiCode, - EuiDragDropContext, - EuiDraggable, - EuiDroppable, - EuiLink, - EuiSpacer, - EuiText, -} from '../../../../src/components'; - -import DragAndDropBare from './drag_and_drop_bare'; -const dragAndDropBareSource = require('!!raw-loader!./drag_and_drop_bare'); - -import DragAndDrop from './drag_and_drop'; -const dragAndDropSource = require('!!raw-loader!./drag_and_drop'); import DragAndDropCustomHandle from './drag_and_drop_custom_handle'; const dragAndDropCustomHandleSource = require('!!raw-loader!./drag_and_drop_custom_handle'); -import DragAndDropDisableBlocking from './drag_and_drop_disable_blocking'; -const dragAndDropDisableBlockingSource = require('!!raw-loader!./drag_and_drop_disable_blocking'); - -import DragAndDropMoveLists from './drag_and_drop_move_lists'; -const dragAndDropMoveListsSource = require('!!raw-loader!./drag_and_drop_move_lists'); - -import DragAndDropTypes from './drag_and_drop_types'; -const dragAndDropTypesSource = require('!!raw-loader!./drag_and_drop_types'); - -import DragAndDropClone from './drag_and_drop_clone'; -const dragAndDropCloneSource = require('!!raw-loader!./drag_and_drop_clone'); - -import DragAndDropComplex from './drag_and_drop_complex'; -const dragAndDropComplexSource = require('!!raw-loader!./drag_and_drop_complex'); - export const DragAndDropExample = { title: 'Drag and drop', beta: true, - intro: ( - - -

- An extension of{' '} - - react-beautiful-dnd - {' '} - with a compatible API and built-in style opinions. Functionality - results from 3 components working together: -

- - - - - - -

- Drag and drop interfaces are not well-adapted to many cases, and may - be less suitable than other form types for data operations. For - instance, drag and drop interaction relies heavily on spatial - orientation that may not be entirelty valid to all users (e.g., screen - readers as the sole source of information). Similarly, users - navigating by keyboard may not be afforded nuanced, dual-axis drag - item manipulation. -

-

- {`EUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible. - With that in mind, keep your users' working context in mind.`} -

- - - ), sections: [ - { - title: 'Just the facts', - source: [ - { - type: GuideSectionTypes.JS, - code: dragAndDropBareSource, - }, - ], - text: ( - -

- EuiDraggable makes very few assumptions about what - content it contains. To give affordance to draggable elements and to - ensure a consistent experience, child elements must be able to - accept a border and drop shadow (automatically applied via CSS). No - other style opinions are applied, however. -

-

- Similarly, EuiDroppable must accept a background - color overlay (automatically applied via CSS), but has no other - restrictions. -

-

- All EuiDragDropContext elements are discrete and - isolated; EuiDroppables and{' '} - EuiDraggables cannot be shared/transferred between - instances. Also, EuiDragDropContexts cannot be - nested. It is recommended that a single, high-level{' '} - EuiDragDropContext is used and{' '} - EuiDroppables account for categorical and - functional separation (see later examples). -

-

- EuiDragDropContext handles all eventing but makes - no assumptions about the result of a drop event. As such, the - following event handlers are available: -

- -

- EUI also provides methods for helping to deal to common action - types: -

- - - ), - props: { EuiDragDropContext, EuiDraggable, EuiDroppable }, - demo: , - }, - { - title: 'Simple item reorder', - source: [ - { - type: GuideSectionTypes.JS, - code: dragAndDropSource, - }, - ], - text: ( - -

- The simplest case, demonstrating a single{' '} - EuiDroppable with reorder{' '} - behavior. -

-

- Notice the ability to change rendered content based on dragging - state. EuiDraggable children is - a render prop that mush return a ReactElement. - The snapshot parameter on that function has state - data that can be used to alter appearance or behavior (e.g.,{' '} - isDragging). -

- - ), - props: { EuiDragDropContext, EuiDraggable, EuiDroppable }, - demo: , - }, { title: 'Custom drag handle', source: [ @@ -195,163 +16,7 @@ export const DragAndDropExample = { code: dragAndDropCustomHandleSource, }, ], - text: ( - -

- By default the entire element surface can initiate a drag. To - specify an element within as the handle and create a containing - group, set customDragHandle=true and{' '} - hasInteractiveChildren=true on the{' '} - EuiDraggable. -

-

- The provided parameter on the{' '} - EuiDraggable children render - prop has all data required for functionality. Along with the{' '} - customDragHandle flag, - provided.dragHandleProps needs to be added to the - intended handle element. -

- - - Icon-only custom drag handles require an - accessible label. Add an{' '} - {'aria-label="Drag handle"'} attribute to - your React component or HTML element that receives - {'provided.dragHandleProps'}. - - } - /> - - ), demo: , }, - { - title: 'Interactive elements', - source: [ - { - type: GuideSectionTypes.JS, - code: dragAndDropDisableBlockingSource, - }, - ], - text: ( - -

- EuiDraggable can contain interactive elements such - as buttons and form fields. Interactive elements require{' '} - customDragHandle=true and{' '} - hasInteractiveChildren=true on the{' '} - EuiDraggable. These props will maintain drag - functionality and accessibility, while enabling click, keypress, - etc., events on the interactive child elements. -

- - ), - demo: , - }, - { - title: 'Move between lists', - source: [ - { - type: GuideSectionTypes.JS, - code: dragAndDropMoveListsSource, - }, - ], - text: ( - -

- By default, all EuiDroppable elements are of the - same type and will accept EuiDraggable elements - from others in the same EuiDragDropContext. -

-

- The EUI move method is demonstrated in this - example. -

- - ), - demo: , - }, - { - title: 'Distinguish droppable areas by type', - source: [ - { - type: GuideSectionTypes.JS, - code: dragAndDropTypesSource, - }, - ], - text: ( - -

- Setting the type prop on an{' '} - EuiDroppable element will ensure that it will only - accept EuiDraggable elements from the same type of{' '} - EuiDroppable. -

-

- Notice that the enabled, compatible EuiDroppable{' '} - elements have a visual change that indicates they can accept the - actively moving/focused EuiDraggable element. -

- - ), - demo: , - }, - { - title: 'Copyable items', - source: [ - { - type: GuideSectionTypes.JS, - code: dragAndDropCloneSource, - }, - ], - text: ( - -

- For cases where collections of EuiDraggable{' '} - elements are static or can be used in multiple places set{' '} - cloneDraggables=true on the parent{' '} - EuiDroppable. The EuiDroppable{' '} - becomes disabled (does not accept new EuiDraggable{' '} - elements) in this scenario to avoid mixed content intentions. -

-

- The EUI copy method is available and demonstrated - in the example below. Note that the data point used as - draggableId in EuiDraggable must - change to allow for real duplication. -

-

- isRemovable is used in the example for cloned - items. This API is likely to change, but currently provides the - visual changes with drop-to-remove interactions. -

- - ), - demo: , - }, - { - title: 'We have fun', - source: [ - { - type: GuideSectionTypes.JS, - code: dragAndDropComplexSource, - }, - ], - text: ( - -

- EuiDraggables in EuiDroppables,{' '} - EuiDroppables in EuiDraggables, - custom drag handles, horizontal movement, vertical movement, - flexbox, panel inception, you name it. -

- - ), - demo: , - }, ], };