feat: drag and drop events (#57)

This commit is contained in:
Anoop M D 2022-11-11 03:53:51 +05:30
parent cffef31f97
commit 6ce657d891
7 changed files with 61 additions and 37 deletions

View File

@ -1,5 +1,6 @@
{ {
"name": "@usebruno/app", "name": "@usebruno/app",
"version": "0.3.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "next dev", "dev": "next dev",
@ -15,8 +16,8 @@
"@reduxjs/toolkit": "^1.8.0", "@reduxjs/toolkit": "^1.8.0",
"@tabler/icons": "^1.46.0", "@tabler/icons": "^1.46.0",
"@tippyjs/react": "^4.2.6", "@tippyjs/react": "^4.2.6",
"@usebruno/schema": "0.2.0",
"@usebruno/graphql-docs": "0.1.0", "@usebruno/graphql-docs": "0.1.0",
"@usebruno/schema": "0.2.0",
"axios": "^0.26.0", "axios": "^0.26.0",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"codemirror": "^5.65.2", "codemirror": "^5.65.2",
@ -34,16 +35,17 @@
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1",
"mousetrap": "^1.6.5", "mousetrap": "^1.6.5",
"nanoid": "3.3.4", "nanoid": "3.3.4",
"next": "12.3.1", "next": "12.3.3",
"path": "^0.12.7", "path": "^0.12.7",
"platform": "^1.3.6", "platform": "^1.3.6",
"posthog-node": "^2.1.0", "posthog-node": "^2.1.0",
"qs": "^6.11.0", "qs": "^6.11.0",
"react": "^17.0.2", "react": "18.2.0",
"react-dom": "^17.0.2", "react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "18.2.0",
"react-hot-toast": "^2.4.0", "react-hot-toast": "^2.4.0",
"react-redux": "^7.2.6", "react-redux": "^7.2.6",
"react-tabs": "^3.2.3",
"reckonjs": "^0.1.2", "reckonjs": "^0.1.2",
"sass": "^1.46.0", "sass": "^1.46.0",
"split-on-first": "^3.0.0", "split-on-first": "^3.0.0",

View File

@ -70,7 +70,7 @@ const Wrapper = styled.div`
} }
} }
&.is-dragging .collection-item-name { &.is-sidebar-dragging .collection-item-name {
cursor: inherit; cursor: inherit;
} }
`; `;

View File

@ -2,6 +2,7 @@ import React, { useState, useRef, forwardRef, useEffect } from 'react';
import range from 'lodash/range'; import range from 'lodash/range';
import filter from 'lodash/filter'; import filter from 'lodash/filter';
import classnames from 'classnames'; import classnames from 'classnames';
import { useDrag, useDrop } from 'react-dnd';
import { IconChevronRight, IconDots } from '@tabler/icons'; import { IconChevronRight, IconDots } from '@tabler/icons';
import { useSelector, useDispatch } from 'react-redux'; import { useSelector, useDispatch } from 'react-redux';
import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs'; import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
@ -23,8 +24,25 @@ import StyledWrapper from './StyledWrapper';
const CollectionItem = ({ item, collection, searchText }) => { const CollectionItem = ({ item, collection, searchText }) => {
const tabs = useSelector((state) => state.tabs.tabs); const tabs = useSelector((state) => state.tabs.tabs);
const activeTabUid = useSelector((state) => state.tabs.activeTabUid); const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
const isDragging = useSelector((state) => state.app.isDragging); const isSidebarDragging = useSelector((state) => state.app.isDragging);
const dispatch = useDispatch(); const dispatch = useDispatch();
const ref = useRef(null)
const [{isDragging}, drag] = useDrag(() => ({
type: 'collection-item',
collect: monitor => ({
isDragging: !!monitor.isDragging(),
})
}));
const [{ isOver, canDrop }, drop] = useDrop({
accept: 'collection-item',
drop: () => console.log('dropped'),
canDrop: () => true,
collect: monitor => ({
isOver: !!monitor.isOver(),
canDrop: !!monitor.canDrop()
}),
});
const [renameItemModalOpen, setRenameItemModalOpen] = useState(false); const [renameItemModalOpen, setRenameItemModalOpen] = useState(false);
const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false); const [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
@ -91,7 +109,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
const isFolder = isItemAFolder(item); const isFolder = isItemAFolder(item);
const className = classnames('flex flex-col w-full', { const className = classnames('flex flex-col w-full', {
'is-dragging': isDragging 'is-sidebar-dragging': isSidebarDragging
}); });
if (searchText && searchText.length) { if (searchText && searchText.length) {
@ -109,6 +127,8 @@ const CollectionItem = ({ item, collection, searchText }) => {
const requestItems = filter(item.items, (i) => isItemARequest(i)); const requestItems = filter(item.items, (i) => isItemARequest(i));
const folderItems = filter(item.items, (i) => isItemAFolder(i)); const folderItems = filter(item.items, (i) => isItemAFolder(i));
drag(drop(ref))
return ( return (
<StyledWrapper className={className}> <StyledWrapper className={className}>
{renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />} {renameItemModalOpen && <RenameCollectionItem item={item} collection={collection} onClose={() => setRenameItemModalOpen(false)} />}
@ -116,7 +136,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
{deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />} {deleteItemModalOpen && <DeleteCollectionItem item={item} collection={collection} onClose={() => setDeleteItemModalOpen(false)} />}
{newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />} {newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(false)} />}
{newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />} {newFolderModalOpen && <NewFolder item={item} collection={collection} onClose={() => setNewFolderModalOpen(false)} />}
<div className={itemRowClassName}> <div className={itemRowClassName} ref={ref}>
<div className="flex items-center h-full w-full"> <div className="flex items-center h-full w-full">
{indents && indents.length {indents && indents.length
? indents.map((i) => { ? indents.map((i) => {

View File

@ -2,6 +2,8 @@ import React, { useState, forwardRef, useRef, useEffect } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import filter from 'lodash/filter'; import filter from 'lodash/filter';
import cloneDeep from 'lodash/cloneDeep'; import cloneDeep from 'lodash/cloneDeep';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import { IconChevronRight, IconDots } from '@tabler/icons'; import { IconChevronRight, IconDots } from '@tabler/icons';
import Dropdown from 'components/Dropdown'; import Dropdown from 'components/Dropdown';
import { collectionClicked } from 'providers/ReduxStore/slices/collections'; import { collectionClicked } from 'providers/ReduxStore/slices/collections';
@ -162,6 +164,7 @@ const Collection = ({ collection, searchText }) => {
<div> <div>
{!collectionIsCollapsed ? ( {!collectionIsCollapsed ? (
<DndProvider backend={HTML5Backend}>
<div> <div>
{requestItems && requestItems.length {requestItems && requestItems.length
? requestItems.map((i) => { ? requestItems.map((i) => {
@ -175,6 +178,7 @@ const Collection = ({ collection, searchText }) => {
}) })
: null} : null}
</div> </div>
</DndProvider>
) : null} ) : null}
</div> </div>
</StyledWrapper> </StyledWrapper>

View File

@ -21,17 +21,6 @@ const Wrapper = styled.div`
.fw-600 { .fw-600 {
font-weight: 600; font-weight: 600;
} }
.react-tabs {
.react-tabs__tab-list {
padding-left: 1rem;
border-bottom: 1px solid #cfcfcf;
.react-tabs__tab--selected {
border-color: #cfcfcf;
}
}
}
`; `;
export default Wrapper; export default Wrapper;

View File

@ -1,3 +1,4 @@
import { useState, useEffect } from 'react';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import { AppProvider } from 'providers/App'; import { AppProvider } from 'providers/App';
import { ToastProvider } from 'providers/Toaster'; import { ToastProvider } from 'providers/Toaster';
@ -9,7 +10,6 @@ import ThemeProvider from 'providers/Theme/index';
import '../styles/app.scss'; import '../styles/app.scss';
import '../styles/globals.css'; import '../styles/globals.css';
import 'tailwindcss/dist/tailwind.min.css'; import 'tailwindcss/dist/tailwind.min.css';
import 'react-tabs/style/react-tabs.css';
import 'codemirror/lib/codemirror.css'; import 'codemirror/lib/codemirror.css';
import 'graphiql/graphiql.min.css'; import 'graphiql/graphiql.min.css';
@ -28,6 +28,16 @@ function NoSsr({ children }) {
} }
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
const [domLoaded, setDomLoaded] = useState(false);
useEffect(() => {
setDomLoaded(true);
}, []);
if(!domLoaded) {
return null;
}
return ( return (
<SafeHydrate> <SafeHydrate>
<NoSsr> <NoSsr>

View File

@ -19,8 +19,8 @@
"graphql": "^16.6.0", "graphql": "^16.6.0",
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1",
"postcss": "^8.4.18", "postcss": "^8.4.18",
"react": "^17.0.2", "react": "18.2.0",
"react-dom": "^17.0.2", "react-dom": "18.2.0",
"rollup": "3.2.5", "rollup": "3.2.5",
"rollup-plugin-dts": "^5.0.0", "rollup-plugin-dts": "^5.0.0",
"rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-peer-deps-external": "^2.2.4",
@ -30,8 +30,7 @@
}, },
"peerDependencies": { "peerDependencies": {
"graphql": "^16.6.0", "graphql": "^16.6.0",
"markdown-it": "^13.0.1", "markdown-it": "^13.0.1"
"react": "^17.0.2"
}, },
"overrides": { "overrides": {
"rollup": "3.2.5" "rollup": "3.2.5"