feat(inline): added inline style handling and some styling to properly position the next element

Author: shaefer

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-styleable-select",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "description": "",
   "license": "MIT",
   "author": "Daniel Shaefer",
@@ -18,7 +18,7 @@
     "mobile",
     "responsive"
   ],
-  "main": "src/SimpleSelect.js",
+  "main": "dist/SimpleSelect.js",
   "babel": {
     "presets": [
       "@babel/preset-react"
@@ -40,7 +40,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
-    "prepublish": "rm -rf dist && mkdir dist && babel src -d dist --copy-files"
+    "prepublish": "rm -rf dist && babel src"
   },
   "browserslist": [
     ">0.2%",

src/SimpleSelect.css

@@ -1,6 +1,7 @@
 .mySelectDefault {
-  display: flex;
   position: relative;
+  margin-right: 0.5em;
+  vertical-align: bottom;
 }
 
 /*TODO: Extract out variable styles into separate class: e.g. roundedCorners*/
@@ -14,7 +15,7 @@
   padding: 0.2em 0.2em 0.2em 0.2em; /*the right padding is much larger to allow for the absolute positioning of the dropdowncontainer*/
 
   min-height: 2.2em; /*this is here to handle empty state not shrinking the field set too much. You can remove it this if you don't mind an empty select being compressed.*/
-  min-width: 200px;
+  min-width: 50px;
 
   /*these 2 make placement and alignment of selected values and the cancel button easy*/
   display: flex;

src/SimpleSelect.js

@@ -174,7 +174,8 @@ class SimpleSelect extends React.Component {
     });
 
     const style = {
-      width: this.state.width ? this.state.width : "100%"
+      width: this.state.width ? this.state.width : "100%",
+      display: this.props.inline ? 'inline-block' : 'block'
     };
     const fixedHeightClassName = this.props.fixedHeight ? "fixedHeight" : "";
     const cornerClassName = this.props.hasSharpCorners ? "" : "roundedCorners";

src/index.js

@@ -36,7 +36,7 @@ function App() {
   }
   return (
     <div className="App">
-      <h1>Simple, Styleable, React Select Component</h1>
+      <h1 style={{ textAlign: 'center'}}>Simple, Styleable, React Select Component</h1>
       <h3 style={{ textAlign: "left" }}>
         <ul>
           <li>Small codebase - easily customized</li>
@@ -77,8 +77,9 @@ function App() {
         width="200px"//Non-cancelable 
       />
       <SimpleSelect id="5" options={flagOptions} onChange={onChange} width="300px" legendLabel="Custom Option Label Render"
-        renderOptionLabel={flagOptionLabelRender}
+        renderOptionLabel={flagOptionLabelRender} inline
       />
+      <div style={{display:'inline-block', height: '2.5em', lineHeight:'2.5em', verticalAlign:'middle', border:'1px solid red'}}>Testing inline positioning</div>
     </div>
   );
 }

src/styles.css

@@ -1,4 +1,3 @@
 .App {
   font-family: Lato, sans-serif;
-  text-align: center;
 }