diff --git a/API.md b/API.md index b6f953f..ff378da 100644 --- a/API.md +++ b/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 diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c849f2..4e85ab7 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/README.md b/README.md index c3cc68f..7eb9b8c 100644 --- 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 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 - + - + diff --git a/bower.json b/bower.json index 79daab2..a00ff2f 100644 --- a/bower.json +++ b/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) " diff --git a/package.json b/package.json index b522642..b4dd5cb 100644 --- a/package.json +++ b/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": { diff --git a/src/DropdownMenu.ls b/src/DropdownMenu.ls index 6eab606..bcfd980 100644 --- a/src/DropdownMenu.ls +++ b/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, (() -> ())? -> () diff --git a/src/MultiSelect.ls b/src/MultiSelect.ls index 5572280..f463401 100644 --- a/src/MultiSelect.ls +++ b/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 diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index 7f9fcde..0671504 100644 --- a/src/ReactSelectize.ls +++ b/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) !-> diff --git a/src/SimpleSelect.ls b/src/SimpleSelect.ls index 3a15550..2033179 100644 --- a/src/SimpleSelect.ls +++ b/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