/ components / design-system / ProgressBar.tsx
ProgressBar.tsx
 1  import { c as _c } from "react/compiler-runtime";
 2  import React from 'react';
 3  import { Text } from '../../ink.js';
 4  import type { Theme } from '../../utils/theme.js';
 5  type Props = {
 6    /**
 7     * How much progress to display, between 0 and 1 inclusive
 8     */
 9    ratio: number; // [0, 1]
10  
11    /**
12     * How many characters wide to draw the progress bar
13     */
14    width: number; // how many characters wide
15  
16    /**
17     * Optional color for the filled portion of the bar
18     */
19    fillColor?: keyof Theme;
20  
21    /**
22     * Optional color for the empty portion of the bar
23     */
24    emptyColor?: keyof Theme;
25  };
26  const BLOCKS = [' ', '▏', '▎', '▍', '▌', '▋', '▊', '▉', '█'];
27  export function ProgressBar(t0) {
28    const $ = _c(13);
29    const {
30      ratio: inputRatio,
31      width,
32      fillColor,
33      emptyColor
34    } = t0;
35    const ratio = Math.min(1, Math.max(0, inputRatio));
36    const whole = Math.floor(ratio * width);
37    let t1;
38    if ($[0] !== whole) {
39      t1 = BLOCKS[BLOCKS.length - 1].repeat(whole);
40      $[0] = whole;
41      $[1] = t1;
42    } else {
43      t1 = $[1];
44    }
45    let segments;
46    if ($[2] !== ratio || $[3] !== t1 || $[4] !== whole || $[5] !== width) {
47      segments = [t1];
48      if (whole < width) {
49        const remainder = ratio * width - whole;
50        const middle = Math.floor(remainder * BLOCKS.length);
51        segments.push(BLOCKS[middle]);
52        const empty = width - whole - 1;
53        if (empty > 0) {
54          let t2;
55          if ($[7] !== empty) {
56            t2 = BLOCKS[0].repeat(empty);
57            $[7] = empty;
58            $[8] = t2;
59          } else {
60            t2 = $[8];
61          }
62          segments.push(t2);
63        }
64      }
65      $[2] = ratio;
66      $[3] = t1;
67      $[4] = whole;
68      $[5] = width;
69      $[6] = segments;
70    } else {
71      segments = $[6];
72    }
73    const t2 = segments.join("");
74    let t3;
75    if ($[9] !== emptyColor || $[10] !== fillColor || $[11] !== t2) {
76      t3 = <Text color={fillColor} backgroundColor={emptyColor}>{t2}</Text>;
77      $[9] = emptyColor;
78      $[10] = fillColor;
79      $[11] = t2;
80      $[12] = t3;
81    } else {
82      t3 = $[12];
83    }
84    return t3;
85  }
86  //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdCIsIlRleHQiLCJUaGVtZSIsIlByb3BzIiwicmF0aW8iLCJ3aWR0aCIsImZpbGxDb2xvciIsImVtcHR5Q29sb3IiLCJCTE9DS1MiLCJQcm9ncmVzc0JhciIsInQwIiwiJCIsIl9jIiwiaW5wdXRSYXRpbyIsIk1hdGgiLCJtaW4iLCJtYXgiLCJ3aG9sZSIsImZsb29yIiwidDEiLCJsZW5ndGgiLCJyZXBlYXQiLCJzZWdtZW50cyIsInJlbWFpbmRlciIsIm1pZGRsZSIsInB1c2giLCJlbXB0eSIsInQyIiwiam9pbiIsInQzIl0sInNvdXJjZXMiOlsiUHJvZ3Jlc3NCYXIudHN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IFRleHQgfSBmcm9tICcuLi8uLi9pbmsuanMnXG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vdXRpbHMvdGhlbWUuanMnXG5cbnR5cGUgUHJvcHMgPSB7XG4gIC8qKlxuICAgKiBIb3cgbXVjaCBwcm9ncmVzcyB0byBkaXNwbGF5LCBiZXR3ZWVuIDAgYW5kIDEgaW5jbHVzaXZlXG4gICAqL1xuICByYXRpbzogbnVtYmVyIC8vIFswLCAxXVxuXG4gIC8qKlxuICAgKiBIb3cgbWFueSBjaGFyYWN0ZXJzIHdpZGUgdG8gZHJhdyB0aGUgcHJvZ3Jlc3MgYmFyXG4gICAqL1xuICB3aWR0aDogbnVtYmVyIC8vIGhvdyBtYW55IGNoYXJhY3RlcnMgd2lkZVxuXG4gIC8qKlxuICAgKiBPcHRpb25hbCBjb2xvciBmb3IgdGhlIGZpbGxlZCBwb3J0aW9uIG9mIHRoZSBiYXJcbiAgICovXG4gIGZpbGxDb2xvcj86IGtleW9mIFRoZW1lXG5cbiAgLyoqXG4gICAqIE9wdGlvbmFsIGNvbG9yIGZvciB0aGUgZW1wdHkgcG9ydGlvbiBvZiB0aGUgYmFyXG4gICAqL1xuICBlbXB0eUNvbG9yPzoga2V5b2YgVGhlbWVcbn1cblxuY29uc3QgQkxPQ0tTID0gWycgJywgJ+KWjycsICfilo4nLCAn4paNJywgJ+KWjCcsICfilosnLCAn4paKJywgJ+KWiScsICfilognXVxuXG5leHBvcnQgZnVuY3Rpb24gUHJvZ3Jlc3NCYXIoe1xuICByYXRpbzogaW5wdXRSYXRpbyxcbiAgd2lkdGgsXG4gIGZpbGxDb2xvcixcbiAgZW1wdHlDb2xvcixcbn06IFByb3BzKTogUmVhY3QuUmVhY3ROb2RlIHtcbiAgY29uc3QgcmF0aW8gPSBNYXRoLm1pbigxLCBNYXRoLm1heCgwLCBpbnB1dFJhdGlvKSlcbiAgY29uc3Qgd2hvbGUgPSBNYXRoLmZsb29yKHJhdGlvICogd2lkdGgpXG4gIGNvbnN0IHNlZ21lbnRzID0gW0JMT0NLU1tCTE9DS1MubGVuZ3RoIC0gMV0hLnJlcGVhdCh3aG9sZSldXG4gIGlmICh3aG9sZSA8IHdpZHRoKSB7XG4gICAgY29uc3QgcmVtYWluZGVyID0gcmF0aW8gKiB3aWR0aCAtIHdob2xlXG4gICAgY29uc3QgbWlkZGxlID0gTWF0aC5mbG9vcihyZW1haW5kZXIgKiBCTE9DS1MubGVuZ3RoKVxuICAgIHNlZ21lbnRzLnB1c2goQkxPQ0tTW21pZGRsZV0hKVxuXG4gICAgY29uc3QgZW1wdHkgPSB3aWR0aCAtIHdob2xlIC0gMVxuICAgIGlmIChlbXB0eSA+IDApIHtcbiAgICAgIHNlZ21lbnRzLnB1c2goQkxPQ0tTWzBdIS5yZXBlYXQoZW1wdHkpKVxuICAgIH1cbiAgfVxuXG4gIHJldHVybiAoXG4gICAgPFRleHQgY29sb3I9e2ZpbGxDb2xvcn0gYmFja2dyb3VuZENvbG9yPXtlbXB0eUNvbG9yfT5cbiAgICAgIHtzZWdtZW50cy5qb2luKCcnKX1cbiAgICA8L1RleHQ+XG4gIClcbn1cbiJdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU9BLEtBQUssTUFBTSxPQUFPO0FBQ3pCLFNBQVNDLElBQUksUUFBUSxjQUFjO0FBQ25DLGNBQWNDLEtBQUssUUFBUSxzQkFBc0I7QUFFakQsS0FBS0MsS0FBSyxHQUFHO0VBQ1g7QUFDRjtBQUNBO0VBQ0VDLEtBQUssRUFBRSxNQUFNLEVBQUM7O0VBRWQ7QUFDRjtBQUNBO0VBQ0VDLEtBQUssRUFBRSxNQUFNLEVBQUM7O0VBRWQ7QUFDRjtBQUNBO0VBQ0VDLFNBQVMsQ0FBQyxFQUFFLE1BQU1KLEtBQUs7O0VBRXZCO0FBQ0Y7QUFDQTtFQUNFSyxVQUFVLENBQUMsRUFBRSxNQUFNTCxLQUFLO0FBQzFCLENBQUM7QUFFRCxNQUFNTSxNQUFNLEdBQUcsQ0FBQyxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsQ0FBQztBQUU1RCxPQUFPLFNBQUFDLFlBQUFDLEVBQUE7RUFBQSxNQUFBQyxDQUFBLEdBQUFDLEVBQUE7RUFBcUI7SUFBQVIsS0FBQSxFQUFBUyxVQUFBO0lBQUFSLEtBQUE7SUFBQUMsU0FBQTtJQUFBQztFQUFBLElBQUFHLEVBS3BCO0VBQ04sTUFBQU4sS0FBQSxHQUFjVSxJQUFJLENBQUFDLEdBQUksQ0FBQyxDQUFDLEVBQUVELElBQUksQ0FBQUUsR0FBSSxDQUFDLENBQUMsRUFBRUgsVUFBVSxDQUFDLENBQUM7RUFDbEQsTUFBQUksS0FBQSxHQUFjSCxJQUFJLENBQUFJLEtBQU0sQ0FBQ2QsS0FBSyxHQUFHQyxLQUFLLENBQUM7RUFBQSxJQUFBYyxFQUFBO0VBQUEsSUFBQVIsQ0FBQSxRQUFBTSxLQUFBO0lBQ3JCRSxFQUFBLEdBQUFYLE1BQU0sQ0FBQ0EsTUFBTSxDQUFBWSxNQUFPLEdBQUcsQ0FBQyxDQUFDLENBQUFDLE1BQVEsQ0FBQ0osS0FBSyxDQUFDO0lBQUFOLENBQUEsTUFBQU0sS0FBQTtJQUFBTixDQUFBLE1BQUFRLEVBQUE7RUFBQTtJQUFBQSxFQUFBLEdBQUFSLENBQUE7RUFBQTtFQUFBLElBQUFXLFFBQUE7RUFBQSxJQUFBWCxDQUFBLFFBQUFQLEtBQUEsSUFBQU8sQ0FBQSxRQUFBUSxFQUFBLElBQUFSLENBQUEsUUFBQU0sS0FBQSxJQUFBTixDQUFBLFFBQUFOLEtBQUE7SUFBMURpQixRQUFBLEdBQWlCLENBQUNILEVBQXdDLENBQUM7SUFDM0QsSUFBSUYsS0FBSyxHQUFHWixLQUFLO01BQ2YsTUFBQWtCLFNBQUEsR0FBa0JuQixLQUFLLEdBQUdDLEtBQUssR0FBR1ksS0FBSztNQUN2QyxNQUFBTyxNQUFBLEdBQWVWLElBQUksQ0FBQUksS0FBTSxDQUFDSyxTQUFTLEdBQUdmLE1BQU0sQ0FBQVksTUFBTyxDQUFDO01BQ3BERSxRQUFRLENBQUFHLElBQUssQ0FBQ2pCLE1BQU0sQ0FBQ2dCLE1BQU0sQ0FBRSxDQUFDO01BRTlCLE1BQUFFLEtBQUEsR0FBY3JCLEtBQUssR0FBR1ksS0FBSyxHQUFHLENBQUM7TUFDL0IsSUFBSVMsS0FBSyxHQUFHLENBQUM7UUFBQSxJQUFBQyxFQUFBO1FBQUEsSUFBQWhCLENBQUEsUUFBQWUsS0FBQTtVQUNHQyxFQUFBLEdBQUFuQixNQUFNLEdBQUcsQ0FBQWEsTUFBUSxDQUFDSyxLQUFLLENBQUM7VUFBQWYsQ0FBQSxNQUFBZSxLQUFBO1VBQUFmLENBQUEsTUFBQWdCLEVBQUE7UUFBQTtVQUFBQSxFQUFBLEdBQUFoQixDQUFBO1FBQUE7UUFBdENXLFFBQVEsQ0FBQUcsSUFBSyxDQUFDRSxFQUF3QixDQUFDO01BQUE7SUFDeEM7SUFDRmhCLENBQUEsTUFBQVAsS0FBQTtJQUFBTyxDQUFBLE1BQUFRLEVBQUE7SUFBQVIsQ0FBQSxNQUFBTSxLQUFBO0lBQUFOLENBQUEsTUFBQU4sS0FBQTtJQUFBTSxDQUFBLE1BQUFXLFFBQUE7RUFBQTtJQUFBQSxRQUFBLEdBQUFYLENBQUE7RUFBQTtFQUlJLE1BQUFnQixFQUFBLEdBQUFMLFFBQVEsQ0FBQU0sSUFBSyxDQUFDLEVBQUUsQ0FBQztFQUFBLElBQUFDLEVBQUE7RUFBQSxJQUFBbEIsQ0FBQSxRQUFBSixVQUFBLElBQUFJLENBQUEsU0FBQUwsU0FBQSxJQUFBSyxDQUFBLFNBQUFnQixFQUFBO0lBRHBCRSxFQUFBLElBQUMsSUFBSSxDQUFRdkIsS0FBUyxDQUFUQSxVQUFRLENBQUMsQ0FBbUJDLGVBQVUsQ0FBVkEsV0FBUyxDQUFDLENBQ2hELENBQUFvQixFQUFnQixDQUNuQixFQUZDLElBQUksQ0FFRTtJQUFBaEIsQ0FBQSxNQUFBSixVQUFBO0lBQUFJLENBQUEsT0FBQUwsU0FBQTtJQUFBSyxDQUFBLE9BQUFnQixFQUFBO0lBQUFoQixDQUFBLE9BQUFrQixFQUFBO0VBQUE7SUFBQUEsRUFBQSxHQUFBbEIsQ0FBQTtFQUFBO0VBQUEsT0FGUGtCLEVBRU87QUFBQSIsImlnbm9yZUxpc3QiOltdfQ==