react-dropdown - npm Package Compare versions

Comparing version 1.5.0 to 1.6.1

dist/index.js

@@ -42,3 +42,3 @@ 'use strict';
     _this.state = {
-      selected: props.value || {
+      selected: _this.parseValue(props.value, props.options) || {
         label: typeof props.placeholder === 'undefined' ? DEFAULT_PLACEHOLDER_STRING : props.placeholder,
@@ -97,2 +97,24 @@ value: ''
   }, {
+    key: 'parseValue',
+    value: function parseValue(value, options) {
+      var option = void 0;
+
+      if (typeof value === 'string') {
+        for (var i = 0, num = options.length; i < num; i++) {
+          if (options[i].type === 'group') {
+            var match = options[i].items.filter(function (item) {
+              return item.value === value;
+            });
+            if (match.length) {
+              option = match[0];
+            }
+          } else if (typeof options[i].value !== 'undefined' && options[i].value === value) {
+            option = options[i];
+          }
+        }
+      }
+
+      return option || value;
+    }
+  }, {
     key: 'setValue',
@@ -103,4 +125,3 @@ value: function setValue(value, label) {
           value: value,
-          label: label
-        },
+          label: label },
         isOpen: false
@@ -123,6 +144,2 @@ };
 
-      var classes = (_classes = {}, _defineProperty(_classes, this.props.baseClassName + '-option', true), _defineProperty(_classes, option.className, !!option.className), _defineProperty(_classes, 'is-selected', option === this.state.selected), _classes);
-
-      var optionClass = (0, _classnames2.default)(classes);
-
       var value = option.value;
@@ -134,2 +151,6 @@ if (typeof value === 'undefined') {
 
+      var classes = (_classes = {}, _defineProperty(_classes, this.props.baseClassName + '-option', true), _defineProperty(_classes, option.className, !!option.className), _defineProperty(_classes, 'is-selected', value === this.state.selected.value || value === this.state.selected), _classes);
+
+      var optionClass = (0, _classnames2.default)(classes);
+
       return _react2.default.createElement(
@@ -194,2 +215,7 @@ 'div',
   }, {
+    key: 'isValueSelected',
+    value: function isValueSelected() {
+      return typeof this.state.selected === 'string' || this.state.selected.value !== '';
+    }
+  }, {
     key: 'render',
@@ -205,2 +231,4 @@ value: function render() {
           arrowClassName = _props2.arrowClassName,
+          arrowClosed = _props2.arrowClosed,
+          arrowOpen = _props2.arrowOpen,
           className = _props2.className;
@@ -214,3 +242,3 @@
       var controlClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, baseClassName + '-control', true), _defineProperty(_classNames2, controlClassName, !!controlClassName), _defineProperty(_classNames2, disabledClass, !!disabledClass), _classNames2));
-      var placeholderClass = (0, _classnames2.default)((_classNames3 = {}, _defineProperty(_classNames3, baseClassName + '-placeholder', true), _defineProperty(_classNames3, placeholderClassName, !!placeholderClassName), _classNames3));
+      var placeholderClass = (0, _classnames2.default)((_classNames3 = {}, _defineProperty(_classNames3, baseClassName + '-placeholder', true), _defineProperty(_classNames3, placeholderClassName, !!placeholderClassName), _defineProperty(_classNames3, 'is-selected', this.isValueSelected()), _classNames3));
       var menuClass = (0, _classnames2.default)((_classNames4 = {}, _defineProperty(_classNames4, baseClassName + '-menu', true), _defineProperty(_classNames4, menuClassName, !!menuClassName), _classNames4));
@@ -237,3 +265,7 @@ var arrowClass = (0, _classnames2.default)((_classNames5 = {}, _defineProperty(_classNames5, baseClassName + '-arrow', true), _defineProperty(_classNames5, arrowClassName, !!arrowClassName), _classNames5));
           value,
-          _react2.default.createElement('span', { className: arrowClass })
+          _react2.default.createElement(
+            'div',
+            { className: baseClassName + '-arrow-wrapper' },
+            arrowOpen && arrowClosed ? this.state.isOpen ? arrowOpen : arrowClosed : _react2.default.createElement('span', { className: arrowClass })
+          )
         ),
@@ -240,0 +272,0 @@ menu

index.d.ts

@@ -13,3 +13,3 @@ declare module "react-dropdown" {
   }
-  interface ReactDropdownProps {
+  export interface ReactDropdownProps {
     options: (Group | Option | string)[];
@@ -25,3 +25,3 @@ baseClassName?: string;
     onFocus?: (arg: boolean) => void;
-    value?: Option;
+    value?: Option | string;
     placeholder?: String;
@@ -34,2 +34,2 @@ }
   export default ReactDropdown;
-}
+}

package.json

 {
   "name": "react-dropdown",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "description": "React dropdown component",
@@ -64,3 +64,3 @@ "main": "dist/index.js",
     "react-dom": "^0.14.7 || ^15.0.0-0",
-    "standard": "^6.0.7",
+    "standard": "^11.0.1",
     "watchify": "^3.7.0"
@@ -74,6 +74,7 @@ },
     "start": "ecstatic -p 8080 example & npm run watch",
-    "prepublish": "npm test && npm run build",
+    "prepublishOnly": "npm test && npm run build",
     "predeploy": "npm test && browserify example/main.js -o example/bundle.js",
-    "deploy": "gh-pages -d example"
+    "deploy": "gh-pages -d example",
+    "lint-fix": "standard --fix index.js"
   }
 }

README.md

@@ -113,2 +113,11 @@ react-dropdown
 
+The `arrowClosed` & `arrowOpen` props enable passing in custom elements for the open/closed state arrows.
+
+```JavaScript
+<Dropdown
+  arrowClosed={<span className="arrow-closed" />}
+  arrowOpen={<span className="arrow-open" />}
+/>
+```
+
 Check more examples in the example folder.
@@ -115,0 +124,0 @@

No alert changes

Improved metrics

Total package byte prevSize

20096

increased by8.34%

Lines of code

350

increased by9.72%

Number of lines in readme file

138

increased by6.98%

No dependency changes