From 2ff09f597a96fbcb4f01fa9bf3a8f8179120fc06 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Sun, 25 Jun 2017 10:02:56 +0300 Subject: [PATCH 01/13] fix ie10 bug when scrolling with the scrollbar can't hide dropdown by clicking outside, replace some ref strings with ref functions --- src/DropdownMenu.ls | 27 ++++++++++---------- src/ReactSelectize.ls | 20 +++++++-------- src/ResizableInput.ls | 57 ++++++++++++++++++++++++++----------------- 3 files changed, 57 insertions(+), 47 deletions(-) diff --git a/src/DropdownMenu.ls b/src/DropdownMenu.ls index 48b983f..59853b2 100644 --- a/src/DropdownMenu.ls +++ b/src/DropdownMenu.ls @@ -85,6 +85,7 @@ module.exports = create-react-class do # render-animated-dropdown :: ComputedState -> ReactElement render-animated-dropdown: ({dynamic-class-name}:computed-state) -> + this-ref = @ if !!@props.transition-enter or !!@props.transition-leave ReactCSSTransitionGroup do component: \div @@ -94,7 +95,7 @@ module.exports = create-react-class do transition-enter-timeout: @props.transition-enter-timeout transition-leave-timeout: @props.transition-leave-timeout class-name: "dropdown-menu-wrapper #{dynamic-class-name}" - ref: (element) -> @dropdown-menu-wrapper = element + ref: (element) -> this-ref.dropdown-menu-wrapper = element @render-dropdown computed-state else @@ -129,23 +130,20 @@ module.exports = create-react-class do switch | (typeof option?.selectable == \boolean) and !option.selectable => on-click: cancel-event | _ => - on-click: !~> - if !@props.scroll-lock - <~ @props.on-highlighted-uid-change uid - @props.on-option-click @props.highlighted-uid + on-click: !~> @props.on-option-click @props.highlighted-uid on-mouse-over: ({current-target}) !~> - if 'ontouchstart' of window => return false if !@props.scroll-lock <~ @props.on-highlighted-uid-change uid # render-dropdown :: ComputedState -> ReactElement render-dropdown: ({dynamic-class-name}) -> + this-ref = @ if @props.open # DROPDOWN DivWrapper do class-name: "dropdown-menu #{dynamic-class-name}" - ref: (element) -> !!element && @dropdown-menu = element + ref: (element) -> this-ref.dropdown-menu = element # on-height-change :: Number -> () on-height-change: (height) !~> @@ -189,12 +187,13 @@ module.exports = create-react-class do # component-did-update :: () -> () component-did-update: !-> - dropdown-menu = find-DOM-node @dropdown-menu-wrapper ? @dropdown-menu - ..?style.bottom = switch - | @props.dropdown-direction == -1 => - "#{@props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom}px" - - | _ => "" + dropdown-menu = find-DOM-node (@dropdown-menu-wrapper or @dropdown-menu) + return if !@props.open or !dropdown-menu + dropdown-menu.style.bottom = switch + | @props.dropdown-direction == -1 => + "#{@props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom}px" + + | _ => "" # highlight-and-scroll-to-option :: Int, (() -> ())? -> () highlight-and-scroll-to-option: (index, callback = (->)) !-> @@ -246,4 +245,4 @@ module.exports = create-react-class do callback 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 + uid-to-string: (uid) -> (if typeof uid == \object then JSON.stringify else id) uid \ No newline at end of file diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index 7643c5c..0330cd1 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -87,6 +87,7 @@ module.exports = create-react-class do # render :: () -> ReactElement render: -> + this-ref = @ anchor-index = | (typeof @props.anchor == \undefined) or @props.anchor == null => -1 | _ => (find-index (~> it `@is-equal-to-object` @props.anchor), @props.values) ? @props.values.length - 1 @@ -160,8 +161,8 @@ module.exports = create-react-class do # SEARCH INPUT BOX ResizableInput do {disabled: @props.disabled} <<< @props.input-props <<< { - ref: \search - type: \text + ref: (element) -> + this-ref.search-element = element value: @props.search # update the search text & highlight the first option @@ -187,8 +188,8 @@ module.exports = create-react-class do @props.on-focus e 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) + # to prevent closing the dropdown when the user tries to click & drag the scrollbar in IE + return @.focus! if @refs.dropdown-menu and (document.active-element == (find-DOM-node @refs.dropdown-menu) or document.active-element.parent-node == (find-DOM-node @refs.dropdown-menu)) <~ @close-dropdown @@ -431,24 +432,23 @@ module.exports = create-react-class do callback # blur :: () -> () - blur: !-> @refs.search.blur! + blur: !-> @search-element.blur! # focus :: () -> () - focus: !-> @refs.search.focus! + focus: !-> @search-element.focus! # move the cursor to the input field, without toggling the dropdown # focus-on-input :: () -> () focus-on-input: !-> - input = find-DOM-node @refs.search - if input != document.active-element + if @search-element != document.active-element @focus-lock = true # this triggers the DOM focus event on the input control, where we use @focus-lock to determine # if the event was triggered by external action or by invoking @focus-on-input method. - input.focus! + @search-element.focus! # move the cursor to the end of the search field - input.value = input.value + @search-element.value = @search-element.value # highlights the first selectable option & moves the cursor to end of the search field # highlight-and-focus :: () -> () diff --git a/src/ResizableInput.ls b/src/ResizableInput.ls index 4f24433..65d91e3 100644 --- a/src/ResizableInput.ls +++ b/src/ResizableInput.ls @@ -1,49 +1,58 @@ +React = require \react +prop-types = require \prop-types {each, obj-to-pairs} = require \prelude-ls {DOM:{input}, create-factory}:React = require \react -create-react-class = require \create-react-class -{find-DOM-node} = require \react-dom -module.exports = create-react-class do +class ResizableInput extends React.Component + -> + # get-default-props :: () -> Props + @default-props = + type: prop-types.string - display-name: \ResizableInput + constructor: -> + @autosize = @autosize.bind @ + @focus = @focus.bind @ + @blur = @blur.bind @ # render :: () -> ReactElement render: -> - input {} <<< @props <<< - type: \input - class-name: \resizable-input + this-ref = @ + input do + do + class-name: \resizable-input + ref: (element) -> + this-ref.input-element = element + <<< @props # autosize :: () -> () autosize: -> - # reset the width - input-element = (find-DOM-node @) - ..style.width = \0px + @input-element.style.width = \0px - if input-element.value.length == 0 + if @input-element.value.length == 0 # the minimum width required for the cursor to be visible - input-element.style.width = if !!input-element?.current-style then \4px else \2px + @input-element.style.width = if !!@input-element?.current-style then \4px else \2px else # modern browsers - if input-element.scroll-width > 0 - input-element.style.width = "#{2 + input-element.scroll-width}px" + if @input-element.scroll-width > 0 + @input-element.style.width = "#{2 + @input-element.scroll-width}px" # IE / Edge else # create a dummy input dummpy-input = document.create-element \div - ..innerHTML = input-element.value + ..innerHTML = @input-element.value # copy all the styles from search field to dummy input ( - if !!input-element.current-style - input-element.current-style + if !!@input-element.current-style + @input-element.current-style else - document.default-view ? window .get-computed-style input-element + document.default-view ? window .get-computed-style @input-element ) |> obj-to-pairs |> each ([key, value]) -> dummpy-input.style[key] = value @@ -51,17 +60,19 @@ module.exports = create-react-class do # add the dummy input element to document.body and measure the text width document.body.append-child dummpy-input - input-element.style.width = "#{4 + dummpy-input.client-width}px" + @input-element.style.width = "#{4 + dummpy-input.client-width}px" document.body.remove-child dummpy-input # component-did-mount :: () -> () - component-did-mount: !-> @autosize! + component-did-mount: !-> @input-element and @autosize! # component-did-update :: Props -> UIState -> () - component-did-update: !-> @autosize! + component-did-update: !-> @input-element and @autosize! # blur :: () -> () - blur: -> find-DOM-node @ .blur! + blur: -> @input-element.blur! # focus :: () -> () - focus: -> find-DOM-node @ .focus! \ No newline at end of file + focus: -> @input-element.focus! + +module.exports = ResizableInput \ No newline at end of file From 1e208c84426cc2e4bcfd3114480c16109d611ca8 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Sun, 25 Jun 2017 10:19:50 +0300 Subject: [PATCH 02/13] revert removing the safari bug fix by jmoulin-vp, and add prop-types lib to the package.json file --- src/DropdownMenu.ls | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/DropdownMenu.ls b/src/DropdownMenu.ls index 59853b2..caf1074 100644 --- a/src/DropdownMenu.ls +++ b/src/DropdownMenu.ls @@ -130,8 +130,12 @@ module.exports = create-react-class do switch | (typeof option?.selectable == \boolean) and !option.selectable => on-click: cancel-event | _ => - on-click: !~> @props.on-option-click @props.highlighted-uid + on-click: !~> + if !@props.scroll-lock + <~ @props.on-highlighted-uid-change uid + @props.on-option-click @props.highlighted-uid on-mouse-over: ({current-target}) !~> + if 'ontouchstart' of window => return false if !@props.scroll-lock <~ @props.on-highlighted-uid-change uid @@ -245,4 +249,4 @@ module.exports = create-react-class do callback 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 From a498826325dcd36fd8b6ee7907abed831cf0b6c0 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Sun, 25 Jun 2017 10:23:09 +0300 Subject: [PATCH 03/13] add prop-types to package.json file --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index 1cc0ca2..0d15ad8 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ }, "peerDependencies": { "create-react-class": "^15.0.0", + "prop-types": "^15.5.0", "react": "^0.14.0 || ^15.0.0", "react-transition-group": "^1.1.2", "react-dom": "^0.14.0 || ^15.0.0" @@ -23,6 +24,7 @@ "browserify-shim": { "create-react-class": "global:createReactClass", "prelude-extension": "global:preludeExtension", + "prop-types": "global:PropTypes", "react": "global:React", "react-transition-group": "global:ReactTransitionGroup", "react-dom": "global:ReactDOM", @@ -53,6 +55,7 @@ "mocha": "^2.3.3", "mocha-lcov-reporter": "^1.0.0", "nib": "^1.1.0", + "prop-types": "^15.5.0", "react": "^0.14.0 || ^15.0.0", "react-transition-group": "^1.1.2", "react-dom": "^0.14.0 || ^15.0.0", From e3c3c4781e70869d4e824dc05ae647f609cc8626 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Sun, 25 Jun 2017 11:12:42 +0300 Subject: [PATCH 04/13] update changed search input ref location --- test/common-tests.ls | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/common-tests.ls b/test/common-tests.ls index 746124b..0b7dee3 100644 --- a/test/common-tests.ls +++ b/test/common-tests.ls @@ -35,7 +35,7 @@ module.exports = (select-class) !-> specify "non empty select must not have placeholder", -> {refs}:select = create-select! - input = find-DOM-node refs.select.refs.search + input = find-DOM-node refs.select.search-element ..value = \test change input component-with-class-must-not-exist select, \react-selectize-placeholder From 25a548f2848298a200fc35585b3881e6cd07e4ca Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Sun, 25 Jun 2017 12:04:07 +0300 Subject: [PATCH 05/13] added react-dom-factories so lib will be compatible with react v16 --- package.json | 7 +++++-- public/components/AceEditor.ls | 3 ++- public/components/App.ls | 3 ++- public/components/Example.ls | 3 ++- public/examples/simple/Children.ls | 2 +- src/DivWrapper.ls | 2 +- src/DropdownMenu.ls | 3 ++- src/HighlightedText.ls | 2 +- src/MultiSelect.ls | 3 ++- src/OptionWrapper.ls | 2 +- src/ReactSelectize.ls | 3 ++- src/ResizableInput.ls | 4 ++-- src/SimpleSelect.ls | 3 ++- src/SvgWrapper.ls | 2 +- src/ValueWrapper.ls | 2 +- 15 files changed, 27 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 0d15ad8..29aeb07 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "prop-types": "^15.5.0", "react": "^0.14.0 || ^15.0.0", "react-transition-group": "^1.1.2", - "react-dom": "^0.14.0 || ^15.0.0" + "react-dom": "^0.14.0 || ^15.0.0", + "react-dom-factories": "^1.0.0" }, "browserify-shim": { "create-react-class": "global:createReactClass", @@ -28,6 +29,7 @@ "react": "global:React", "react-transition-group": "global:ReactTransitionGroup", "react-dom": "global:ReactDOM", + "react-dom-factories": "global:ReactDOMFactories", "tether": "global:Tether" }, "devDependencies": { @@ -57,10 +59,11 @@ "nib": "^1.1.0", "prop-types": "^15.5.0", "react": "^0.14.0 || ^15.0.0", - "react-transition-group": "^1.1.2", "react-dom": "^0.14.0 || ^15.0.0", + "react-dom-factories": "^1.0.0", "react-router": "3.0.5", "react-tools": "^0.13.3", + "react-transition-group": "^1.1.2", "run-sequence": "^1.1.5", "should": "^7.1.0", "underscore": "^1.8.3", diff --git a/public/components/AceEditor.ls b/public/components/AceEditor.ls index ffd77f6..5b27d2c 100644 --- a/public/components/AceEditor.ls +++ b/public/components/AceEditor.ls @@ -6,7 +6,8 @@ require \brace/mode/jsx require \brace/mode/livescript require \brace/theme/chrome {each} = require \prelude-ls -{DOM:{div}}:React = require \react +React = require \react +{div} = require \react-dom-factories create-react-class = require \create-react-class module.exports = create-react-class { diff --git a/public/components/App.ls b/public/components/App.ls index 1b252e1..d76c8a1 100644 --- a/public/components/App.ls +++ b/public/components/App.ls @@ -5,7 +5,8 @@ require \livescript {concat-map, drop, filter, find, fold, group-by, id, keys, last, map, Obj, obj-to-pairs, pairs-to-obj, reject, reverse, Str, sort-by, take, unique, unique-by, values, zip-with} = require \prelude-ls {partition-string} = require \prelude-extension -{create-factory, DOM:{a, button, div, form, h1, h2, img, input, li, ol, option, span, ul}}:React = require \react +{create-factory}:React = require \react +{a, button, div, form, h1, h2, img, input, li, ol, option, span, ul} = require \react-dom-factories {find-DOM-node, render} = require \react-dom require! \react-router Link = create-factory react-router.Link diff --git a/public/components/Example.ls b/public/components/Example.ls index 78677ef..52c884e 100644 --- a/public/components/Example.ls +++ b/public/components/Example.ls @@ -1,5 +1,6 @@ {filter, find, map, pairs-to-obj} = require \prelude-ls -{create-factory, DOM:{div, span}}:React = require \react +{create-factory}:React = require \react +{div, span} = require \react-dom-factories {find-DOM-node} = require \react-dom AceEditor = create-factory require \./AceEditor.ls {debounce} = require \underscore diff --git a/public/examples/simple/Children.ls b/public/examples/simple/Children.ls index 87a100e..fd8a787 100644 --- a/public/examples/simple/Children.ls +++ b/public/examples/simple/Children.ls @@ -5,7 +5,7 @@ Form = create-react-class do # render :: a -> ReactElement render: -> - React.DOM.form do + form do action: \/ SimpleSelectFactory do diff --git a/src/DivWrapper.ls b/src/DivWrapper.ls index 1a9c376..efe15cc 100644 --- a/src/DivWrapper.ls +++ b/src/DivWrapper.ls @@ -1,4 +1,4 @@ -{DOM:{div}} = require \react +{div} = require \react-dom-factories create-react-class = require \create-react-class # used to detect when the dropdown has been added/removed from dom, diff --git a/src/DropdownMenu.ls b/src/DropdownMenu.ls index caf1074..8408421 100644 --- a/src/DropdownMenu.ls +++ b/src/DropdownMenu.ls @@ -2,7 +2,8 @@ {filter, id, map} = require \prelude-ls {is-equal-to-object} = require \prelude-extension -{DOM:{div, input, span}, create-factory}:React = require \react +{create-factory}:React = require \react +{div, input, span} = require \react-dom-factories create-react-class = require \create-react-class {find-DOM-node} = require \react-dom ReactCSSTransitionGroup = create-factory require \react-transition-group/CSSTransitionGroup diff --git a/src/HighlightedText.ls b/src/HighlightedText.ls index eda1aaf..8e61f8c 100644 --- a/src/HighlightedText.ls +++ b/src/HighlightedText.ls @@ -1,4 +1,4 @@ -{DOM:{div, span}}:React = require \react +{div, span} = require \react-dom-factories create-react-class = require \create-react-class {map} = require \prelude-ls diff --git a/src/MultiSelect.ls b/src/MultiSelect.ls index dbcb235..df8db19 100644 --- a/src/MultiSelect.ls +++ b/src/MultiSelect.ls @@ -1,7 +1,8 @@ {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, DOM:{div, img, span}}:React = require \react +{create-factory}:React = require \react +{div, img, span} = require \react-dom-factories create-react-class = require \create-react-class ReactSelectize = create-factory require \./ReactSelectize {cancel-event} = require \./utils diff --git a/src/OptionWrapper.ls b/src/OptionWrapper.ls index 26a1b6f..8bd06a3 100644 --- a/src/OptionWrapper.ls +++ b/src/OptionWrapper.ls @@ -1,4 +1,4 @@ -{DOM:{div}} = require \react +{div} = require \react-dom-factories create-react-class = require \create-react-class {is-equal-to-object} = require \prelude-extension {cancel-event} = require \./utils diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index 0330cd1..7555602 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -3,7 +3,8 @@ partition, reject, reverse, Str, sort-by, sum, values} = require \prelude-ls {clamp, is-equal-to-object} = require \prelude-extension -{DOM:{div, input, path, span, svg}, create-factory}:React = require \react +{create-factory}:React = require \react +{div, input, path, span, svg} = require \react-dom-factories create-react-class = require \create-react-class {find-DOM-node} = require \react-dom ToggleButton = create-factory require \./ToggleButton diff --git a/src/ResizableInput.ls b/src/ResizableInput.ls index 65d91e3..c0a0d43 100644 --- a/src/ResizableInput.ls +++ b/src/ResizableInput.ls @@ -1,7 +1,7 @@ -React = require \react +{create-factory}:React = require \react prop-types = require \prop-types {each, obj-to-pairs} = require \prelude-ls -{DOM:{input}, create-factory}:React = require \react +{input} = require \react-dom-factories class ResizableInput extends React.Component -> diff --git a/src/SimpleSelect.ls b/src/SimpleSelect.ls index e438b1d..240b1e8 100644 --- a/src/SimpleSelect.ls +++ b/src/SimpleSelect.ls @@ -1,6 +1,7 @@ {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, DOM:{div, img, span}}:React = require \react +{create-factory}:React = require \react +{div, img, span} = require \react-dom-factories create-react-class = require \create-react-class ReactSelectize = create-factory require \./ReactSelectize {cancel-event} = require \./utils diff --git a/src/SvgWrapper.ls b/src/SvgWrapper.ls index 60d6688..553d8c4 100644 --- a/src/SvgWrapper.ls +++ b/src/SvgWrapper.ls @@ -1,4 +1,4 @@ -{DOM:{svg}} = require \react +{svg} = require \react-dom-factories create-react-class = require \create-react-class {find-DOM-node} = require \react-dom diff --git a/src/ValueWrapper.ls b/src/ValueWrapper.ls index e35efaf..7b7c871 100644 --- a/src/ValueWrapper.ls +++ b/src/ValueWrapper.ls @@ -1,4 +1,4 @@ -{DOM:{div}} = require \react +{div} = require \react-dom-factories create-react-class = require \create-react-class {is-equal-to-object} = require \prelude-extension From 531f424c73725b9650200860dd29ad99811f918a Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 29 Jun 2017 09:54:42 +0300 Subject: [PATCH 06/13] fix missing type for resizable input, since inputProps is empty by default --- src/ReactSelectize.ls | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index 7555602..df8fe06 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -161,7 +161,7 @@ module.exports = create-react-class do # SEARCH INPUT BOX ResizableInput do - {disabled: @props.disabled} <<< @props.input-props <<< { + {disabled: @props.disabled, type: \text } <<< @props.input-props <<< { ref: (element) -> this-ref.search-element = element value: @props.search From e77db2764da4e0df76500c37b3857441b3197743 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 31 Aug 2017 18:00:23 +0300 Subject: [PATCH 07/13] Merge branch 'master' of https://github.com/furqanZafar/react-selectize # Conflicts: # package.json # src/DropdownMenu.ls # src/ResizableInput.ls --- .travis.yml | 2 +- CHANGELOG.md | 6 ++ README.md | 69 ++++++++++++++++------ gulpfile.ls | 3 +- package.json | 48 +++++++-------- public/components/AceEditor.ls | 1 - public/components/App.ls | 6 +- public/examples/multi/DropdownDirection.ls | 13 ++-- public/examples/simple/Children.ls | 2 +- src/DivWrapper.ls | 6 +- src/DropdownMenu.ls | 35 +++++------ src/HighlightedText.ls | 6 +- src/MultiSelect.ls | 26 ++++---- src/OptionWrapper.ls | 6 +- src/ReactSelectize.ls | 9 +-- src/ReactTether.ls | 1 - src/ResetButton.ls | 6 +- src/ResizableInput.ls | 19 +++--- src/SimpleSelect.ls | 27 ++++----- src/SvgWrapper.ls | 4 +- src/ToggleButton.ls | 8 +-- src/ValueWrapper.ls | 6 +- test/common-tests.ls | 5 +- test/highlighted-text.ls | 3 +- test/index.ls | 13 +++- test/multi-select.ls | 3 +- test/simple-select.ls | 3 +- test/utils.ls | 8 +-- 28 files changed, 188 insertions(+), 156 deletions(-) diff --git a/.travis.yml b/.travis.yml index 4b4c9f5..36bb1f8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: - - "0.10" + - "8.2.1" before script: - npm install -g gulp script: diff --git a/CHANGELOG.md b/CHANGELOG.md index 6e52501..e1e3691 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # React Selectize +## 3.0.1 / 29th July 2017 +* fix peer dependencies react-transition-group@1.1.2 instead of the latest version + +## 3.0.0 / 29th July 2017 +* support for React 16 & node 8.2.1 thanks @elisherer + ## 2.1.0 / 1st December 2016 * added `on-blur-resets-input` thanks @dcalhoun diff --git a/README.md b/README.md index 10204f7..69814e5 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,10 @@ styles & features inspired by [React Select](http://jedwatson.github.io/react-se [![](http://i.imgsafe.co/rQmogzn.gif)](http://furqanZafar.github.io/react-selectize/) -- [Changelog](CHANGELOG.md) (last updated on 1st December 2016) +- [Changelog](CHANGELOG.md) (last updated on 29th July 2017) - [API Reference](API.md) + # Motivation * existing components do not behave like built-in React.DOM.* components. * existing components [synchronize props with state](http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html) an anti pattern, which makes them prone to bugs & difficult for contributers to push new features without breaking something else. @@ -42,36 +43,79 @@ styles & features inspired by [React Select](http://jedwatson.github.io/react-se * [Disable selected values](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=disable-selected) * [Absolute positioned overlay, "Tether"ed to the search field](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=tether) +## Deps +* [tether](https://github.com/HubSpot/tether) + +## Peer Deps +* create-react-class +* react +* react-dom +* react-transition-group +* react-dom-factories + ## Install * **npm:** `npm install react-selectize` +your package.json must look like this +``` +{ + "dependencies": { + "react": "^16.0.0-beta.2", + "react-addons-css-transition-group": "^15.6.0", + "react-addons-shallow-compare": "^15.6.0", + "react-dom": "^16.0.0-beta.2", + "react-dom-factories": "^1.0.0", + "react-selectize": "^3.0.1", + "react-transition-group": "^1.1.2" + } +} +``` + to include the default styles add the following import statement to your stylus file: `@import 'node_modules/react-selectize/themes/index.css'` * **bower:** -`bower install https://npmcdn.com/react-selectize@2.1.0/bower.zip` +`bower install https://unpkg.com/react-selectize@3.0.1/bower.zip` * **1998 script tag:** ```html + - - - + + + + + + - + - + + +
+ + ``` @@ -157,18 +201,9 @@ uid = {function(item){ ``` the `uid` function is used internally for performance optimization. -## Deps -* [tether](https://github.com/HubSpot/tether) - -## Peer Deps -* create-react-class -* react -* react-dom -* react-transition-group - ## Development * `npm install` -* `gulp` +* `npm start` * visit `localhost:8000` * `npm test` , `npm run coverage` for unit tests & coverage * for production build/test run `MINIFY=true gulp` diff --git a/gulpfile.ls b/gulpfile.ls index 61cdd87..77cb5a2 100644 --- a/gulpfile.ls +++ b/gulpfile.ls @@ -104,7 +104,8 @@ create-standalone-build = (minify, {file, directory}) -> .exclude \prelude-extension .exclude \react .exclude \react-dom - .exclude \react-transition-group + .exclude \react-dom-factories + .exclude \react-transition-group/CSSTransitionGroup .exclude \tether .transform browserify-shim .bundle! diff --git a/package.json b/package.json index 29aeb07..b98ed4f 100644 --- a/package.json +++ b/package.json @@ -1,74 +1,70 @@ { - "name": "react-selectize", - "version": "2.1.0", + "name": "react-selectize-custom", + "version": "3.0.1", "description": "A Stateless & Flexible Select component for React inspired by Selectize", "main": "src/index.js", "scripts": { + "start": "gulp", "test": "mocha test/index.ls --compilers ls:livescript", "coverage": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript", "coveralls": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript && cat coverage/lcov.info | coveralls" }, "author": "Furqan Zafar", "dependencies": { - "prelude-extension": "^0.0.13", + "prelude-extension": "^0.1.0", "prelude-ls": "^1.1.1", "tether": "^1.1.1" }, "peerDependencies": { - "create-react-class": "^15.0.0", - "prop-types": "^15.5.0", - "react": "^0.14.0 || ^15.0.0", + "react": "^15.0.0 || ^16.0.0", "react-transition-group": "^1.1.2", - "react-dom": "^0.14.0 || ^15.0.0", + "react-dom": "^15.0.0 || ^16.0.0", "react-dom-factories": "^1.0.0" }, "browserify-shim": { - "create-react-class": "global:createReactClass", "prelude-extension": "global:preludeExtension", - "prop-types": "global:PropTypes", "react": "global:React", "react-transition-group": "global:ReactTransitionGroup", "react-dom": "global:ReactDOM", "react-dom-factories": "global:ReactDOMFactories", + "react-transition-group/CSSTransitionGroup": "global:React.addons.CSSTransitionGroup", "tether": "global:Tether" }, "devDependencies": { "async-ls": "0.0.3", "brace": "git+https://github.com/furqanZafar/brace.git", "brfs": "^1.4.1", - "browserify": "^9.0.3", + "browserify": "^14.4.0", "browserify-shim": "^3.8.10", "coveralls": "^2.11.4", - "create-react-class": "^15.0.0", - "gulp": "^3.8.11", - "gulp-connect": "^2.2.0", - "gulp-if": "^1.2.5", - "gulp-livescript": "^2.4.0", + "gulp": "^3.9.1", + "gulp-connect": "^5.0.0", + "gulp-if": "^2.0.2", + "gulp-livescript": "^3.0.1", "gulp-rename": "^1.2.2", "gulp-streamify": "^1.0.2", "gulp-stylus": "^2.0.1", - "gulp-uglify": "^1.4.1", + "gulp-uglify": "^3.0.0", "gulp-util": "^3.0.4", - "istanbul": "^0.3.20", + "istanbul": "^0.4.5", "jquery-browserify": "^1.8.1", - "jsdom": "^3.1.2", + "jsdom": "^11.1.0", "liveify": "^2.0.0", - "livescript": "^1.4.0", - "mocha": "^2.3.3", + "livescript": "^1.5.0", + "mocha": "^3.4.2", "mocha-lcov-reporter": "^1.0.0", "nib": "^1.1.0", - "prop-types": "^15.5.0", - "react": "^0.14.0 || ^15.0.0", - "react-dom": "^0.14.0 || ^15.0.0", + "react": "^16.0.0-beta.2", + "react-dom": "^16.0.0-beta.2", "react-dom-factories": "^1.0.0", "react-router": "3.0.5", "react-tools": "^0.13.3", "react-transition-group": "^1.1.2", - "run-sequence": "^1.1.5", - "should": "^7.1.0", + "run-sequence": "^2.1.0", + "should": "^11.2.1", "underscore": "^1.8.3", "vinyl-source-stream": "^1.0.0", - "watchify": "^2.4.0" + "watchify": "^3.9.0" }, "repository": { "type": "git", diff --git a/public/components/AceEditor.ls b/public/components/AceEditor.ls index 5b27d2c..f6b014e 100644 --- a/public/components/AceEditor.ls +++ b/public/components/AceEditor.ls @@ -6,7 +6,6 @@ require \brace/mode/jsx require \brace/mode/livescript require \brace/theme/chrome {each} = require \prelude-ls -React = require \react {div} = require \react-dom-factories create-react-class = require \create-react-class diff --git a/public/components/App.ls b/public/components/App.ls index d76c8a1..f4809c6 100644 --- a/public/components/App.ls +++ b/public/components/App.ls @@ -1,7 +1,6 @@ require! \fs $ = require \jquery-browserify -require \livescript -{compile} = require \livescript +{compile} = require \livescript/lib {concat-map, drop, filter, find, fold, group-by, id, keys, last, map, Obj, obj-to-pairs, pairs-to-obj, reject, reverse, Str, sort-by, take, unique, unique-by, values, zip-with} = require \prelude-ls {partition-string} = require \prelude-extension @@ -254,7 +253,8 @@ App = create-react-class do * id: \livescript name: \Livescript initial-content: ls - on-execute: (content, mount-node) -> eval compile content, {bare: true} + on-execute: (content, mount-node) -> + eval compile content, {bare: true} * id: \jsx name: \JSX initial-content: jsx diff --git a/public/examples/multi/DropdownDirection.ls b/public/examples/multi/DropdownDirection.ls index d7fd0a5..b8a533f 100644 --- a/public/examples/multi/DropdownDirection.ls +++ b/public/examples/multi/DropdownDirection.ls @@ -1,6 +1,11 @@ -create-react-class = require \create-react-class -Form = create-react-class do +React = require \react +Form = class Form extends React.Component + (props) -> + super(props) + this.state = + dropdown-direction: -1 + # render :: a -> ReactElement render: -> React.create-element MultiSelect, @@ -8,10 +13,6 @@ Form = create-react-class do placeholder: "Select fruits" dropdown-direction: @state.dropdown-direction ref: \select - - # get-initial-state :: a -> UIState - get-initial-state: -> - dropdown-direction: 1 # component-did-mount :: a -> Void component-did-mount: !-> diff --git a/public/examples/simple/Children.ls b/public/examples/simple/Children.ls index fd8a787..ce65030 100644 --- a/public/examples/simple/Children.ls +++ b/public/examples/simple/Children.ls @@ -5,7 +5,7 @@ Form = create-react-class do # render :: a -> ReactElement render: -> - form do + React.DOM.form do action: \/ SimpleSelectFactory do diff --git a/src/DivWrapper.ls b/src/DivWrapper.ls index efe15cc..fa4ccab 100644 --- a/src/DivWrapper.ls +++ b/src/DivWrapper.ls @@ -1,12 +1,12 @@ {div} = require \react-dom-factories -create-react-class = require \create-react-class +React = require \react # used to detect when the dropdown has been added/removed from dom, # so we can adjust the height of the parent element -module.exports = create-react-class do +module.exports = class DivWrapper extends React.Component # get-default-props :: () -> Props - get-default-props: -> + @default-props = class-name: "" on-height-change: (!->) # Number -> Void diff --git a/src/DropdownMenu.ls b/src/DropdownMenu.ls index 8408421..9264035 100644 --- a/src/DropdownMenu.ls +++ b/src/DropdownMenu.ls @@ -4,7 +4,6 @@ {is-equal-to-object} = require \prelude-extension {create-factory}:React = require \react {div, input, span} = require \react-dom-factories -create-react-class = require \create-react-class {find-DOM-node} = require \react-dom ReactCSSTransitionGroup = create-factory require \react-transition-group/CSSTransitionGroup ReactTether = create-factory require \./ReactTether @@ -12,12 +11,10 @@ DivWrapper = create-factory require \./DivWrapper OptionWrapper = create-factory require \./OptionWrapper {cancel-event, class-name-from-object} = require \./utils -module.exports = create-react-class do - - display-name: \DropdownMenu +module.exports = class DropdownMenu extends React.PureComponent # get-default-props :: () -> Props - get-default-props: -> + @default-props = # bottom-anchor :: () -> ReactElement class-name: "" dropdown-direction: 1 @@ -86,9 +83,9 @@ module.exports = create-react-class do # render-animated-dropdown :: ComputedState -> ReactElement render-animated-dropdown: ({dynamic-class-name}:computed-state) -> - this-ref = @ if !!@props.transition-enter or !!@props.transition-leave ReactCSSTransitionGroup do + ref: \dropdownMenuWrapper component: \div transition-name: \custom transition-enter: @props.transition-enter @@ -96,7 +93,6 @@ module.exports = create-react-class do transition-enter-timeout: @props.transition-enter-timeout transition-leave-timeout: @props.transition-leave-timeout class-name: "dropdown-menu-wrapper #{dynamic-class-name}" - ref: (element) -> this-ref.dropdown-menu-wrapper = element @render-dropdown computed-state else @@ -112,7 +108,7 @@ module.exports = create-react-class do OptionWrapper do { uid - ref: "option-#{@uid-to-string uid}" + ref: (element) !~> @["option-#{@uid-to-string uid}"] = element key: @uid-to-string uid item: option highlight: @props.highlighted-uid `is-equal-to-object` uid @@ -142,18 +138,17 @@ module.exports = create-react-class do # render-dropdown :: ComputedState -> ReactElement render-dropdown: ({dynamic-class-name}) -> - this-ref = @ if @props.open # DROPDOWN DivWrapper do class-name: "dropdown-menu #{dynamic-class-name}" - ref: (element) -> this-ref.dropdown-menu = element + ref: (element) !~> !!element && @dropdown-menu = element # on-height-change :: Number -> () on-height-change: (height) !~> - if @dropdown-menu-wrapper - find-DOM-node @dropdown-menu-wrapper .style.height = "#{height}px" + if @refs.dropdown-menu-wrapper + find-DOM-node @refs.dropdown-menu-wrapper .style.height = "#{height}px" # NO RESULT FOUND if @props.options.length == 0 @@ -191,14 +186,14 @@ module.exports = create-react-class do null # component-did-update :: () -> () - component-did-update: !-> - dropdown-menu = find-DOM-node (@dropdown-menu-wrapper or @dropdown-menu) - return if !@props.open or !dropdown-menu - dropdown-menu.style.bottom = switch - | @props.dropdown-direction == -1 => - "#{@props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom}px" + 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 + ..?.style.bottom = switch + | @props.dropdown-direction == -1 => + "#{@props.bottom-anchor!.offset-height + dropdown-menu.style.margin-bottom}px" - | _ => "" + | _ => "" # highlight-and-scroll-to-option :: Int, (() -> ())? -> () highlight-and-scroll-to-option: (index, callback = (->)) !-> @@ -207,7 +202,7 @@ module.exports = create-react-class do uid = @props.uid @props.options[index] <~ @props.on-highlighted-uid-change uid - option-element? = find-DOM-node @refs?["option-#{@uid-to-string uid}"] + option-element? = find-DOM-node @?["option-#{@uid-to-string uid}"] if !!option-element parent-element = option-element.parent-element diff --git a/src/HighlightedText.ls b/src/HighlightedText.ls index 8e61f8c..453b128 100644 --- a/src/HighlightedText.ls +++ b/src/HighlightedText.ls @@ -1,11 +1,11 @@ +React = require \react {div, span} = require \react-dom-factories -create-react-class = require \create-react-class {map} = require \prelude-ls -module.exports = create-react-class do +module.exports = class HighlightedText extends React.Component # get-default-props :: a -> Props - get-default-props: -> + @default-props = partitions: [] # :: [[Int, Int, String]] text: "" style: {} diff --git a/src/MultiSelect.ls b/src/MultiSelect.ls index df8db19..5698bb5 100644 --- a/src/MultiSelect.ls +++ b/src/MultiSelect.ls @@ -3,16 +3,13 @@ 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-react-class = require \create-react-class ReactSelectize = create-factory require \./ReactSelectize {cancel-event} = require \./utils -module.exports = create-react-class do - - display-name: \MultiSelect +module.exports = class MultiSelect extends React.Component # get-default-props :: () -> Props - get-default-props: -> + @default-props = # autofocus :: Boolean # anchor :: Item # cancel-keyboard-event-on-selection :: Boolean @@ -55,6 +52,16 @@ module.exports = create-react-class do # theme :: String # values :: [Item] + (props) -> + super(props) + this.state = + anchor: if !!@props.values then last @props.values else undefined + highlighted-uid: undefined + open: false + scroll-lock: false + search: "" + values: @props.default-values + # render :: () -> ReactElement render: -> @@ -267,15 +274,6 @@ module.exports = create-react-class do filtered-options options } - - # get-initial-state :: () -> UIState - get-initial-state: -> - anchor: if !!@props.values then last @props.values else undefined - highlighted-uid: undefined - open: false - scroll-lock: false - search: "" - values: @props.default-values # first-option-index-to-highlight :: [Item] -> Int first-option-index-to-highlight: (options) -> diff --git a/src/OptionWrapper.ls b/src/OptionWrapper.ls index 8bd06a3..f51dee7 100644 --- a/src/OptionWrapper.ls +++ b/src/OptionWrapper.ls @@ -1,13 +1,13 @@ +React = require \react {div} = require \react-dom-factories -create-react-class = require \create-react-class {is-equal-to-object} = require \prelude-extension {cancel-event} = require \./utils # OptionWrapper & ValueWrapper are used for optimizing performance -module.exports = create-react-class do +module.exports = class OptionWrapper extends React.Component # get-default-porps :: () -> Props - get-default-props: -> + @default-props = # item :: Item # on-click :: Event -> Void # on-mouse-move :: Event -> Void diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index df8fe06..f9713ed 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -5,7 +5,6 @@ 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 -create-react-class = require \create-react-class {find-DOM-node} = require \react-dom ToggleButton = create-factory require \./ToggleButton DropdownMenu = create-factory require \./DropdownMenu @@ -15,15 +14,13 @@ ResetButton = create-factory require \./ResetButton ResizableInput = create-factory require \./ResizableInput {cancel-event, class-name-from-object} = require \./utils -module.exports = create-react-class do - - display-name: \ReactSelectize +module.exports = class ReactSelectize extends React.Component # used to figure out if the focus event was triggered by external action or by @focus-on-input! focus-lock: false # get-default-props :: () -> Props - get-default-props: -> + @default-props = anchor: null # :: Item autofocus: false cancel-keyboard-event-on-selection: true @@ -189,7 +186,7 @@ module.exports = create-react-class do @props.on-focus e on-blur: (e) ~> - # to prevent closing the dropdown when the user tries to click & drag the scrollbar in IE + # to prevent closing the dropdown when the user tries to click & drag the scrollbar in IE return @.focus! if @refs.dropdown-menu and (document.active-element == (find-DOM-node @refs.dropdown-menu) or document.active-element.parent-node == (find-DOM-node @refs.dropdown-menu)) <~ @close-dropdown diff --git a/src/ReactTether.ls b/src/ReactTether.ls index ef57867..c4e8bf4 100644 --- a/src/ReactTether.ls +++ b/src/ReactTether.ls @@ -3,7 +3,6 @@ React = require \react Tether = require \tether class ReactTether extends React.PureComponent - -> # get-default-props :: () -> Props @default-props = diff --git a/src/ResetButton.ls b/src/ResetButton.ls index 670f85e..7d43634 100644 --- a/src/ResetButton.ls +++ b/src/ResetButton.ls @@ -1,8 +1,8 @@ -{create-factory, DOM:{path}} = require \react -create-react-class = require \create-react-class +{create-factory}:React = require \react +{path} = require \react-dom-factories SvgWrapper = create-factory require \./SvgWrapper -module.exports = create-react-class do +module.exports = class ResetButton extends React.PureComponent # render :: a -> ReactElement render: -> diff --git a/src/ResizableInput.ls b/src/ResizableInput.ls index c0a0d43..4a3c2d6 100644 --- a/src/ResizableInput.ls +++ b/src/ResizableInput.ls @@ -1,13 +1,13 @@ -{create-factory}:React = require \react -prop-types = require \prop-types {each, obj-to-pairs} = require \prelude-ls +{create-factory}:React = require \react {input} = require \react-dom-factories +{find-DOM-node} = require \react-dom + +module.exports = class ResizableInput extends React.PureComponent -class ResizableInput extends React.Component - -> # get-default-props :: () -> Props @default-props = - type: prop-types.string + type: \text constructor: -> @autosize = @autosize.bind @ @@ -26,6 +26,7 @@ class ResizableInput extends React.Component # autosize :: () -> () autosize: -> + # reset the width @input-element.style.width = \0px @@ -64,15 +65,13 @@ class ResizableInput extends React.Component document.body.remove-child dummpy-input # component-did-mount :: () -> () - component-did-mount: !-> @input-element and @autosize! + component-did-mount: !-> @input-element and @autosize! # component-did-update :: Props -> UIState -> () - component-did-update: !-> @input-element and @autosize! + component-did-update: !-> @input-element and @autosize! # blur :: () -> () blur: -> @input-element.blur! # focus :: () -> () - focus: -> @input-element.focus! - -module.exports = ResizableInput \ No newline at end of file + focus: -> @input-element.focus! \ No newline at end of file diff --git a/src/SimpleSelect.ls b/src/SimpleSelect.ls index 240b1e8..f70322e 100644 --- a/src/SimpleSelect.ls +++ b/src/SimpleSelect.ls @@ -2,16 +2,13 @@ {is-equal-to-object} = require \prelude-extension {create-factory}:React = require \react {div, img, span} = require \react-dom-factories -create-react-class = require \create-react-class ReactSelectize = create-factory require \./ReactSelectize {cancel-event} = require \./utils -module.exports = create-react-class do - - display-name: \SimpleSelect +module.exports = class SimpleSelect extends React.Component # get-default-props :: () -> Props - get-default-props: -> + @default-props = # autofocus :: Boolean # cancel-keyboard-event-on-selection :: Boolean # class-name :: String @@ -57,7 +54,17 @@ module.exports = create-react-class do # theme :: String uid: id # uid :: (Equatable e) => Item -> e # value :: Item - + + # get-initial-state :: () -> UIState + (props) -> + super props + this.state = + highlighted-uid: undefined + open: false + scroll-lock: false + search: "" + value: @props?.default-value + # render :: () -> ReactElement render: -> @@ -313,14 +320,6 @@ module.exports = create-react-class do options } - # get-initial-state :: () -> UIState - get-initial-state: -> - highlighted-uid: undefined - open: false - scroll-lock: false - search: "" - value: @props?.default-value - # first-option-index-to-highlight :: [Item] -> Item -> Int first-option-index-to-highlight: (options, value) -> diff --git a/src/SvgWrapper.ls b/src/SvgWrapper.ls index 553d8c4..32c0619 100644 --- a/src/SvgWrapper.ls +++ b/src/SvgWrapper.ls @@ -1,9 +1,9 @@ +React = require \react {svg} = require \react-dom-factories -create-react-class = require \create-react-class {find-DOM-node} = require \react-dom # set the focusable attribute to false, this prevents having to press the tab key multiple times in IE -module.exports = create-react-class do +module.exports = class SvgWrapper extends React.PureComponent # render :: () -> ReactElement render: -> svg @props diff --git a/src/ToggleButton.ls b/src/ToggleButton.ls index 4e6324c..f39d8de 100644 --- a/src/ToggleButton.ls +++ b/src/ToggleButton.ls @@ -1,11 +1,11 @@ -{create-factory, DOM:{path}} = require \react -create-react-class = require \create-react-class +{create-factory}:React = require \react +{path} = require \react-dom-factories SvgWrapper = create-factory require \./SvgWrapper -module.exports = create-react-class do +module.exports = class ToggleButton extends React.PureComponent # get-default-props :: () -> Props - get-default-props: -> + @default-props = open: false flipped: false diff --git a/src/ValueWrapper.ls b/src/ValueWrapper.ls index 7b7c871..e1983a8 100644 --- a/src/ValueWrapper.ls +++ b/src/ValueWrapper.ls @@ -1,11 +1,11 @@ +React = require \react {div} = require \react-dom-factories -create-react-class = require \create-react-class {is-equal-to-object} = require \prelude-extension -module.exports = create-react-class do +module.exports = class ValueWrapper extends React.Component # get-default-porps :: () -> Props - get-default-props: -> + @default-props = # item :: Item # render-item :: Item -> ReactElement # uid :: a diff --git a/test/common-tests.ls b/test/common-tests.ls index 0b7dee3..01a980f 100644 --- a/test/common-tests.ls +++ b/test/common-tests.ls @@ -3,7 +3,8 @@ require! \assert {is-equal-to-object} = require \prelude-extension # React -{create-element, DOM:{div, input, option, span}} = require \react +{create-element} = require \react +{div, input, option, span} = require \react-dom-factories {find-DOM-node, render, unmount-component-at-node} = require \react-dom # TestUtils @@ -35,7 +36,7 @@ module.exports = (select-class) !-> specify "non empty select must not have placeholder", -> {refs}:select = create-select! - input = find-DOM-node refs.select.search-element + input = find-DOM-node refs.select.refs.search ..value = \test change input component-with-class-must-not-exist select, \react-selectize-placeholder diff --git a/test/highlighted-text.ls b/test/highlighted-text.ls index a168d02..e1d8790 100644 --- a/test/highlighted-text.ls +++ b/test/highlighted-text.ls @@ -3,7 +3,8 @@ require! \../src/HighlightedText {partition-string} = require \prelude-extension # React -{create-element, DOM:{div, option, span}} = require \react +{create-element} = require \react +{div, option, span} = require \react-dom-factories {find-DOM-node} = require \react-dom # TestUtils diff --git a/test/index.ls b/test/index.ls index 6d4ef51..013be2f 100644 --- a/test/index.ls +++ b/test/index.ls @@ -1,8 +1,15 @@ require! \jsdom -global <<< - document: jsdom.jsdom '' +{ window } = new jsdom.JSDOM '' +global <<< + document: window.document navigator: user-agent: \JSDOM - window: document.parent-window + window: window + + # introduction of the following poperty is caused by a react 16 bug. + # for more information visit https://github.com/facebook/react/issues/9102 + requestAnimationFrame:-> + throw new Error 'requestAnimationFrame is not supported in Node' + require! \./simple-select require! \./multi-select require! \./highlighted-text \ No newline at end of file diff --git a/test/multi-select.ls b/test/multi-select.ls index b646b4b..92f7b9f 100644 --- a/test/multi-select.ls +++ b/test/multi-select.ls @@ -4,7 +4,8 @@ require! \./common-tests ReactSelectize = require \../src/index.ls # React -{create-element, DOM:{div, option, span}} = require \react +{create-element} = require \react +{div, option, span} = require \react-dom-factories {find-DOM-node} = require \react-dom # TestUtils diff --git a/test/simple-select.ls b/test/simple-select.ls index 8db4ab1..298b071 100644 --- a/test/simple-select.ls +++ b/test/simple-select.ls @@ -4,7 +4,8 @@ require! \./common-tests ReactSelectize = require \../src/index.ls # React -{create-element, DOM:{div, option, span}} = require \react +{create-element} = require \react +{div, option, span} = require \react-dom-factories create-react-class = require \create-react-class {find-DOM-node} = require \react-dom diff --git a/test/utils.ls b/test/utils.ls index 71df333..393c1f5 100644 --- a/test/utils.ls +++ b/test/utils.ls @@ -30,9 +30,7 @@ export get-item-text = (item) -> export click-option = (option-element, callback) -> mouse-down option-element - event = document.create-event 'MouseEvents' - ..init-mouse-event \mouseup - window.dispatch-event event + window.dispatch-event new window.MouseEvent \mouseup # click-to-open-select-control :: Select -> Void export click-to-open-select-control = (select) !-> @@ -40,9 +38,7 @@ export click-to-open-select-control = (select) !-> # click-on-the-document :: a -> Void export click-on-the-document = -> - click-event = document.create-event \MouseEvents - ..init-event \click, false, true - document.body.dispatch-event click-event + document.body.dispatch-event new window.MouseEvent \click # component-with-class-must-not-exist :: ReactElement -> String -> p String export component-with-class-must-not-exist = (tree, class-name) -> From f090eb854c865e9bdc25569c2efce05c8e52def7 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 31 Aug 2017 18:08:44 +0300 Subject: [PATCH 08/13] sync with master --- public/examples/simple/Children.ls | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/examples/simple/Children.ls b/public/examples/simple/Children.ls index ce65030..87a100e 100644 --- a/public/examples/simple/Children.ls +++ b/public/examples/simple/Children.ls @@ -5,7 +5,7 @@ Form = create-react-class do # render :: a -> ReactElement render: -> - React.DOM.form do + React.DOM.form do action: \/ SimpleSelectFactory do From 395932465e8624bb230ec75a3a0f006baab61bf8 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 31 Aug 2017 18:09:24 +0300 Subject: [PATCH 09/13] sync with master --- public/examples/multi/DropdownDirection.ls | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/examples/multi/DropdownDirection.ls b/public/examples/multi/DropdownDirection.ls index b8a533f..835e5ba 100644 --- a/public/examples/multi/DropdownDirection.ls +++ b/public/examples/multi/DropdownDirection.ls @@ -3,7 +3,7 @@ Form = class Form extends React.Component (props) -> super(props) - this.state = + this.state = dropdown-direction: -1 # render :: a -> ReactElement From 8c4b762330918acc4e4b6b296ce5e753a4d872d8 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 31 Aug 2017 18:10:44 +0300 Subject: [PATCH 10/13] Sync DropdownDirection example file with master --- public/examples/multi/DropdownDirection.ls | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/examples/multi/DropdownDirection.ls b/public/examples/multi/DropdownDirection.ls index 835e5ba..f745711 100644 --- a/public/examples/multi/DropdownDirection.ls +++ b/public/examples/multi/DropdownDirection.ls @@ -13,7 +13,7 @@ Form = class Form extends React.Component placeholder: "Select fruits" dropdown-direction: @state.dropdown-direction ref: \select - + # component-did-mount :: a -> Void component-did-mount: !-> @on-scroll-change = ~> @@ -28,4 +28,4 @@ Form = class Form extends React.Component component-will-unmount: !-> window.remove-event-listener \scroll, @on-scroll-change -render (React.create-element Form, null), mount-node \ No newline at end of file +render (React.create-element Form, null), mount-node From f1d7fd7c04088a20a55457d76297244906477e95 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 31 Aug 2017 18:12:15 +0300 Subject: [PATCH 11/13] sync with master --- public/examples/multi/DropdownDirection.ls | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/examples/multi/DropdownDirection.ls b/public/examples/multi/DropdownDirection.ls index f745711..8e51211 100644 --- a/public/examples/multi/DropdownDirection.ls +++ b/public/examples/multi/DropdownDirection.ls @@ -28,4 +28,4 @@ Form = class Form extends React.Component component-will-unmount: !-> window.remove-event-listener \scroll, @on-scroll-change -render (React.create-element Form, null), mount-node +render (React.create-element Form, null), mount-node \ No newline at end of file From eb5fa32960c2f69c127777d03e4d51f6f3704b62 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 31 Aug 2017 18:25:29 +0300 Subject: [PATCH 12/13] fix search unit test --- test/common-tests.ls | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/test/common-tests.ls b/test/common-tests.ls index 01a980f..a048cef 100644 --- a/test/common-tests.ls +++ b/test/common-tests.ls @@ -35,10 +35,7 @@ module.exports = (select-class) !-> find-rendered-DOM-component-with-class select, \react-selectize-placeholder specify "non empty select must not have placeholder", -> - {refs}:select = create-select! - input = find-DOM-node refs.select.refs.search - ..value = \test - change input + {search-element}:select = create-select { search: \test } component-with-class-must-not-exist select, \react-selectize-placeholder specify "must default the list of options to an empty list", -> From b623587aab6db3f837b67bf2b70a215a3292f979 Mon Sep 17 00:00:00 2001 From: Eli Sherer Date: Thu, 31 Aug 2017 18:54:28 +0300 Subject: [PATCH 13/13] test passing a different type than text to input props, fix constructor of ResizableInput --- package.json | 2 +- src/ResizableInput.ls | 4 +++- test/common-tests.ls | 8 +++++++- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 40a73f8..7689e2b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "scripts": { "start": "gulp", "test": "mocha test/index.ls --compilers ls:livescript", - "coverage": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript", + "coverage": "istanbul cover node_modules/mocha/bin/_mocha -- test/index.ls --require should --compilers ls:livescript", "coveralls": "istanbul cover _mocha -- test/index.ls --require should --compilers ls:livescript && cat coverage/lcov.info | coveralls" }, "author": "Furqan Zafar", diff --git a/src/ResizableInput.ls b/src/ResizableInput.ls index 4a3c2d6..641c73d 100644 --- a/src/ResizableInput.ls +++ b/src/ResizableInput.ls @@ -9,7 +9,9 @@ module.exports = class ResizableInput extends React.PureComponent @default-props = type: \text - constructor: -> + # constructor + (props) -> + super props @autosize = @autosize.bind @ @focus = @focus.bind @ @blur = @blur.bind @ diff --git a/test/common-tests.ls b/test/common-tests.ls index a048cef..ca79440 100644 --- a/test/common-tests.ls +++ b/test/common-tests.ls @@ -388,8 +388,14 @@ module.exports = (select-class) !-> click-option find-highlighted-option select component-with-class-must-not-exist select, \react-selectize-reset-button-container + specify "must use text as default type of search field", -> + select = create-select! + input = get-input select + assert input.type == \text + specify "must pass props.inputProps to search field", -> select = create-select do - input-props: disabled: true + input-props: { disabled: true, type: \tel } input = get-input select assert input.disabled == true + assert input.type == \tel