added 2 new props delimiters & valuesFromPaste furqanZafar#21

Author: furqanZafar

.travis.yml

@@ -1,8 +1,6 @@
 language: node_js
 node_js:
     - "0.10"
-    - "0.11"
-    - "0.12"
 before script:
     - npm install -g gulp
 script:

public/components/App.ls

@@ -51,6 +51,16 @@ Select one more item and the control will be disabled until one or more are dele
 Add and remove items in any order without touching your mouse. 
 Use your left/right arrow keys to move the cursor between items.
 """          
+          languages:
+            jsx: fs.read-file-sync \public/examples/multi/TagsBasic.jsx, \utf8 
+            ls: fs.read-file-sync \public/examples/multi/TagsBasic.ls, \utf8 
+
+
+        * title: "Tags - Advance usage"
+          description: """
+default values, comma to confirm selection, custom error messages (like "Tag already exists")
+convert pasted text into tags, edit existing tags by pressing [backspace]
+"""
           languages:
             jsx: fs.read-file-sync \public/examples/multi/Tags.jsx, \utf8 
             ls: fs.read-file-sync \public/examples/multi/Tags.ls, \utf8 

public/examples/multi/Tags.jsx

@@ -7,6 +7,24 @@ Form = React.createClass({
 
             values = {this.state.tags}
 
+            // delimtiers :: [KeyCode]
+            delimiters = {[188]}
+
+            // valuesFromPaste :: [Item] -> [Item] -> String -> [Item]
+            valuesFromPaste = {function(options, values, pastedText){
+                return pastedText
+                    .split(",")
+                    .filter(function(text){
+                        var labels = values.map(function(item){
+                            return item.label;
+                        })
+                        return labels.indexOf(text) == -1;
+                    })
+                    .map(function(text){
+                        return {label: text, value: text};
+                    });
+            }}
+
             // restoreOnBackspace :: Item -> String
             restoreOnBackspace = {function(item){
                 return item.label;
@@ -30,12 +48,12 @@ Form = React.createClass({
             // renderNoResultsFound :: [Item] -> String -> ReactElement
             renderNoResultsFound = {function(values, search) {
                 return <div className = "no-results-found">
-                    {(function(){
+                    {function(){
                         if (search.trim().length == 0)
                             return "Type a few characters to create a tag";
-                        else if (values.map(function(value){ return value.label; }).indexOf(search) != -1)
+                        else if (values.map(function(item){ return item.label; }).indexOf(search.trim()) != -1)
                             return "Tag already exists";
-                    })()}
+                    }()}
                 </div>
             }}
         />;

public/examples/multi/Tags.ls

@@ -6,6 +6,17 @@ Form = React.create-class do
 
             values: @state.tags
 
+            # 188 = comma
+            # delimiters :: [KeyCode]
+            delimiters: [188]
+            
+            # values-from-paste :: [Item] -> [Item] -> String -> [Item]
+            values-from-paste: (options, values, pasted-text) ~>
+                pasted-text
+                |> Str.split \,
+                |> reject ~> it in map (.label), values
+                |> map ~> label: it, value: it
+            
             # restore-on-backspace :: Item -> String
             restore-on-backspace: (.label)
 
@@ -22,7 +33,7 @@ Form = React.create-class do
                 div class-name: \no-results-found,
                     if search.trim!.length == 0
                         "Type a few characters to create a tag"
-                    else if (search in map (.label), values)
+                    else if (search.trim! in map (.label), values)
                         "Tag already exists"
 
     # get-initial-state :: a -> UIState

public/examples/multi/TagsBasic.jsx

@@ -0,0 +1,23 @@
+Form = React.createClass({
+    
+    // render :: a -> ReactElement
+    render: function(){
+        self = this;
+        return <MultiSelect
+            
+            // createFromSearch :: [Item] -> [Item] -> String -> Item?
+            createFromSearch = {function(options, values, search){
+                labels = values.map(function(value){ 
+                    return value.label; 
+                })
+                if (search.trim().length == 0 || labels.indexOf(search.trim()) != -1) 
+                    return null;
+                return {label: search.trim(), value: search.trim()};
+            }}
+            
+        />;
+    },
+    
+});
+
+render(<Form/>, mountNode); 

public/examples/multi/TagsBasic.ls

@@ -0,0 +1,12 @@
+Form = React.create-class do 
+    
+    # render :: a -> ReactElement
+    render: ->
+        React.create-element MultiSelect,
+            
+            # create-from-search :: [Item] -> [Item] -> String -> Item?
+            create-from-search: (options, values, search) -> 
+                return null if search.trim!.length == 0 or search.trim! in map (.label), values
+                label: search.trim!, value: search.trim!
+                
+render (React.create-element Form, null), mount-node

src/MultiSelect.ls

@@ -12,7 +12,9 @@ module.exports = React.create-class do
         # anchor :: Item
         # class-name :: String
         close-on-select: false
+        # values-from-paste :: String -> [Item]
         default-values: []
+        delimiters: []
         # disabled :: Boolean
         # create-from-search :: [Item] -> [Item] -> String -> Item?
         # filter-options :: [Item] -> [Item] -> String -> [Item]
@@ -25,6 +27,7 @@ module.exports = React.create-class do
         on-blur: ((values, reason) !->) # :: [Item] -> String -> Void
         on-enter: ((highlighted-option) !->) # :: Item -> Void
         on-focus: ((values, reason) !->) # :: [Item] -> String -> Void
+        on-paste: ((e) !-> true) # Event -> Boolean
         # on-search-change :: String -> (a -> Void) -> Void
         # on-value-change :: Item -> (a -> Void) -> Void 
         # options :: [Item]
@@ -40,16 +43,18 @@ module.exports = React.create-class do
     # render :: a -> ReactElement
     render: -> 
 
-        {anchor, search, values, on-anchor-change, on-search-change, on-values-change, filtered-options, options} = @get-computed-state!
+        {anchor, search, values, on-anchor-change, on-search-change, 
+        on-values-change, filtered-options, options} = @get-computed-state!
 
         # props
-        {autosize, disabled, dropdown-direction, group-id, groups, groups-as-columns, on-enter, render-group-title,
+        {autosize, delimiters, disabled, dropdown-direction, group-id, groups, groups-as-columns, on-enter, render-group-title, 
         transition-enter, transition-leave, transition-enter-timeout, transition-leave-timeout, uid} = @props
 
         ReactSelectize {
 
             autosize
             class-name: "multi-select" + if !!@props.class-name then " #{@props.class-name}" else ""
+            delimiters
             disabled
             dropdown-direction
             group-id
@@ -104,6 +109,18 @@ module.exports = React.create-class do
 
             on-focus: (, reason) !~> @props.on-focus values, reason
 
+            # on-paste :: Event -> Boolean
+            on-paste: 
+                | typeof @props?.values-from-paste == \undefined => @props.on-paste
+                | _ => ({clipboard-data}:e) ~>
+                    do ~>
+                        new-values = values ++ (@props.values-from-paste options, values, clipboard-data.get-data \text)
+                        <~ on-values-change new-values 
+                        on-anchor-change last new-values
+
+                    e.prevent-default!
+                    false
+
             # STYLE
             placeholder: @props.placeholder
             style: @props.style
@@ -113,7 +130,8 @@ module.exports = React.create-class do
         | typeof @props.restore-on-backspace == \function => restore-on-backspace: @props.restore-on-backspace
         | _ => {})
         <<< (switch
-        | typeof @props.render-no-results-found == \function => render-no-results-found: ~> @props.render-no-results-found values, search
+        | typeof @props.render-no-results-found == \function => render-no-results-found: ~> 
+            @props.render-no-results-found values, search
         | _ => {})
 
 
@@ -147,7 +165,10 @@ module.exports = React.create-class do
 
         # filter options and create new one from search text
         filtered-options = @props.filter-options unfiltered-options, values, search
-        new-option = if typeof @props.create-from-search == \function then (@props.create-from-search filtered-options, values, search) else null
+        new-option = 
+            | typeof @props.create-from-search == \function => @props.create-from-search filtered-options, values, search
+            | _ => null
+
         options = (if !!new-option then [{} <<< new-option <<< new-option: true] else []) ++ filtered-options
 
         {anchor, search, values, on-anchor-change, on-search-change, on-values-change, filtered-options, options}

src/ReactSelectize.ls

@@ -150,6 +150,7 @@ module.exports = create-class do
                     document.body.remove-child $input
 
         # class-name :: String
+        delimiters: []
         disabled: false
         dropdown-direction: 1
         first-option-index-to-highlight: (options) -> 0
@@ -163,6 +164,7 @@ module.exports = create-class do
         on-focus: ((values, reason) !->) # [Item] -> String -> Void
         on-highlighted-uid-change: ((uid, callback) !-> ) # (Eq e) => e -> (a -> Void) -> Void
         on-open-change: ((open, callback) !->) # Boolean -> (a -> Void) -> Void
+        on-paste: ((e) !-> true) # Event -> Boolean
         on-search-change: ((search, callback) !-> ) # String -> (a -> Void) -> Void
         on-values-change: ((values, callback) !->) # [Item] -> (a -> Void) -> Void
         open: false
@@ -269,6 +271,10 @@ module.exports = create-class do
                                 @props.on-open-change true, -> callback true
                         @props.on-focus @props.values, if !!result then \event else \focus
 
+                    # on-paste :: Event -> Boolean
+                    on-paste: @props.on-paste
+
+                    # on-key-down :: Event -> Boolean
                     on-key-down: (e) ~>
 
                         # always handle the tab, backspace & escape keys
@@ -338,7 +344,7 @@ module.exports = create-class do
                             @focus!
 
                         # ENTER
-                        if e.which == 13 and @props.open
+                        if (e.which in [13] ++ @props.delimiters) and @props.open
 
                             # find the highlighted option if any and invoke the on-enter prop
                             highlighted-option = 
@@ -349,6 +355,8 @@ module.exports = create-class do
                             # select the highlighted option (if any)
                             @select-highlighted-uid anchor-index
 
+                            return cancel-event e
+
                         # move anchor position left / right using arrow keys (only when search field is empty)
                         if @props.search.length == 0
 

src/SimpleSelect.ls

@@ -11,6 +11,7 @@ module.exports = React.create-class do
     get-default-props: ->
         # class-name :: String
         # disabled :: Boolean
+        delimiters: []
         # create-from-search :: [Item] -> String -> Item?
         # editable :: Item -> String
         # filter-options :: [Item] -> String -> [Item]
@@ -39,13 +40,14 @@ module.exports = React.create-class do
         {search, value, values, on-search-change, on-value-change, filtered-options, options} = @get-computed-state!
 
         # props
-        {autosize, disabled, dropdown-direction, group-id, groups, groups-as-columns, on-enter, render-group-title,
-        transition-enter, transition-leave, transition-enter-timeout, transition-leave-timeout, uid} = @props
+        {autosize, delimiters, disabled, dropdown-direction, group-id, groups, groups-as-columns, on-enter, 
+        render-group-title, transition-enter, transition-leave, transition-enter-timeout, transition-leave-timeout, uid} = @props
 
         ReactSelectize {
 
             autosize
             class-name: "simple-select" + if !!@props.class-name then " #{@props.class-name}" else ""
+            delimiters
             disabled
             dropdown-direction
             group-id

test/common-tests.ls

@@ -370,3 +370,12 @@ module.exports = (select-class) !->
         press-return input-element
         set-input-text input-element, \apples
         press-return input-element
+
+    specify "delimiters", ->
+        select = create-select do
+            delimiters: [186, 188]
+        click-to-open-select-control
+        input-element = get-input select
+        set-input-text input-element, \app
+        key-down input-element, which: 188
+        find-rendered-DOM-component-with-class select, \simple-value

test/multi-select.ls

@@ -9,7 +9,7 @@ ReactSelectize = require \../src/index.ls
 
 # TestUtils
 {find-rendered-DOM-component-with-class, scry-rendered-DOM-components-with-class, 
-find-rendered-DOM-component-with-tag, Simulate:{change, click, focus, key-down}}:TestUtils = require \react-addons-test-utils
+find-rendered-DOM-component-with-tag, Simulate:{change, click, focus, key-down, paste}}:TestUtils = require \react-addons-test-utils
 
 # utils
 {create-select, get-input, set-input-text, get-item-text, click-to-open-select-control, find-highlighted-option, 
@@ -164,3 +164,12 @@ describe "MultiSelect", ->
         click-to-open-select-control select
         find-rendered-DOM-component-with-class select, \simple-option
 
+    specify "must create values from pasted text & override the on-paste prop", ->
+        select = create-multi-select do 
+            values-from-paste: (, , search) ~> search.split \, |> map ~> label: it, value: it
+            on-paste: (e) ~> true
+        click-to-open-select-control
+        input = get-input select
+        paste input, clipboard-data: get-data: -> "a,b,c"
+        assert select.values!.length == 3
+