Merge branch 'release/0.9.0'

API.md

@@ -19,12 +19,15 @@
 |    groups                  | [Group]                             | collection of objects where each object must atleast have a groupId property|
 |    groupsAsColumns         | Boolean                             | display option groups in columns|
 |    hideResetButton         | Boolean                             | hides the reset button, even if the select element is not empty |
+|    highlightedUid          | object                              | the uid (unique id) of the currently highlighted option, uid of an option is obtained from the `uid` prop defined below |
 |    name                    | String                              | defaults to undefined, provide a name property to create an hidden input element for html form serialization |
 |    open                    | Boolean                             | controls the visibility of the dropdown menu |
 |    onBlur                  | Event -> Void                       | `({originalEvent :: e, value :: Item, open :: Boolean}){}` |
 |    onFocus                 | Event -> Void                       | `({originalEvent :: e, value :: Item, open :: Boolean}){}` |
+|    onHighlightedUidChange  | object -> Void                      | `(uid){}` invoked when the highlighted option changes |
 |    onKeyboardSelectionFailed | Int -> Void                       | `(keyCode){}` fired when the user hits the return key on an empty list of options |
 |    onOpenChange            | Boolean -> Void                     | `(open){}` open is true if the dropdown opened and false if it closed|
+|    onPaste                 | Event -> Void                       | invoked when the user pastes text in the input field and `props.valueFromPaste` is not specified|
 |    onSearchChange          | String -> Void                      | `(search){}` invoked when the search text in the input field changes|
 |    onValueChange           | Item -> Void                        | `(selectedValue){}` invoked when the user selects an option (by click on enter)|
 |    options                 | [Item]                              | list of items by default each option object MUST have label & value property, otherwise you must implement the render* & filterOptions methods|
@@ -48,6 +51,7 @@
 |    transitionLeaveTimeout  | Number                              | duration specified in milliseconds, it must match the transition duration specified under the CSS class `.slide-leave-active` |
 |    uid                     | (Eq e) => Item -> e                 | `(item){return item.value}` returns a unique id for a given option, defaults to the value property|
 |    value                   | Item                                | the selected value, i.e. one of the objects in the options array|
+|    valueFromPaste          | [Item] -> Item -> String -> Item    | `(options, value, pastedText){}` invoked when the user pastes text in the input field, here you can convert the pasted text into an item that will then show up as selected |
 
 ### SimpleSelect methods
 

CHANGELOG.md

@@ -1,5 +1,10 @@
 # React Selectize
 
+## v0.9.0 / 18th March 2016
+* added `on-paste` and `value-from-paste` props to `SimpleSelect`
+* added `highlighted-uid` and `on-highlighted-uid-change` props to track the current highlighted option
+* fixed a bug in `dropdown-direction` prop
+
 ## v0.8.4 / 4th March 2016
 * added `tether-props` prop to customize the parent element (defaults to body)
 * expose `highlighted-ui` & `on-highlighted-uid-change` props for `MultiSelect`

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 4th March 2016)
+- [Changelog](CHANGELOG.md) (last updated on 18th March 2016)
 - [API Reference](API.md)
 
 # Motivation
@@ -51,7 +51,7 @@ to include the default styles add the following import statement to your stylus
 `@import 'node_modules/react-selectize/themes/index.css'`
 
 * **bower:**
-`bower install https://npmcdn.com/react-selectize@0.8.4/bower.zip`
+`bower install https://npmcdn.com/react-selectize@0.9.0/bower.zip`
 
 * **1998 script tag:**
 ```html
@@ -66,10 +66,10 @@ to include the default styles add the following import statement to your stylus
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.1.1/js/tether.min.js" type="text/javascript" ></script>
 
   <!-- REACT SELECTIZE -->
-  <script src="https://npmcdn.com/react-selectize@0.8.4/dist/index.min.js" type="text/javascript" ></script>
+  <script src="https://npmcdn.com/react-selectize@0.9.0/dist/index.min.js" type="text/javascript" ></script>
 
   <!-- THEMES (default, bootstrap3, material) -->
-  <link rel="stylesheet" href="https://npmcdn.com/react-selectize@0.8.4/dist/index.min.css"/>
+  <link rel="stylesheet" href="https://npmcdn.com/react-selectize@0.9.0/dist/index.min.css"/>
 
  </head>
 </html>

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-selectize",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "homepage": "https://github.com/furqanZafar/react-selectize",
   "authors": [
     "Furqan Zafar (Mac Pro) <fruzi89@gmail.com>"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-selectize",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "A Stateless & Flexible Select component for React inspired by Selectize",
   "main": "src/index.js",
   "scripts": {

src/DropdownMenu.ls

@@ -121,7 +121,7 @@ module.exports = create-class do
 
                     on-mouse-out: !~>  
                         if !@props.scroll-lock
-                            @props.on-highlighted-uid-change undefined
+                            <~ @props.on-highlighted-uid-change undefined
 
                     render-item: @props.render-option
                 } <<<
@@ -131,7 +131,7 @@ module.exports = create-class do
                         on-click: !~> @props.on-option-click @props.highlighted-uid
                         on-mouse-over: ({current-target}) !~>  
                             if !@props.scroll-lock
-                                @props.on-highlighted-uid-change uid
+                                <~ @props.on-highlighted-uid-change uid
 
     # render-dropdown :: ComputedState -> ReactElement
     render-dropdown: ({dynamic-class-name}) ->
@@ -186,7 +186,9 @@ module.exports = create-class do
     component-did-update: !->
         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
+                | @props.dropdown-direction == -1 => 
+                    "#{@props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom}px"
+
                 | _ => ""
 
     # highlight-and-scroll-to-option :: Int, (() -> ())? -> ()

src/MultiSelect.ls

@@ -215,7 +215,6 @@ module.exports = React.create-class do
                 (o, callback) ~> 
                     <~ @set-state "#{p}" : o
                     callback!
-
                     @props[camelize "on-#{p}-change"] o, (->)
 
             # both p and its change callback are coming from state

src/ReactSelectize.ls

@@ -411,7 +411,7 @@ module.exports = create-class do
 
         # if the list of options was closed then reset highlighted-uid 
         if !@props.open and prev-props.open
-            @props.on-highlighted-uid-change undefined
+            <~ @props.on-highlighted-uid-change undefined
 
     # component-will-receive-props :: Props -> ()
     component-will-receive-props: (props) !->

src/SimpleSelect.ls

@@ -2,6 +2,7 @@
 {is-equal-to-object} = require \prelude-extension
 {create-factory, DOM:{div, img, span}}:React = require \react
 ReactSelectize = create-factory require \./ReactSelectize
+{cancel-event} = require \./utils
 
 module.exports = React.create-class do
 
@@ -27,6 +28,7 @@ module.exports = React.create-class do
         on-blur: ((e) !->) # :: # Event -> ()
         on-focus: ((e) !->) # :: Event -> ()
         on-keyboard-selection-failed: ((which) !-> ) # :: Int -> ()
+        on-paste: ((e) !-> true) # Event -> Boolean
         # on-search-change :: String -> ()
         # on-value-change :: Item -> () 
         # open :: Boolean
@@ -188,6 +190,18 @@ module.exports = React.create-class do
 
             on-focus: (e) !~> @props.on-focus {value, open, original-event: e}
 
+            # on-paste :: Event -> Boolean
+            on-paste: 
+                | typeof @props?.value-from-paste == \undefined => @props.on-paste
+                | _ => ({clipboard-data}:e) ~>
+                    value-from-paste = @props.value-from-paste options, value, clipboard-data.get-data \text
+                    if value-from-paste
+                        do ~>
+                            <~ on-value-change value-from-paste
+                            <~ on-search-change ""
+                            on-open-change false
+                        cancel-event e
+
             # STYLE
             placeholder: @props.placeholder
             style: @props.style