@farjs/ui - npm Package Compare versions

Comparing version 0.6.1 to 0.6.2

src/CheckBox.d.ts

+import { Widgets } from "@farjs/blessed";
+
+export interface CheckBoxProps {
+  readonly left: number;
+  readonly top: number;
+  readonly value: boolean;
+  readonly label: string;
+  readonly style: Widgets.Types.TStyle;
+  onChange(): void;
+}

src/CheckBox.mjs

+/**
+ * @typedef {import("./CheckBox").CheckBoxProps} CheckBoxProps
+ */
+import React from "react";
+import Button from "./Button.mjs";
+
+const h = React.createElement;
+
+/**
+ * @param {CheckBoxProps} props
+ */
+const CheckBox = (props) => {
+  const { buttonComp } = CheckBox;
+
+  return h(
+    React.Fragment,
+    null,
+    h(buttonComp, {
+      left: props.left,
+      top: props.top,
+      label: props.value ? "[x]" : "[ ]",
+      style: props.style,
+      onPress: props.onChange,
+    }),
+    h("text", {
+      height: 1,
+      left: props.left + 4,
+      top: props.top,
+      style: props.style,
+      content: props.label,
+    })
+  );
+};
+
+CheckBox.displayName = "CheckBox";
+CheckBox.buttonComp = Button;
+
+export default CheckBox;

src/ComboBoxPopup.d.ts

+import { Widgets } from "@farjs/blessed";
+import { ListViewport } from "./ListViewport";
+
+export interface ComboBoxPopupProps {
+  readonly left: number;
+  readonly top: number;
+  readonly width: number;
+  readonly items: string[];
+  readonly viewport: ListViewport;
+  setViewport(viewport: ListViewport): void;
+  readonly style: Widgets.Types.TStyle;
+  onClick(index: number): void;
+}

src/ComboBoxPopup.mjs

+/**
+ * @typedef {import("./ComboBoxPopup").ComboBoxPopupProps} ComboBoxPopupProps
+ */
+import React from "react";
+import SingleBorder from "./border/SingleBorder.mjs";
+import ListView from "./ListView.mjs";
+import ScrollBar from "./ScrollBar.mjs";
+
+const h = React.createElement;
+
+/**
+ * @param {ComboBoxPopupProps} props
+ */
+const ComboBoxPopup = (props) => {
+  const { singleBorderComp, listViewComp, scrollBarComp } = ComboBoxPopup;
+
+  const width = props.width;
+  const height = ComboBoxPopup.maxItems + 2;
+  const viewWidth = width - 2;
+  const theme = props.style;
+  const viewport = props.viewport;
+
+  return h(
+    "box",
+    {
+      clickable: true,
+      autoFocus: false,
+      width: width,
+      height: height,
+      left: props.left,
+      top: props.top,
+      onWheelup: () => {
+        props.setViewport(viewport.up());
+      },
+      onWheeldown: () => {
+        props.setViewport(viewport.down());
+      },
+      style: theme,
+    },
+
+    h(singleBorderComp, {
+      width: width,
+      height: height,
+      style: theme,
+    }),
+
+    h(listViewComp, {
+      left: 1,
+      top: 1,
+      width: viewWidth,
+      height: height - 2,
+      items: props.items.map(
+        (i) => `  ${i.slice(0, Math.min(viewWidth - 4, i.length))}  `
+      ),
+      viewport: viewport,
+      setViewport: props.setViewport,
+      style: theme,
+      onClick: props.onClick,
+    }),
+
+    viewport.length > viewport.viewLength
+      ? h(scrollBarComp, {
+          left: width - 1,
+          top: 1,
+          length: viewport.viewLength,
+          style: theme,
+          value: viewport.offset,
+          extent: viewport.viewLength,
+          min: 0,
+          max: viewport.length - viewport.viewLength,
+          onChange: (offset) => {
+            props.setViewport(viewport.updated(offset));
+          },
+        })
+      : null
+  );
+};
+
+ComboBoxPopup.displayName = "ComboBoxPopup";
+ComboBoxPopup.singleBorderComp = SingleBorder;
+ComboBoxPopup.listViewComp = ListView;
+ComboBoxPopup.scrollBarComp = ScrollBar;
+
+ComboBoxPopup.maxItems = 8;
+
+export default ComboBoxPopup;

src/ProgressBar.d.ts

+import { Widgets } from "@farjs/blessed";
+
+export interface ProgressBarProps {
+  readonly percent: number;
+  readonly left: number;
+  readonly top: number;
+  readonly length: number;
+  readonly style: Widgets.Types.TStyle;
+}

src/ProgressBar.mjs

+/**
+ * @typedef {import("./ProgressBar").ProgressBarProps} ProgressBarProps
+ */
+import React from "react";
+
+const h = React.createElement;
+
+/**
+ * @param {ProgressBarProps} props
+ */
+const ProgressBar = (props) => {
+  const percent = Math.max(Math.min(props.percent, 100), 0);
+  const length = Math.max(props.length, 0);
+  const filledLen = Math.trunc((length * percent) / 100);
+  const content =
+    ProgressBar.filledCh.repeat(filledLen) +
+    ProgressBar.dottedCh.repeat(length - filledLen);
+
+  return h("text", {
+    width: length,
+    height: 1,
+    left: props.left,
+    top: props.top,
+    style: props.style,
+    content: content,
+  });
+};
+
+ProgressBar.displayName = "ProgressBar";
+
+ProgressBar.filledCh = "\u2588"; // █
+ProgressBar.dottedCh = "\u2591"; // ░
+
+export default ProgressBar;

package.json

 {
   "name": "@farjs/ui",
   "author": "viktor-podzigun",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "license": "MIT",
@@ -6,0 +6,0 @@ "description": "Terminal UI React.js components library",

No alert changes

Improved metrics

Total package byte prevSize

92288

5.07%

Number of package files

95

6.74%

Lines of code

3276

5.34%

No dependency changes