feat: September 2022 updates

renderer/components/RequestPane/QueryUrl/HttpMethodSelector/StyledWrapper.js

@@ -0,0 +1,30 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 0.8125rem;
+
+  .dropdown {
+    width: 100%;
+  }
+
+  .method-selector {
+    border-radius: 3px;
+    min-width: 90px;
+
+    .tippy-box {
+      max-width: 150px !important;
+      min-width: 110px !important;
+    }
+
+    .dropdown-item {
+      padding: .25rem .6rem !important;
+    }
+  }
+
+  .caret {
+    color: rgb(140, 140, 140);
+    fill: rgb(140 140 140);
+  }
+`;
+
+export default Wrapper;

renderer/components/RequestPane/QueryUrl/HttpMethodSelector/index.js

@@ -0,0 +1,48 @@
+import React, { useRef, forwardRef } from 'react';
+import { IconCaretDown } from '@tabler/icons';
+import Dropdown from 'components/Dropdown';
+import StyledWrapper from './StyledWrapper';
+
+const HttpMethodSelector = ({method, onMethodSelect}) => {
+  const dropdownTippyRef = useRef();
+  const onDropdownCreate = (ref) => dropdownTippyRef.current = ref;
+
+  const Icon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="flex w-full items-center pl-3 py-1 select-none uppercase">
+        <div className="flex-grow font-medium">{method}</div>
+        <div><IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2}/></div>
+      </div>
+    );
+  });
+
+  const handleMethodSelect = (verb) => onMethodSelect(verb);
+
+  const Verb = ({verb}) => {
+    return (
+      <div className="dropdown-item" onClick={() => {
+        dropdownTippyRef.current.hide();
+        handleMethodSelect(verb);
+      }}>
+        {verb}
+      </div>
+    );
+  };
+
+  return(
+    <StyledWrapper>
+      <div className="flex items-center cursor-pointer method-selector">
+        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement='bottom-start'>
+          <Verb verb='GET' />
+          <Verb verb='POST' />
+          <Verb verb='PUT' />
+          <Verb verb='DELETE' />
+          <Verb verb='PATCH' />
+          <Verb verb='OPTIONS' />
+          <Verb verb='HEAD' />
+        </Dropdown>
+      </div>
+    </StyledWrapper>
+  );
+};
+export default HttpMethodSelector;