revert me

chandlerprall · Jul 6, 2022 · fa3f198 · fa3f198
1 parent 5bff3ca
commit fa3f198
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 353 deletions.
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
@@ -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) => (
           <EuiDraggable
             spacing="m"
             key={id}
             index={idx}
             draggableId={id}
             customDragHandle={true}
-            hasInteractiveChildren={true}
+            disableInteractiveElementBlocking
           >
             {(provided) => (
               <EuiPanel paddingSize="s">
-                <EuiFlexGroup alignItems="center" gutterSize="s">
-                  <EuiFlexItem grow={false}>
-                    <EuiPanel
-                      color="transparent"
-                      paddingSize="s"
+                <EuiAccordion
+                  id={id}
+                  initialIsOpen={false}
+                  buttonContent={<>Button</>}
+                  extraAction={[
+                    <EuiButtonIcon
+                      key={1}
+                      iconType="grab"
+                      color={'text'}
                       {...provided.dragHandleProps}
-                      aria-label="Drag Handle"
-                    >
-                      <EuiIcon type="grab" />
-                    </EuiPanel>
-                  </EuiFlexItem>
-                  <EuiFlexItem>{content}</EuiFlexItem>
-                </EuiFlexGroup>
+                      aria-label="fsdfsdfsd"
+                    />,
+                  ]}
+                >
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                  dsfds fsd
+                  <br />
+                </EuiAccordion>
               </EuiPanel>
             )}
           </EuiDraggable>
@@ -69,3 +94,64 @@ export default () => {
     </EuiDragDropContext>
   );
 };
+
+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 (
+//     <EuiDragDropContext onDragEnd={onDragEnd}>
+//       <EuiDroppable
+//         droppableId="CUSTOM_HANDLE_DROPPABLE_AREA"
+//         spacing="m"
+//         withPanel
+//       >
+//         {list.map(({ content, id }, idx) => (
+//           <EuiDraggable
+//             spacing="m"
+//             key={id}
+//             index={idx}
+//             draggableId={id}
+//             customDragHandle={true}
+//             hasInteractiveChildren={true}
+//           >
+//             {(provided) => (
+//               <EuiPanel paddingSize="s">
+//                 <EuiFlexGroup alignItems="center" gutterSize="s">
+//                   <EuiFlexItem grow={false}>
+//                     <EuiPanel
+//                       color="transparent"
+//                       paddingSize="s"
+//                       {...provided.dragHandleProps}
+//                       aria-label="Drag Handle"
+//                     >
+//                       <EuiIcon type="grab" />
+//                     </EuiPanel>
+//                   </EuiFlexItem>
+//                   <EuiFlexItem>{content}</EuiFlexItem>
+//                 </EuiFlexGroup>
+//               </EuiPanel>
+//             )}
+//           </EuiDraggable>
+//         ))}
+//       </EuiDroppable>
+//     </EuiDragDropContext>
+//   );
+// };