ink-form
Version:
Complex user-friendly form component for React Ink
39 lines (38 loc) • 1.85 kB
JavaScript
import * as React from 'react';
import { Box, Text, useInput } from 'ink';
export const HELP_SECTION_ID = 'Help';
export const FormHeader = props => {
const sections = props.form.sections;
useInput((input, key) => {
let id = undefined;
if (key.rightArrow) {
id = props.currentTab + 1;
}
else if (key.leftArrow) {
id = props.currentTab - 1;
}
else if (/\d/.test(input)) {
id = parseInt(input) - 1;
}
if (id !== undefined && id >= 0 && id < sections.length) {
props.onChangeTab(id);
}
}, { isActive: !props.editingField });
return (React.createElement(Box, { borderStyle: "double", width: "100%", flexDirection: "column" },
React.createElement(Box, { width: "100%" },
React.createElement(Box, { flexGrow: 1 },
React.createElement(Text, { bold: true }, props.form.title)),
React.createElement(Box, null,
React.createElement(Text, null, !props.editingField ? 'Use arrow keys to move around' : 'Press ESC to cancel, or Enter to complete field'))),
React.createElement(Box, { width: "100%" },
React.createElement(Box, null, !props.editingField ? (sections.map((section, id) => (React.createElement(Box, { key: section.title },
React.createElement(Text, { color: "gray" },
"[",
id + 1,
"] "),
React.createElement(Text, { color: props.currentTab === id ? 'blue' : undefined, underline: props.currentTab === id }, section.title),
React.createElement(Text, null, " "))))) : (React.createElement(Box, null,
React.createElement(Text, null,
"Editing ",
props.editingField)))))));
};