Skip to content

Commit

Permalink
Upgrade for Ink 3 (#58)
Browse files Browse the repository at this point in the history
  • Loading branch information
Vadim Demedes authored Jun 23, 2020
1 parent 948d619 commit a33e519
Show file tree
Hide file tree
Showing 8 changed files with 292 additions and 394 deletions.
59 changes: 0 additions & 59 deletions index.d.ts

This file was deleted.

30 changes: 0 additions & 30 deletions index.test-d.tsx

This file was deleted.

66 changes: 34 additions & 32 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,19 +10,18 @@
"url": "github.com/vadimdemedes"
},
"main": "build",
"types": "build/index.d.ts",
"engines": {
"node": ">=10"
},
"scripts": {
"test": "xo && FORCE_COLOR=1 ava && npm run typecheck",
"build": "babel src --out-dir=build",
"prepare": "npm run build",
"pretest": "npm run build",
"typecheck": "tsc --noEmit --jsx react index.test-d.tsx"
"test": "tsc --noEmit && xo && FORCE_COLOR=1 ava",
"build": "tsc",
"prepare": "tsc",
"pretest": "tsc"
},
"files": [
"build",
"index.d.ts"
"build"
],
"keywords": [
"ink",
Expand All @@ -37,51 +36,54 @@
"query"
],
"dependencies": {
"chalk": "^3.0.0",
"prop-types": "^15.5.10"
"chalk": "^4.1.0",
"type-fest": "^0.15.1"
},
"devDependencies": {
"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@ava/babel": "^1.0.1",
"@babel/preset-react": "^7.10.1",
"@sindresorhus/tsconfig": "^0.7.0",
"@types/react": "^16.8.8",
"@vdemedes/prettier-config": "^1.0.0",
"ava": "^1.3.1",
"babel-eslint": "^10.0.1",
"eslint-config-xo-react": "^0.17.0",
"eslint-plugin-react": "^7.11.1",
"ava": "^3.9.0",
"delay": "^4.3.0",
"eslint-config-xo-react": "^0.23.0",
"eslint-plugin-react": "^7.20.0",
"eslint-plugin-react-hooks": "^4.0.4",
"husky": "^4.2.5",
"ink": "^2.0.0",
"ink-testing-library": "^1.0.0",
"ink": "^3.0.0-3",
"ink-testing-library": "^2.0.0",
"prettier": "^2.0.5",
"pretty-quick": "^2.0.1",
"react": "^16.5.2",
"sinon": "^7.2.7",
"typescript": "^3.3.3333",
"xo": "^0.24.0"
"typescript": "^3.9.5",
"xo": "^0.32.0"
},
"peerDependencies": {
"ink": "^2.0.0",
"ink": "^3.0.0-3",
"react": "^16.5.2"
},
"babel": {
"plugins": [
"@babel/plugin-proposal-class-properties"
],
"presets": [
"@ava/stage-4",
"@babel/preset-react"
]
"ava": {
"babel": {
"testOptions": {
"presets": [
"@babel/preset-react"
]
}
}
},
"xo": {
"parser": "babel-eslint",
"extends": [
"xo-react"
],
"plugins": [
"react"
],
"prettier": true,
"rules": {
"react/no-unused-prop-types": 1,
"react/no-unused-prop-types": 0,
"react/prop-types": 0,
"unicorn/no-hex-escape": 0
}
},
Expand Down
52 changes: 21 additions & 31 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

> Text input component for [Ink](https://github.com/vadimdemedes/ink).
Looking for a version compatible with Ink 2.x? Check out [previous release](https://github.com/vadimdemedes/ink-text-input/tree/v3.3.0).

## Install

```
Expand All @@ -11,34 +13,23 @@ $ npm install ink-text-input
## Usage

```jsx
import React from 'react';
import { render, Box } from 'ink';
import React, { useState } from 'react';
import { render, Box, Text } from 'ink';
import TextInput from 'ink-text-input';

class SearchQuery extends React.Component {
constructor() {
super();

this.state = {
query: ''
};

this.handleChange = this.handleChange.bind(this);
}
const SearchQuery = () => {
const [query, setQuery] = useState('');

render() {
return (
<Box>
<Box marginRight={1}>Enter your query:</Box>
<TextInput value={this.state.query} onChange={this.handleChange} />
return (
<Box>
<Box marginRight={1}>
<Text>Enter your query:</Text>
</Box>
);
}

handleChange(query) {
this.setState({ query });
}
}
<TextInput value={query} onChange={setQuery} />
</Box>
);
};

render(<SearchQuery />);
```
Expand All @@ -61,14 +52,14 @@ Text to display when `value` is empty.

### showCursor

Type: `boolean`<br>
Type: `boolean`\
Default: `true`

Whether to show cursor and allow navigation inside text input with arrow keys.

### highlightPastedText

Type: `boolean`<br>
Type: `boolean`\
Default: `false`

Highlight pasted text.
Expand Down Expand Up @@ -102,7 +93,7 @@ This component also exposes an [uncontrolled](https://reactjs.org/docs/uncontrol

```jsx
import React from 'react';
import { render, Box } from 'ink';
import { render, Box, Text } from 'ink';
import { UncontrolledTextInput } from 'ink-text-input';

const SearchQuery = () => {
Expand All @@ -112,15 +103,14 @@ const SearchQuery = () => {

return (
<Box>
<Box marginRight={1}>Enter your query:</Box>
<Box marginRight={1}>
<Text>Enter your query:</Text>
</Box>

<UncontrolledTextInput onSubmit={handleSubmit} />
</Box>
);
};

render(<SearchQuery />);
```

## License

MIT © [Vadim Demedes](https://github.com/vadimdemedes)
Loading

0 comments on commit a33e519

Please sign in to comment.