forked from extern/bruno
feat: CollectionTitleBar Component
This commit is contained in:
Anoop M D
parent
b65d0e2a66
commit
44368851ed
@ -0,0 +1,6 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
const StyledWrapper = styled.div`
|
||||
`;
|
||||
|
||||
export default StyledWrapper;
|
||||
18
renderer/components/RequestTabs/CollectionTitleBar/index.js
Normal file
18
renderer/components/RequestTabs/CollectionTitleBar/index.js
Normal file
@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import { IconStack, IconGitFork } from '@tabler/icons';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const CollectionTitleBar = ({collection}) => {
|
||||
return (
|
||||
<StyledWrapper>
|
||||
<div className="flex items-center p-2">
|
||||
<IconStack size={18} strokeWidth={1.5}/>
|
||||
<span className="ml-2 mr-4 font-semibold">anoop<span style={{paddingInline: 2}}>/</span>{collection.name}</span>
|
||||
<IconGitFork size={16} strokeWidth={1}/>
|
||||
<span className="ml-1 text-xs">from anoop/notebase</span>
|
||||
</div>
|
||||
</StyledWrapper>
|
||||
)
|
||||
};
|
||||
|
||||
export default CollectionTitleBar;
|
||||
@ -1,9 +1,22 @@
|
||||
import React from 'react';
|
||||
import find from 'lodash/find';
|
||||
import filter from 'lodash/filter';
|
||||
import classnames from 'classnames';
|
||||
import { IconHome2 } from '@tabler/icons';
|
||||
import { useStore } from 'providers/Store';
|
||||
import actions from 'providers/Store/actions';
|
||||
import CollectionTitleBar from './CollectionTitleBar';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
const RequestTabs = () => {
|
||||
const [store, storeDispatch] = useStore();
|
||||
|
||||
const {
|
||||
collections,
|
||||
requestTabs,
|
||||
activeRequestTabId
|
||||
} = store;
|
||||
|
||||
const getTabClassname = (tab, index) => {
|
||||
return classnames("request-tab select-none", {
|
||||
'active': tab.id === activeRequestTabId,
|
||||
@ -28,7 +41,7 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
};
|
||||
|
||||
const handleClick = (tab) => {
|
||||
dispatch({
|
||||
storeDispatch({
|
||||
type: actions.REQUEST_TAB_CLICK,
|
||||
requestTab: tab
|
||||
});
|
||||
@ -37,63 +50,77 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
|
||||
const handleCloseClick = (event, tab) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
dispatch({
|
||||
storeDispatch({
|
||||
type: actions.REQUEST_TAB_CLOSE,
|
||||
requestTab: tab
|
||||
});
|
||||
};
|
||||
|
||||
const createNewTab = () => {
|
||||
dispatch({
|
||||
storeDispatch({
|
||||
type: actions.ADD_NEW_HTTP_REQUEST
|
||||
});
|
||||
};
|
||||
|
||||
if(!activeRequestTabId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const activeRequestTab = find(requestTabs, (t) => t.id === activeRequestTabId);
|
||||
const activeCollection = find(collections, (c) => c.id === activeRequestTab.collectionId);
|
||||
const collectionRequestTabs = filter(requestTabs, (t) => t.collectionId === activeRequestTab.collectionId);
|
||||
console.log(activeRequestTab);
|
||||
|
||||
return (
|
||||
<StyledWrapper className="mt-2 flex items-center">
|
||||
{requestTabs && requestTabs.length ? (
|
||||
<ul role="tablist">
|
||||
<li className="select-none new-tab mr-1" onClick={createNewTab}>
|
||||
<div className="flex items-center home-icon-container">
|
||||
<IconHome2 size={18} strokeWidth={1.5}/>
|
||||
</div>
|
||||
</li>
|
||||
{requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
|
||||
return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
|
||||
<div className="flex items-center justify-between tab-container px-1">
|
||||
<div className="flex items-center tab-label pl-2">
|
||||
<span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
|
||||
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
|
||||
<StyledWrapper>
|
||||
{collectionRequestTabs && collectionRequestTabs.length ? (
|
||||
<>
|
||||
<CollectionTitleBar collection={activeCollection}/>
|
||||
<div className="mt-1 flex items-center">
|
||||
<ul role="tablist">
|
||||
<li className="select-none new-tab mr-1" onClick={createNewTab}>
|
||||
<div className="flex items-center home-icon-container">
|
||||
<IconHome2 size={18} strokeWidth={1.5}/>
|
||||
</div>
|
||||
<div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
|
||||
{!rt.hasChanges ? (
|
||||
<svg focusable="false"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
|
||||
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" class="has-changes-icon" viewBox="0 0 8 8">
|
||||
<circle cx="4" cy="4" r="3"/>
|
||||
</svg>
|
||||
) }
|
||||
</li>
|
||||
{collectionRequestTabs && collectionRequestTabs.length ? collectionRequestTabs.map((rt, index) => {
|
||||
return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
|
||||
<div className="flex items-center justify-between tab-container px-1">
|
||||
<div className="flex items-center tab-label pl-2">
|
||||
<span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
|
||||
<span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
|
||||
</div>
|
||||
<div className="flex px-2 close-icon-container" onClick={(e) => handleCloseClick(e, rt)}>
|
||||
{!rt.hasChanges ? (
|
||||
<svg focusable="false"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" className="close-icon">
|
||||
<path fill="currentColor" d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"></path>
|
||||
</svg>
|
||||
) : (
|
||||
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="8" height="16" fill="#cc7b1b" class="has-changes-icon" viewBox="0 0 8 8">
|
||||
<circle cx="4" cy="4" r="3"/>
|
||||
</svg>
|
||||
) }
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}) : null}
|
||||
<li className="select-none new-tab ml-1" onClick={createNewTab}>
|
||||
<div className="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
}) : null}
|
||||
<li className="select-none new-tab ml-1" onClick={createNewTab}>
|
||||
<div className="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
<li className="select-none new-tab choose-request">
|
||||
<div className="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="select-none new-tab choose-request">
|
||||
<div className="flex items-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</>
|
||||
) : null}
|
||||
</StyledWrapper>
|
||||
);
|
||||
|
||||
@ -3,11 +3,9 @@ import RequestTabs from 'components/RequestTabs';
|
||||
import RequestTabPanel from 'components/RequestTabPanel';
|
||||
import Sidebar from 'components/Sidebar';
|
||||
import actions from 'providers/Store/actions';
|
||||
import { useStore } from '../../providers/Store/index';
|
||||
import { useStore } from 'providers/Store';
|
||||
import StyledWrapper from './StyledWrapper';
|
||||
|
||||
import { IconStack, IconGitFork } from '@tabler/icons';
|
||||
|
||||
const SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
|
||||
if(!SERVER_RENDERED) {
|
||||
require('codemirror/mode/javascript/javascript');
|
||||
@ -55,18 +53,7 @@ export default function Main() {
|
||||
activeRequestTabId={activeRequestTabId}
|
||||
/>
|
||||
<section className='flex flex-grow flex-col'>
|
||||
<div className="flex items-center" style={{padding: "8px", paddingBottom: "4px"}}>
|
||||
<IconStack size={18} strokeWidth={1.5}/>
|
||||
<span className="ml-2 mr-4 font-semibold">spacex</span>
|
||||
<IconGitFork size={16} strokeWidth={1}/>
|
||||
<span className="ml-1 text-xs">main</span>
|
||||
</div>
|
||||
<RequestTabs
|
||||
requestTabs={requestTabs}
|
||||
actions={actions}
|
||||
dispatch={dispatch}
|
||||
activeRequestTabId={activeRequestTabId}
|
||||
/>
|
||||
<RequestTabs/>
|
||||
<RequestTabPanel
|
||||
actions={actions}
|
||||
dispatch={dispatch}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user