0.7.0 themes & umd build furqanZafar#31 furqanZafar#33

furqanZafar · furqanZafar · commit 5acee0bc4404 · 2016-02-07T21:12:32.000+04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # React Selectize
 
+## v0.7.0 / 7th February 2016
+* umd build 
+*  added `theme` prop, 3 built-in themes (default, bootstrap3 & material)
+* **Breaking Change**: moved index.css from `src/` directory to `themes` & `dist` directory
+* fixed issues with `search` & `open` props
+* **Breaking Change**: removed `autosize` prop
+
 ## v0.6.2 / 2nd February 2016
 * hide the reset button if the select is empty
 * minor css improvements
diff --git a/README.md b/README.md
@@ -13,7 +13,7 @@ styles & features inspired by [React Select](http://jedwatson.github.io/react-se
 
 [![](http://i.imgsafe.co/rQmogzn.gif)](http://furqanZafar.github.io/react-selectize/)
 
-- [Changelog](CHANGELOG.md) (last updated on 2nd February 2016)
+- [Changelog](CHANGELOG.md) (last updated on 7th February 2016)
 - [API Reference](API.md)
 
 # Motivation
@@ -23,6 +23,7 @@ styles & features inspired by [React Select](http://jedwatson.github.io/react-se
 
 ## Features
 * [Drop in replacement for React.DOM.Select](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=drop-in-replacement-for-react.dom.select)
+* [Customizable themes](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=themes)
 * Stateless, therefore extremely flexible & extensible
 * Clean and compact API fully documented on GitHub
 * [Multiselect support](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=multi-select)
@@ -40,37 +41,37 @@ styles & features inspired by [React Select](http://jedwatson.github.io/react-se
 * [Mark options as unselectable](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=selectability)
 * [Disable selected values](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=disable-selected)
 * [Absolute positioned overlay, "Tether"ed to the search field](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=tether)
-* Customizable styles, comes with Stylus files
 
 ## Install
+
+* **npm:**
 `npm install react-selectize`
 
-## Usage (livescript)
-```
-{create-factory}:React = require \react
-{SimpleSelect, MultiSelect, ReactSelectize} = require \react-selectize
-SimpleSelect = create-factory SimpleSelect
-MultiSelect = create-factory MultiSelect
-.
-.
-.
-SimpleSelect do     
-    placeholder: 'Select a fruit'
-    options: <[apple mango orange banana]> |> map ~> label: it, value: it
-    on-value-change: (value) ~>
-        alert value
-.
-.
-.
-MultiSelect do
-    placeholder: 'Select fruits'
-    options: <[apple mango orange banana]> |> map ~> label: it, value: it
-    on-values-change: (values) ~>
-        alert values
+to include the default styles add the following import statement to your stylus file:
+`@import 'node_modules/react-selectize/themes/index.css'`
+
+* **1998 script tag:**
+```html
+<html>
+ <head>
+  <script src="http://www.preludels.com/prelude-browser-min.js" type="text/javascript" ></script>
+  <script src="https://npmcdn.com/prelude-extension@0.0.11/dist/index.min.js" type="text/javascript" ></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.min.js" type="text/javascript" ></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js" type="text/javascript" ></script>
+
+  <!-- optional dependency (only required with using the tether prop) -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" type="text/javascript" ></script>
+
+  <script src="https://npmcdn.com/react-selectize@0.7.0/dist/index.min.js" type="text/javascript" ></script>
+
+  <!-- built in themes (default, bootstrap3, material) -->
+  <link rel="stylesheet" href="https://npmcdn.com/react-selectize@0.7.0/dist/index.min.css"/>
+ </head>
+</html>
 ```
 
 ## Usage (jsx)
-```
+```javascript
 React = require("react");
 ReactSelectize = require("react-selectize");
 SimpleSelect = ReactSelectize.SimpleSelect;
@@ -104,11 +105,29 @@ MultiSelect = ReactSelectize.MultiSelect;
 />
 ```
 
-## Usage (stylus)
-to include the default styles add the following import statement to your stylus file:
-
-`@import 'node_modules/react-selectize/src/index.css'`
-
+## Usage (livescript)
+```LiveScript
+{create-factory}:React = require \react
+{SimpleSelect, MultiSelect, ReactSelectize} = require \react-selectize
+SimpleSelect = create-factory SimpleSelect
+MultiSelect = create-factory MultiSelect
+.
+.
+.
+SimpleSelect do     
+    placeholder: 'Select a fruit'
+    options: <[apple mango orange banana]> |> map ~> label: it, value: it
+    on-value-change: (value) ~>
+        alert value
+.
+.
+.
+MultiSelect do
+    placeholder: 'Select fruits'
+    options: <[apple mango orange banana]> |> map ~> label: it, value: it
+    on-values-change: (values) ~>
+        alert values
+```
 
 ## Gotchas
 * the default structure of an option object is `{label: String, value :: a}` where `a` implies that `value` property can be of any equatable type
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-selectize",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "description": "A Stateless & Flexible Select component for React inspired by Selectize",
   "main": "src/index.js",
   "scripts": {
diff --git a/public/components/App.ls b/public/components/App.ls
@@ -127,6 +127,13 @@ This can be useful when you are using the select control inside a parent element
             jsx: fs.read-file-sync \public/examples/simple/SimpleSelect.jsx, \utf8 
             ls: fs.read-file-sync \public/examples/simple/SimpleSelect.ls, \utf8 
 
+        * title: "Themes"
+          description: ""
+          languages:
+            jsx: fs.read-file-sync \public/examples/simple/Themes.jsx, \utf8 
+            ls: fs.read-file-sync \public/examples/simple/Themes.ls, \utf8 
+
+
         * title: "On value change"
           description: ""
           languages:
diff --git a/public/examples/simple/Themes.jsx b/public/examples/simple/Themes.jsx
@@ -0,0 +1,21 @@
+// SimpleSelect = require("react-selectize").SimpleSelect
+
+Form = React.createClass({
+    
+    // render :: a -> ReactElement
+    render: function(){
+        var self = this, 
+            options = ["apple", "mango", "grapes", "melon", "strawberry"].map(function(fruit){
+                return {label: fruit, value: fruit}
+            });
+        return <SimpleSelect 
+            options = {options} 
+            placeholder = "Select a fruit"
+            theme = "material" // can be one of "default" | "bootstrap3" | "material" | ...
+            transitionEnter = {true}
+        />
+    }
+    
+});
+
+render(<Form/>, mountNode)
diff --git a/public/examples/simple/Themes.ls b/public/examples/simple/Themes.ls
@@ -0,0 +1,13 @@
+# {SimpleSelect} = require \react-selectize
+
+Form = React.create-class do 
+    
+    # render :: a -> ReactElement
+    render: ->
+        React.create-element SimpleSelect,
+            options: <[apple mango grapes melon strawberry]> |> map ~> label: it, value: it
+            placeholder: "Select a fruit"
+            theme: \material # can be one of \default | \bootstrap3 | \material | ...
+            transition-enter: true
+
+render (React.create-element Form, null), mount-node
diff --git a/public/index.html b/public/index.html
@@ -50,6 +50,7 @@
                 <div class="sub-title">Features</div>
                 <ul>
                     <li><a href="#/?category=simple&amp;example=drop-in-replacement-for-react.dom.select">Drop in replacement for React.DOM.Select</a></li>
+                    <li><a href="#/?category=simple&amp;example=themes">Customizable themes</a></li>
                     <li>Stateless, therefore extremely flexible &amp; extensible</li>
                     <li>Clean and compact API fully documented on GitHub</li>
                     <li><a href="#/?category=multi&amp;example=multi-select">Multiselect support</a></li>
@@ -67,7 +68,7 @@
                     <li><a href="#/?category=simple&amp;example=selectability">Mark options as unselectable</a></li>
                     <li><a href="#/?category=multi&amp;example=disable-selected">Disable selected options instead of removing them</a></li>
                     <li><a href="#/?category=multi&amp;example=tether">Absolute positioned overlay, "Tether"ed to the search field</a></li>
-                    <li>Customizable stlyes, comes with Stylus files</li>
+                    
                 </ul>
             </div>
             <div class="install">
diff --git a/src/DropdownMenu.ls b/src/DropdownMenu.ls
@@ -91,8 +91,8 @@ module.exports = create-class do
                 transition-leave: @props.transition-leave
                 transition-enter-timeout: @props.transition-enter-timeout
                 transition-leave-timeout: @props.transition-leave-timeout
-                class-name: "dropdown-menu-container #{dynamic-class-name}"
-                ref: \dropdownMenuContainer
+                class-name: "dropdown-menu-wrapper #{dynamic-class-name}"
+                ref: \dropdownMenuWrapper
                 @render-dropdown computed-state
 
         else
@@ -143,8 +143,8 @@ module.exports = create-class do
 
                 # on-height-change :: Number -> ()
                 on-height-change: (height) !~> 
-                    if @refs.dropdown-menu-container
-                        find-DOM-node @refs.dropdown-menu-container .style.height = "#{height}px"
+                    if @refs.dropdown-menu-wrapper
+                        find-DOM-node @refs.dropdown-menu-wrapper .style.height = "#{height}px"
 
                 # NO RESULT FOUND   
                 if @props.options.length == 0
@@ -183,7 +183,7 @@ module.exports = create-class do
 
     # component-did-update :: () -> ()
     component-did-update: !->
-        dropdown-menu = find-DOM-node @refs.dropdown-menu-container ? @refs.dropdown-menu
+        dropdown-menu = find-DOM-node @refs.dropdown-menu-wrapper ? @refs.dropdown-menu
             ..?style.bottom = switch 
                 | @props.dropdown-direction == -1 => @props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom
                 | _ => ""
diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls
@@ -98,6 +98,7 @@ module.exports = create-class do
             class-name: class-name-from-object do
                 \react-selectize : 1
                 "#{@props.theme}" : 1
+                \control-wrapper : 1
                 "#{@props.class-name}" : 1
                 disabled: @props.disabled
                 open: @props.open
diff --git a/themes/base.styl b/themes/base.styl
@@ -1,8 +1,14 @@
 // component skeleton, extended & decorated by themes
 .react-selectize
+    color black
+
+.react-selectize.control-wrapper
     user-select none
     position relative
 
+    &:not(.tethered)
+        width 300px
+
     &.disabled
         pointer-events none
 
@@ -11,7 +17,14 @@
         display flex
         align-items flex-start
         position relative
+        
+        // this controls the height of the select 
+        padding 2px
 
+        // this controls the height of the select 
+        > div
+            min-height 30px
+        
         .react-selectize-placeholder
             display flex
             align-items center
@@ -53,35 +66,73 @@
         .react-selectize-reset-container
             width 16px
 
+        .react-selectize-reset-container:hover .react-selectize-reset path
+            stroke #c0392b
+
         .react-selectize-arrow path
             fill #999
             
         .react-selectize-reset path
+            transition stroke 0.5s 0s ease
             stroke #999
             stroke-linecap square
             stroke-linejoin mitter
 
-// dropdown-menu-container is present for tethered & animated dropdowns only
-.react-selectize.dropdown-menu-container
+    // by default the dropdown-menu is present inside the control-wrapper 
+    .dropdown-menu
+        
+        &.tethered
+            min-width 298px
+
+        &:not(.tethered)
+            width calc(100% - 2px)
+
+// wraps the dropdown-menu div, exists only when props.transition-enter or props.transition-leave or both are true
+// present inside document.body if props.tether is true, otherwise its present inside the control-wrapper div (above)
+.react-selectize.dropdown-menu-wrapper
     position absolute
 
+    &.tethered
+        min-width 298px
+
+    &:not(.tethered)
+        width calc(100% - 2px)
+
+// dropdown-menu present in document.body when props.tether is true
 .react-selectize.dropdown-menu
     overflow auto
     position absolute
     max-height 200px
     z-index 10
 
-    &.tethered
-        min-width 300px
-
-    &:not(.tethered)
-        width 100%
-
     .groups.as-columns
         display flex
         > div
             flex 1
 
     .option-wrapper
         cursor pointer
-        outline none
+        outline none
+
+// MULTI SELECT
+.multi-select.react-selectize.control-wrapper
+    
+    .simple-value
+        display inline-block
+        margin 2px
+        vertical-align middle
+
+        span
+            display inline-block
+            padding 2px 5px 4px
+            vertical-align center
+
+// SIMPLE SELECT
+.simple-select.react-selectize.control-wrapper
+    
+    .simple-value
+        margin 2px
+
+        span
+            display inline-block
+            vertical-align center
diff --git a/themes/bootstrap3.styl b/themes/bootstrap3.styl
diff --git a/themes/default.styl b/themes/default.styl
diff --git a/themes/material.styl b/themes/material.styl

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-selectize",`
`3`		`- "version": "0.6.2",`
	`3`	`+ "version": "0.7.0",`
`4`	`4`	`"description": "A Stateless & Flexible Select component for React inspired by Selectize",`
`5`	`5`	`"main": "src/index.js",`
`6`	`6`	`"scripts": {`