react-selectize - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

CHANGELOG.md

@@ -40,2 +40,6 @@ # React Selectize
 * fixed a bug where passing a single child element would not show up in the dropdown
-* fixed other minor bugs identified by unit testing
+* fixed other minor bugs identified by unit testing
+
+## v0.2.4 / 26th September 2015
+* perf optimization, using result of props.uid method to compare items instead of deep equals
+* added HighlightedText component to help with search highlighting

package.json

 {
   "name": "react-selectize",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "react implementation of selectize",
@@ -32,2 +32,3 @@ "main": "src/index.js",
     "gulp-util": "^3.0.4",
+    "history": "^1.11.0",
     "istanbul": "^0.3.20",
@@ -41,2 +42,3 @@ "jquery-browserify": "^1.8.1",
     "nib": "^1.1.0",
+    "react-router": "^1.0.0-rc1",
     "react-tools": "^0.13.3",
@@ -43,0 +45,0 @@ "should": "^7.1.0",

README.md

 [![Build Status](https://travis-ci.org/furqanZafar/react-selectize.svg?branch=develop)](https://travis-ci.org/furqanZafar/react-selectize)    [![Coverage Status](https://coveralls.io/repos/furqanZafar/react-selectize/badge.svg?branch=develop&service=github)](https://coveralls.io/github/furqanZafar/react-selectize?branch=develop)
 
+# 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.
+* use React Selectize as an example for other components, to build stateless, bug free components, that are easy to maintain and contribute too.
+* more features.
+
 # React Selectize
-A flexible & stateless select component for ReactJS built with livescript and love. Inspired by [Selectize](http://brianreavis.github.io/selectize.js/) & [React Select](http://jedwatson.github.io/react-select/)
+`ReactSelectize` is a stateless Select component for ReactJS, that provides a platform for the more developer friendly `SimpleSelect` & `MultiSelect` components. 
 
-ReactSelectize comes in 3 flavors `SimpleSelect` (or single select), `MultiSelect` & `ReactSelectize`. Both the `SimpleSelect` & the `MultiSelect` components are built on top of the stateless `ReactSelectize` component.
+Both `SimpleSelect` & `MultiSelect` have been designed to work as drop in replacement for the built-in `React.DOM.Select` component.
 
+styles & features inspired by [React Select](http://jedwatson.github.io/react-select/) & [Selectize](http://brianreavis.github.io/selectize.js/).
+
 LIVE DEMO: [furqanZafar.github.io/react-selectize](http://furqanZafar.github.io/react-selectize/)
@@ -13,22 +21,21 @@
 ## Features
-* Drop in replacement for React.DOM.Select
+* [Drop in replacement for React.DOM.Select](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=drop-in-replacement-for-react.dom.select)
 * Stateless, therefore extremely flexible & extensible
 * Clean and compact API fully documented on GitHub
-* Multiselect support
-* Option groups
-* Custom filtering & option object
-* Custom option & value rendering
-* Remote data loading
-* Tagging or item creation
-* Caret between items
-* Customizable dropdown direction
-* Mark options as unselectable 
+* [Multiselect support](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=multi-select)
+* [Option groups](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=option-groups)
+* [Custom filtering & option object](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=custom-filtering-and-rendering)
+* [Search highlighting](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=search-highlighting)
+* [Custom option & value rendering](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=custom-option-and-value-rendering)
+* [Remote data loading](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=remote-options)
+* [Tagging or item creation](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=tags)
+* [Caret between items](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=tags)
+* [Customizable dropdown direction](http://furqanzafar.github.io/react-selectize/#/?category=multi&example=dropdown-direction)
+* [Mark options as unselectable](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=selectability)
 * Customizable styles, comes with Stylus files
 
 ## Install
-
 `npm install react-selectize`
 
 ## Usage (livescript)
-
 ```
@@ -60,3 +67,2 @@ {create-factory}:React = require \react
 ## Usage (jsx)
-
 ```
@@ -117,3 +123,3 @@ React = require("react");
 * all the `on*Change` functions receive a callback as the final parameter, which MUST always be invoked, for example when using state for the `value` prop of `SimpleSelect` the `onValueChange` callback implementation would look like this:
-```
+``` jsx
 value = {{label: "apple", value: "apple"}}
@@ -125,3 +131,3 @@ onValueChange = {function(value, callback){
 when relying on the components internal state for managing the value:
-```
+``` jsx
 onValueChange = {function(value, callback){
@@ -134,3 +140,3 @@ console.log(value);
 * when using custom option object, you MUST implement the `uid` function which accepts an option object and returns a unique id, for example:
-```
+``` jsx
 // assuming the type of our option object is:
@@ -144,3 +150,3 @@ // {firstName :: String, lastName :: String, age :: Int}
 
-## SimpleSelect Props
+## SimpleSelect props
 
@@ -182,3 +188,3 @@ |    Property                |   Type                         |   Description                  |
 
-## MultiSelect Props
+## MultiSelect props
 In addition to the props above
@@ -199,7 +205,16 @@
 ## MultiSelect methods
-
 same as SimpleSelect but use `this.refs.multiSelectInstance.values()` to get the selected values instead of the `value` method.
 
+## HighlightedText props
+used for [search highlighting](http://furqanzafar.github.io/react-selectize/#/?category=simple&example=search-highlighting)
+
+|    Property                |   Type                               |   Description|
+|--------------------------- |--------------------------------------|---------------------------------|
+|    partitions              | [[Int, Int, Boolean]]                | collection of ranges which should or should not be highlighted, its the result of the partitionString method of the [prelude-extension](https://www.npmjs.com/package/prelude-extension) library|
+|    text                    | String                               | the string that is partitioned, the partitions collection above only has the ranges & so we need to pass the original text as well|
+|    style                   | inline CSS styles object             | inline styles applied to the root node|
+|    highlightStyle          | inline CSS styles object             | inline styles applied to the highlighted spans|
+
+
 ## Development
-
 * `npm install`
@@ -206,0 +221,0 @@ * `gulp`

src/index.js

 (function(){
-  var SimpleSelect, MultiSelect, ReactSelectize;
+  var HighlightedText, SimpleSelect, MultiSelect, ReactSelectize;
+  HighlightedText = require('./HighlightedText');
   SimpleSelect = require('./SimpleSelect');
@@ -7,2 +8,3 @@ MultiSelect = require('./MultiSelect');
   module.exports = {
+    HighlightedText: HighlightedText,
     SimpleSelect: SimpleSelect,
@@ -9,0 +11,0 @@ MultiSelect: MultiSelect,

src/ReactSelectize.js

@@ -138,3 +138,3 @@ (function(){
           return (ref$ = findIndex(function(it){
-            return isEqualToObject(it, this$.props.anchor);
+            return this$.isEqualToObject(it, this$.props.anchor);
           }, this.props.values)) != null
@@ -231,3 +231,3 @@ ? ref$
               return this$.props.onValuesChange((ref$ = reject(function(it){
-                return isEqualToObject(it, valueToRemove);
+                return this$.isEqualToObject(it, valueToRemove);
               }, this$.props.values)) != null
@@ -239,3 +239,3 @@ ? ref$
                     if (typeof find(function(it){
-                      return isEqualToObject(it, valueToRemove);
+                      return this$.isEqualToObject(it, valueToRemove);
                     }, this$.props.values) === 'undefined') {
@@ -258,3 +258,3 @@ if (!!this$.props.restoreOnBackspace) {
                   if (!!result && anchorIndex === anchorIndexOnRemove && (typeof nextAnchor === 'undefined' || !!find(function(it){
-                    return isEqualToObject(it, nextAnchor);
+                    return this$.isEqualToObject(it, nextAnchor);
                   }, this$.props.values))) {
@@ -556,2 +556,5 @@ return this$.props.onAnchorChange(nextAnchor, function(){});
     },
+    isEqualToObject: function(){
+      return isEqualToObject(this.props.uid(arguments[0]), this.props.uid(arguments[1]));
+    },
     selectHighlightedUid: function(anchorIndex, callback){
@@ -586,3 +589,3 @@ var index, option, this$ = this;
         value = find(function(it){
-          return isEqualToObject(it, option);
+          return this$.isEqualToObject(it, option);
         }, this$.props.values);
@@ -589,0 +592,0 @@ if (!!value) {

New alerts

Install scripts

Supply chain risk

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Debug access

Supply chain risk

Uses debug, reflection and dynamic code execution features.

Found 2 instances in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1997918

2183.78%

Number of package files

253

1707.14%

Lines of code

50865

2740.03%

Number of lines in readme file

217

7.43%

Worsened metrics

Dev dependency count

29

7.41%

Number of low license alerts

1

Infinity%

Number of high supply chain risk alerts

1

Infinity%

Number of low supply chain risk alerts

20

Infinity%

Number of medium supply chain risk alerts

164

Infinity%

No dependency changes