feat(Organize Previews): Integrate with Walk Page

danactive · Aug 1, 2020 · be1ca4a · be1ca4a
1 parent cd48b25
commit be1ca4a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 105 deletions.
diff --git a/ui/app/components/OrganizePreviews/PreviewColumn.jsx b/ui/app/components/OrganizePreviews/PreviewColumn.jsx
@@ -7,13 +7,14 @@ import PreviewItem from './PreviewItem';
 const grid = 4;
 
 export const getBackgroundColor = (isDraggingOver, isDraggingFrom) => {
+  // Colour swatch #545454 compound https://color.adobe.com/create/color-wheel
   if (isDraggingOver) {
-    return 'blue';
+    return '#BA8570';
   }
   if (isDraggingFrom) {
-    return 'green';
+    return '#496149';
   }
-  return 'yellow';
+  return '#545454'; // base colour
 };
 
 const Wrapper = styled.div`
@@ -26,7 +27,7 @@ const Wrapper = styled.div`
   padding-bottom: 0;
   transition: background-color 0.2s ease, opacity 0.1s ease;
   user-select: none;
-  width: 250px;
+  width: 285px;
 `;
 
 const scrollContainerHeight = 250;
@@ -41,16 +42,6 @@ const DropZone = styled.div`
   padding-bottom: ${grid}px;
 `;
 
-const ScrollContainer = styled.div`
-  overflow-x: hidden;
-  overflow-y: auto;
-  max-height: ${scrollContainerHeight}px;
-`;
-
-/* stylelint-disable block-no-empty */
-const Container = styled.div``;
-/* stylelint-enable */
-
 const InnerPreviewColumn = React.memo(function InnerPreviewColumn({ items }) {
   return items.map((item, index) => (
     <Draggable key={item.id} draggableId={item.id} index={index}>
@@ -69,41 +60,26 @@ const InnerPreviewColumn = React.memo(function InnerPreviewColumn({ items }) {
 
 function InnerList({ items, dropProvided }) {
   return (
-    <Container>
-      <DropZone ref={dropProvided.innerRef}>
-        <InnerPreviewColumn items={items} />
-        {dropProvided.placeholder}
-      </DropZone>
-    </Container>
+    <DropZone ref={dropProvided.innerRef}>
+      <InnerPreviewColumn items={items} />
+      {dropProvided.placeholder}
+    </DropZone>
   );
 }
 
 export default function PreviewColumn({
   ignoreContainerClipping,
-  internalScroll,
-  scrollContainerStyle,
   isCombineEnabled,
   columnId = 'LIST',
   style,
   items,
-  useClone,
 }) {
-  const displayQI = (provided, snapshot, descriptor) => (
-    <PreviewItem
-      item={items[descriptor.source.index]}
-      provided={provided}
-      isDragging={snapshot.isDragging}
-      isClone
-    />
-  );
-
   return (
     <Droppable
       droppableId={columnId}
       type="card"
       ignoreContainerClipping={ignoreContainerClipping}
       isCombineEnabled={isCombineEnabled}
-      renderClone={useClone ? displayQI : null}
     >
       {(dropProvided, dropSnapshot) => (
         <Wrapper
@@ -112,13 +88,7 @@ export default function PreviewColumn({
           isDraggingFrom={Boolean(dropSnapshot.draggingFromThisWith)}
           {...dropProvided.droppableProps}
         >
-          {internalScroll ? (
-            <ScrollContainer style={scrollContainerStyle}>
-              <InnerList items={items} dropProvided={dropProvided} />
-            </ScrollContainer>
-          ) : (
-            <InnerList items={items} dropProvided={dropProvided} />
-          )}
+          <InnerList items={items} dropProvided={dropProvided} />
         </Wrapper>
       )}
     </Droppable>

diff --git a/ui/app/components/OrganizePreviews/PreviewItem.jsx b/ui/app/components/OrganizePreviews/PreviewItem.jsx
@@ -1,54 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 
-const grid = 4;
+const getBorderColor = isDragging => (isDragging ? '#e6df55' : 'transparent');
+const getBackgroundColor = isDragging =>
+  isDragging ? '#877e7a' : 'transparent';
 
-const getBorderColor = isDragging => (isDragging ? 'red' : 'transparent');
-
-const imageSize = 40;
-
-const borderRadius = 5;
-
-const Container = styled.a`
-  border-radius: ${borderRadius}px;
-  border: 2px solid transparent;
-  border-color: ${props => getBorderColor(props.isDragging)};
+const Container = styled.div`
+  border: ${props => getBorderColor(props.isDragging)} 5px solid;
+  background-color: ${props => getBackgroundColor(props.isDragging)};
   box-sizing: border-box;
-  padding: ${grid}px;
-  min-height: ${imageSize}px;
-  margin-bottom: ${grid}px;
-  user-select: none;
-
-  /* anchor overrides */
-  color: teal;
-
-  &:hover,
-  &:active {
-    color: orange;
-    text-decoration: none;
-  }
-
-  &:focus {
-    outline: none;
-    border-color: green;
-    box-shadow: none;
-  }
-
-  /* flexbox */
-  display: flex;
-`;
-
-const Content = styled.div`
-  /* flex child */
-  flex-grow: 1;
-  /*
-    Needed to wrap text in ie11
-    https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox
-  */
-  flex-basis: 100%;
-  /* flex parent */
-  display: flex;
-  flex-direction: column;
+  padding: 4px;
 `;
 
 function getStyle(provided, style) {
@@ -73,7 +34,7 @@ function PreviewItem({ item, isDragging, provided, style, index }) {
       data-is-dragging={isDragging}
       data-index={index}
     >
-      <Content>{item.content}</Content>
+      {item.content}
     </Container>
   );
 }

diff --git a/ui/app/components/OrganizePreviews/index.jsx b/ui/app/components/OrganizePreviews/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { DragDropContext } from 'react-beautiful-dnd';
 import styled from 'styled-components';
 
@@ -38,7 +38,6 @@ const Column = styled.div`
 `;
 
 const HorizontalScrollContainer = styled.div`
-  background-color: teal;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
@@ -58,18 +57,18 @@ function groupIntoColumns(items) {
   return columns;
 }
 
-function OrganizePreviews({ items: initialItems }) {
-  const [columnItems, setColumnItems] = useState(
-    groupIntoColumns(initialItems),
-  );
+function OrganizePreviews({ items, setItems }) {
+  if (!items.length || items.length === 0) return null;
+
+  const columnItems = groupIntoColumns(items);
 
   function onDragEnd({ source, destination }) {
     // dropped nowhere
     if (!destination) {
       return;
     }
 
-    setColumnItems(
+    setItems(
       reorderOnRelease({
         columnItems,
         source,
@@ -79,7 +78,7 @@ function OrganizePreviews({ items: initialItems }) {
   }
 
   const makeColumn = columnItemName => (
-    <Column>
+    <Column key={`column-${columnItemName}`}>
       <PreviewColumn
         key={columnItemName}
         columnId={columnItemName}

diff --git a/ui/app/components/OrganizePreviews/reorder.js b/ui/app/components/OrganizePreviews/reorder.js
@@ -6,6 +6,14 @@ const reorder = (list, startIndex, endIndex) => {
   return result;
 };
 
+const ungroupToItems = columnItems => {
+  const items = columnItems.column1
+    .concat(columnItems.column2)
+    .concat(columnItems.column3)
+    .concat(columnItems.column4);
+  return items;
+};
+
 export default function reorderOnRelease({ columnItems, source, destination }) {
   const current = [...columnItems[source.droppableId]];
   const next = [...columnItems[destination.droppableId]];
@@ -18,7 +26,8 @@ export default function reorderOnRelease({ columnItems, source, destination }) {
       ...columnItems,
       [source.droppableId]: reordered,
     };
-    return result;
+
+    return ungroupToItems(result);
   }
 
   // moving to different list
@@ -34,5 +43,5 @@ export default function reorderOnRelease({ columnItems, source, destination }) {
     [destination.droppableId]: next,
   };
 
-  return result;
+  return ungroupToItems(result);
 }
diff --git a/ui/app/containers/Walk/index.jsx b/ui/app/containers/Walk/index.jsx
@@ -77,14 +77,16 @@ function Walk({ location: { hash } }) {
       loading={loading}
       error={false}
     />,
-    <OrganizePreviews
-      key="walk-OrganizePreviews"
-      setItems={setItems}
-      items={stateImages.map(item => ({
-        ...item,
-        content: <DraggableThumb parentCdnFolder={statePath} item={item} />,
-      }))}
-    />,
+    hasImages && (
+      <OrganizePreviews
+        key="walk-OrganizePreviews"
+        setItems={setItems}
+        items={stateImages.map(item => ({
+          ...item,
+          content: <DraggableThumb parentCdnFolder={statePath} item={item} />,
+        }))}
+      />
+    ),
   ];
 }