@buoy-gg/network 7.0.12 → 7.0.14

package/lib/commonjs/network/components/NetworkNumberPrompt.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NetworkNumberPrompt = NetworkNumberPrompt;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Entering one number, without the keyboard eating the screen.
+ *
+ * The custom status / delay / times fields used to be inline inputs sitting
+ * mid-form. Focusing one raises the keyboard, which on a phone covers roughly
+ * the bottom half of the tool — including, depending on where you'd scrolled,
+ * the field you were typing into and the Save button you needed next.
+ *
+ * Pinning the panel to the TOP is the fix, and it's the same one
+ * `StorageValueEditModal` reached for: a centred panel gets shoved up or
+ * covered the moment the field focuses, and a bottom sheet is simply
+ * underneath it. At the top it stays put and stays readable.
+ *
+ * Deliberately not a reuse of that component — this asks for a number and
+ * nothing else. It has no type inference, no raw-JSON escape hatch and no
+ * shape-preservation rules, so borrowing 400 lines to avoid writing 100 would
+ * be the wrong trade.
+ */
+
+function NetworkNumberPrompt({
+  title,
+  hint,
+  value,
+  placeholder = "Number",
+  min,
+  max,
+  onSubmit,
+  onCancel
+}) {
+  const [text, setText] = (0, _react.useState)(value != null ? String(value) : "");
+  const submit = () => {
+    const trimmed = text.trim();
+    if (!trimmed) {
+      onSubmit(null);
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      onSubmit(null);
+      return;
+    }
+    // Clamped here rather than accepted-then-silently-changed: a field that
+    // takes 999 and stores 599 is a field that lies.
+    let next = parsed;
+    if (min != null) next = Math.max(min, next);
+    if (max != null) next = Math.min(max, next);
+    onSubmit(next);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.overlay,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+      style: styles.backdrop,
+      activeOpacity: 1,
+      onPress: onCancel,
+      "sentry-label": "ignore dismiss number prompt"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.panel,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: styles.input,
+        value: text,
+        onChangeText: setText,
+        placeholder: placeholder,
+        placeholderTextColor: _sharedUi.macOSColors.text.muted,
+        keyboardType: "number-pad",
+        autoFocus: true,
+        selectTextOnFocus: true,
+        onSubmitEditing: submit,
+        returnKeyType: "done",
+        "sentry-label": "ignore number prompt input",
+        accessibilityLabel: title
+      }), hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.hint,
+        children: hint
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.actions,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: onCancel,
+          "sentry-label": "ignore cancel number prompt",
+          style: [styles.button, styles.cancelButton],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cancelText,
+            children: "Cancel"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: submit,
+          "sentry-label": "ignore save number prompt",
+          style: [styles.button, styles.saveButton],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.saveText,
+            children: "Set"
+          })
+        })]
+      })]
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    ..._sharedUi.absoluteFill,
+    zIndex: 40
+  },
+  backdrop: {
+    ..._sharedUi.absoluteFill,
+    backgroundColor: "rgba(0,0,0,0.6)"
+  },
+  panel: {
+    marginHorizontal: 12,
+    marginTop: 12,
+    padding: 14,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.hover,
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    gap: 10
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.text.primary
+  },
+  input: {
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.input,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 16,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.text.primary
+  },
+  hint: {
+    fontSize: 10,
+    color: _sharedUi.macOSColors.text.muted
+  },
+  actions: {
+    flexDirection: "row",
+    gap: 8
+  },
+  button: {
+    flex: 1,
+    paddingVertical: 10,
+    borderRadius: 6,
+    alignItems: "center",
+    borderWidth: 1
+  },
+  cancelButton: {
+    borderColor: _sharedUi.macOSColors.border.default,
+    backgroundColor: _sharedUi.macOSColors.background.base
+  },
+  cancelText: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: _sharedUi.macOSColors.text.secondary
+  },
+  saveButton: {
+    borderColor: _sharedUi.macOSColors.semantic.info,
+    backgroundColor: `${_sharedUi.macOSColors.semantic.info}22`
+  },
+  saveText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.semantic.info
+  }
+});