ink-select-input - npm Package Compare versions

Comparing version 3.1.2 to 4.0.0

build/index.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _SelectInput.default;
-  }
-});
-Object.defineProperty(exports, "Item", {
-  enumerable: true,
-  get: function () {
-    return _SelectInput.Item;
-  }
-});
-Object.defineProperty(exports, "Indicator", {
-  enumerable: true,
-  get: function () {
-    return _SelectInput.Indicator;
-  }
-});
-
-var _SelectInput = _interopRequireWildcard(require("./SelectInput"));
-
-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; } }
+Object.defineProperty(exports, "__esModule", { value: true });
+const SelectInput_1 = require("./SelectInput");
+exports.default = SelectInput_1.default;
+var Indicator_1 = require("./Indicator");
+Object.defineProperty(exports, "Indicator", { enumerable: true, get: function () { return Indicator_1.default; } });
+var Item_1 = require("./Item");
+Object.defineProperty(exports, "Item", { enumerable: true, get: function () { return Item_1.default; } });

build/Indicator.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ink = require("ink");
-
-var _figures = _interopRequireDefault(require("figures"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Indicator = ({
-  isSelected
-}) => _react.default.createElement(_ink.Box, {
-  marginRight: 1
-}, isSelected ? _react.default.createElement(_ink.Color, {
-  blue: true
-}, _figures.default.pointer) : ' ');
-
-Indicator.propTypes = {
-  isSelected: _propTypes.default.bool
-};
-Indicator.defaultProps = {
-  isSelected: false
-};
-var _default = Indicator;
-exports.default = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const ink_1 = require("ink");
+const figures = require("figures");
+const Indicator = ({ isSelected = false }) => (React.createElement(ink_1.Box, { marginRight: 1 }, isSelected ? React.createElement(ink_1.Text, { color: "blue" }, figures.pointer) : React.createElement(ink_1.Text, null, " ")));
+exports.default = Indicator;

build/Item.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ink = require("ink");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Item = ({
-  isSelected,
-  label
-}) => _react.default.createElement(_ink.Color, {
-  blue: isSelected
-}, label);
-
-Item.propTypes = {
-  isSelected: _propTypes.default.bool,
-  label: _propTypes.default.string.isRequired
-};
-Item.defaultProps = {
-  isSelected: false
-};
-var _default = Item;
-exports.default = _default;
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const ink_1 = require("ink");
+const Item = ({ isSelected = false, label }) => (React.createElement(ink_1.Text, { color: isSelected ? 'blue' : undefined }, label));
+exports.default = Item;

build/SelectInput.js

 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Indicator", {
-  enumerable: true,
-  get: function () {
-    return _Indicator.default;
-  }
-});
-Object.defineProperty(exports, "Item", {
-  enumerable: true,
-  get: function () {
-    return _Item.default;
-  }
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _lodash = _interopRequireDefault(require("lodash.isequal"));
-
-var _arrRotate = _interopRequireDefault(require("arr-rotate"));
-
-var _ink = require("ink");
-
-var _Indicator = _interopRequireDefault(require("./Indicator"));
-
-var _Item = _interopRequireDefault(require("./Item"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _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); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const ARROW_UP = '\u001B[A';
-const ARROW_DOWN = '\u001B[B';
-const ENTER = '\r';
-
-class SelectInput extends _react.PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      rotateIndex: 0,
-      selectedIndex: this.props.initialIndex
-    });
-
-    _defineProperty(this, "handleInput", data => {
-      const {
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const lodash_1 = require("lodash");
+const arrayRotate = require("arr-rotate");
+const ink_1 = require("ink");
+const Indicator_1 = require("./Indicator");
+const Item_1 = require("./Item");
+const SelectInput = ({ items = [], isFocused = true, initialIndex = 0, indicatorComponent = Indicator_1.default, itemComponent = Item_1.default, limit: customLimit, onSelect, onHighlight }) => {
+    const [rotateIndex, setRotateIndex] = react_1.useState(0);
+    const [selectedIndex, setSelectedIndex] = react_1.useState(initialIndex);
+    const hasLimit = typeof customLimit === 'number' && items.length > customLimit;
+    const limit = hasLimit ? Math.min(customLimit, items.length) : items.length;
+    const previousItems = react_1.useRef(items);
+    react_1.useEffect(() => {
+        if (!lodash_1.isEqual(previousItems.current, items)) {
+            setRotateIndex(0);
+            setSelectedIndex(0);
+        }
+        previousItems.current = items;
+    }, [items]);
+    ink_1.useInput(react_1.useCallback((input, key) => {
+        if (input === 'k' || key.upArrow) {
+            const lastIndex = (hasLimit ? limit : items.length) - 1;
+            const atFirstIndex = selectedIndex === 0;
+            const nextIndex = hasLimit ? selectedIndex : lastIndex;
+            const nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
+            const nextSelectedIndex = atFirstIndex
+                ? nextIndex
+                : selectedIndex - 1;
+            setRotateIndex(nextRotateIndex);
+            setSelectedIndex(nextSelectedIndex);
+            const slicedItems = hasLimit
+                ? arrayRotate(items, nextRotateIndex).slice(0, limit)
+                : items;
+            if (typeof onHighlight === 'function') {
+                onHighlight(slicedItems[nextSelectedIndex]);
+            }
+        }
+        if (input === 'j' || key.downArrow) {
+            const atLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;
+            const nextIndex = hasLimit ? selectedIndex : 0;
+            const nextRotateIndex = atLastIndex ? rotateIndex - 1 : rotateIndex;
+            const nextSelectedIndex = atLastIndex ? nextIndex : selectedIndex + 1;
+            setRotateIndex(nextRotateIndex);
+            setSelectedIndex(nextSelectedIndex);
+            const slicedItems = hasLimit
+                ? arrayRotate(items, nextRotateIndex).slice(0, limit)
+                : items;
+            if (typeof onHighlight === 'function') {
+                onHighlight(slicedItems[nextSelectedIndex]);
+            }
+        }
+        if (key.return) {
+            const slicedItems = hasLimit
+                ? arrayRotate(items, rotateIndex).slice(0, limit)
+                : items;
+            if (typeof onSelect === 'function') {
+                onSelect(slicedItems[selectedIndex]);
+            }
+        }
+    }, [
+        hasLimit,
+        limit,
+        rotateIndex,
+        selectedIndex,
         items,
-        focus,
         onSelect,
         onHighlight
-      } = this.props;
-      const {
-        rotateIndex,
-        selectedIndex
-      } = this.state;
-      const hasLimit = this.hasLimit();
-      const limit = this.getLimit();
-
-      if (focus === false) {
-        return;
-      }
-
-      const s = String(data);
-
-      if (s === ARROW_UP || s === 'k') {
-        const lastIndex = (hasLimit ? limit : items.length) - 1;
-        const atFirstIndex = selectedIndex === 0;
-        const nextIndex = hasLimit ? selectedIndex : lastIndex;
-        const nextRotateIndex = atFirstIndex ? rotateIndex + 1 : rotateIndex;
-        const nextSelectedIndex = atFirstIndex ? nextIndex : selectedIndex - 1;
-        this.setState({
-          rotateIndex: nextRotateIndex,
-          selectedIndex: nextSelectedIndex
-        });
-        const slicedItems = hasLimit ? (0, _arrRotate.default)(items, nextRotateIndex).slice(0, limit) : items;
-        onHighlight(slicedItems[nextSelectedIndex]);
-      }
-
-      if (s === ARROW_DOWN || s === 'j') {
-        const atLastIndex = selectedIndex === (hasLimit ? limit : items.length) - 1;
-        const nextIndex = hasLimit ? selectedIndex : 0;
-        const nextRotateIndex = atLastIndex ? rotateIndex - 1 : rotateIndex;
-        const nextSelectedIndex = atLastIndex ? nextIndex : selectedIndex + 1;
-        this.setState({
-          rotateIndex: nextRotateIndex,
-          selectedIndex: nextSelectedIndex
-        });
-        const slicedItems = hasLimit ? (0, _arrRotate.default)(items, nextRotateIndex).slice(0, limit) : items;
-        onHighlight(slicedItems[nextSelectedIndex]);
-      }
-
-      if (s === ENTER) {
-        const slicedItems = hasLimit ? (0, _arrRotate.default)(items, rotateIndex).slice(0, limit) : items;
-        onSelect(slicedItems[selectedIndex]);
-      }
-    });
-
-    _defineProperty(this, "hasLimit", () => {
-      const {
-        limit,
-        items
-      } = this.props;
-      return typeof limit === 'number' && items.length > limit;
-    });
-
-    _defineProperty(this, "getLimit", () => {
-      const {
-        limit,
-        items
-      } = this.props;
-
-      if (this.hasLimit()) {
-        return Math.min(limit, items.length);
-      }
-
-      return items.length;
-    });
-  }
-
-  render() {
-    const {
-      items,
-      indicatorComponent,
-      itemComponent
-    } = this.props;
-    const {
-      rotateIndex,
-      selectedIndex
-    } = this.state;
-    const limit = this.getLimit();
-    const slicedItems = this.hasLimit() ? (0, _arrRotate.default)(items, rotateIndex).slice(0, limit) : items;
-    return _react.default.createElement(_ink.Box, {
-      flexDirection: "column"
-    }, slicedItems.map((item, index) => {
-      const isSelected = index === selectedIndex;
-      return _react.default.createElement(_ink.Box, {
-        key: item.key || item.value
-      }, _react.default.createElement(indicatorComponent, {
-        isSelected
-      }), _react.default.createElement(itemComponent, { ...item,
-        isSelected
-      }));
-    }));
-  }
-
-  componentDidMount() {
-    const {
-      stdin,
-      setRawMode
-    } = this.props;
-    setRawMode(true);
-    stdin.on('data', this.handleInput);
-  }
-
-  componentWillUnmount() {
-    const {
-      stdin,
-      setRawMode
-    } = this.props;
-    stdin.removeListener('data', this.handleInput);
-    setRawMode(false);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (!(0, _lodash.default)(prevProps.items, this.props.items)) {
-      this.setState({
-        // eslint-disable-line react/no-did-update-set-state
-        rotateIndex: 0,
-        selectedIndex: 0
-      });
-    }
-  }
-
-}
-
-_defineProperty(SelectInput, "propTypes", {
-  items: _propTypes.default.array,
-  focus: _propTypes.default.bool,
-  initialIndex: _propTypes.default.number,
-  indicatorComponent: _propTypes.default.func,
-  itemComponent: _propTypes.default.func,
-  limit: _propTypes.default.number,
-  stdin: _propTypes.default.object.isRequired,
-  setRawMode: _propTypes.default.func.isRequired,
-  onSelect: _propTypes.default.func,
-  onHighlight: _propTypes.default.func
-});
-
-_defineProperty(SelectInput, "defaultProps", {
-  items: [],
-  focus: true,
-  initialIndex: 0,
-  indicatorComponent: _Indicator.default,
-  itemComponent: _Item.default,
-  limit: null,
-
-  onSelect() {},
-
-  onHighlight() {}
-
-});
-
-class SelectInputWithStdin extends _react.PureComponent {
-  render() {
-    return _react.default.createElement(_ink.StdinContext.Consumer, null, ({
-      stdin,
-      setRawMode
-    }) => _react.default.createElement(SelectInput, _extends({}, this.props, {
-      stdin: stdin,
-      setRawMode: setRawMode
+    ]), { isActive: isFocused });
+    const slicedItems = hasLimit
+        ? arrayRotate(items, rotateIndex).slice(0, limit)
+        : items;
+    return (React.createElement(ink_1.Box, { flexDirection: "column" }, slicedItems.map((item, index) => {
+        var _a;
+        const isSelected = index === selectedIndex;
+        return (React.createElement(ink_1.Box, { key: (_a = item.key) !== null && _a !== void 0 ? _a : item.value },
+            React.createElement(indicatorComponent, { isSelected }),
+            React.createElement(itemComponent, { ...item, isSelected })));
     })));
-  }
-
-}
-
-exports.default = SelectInputWithStdin;
+};
+exports.default = SelectInput;

package.json

 {
 	"name": "ink-select-input",
-	"version": "3.1.2",
+	"version": "4.0.0",
 	"description": "Select input component for Ink",
@@ -12,16 +12,14 @@ "license": "MIT",
 	},
-	"main": "build/index.js",
+	"main": "build",
 	"engines": {
-		"node": ">=8"
+		"node": ">=10"
 	},
 	"scripts": {
-		"pretest": "npm run build",
-		"test": "xo && ava && npm run typecheck",
-		"build": "babel src --out-dir=build",
-		"prepare": "npm run build",
-		"typecheck": "tsc --noEmit --jsx react index.test-d.tsx"
+		"pretest": "tsc",
+		"test": "xo && ava",
+		"build": "tsc",
+		"prepare": "tsc"
 	},
 	"files": [
-		"build",
-		"index.d.ts"
+		"build"
 	],
@@ -34,32 +32,37 @@ "keywords": [
 		"arr-rotate": "^1.0.0",
-		"figures": "^2.0.0",
-		"lodash.isequal": "^4.5.0",
-		"prop-types": "^15.5.10"
+		"figures": "^3.2.0",
+		"lodash": "^4.17.19",
+		"lodash.isequal": "^4.5.0"
 	},
 	"peerDependencies": {
-		"ink": "^2.0.0"
+		"ink": "^3.0.0-7"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.2.3",
+		"@ava/babel": "^1.0.1",
 		"@babel/core": "^7.3.3",
-		"@babel/plugin-proposal-class-properties": "^7.3.3",
 		"@babel/preset-react": "^7.0.0",
-		"@types/react": "^16.8.8",
-		"ava": "*",
-		"babel-eslint": "^10.0.1",
-		"eslint-config-xo-react": "^0.16.0",
-		"eslint-plugin-react": "^7.1.0",
-		"ink": "^2.0.0",
-		"ink-testing-library": "^1.0.0",
+		"@sindresorhus/tsconfig": "^0.7.0",
+		"@types/lodash": "^4.14.158",
+		"@types/react": "^16.9.43",
+		"@vdemedes/prettier-config": "^1.0.1",
+		"ava": "^3.9.0",
+		"delay": "^4.4.0",
+		"eslint-config-xo-react": "^0.23.0",
+		"eslint-config-xo-typescript": "^0.31.0",
+		"eslint-plugin-react": "^7.20.0",
+		"eslint-plugin-react-hooks": "^4.0.4",
+		"ink": "^3.0.0-3",
+		"ink-testing-library": "^2.0.0",
+		"prettier": "^2.0.5",
 		"react": "^16.8.2",
 		"sinon": "^7.2.7",
-		"typescript": "^3.3.3333",
-		"xo": "*"
+		"typescript": "^3.9.7",
+		"xo": "^0.32.0"
 	},
+	"ava": {
+		"babel": true
+	},
 	"babel": {
-		"plugins": [
-			"@babel/plugin-proposal-class-properties"
-		],
 		"presets": [
-			"@ava/stage-4",
+			"@ava/babel/stage-4",
 			"@babel/preset-react"
@@ -69,12 +72,15 @@ ]
 	"xo": {
-		"parser": "babel-eslint",
 		"extends": [
-			"xo-react"
+			"xo-react",
+			"xo-typescript"
 		],
+		"prettier": true,
 		"rules": {
-			"react/no-unused-prop-types": 1,
-			"unicorn/no-hex-escape": 0,
-			"unicorn/filename-case": 0
+			"react/no-unused-prop-types": "warn",
+			"react/prop-types": "off",
+			"unicorn/no-hex-escape": "off",
+			"unicorn/filename-case": "off"
 		}
-	}
+	},
+	"prettier": "@vdemedes/prettier-config"
 }

readme.md

@@ -1,5 +0,6 @@
-# ink-select-input [![Build Status](https://travis-ci.org/vadimdemedes/ink-select-input.svg?branch=master)](https://travis-ci.org/vadimdemedes/ink-select-input)
+# ink-select-input [![test](https://github.com/vadimdemedes/ink-select-input/workflows/test/badge.svg)](https://github.com/vadimdemedes/ink-select-input/actions)
 
 > Select input component for [Ink](https://github.com/vadimdemedes/ink)
 
+Looking for a version compatible with Ink 2.x? Check out [this release](https://github.com/vadimdemedes/ink-text-input/tree/v3.1.2).
 
@@ -12,3 +13,2 @@ ## Install
 
-
 ## Usage
@@ -26,17 +26,21 @@
 
-	const items = [{
-		label: 'First',
-		value: 'first'
-	}, {
-		label: 'Second',
-		value: 'second'
-	}, {
-		label: 'Third',
-		value: 'third'
-	}];
+	const items = [
+		{
+			label: 'First',
+			value: 'first'
+		},
+		{
+			label: 'Second',
+			value: 'second'
+		},
+		{
+			label: 'Third',
+			value: 'third'
+		}
+	];
 
-	return <SelectInput items={items} onSelect={handleSelect}/>
+	return <SelectInput items={items} onSelect={handleSelect} />;
 };
 
-render(<Demo/>);
+render(<Demo />);
 ```
@@ -46,3 +50,2 @@
 
-
 ## Props
@@ -58,3 +61,3 @@
 
-### focus
+### isFocused
 
@@ -73,14 +76,8 @@ Type: `boolean`<br>
 
-### onSelect
+### limit
 
-Type: `function`
+Type: `number`
 
-Function to call when user selects an item. Item object is passed to that function as an argument.
+Number of items to display.
 
-### onHighlight
-
-Type: `function`
-
-Function to call when user highlights an item. Item object is passed to that function as an argument.
-
 ### indicatorComponent
@@ -98,11 +95,12 @@
 
-### limit
+### onSelect
 
-Type: `number`
+Type: `function`
 
-Number of items to display.
+Function to call when user selects an item. Item object is passed to that function as an argument.
 
+### onHighlight
 
-## License
+Type: `function`
 
-MIT © [Vadim Demedes](http://github.com/vadimdemedes)
+Function to call when user highlights an item. Item object is passed to that function as an argument.

New alerts

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

Improved metrics

Number of package files

13

increased by62.5%

Worsened metrics

Total package byte prevSize

11953

decreased by-23.59%

Dev dependency count

20

increased by33.33%

Lines of code

175

decreased by-45.65%

Number of lines in readme file

101

decreased by-1.94%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash@^4.17.19

• + Addedchalk@4.1.2(transitive)

• + Addedcli-boxes@2.2.1(transitive)

• + Addedcode-excerpt@3.0.0(transitive)

• + Addedconvert-to-spaces@1.0.2(transitive)

• + Addedescape-string-regexp@2.0.0(transitive)

• + Addedfigures@3.2.0(transitive)

• + Addedindent-string@4.0.0(transitive)

• + Addedink@3.2.0(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedpatch-console@1.0.0(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-devtools-core@4.28.5(transitive)

• + Addedreact-reconciler@0.26.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• + Addedshell-quote@1.8.2(transitive)

• + Addedstack-utils@2.0.6(transitive)

• + Addedtype-fest@0.12.0(transitive)

• + Addedws@7.5.10(transitive)

• - Removedprop-types@^15.5.10

• - Removedansi-escapes@3.2.0(transitive)

• - Removedansi-regex@4.1.1(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedarrify@2.0.1(transitive)

• - Removedastral-regex@1.0.0(transitive)

• - Removedchalk@3.0.0(transitive)

• - Removedcli-cursor@2.1.0(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedemoji-regex@7.0.3(transitive)

• - Removedfigures@2.0.0(transitive)

• - Removedink@2.7.1(transitive)

• - Removedis-fullwidth-code-point@2.0.0(transitive)

• - Removedlodash.throttle@4.1.1(transitive)

• - Removedlog-update@3.4.0(transitive)

• - Removedmimic-fn@1.2.0(transitive)

• - Removedonetime@2.0.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedreact-reconciler@0.24.0(transitive)

• - Removedrestore-cursor@2.0.0(transitive)

• - Removedscheduler@0.18.0(transitive)

• - Removedstring-length@3.1.0(transitive)

• - Removedstring-width@3.1.0(transitive)

• - Removedstrip-ansi@5.2.0(transitive)

• - Removedwrap-ansi@5.1.0(transitive)

• Updatedfigures@^3.2.0