holm/bruno
1
0
Fork 0
forked from extern/bruno
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: drag and drop events (#57)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/bruno-app/package.json
View File

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

2
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
View File

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

26
packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js
View File

@ -2,6 +2,7 @@ import React, { useState, useRef, forwardRef, useEffect } from 'react';
import range from 'lodash/range';
import filter from 'lodash/filter';
import classnames from 'classnames';
import { useDrag, useDrop } from 'react-dnd';
import { IconChevronRight, IconDots } from '@tabler/icons';
import { useSelector, useDispatch } from 'react-redux';
import { addTab, focusTab } from 'providers/ReduxStore/slices/tabs';
@ -23,8 +24,25 @@ import StyledWrapper from './StyledWrapper';
const CollectionItem = ({ item, collection, searchText }) => {
const tabs = useSelector((state) => state.tabs.tabs);
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 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 [cloneItemModalOpen, setCloneItemModalOpen] = useState(false);
@ -91,7 +109,7 @@ const CollectionItem = ({ item, collection, searchText }) => {
const isFolder = isItemAFolder(item);
const className = classnames('flex flex-col w-full', {
'is-dragging': isDragging
'is-sidebar-dragging': isSidebarDragging
});
if (searchText && searchText.length) {
@ -109,6 +127,8 @@ const CollectionItem = ({ item, collection, searchText }) => {
const requestItems = filter(item.items, (i) => isItemARequest(i));
const folderItems = filter(item.items, (i) => isItemAFolder(i));
drag(drop(ref))
return (
<StyledWrapper className={className}>
{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)} />}
{newRequestModalOpen && <NewRequest item={item} collection={collection} onClose={() => setNewRequestModalOpen(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">
{indents && indents.length
? indents.map((i) => {

28
packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
View File

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

11
packages/bruno-app/src/pageComponents/Index/StyledWrapper.js
View File

@ -21,17 +21,6 @@ const Wrapper = styled.div`
.fw-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;

12
packages/bruno-app/src/pages/_app.js
View File

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

7
packages/bruno-graphql-docs/package.json
View File

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