ink-multi-select - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

build/index.js

@@ -33,2 +33,4 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

build/multi-select.js

@@ -44,4 +44,6 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -63,3 +65,3 @@
       highlightedIndex: this.props.initialIndex,
-      selected: {}
+      selected: this.props.selected.length === 0 ? this.props.defaultSelected : this.props.selected
     });
@@ -71,4 +73,2 @@
         focus,
-        onSelect,
-        onUnselect,
         onHighlight,
@@ -123,13 +123,7 @@ onSubmit
         const selectedItem = slicedItems[highlightedIndex];
-        const selectedItemKey = selectedItem.key || selectedItem.value;
-        (selected[selectedItemKey] ? onUnselect : onSelect)(selectedItem);
-        this.setState(state => ({
-          selected: { ...selected,
-            [selectedItemKey]: !state.selected[selectedItemKey]
-          }
-        }));
+        this.setSelectedState(this.selectItem(selectedItem));
       }
 
       if (s === ENTER) {
-        onSubmit(items.filter(item => selected[item.key || item.value]));
+        onSubmit(selected);
       }
@@ -148,4 +142,3 @@ });
       rotateIndex,
-      highlightedIndex,
-      selected
+      highlightedIndex
     } = this.state;
@@ -162,3 +155,3 @@ const {
       const isHighlighted = index === highlightedIndex;
-      const isSelected = Boolean(selected[key]);
+      const isSelected = this.isSelected(item.value);
       return _react.default.createElement(_ink.Box, {
@@ -204,4 +197,48 @@ key: key
     }
+
+    if (!(0, _lodash.default)(prevProps.selected, this.props.selected)) {
+      this.setState({
+        // eslint-disable-line react/no-did-update-set-state
+        selected: prevProps.selected
+      });
+    }
   }
 
+  isSelected(value) {
+    const {
+      selected
+    } = this.state;
+    return selected.map(({
+      value
+    }) => value).includes(value);
+  }
+
+  selectItem(item) {
+    const {
+      onSelect,
+      onUnselect
+    } = this.props;
+    const {
+      selected
+    } = this.state;
+
+    if (this.isSelected(item.value)) {
+      onUnselect(item);
+      return selected.filter(({
+        value
+      }) => {
+        return value !== item.value;
+      });
+    }
+
+    onSelect(item);
+    return [...selected, item];
+  }
+
+  setSelectedState(selected) {
+    this.setState({
+      selected
+    });
+  }
+
   get hasLimit() {
@@ -232,2 +269,4 @@ const {
   items: _propTypes.default.array,
+  selected: _propTypes.default.array,
+  defaultSelected: _propTypes.default.array,
   focus: _propTypes.default.bool,
@@ -247,2 +286,4 @@ initialIndex: _propTypes.default.number,
   items: [],
+  selected: [],
+  defaultSelected: [],
   focus: true,
@@ -249,0 +290,0 @@ initialIndex: 0,

index.d.ts

@@ -30,2 +30,8 @@ import * as React from 'react';
 
+export type SelectedItem = {
+	label?: string;
+	value: React.Key
+	key?: React.Key;
+}
+
 export type MultiSelectProps = {
@@ -40,2 +46,12 @@ /**
 	/**
+	 * Items set as selected.
+	 */
+	selected?: SelectedItem[];
+
+	/**
+	 * Items set as selected by default.
+	 */
+	defaultSelected?: SelectedItem[];
+
+	/**
 	 * Listen to user's input. Useful in case there are multiple input components
@@ -42,0 +58,0 @@ * at the same time and input must be "routed" to a specific component.

package.json

 {
 	"name": "ink-multi-select",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"description": "Multi select input component for Ink",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Worsened metrics

Total package byte prevSize

20408

decreased by-26.43%

Number of package files

9

decreased by-18.18%

Lines of code

451

decreased by-31.87%

No dependency changes