fscr 5.4.1 → 6.1.1

package/dist/lib/components/Selector.js

@@ -0,0 +1,133 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { PureComponent, Component } from "react";
+import { Color, Box, StdinContext } from "ink";
+import Table from "./Table.js";
+const data = [["Sosa Saunders", "male", 17, "sosa.saunders@mail.com"], ["Sass6osa Saunders", "male", 17, "sosa.saunders@mail.com"], ["Sosa 62626Saunders", "male", 17, "sosa.saunders@mail.com"]];
+const columCount = data[0].length - 1;
+const rowCount = data.length - 1;
+const ARROW_UP = "\u001B[A";
+const ARROW_DOWN = "\u001B[B";
+const ARROW_LEFT = "\u001B[D";
+const ARROW_RIGHT = "\u001B[C";
+const ENTER = "\r";
+class Counter extends Component {
+  constructor() {
+    super();
+    console.clear();
+    this.state = {
+      i: 0,
+      active: [0, 0]
+    };
+  }
+  handleInput = data => {
+    const s = String(data);
+    let [rowA, columnA] = this.state.active;
+    if (s === ARROW_DOWN) {
+      if (rowA < rowCount) {
+        rowA++;
+      } else {
+        rowA = 0;
+      }
+      this.setState({
+        active: [rowA, columnA]
+      });
+    }
+    if (s === ARROW_UP) {
+      if (rowA !== 0) {
+        rowA--;
+      } else {
+        rowA = rowCount;
+      }
+      this.setState({
+        active: [rowA, columnA]
+      });
+    }
+    if (s === ARROW_LEFT) {
+      if (columnA !== 0) {
+        columnA--;
+      } else {
+        columnA = columCount;
+      }
+      this.setState({
+        active: [rowA, columnA]
+      });
+    }
+    if (s === ARROW_RIGHT) {
+      if (columnA < columCount) {
+        columnA++;
+      } else {
+        columnA = 0;
+      }
+      this.setState({
+        active: [rowA, columnA]
+      });
+    }
+    if (s === ENTER) {
+      console.info("ENTER)");
+    }
+  };
+  handleSelect = item => {
+    console.log(item);
+  };
+  componentDidMount() {
+    const {
+      stdin,
+      setRawMode
+    } = this.props;
+    setRawMode(true);
+    stdin.on("data", this.handleInput);
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(Box, {
+      flexDirection: "column"
+    }, /*#__PURE__*/React.createElement(Table, {
+      cell: ({
+        children,
+        cellData
+      }) => {
+        const {
+          row,
+          column
+        } = cellData;
+        // console.info("Console --- cellData.i", row, column);
+        const [rowA, columnA] = this.state.active;
+        let isActive = row + "_" + column === rowA + "_" + columnA;
+        return /*#__PURE__*/React.createElement(Box, {
+          paddingRight: 1
+        }, /*#__PURE__*/React.createElement(Color, {
+          hex: isActive ? "#1cff9a" : "#FFF",
+          bgHex: isActive ? "#0087ff" : "#000"
+        }, children[1]));
+      },
+      data: data
+    }), /*#__PURE__*/React.createElement(Box, {
+      width: 32,
+      margin: 1
+    }, /*#__PURE__*/React.createElement(Box, {
+      width: 5,
+      height: 5,
+      marginRight: 5
+    }, /*#__PURE__*/React.createElement(Color, {
+      bgHex: "#f00"
+    }, "Hey theasdre")), /*#__PURE__*/React.createElement(Box, {
+      width: 5,
+      marginLeft: 5
+    }, /*#__PURE__*/React.createElement(Color, {
+      hex: "#000000",
+      bgHex: "#FFFFFF"
+    }, "Hey theasdre"))));
+  }
+}
+export default class Keyselect extends PureComponent {
+  render() {
+    return /*#__PURE__*/React.createElement(StdinContext.Consumer, null, ({
+      stdin,
+      setRawMode
+    }) => /*#__PURE__*/React.createElement(Counter, _extends({}, this.props, {
+      stdin: stdin,
+      setRawMode: setRawMode
+    })));
+  }
+}
+
+// render(<Keyselect />);

package/dist/lib/components/TabChanger.js

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { PureComponent, Component } from "react";
+import { Color, Box, StdinContext } from "ink";
+import BBox from "ink-box";
+const ARROW_UP = "\u001B[A";
+const ARROW_DOWN = "\u001B[B";
+const ARROW_LEFT = "\u001B[D";
+const ARROW_RIGHT = "\u001B[C";
+const TAB_KEY = "\u0009";
+const ENTER = "\r";
+// const ENTER = "\u000d\n";
+class TabsHandler extends Component {
+  constructor() {
+    super();
+    console.clear();
+    this.state = {
+      i: 0,
+      active: [0, 0]
+    };
+  }
+  onKeyChange = data => {
+    const s = String(data);
+    const {
+      children,
+      onChange,
+      activeTab
+    } = this.props;
+    const tabList = children.map((child, key) => child.props.name);
+    let curInd = tabList.indexOf(activeTab);
+    if (s === ARROW_LEFT) {
+      if (curInd > 0) {
+        curInd--;
+      } else {
+        curInd = tabList.length - 1;
+      }
+      onChange(tabList[curInd]);
+    }
+    if (s === ARROW_RIGHT || s === TAB_KEY) {
+      if (curInd < tabList.length - 1) {
+        curInd++;
+      } else {
+        curInd = 0;
+      }
+      onChange(tabList[curInd]);
+    }
+    if (s === ENTER) {
+      console.info("ENTER)");
+    }
+  };
+  handleSelect = item => {
+    console.log(item);
+  };
+  componentDidMount() {
+    const {
+      stdin,
+      setRawMode
+    } = this.props;
+    setRawMode(true);
+    stdin.on("data", this.onKeyChange);
+  }
+  render() {
+    const {
+      children,
+      activeTab
+    } = this.props;
+    const tabObj = {};
+    children.forEach((child, key) => {
+      tabObj[child.props.name] = child;
+    });
+    let lengthOfChars = Object.keys(tabObj).join(" ").length;
+    return /*#__PURE__*/React.createElement(Box, {
+      flexDirection: "column"
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexDirection: "row"
+    }, children.map((child, key) => {
+      const {
+        name,
+        renderName
+      } = child.props;
+      return /*#__PURE__*/React.createElement(Box, {
+        key: name,
+        flexDirection: "row"
+      }, /*#__PURE__*/React.createElement(Box, {
+        padding: 0.5
+      }, /*#__PURE__*/React.createElement(Color, {
+        bgGreen: activeTab === name,
+        black: activeTab === name
+      }, renderName ? renderName() : name[0].toUpperCase() + name.slice(1))));
+    })), /*#__PURE__*/React.createElement(Box, null, Array.from({
+      length: lengthOfChars + children.length
+    }).map(e => "").join("─")), /*#__PURE__*/React.createElement(Box, {
+      paddingLeft: 0.5
+    }, tabObj[activeTab].props.children));
+  }
+}
+export class Tab extends PureComponent {
+  render() {
+    return /*#__PURE__*/React.createElement(Box, null, "TEST");
+  }
+}
+export class Tabs extends PureComponent {
+  render() {
+    return /*#__PURE__*/React.createElement(StdinContext.Consumer, null, ({
+      stdin,
+      setRawMode
+    }) => /*#__PURE__*/React.createElement(TabsHandler, _extends({}, this.props, {
+      stdin: stdin,
+      setRawMode: setRawMode
+    })));
+  }
+}
+
+// render(<Keyselect />);

package/dist/lib/components/Table.js

@@ -0,0 +1,177 @@
+import React from "react";
+import { Box, Color } from "ink";
+import PropTypes from "prop-types";
+
+// Components ----------------------------------------------------------------
+
+const Header = ({
+  children
+}) => /*#__PURE__*/React.createElement(Color, {
+  blue: true,
+  bold: true
+}, children);
+Header.propTypes = {
+  children: PropTypes.any.isRequired
+};
+const Cell = ({
+  children
+}) => /*#__PURE__*/React.createElement(Color, null, children);
+Cell.propTypes = {
+  children: PropTypes.any.isRequired,
+  focused: PropTypes.bool
+};
+Cell.defaultProps = {
+  focused: false
+};
+const Skeleton = ({
+  children
+}) => /*#__PURE__*/React.createElement(Color, {
+  white: true,
+  bold: true
+}, children);
+Skeleton.propTypes = {
+  children: PropTypes.any.isRequired
+};
+
+// Helpers -------------------------------------------------------------------
+
+const get = key => obj => obj[key];
+const length = el => el.length;
+const isUndefined = v => v === undefined;
+const not = func => (...args) => !func(...args);
+const toString = val => (val || String()).toString();
+const isEmpty = el => el.length === 0;
+const intersperse = val => vals => vals.reduce((s, c, i) => isEmpty(s) ? [c] : [...s, val(i), c], []);
+const fillWith = el => length => str => `${str}${el.repeat(length - str.length)}`;
+const getCells = columns => data => columns.map(({
+  width,
+  key
+}) => ({
+  width,
+  key,
+  value: get(key)(data)
+}));
+const union = (...arrs) => [...new Set([].concat(...arrs))];
+const generateColumn = padding => data => key => {
+  const allColumns = data.map(get(key));
+  const columnsWithValues = allColumns.filter(not(isUndefined));
+  const vals = columnsWithValues.map(toString);
+  const lengths = vals.map(length);
+  const width = Math.max(...lengths, key.length) + padding * 2;
+  return {
+    width,
+    key
+  };
+};
+const copyToObject = func => arr => arr.reduce((o, k) => ({
+  ...o,
+  [k]: func(k)
+}), {});
+const generateHeadings = keys => copyToObject(key => key)(keys);
+const generateSkeleton = keys => copyToObject(() => "")(keys);
+const line = (key, Cell, Skeleton, {
+  line,
+  left,
+  right,
+  cross,
+  padding
+}) => (cells, index = "") => {
+  const fillWithLine = fillWith(line);
+  const columns = cells.map(({
+    width,
+    key,
+    value
+  }, i) => /*#__PURE__*/React.createElement(Cell, {
+    key: key + String(i),
+    cellData: {
+      key,
+      value,
+      row: index,
+      column: i,
+      width
+    }
+  }, line.repeat(padding), fillWithLine(width - padding)(toString(value))));
+  return /*#__PURE__*/React.createElement(Box, {
+    key: key + String(index)
+  }, /*#__PURE__*/React.createElement(Skeleton, null, left), intersperse(i => /*#__PURE__*/React.createElement(Skeleton, {
+    key: i
+  }, cross))(columns), /*#__PURE__*/React.createElement(Skeleton, null, right));
+};
+
+// Table ---------------------------------------------------------------------
+
+// Config --------------------------------------------------------------------
+
+const Table = ({
+  data,
+  padding,
+  header,
+  cell,
+  skeleton
+}) => {
+  const topLine = line("top", skeleton, skeleton, {
+    line: "─",
+    left: "┌",
+    right: "┐",
+    cross: "┬",
+    padding
+  });
+  const bottomLine = line("bottom", skeleton, skeleton, {
+    line: "─",
+    left: "└",
+    right: "┘",
+    cross: "┴",
+    padding
+  });
+  const midLine = line("mid", skeleton, skeleton, {
+    line: "─",
+    left: "├",
+    right: "┤",
+    cross: "┼",
+    padding
+  });
+  const headers = line("header", header, skeleton, {
+    line: " ",
+    left: "│",
+    right: "│",
+    cross: "│",
+    padding
+  });
+  const row = line("row", cell, skeleton, {
+    line: " ",
+    left: "│",
+    right: "│",
+    cross: "│",
+    padding
+  });
+  const keys = union(...data.map(Object.keys));
+  const columns = keys.map(generateColumn(padding)(data));
+  const headings = generateHeadings(keys);
+  const _skeleton = generateSkeleton(keys);
+  const getRow = getCells(columns);
+  const headersRow = getRow(headings);
+  const emptyRow = getRow(_skeleton);
+  const rows = data.map((d, i) => row(getRow(d), i));
+  return /*#__PURE__*/React.createElement("span", null, topLine(emptyRow), intersperse(i => midLine(emptyRow, i))(rows), bottomLine(emptyRow));
+};
+Table.propTypes = {
+  data: PropTypes.any,
+  padding: PropTypes.number,
+  header: PropTypes.func,
+  cell: PropTypes.func,
+  skeleton: PropTypes.func
+};
+Table.defaultProps = {
+  data: [],
+  padding: 1,
+  header: Header,
+  cell: Cell,
+  skeleton: Skeleton
+};
+
+// Exports -------------------------------------------------------------------
+
+export default Table;
+export { Header, Cell, Skeleton };
+
+// ---------------------------------------------------------------------------

package/dist/lib/components/Tabs.js

@@ -0,0 +1,221 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Box, Color, StdinContext } from "ink";
+class Tab extends Component {
+  render() {
+    const {
+      children
+    } = this.props;
+    return children;
+  }
+}
+Tab.propTypes = {
+  children: PropTypes.node.isRequired,
+  name: PropTypes.string.isRequired // eslint-disable-line react/no-unused-prop-types
+};
+class TabsWithStdin extends Component {
+  constructor(props) {
+    super(props);
+    this.isColumn = this.isColumn.bind(this);
+    this.handleTabChange = this.handleTabChange.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.moveToNextTab = this.moveToNextTab.bind(this);
+    this.moveToPreviousTab = this.moveToPreviousTab.bind(this);
+    this.state = {
+      activeTab: 0
+    };
+    this.defaultKeyMap = {
+      useNumbers: true,
+      useTab: true,
+      previous: [this.isColumn() ? "up" : "left"],
+      next: [this.isColumn() ? "down" : "right"]
+    };
+  }
+  componentDidMount() {
+    const {
+      stdin,
+      setRawMode
+    } = this.props;
+
+    // use ink / node `setRawMode` to read key-by-key
+    setRawMode(true);
+    stdin.on("keypress", this.handleKeyPress);
+
+    // select the first tab on component mount
+    this.handleTabChange(0);
+  }
+  componentWillUnmount() {
+    const {
+      stdin,
+      setRawMode
+    } = this.props;
+    setRawMode(false); // remove set raw mode, as it might interfere with CTRL-C
+    stdin.removeListener("keypress", this.handleKeyPress);
+  }
+  handleTabChange(tabId) {
+    const {
+      children,
+      onChange
+    } = this.props;
+    const tab = children[tabId];
+    if (!tab) {
+      return;
+    }
+    this.setState({
+      activeTab: tabId
+    });
+    onChange(tab.props.name, tab);
+  }
+  handleKeyPress(ch, key) {
+    const {
+      keyMap
+    } = this.props;
+    if (!key) {
+      return;
+    }
+    const currentKeyMap = {
+      ...this.defaultKeyMap,
+      ...keyMap
+    };
+    const {
+      useNumbers,
+      useTab,
+      previous,
+      next
+    } = currentKeyMap;
+    if (previous.some(keyName => keyName === key.name)) {
+      this.moveToPreviousTab();
+    }
+    if (next.some(keyName => keyName === key.name)) {
+      this.moveToNextTab();
+    }
+    switch (key.name) {
+      case "tab":
+        {
+          if (!useTab) {
+            return;
+          }
+          if (key.shift === true) {
+            this.moveToPreviousTab();
+          } else {
+            this.moveToNextTab();
+          }
+          break;
+        }
+      case "0":
+      case "1":
+      case "2":
+      case "3":
+      case "4":
+      case "5":
+      case "6":
+      case "7":
+      case "8":
+      case "9":
+        {
+          if (!useNumbers) {
+            return;
+          }
+          if (key.meta === true) {
+            const tabId = key.name === "0" ? 9 : parseInt(key.name, 10) - 1;
+            this.handleTabChange(tabId);
+          }
+          break;
+        }
+      default:
+        break;
+    }
+  }
+  isColumn() {
+    const {
+      flexDirection
+    } = this.props;
+    return flexDirection === "column" || flexDirection === "column-reverse";
+  }
+  moveToNextTab() {
+    const {
+      children
+    } = this.props;
+    const {
+      activeTab
+    } = this.state;
+    let nextTabId = activeTab + 1;
+    if (nextTabId >= children.length) {
+      nextTabId = 0;
+    }
+    this.handleTabChange(nextTabId);
+  }
+  moveToPreviousTab() {
+    const {
+      children
+    } = this.props;
+    const {
+      activeTab
+    } = this.state;
+    let nextTabId = activeTab - 1;
+    if (nextTabId < 0) {
+      nextTabId = children.length - 1;
+    }
+    this.handleTabChange(nextTabId);
+  }
+  render() {
+    const {
+      children,
+      onChange,
+      flexDirection,
+      ...rest
+    } = this.props;
+    const {
+      activeTab
+    } = this.state;
+    const separatorWidth = rest.width || 6;
+    const separator = this.isColumn() ? new Array(separatorWidth).fill("─").join("") : " | ";
+    return /*#__PURE__*/React.createElement(Box, _extends({
+      flexDirection: flexDirection
+    }, rest), children.map((child, key) => {
+      const {
+        name
+      } = child.props;
+      return /*#__PURE__*/React.createElement(Box, {
+        key: name,
+        flexDirection: flexDirection
+      }, key !== 0 && /*#__PURE__*/React.createElement(Color, {
+        dim: true
+      }, separator), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Color, {
+        keyword: "grey"
+      }, key + 1, ". "), /*#__PURE__*/React.createElement(Color, {
+        bgGreen: activeTab === key,
+        black: activeTab === key
+      }, child)));
+    }));
+  }
+}
+TabsWithStdin.defaultProps = {
+  flexDirection: "row",
+  keyMap: null
+};
+TabsWithStdin.propTypes = {
+  setRawMode: PropTypes.func.isRequired,
+  stdin: PropTypes.object.isRequired,
+  // eslint-disable-line react/forbid-prop-types
+  onChange: PropTypes.func.isRequired,
+  children: PropTypes.node.isRequired,
+  flexDirection: PropTypes.string,
+  keyMap: PropTypes.shape({
+    useNumbers: PropTypes.bool,
+    useTab: PropTypes.bool,
+    previous: PropTypes.arrayOf(PropTypes.string),
+    next: PropTypes.arrayOf(PropTypes.string)
+  })
+};
+function Tabs(props) {
+  return /*#__PURE__*/React.createElement(StdinContext.Consumer, null, ({
+    stdin,
+    setRawMode
+  }) => /*#__PURE__*/React.createElement(TabsWithStdin, _extends({
+    stdin: stdin,
+    setRawMode: setRawMode
+  }, props)));
+}
+export { Tab, Tabs };