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

feat: request body selector

Browse Source
This commit is contained in:
Anoop M D 2022-03-19 21:46:30 +05:30
parent ad971d9877
commit 23910d3bb2
7 changed files with 119 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
renderer/components/Dropdown/StyledWrapper.js
View File

@ -21,6 +21,12 @@ const Wrapper = styled.div`
padding-top: 0.25rem;
padding-bottom: 0.25rem;
.label-item {
display: flex;
align-items: center;
padding: .35rem .6rem;
}
.dropdown-item {
display: flex;
align-items: center;

3
renderer/components/RequestPane/HttpRequestPane/index.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
import QueryParams from 'components/RequestPane/QueryParams';
import RequestHeaders from 'components/RequestPane/RequestHeaders';
import RequestBody from 'components/RequestPane/RequestBody';
import StyledWrapper from './StyledWrapper';
const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
@ -18,7 +19,7 @@ const HttpRequestPane = ({item, collection, leftPaneWidth}) => {
<QueryParams />
</TabPanel>
<TabPanel>
<div>Body</div>
<RequestBody />
</TabPanel>
<TabPanel>
<RequestHeaders item={item} collection={collection}/>

26
renderer/components/RequestPane/RequestBody/RequestBodyMode/StyledWrapper.js Normal file
View File

@ -0,0 +1,26 @@
import styled from 'styled-components';
const Wrapper = styled.div`
font-size: 0.8125rem;
.body-mode-selector {
background: #efefef;
border-radius: 3px;
.dropdown-item {
padding: .2rem .6rem !important;
padding-left: 1.5rem !important;
}
.label-item {
padding: .2rem .6rem !important;
}
}
.caret {
color: rgb(140, 140, 140);
fill: rgb(140 140 140);
}
`;
export default Wrapper;

66
renderer/components/RequestPane/RequestBody/RequestBodyMode/index.js Normal file
View File

@ -0,0 +1,66 @@
import React, { useRef, forwardRef } from 'react';
import { IconCaretDown } from '@tabler/icons';
import Dropdown from 'components/Dropdown';
import StyledWrapper from './StyledWrapper';
const RequestBodyMode = () => {
const dropdownTippyRef = useRef();
const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
const Icon = forwardRef((props, ref) => {
return (
<div ref={ref} className="flex items-center justify-center pl-3 py-1 select-none">
JSON <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2}/>
</div>
);
});
return(
<StyledWrapper>
<div className="inline-flex items-center cursor-pointer body-mode-selector">
<Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-start'>
<div className="label-item font-medium">
Form
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
}}>
Multipart Form
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
}}>
Form Url Encoded
</div>
<div className="label-item font-medium">
Raw
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
}}>
JSON
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
}}>
XML
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
}}>
TEXT
</div>
<div className="label-item font-medium">
Other
</div>
<div className="dropdown-item" onClick={() => {
dropdownTippyRef.current.hide();
}}>
No Body
</div>
</Dropdown>
</div>
</StyledWrapper>
);
};
export default RequestBodyMode;

6
renderer/components/RequestPane/RequestBody/StyledWrapper.js Normal file
View File

@ -0,0 +1,6 @@
import styled from 'styled-components';
const Wrapper = styled.div`
`;
export default Wrapper;

12
renderer/components/RequestPane/RequestBody/index.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import RequestBodyMode from './RequestBodyMode';
import StyledWrapper from './StyledWrapper';
const RequestBody = () => {
return(
<StyledWrapper className="mt-3">
<RequestBodyMode />
</StyledWrapper>
);
};
export default RequestBody;

2
renderer/styles/globals.css
View File

@ -25,7 +25,7 @@ html, body {
margin: 0;
padding: 0;
font-size: 1rem;
color: rgb(48 48 48);
color: rgb(52 52 52);
font-kerning: none;
text-rendering: optimizeSpeed;