progress bar (WIP)

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": ["babel-preset-react"],
+  "env": {
+    "development": {
+      "plugins": [
+        [
+          "transform-react-jsx",
+          {
+            "pragma": "h"
+          }
+        ]
+      ]
+    }
+  }
+}

docs/Bar.md

@@ -0,0 +1,40 @@
+The Bar component represents progress. See examples/progress.js for an example app.
+
+## Usage
+
+```js
+const {h, Text, Bar} = require('ink');
+
+<Bar
+	char="x"
+	progress={0.5}
+	left={5}
+	right={0}
+	green
+/>
+```
+
+## Props
+
+### char
+
+The character to use for each item in the Bar. Defaults to █ (block).
+
+### progress
+
+The percentage (between 0 and 1) of progress in the Bar.
+
+### left/right
+
+The number of characters to subtract from each side of the Bar. examples/progress.js demonstrates this. Commonly used if you want text before/after the progress bar on the same line.
+
+
+### {color}
+
+Pass any chalk colors (e.g. `green`, `bgBlue`), similar to Text.
+
+### ...
+
+Any other props are passed to Text as-is.
+
+

examples/progress.js

@@ -0,0 +1,49 @@
+/* @jsx h */
+const {h, mount, Component, Text, Bar} = require('../');
+
+const MAX = 20;
+
+class ProgressApp extends Component {
+	constructor() {
+		super();
+
+		this.state = {
+			i: 0
+		};
+	}
+
+	render() {
+		const text = `Running `;
+		return (
+			<div>
+				<Text green>
+					{text}
+				</Text>
+				<Bar
+					blue
+					left={text.length}
+					percent={this.state.i / MAX}
+					/>
+			</div>
+		);
+	}
+
+	componentDidMount() {
+		this.timer = setInterval(() => {
+			const i = this.state.i + 1;
+			this.setState({i}, () => {
+				if (i === MAX) {
+					// eslint-disable-next-line unicorn/no-process-exit
+					process.exit();
+				}
+			});
+		}, 100);
+	}
+
+	componentWillUnmount() {
+		clearInterval(this.timer);
+	}
+}
+
+mount(<ProgressApp/>, process.stdout);
+

examples/run

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+./node_modules/.bin/babel-node examples/$1.js
+

index.js

@@ -11,6 +11,7 @@ const Newline = require('./lib/components/newline');
 const Indent = require('./lib/components/indent');
 const Group = require('./lib/components/group');
 const Text = require('./lib/components/text');
+const Bar = require('./lib/components/bar');
 
 exports.StringComponent = StringComponent;
 exports.Component = Component;
@@ -19,6 +20,7 @@ exports.Newline = Newline;
 exports.Indent = Indent;
 exports.Group = Group;
 exports.Text = Text;
+exports.Bar = Bar;
 
 const noop = () => {};
 

lib/components/bar.js

@@ -0,0 +1,36 @@
+'use strict';
+
+const blacklist = require('blacklist');
+const Component = require('../component');
+const h = require('../h');
+const Text = require('./text');
+
+const PROPS = ['percent', 'left', 'right', 'columns', 'char'];
+
+class Bar extends Component {
+	getString() {
+		const {
+			percent = 1,
+			left = 0,
+			right = 0,
+			char = '█'
+		} = this.props;
+		const screen = this.props.columns || process.stdout.columns || 80;
+		const space = screen - right - left;
+		let str = '';
+		const max = Math.min(Math.floor(space * percent), space);
+		for (let i = 0; i < max; i++) {
+			str += char;
+		}
+
+		return str;
+	}
+
+	render() {
+		const props = blacklist(this.props, PROPS);
+		return h(Text, props, this.getString());
+	}
+}
+
+module.exports = Bar;
+

package.json

@@ -13,7 +13,8 @@
     "node": ">= 4"
   },
   "scripts": {
-    "test": "xo && ava"
+    "test": "xo && ava",
+    "example:progress": "babel-node examples/progress.js"
   },
   "files": [
     "lib",
@@ -25,6 +26,7 @@
   ],
   "dependencies": {
     "arrify": "^1.0.1",
+    "blacklist": "^1.1.4",
     "chalk": "^2.0.1",
     "indent-string": "^3.1.0",
     "lodash.flattendeep": "^4.4.0",
@@ -33,7 +35,10 @@
   },
   "devDependencies": {
     "ava": "^0.19.1",
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
     "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
     "babel-register": "^6.24.1",
     "eslint-config-xo-react": "^0.12.0",
     "eslint-plugin-react": "^7.1.0",

test/progress.js

@@ -0,0 +1,16 @@
+import test from 'ava';
+
+const Bar = require('../lib/components/bar.js');
+
+const run = (columns, left, right) => Bar.prototype.getString.call({
+	props: {columns, left, right, char: 'x'}
+});
+
+test(`has correct length`, t => {
+	const str = run(50, 0, 0);
+	t.is(str.length, 50);
+
+	const str2 = run(60, 10, 9);
+	t.is(str2.length, 41);
+});
+