adding corner prop

Author: dev-javascript

README.md

@@ -130,6 +130,10 @@ function App() {
   - type : `String`
   - description : name attribute for the input element
   - default : `""`
+- **corner?**
+  - type : `Boolean`
+  - description : if it is true then the search box gets border-radius
+  - default : `True`
 
 ## Test
 

package.json

@@ -17,8 +17,9 @@
     "UI component",
     "react component",
     "dynamic suggestions",
-    "custom suggestions",
+    "constant suggestions",
     "react search",
+    "react searchBox",
     "popup suggestions",
     "user experience",
     "interactive search",

style/react-custom-search-list.css

@@ -85,8 +85,29 @@
   display: block;
 }
 
+.corner .rc-search-suggestions-container {
+  border-radius: 5px;
+}
+.corner [data-popper-placement|=bottom] {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+.corner [data-popper-placement|=bottom] + .rc-search-suggestions-container {
+  border-bottom-left-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.corner [data-popper-placement|=top] {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+.corner [data-popper-placement|=top] + .rc-search-suggestions-container {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
+
 .underline .rc-search-suggestions-container {
   border-top: none;
   border-left: none;
   border-right: none;
+  border-radius: 0px;
 }

style/react-custom-search-list.min.css

@@ -96,12 +96,36 @@
     }
   }
 }
+@mixin corner {
+  .corner {
+    .rc-search-suggestions-container {
+      border-radius: 5px;
+    }
+    [data-popper-placement|='bottom'] {
+      border-bottom-left-radius: 5px;
+      border-bottom-right-radius: 5px;
+      & + .rc-search-suggestions-container {
+        border-bottom-left-radius: 0px;
+        border-bottom-right-radius: 0px;
+      }
+    }
+    [data-popper-placement|='top'] {
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      & + .rc-search-suggestions-container {
+        border-top-left-radius: 0px;
+        border-top-right-radius: 0px;
+      }
+    }
+  }
+}
 @mixin underline {
   .underline {
     .rc-search-suggestions-container {
       border-top: none;
       border-left: none;
       border-right: none;
+      border-radius: 0px;
     }
   }
 }

style/scss/modules/_base.scss

@@ -2,4 +2,5 @@
 @include base.main;
 @include base.divider;
 @include base.panel;
+@include base.corner;
 @include base.underline;