react-select-checked - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

build/elements/CheckedSelect.js

@@ -67,3 +67,7 @@ 'use strict';
         _this.handleClearAll = _this.handleClearAll.bind(_this);
+        _this.handleSearchInputChange = _this.handleSearchInputChange.bind(_this);
+        _this.renderValueContext = _this.renderValueContext.bind(_this);
         _this.renderMenu = _this.renderMenu.bind(_this);
+
+        _this.state = { shouldShowPlaceholder: true };
         return _this;
@@ -188,3 +192,27 @@ }
         }
+
+        /**
+         * Update state to typing in the search box, leaving the input untouched
+         */
+
     }, {
+        key: 'handleSearchInputChange',
+        value: function handleSearchInputChange(inputString) {
+            this.setState({ shouldShowPlaceholder: inputString === '' });
+            return inputString;
+        }
+
+        /**
+        * valueRenderer callback that gathers context to render the value component
+        */
+
+    }, {
+        key: 'renderValueContext',
+        value: function renderValueContext(__, valueIndex) {
+            return {
+                valueIndex: valueIndex,
+                shouldShowPlaceholder: this.state.shouldShowPlaceholder
+            };
+        }
+    }, {
         key: 'renderOptions',
@@ -272,5 +300,8 @@ value: function renderOptions(_ref) {
                 menuRenderer: this.renderMenu,
+                backspaceRemoves: false,
                 clearable: false,
                 optionComponent: _CheckedOption2.default,
                 valueComponent: _CheckedValue2.default,
+                valueRenderer: this.renderValueContext,
+                onInputChange: this.handleSearchInputChange,
                 filterOptions: this.handleFilterOptions,
@@ -294,5 +325,8 @@ placeholder: this.props.placeholder,
                 menuRenderer: this.renderMenu,
+                backspaceRemoves: false,
                 clearable: false,
                 optionComponent: _CheckedOption2.default,
                 valueComponent: _CheckedValue2.default,
+                valueRenderer: this.renderValueContext,
+                onInputChange: this.handleSearchInputChange,
                 filterOptions: this.handleFilterOptions,
@@ -299,0 +333,0 @@ placeholder: this.props.placeholder,

build/elements/CheckedValue.js

@@ -41,3 +41,14 @@ 'use strict';
         value: function render() {
-            return null;
+            // extract context passed down by the valueRenderer callback
+            var _props$children$ = this.props.children[0],
+                valueIndex = _props$children$.valueIndex,
+                shouldShowPlaceholder = _props$children$.shouldShowPlaceholder;
+            // render the first value as the placeholder would have appeared,
+            // display nothing for subsequent values
+
+            return valueIndex === 0 && shouldShowPlaceholder ? _react2.default.createElement(
+                'div',
+                { className: 'Select-placeholder' },
+                this.props.placeholder
+            ) : null;
         }
@@ -50,8 +61,6 @@ }]);
 CheckedValue.propTypes = {
-    children: _propTypes2.default.node,
-    disabled: _propTypes2.default.bool, // disabled prop passed to ReactSelect
-    id: _propTypes2.default.string, // Unique id for the value - used for aria
-    value: _propTypes2.default.object.isRequired // the option object for this value
+    children: _propTypes2.default.array.isRequired, // starts with an object passed down by valueRenderer
+    placeholder: _propTypes2.default.string.isRequired // field placeholder passed to ReactSelect
 };
 
 exports.default = CheckedValue;

package.json

 {
   "name": "react-select-checked",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A React select based on JedWatson/React-Select with checkmarks on selected options.",
@@ -28,2 +28,6 @@ "main": "build/index.js",
     "babel-preset-react": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "chai": "^4.1.2",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-15": "^1.0.5",
     "eslint": "^4.11.0",
@@ -35,2 +39,5 @@ "eslint-plugin-import": "^2.8.0",
     "font-awesome": "^4.7.0",
+    "ignore-styles": "^5.0.1",
+    "jsdom": "^11.10.0",
+    "mocha": "^5.2.0",
     "polished": "^1.9.0",
@@ -40,2 +47,4 @@ "prop-types": "^15.6.0",
     "react-dom": "^15.6.1",
+    "react-test-renderer": "^15.6.2",
+    "sinon": "^5.0.7",
     "styled-components": "^2.2.3"
@@ -49,3 +58,4 @@ },
     "prepublish": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha --require enzyme-setup.js --require babel-register --require ignore-styles",
+    "test:watch": "npm run test -- --watch"
   },
@@ -52,0 +62,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

267730

increased by4.72%

Number of package files

21

increased by10.53%

Lines of code

879

increased by29.65%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dev dependency count

26

increased by52.94%

No dependency changes