mirror of
https://github.com/usebruno/bruno.git
synced 2025-06-23 13:31:43 +02:00
feat: drag and drop events (#57)
This commit is contained in:
parent
cffef31f97
commit
6ce657d891
@ -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",
|
||||||
|
@ -70,7 +70,7 @@ const Wrapper = styled.div`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-dragging .collection-item-name {
|
&.is-sidebar-dragging .collection-item-name {
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -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) => {
|
||||||
|
@ -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>
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user