- 
- {item.label}
-
- }}
-
- // renderValue :: Int -> Item -> ReactElement
- renderValue = {function(item){
- return
- x
-
-
- }}
- />
- },
-
- // getInitialState :: a -> UIState
- getInitialState: function() {
- return {emojis: [], selectedEmojis: []}
- },
-
- // componentWillMount :: a -> Void
- componentWillMount: function() {
- self = this;
- $.getJSON("http://api.github.com/emojis").done(function(result){
- self.setState({
- emojis: _.chain(result)
- .pairs()
- .map(function(arr){
- return {label: arr[0], value: arr[1]};
- })
- .value()
- });
- });
- }
-
-});
-
-render(, mountNode);
\ No newline at end of file
diff --git a/public/examples/multi/CustomRendering.ls b/public/examples/multi/CustomRendering.ls
deleted file mode 100644
index 790920e..0000000
--- a/public/examples/multi/CustomRendering.ls
+++ /dev/null
@@ -1,63 +0,0 @@
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- React.create-element MultiSelect,
- placeholder: "Select 5 emojis"
- max-values: 5
-
- # restore-on-backspace :: Item -> String
- restore-on-backspace: (.label)
- options: @state.emojis
- values: @state.selected-emojis
-
- # on-values-change :: [Item] -> (a -> Void) -> Void
- on-values-change: (selected-emojis) !~> @set-state {selected-emojis}
-
- # filter-options :: [Item] -> [Item] -> String -> [Item]
- filter-options: (options, values, search) ~>
- char-map =
- ':)' : \smile, ':(' : \frowning, \:D : \grin
- ':((' : \disappointed, \:P : \stuck_out_tongue, ';)' : \wink
- \<3 : \heart, \o.O : \confused, ':o' : \open_mouth
- \:* : \kissing, \B| : \sunglasses
- if !!char-map[search]
- options |> filter (.label == char-map[search])
- else
- options
- |> reject ({value}) -> value in map (.value), values
- |> filter ({label}) -> (label.index-of search) == 0
- |> take 100
-
- # uid :: (Eq e) => Item -> e
- uid: (.label)
-
- # render-option :: Int -> Item -> ReactElement
- render-option: ({label, value}) ~>
- div class-name: \simple-option,
- img src: value, style: margin-right: 4, vertical-align: \middle, width: 24
- span null, label
-
- # render-value :: Int -> Item -> ReactElement
- render-value: ({label, value}) ~>
- div class-name: \removeable-emoji,
- span do
- on-click: ~> @set-state do
- selected-emojis: @state.selected-emojis |> reject ~> it.value == value
- \x
- img src: value, style: margin-right: 4, vertical-align: \middle, width: 24
-
- # get-initial-state :: a -> UIState
- get-initial-state: -> emojis: [], selected-emojis: []
-
- # component-will-mount :: a -> Void
- component-will-mount: !->
- $.getJSON \https://api.github.com/emojis
- ..done (result) ~>
- @set-state do
- emojis: result
- |> obj-to-pairs
- |> map ([label, value]) -> {label, value}
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/multi/DisableSelected.jsx b/public/examples/multi/DisableSelected.jsx
deleted file mode 100644
index 6dd8b6e..0000000
--- a/public/examples/multi/DisableSelected.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-// MultiSelect = require("react-selectize").MultiSelect
-
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- var self = this,
- options = ["apple", "mango", "grapes", "melon", "strawberry"].map(function(fruit){
- return {label: fruit, value: fruit}
- });
- return
- {function(){
- if (search.trim().length == 0)
- return "Type a few characters to create a tag";
- else if (values.map(function(item){ return item.label; }).indexOf(search.trim()) != -1)
- return "Tag already exists";
- }()}
-
- }}
- />;
- },
-
- //getInitialState :: a -> UIState
- getInitialState: function(){
- return {tags: ["react", "d3"].map(function(str){
- return {label: str, value: str};
- })};
- }
-
-});
-
-render(, mountNode);
\ No newline at end of file
diff --git a/public/examples/multi/Tags.ls b/public/examples/multi/Tags.ls
deleted file mode 100644
index d6fe18d..0000000
--- a/public/examples/multi/Tags.ls
+++ /dev/null
@@ -1,44 +0,0 @@
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- React.create-element MultiSelect,
-
- 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)
-
- # on-values-change :: [Item] -> (a -> Void) -> Void
- on-values-change: (tags) !~> @set-state {tags}
-
- # 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-no-results-found :: [Item] -> String -> ReactElement
- render-no-results-found: (values, search) ~>
- div class-name: \no-results-found,
- if search.trim!.length == 0
- "Type a few characters to create a tag"
- else if (search.trim! in map (.label), values)
- "Tag already exists"
-
- # get-initial-state :: a -> UIState
- get-initial-state: ->
- tags: <[react d3]> |> map ~> label: it, value: it
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/multi/TagsBasic.jsx b/public/examples/multi/TagsBasic.jsx
deleted file mode 100644
index 8378b29..0000000
--- a/public/examples/multi/TagsBasic.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- self = this;
- return
-
-
- }
-
-});
-
-render(, mountNode)
\ No newline at end of file
diff --git a/public/examples/multi/Tether.ls b/public/examples/multi/Tether.ls
deleted file mode 100644
index 36edac3..0000000
--- a/public/examples/multi/Tether.ls
+++ /dev/null
@@ -1,28 +0,0 @@
-# {MultiSelect} = require \react-selectize
-
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- div do
- style: border: '1px solid #000', height: 100, overflow: \auto, padding: 20
-
- # RANDOM TEXT
- div do
- style: padding: 20
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-
- # MULTISELECT
- React.create-element MultiSelect,
- tether: true
- options: <[apple mango grapes melon strawberry cherry banana kiwi]> |> map ~> label: it, value: it
- placeholder: "Select fruits"
-
- # RANDOM TEXT
- div do
- style: padding: 20
- "Fusce aliquet dui tortor, imperdiet viverra augue pretium nec"
-
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/simple/ChangeCallback.jsx b/public/examples/simple/ChangeCallback.jsx
deleted file mode 100644
index 7dacb5b..0000000
--- a/public/examples/simple/ChangeCallback.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- var self = this;
- return
- Lorem ipsum dolor sit amet, consectetur adipiscing elit
-
-
-
- Fusce aliquet dui tortor, imperdiet viverra augue pretium nec
-
-
-
- (a -> Void) -> void
- onValueChange = {function(country){
- self.setState({country: country});
- }}
-
- // renderNoResultsFound :: a -> ReactElement
- renderNoResultsFound = {function() {
- return
- },
-
- // getInitialState :: a -> UIState
- getInitialState: function(){
- return {
- countries: [],
- country: undefined
- };
- },
-
- // component-will-mount :: a -> Void
- componentWillMount: function(){
- var self = this;
- this.req = $.getJSON("http://restverse.com/countries").done(function(countries){
- self.setState({countries: countries}, function(){
- self.refs.select.highlightFirstSelectableOption();
- });
- }).always(function(){
- delete self.req;
- });
- }
-
-});
-
-render(, mountNode)
\ No newline at end of file
diff --git a/public/examples/simple/ChangeCallback.ls b/public/examples/simple/ChangeCallback.ls
deleted file mode 100644
index db162b9..0000000
--- a/public/examples/simple/ChangeCallback.ls
+++ /dev/null
@@ -1,44 +0,0 @@
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- div null,
-
- React.create-element SimpleSelect,
- ref: \select
- placeholder: "Select a country"
- options: @state.countries
- value: @state.country
-
- # on-value-change :: Item -> (a -> Void) -> void
- on-value-change: (country) ~> @set-state {country}
-
- # render-no-results-found :: a -> ReactElement
- render-no-results-found: ~>
- div class-name: \no-results-found,
- if !!@req then "loading countries ..." else "No results found"
-
- if !!@state.country
- div do
- style: margin: 8
- span null, "you selected: "
- span do
- style:
- font-weight: \bold
- @state.country.label
-
- # get-initial-state :: a -> UIState
- get-initial-state: ->
- countries: []
- country: undefined
-
- # component-will-mount :: a -> Void
- component-will-mount: ->
- @req = $.getJSON "http://restverse.com/countries"
- ..done (countries) ~>
- <~ @set-state {countries}
- @refs.select.highlight-first-selectable-option!
- ..always ~> delete @req
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/simple/Children.jsx b/public/examples/simple/Children.jsx
deleted file mode 100644
index 196b35d..0000000
--- a/public/examples/simple/Children.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- var self = this;
- return
- {!!self.req ? "loading countries ..." : "No results found"}
-
- }}
- />
- {function(){
- if (!!self.state.country)
- return
- you selected:
- {self.state.country.label}
-
- }()}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
-
-});
-
-render(, mountNode)
\ No newline at end of file
diff --git a/public/examples/simple/Children.ls b/public/examples/simple/Children.ls
deleted file mode 100644
index 87a100e..0000000
--- a/public/examples/simple/Children.ls
+++ /dev/null
@@ -1,41 +0,0 @@
-SimpleSelectFactory = React.create-factory SimpleSelect
-
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- React.DOM.form do
- action: \/
-
- SimpleSelectFactory do
- placeholder: "Select a fruit"
- ref: \select
-
- # default value support
- default-value: label: \apple, value: \apple
-
- # on change callback
- on-value-change: (selected-fruit) ~>
- console.log "selected value: #{JSON.stringify selected-fruit, null, 4}"
-
- # form serialization
- name: \fruit
- serialize: (?.value) # <- optional in this case, default implementation
-
- # options from children
- <[apple mango grapes melon strawberry]> |> map ~>
- option key: it, value: it, it
-
- # clicking submit would make a GET request to the current page
- # with fruit={{selected value}} in the query string
- input do
- type: \submit
- style:
- cursor: \pointer
- height: 24
- margin-top: 10
- on-click: ~>
- alert "selected value: #{JSON.stringify @refs.select.value!, null, 4}"
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/simple/CreateFromSearch.jsx b/public/examples/simple/CreateFromSearch.jsx
deleted file mode 100644
index 7b4a568..0000000
--- a/public/examples/simple/CreateFromSearch.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- var self = this;
- return
-
-
- }}
-
- // renderValue :: Int -> Item -> ReactElement
- renderValue={function(item){
- return
- {!!item.newOption ? "Add " + item.label + " ..." : item.label}
-
-
-
- {item.label}
-
- }}>
-
-
- ()
- onValueChange = {function(make) {
- self.setState ({make: make, model: undefined}, function(){
- self.refs.models.focus();
- });
- }}
-
- // onFocus :: Item -> String -> ()
- onFocus = {function(item, reason){
- self.setState({focused: true});
- }}
-
- // onBlur :: Item -> String -> ()
- onBlur = {function(item, reason){
- self.setState({focused: false});
- }}
-
- // onEnter :: Item -> ()
- onEnter = {function(item){
- if (typeof item == "undefined")
- alert("you did not select any item");
- }}
-
- style = {this.state.focused ? {color: "#0099ff"} : {}}/>
-
-
- },
-
- // getInitialState :: a -> UIState
- getInitialState: function(){
- return {
- focused: false,
- make: undefined,
- makes: ["Bentley", "Cadillac", "Lamborghini", "Maserati", "Volkswagen"],
- model: undefined,
- models: {
- Bentley: ["Arnage", "Azure", "Continental", "Corniche", "Turbo R"],
- Cadillac: ["Allante", "Catera", "Eldorado", "Fleetwood", "Seville"],
- Lamborghini: ["Aventador", "Countach", "Diablo", "Gallardo", "Murcielago"],
- Maserati: ["Bitturbo", "Coupe", "GranTurismo", "Quattroporte", "Spyder"],
- Volkswagen: ["Beetle", "Fox", "Jetta", "Passat", "Rabbit"]
- }
- }
- }
-
-});
-
-render(, mountNode);
\ No newline at end of file
diff --git a/public/examples/simple/EventListeners.ls b/public/examples/simple/EventListeners.ls
deleted file mode 100644
index 412286e..0000000
--- a/public/examples/simple/EventListeners.ls
+++ /dev/null
@@ -1,60 +0,0 @@
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- div null,
-
- # MAKES
- React.create-element SimpleSelect,
- placeholder: "Select a make"
- options: @state.makes |> map ~> label: it, value: it
- value: @state.make
-
- # on-value-change :: Item -> (a -> Void) -> Void
- on-value-change: (make) !~>
- @set-state {make, model: undefined}, ~> @refs.models.focus!
-
- # on-focus :: Item -> String -> Void
- on-focus: (item, reason) ~>
- @set-state focused: true
-
- # on-blur :: Item -> String -> Void
- on-blur: (item, reason) !~>
- @set-state focused:false
-
- # on-enter :: Item -> Void
- on-enter: (item) !~>
- if typeof item == \undefined
- alert 'you did not select any item'
-
- style: if @state.focused then color: "#0099ff" else {}
-
- # MODELS
- React.create-element SimpleSelect,
- ref: \models
- placeholder: "Select a model"
- options: (@state.models?[@state?.make?.label] ? []) |> map ~> label: it, value: it
- value: @state.model
-
- # disabled :: Boolean
- disabled: typeof @state.make == \undefined
-
- on-value-change: (model) ~> @set-state {model}
- style: margin-top: 20, opacity: if !!@state.make then 1 else 0.5
-
- # get-initial-state :: a -> UIState
- get-initial-state: ->
- focused: false
- make: undefined
- makes: ["Bentley", "Cadillac", "Lamborghini", "Maserati", "Volkswagen"]
- model: undefined
- models:
- Bentley: ["Arnage", "Azure", "Continental", "Corniche", "Turbo R"]
- Cadillac: ["Allante", "Catera", "Eldorado", "Fleetwood", "Seville"]
- Lamborghini: ["Aventador", "Countach", "Diablo", "Gallardo", "Murcielago"]
- Maserati: ["Bitturbo", "Coupe", "GranTurismo", "Quattroporte", "Spyder"]
- Volkswagen: ["Beetle", "Fox", "Jetta", "Passat", "Rabbit"]
-
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/simple/RemoteOptions.jsx b/public/examples/simple/RemoteOptions.jsx
deleted file mode 100644
index 97afa6c..0000000
--- a/public/examples/simple/RemoteOptions.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- var self = this;
- return
-
- }}
-
- renderValue = {function(item){
- return
- {item.name}
- {"@" + item.version}
-
-
- {item.homepage}
-
-
- {item.name}
- {"@" + item.version}
-
- }}
-
- // render-no-results-found :: Item -> String -> ReactElement
- renderNoResultsFound = {function(value, search){
- return
- {typeof self.req == "undefined" && self.state.search.length == 0 ?
- "type a few characters to kick off remote search":"No results found"}
-
- }}/>
- },
-
- // getInitialState :: a -> UIState
- getInitialState: function(){
- return {
- libraries: [],
- search: ""
- }
- }
-
-});
-
-render(, mountNode);
\ No newline at end of file
diff --git a/public/examples/simple/RemoteOptions.ls b/public/examples/simple/RemoteOptions.ls
deleted file mode 100644
index 6c0aa17..0000000
--- a/public/examples/simple/RemoteOptions.ls
+++ /dev/null
@@ -1,59 +0,0 @@
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- React.create-element SimpleSelect,
- ref: \select
- placeholder: "Select a library"
- options: @state.libraries
- search: @state.search
-
- # on-search-change :: String -> (a -> Void) -> Void
- on-search-change: (search) !~>
- @set-state {search}
-
- if search.length > 0
-
- if !!@req
- @req.abort
-
- @req = $.getJSON "http://api.cdnjs.com/libraries?fields=version,homepage&search=#{search}"
- ..done ({results}) ~>
- @set-state do
- libraries: take 50, (results ? [])
- ~> @refs.select.highlight-first-selectable-option!
- delete @req
-
- # disable client side filtering
- # filter-options :: [Item] -> String -> [Item]
- filter-options: (options, search) -> options
-
- uid: (.name)
-
- render-option: ({name, latest, version, homepage}) ~>
- div class-name: \simple-option, style: font-size: 12,
- div null,
- span style: font-weight: \bold, name
- span null, "@#{version}"
- div null,
- a {href: homepage, target: \blank}, homepage
-
- render-value: ({name, version}) ~>
- div class-name: \simple-value,
- span style: font-weight: \bold, name
- span null, "@#{version}"
-
- # render-no-results-found :: Item -> String -> ReactElement
- render-no-results-found: (value, search) ~>
- div class-name: \no-results-found, style: font-size: 13,
- if typeof @req == \undefined and @state.search.length == 0
- "type a few characters to kick off remote search"
- else
- "No results found"
-
- get-initial-state: ->
- libraries: []
- search: ""
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/simple/RestoreOnBackspace.jsx b/public/examples/simple/RestoreOnBackspace.jsx
deleted file mode 100644
index 7e60841..0000000
--- a/public/examples/simple/RestoreOnBackspace.jsx
+++ /dev/null
@@ -1,21 +0,0 @@
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- var self = this,
- options = ["apple", "mango", "grapes", "melon", "strawberry"].map(function(fruit){
- return {label: fruit, value: fruit}
- });
- return
-
- }}
- />
- },
-
- // getInitialState :: a -> UIState
- getInitialState: function() {
- return {search: ""}
- }
-
-});
-
-render(, mountNode)
\ No newline at end of file
diff --git a/public/examples/simple/SearchHighlighting.ls b/public/examples/simple/SearchHighlighting.ls
deleted file mode 100644
index 6741183..0000000
--- a/public/examples/simple/SearchHighlighting.ls
+++ /dev/null
@@ -1,42 +0,0 @@
-# {partition-string} = require \prelude-extension
-# {HighlightedText, SimpleSelect} = require \ReactSelectize
-
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- React.create-element SimpleSelect,
-
- # we use state for search, so we can access it inside the options map function below
- search: @state.search
- on-search-change: (search) ~> @set-state {search}
-
- # the partition-string method from prelude-extension library has the following signature:
- # paritition-string :: String -> String -> [[Int, Int, Boolean]]
- options: <[apple mango grapes melon strawberry]> |> map ~>
- label: it, value: it, label-partitions: partition-string it, @state.search
-
- # we add the search to the uid property of each option
- # to re-render it whenever the search changes
- # uid :: (Equatable e) => Item -> e
- uid: ~> "#{it.value}#{@state.search}"
-
- # here we use the HighlightedText component to render the result of partition-string
- # render-option :: Item -> ReactElement
- render-option: ({label, label-partitions}) ~>
- div class-name: \simple-option,
- React.create-element HighlightedText,
- partitions: label-partitions,
- text: label
- highlight-style:
- background-color: "rgba(255,255,0,0.4)"
- font-weight: \bold
-
- placeholder: "Select a fruit"
-
- # get-initial-state :: a -> UIState
- get-initial-state: ->
- search: ""
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/simple/Selectability.jsx b/public/examples/simple/Selectability.jsx
deleted file mode 100644
index bec870f..0000000
--- a/public/examples/simple/Selectability.jsx
+++ /dev/null
@@ -1,45 +0,0 @@
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- return
- {item.label}
- {outOfStock}
-
- }}
- />
- },
-
- // getInitialState :: a -> UIState
- getInitialState: function(){
- return {
- models: [16, 64, 128].reduce(function(memo, size){
- return memo.concat(["Space Grey", "Silver", "Gold"].map(function(color){
- label = size + "GB " + color;
- return {label: label, value: label, selectable: Math.random() > 0.5}
- }))
- }, [])
- }
- }
-
-});
-
-render(, mountNode)
\ No newline at end of file
diff --git a/public/examples/simple/Selectability.ls b/public/examples/simple/Selectability.ls
deleted file mode 100644
index f53b9ff..0000000
--- a/public/examples/simple/Selectability.ls
+++ /dev/null
@@ -1,38 +0,0 @@
-create-react-class = require \create-react-class
-Form = create-react-class do
-
- # render :: a -> ReactElement
- render: ->
- React.create-element SimpleSelect,
- placeholder: "Select an iPhone model"
- options: @state.models
-
- # render-option :: Int -> Item -> ReactElement
- render-option: ({label, value, selectable}) ~>
- div do
- class-name: \simple-option
- style:
- | selectable => {}
- | _ =>
- background-color: '#f8f8f8'
- color: '#999'
- cursor: \default
- font-style: \oblique
- text-shadow: "0px 1px 0px white"
- span null, label
- if !selectable
- span do
- style:
- color: '#c5695c'
- float: \right
- font-size: 12
- "(out of stock)"
-
- get-initial-state: ->
- models: [16, 64, 128] |> concat-map (size) ->
- ["Space Grey", "Silver", "Gold"] |> map (color) ->
- label: "#{size}GB #{color}"
- value: "#{size}#{color}"
- selectable: Math.random! < 0.5
-
-render (React.create-element Form, null), mount-node
\ No newline at end of file
diff --git a/public/examples/simple/SimpleSelect.jsx b/public/examples/simple/SimpleSelect.jsx
deleted file mode 100644
index 1463950..0000000
--- a/public/examples/simple/SimpleSelect.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// SimpleSelect = require("react-selectize").SimpleSelect
-
-Form = createReactClass({
-
- // render :: a -> ReactElement
- render: function(){
- var self = this,
- options = ["apple", "mango", "grapes", "melon", "strawberry"].map(function(fruit){
- return {label: fruit, value: fruit}
- });
- return
-
-
-
-
-
-
-
-
diff --git a/src/DivWrapper.js b/src/DivWrapper.js
deleted file mode 100644
index a2c4544..0000000
--- a/src/DivWrapper.js
+++ /dev/null
@@ -1,42 +0,0 @@
-(function(){
- var div, React, DivWrapper;
- div = require('react-dom-factories').div;
- React = require('react');
- module.exports = DivWrapper = (function(superclass){
- var prototype = extend$((import$(DivWrapper, superclass).displayName = 'DivWrapper', DivWrapper), superclass).prototype, constructor = DivWrapper;
- DivWrapper.defaultProps = {
- className: "",
- onHeightChange: function(){}
- };
- DivWrapper.prototype.render = function(){
- return div({
- className: this.props.className,
- ref: 'dropdown'
- }, this.props.children);
- };
- DivWrapper.prototype.componentDidMount = function(){
- this.props.onHeightChange(this.refs.dropdown.offsetHeight);
- };
- DivWrapper.prototype.componentDidUpdate = function(){
- this.props.onHeightChange(this.refs.dropdown.offsetHeight);
- };
- DivWrapper.prototype.componentWillUnmount = function(){
- this.props.onHeightChange(0);
- };
- function DivWrapper(){
- DivWrapper.superclass.apply(this, arguments);
- }
- return DivWrapper;
- }(React.Component));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/DivWrapper.ls b/src/DivWrapper.ls
index fa4ccab..1f4bb61 100644
--- a/src/DivWrapper.ls
+++ b/src/DivWrapper.ls
@@ -1,5 +1,6 @@
-{div} = require \react-dom-factories
-React = require \react
+{create-factory} = require \./utils
+{create-ref}:React = require \react
+div = create-factory \div
# used to detect when the dropdown has been added/removed from dom,
# so we can adjust the height of the parent element
@@ -10,23 +11,27 @@ module.exports = class DivWrapper extends React.Component
class-name: ""
on-height-change: (!->) # Number -> Void
+ (props) ->
+ super(props)
+ @dropdown-ref = create-ref!
+
# render :: () -> ReactElement
render: ->
div do
class-name: @props.class-name
- ref: \dropdown
+ ref: @dropdown-ref
@props.children
# component-did-mount :: () -> Void
component-did-mount: !->
@props.on-height-change do
- @refs.dropdown .offset-height
+ @dropdown-ref.current.offset-height
# component-did-update :: () -> Void
component-did-update: !->
@props.on-height-change do
- @refs.dropdown .offset-height
+ @dropdown-ref.current.offset-height
# component-will-unmount :: () -> Void
component-will-unmount: !->
- @props.on-height-change 0
\ No newline at end of file
+ @props.on-height-change 0
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
deleted file mode 100644
index 6752ef9..0000000
--- a/src/DropdownMenu.js
+++ /dev/null
@@ -1,380 +0,0 @@
-(function(){
- var ref$, filter, id, map, isEqualToObject, React, createFactory, div, input, span, findDOMNode, ReactCSSTransitionGroup, ReactTether, DivWrapper, OptionWrapper, cancelEvent, classNameFromObject, DropdownMenu;
- ref$ = require('prelude-ls'), filter = ref$.filter, id = ref$.id, map = ref$.map;
- isEqualToObject = require('prelude-extension').isEqualToObject;
- React = require('react'), createFactory = React.createFactory;
- ref$ = require('react-dom-factories'), div = ref$.div, input = ref$.input, span = ref$.span;
- findDOMNode = require('react-dom').findDOMNode;
- ReactCSSTransitionGroup = createFactory(require('react-transition-group/CSSTransition'));
- ReactTether = createFactory(require('./ReactTether'));
- DivWrapper = createFactory(require('./DivWrapper'));
- OptionWrapper = createFactory(require('./OptionWrapper'));
- ref$ = require('./utils'), cancelEvent = ref$.cancelEvent, classNameFromObject = ref$.classNameFromObject;
- module.exports = DropdownMenu = (function(superclass){
- var prototype = extend$((import$(DropdownMenu, superclass).displayName = 'DropdownMenu', DropdownMenu), superclass).prototype, constructor = DropdownMenu;
- DropdownMenu.defaultProps = {
- className: "",
- dropdownDirection: 1,
- groupId: function(it){
- return it.groupId;
- },
- groupsAsColumns: false,
- highlightedUid: undefined,
- onHighlightedUidChange: function(uid, callback){},
- onOptionClick: function(uid){},
- onScrollLockChange: function(scrollLock){},
- options: [],
- renderNoResultsFound: function(){
- return div({
- className: 'no-results-found'
- }, "No results found");
- },
- renderGroupTitle: function(index, arg$){
- var groupId, title;
- if (arg$ != null) {
- groupId = arg$.groupId, title = arg$.title;
- }
- return div({
- className: 'simple-group-title',
- key: groupId
- }, title);
- },
- renderOption: function(arg$){
- var label, newOption, selectable, isSelectable;
- if (arg$ != null) {
- label = arg$.label, newOption = arg$.newOption, selectable = arg$.selectable;
- }
- isSelectable = typeof selectable === 'undefined' || selectable;
- return div({
- className: "simple-option " + (isSelectable ? '' : 'not-selectable')
- }, span(null, !!newOption ? "Add " + label + " ..." : label));
- },
- scrollLock: false,
- style: {},
- tether: false,
- tetherProps: {},
- theme: 'default',
- transitionEnter: false,
- transitionLeave: false,
- transitionEnterTimeout: 200,
- transitionLeaveTimeout: 200,
- uid: id
- };
- DropdownMenu.prototype.render = function(){
- var dynamicClassName, ref$;
- dynamicClassName = classNameFromObject((ref$ = {}, ref$[this.props.theme + ""] = 1, ref$[this.props.className + ""] = 1, ref$.flipped = this.props.dropdownDirection === -1, ref$.tethered = this.props.tether, ref$));
- if (this.props.tether) {
- return ReactTether((ref$ = import$({}, this.props.tetherProps), ref$.options = {
- attachment: "top left",
- targetAttachment: "bottom left",
- constraints: [{
- to: 'scrollParent'
- }]
- }, ref$), this.renderAnimatedDropdown({
- dynamicClassName: dynamicClassName
- }));
- } else {
- return this.renderAnimatedDropdown({
- dynamicClassName: dynamicClassName
- });
- }
- };
- DropdownMenu.prototype.renderAnimatedDropdown = function(computedState){
- var dynamicClassName;
- dynamicClassName = computedState.dynamicClassName;
- if (!!this.props.transitionEnter || !!this.props.transitionLeave) {
- return ReactCSSTransitionGroup({
- ref: 'dropdownMenuWrapper',
- component: 'div',
- transitionName: 'custom',
- transitionEnter: this.props.transitionEnter,
- transitionLeave: this.props.transitionLeave,
- transitionEnterTimeout: this.props.transitionEnterTimeout,
- transitionLeaveTimeout: this.props.transitionLeaveTimeout,
- className: "dropdown-menu-wrapper " + dynamicClassName
- }, this.renderDropdown(computedState));
- } else {
- return this.renderDropdown(computedState);
- }
- };
- DropdownMenu.prototype.renderOptions = function(options){
- var this$ = this;
- return map(function(index){
- var option, uid;
- option = options[index];
- uid = this$.props.uid(option);
- return OptionWrapper(import$({
- uid: uid,
- ref: function(element){
- this$["option-" + this$.uidToString(uid)] = element;
- },
- key: this$.uidToString(uid),
- item: option,
- highlight: isEqualToObject(this$.props.highlightedUid, uid),
- selectable: option != null ? option.selectable : void 8,
- onMouseMove: function(arg$){
- var currentTarget;
- currentTarget = arg$.currentTarget;
- if (this$.props.scrollLock) {
- this$.props.onScrollLockChange(false);
- }
- },
- onMouseOut: function(){
- if (!this$.props.scrollLock) {
- this$.props.onHighlightedUidChange(undefined, function(){});
- }
- },
- renderItem: this$.props.renderOption
- }, (function(){
- switch (false) {
- case !(typeof (option != null ? option.selectable : void 8) === 'boolean' && !option.selectable):
- return {
- onClick: cancelEvent
- };
- default:
- return {
- onClick: function(){
- if (!this$.props.scrollLock) {
- this$.props.onHighlightedUidChange(uid, function(){});
- }
- this$.props.onOptionClick(this$.props.highlightedUid);
- },
- onMouseOver: function(arg$){
- var currentTarget;
- currentTarget = arg$.currentTarget;
- if ('ontouchstart' in window) {
- return false;
- }
- if (!this$.props.scrollLock) {
- this$.props.onHighlightedUidChange(uid, function(){});
- }
- }
- };
- }
- }())));
- })(
- (function(){
- var i$, to$, results$ = [];
- for (i$ = 0, to$ = options.length; i$ < to$; ++i$) {
- results$.push(i$);
- }
- return results$;
- }()));
- };
- DropdownMenu.prototype.renderDropdown = function(arg$){
- var dynamicClassName, ref$, ref1$, groups, this$ = this;
- dynamicClassName = arg$.dynamicClassName;
- if (this.props.open) {
- return DivWrapper({
- className: "dropdown-menu " + dynamicClassName,
- ref: function(element){
- !!element && (this$.dropdownMenu = element);
- },
- onHeightChange: function(height){
- if (this$.refs.dropdownMenuWrapper) {
- findDOMNode(this$.refs.dropdownMenuWrapper).style.height = height + "px";
- }
- }
- }, this.props.options.length === 0
- ? this.props.renderNoResultsFound()
- : ((ref$ = this.props) != null ? (ref1$ = ref$.groups) != null ? ref1$.length : void 8 : void 8) > 0
- ? (groups = map(function(index){
- var group, groupId, options;
- group = this$.props.groups[index], groupId = group.groupId;
- options = filter(function(it){
- return this$.props.groupId(it) === groupId;
- })(
- this$.props.options);
- return {
- index: index,
- group: group,
- options: options
- };
- })(
- (function(){
- var i$, to$, results$ = [];
- for (i$ = 0, to$ = this.props.groups.length; i$ < to$; ++i$) {
- results$.push(i$);
- }
- return results$;
- }.call(this))), div({
- className: "groups " + (!!this.props.groupsAsColumns ? 'as-columns' : '')
- }, map(function(arg$){
- var index, group, groupId, options;
- index = arg$.index, group = arg$.group, groupId = group.groupId, options = arg$.options;
- return div({
- key: groupId
- }, this$.props.renderGroupTitle(index, group, options), div({
- className: 'options'
- }, this$.renderOptions(options)));
- })(
- filter(function(it){
- return it.options.length > 0;
- })(
- groups))))
- : this.renderOptions(this.props.options));
- } else {
- return null;
- }
- };
- DropdownMenu.prototype.componentDidUpdate = function(prevProps){
- var x$, dropdownMenu, ref$;
- if (!deepEq$(prevProps.dropdownDirection, this.props.dropdownDirection, '===') && this.props.open) {
- x$ = dropdownMenu = findDOMNode((ref$ = this.refs.dropdownMenuWrapper) != null
- ? ref$
- : this.dropdownMenu);
- if (x$ != null) {
- x$.style.bottom = (function(){
- switch (false) {
- case this.props.dropdownDirection !== -1:
- return (this.props.bottomAnchor().offsetHeight + dropdownMenu.style.marginBottom) + "px";
- default:
- return "";
- }
- }.call(this));
- }
- }
- };
- DropdownMenu.prototype.highlightAndScrollToOption = function(index, callback){
- var uid, this$ = this;
- callback == null && (callback = function(){});
- uid = this.props.uid(this.props.options[index]);
- this.props.onHighlightedUidChange(uid, function(){
- var ref$, optionElement, parentElement, optionHeight;
- if ((ref$ = findDOMNode(this$ != null ? this$["option-" + this$.uidToString(uid)] : void 8)) != null) {
- optionElement = ref$;
- }
- if (!!optionElement) {
- parentElement = optionElement.parentElement;
- optionHeight = optionElement.offsetHeight - 1;
- if (optionElement.offsetTop - parentElement.scrollTop >= parentElement.offsetHeight) {
- parentElement.scrollTop = optionElement.offsetTop - parentElement.offsetHeight + optionHeight;
- } else if (optionElement.offsetTop - parentElement.scrollTop + optionHeight <= 0) {
- parentElement.scrollTop = optionElement.offsetTop;
- }
- }
- return callback();
- });
- };
- DropdownMenu.prototype.highlightAndScrollToSelectableOption = function(index, direction, callback){
- var option, ref$, ref1$;
- callback == null && (callback = function(){});
- if (index < 0 || index >= this.props.options.length) {
- this.props.onHighlightedUidChange(undefined, function(){
- return callback(false);
- });
- } else {
- option = (ref$ = this.props) != null ? (ref1$ = ref$.options) != null ? ref1$[index] : void 8 : void 8;
- if (typeof (option != null ? option.selectable : void 8) === 'boolean' && !option.selectable) {
- this.highlightAndScrollToSelectableOption(index + direction, direction, callback);
- } else {
- this.highlightAndScrollToOption(index, function(){
- return callback(true);
- });
- }
- }
- };
- DropdownMenu.prototype.uidToString = function(uid){
- return (typeof uid === 'object' ? JSON.stringify : id)(uid);
- };
- function DropdownMenu(){
- DropdownMenu.superclass.apply(this, arguments);
- }
- return DropdownMenu;
- }(React.PureComponent));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
- function deepEq$(x, y, type){
- var toString = {}.toString, hasOwnProperty = {}.hasOwnProperty,
- has = function (obj, key) { return hasOwnProperty.call(obj, key); };
- var first = true;
- return eq(x, y, []);
- function eq(a, b, stack) {
- var className, length, size, result, alength, blength, r, key, ref, sizeB;
- if (a == null || b == null) { return a === b; }
- if (a.__placeholder__ || b.__placeholder__) { return true; }
- if (a === b) { return a !== 0 || 1 / a == 1 / b; }
- className = toString.call(a);
- if (toString.call(b) != className) { return false; }
- switch (className) {
- case '[object String]': return a == String(b);
- case '[object Number]':
- return a != +a ? b != +b : (a == 0 ? 1 / a == 1 / b : a == +b);
- case '[object Date]':
- case '[object Boolean]':
- return +a == +b;
- case '[object RegExp]':
- return a.source == b.source &&
- a.global == b.global &&
- a.multiline == b.multiline &&
- a.ignoreCase == b.ignoreCase;
- }
- if (typeof a != 'object' || typeof b != 'object') { return false; }
- length = stack.length;
- while (length--) { if (stack[length] == a) { return true; } }
- stack.push(a);
- size = 0;
- result = true;
- if (className == '[object Array]') {
- alength = a.length;
- blength = b.length;
- if (first) {
- switch (type) {
- case '===': result = alength === blength; break;
- case '<==': result = alength <= blength; break;
- case '<<=': result = alength < blength; break;
- }
- size = alength;
- first = false;
- } else {
- result = alength === blength;
- size = alength;
- }
- if (result) {
- while (size--) {
- if (!(result = size in a == size in b && eq(a[size], b[size], stack))){ break; }
- }
- }
- } else {
- if ('constructor' in a != 'constructor' in b || a.constructor != b.constructor) {
- return false;
- }
- for (key in a) {
- if (has(a, key)) {
- size++;
- if (!(result = has(b, key) && eq(a[key], b[key], stack))) { break; }
- }
- }
- if (result) {
- sizeB = 0;
- for (key in b) {
- if (has(b, key)) { ++sizeB; }
- }
- if (first) {
- if (type === '<<=') {
- result = size < sizeB;
- } else if (type === '<==') {
- result = size <= sizeB
- } else {
- result = size === sizeB;
- }
- } else {
- first = false;
- result = size === sizeB;
- }
- }
- }
- stack.pop();
- return result;
- }
- }
-}).call(this);
diff --git a/src/DropdownMenu.ls b/src/DropdownMenu.ls
index af51846..654527e 100644
--- a/src/DropdownMenu.ls
+++ b/src/DropdownMenu.ls
@@ -2,8 +2,11 @@
{filter, id, map} = require \prelude-ls
{is-equal-to-object} = require \prelude-extension
-{create-factory}:React = require \react
-{div, input, span} = require \react-dom-factories
+{create-factory} = require \./utils
+{create-ref}:React = require \react
+div = create-factory \div
+input = create-factory \input
+span = create-factory \span
{find-DOM-node} = require \react-dom
ReactCSSTransitionGroup = create-factory require \react-transition-group/CSSTransition
ReactTether = create-factory require \./ReactTether
@@ -12,7 +15,6 @@ OptionWrapper = create-factory require \./OptionWrapper
{cancel-event, class-name-from-object} = require \./utils
module.exports = class DropdownMenu extends React.PureComponent
-
# get-default-props :: () -> Props
@default-props =
# bottom-anchor :: () -> ReactElement
@@ -58,6 +60,11 @@ module.exports = class DropdownMenu extends React.PureComponent
transition-leave-timeout: 200
uid: id # (Eq e) => Item -> e
+ (props) ->
+ super(props)
+ @dropdown-menu-wrapper-ref = create-ref!
+
+
# render :: () -> ReactElement
render: ->
dynamic-class-name = class-name-from-object do
@@ -85,7 +92,7 @@ module.exports = class DropdownMenu extends React.PureComponent
render-animated-dropdown: ({dynamic-class-name}:computed-state) ->
if !!@props.transition-enter or !!@props.transition-leave
ReactCSSTransitionGroup do
- ref: \dropdownMenuWrapper
+ ref: @dropdown-menu-wrapper-ref
component: \div
transition-name: \custom
transition-enter: @props.transition-enter
@@ -98,7 +105,7 @@ module.exports = class DropdownMenu extends React.PureComponent
else
@render-dropdown computed-state
- # render-options :: [Item] -> [ReactEleent]
+ # render-options :: [Item] -> [ReactElement]
render-options: (options) ->
[0 til options.length] |> map (index) ~>
option = options[index]
@@ -147,8 +154,8 @@ module.exports = class DropdownMenu extends React.PureComponent
# on-height-change :: Number -> ()
on-height-change: (height) !~>
- if @refs.dropdown-menu-wrapper
- find-DOM-node @refs.dropdown-menu-wrapper .style.height = "#{height}px"
+ if @dropdown-menu-wrapper-ref.current
+ @dropdown-menu-wrapper-ref.current.style.height = "#{height}px"
# NO RESULT FOUND
if @props.options.length == 0
@@ -188,7 +195,7 @@ module.exports = class DropdownMenu extends React.PureComponent
# component-did-update :: () -> ()
component-did-update: (prev-props) !->
if prev-props.dropdown-direction !== @props.dropdown-direction and @props.open
- dropdown-menu = find-DOM-node @refs.dropdown-menu-wrapper ? @dropdown-menu
+ dropdown-menu = @dropdown-menu-wrapper-ref.current ? @dropdown-menu
..?.style.bottom = switch
| @props.dropdown-direction == -1 =>
"#{@props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom}px"
diff --git a/src/HighlightedText.js b/src/HighlightedText.js
deleted file mode 100644
index 50e7715..0000000
--- a/src/HighlightedText.js
+++ /dev/null
@@ -1,48 +0,0 @@
-(function(){
- var React, ref$, div, span, map, HighlightedText;
- React = require('react');
- ref$ = require('react-dom-factories'), div = ref$.div, span = ref$.span;
- map = require('prelude-ls').map;
- module.exports = HighlightedText = (function(superclass){
- var prototype = extend$((import$(HighlightedText, superclass).displayName = 'HighlightedText', HighlightedText), superclass).prototype, constructor = HighlightedText;
- HighlightedText.defaultProps = {
- partitions: [],
- text: "",
- style: {},
- highlightStyle: {}
- };
- HighlightedText.prototype.render = function(){
- var this$ = this;
- return div({
- className: 'highlighted-text',
- style: this.props.style
- }, map(function(arg$){
- var start, end, highlight;
- start = arg$[0], end = arg$[1], highlight = arg$[2];
- return span({
- key: this$.props.text + "" + start + end + highlight,
- className: highlight ? 'highlight' : '',
- style: highlight
- ? this$.props.highlightStyle
- : {}
- }, this$.props.text.substring(start, end));
- })(
- this.props.partitions));
- };
- function HighlightedText(){
- HighlightedText.superclass.apply(this, arguments);
- }
- return HighlightedText;
- }(React.Component));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/HighlightedText.ls b/src/HighlightedText.ls
index 453b128..9d71209 100644
--- a/src/HighlightedText.ls
+++ b/src/HighlightedText.ls
@@ -1,7 +1,8 @@
React = require \react
-{div, span} = require \react-dom-factories
{map} = require \prelude-ls
-
+{create-factory} = require \./utils
+div = create-factory \div
+span = create-factory \span
module.exports = class HighlightedText extends React.Component
# get-default-props :: a -> Props
@@ -21,4 +22,4 @@ module.exports = class HighlightedText extends React.Component
key: "#{@props.text}#{start}#{end}#{highlight}"
class-name: if highlight then \highlight else ''
style: if highlight then @props.highlight-style else {}
- @props.text.substring start, end
\ No newline at end of file
+ @props.text.substring start, end
diff --git a/src/MultiSelect.js b/src/MultiSelect.js
deleted file mode 100644
index faba26e..0000000
--- a/src/MultiSelect.js
+++ /dev/null
@@ -1,361 +0,0 @@
-(function(){
- var ref$, all, any, camelize, difference, drop, filter, find, findIndex, id, last, map, reject, isEqualToObject, React, createFactory, div, img, span, ReactSelectize, cancelEvent, MultiSelect, toString$ = {}.toString;
- ref$ = require('prelude-ls'), all = ref$.all, any = ref$.any, camelize = ref$.camelize, difference = ref$.difference, drop = ref$.drop, filter = ref$.filter, find = ref$.find, findIndex = ref$.findIndex, id = ref$.id, last = ref$.last, map = ref$.map, reject = ref$.reject;
- isEqualToObject = require('prelude-extension').isEqualToObject;
- React = require('react'), createFactory = React.createFactory;
- ref$ = require('react-dom-factories'), div = ref$.div, img = ref$.img, span = ref$.span;
- ReactSelectize = createFactory(require('./ReactSelectize'));
- cancelEvent = require('./utils').cancelEvent;
- module.exports = MultiSelect = (function(superclass){
- var prototype = extend$((import$(MultiSelect, superclass).displayName = 'MultiSelect', MultiSelect), superclass).prototype, constructor = MultiSelect;
- MultiSelect.defaultProps = {
- className: "",
- closeOnSelect: false,
- defaultValues: [],
- delimiters: [],
- filterOptions: curry$(function(options, values, search){
- return filter(function(it){
- return it.label.toLowerCase().trim().indexOf(search.toLowerCase().trim()) > -1;
- })(
- reject(function(it){
- return in$(it.label.trim(), map(function(it){
- return it.label.trim();
- }, values != null
- ? values
- : []));
- })(
- options));
- }),
- firstOptionIndexToHighlight: id,
- onBlur: function(e){},
- onFocus: function(e){},
- onPaste: function(e){
- true;
- },
- serialize: map(function(it){
- return it != null ? it.value : void 8;
- }),
- tether: false
- };
- function MultiSelect(props){
- MultiSelect.superclass.call(this, props);
- this.state = {
- anchor: !!this.props.values ? last(this.props.values) : undefined,
- highlightedUid: undefined,
- open: false,
- scrollLock: false,
- search: "",
- values: this.props.defaultValues
- };
- }
- MultiSelect.prototype.render = function(){
- var ref$, anchor, filteredOptions, highlightedUid, onAnchorChange, onOpenChange, onHighlightedUidChange, onSearchChange, onValuesChange, search, open, options, values, autofocus, autosize, cancelKeyboardEventOnSelection, delimiters, disabled, dropdownDirection, groupId, groups, groupsAsColumns, hideResetButton, inputProps, name, onKeyboardSelectionFailed, renderToggleButton, renderGroupTitle, renderResetButton, serialize, tether, tetherProps, theme, transitionEnter, transitionLeave, transitionEnterTimeout, transitionLeaveTimeout, uid, this$ = this;
- ref$ = this.getComputedState(), anchor = ref$.anchor, filteredOptions = ref$.filteredOptions, highlightedUid = ref$.highlightedUid, onAnchorChange = ref$.onAnchorChange, onOpenChange = ref$.onOpenChange, onHighlightedUidChange = ref$.onHighlightedUidChange, onSearchChange = ref$.onSearchChange, onValuesChange = ref$.onValuesChange, search = ref$.search, open = ref$.open, options = ref$.options, values = ref$.values;
- if ((ref$ = this.props) != null) {
- autofocus = ref$.autofocus, autosize = ref$.autosize, cancelKeyboardEventOnSelection = ref$.cancelKeyboardEventOnSelection, delimiters = ref$.delimiters, disabled = ref$.disabled, dropdownDirection = ref$.dropdownDirection, groupId = ref$.groupId, groups = ref$.groups, groupsAsColumns = ref$.groupsAsColumns, hideResetButton = ref$.hideResetButton, inputProps = ref$.inputProps, name = ref$.name, onKeyboardSelectionFailed = ref$.onKeyboardSelectionFailed, renderToggleButton = ref$.renderToggleButton, renderGroupTitle = ref$.renderGroupTitle, renderResetButton = ref$.renderResetButton, serialize = ref$.serialize, tether = ref$.tether, tetherProps = ref$.tetherProps, theme = ref$.theme, transitionEnter = ref$.transitionEnter, transitionLeave = ref$.transitionLeave, transitionEnterTimeout = ref$.transitionEnterTimeout, transitionLeaveTimeout = ref$.transitionLeaveTimeout, uid = ref$.uid;
- }
- return ReactSelectize(import$(import$({
- autofocus: autofocus,
- autosize: autosize,
- cancelKeyboardEventOnSelection: cancelKeyboardEventOnSelection,
- className: "multi-select " + this.props.className,
- delimiters: delimiters,
- disabled: disabled,
- dropdownDirection: dropdownDirection,
- groupId: groupId,
- groups: groups,
- groupsAsColumns: groupsAsColumns,
- hideResetButton: hideResetButton,
- highlightedUid: highlightedUid,
- onHighlightedUidChange: onHighlightedUidChange,
- inputProps: inputProps,
- name: name,
- onKeyboardSelectionFailed: onKeyboardSelectionFailed,
- renderGroupTitle: renderGroupTitle,
- renderResetButton: renderResetButton,
- renderToggleButton: renderToggleButton,
- scrollLock: this.state.scrollLock,
- onScrollLockChange: function(scrollLock){
- return this$.setState({
- scrollLock: scrollLock
- });
- },
- tether: tether,
- tetherProps: tetherProps,
- theme: theme,
- transitionEnter: transitionEnter,
- transitionEnterTimeout: transitionEnterTimeout,
- transitionLeave: transitionLeave,
- transitionLeaveTimeout: transitionLeaveTimeout,
- uid: uid,
- ref: 'select',
- anchor: anchor,
- onAnchorChange: onAnchorChange,
- open: open,
- onOpenChange: onOpenChange,
- options: options,
- renderOption: this.props.renderOption,
- firstOptionIndexToHighlight: function(){
- return this$.firstOptionIndexToHighlight(options);
- },
- search: search,
- onSearchChange: function(search, callback){
- return onSearchChange(!!this$.props.maxValues && values.length >= this$.props.maxValues ? "" : search, callback);
- },
- values: values,
- onValuesChange: function(newValues, callback){
- return onValuesChange(newValues, function(){
- callback();
- if (this$.props.closeOnSelect || (!!this$.props.maxValues && this$.values().length >= this$.props.maxValues)) {
- return onOpenChange(false, function(){});
- }
- });
- },
- renderValue: this.props.renderValue,
- serialize: serialize,
- onBlur: function(e){
- onSearchChange("", function(){
- return this$.props.onBlur({
- open: open,
- values: values,
- originalEvent: e
- });
- });
- },
- onFocus: function(e){
- this$.props.onFocus({
- open: open,
- values: values,
- originalEvent: e
- });
- },
- onPaste: (function(){
- var ref$;
- switch (false) {
- case typeof ((ref$ = this.props) != null ? ref$.valuesFromPaste : void 8) !== 'undefined':
- return this.props.onPaste;
- default:
- return function(e){
- var clipboardData;
- clipboardData = e.clipboardData;
- (function(){
- var newValues;
- newValues = values.concat(this$.props.valuesFromPaste(options, values, clipboardData.getData('text')));
- return onValuesChange(newValues, function(){
- return onAnchorChange(last(newValues));
- });
- })();
- return cancelEvent(e);
- };
- }
- }.call(this)),
- placeholder: this.props.placeholder,
- style: this.props.style
- }, (function(){
- switch (false) {
- case typeof this.props.restoreOnBackspace !== 'function':
- return {
- restoreOnBackspace: this.props.restoreOnBackspace
- };
- default:
- return {};
- }
- }.call(this))), (function(){
- switch (false) {
- case typeof this.props.renderNoResultsFound !== 'function':
- return {
- renderNoResultsFound: function(){
- return this$.props.renderNoResultsFound(values, search);
- }
- };
- default:
- return {};
- }
- }.call(this))));
- };
- MultiSelect.prototype.getComputedState = function(){
- var anchor, highlightedUid, open, search, values, ref$, onAnchorChange, onHighlightedUidChange, onOpenChange, onSearchChange, onValuesChange, optionsFromChildren, unfilteredOptions, filteredOptions, newOption, options, this$ = this;
- anchor = this.props.hasOwnProperty('anchor')
- ? this.props.anchor
- : this.state.anchor;
- highlightedUid = this.props.hasOwnProperty('highlightedUid')
- ? this.props.highlightedUid
- : this.state.highlightedUid;
- open = this.isOpen();
- search = this.props.hasOwnProperty('search')
- ? this.props.search
- : this.state.search;
- values = this.values();
- ref$ = map(function(p){
- switch (false) {
- case !(this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(o, callback){
- this$.props[camelize("on-" + p + "-change")](o, function(){});
- return this$.setState({}, callback);
- };
- case !(this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(arg$, callback){
- return callback();
- };
- case !(!this$.props.hasOwnProperty(p) && this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(o, callback){
- var ref$;
- return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), function(){
- callback();
- return this$.props[camelize("on-" + p + "-change")](o, function(){});
- });
- };
- case !(!this$.props.hasOwnProperty(p) && !this$.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(o, callback){
- var ref$;
- return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), callback);
- };
- }
- })(
- ['anchor', 'highlightedUid', 'open', 'search', 'values']), onAnchorChange = ref$[0], onHighlightedUidChange = ref$[1], onOpenChange = ref$[2], onSearchChange = ref$[3], onValuesChange = ref$[4];
- optionsFromChildren = (function(){
- var ref$;
- switch (false) {
- case !((ref$ = this.props) != null && ref$.children):
- return map(function(arg$){
- var props, value, children;
- if (arg$ != null) {
- props = arg$.props;
- }
- if (props != null) {
- value = props.value, children = props.children;
- }
- return {
- label: children,
- value: value
- };
- })(
- toString$.call(this.props.children).slice(8, -1) === 'Array'
- ? this.props.children
- : [this.props.children]);
- default:
- return [];
- }
- }.call(this));
- unfilteredOptions = this.props.hasOwnProperty('options') ? (ref$ = this.props.options) != null
- ? ref$
- : [] : optionsFromChildren;
- filteredOptions = this.props.filterOptions(unfilteredOptions, values, search);
- newOption = (function(){
- switch (false) {
- case typeof this.props.createFromSearch !== 'function':
- return this.props.createFromSearch(filteredOptions, values, search);
- default:
- return null;
- }
- }.call(this));
- options = (!!newOption
- ? [(ref$ = import$({}, newOption), ref$.newOption = true, ref$)]
- : []).concat(filteredOptions);
- return {
- anchor: anchor,
- highlightedUid: highlightedUid,
- search: search,
- values: values,
- onAnchorChange: onAnchorChange,
- onHighlightedUidChange: onHighlightedUidChange,
- open: open,
- onOpenChange: function(open, callback){
- onOpenChange((function(){
- switch (false) {
- case !(typeof this.props.maxValues !== 'undefined' && this.values().length >= this.props.maxValues):
- return false;
- default:
- return open;
- }
- }.call(this$)), callback);
- },
- onSearchChange: onSearchChange,
- onValuesChange: onValuesChange,
- filteredOptions: filteredOptions,
- options: options
- };
- };
- MultiSelect.prototype.firstOptionIndexToHighlight = function(options){
- var optionIndexToHighlight, search;
- optionIndexToHighlight = (function(){
- var ref$;
- switch (false) {
- case options.length !== 1:
- return 0;
- case typeof ((ref$ = options[0]) != null ? ref$.newOption : void 8) !== 'undefined':
- return 0;
- default:
- if (all(function(it){
- return typeof it.selectable === 'boolean' && !it.selectable;
- })(
- drop(1)(
- options))) {
- return 0;
- } else {
- return 1;
- }
- }
- }());
- search = this.props.hasOwnProperty('search')
- ? this.props.search
- : this.state.search;
- return this.props.firstOptionIndexToHighlight(optionIndexToHighlight, options, this.values(), search);
- };
- MultiSelect.prototype.focus = function(){
- this.refs.select.focus();
- };
- MultiSelect.prototype.blur = function(){
- this.refs.select.blur();
- };
- MultiSelect.prototype.highlightFirstSelectableOption = function(){
- if (this.state.open) {
- this.refs.select.highlightAndScrollToSelectableOption(this.firstOptionIndexToHighlight(this.getComputedState().options), 1);
- }
- };
- MultiSelect.prototype.values = function(){
- if (this.props.hasOwnProperty('values')) {
- return this.props.values;
- } else {
- return this.state.values;
- }
- };
- MultiSelect.prototype.isOpen = function(){
- if (this.props.hasOwnProperty('open')) {
- return this.props.open;
- } else {
- return this.state.open;
- }
- };
- return MultiSelect;
- }(React.Component));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
- function in$(x, xs){
- var i = -1, l = xs.length >>> 0;
- while (++i < l) if (x === xs[i]) return true;
- return false;
- }
- function curry$(f, bound){
- var context,
- _curry = function(args) {
- return f.length > 1 ? function(){
- var params = args ? args.concat() : [];
- context = bound ? context || this : this;
- return params.push.apply(params, arguments) <
- f.length && arguments.length ?
- _curry.call(context, params) : f.apply(context, params);
- } : f;
- };
- return _curry();
- }
-}).call(this);
diff --git a/src/MultiSelect.ls b/src/MultiSelect.ls
index 56f6792..dfc1a13 100644
--- a/src/MultiSelect.ls
+++ b/src/MultiSelect.ls
@@ -1,13 +1,15 @@
{all, any, camelize, difference, drop, filter, find, find-index, id,
last, map, reject} = require \prelude-ls
{is-equal-to-object} = require \prelude-extension
-{create-factory}:React = require \react
-{div, img, span} = require \react-dom-factories
+{create-factory} = require \./utils
+{create-ref}:React = require \react
+div = create-factory \div
+img = create-factory \img
+span = create-factory \span
ReactSelectize = create-factory require \./ReactSelectize
{cancel-event} = require \./utils
module.exports = class MultiSelect extends React.Component
-
# get-default-props :: () -> Props
@default-props =
# autofocus :: Boolean
@@ -54,6 +56,7 @@ module.exports = class MultiSelect extends React.Component
(props) ->
super(props)
+ @select-ref = create-ref!
this.state =
anchor: if !!@props.values then last @props.values else undefined
highlighted-uid: undefined
@@ -110,7 +113,7 @@ module.exports = class MultiSelect extends React.Component
transition-leave
transition-leave-timeout
uid
- ref: \select
+ ref: @select-ref
# ANCHOR
anchor
@@ -305,15 +308,15 @@ module.exports = class MultiSelect extends React.Component
@props.first-option-index-to-highlight option-index-to-highlight, options, @values!, search
# focus :: () -> ()
- focus: !-> @refs.select.focus!
+ focus: !-> @select-ref.current.focus!
# blur :: () -> ()
- blur: !-> @refs.select.blur!
+ blur: !-> @select-ref.current.select.blur!
# highlight-the-first-selectable-option :: () -> ()
highlight-first-selectable-option: !->
if @state.open
- @refs.select.highlight-and-scroll-to-selectable-option do
+ @select-ref.current.highlight-and-scroll-to-selectable-option do
@first-option-index-to-highlight @get-computed-state!.options
1
@@ -321,4 +324,4 @@ module.exports = class MultiSelect extends React.Component
values: -> if @props.has-own-property \values then @props.values else @state.values
# is-open :: () -> Boolean
- is-open: -> if @props.has-own-property \open then @props.open else @state.open
\ No newline at end of file
+ is-open: -> if @props.has-own-property \open then @props.open else @state.open
diff --git a/src/OptionWrapper.js b/src/OptionWrapper.js
deleted file mode 100644
index f6911e7..0000000
--- a/src/OptionWrapper.js
+++ /dev/null
@@ -1,48 +0,0 @@
-(function(){
- var React, div, isEqualToObject, cancelEvent, OptionWrapper;
- React = require('react');
- div = require('react-dom-factories').div;
- isEqualToObject = require('prelude-extension').isEqualToObject;
- cancelEvent = require('./utils').cancelEvent;
- module.exports = OptionWrapper = (function(superclass){
- var prototype = extend$((import$(OptionWrapper, superclass).displayName = 'OptionWrapper', OptionWrapper), superclass).prototype, constructor = OptionWrapper;
- OptionWrapper.defaultProps = {};
- OptionWrapper.prototype.render = function(){
- var this$ = this;
- return div({
- className: "option-wrapper " + (!!this.props.highlight ? 'highlight' : ''),
- onMouseDown: function(e){
- var listener;
- listener = function(e){
- this$.props.onClick(e);
- return window.removeEventListener('mouseup', listener);
- };
- window.addEventListener('mouseup', listener);
- return cancelEvent(e);
- },
- onMouseMove: this.props.onMouseMove,
- onMouseOut: this.props.onMouseOut,
- onMouseOver: this.props.onMouseOver
- }, this.props.renderItem(this.props.item));
- };
- OptionWrapper.prototype.shouldComponentUpdate = function(nextProps){
- var ref$, ref1$, ref2$;
- return !isEqualToObject(nextProps != null ? nextProps.uid : void 8, (ref$ = this.props) != null ? ref$.uid : void 8) || (nextProps != null ? nextProps.highlight : void 8) !== ((ref1$ = this.props) != null ? ref1$.highlight : void 8) || (nextProps != null ? nextProps.selectable : void 8) !== ((ref2$ = this.props) != null ? ref2$.selectable : void 8);
- };
- function OptionWrapper(){
- OptionWrapper.superclass.apply(this, arguments);
- }
- return OptionWrapper;
- }(React.Component));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/OptionWrapper.ls b/src/OptionWrapper.ls
index f51dee7..d1b1b74 100644
--- a/src/OptionWrapper.ls
+++ b/src/OptionWrapper.ls
@@ -1,5 +1,6 @@
React = require \react
-{div} = require \react-dom-factories
+{create-factory} = require \./utils
+div = create-factory \div
{is-equal-to-object} = require \prelude-extension
{cancel-event} = require \./utils
diff --git a/src/ReactSelectize.js b/src/ReactSelectize.js
deleted file mode 100644
index b1916c2..0000000
--- a/src/ReactSelectize.js
+++ /dev/null
@@ -1,498 +0,0 @@
-(function(){
- var ref$, each, filter, find, findIndex, id, initial, last, map, objToPairs, partition, reject, reverse, Str, sortBy, sum, values, clamp, isEqualToObject, React, createFactory, div, input, path, span, svg, findDOMNode, ToggleButton, DropdownMenu, OptionWrapper, ValueWrapper, ResetButton, ResizableInput, cancelEvent, classNameFromObject, ReactSelectize;
- ref$ = require('prelude-ls'), each = ref$.each, filter = ref$.filter, find = ref$.find, findIndex = ref$.findIndex, id = ref$.id, initial = ref$.initial, last = ref$.last, map = ref$.map, objToPairs = ref$.objToPairs, partition = ref$.partition, reject = ref$.reject, reverse = ref$.reverse, Str = ref$.Str, sortBy = ref$.sortBy, sum = ref$.sum, values = ref$.values;
- ref$ = require('prelude-extension'), clamp = ref$.clamp, isEqualToObject = ref$.isEqualToObject;
- React = require('react'), createFactory = React.createFactory;
- ref$ = require('react-dom-factories'), div = ref$.div, input = ref$.input, path = ref$.path, span = ref$.span, svg = ref$.svg;
- findDOMNode = require('react-dom').findDOMNode;
- ToggleButton = createFactory(require('./ToggleButton'));
- DropdownMenu = createFactory(require('./DropdownMenu'));
- OptionWrapper = createFactory(require('./OptionWrapper'));
- ValueWrapper = createFactory(require('./ValueWrapper'));
- ResetButton = createFactory(require('./ResetButton'));
- ResizableInput = createFactory(require('./ResizableInput'));
- ref$ = require('./utils'), cancelEvent = ref$.cancelEvent, classNameFromObject = ref$.classNameFromObject;
- module.exports = ReactSelectize = (function(superclass){
- var prototype = extend$((import$(ReactSelectize, superclass).displayName = 'ReactSelectize', ReactSelectize), superclass).prototype, constructor = ReactSelectize;
- ReactSelectize.prototype.focusLock = false;
- ReactSelectize.defaultProps = {
- anchor: null,
- autofocus: false,
- cancelKeyboardEventOnSelection: true,
- delimiters: [],
- disabled: false,
- dropdownDirection: 1,
- firstOptionIndexToHighlight: function(options){
- return 0;
- },
- groupId: function(it){
- return it.groupId;
- },
- groupsAsColumns: false,
- highlightedUid: undefined,
- inputProps: {},
- onAnchorChange: function(anchor){},
- onBlur: function(e){},
- onEnter: function(highlightedOption){},
- onFocus: function(e){},
- onHighlightedUidChange: function(uid, callback){},
- onKeyboardSelectionFailed: function(keycode){},
- onOpenChange: function(open, callback){},
- onPaste: function(e){
- true;
- },
- onScrollLockChange: function(scrollLock){},
- onSearchChange: function(search, callback){},
- onValuesChange: function(values, callback){},
- open: false,
- hideResetButton: false,
- renderValue: function(arg$){
- var label;
- label = arg$.label;
- return div({
- className: 'simple-value'
- }, span(null, label));
- },
- renderToggleButton: ToggleButton,
- renderResetButton: ResetButton,
- scrollLock: false,
- search: "",
- style: {},
- theme: 'default',
- uid: id,
- values: []
- };
- ReactSelectize.prototype.render = function(){
- var anchorIndex, renderSelectedValues, flipped, ref$, ref1$, this$ = this;
- anchorIndex = (function(){
- var ref$;
- switch (false) {
- case !(typeof this.props.anchor === 'undefined' || this.props.anchor === null):
- return -1;
- default:
- return (ref$ = findIndex(function(it){
- return this$.isEqualToObject(it, this$.props.anchor);
- }, this.props.values)) != null
- ? ref$
- : this.props.values.length - 1;
- }
- }.call(this));
- renderSelectedValues = function(selectedValues){
- return map(function(index){
- var item, uid;
- item = this$.props.values[index];
- uid = this$.props.uid(item);
- return ValueWrapper({
- key: this$.uidToString(uid),
- uid: uid,
- item: item,
- renderItem: this$.props.renderValue
- });
- })(
- selectedValues);
- };
- flipped = this.props.dropdownDirection === -1;
- return div({
- className: classNameFromObject((ref$ = {
- 'react-selectize': 1
- }, ref$[this.props.theme + ""] = 1, ref$['root-node'] = 1, ref$[this.props.className + ""] = 1, ref$.disabled = this.props.disabled, ref$.open = this.props.open, ref$.flipped = flipped, ref$.tethered = this.props.tether, ref$)),
- style: this.props.style
- }, !!this.props.name ? input({
- type: 'hidden',
- name: this.props.name,
- value: this.props.serialize(this.props.values)
- }) : void 8, div({
- className: 'react-selectize-control',
- ref: 'control',
- onMouseDown: function(e){
- (function(){
- return this$.props.onAnchorChange(last(this$.props.values), function(){
- return this$.onOpenChange(true, function(){});
- });
- })();
- if (!this$.props.open) {
- return cancelEvent(e);
- }
- }
- }, this.props.search.length === 0 && this.props.values.length === 0 ? div({
- className: 'react-selectize-placeholder'
- }, this.props.placeholder) : void 8, div({
- className: 'react-selectize-search-field-and-selected-values'
- }, renderSelectedValues((function(){
- var i$, to$, results$ = [];
- for (i$ = 0, to$ = anchorIndex; i$ <= to$; ++i$) {
- results$.push(i$);
- }
- return results$;
- }())), ResizableInput((ref$ = import$({
- disabled: this.props.disabled
- }, this.props.inputProps), ref$.ref = 'search', ref$.type = 'text', ref$.value = this.props.search, ref$.onChange = function(arg$){
- var value;
- value = arg$.currentTarget.value;
- return this$.props.onSearchChange(value, function(){
- return this$.highlightAndScrollToSelectableOption(this$.props.firstOptionIndexToHighlight(this$.props.options), 1);
- });
- }, ref$.onFocus = function(e){
- (function(){
- return function(callback){
- if (!!this$.focusLock) {
- return callback(this$.focusLock = false);
- } else {
- return this$.onOpenChange(true, function(){
- return callback(true);
- });
- }
- };
- })()(function(){
- return this$.props.onFocus(e);
- });
- }, ref$.onBlur = function(e){
- if (this$.refs.dropdownMenu && document.activeElement === findDOMNode(this$.refs.dropdownMenu)) {
- return;
- }
- return this$.closeDropdown(function(){
- return this$.props.onBlur(e);
- });
- }, ref$.onPaste = this.props.onPaste, ref$.onKeyDown = function(e){
- return this$.handleKeydown({
- anchorIndex: anchorIndex
- }, e);
- }, ref$)), renderSelectedValues((function(){
- var i$, to$, results$ = [];
- for (i$ = anchorIndex + 1, to$ = this.props.values.length; i$ < to$; ++i$) {
- results$.push(i$);
- }
- return results$;
- }.call(this)))), this.props.values.length > 0 && !this.props.hideResetButton ? div({
- className: 'react-selectize-reset-button-container',
- onClick: function(e){
- (function(){
- return this$.props.onValuesChange([], function(){
- return this$.props.onSearchChange("", function(){
- return this$.highlightAndFocus();
- });
- });
- })();
- return cancelEvent(e);
- }
- }, this.props.renderResetButton()) : void 8, div({
- className: 'react-selectize-toggle-button-container',
- onMouseDown: function(e){
- if (this$.props.open) {
- this$.onOpenChange(false, function(){});
- } else {
- this$.props.onAnchorChange(last(this$.props.values), function(){
- return this$.onOpenChange(true, function(){});
- });
- }
- return cancelEvent(e);
- }
- }, this.props.renderToggleButton({
- open: this.props.open,
- flipped: flipped
- }))), DropdownMenu((ref$ = import$({}, this.props), ref$.ref = 'dropdownMenu', ref$.className = classNameFromObject((ref1$ = {
- 'react-selectize': 1
- }, ref1$[this.props.className + ""] = 1, ref1$)), ref$.theme = this.props.theme, ref$.scrollLock = this.props.scrollLock, ref$.onScrollChange = this.props.onScrollChange, ref$.bottomAnchor = function(){
- return findDOMNode(this$.refs.control);
- }, ref$.tetherProps = (ref1$ = import$({}, this.props.tetherProps), ref1$.target = function(){
- return findDOMNode(this$.refs.control);
- }, ref1$), ref$.highlightedUid = this.props.highlightedUid, ref$.onHighlightedUidChange = this.props.onHighlightedUidChange, ref$.onOptionClick = function(highlightedUid){
- this$.selectHighlightedUid(anchorIndex, function(){});
- }, ref$)));
- };
- ReactSelectize.prototype.handleKeydown = function(arg$, e){
- var anchorIndex, result, index, this$ = this;
- anchorIndex = arg$.anchorIndex;
- e.persist();
- switch (e.which) {
- case 8:
- if (this.props.search.length > 0 || anchorIndex === -1) {
- return;
- }
- (function(){
- var anchorIndexOnRemove, nextAnchor, valueToRemove, ref$;
- anchorIndexOnRemove = anchorIndex;
- nextAnchor = anchorIndex - 1 < 0
- ? undefined
- : this$.props.values[anchorIndex - 1];
- valueToRemove = this$.props.values[anchorIndex];
- return this$.props.onValuesChange((ref$ = reject(function(it){
- return this$.isEqualToObject(it, valueToRemove);
- })(
- this$.props.values)) != null
- ? ref$
- : [], function(){
- return function(){
- return function(callback){
- if (typeof find(function(it){
- return this$.isEqualToObject(it, valueToRemove);
- }, this$.props.values) === 'undefined') {
- if (!!this$.props.restoreOnBackspace) {
- return this$.props.onSearchChange(this$.props.restoreOnBackspace(valueToRemove), function(){
- return callback(true);
- });
- } else {
- return callback(true);
- }
- } else {
- return callback(false);
- }
- };
- }()(function(result){
- if (!!result) {
- this$.highlightAndScrollToSelectableOption(this$.props.firstOptionIndexToHighlight(this$.props.options), 1);
- if (anchorIndex === anchorIndexOnRemove && (typeof nextAnchor === 'undefined' || !!find(function(it){
- return this$.isEqualToObject(it, nextAnchor);
- })(
- this$.props.values))) {
- return this$.props.onAnchorChange(nextAnchor, function(){});
- }
- }
- });
- });
- })();
- cancelEvent(e);
- break;
- case 27:
- (function(){
- if (this$.props.open) {
- return function(it){
- return this$.onOpenChange(false, it);
- };
- } else {
- return function(it){
- return this$.props.onValuesChange([], it);
- };
- }
- })()(function(){
- return this$.props.onSearchChange("", function(){
- return this$.focusOnInput();
- });
- });
- }
- if (this.props.open && in$(e.which, [13].concat(this.props.delimiters)) && !((e != null && e.metaKey) || (e != null && e.ctrlKey) || (e != null && e.shiftKey))) {
- result = this.selectHighlightedUid(anchorIndex, function(selectedValue){
- if (typeof selectedValue === 'undefined') {
- return this$.props.onKeyboardSelectionFailed(e.which);
- }
- });
- if (result && this.props.cancelKeyboardEventOnSelection) {
- return cancelEvent(e);
- }
- }
- if (this.props.search.length === 0) {
- switch (e.which) {
- case 37:
- this.props.onAnchorChange(anchorIndex - 1 < 0 || e.metaKey
- ? undefined
- : this.props.values[clamp(anchorIndex - 1, 0, this.props.values.length - 1)], function(){});
- break;
- case 39:
- this.props.onAnchorChange(e.metaKey
- ? last(this.props.values)
- : this.props.values[clamp(anchorIndex + 1, 0, this.props.values.length - 1)], function(){});
- }
- }
- switch (e.which) {
- case 38:
- this.props.onScrollLockChange(true);
- index = (function(){
- switch (false) {
- case typeof this.props.highlightedUid !== 'undefined':
- return 0;
- default:
- return -1 + this.optionIndexFromUid(this.props.highlightedUid);
- }
- }.call(this));
- return this.highlightAndScrollToSelectableOption(index, -1, function(result){
- if (!result) {
- return this$.highlightAndScrollToSelectableOption(this$.props.options.length - 1, -1);
- }
- });
- case 40:
- this.props.onScrollLockChange(true);
- index = (function(){
- switch (false) {
- case typeof this.props.highlightedUid !== 'undefined':
- return 0;
- default:
- return 1 + this.optionIndexFromUid(this.props.highlightedUid);
- }
- }.call(this));
- return this.highlightAndScrollToSelectableOption(index, 1, function(result){
- if (!result) {
- return this$.highlightAndScrollToSelectableOption(0, 1);
- }
- });
- }
- };
- ReactSelectize.prototype.componentDidMount = function(){
- if (this.props.autofocus) {
- this.focus();
- }
- if (this.props.open) {
- this.highlightAndFocus();
- }
- };
- ReactSelectize.prototype.componentDidUpdate = function(prevProps){
- if (this.props.open && !prevProps.open && this.props.highlightedUid === undefined) {
- this.highlightAndFocus();
- }
- if (!this.props.open && prevProps.open) {
- this.props.onHighlightedUidChange(undefined, function(){});
- }
- };
- ReactSelectize.prototype.componentWillReceiveProps = function(props){
- if ((typeof this.props.disabled === 'undefined' || this.props.disabled === false) && (typeof props.disabled !== 'undefined' && props.disabled === true)) {
- this.onOpenChange(false, function(){});
- }
- };
- ReactSelectize.prototype.optionIndexFromUid = function(uid){
- var this$ = this;
- return findIndex(function(it){
- return isEqualToObject(uid, this$.props.uid(it));
- })(
- this.props.options);
- };
- ReactSelectize.prototype.closeDropdown = function(callback){
- var this$ = this;
- this.onOpenChange(false, function(){
- return this$.props.onAnchorChange(last(this$.props.values), callback);
- });
- };
- ReactSelectize.prototype.blur = function(){
- this.refs.search.blur();
- };
- ReactSelectize.prototype.focus = function(){
- this.refs.search.focus();
- };
- ReactSelectize.prototype.focusOnInput = function(){
- var input;
- input = findDOMNode(this.refs.search);
- if (input !== document.activeElement) {
- this.focusLock = true;
- input.focus();
- input.value = input.value;
- }
- };
- ReactSelectize.prototype.highlightAndFocus = function(){
- this.highlightAndScrollToSelectableOption(this.props.firstOptionIndexToHighlight(this.props.options), 1);
- this.focusOnInput();
- };
- ReactSelectize.prototype.highlightAndScrollToOption = function(index, callback){
- callback == null && (callback = function(){});
- this.refs.dropdownMenu.highlightAndScrollToOption(index, callback);
- };
- ReactSelectize.prototype.highlightAndScrollToSelectableOption = function(index, direction, callback){
- var this$ = this;
- callback == null && (callback = function(){});
- (function(){
- if (!this$.props.open) {
- return function(it){
- return this$.onOpenChange(true, it);
- };
- } else {
- return function(it){
- return it();
- };
- }
- })()(function(){
- return this$.refs.dropdownMenu.highlightAndScrollToSelectableOption(index, direction, callback);
- });
- };
- ReactSelectize.prototype.isEqualToObject = function(){
- return isEqualToObject(this.props.uid(arguments[0]), this.props.uid(arguments[1]));
- };
- ReactSelectize.prototype.onOpenChange = function(open, callback){
- return this.props.onOpenChange(this.props.disabled ? false : open, callback);
- };
- ReactSelectize.prototype.selectHighlightedUid = function(anchorIndex, callback){
- var index, option, this$ = this;
- if (this.props.highlightedUid === undefined) {
- callback();
- return false;
- }
- index = this.optionIndexFromUid(this.props.highlightedUid);
- if (typeof index !== 'number') {
- callback();
- return false;
- }
- option = this.props.options[index];
- (function(){
- return this$.props.onValuesChange(map(function(it){
- return this$.props.values[it];
- }, (function(){
- var i$, to$, results$ = [];
- for (i$ = 0, to$ = anchorIndex; i$ <= to$; ++i$) {
- results$.push(i$);
- }
- return results$;
- }())).concat([option], map(function(it){
- return this$.props.values[it];
- }, (function(){
- var i$, to$, results$ = [];
- for (i$ = anchorIndex + 1, to$ = this.props.values.length; i$ < to$; ++i$) {
- results$.push(i$);
- }
- return results$;
- }.call(this$)))), function(){
- var value;
- value = find(function(it){
- return this$.isEqualToObject(it, option);
- }, this$.props.values);
- if (!value) {
- callback();
- return;
- }
- return this$.props.onSearchChange("", function(){
- return this$.props.onAnchorChange(value, function(){
- if (!this$.props.open) {
- callback(value);
- return;
- }
- return this$.highlightAndScrollToSelectableOption(index, 1, function(result){
- if (!!result) {
- callback(value);
- return;
- }
- return this$.highlightAndScrollToSelectableOption(this$.props.firstOptionIndexToHighlight(this$.props.options), 1, function(result){
- if (!result) {
- return this$.onOpenChange(false, function(){
- return callback(value);
- });
- } else {
- return callback(value);
- }
- });
- });
- });
- });
- });
- })();
- return true;
- };
- ReactSelectize.prototype.uidToString = function(uid){
- return (typeof uid === 'object' ? JSON.stringify : id)(uid);
- };
- function ReactSelectize(){
- ReactSelectize.superclass.apply(this, arguments);
- }
- return ReactSelectize;
- }(React.Component));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
- function in$(x, xs){
- var i = -1, l = xs.length >>> 0;
- while (++i < l) if (x === xs[i]) return true;
- return false;
- }
-}).call(this);
diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls
index 77a5936..88b1ba4 100644
--- a/src/ReactSelectize.ls
+++ b/src/ReactSelectize.ls
@@ -3,9 +3,13 @@
partition, reject, reverse, Str, sort-by, sum, values} = require \prelude-ls
{clamp, is-equal-to-object} = require \prelude-extension
-{create-factory}:React = require \react
-{div, input, path, span, svg} = require \react-dom-factories
-{find-DOM-node} = require \react-dom
+{create-factory} = require \./utils
+{create-ref}:React = require \react
+div = create-factory \div
+input = create-factory \input
+path = create-factory \path
+span = create-factory \span
+svg = create-factory \svg
ToggleButton = create-factory require \./ToggleButton
DropdownMenu = create-factory require \./DropdownMenu
OptionWrapper = create-factory require \./OptionWrapper
@@ -83,6 +87,12 @@ module.exports = class ReactSelectize extends React.Component
uid: id # (Eq e) => Item -> e
values: [] # [Item]
+ (props) ->
+ super(props)
+ @control-ref = create-ref!
+ @dropdown-ref = create-ref!
+ @search-ref = create-ref!
+
# render :: () -> ReactElement
render: ->
anchor-index =
@@ -127,7 +137,7 @@ module.exports = class ReactSelectize extends React.Component
# CONTROL
div do
class-name: \react-selectize-control
- ref: \control
+ ref: @control-ref
# using click would cause a flicker because:
# 1: on mouse down, the focus will blur from the search field causing the dropdown menu to close
@@ -157,7 +167,7 @@ module.exports = class ReactSelectize extends React.Component
# SEARCH INPUT BOX
ResizableInput do
{disabled: @props.disabled} <<< @props.input-props <<< {
- ref: \search
+ ref: @search-ref
type: \text
value: @props.search
@@ -185,7 +195,7 @@ module.exports = class ReactSelectize extends React.Component
on-blur: (e) ~>
# to prevent closing the dropdown when the user tries to click & drag the scrollbar in IE
- return if @refs.dropdown-menu and document.active-element == (find-DOM-node @refs.dropdown-menu)
+ return if @dropdown-ref.current and document.active-element == @dropdown-ref.current
<~ @close-dropdown
@@ -232,7 +242,7 @@ module.exports = class ReactSelectize extends React.Component
# (TETHERED / ANIMATED / SIMPLE) DROPDOWN
DropdownMenu {} <<< @props <<<
- ref: \dropdownMenu
+ ref: @dropdown-ref
class-name: class-name-from-object do
\react-selectize : 1
"#{@props.class-name}" : 1
@@ -245,13 +255,13 @@ module.exports = class ReactSelectize extends React.Component
# used when dropdown-direction is -1
# bottom-anchor :: () -> ReactElement
- bottom-anchor: ~> find-DOM-node @refs.control
+ bottom-anchor: ~> @control-ref.current
tether-props: {} <<< @props.tether-props <<<
# used when @props.tether is true
# target :: () -> ReactElement
- target: ~> find-DOM-node @refs.control
+ target: ~> @control-ref.current
# uid of the highlighted option, this changes whenever the user hovers over an option
# or uses arrow keys to navigate the list of options
@@ -402,6 +412,9 @@ module.exports = class ReactSelectize extends React.Component
# component-did-update :: Props -> UIState -> ()
component-did-update: (prev-props) !->
+ if (typeof prev-props.disabled == \undefined or prev-props.disabled == false) and
+ (typeof @props.disabled != \undefined and @props.disabled == true)
+ @on-open-change false, ~>
# if the list of options opened then highlight the first option & focus on the search input
if @props.open and !prev-props.open and @props.highlighted-uid == undefined
@@ -411,12 +424,6 @@ module.exports = class ReactSelectize extends React.Component
if !@props.open and prev-props.open
<~ @props.on-highlighted-uid-change undefined
- # component-will-receive-props :: Props -> ()
- component-will-receive-props: (props) !->
- if (typeof @props.disabled == \undefined or @props.disabled == false) and
- (typeof props.disabled != \undefined and props.disabled == true)
- @on-open-change false, ~>
-
# option-index-from-uid :: (Eq e) => e -> Int
option-index-from-uid: (uid) -> @props.options |> find-index ~> uid `is-equal-to-object` @props.uid it
@@ -428,15 +435,15 @@ module.exports = class ReactSelectize extends React.Component
callback
# blur :: () -> ()
- blur: !-> @refs.search.blur!
+ blur: !-> @search-ref.current.blur!
# focus :: () -> ()
- focus: !-> @refs.search.focus!
+ focus: !-> @search-ref.current.focus!
# move the cursor to the input field, without toggling the dropdown
# focus-on-input :: () -> ()
focus-on-input: !->
- input = find-DOM-node @refs.search
+ input = @search-ref.current
if input != document.active-element
@focus-lock = true
@@ -457,14 +464,14 @@ module.exports = class ReactSelectize extends React.Component
# highlight-and-scroll-to-option :: Int, (() -> ())? -> ()
highlight-and-scroll-to-option: (index, callback = (->)) !->
- @refs.dropdown-menu.highlight-and-scroll-to-option index, callback
+ @dropdown-ref.current.highlight-and-scroll-to-option index, callback
# highlight-and-scroll-to-selectable-option :: Int, Int, (Boolean -> ())? -> ()
highlight-and-scroll-to-selectable-option: (index, direction, callback = (->)) !->
# open dropdown menu
<~ do ~> if !@props.open then (~> @on-open-change true, it) else (-> it!)
- @refs.dropdown-menu.highlight-and-scroll-to-selectable-option index, direction, callback
+ @dropdown-ref.current.highlight-and-scroll-to-selectable-option index, direction, callback
# is-equal-to-object :: Item -> Item -> Boolean
is-equal-to-object: --> (@props.uid &0) `is-equal-to-object` @props.uid &1
@@ -529,4 +536,4 @@ module.exports = class ReactSelectize extends React.Component
true
# uid-to-string :: () -> String, only used for the key prop (required by react render), & for refs
- uid-to-string: (uid) -> (if typeof uid == \object then JSON.stringify else id) uid
\ No newline at end of file
+ uid-to-string: (uid) -> (if typeof uid == \object then JSON.stringify else id) uid
diff --git a/src/ReactTether.js b/src/ReactTether.js
deleted file mode 100644
index 43cb9b4..0000000
--- a/src/ReactTether.js
+++ /dev/null
@@ -1,79 +0,0 @@
-(function(){
- var React, ref$, render, unmountComponentAtNode, Tether, ReactTether;
- React = require('react');
- ref$ = require('react-dom'), render = ref$.render, unmountComponentAtNode = ref$.unmountComponentAtNode;
- Tether = require('tether');
- ReactTether = (function(superclass){
- var prototype = extend$((import$(ReactTether, superclass).displayName = 'ReactTether', ReactTether), superclass).prototype, constructor = ReactTether;
- ReactTether.defaultProps = {
- parentElement: function(){
- return document.body;
- }
- };
- ReactTether.prototype.render = function(){
- return null;
- };
- ReactTether.prototype.initTether = function(props){
- var this$ = this;
- this.node = document.createElement('div');
- this.props.parentElement().appendChild(this.node);
- this.tether = new Tether(import$({
- element: this.node,
- target: props.target()
- }, props.options));
- render(props.children, this.node, function(){
- return this$.tether.position();
- });
- };
- ReactTether.prototype.destroyTether = function(){
- if (this.tether) {
- this.tether.destroy();
- }
- if (this.node) {
- unmountComponentAtNode(this.node);
- this.node.parentElement.removeChild(this.node);
- }
- this.node = this.tether = undefined;
- };
- ReactTether.prototype.componentDidMount = function(){
- if (this.props.children) {
- this.initTether(this.props);
- }
- };
- ReactTether.prototype.componentWillReceiveProps = function(newProps){
- var this$ = this;
- if (this.props.children && !newProps.children) {
- this.destroyTether();
- } else if (newProps.children && !this.props.children) {
- this.initTether(newProps);
- } else if (newProps.children) {
- this.tether.setOptions(import$({
- element: this.node,
- target: newProps.target()
- }, newProps.options));
- render(newProps.children, this.node, function(){
- return this$.tether.position();
- });
- }
- };
- ReactTether.prototype.componentWillUnmount = function(){
- this.destroyTether();
- };
- function ReactTether(){
- ReactTether.superclass.apply(this, arguments);
- }
- return ReactTether;
- }(React.PureComponent));
- module.exports = ReactTether;
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/ReactTether.ls b/src/ReactTether.ls
index c4e8bf4..76af4a1 100644
--- a/src/ReactTether.ls
+++ b/src/ReactTether.ls
@@ -45,21 +45,21 @@ class ReactTether extends React.PureComponent
@init-tether @props
# component-will-receive-props :: Props -> Void
- component-will-receive-props: (new-props) !->
- if @props.children and !new-props.children
+ component-did-update: (prev-props) !->
+ if prev-props.children and !@props.children
@destroy-tether!
- else if new-props.children and !@props.children
+ else if @props.children and !prev-props.children
@init-tether new-props
- else if new-props.children
+ else if @props.children
@tether.set-options {
element: @node
target: new-props.target!
} <<< new-props.options
- render new-props.children, @node, ~> @tether.position!
+ render @props.children, @node, ~> @tether.position!
# component-will-unmount :: () -> Void
component-will-unmount: !-> @destroy-tether!
-module.exports = ReactTether
\ No newline at end of file
+module.exports = ReactTether
diff --git a/src/ResetButton.js b/src/ResetButton.js
deleted file mode 100644
index 8a8f7ca..0000000
--- a/src/ResetButton.js
+++ /dev/null
@@ -1,35 +0,0 @@
-(function(){
- var React, createFactory, path, SvgWrapper, ResetButton;
- React = require('react'), createFactory = React.createFactory;
- path = require('react-dom-factories').path;
- SvgWrapper = createFactory(require('./SvgWrapper'));
- module.exports = ResetButton = (function(superclass){
- var prototype = extend$((import$(ResetButton, superclass).displayName = 'ResetButton', ResetButton), superclass).prototype, constructor = ResetButton;
- ResetButton.prototype.render = function(){
- return SvgWrapper({
- className: 'react-selectize-reset-button',
- style: {
- width: 8,
- height: 8
- }
- }, path({
- d: "M0 0 L8 8 M8 0 L 0 8"
- }));
- };
- function ResetButton(){
- ResetButton.superclass.apply(this, arguments);
- }
- return ResetButton;
- }(React.PureComponent));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/ResetButton.ls b/src/ResetButton.ls
index 7d43634..842719c 100644
--- a/src/ResetButton.ls
+++ b/src/ResetButton.ls
@@ -1,5 +1,6 @@
-{create-factory}:React = require \react
-{path} = require \react-dom-factories
+{create-factory} = require \./utils
+React = require \react
+path = create-factory \path
SvgWrapper = create-factory require \./SvgWrapper
module.exports = class ResetButton extends React.PureComponent
@@ -11,4 +12,4 @@ module.exports = class ResetButton extends React.PureComponent
style:
width: 8
height: 8
- path d: "M0 0 L8 8 M8 0 L 0 8"
\ No newline at end of file
+ path d: "M0 0 L8 8 M8 0 L 0 8"
diff --git a/src/ResizableInput.js b/src/ResizableInput.js
deleted file mode 100644
index 530c9c8..0000000
--- a/src/ResizableInput.js
+++ /dev/null
@@ -1,74 +0,0 @@
-(function(){
- var ref$, each, objToPairs, React, createFactory, input, findDOMNode, ResizableInput;
- ref$ = require('prelude-ls'), each = ref$.each, objToPairs = ref$.objToPairs;
- React = require('react'), createFactory = React.createFactory;
- input = require('react-dom-factories').input;
- findDOMNode = require('react-dom').findDOMNode;
- module.exports = ResizableInput = (function(superclass){
- var prototype = extend$((import$(ResizableInput, superclass).displayName = 'ResizableInput', ResizableInput), superclass).prototype, constructor = ResizableInput;
- ResizableInput.prototype.render = function(){
- var ref$;
- return input((ref$ = import$({}, this.props), ref$.type = 'input', ref$.className = 'resizable-input', ref$));
- };
- ResizableInput.prototype.autosize = function(){
- var x$, inputElement, y$, dummpyInput, ref$;
- x$ = inputElement = findDOMNode(this);
- x$.style.width = '0px';
- if (inputElement.value.length === 0) {
- return inputElement.style.width = !!(inputElement != null && inputElement.currentStyle) ? '4px' : '2px';
- } else {
- if (inputElement.scrollWidth > 0) {
- return inputElement.style.width = (2 + inputElement.scrollWidth) + "px";
- } else {
- y$ = dummpyInput = document.createElement('div');
- y$.innerHTML = inputElement.value;
- (function(){
- var ref$;
- return ref$ = dummpyInput.style, ref$.display = 'inline-block', ref$.width = "", ref$;
- })(
- each(function(arg$){
- var key, value;
- key = arg$[0], value = arg$[1];
- return dummpyInput.style[key] = value;
- })(
- objToPairs(
- !!inputElement.currentStyle
- ? inputElement.currentStyle
- : (ref$ = document.defaultView) != null
- ? ref$
- : window.getComputedStyle(inputElement))));
- document.body.appendChild(dummpyInput);
- inputElement.style.width = (4 + dummpyInput.clientWidth) + "px";
- return document.body.removeChild(dummpyInput);
- }
- }
- };
- ResizableInput.prototype.componentDidMount = function(){
- this.autosize();
- };
- ResizableInput.prototype.componentDidUpdate = function(){
- this.autosize();
- };
- ResizableInput.prototype.blur = function(){
- return findDOMNode(this).blur();
- };
- ResizableInput.prototype.focus = function(){
- return findDOMNode(this).focus();
- };
- function ResizableInput(){
- ResizableInput.superclass.apply(this, arguments);
- }
- return ResizableInput;
- }(React.PureComponent));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/ResizableInput.ls b/src/ResizableInput.ls
index a5e1355..e382792 100644
--- a/src/ResizableInput.ls
+++ b/src/ResizableInput.ls
@@ -1,21 +1,26 @@
{each, obj-to-pairs} = require \prelude-ls
-{create-factory}:React = require \react
-{input} = require \react-dom-factories
+{create-factory} = require \./utils
+{create-ref}:React = require \react
+input = create-factory \input
{find-DOM-node} = require \react-dom
module.exports = class ResizableInput extends React.PureComponent
+ (props) ->
+ super(props)
+ @input-ref = create-ref!
# render :: () -> ReactElement
render: ->
input {} <<< @props <<<
type: \input
class-name: \resizable-input
+ ref: @input-ref
# autosize :: () -> ()
autosize: ->
# reset the width
- input-element = (find-DOM-node @)
+ input-element = @input-ref.current
..style.width = \0px
if input-element.value.length == 0
@@ -62,4 +67,4 @@ module.exports = class ResizableInput extends React.PureComponent
blur: -> find-DOM-node @ .blur!
# focus :: () -> ()
- focus: -> find-DOM-node @ .focus!
\ No newline at end of file
+ focus: -> find-DOM-node @ .focus!
diff --git a/src/SimpleSelect.js b/src/SimpleSelect.js
deleted file mode 100644
index 994d1c4..0000000
--- a/src/SimpleSelect.js
+++ /dev/null
@@ -1,419 +0,0 @@
-(function(){
- var ref$, all, any, drop, camelize, difference, filter, find, findIndex, id, last, map, reject, isEqualToObject, React, createFactory, div, img, span, ReactSelectize, cancelEvent, SimpleSelect, toString$ = {}.toString;
- ref$ = require('prelude-ls'), all = ref$.all, any = ref$.any, drop = ref$.drop, camelize = ref$.camelize, difference = ref$.difference, filter = ref$.filter, find = ref$.find, findIndex = ref$.findIndex, id = ref$.id, last = ref$.last, map = ref$.map, reject = ref$.reject;
- isEqualToObject = require('prelude-extension').isEqualToObject;
- React = require('react'), createFactory = React.createFactory;
- ref$ = require('react-dom-factories'), div = ref$.div, img = ref$.img, span = ref$.span;
- ReactSelectize = createFactory(require('./ReactSelectize'));
- cancelEvent = require('./utils').cancelEvent;
- module.exports = SimpleSelect = (function(superclass){
- var prototype = extend$((import$(SimpleSelect, superclass).displayName = 'SimpleSelect', SimpleSelect), superclass).prototype, constructor = SimpleSelect;
- SimpleSelect.defaultProps = {
- delimiters: [],
- filterOptions: curry$(function(options, search){
- return filter(function(it){
- return it.label.toLowerCase().trim().indexOf(search.toLowerCase().trim()) > -1;
- })(
- options);
- }),
- firstOptionIndexToHighlight: id,
- onBlur: function(e){},
- onBlurResetsInput: true,
- onFocus: function(e){},
- onKeyboardSelectionFailed: function(which){},
- onPaste: function(e){
- true;
- },
- placeholder: "",
- renderValue: function(arg$){
- var label;
- label = arg$.label;
- return div({
- className: 'simple-value'
- }, span(null, label));
- },
- serialize: function(it){
- return it != null ? it.value : void 8;
- },
- style: {},
- tether: false,
- uid: id
- };
- function SimpleSelect(props){
- var ref$;
- SimpleSelect.superclass.call(this, props);
- this.state = {
- highlightedUid: undefined,
- open: false,
- scrollLock: false,
- search: "",
- value: (ref$ = this.props) != null ? ref$.defaultValue : void 8
- };
- }
- SimpleSelect.prototype.render = function(){
- var ref$, filteredOptions, highlightedUid, onHighlightedUidChange, onOpenChange, onSearchChange, onValueChange, open, options, search, value, values, autofocus, autosize, cancelKeyboardEventOnSelection, delimiters, disabled, dropdownDirection, groupId, groups, groupsAsColumns, hideResetButton, name, inputProps, onBlurResetsInput, renderToggleButton, renderGroupTitle, renderResetButton, serialize, tether, tetherProps, theme, transitionEnter, transitionLeave, transitionEnterTimeout, transitionLeaveTimeout, uid, this$ = this;
- ref$ = this.getComputedState(), filteredOptions = ref$.filteredOptions, highlightedUid = ref$.highlightedUid, onHighlightedUidChange = ref$.onHighlightedUidChange, onOpenChange = ref$.onOpenChange, onSearchChange = ref$.onSearchChange, onValueChange = ref$.onValueChange, open = ref$.open, options = ref$.options, search = ref$.search, value = ref$.value, values = ref$.values;
- if ((ref$ = this.props) != null) {
- autofocus = ref$.autofocus, autosize = ref$.autosize, cancelKeyboardEventOnSelection = ref$.cancelKeyboardEventOnSelection, delimiters = ref$.delimiters, disabled = ref$.disabled, dropdownDirection = ref$.dropdownDirection, groupId = ref$.groupId, groups = ref$.groups, groupsAsColumns = ref$.groupsAsColumns, hideResetButton = ref$.hideResetButton, name = ref$.name, inputProps = ref$.inputProps, onBlurResetsInput = ref$.onBlurResetsInput, renderToggleButton = ref$.renderToggleButton, renderGroupTitle = ref$.renderGroupTitle, renderResetButton = ref$.renderResetButton, serialize = ref$.serialize, tether = ref$.tether, tetherProps = ref$.tetherProps, theme = ref$.theme, transitionEnter = ref$.transitionEnter, transitionLeave = ref$.transitionLeave, transitionEnterTimeout = ref$.transitionEnterTimeout, transitionLeaveTimeout = ref$.transitionLeaveTimeout, uid = ref$.uid;
- }
- return ReactSelectize(import$(import$({
- autofocus: autofocus,
- autosize: autosize,
- cancelKeyboardEventOnSelection: cancelKeyboardEventOnSelection,
- className: "simple-select" + (!!this.props.className ? " " + this.props.className : ""),
- delimiters: delimiters,
- disabled: disabled,
- dropdownDirection: dropdownDirection,
- groupId: groupId,
- groups: groups,
- groupsAsColumns: groupsAsColumns,
- hideResetButton: hideResetButton,
- highlightedUid: highlightedUid,
- onHighlightedUidChange: onHighlightedUidChange,
- inputProps: inputProps,
- name: name,
- onBlurResetsInput: onBlurResetsInput,
- renderGroupTitle: renderGroupTitle,
- renderResetButton: renderResetButton,
- renderToggleButton: renderToggleButton,
- scrollLock: this.state.scrollLock,
- onScrollLockChange: function(scrollLock){
- return this$.setState({
- scrollLock: scrollLock
- });
- },
- tether: tether,
- tetherProps: tetherProps,
- theme: theme,
- transitionEnter: transitionEnter,
- transitionEnterTimeout: transitionEnterTimeout,
- transitionLeave: transitionLeave,
- transitionLeaveTimeout: transitionLeaveTimeout,
- ref: 'select',
- anchor: last(values),
- onAnchorChange: function(arg$, callback){
- return callback();
- },
- open: open,
- onOpenChange: onOpenChange,
- firstOptionIndexToHighlight: function(){
- return this$.firstOptionIndexToHighlight(options, value);
- },
- options: options,
- renderOption: this.props.renderOption,
- renderNoResultsFound: this.props.renderNoResultsFound,
- search: search,
- onSearchChange: function(search, callback){
- return onSearchChange(search, callback);
- },
- values: values,
- onValuesChange: function(newValues, callback){
- var newValue, changed;
- if (newValues.length === 0) {
- return onValueChange(undefined, function(){
- return callback();
- });
- } else {
- newValue = last(newValues);
- changed = !isEqualToObject(newValue, value);
- return function(){
- return function(callback){
- if (changed) {
- return onValueChange(newValue, callback);
- } else {
- return callback();
- }
- };
- }()(function(){
- callback();
- return onOpenChange(false, function(){});
- });
- }
- },
- renderValue: function(item){
- if (open && (!!this$.props.editable || search.length > 0)) {
- return null;
- } else {
- return this$.props.renderValue(item);
- }
- },
- onKeyboardSelectionFailed: function(which){
- return onSearchChange("", function(){
- return onOpenChange(false, function(){
- return this$.props.onKeyboardSelectionFailed(which);
- });
- });
- },
- uid: function(item){
- return {
- uid: this$.props.uid(item),
- open: open,
- search: search
- };
- },
- serialize: function(items){
- return serialize(items[0]);
- },
- onBlur: function(e){
- var onBlurResetsInput;
- onBlurResetsInput = this$.props.onBlurResetsInput;
- (function(){
- return function(callback){
- if (search.length > 0 && onBlurResetsInput) {
- return onSearchChange("", callback);
- } else {
- return callback();
- }
- };
- })()(function(){
- return this$.props.onBlur({
- value: value,
- open: open,
- originalEvent: e
- });
- });
- },
- onFocus: function(e){
- this$.props.onFocus({
- value: value,
- open: open,
- originalEvent: e
- });
- },
- onPaste: (function(){
- var ref$;
- switch (false) {
- case typeof ((ref$ = this.props) != null ? ref$.valueFromPaste : void 8) !== 'undefined':
- return this.props.onPaste;
- default:
- return function(e){
- var clipboardData, valueFromPaste;
- clipboardData = e.clipboardData;
- valueFromPaste = this$.props.valueFromPaste(options, value, clipboardData.getData('text'));
- if (valueFromPaste) {
- (function(){
- return onValueChange(valueFromPaste, function(){
- return onSearchChange("", function(){
- return onOpenChange(false);
- });
- });
- })();
- return cancelEvent(e);
- }
- };
- }
- }.call(this)),
- placeholder: this.props.placeholder,
- style: this.props.style
- }, (function(){
- switch (false) {
- case typeof this.props.restoreOnBackspace !== 'function':
- return {
- restoreOnBackspace: this.props.restoreOnBackspace
- };
- default:
- return {};
- }
- }.call(this))), (function(){
- switch (false) {
- case typeof this.props.renderNoResultsFound !== 'function':
- return {
- renderNoResultsFound: function(){
- return this$.props.renderNoResultsFound(value, search);
- }
- };
- default:
- return {};
- }
- }.call(this))));
- };
- SimpleSelect.prototype.getComputedState = function(){
- var highlightedUid, open, search, value, values, ref$, onHighlightedUidChange, onOpenChange, onSearchChange, onValueChange, optionsFromChildren, unfilteredOptions, filteredOptions, newOption, options, this$ = this;
- highlightedUid = this.props.hasOwnProperty('highlightedUid')
- ? this.props.highlightedUid
- : this.state.highlightedUid;
- open = this.isOpen();
- search = this.props.hasOwnProperty('search')
- ? this.props.search
- : this.state.search;
- value = this.value();
- values = !!value || value === 0
- ? [value]
- : [];
- ref$ = map(function(p){
- var result;
- return result = (function(){
- switch (false) {
- case !(this.props.hasOwnProperty(p) && this.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(o, callback){
- this$.props[camelize("on-" + p + "-change")](o, function(){});
- return this$.setState({}, callback);
- };
- case !(this.props.hasOwnProperty(p) && !this.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(arg$, callback){
- return callback();
- };
- case !(!this.props.hasOwnProperty(p) && this.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(o, callback){
- var ref$;
- return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), function(){
- callback();
- return this$.props[camelize("on-" + p + "-change")](o, function(){});
- });
- };
- case !(!this.props.hasOwnProperty(p) && !this.props.hasOwnProperty(camelize("on-" + p + "-change"))):
- return function(o, callback){
- var ref$;
- return this$.setState((ref$ = {}, ref$[p + ""] = o, ref$), callback);
- };
- }
- }.call(this$));
- })(
- ['highlightedUid', 'open', 'search', 'value']), onHighlightedUidChange = ref$[0], onOpenChange = ref$[1], onSearchChange = ref$[2], onValueChange = ref$[3];
- optionsFromChildren = (function(){
- var ref$;
- switch (false) {
- case !((ref$ = this.props) != null && ref$.children):
- return map(function(it){
- var ref$, value, children;
- if ((ref$ = it != null ? it.props : void 8) != null) {
- value = ref$.value, children = ref$.children;
- }
- return {
- label: children,
- value: value
- };
- })(
- toString$.call(this.props.children).slice(8, -1) === 'Array'
- ? this.props.children
- : [this.props.children]);
- default:
- return [];
- }
- }.call(this));
- unfilteredOptions = this.props.hasOwnProperty('options') ? (ref$ = this.props.options) != null
- ? ref$
- : [] : optionsFromChildren;
- filteredOptions = this.props.filterOptions(unfilteredOptions, search);
- newOption = (function(){
- switch (false) {
- case typeof this.props.createFromSearch !== 'function':
- return this.props.createFromSearch(filteredOptions, search);
- default:
- return null;
- }
- }.call(this));
- options = (!!newOption
- ? [(ref$ = import$({}, newOption), ref$.newOption = true, ref$)]
- : []).concat(filteredOptions);
- return {
- highlightedUid: highlightedUid,
- open: open,
- search: search,
- value: value,
- values: values,
- onHighlightedUidChange: onHighlightedUidChange,
- onOpenChange: function(open, callback){
- onOpenChange(open, function(){
- callback();
- if (!!this$.props.editable && (this$.isOpen() && !!value)) {
- return onSearchChange(this$.props.editable(value) + "" + (search.length === 1 ? search : ''), function(){
- return this$.highlightFirstSelectableOption(function(){});
- });
- }
- });
- },
- onSearchChange: onSearchChange,
- onValueChange: onValueChange,
- filteredOptions: filteredOptions,
- options: options
- };
- };
- SimpleSelect.prototype.firstOptionIndexToHighlight = function(options, value){
- var index, optionIndexToHighlight, search;
- index = !!value ? findIndex(function(it){
- return isEqualToObject(it, value);
- }, options) : undefined;
- optionIndexToHighlight = (function(){
- var ref$;
- switch (false) {
- case typeof index === 'undefined':
- return index;
- case options.length !== 1:
- return 0;
- case typeof ((ref$ = options[0]) != null ? ref$.newOption : void 8) !== 'undefined':
- return 0;
- default:
- if (all(function(it){
- return typeof it.selectable === 'boolean' && !it.selectable;
- })(
- drop(1)(
- options))) {
- return 0;
- } else {
- return 1;
- }
- }
- }());
- search = this.props.hasOwnProperty('search')
- ? this.props.search
- : this.state.search;
- return this.props.firstOptionIndexToHighlight(optionIndexToHighlight, options, value, search);
- };
- SimpleSelect.prototype.focus = function(){
- this.refs.select.focus();
- };
- SimpleSelect.prototype.blur = function(){
- this.refs.select.blur();
- };
- SimpleSelect.prototype.highlightFirstSelectableOption = function(callback){
- var ref$, options, value;
- callback == null && (callback = function(){});
- if (this.state.open) {
- ref$ = this.getComputedState(), options = ref$.options, value = ref$.value;
- this.refs.select.highlightAndScrollToSelectableOption(this.firstOptionIndexToHighlight(options, value), 1, callback);
- } else {
- callback();
- }
- };
- SimpleSelect.prototype.value = function(){
- if (this.props.hasOwnProperty('value')) {
- return this.props.value;
- } else {
- return this.state.value;
- }
- };
- SimpleSelect.prototype.isOpen = function(){
- if (this.props.hasOwnProperty('open')) {
- return this.props.open;
- } else {
- return this.state.open;
- }
- };
- return SimpleSelect;
- }(React.Component));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
- function curry$(f, bound){
- var context,
- _curry = function(args) {
- return f.length > 1 ? function(){
- var params = args ? args.concat() : [];
- context = bound ? context || this : this;
- return params.push.apply(params, arguments) <
- f.length && arguments.length ?
- _curry.call(context, params) : f.apply(context, params);
- } : f;
- };
- return _curry();
- }
-}).call(this);
diff --git a/src/SimpleSelect.ls b/src/SimpleSelect.ls
index 6194b16..e02a365 100644
--- a/src/SimpleSelect.ls
+++ b/src/SimpleSelect.ls
@@ -1,12 +1,15 @@
{all, any, drop, camelize, difference, filter, find, find-index, id, last, map, reject} = require \prelude-ls
{is-equal-to-object} = require \prelude-extension
-{create-factory}:React = require \react
-{div, img, span} = require \react-dom-factories
+{create-factory} = require \./utils
+{create-ref}:React = require \react
+div = create-factory \div
+img = create-factory \img
+span = create-factory \span
+
ReactSelectize = create-factory require \./ReactSelectize
{cancel-event} = require \./utils
module.exports = class SimpleSelect extends React.Component
-
# get-default-props :: () -> Props
@default-props =
# autofocus :: Boolean
@@ -64,6 +67,7 @@ module.exports = class SimpleSelect extends React.Component
scroll-lock: false
search: ""
value: @props?.default-value
+ @select-ref = create-ref!
# render :: () -> ReactElement
@@ -114,7 +118,7 @@ module.exports = class SimpleSelect extends React.Component
transition-leave
transition-leave-timeout
- ref: \select
+ ref: @select-ref
# ANCHOR
anchor: last values
@@ -358,17 +362,17 @@ module.exports = class SimpleSelect extends React.Component
# fires the on-focus event after moving the cursor to the search input (with the reason = function-call)
# fires the callback after the dropdown becomes visible
# focus :: (() -> ()) -> ()
- focus: !-> @refs.select.focus!
+ focus: !-> @select-ref.current.focus!
# fires the on-blur event after closing the dropdown (with the reason = function-call)
# blur :: Callback -> ()
- blur: !-> @refs.select.blur!
+ blur: !-> @select-ref.current.blur!
# highlight-the-first-selectable-option :: (() -> ()) -> ()
highlight-first-selectable-option: (callback = (->)) !->
if @state.open
{options, value} = @get-computed-state!
- @refs.select.highlight-and-scroll-to-selectable-option do
+ @select-ref.current.highlight-and-scroll-to-selectable-option do
@first-option-index-to-highlight options, value
1
callback
@@ -380,4 +384,4 @@ module.exports = class SimpleSelect extends React.Component
value: -> if @props.has-own-property \value then @props.value else @state.value
# is-open :: () -> Boolean
- is-open: -> if @props.has-own-property \open then @props.open else @state.open
\ No newline at end of file
+ is-open: -> if @props.has-own-property \open then @props.open else @state.open
diff --git a/src/SvgWrapper.js b/src/SvgWrapper.js
deleted file mode 100644
index 0b28404..0000000
--- a/src/SvgWrapper.js
+++ /dev/null
@@ -1,30 +0,0 @@
-(function(){
- var React, svg, findDOMNode, SvgWrapper;
- React = require('react');
- svg = require('react-dom-factories').svg;
- findDOMNode = require('react-dom').findDOMNode;
- module.exports = SvgWrapper = (function(superclass){
- var prototype = extend$((import$(SvgWrapper, superclass).displayName = 'SvgWrapper', SvgWrapper), superclass).prototype, constructor = SvgWrapper;
- SvgWrapper.prototype.render = function(){
- return svg(this.props);
- };
- SvgWrapper.prototype.componentDidMount = function(){
- findDOMNode(this).setAttribute('focusable', false);
- };
- function SvgWrapper(){
- SvgWrapper.superclass.apply(this, arguments);
- }
- return SvgWrapper;
- }(React.PureComponent));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/SvgWrapper.ls b/src/SvgWrapper.ls
index 32c0619..f1621d1 100644
--- a/src/SvgWrapper.ls
+++ b/src/SvgWrapper.ls
@@ -1,5 +1,6 @@
React = require \react
-{svg} = require \react-dom-factories
+{create-factory} = require \./utils
+svg = create-factory \svg
{find-DOM-node} = require \react-dom
# set the focusable attribute to false, this prevents having to press the tab key multiple times in IE
@@ -10,4 +11,4 @@ module.exports = class SvgWrapper extends React.PureComponent
# component-did-mount :: () -> Void
component-did-mount: !->
- find-DOM-node @ .set-attribute \focusable, false
\ No newline at end of file
+ find-DOM-node @ .set-attribute \focusable, false
diff --git a/src/ToggleButton.js b/src/ToggleButton.js
deleted file mode 100644
index eced336..0000000
--- a/src/ToggleButton.js
+++ /dev/null
@@ -1,46 +0,0 @@
-(function(){
- var React, createFactory, path, SvgWrapper, ToggleButton;
- React = require('react'), createFactory = React.createFactory;
- path = require('react-dom-factories').path;
- SvgWrapper = createFactory(require('./SvgWrapper'));
- module.exports = ToggleButton = (function(superclass){
- var prototype = extend$((import$(ToggleButton, superclass).displayName = 'ToggleButton', ToggleButton), superclass).prototype, constructor = ToggleButton;
- ToggleButton.defaultProps = {
- open: false,
- flipped: false
- };
- ToggleButton.prototype.render = function(){
- return SvgWrapper({
- className: 'react-selectize-toggle-button',
- style: {
- width: 10,
- height: 8
- }
- }, path({
- d: (function(){
- switch (false) {
- case !((this.props.open && !this.props.flipped) || (!this.props.open && this.props.flipped)):
- return "M0 6 L5 1 L10 6 Z";
- default:
- return "M0 1 L5 6 L10 1 Z";
- }
- }.call(this))
- }));
- };
- function ToggleButton(){
- ToggleButton.superclass.apply(this, arguments);
- }
- return ToggleButton;
- }(React.PureComponent));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/ToggleButton.ls b/src/ToggleButton.ls
index f39d8de..80e5ddd 100644
--- a/src/ToggleButton.ls
+++ b/src/ToggleButton.ls
@@ -1,5 +1,6 @@
-{create-factory}:React = require \react
-{path} = require \react-dom-factories
+{create-factory} = require \./utils
+React = require \react
+path = create-factory \path
SvgWrapper = create-factory require \./SvgWrapper
module.exports = class ToggleButton extends React.PureComponent
@@ -18,4 +19,4 @@ module.exports = class ToggleButton extends React.PureComponent
height: 8
path d:
| (@props.open and !@props.flipped) or (!@props.open and @props.flipped) => "M0 6 L5 1 L10 6 Z"
- | _ => "M0 1 L5 6 L10 1 Z"
\ No newline at end of file
+ | _ => "M0 1 L5 6 L10 1 Z"
diff --git a/src/ValueWrapper.js b/src/ValueWrapper.js
deleted file mode 100644
index f6ca3cc..0000000
--- a/src/ValueWrapper.js
+++ /dev/null
@@ -1,34 +0,0 @@
-(function(){
- var React, div, isEqualToObject, ValueWrapper;
- React = require('react');
- div = require('react-dom-factories').div;
- isEqualToObject = require('prelude-extension').isEqualToObject;
- module.exports = ValueWrapper = (function(superclass){
- var prototype = extend$((import$(ValueWrapper, superclass).displayName = 'ValueWrapper', ValueWrapper), superclass).prototype, constructor = ValueWrapper;
- ValueWrapper.defaultProps = {};
- ValueWrapper.prototype.render = function(){
- return div({
- className: 'value-wrapper'
- }, this.props.renderItem(this.props.item));
- };
- ValueWrapper.prototype.shouldComponentUpdate = function(nextProps){
- var ref$;
- return !isEqualToObject(nextProps != null ? nextProps.uid : void 8, (ref$ = this.props) != null ? ref$.uid : void 8);
- };
- function ValueWrapper(){
- ValueWrapper.superclass.apply(this, arguments);
- }
- return ValueWrapper;
- }(React.Component));
- function extend$(sub, sup){
- function fun(){} fun.prototype = (sub.superclass = sup).prototype;
- (sub.prototype = new fun).constructor = sub;
- if (typeof sup.extended == 'function') sup.extended(sub);
- return sub;
- }
- function import$(obj, src){
- var own = {}.hasOwnProperty;
- for (var key in src) if (own.call(src, key)) obj[key] = src[key];
- return obj;
- }
-}).call(this);
diff --git a/src/ValueWrapper.ls b/src/ValueWrapper.ls
index e1983a8..a2ed2a3 100644
--- a/src/ValueWrapper.ls
+++ b/src/ValueWrapper.ls
@@ -1,5 +1,6 @@
React = require \react
-{div} = require \react-dom-factories
+{create-factory} = require \./utils
+div = create-factory \div
{is-equal-to-object} = require \prelude-extension
module.exports = class ValueWrapper extends React.Component
@@ -19,4 +20,4 @@ module.exports = class ValueWrapper extends React.Component
# should-component-update :: Props -> Boolean
should-component-update: (next-props) ->
- !(next-props?.uid `is-equal-to-object` @props?.uid)
\ No newline at end of file
+ !(next-props?.uid `is-equal-to-object` @props?.uid)
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index eb16b12..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-(function(){
- var HighlightedText, SimpleSelect, MultiSelect, ReactSelectize;
- HighlightedText = require('./HighlightedText');
- SimpleSelect = require('./SimpleSelect');
- MultiSelect = require('./MultiSelect');
- ReactSelectize = require('./ReactSelectize');
- module.exports = {
- HighlightedText: HighlightedText,
- SimpleSelect: SimpleSelect,
- MultiSelect: MultiSelect,
- ReactSelectize: ReactSelectize
- };
-}).call(this);
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index f4c8062..0000000
--- a/src/utils.js
+++ /dev/null
@@ -1,20 +0,0 @@
-(function(){
- var ref$, filter, map, objToPairs, Str, cancelEvent, classNameFromObject, out$ = typeof exports != 'undefined' && exports || this;
- ref$ = require('prelude-ls'), filter = ref$.filter, map = ref$.map, objToPairs = ref$.objToPairs, Str = ref$.Str;
- out$.cancelEvent = cancelEvent = function(e){
- e.preventDefault();
- e.stopPropagation();
- false;
- };
- out$.classNameFromObject = classNameFromObject = function(it){
- return Str.join(' ')(
- map(function(it){
- return it[0];
- })(
- filter(function(it){
- return !!it[1];
- })(
- objToPairs(
- it))));
- };
-}).call(this);
diff --git a/src/utils.ls b/src/utils.ls
index dd8b661..9d4746a 100644
--- a/src/utils.ls
+++ b/src/utils.ls
@@ -1,4 +1,5 @@
{filter, map, obj-to-pairs, Str} = require \prelude-ls
+{createElement} = require \react
# cancel-event :: Event -> Void
export cancel-event = (e) !->
@@ -13,4 +14,7 @@ export class-name-from-object = ->
|> obj-to-pairs
|> filter -> !!it.1
|> map (.0)
- |> Str.join ' '
\ No newline at end of file
+ |> Str.join ' '
+
+export create-factory = (type) ->
+ createElement.bind null, type
diff --git a/test/common-tests.ls b/test/common-tests.ls
index 01a980f..97f23df 100644
--- a/test/common-tests.ls
+++ b/test/common-tests.ls
@@ -4,7 +4,10 @@ require! \assert
# React
{create-element} = require \react
-{div, input, option, span} = require \react-dom-factories
+div = create-element \div
+input = create-element \input
+option = create-element \option
+span = create-element \span
{find-DOM-node, render, unmount-component-at-node} = require \react-dom
# TestUtils
diff --git a/test/highlighted-text.ls b/test/highlighted-text.ls
index e1d8790..d5f05fa 100644
--- a/test/highlighted-text.ls
+++ b/test/highlighted-text.ls
@@ -4,7 +4,9 @@ require! \../src/HighlightedText
# React
{create-element} = require \react
-{div, option, span} = require \react-dom-factories
+div = create-element \div
+option = create-element \option
+span = create-element \span
{find-DOM-node} = require \react-dom
# TestUtils
@@ -34,4 +36,4 @@ describe "HighlightedText", ->
specify "must apply props.highlightStyle when highlight is true", ->
highlighted-text = create-highlighted-text do
highlight-style: font-weight: \bold
- assert.equal (find-DOM-node (scry-rendered-DOM-components-with-class highlighted-text, \highlight).0).style.font-weight, \bold
\ No newline at end of file
+ assert.equal (find-DOM-node (scry-rendered-DOM-components-with-class highlighted-text, \highlight).0).style.font-weight, \bold
diff --git a/test/multi-select.ls b/test/multi-select.ls
index 92f7b9f..a917b2a 100644
--- a/test/multi-select.ls
+++ b/test/multi-select.ls
@@ -5,7 +5,9 @@ ReactSelectize = require \../src/index.ls
# React
{create-element} = require \react
-{div, option, span} = require \react-dom-factories
+div = create-element \div
+option = create-element \option
+span = create-element \span
{find-DOM-node} = require \react-dom
# TestUtils
diff --git a/test/simple-select.ls b/test/simple-select.ls
index 298b071..b5db3f4 100644
--- a/test/simple-select.ls
+++ b/test/simple-select.ls
@@ -6,6 +6,9 @@ ReactSelectize = require \../src/index.ls
# React
{create-element} = require \react
{div, option, span} = require \react-dom-factories
+div = create-element \div
+option = create-element \option
+span = create-element \span
create-react-class = require \create-react-class
{find-DOM-node} = require \react-dom
React Selectize
-
-
- - A flexible & stateless Select component for ReactJS -
-- It's a lot like Selectize but for ReactJS. - Developed by @furqanZafar. Licensed under the Apache License, Version 2.0, so do whatever you want with it! -
-
-
-
-
-
-
- Features
- -
-
- Drop in replacement for React.DOM.Select -
- Customizable themes -
- Stateless, therefore extremely flexible & extensible -
- Clean and compact API fully documented on GitHub -
- Multiselect support -
- Option groups -
- Custom filtering -
- Search highlighting -
- Custom option & value rendering -
- Animated Dropdown -
- Remote data loading -
- Tagging or item creation -
- Restore on backspace -
- Editable value -
- Caret between items -
- Customizable dropdown direction -
- Mark options as unselectable -
- Disable selected options instead of removing them -
- Absolute positioned overlay, "Tether"ed to the search field - -
-
- Install
- -
-
- npm install react-selectize -
- Source & Documentation | - API Reference | - Changelog -
-