@webority-technologies/mobile 0.0.1

package/lib/module/components/NumberInput/NumberInput.js

@@ -0,0 +1,388 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useTheme } from "../../theme/index.js";
+import { triggerHaptic } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeMap = {
+  sm: {
+    buttonSize: 30,
+    inputMinWidth: 44,
+    inputHeight: 30,
+    fontSize: 13,
+    iconFontSize: 16,
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    gap: 6
+  },
+  md: {
+    buttonSize: 38,
+    inputMinWidth: 56,
+    inputHeight: 38,
+    fontSize: 15,
+    iconFontSize: 18,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    gap: 8
+  },
+  lg: {
+    buttonSize: 46,
+    inputMinWidth: 68,
+    inputHeight: 46,
+    fontSize: 17,
+    iconFontSize: 20,
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    gap: 10
+  }
+};
+const LONG_PRESS_DELAY = 500;
+const LONG_PRESS_INTERVAL = 80;
+const roundToPrecision = (value, precision) => {
+  if (!Number.isFinite(value)) return 0;
+  if (precision <= 0) return Math.round(value);
+  const factor = Math.pow(10, precision);
+  return Math.round(value * factor) / factor;
+};
+const clamp = (value, min, max) => {
+  if (value < min) return min;
+  if (value > max) return max;
+  return value;
+};
+const formatValue = (value, allowDecimal, precision) => {
+  if (!Number.isFinite(value)) return '';
+  if (allowDecimal && precision > 0) {
+    return value.toFixed(precision);
+  }
+  return String(Math.trunc(value));
+};
+const sanitizeTyped = (raw, allowDecimal) => {
+  if (!raw) return '';
+  let cleaned = raw.replace(/[^0-9.-]/g, '');
+  // Allow only one leading minus.
+  cleaned = cleaned.replace(/(?!^)-/g, '');
+  if (!allowDecimal) {
+    cleaned = cleaned.replace(/\./g, '');
+  } else {
+    // Allow at most one decimal point.
+    const firstDot = cleaned.indexOf('.');
+    if (firstDot !== -1) {
+      cleaned = cleaned.slice(0, firstDot + 1) + cleaned.slice(firstDot + 1).replace(/\./g, '');
+    }
+  }
+  return cleaned;
+};
+const NumberInput = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    value,
+    onChange,
+    min = Number.NEGATIVE_INFINITY,
+    max = Number.POSITIVE_INFINITY,
+    step = 1,
+    allowDecimal = false,
+    precision = 0,
+    label,
+    helperText,
+    error,
+    disabled = false,
+    size = 'md',
+    variant = 'inline',
+    unit,
+    accessibilityLabel,
+    style,
+    inputStyle,
+    labelStyle,
+    textInputProps,
+    testID
+  } = props;
+  const theme = useTheme();
+  const sizeStyles = sizeMap[size];
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const inputRef = useRef(null);
+  const [draft, setDraft] = useState(formatValue(value, allowDecimal, precision));
+  const [editing, setEditing] = useState(false);
+  const repeatTimeoutRef = useRef(null);
+  const repeatIntervalRef = useRef(null);
+  const clearRepeat = useCallback(() => {
+    if (repeatTimeoutRef.current !== null) {
+      clearTimeout(repeatTimeoutRef.current);
+      repeatTimeoutRef.current = null;
+    }
+    if (repeatIntervalRef.current !== null) {
+      clearInterval(repeatIntervalRef.current);
+      repeatIntervalRef.current = null;
+    }
+  }, []);
+  useEffect(() => clearRepeat, [clearRepeat]);
+
+  // Keep draft in sync with value when not actively editing.
+  useEffect(() => {
+    if (!editing) {
+      setDraft(formatValue(value, allowDecimal, precision));
+    }
+  }, [value, allowDecimal, precision, editing]);
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const interactive = !disabled;
+  const setExternal = useCallback(next => {
+    const rounded = roundToPrecision(next, allowDecimal ? precision : 0);
+    const clamped = clamp(rounded, min, max);
+    if (clamped !== value) {
+      onChange(clamped);
+    }
+  }, [allowDecimal, max, min, onChange, precision, value]);
+  const decrement = useCallback(() => {
+    if (!interactive || atMin) return;
+    triggerHaptic('impactLight');
+    setExternal(value - step);
+  }, [atMin, interactive, setExternal, step, value]);
+  const increment = useCallback(() => {
+    if (!interactive || atMax) return;
+    triggerHaptic('impactLight');
+    setExternal(value + step);
+  }, [atMax, interactive, setExternal, step, value]);
+
+  // Imperative ref.
+  React.useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    clear: () => {
+      setDraft('');
+      if (Number.isFinite(min) && min > 0) {
+        onChange(min);
+      } else {
+        onChange(0 < min ? min : 0 > max ? max : 0);
+      }
+    }
+  }), [max, min, onChange]);
+  const startRepeating = useCallback(direction => {
+    if (!interactive) return;
+    clearRepeat();
+    repeatTimeoutRef.current = setTimeout(() => {
+      repeatIntervalRef.current = setInterval(() => {
+        if (direction === 'inc') {
+          // Read latest via closure of state via setExternal.
+          // Compute next by reading current value from props on each tick.
+          // Since closures capture, we rely on state updating between intervals.
+          increment();
+        } else {
+          decrement();
+        }
+      }, LONG_PRESS_INTERVAL);
+    }, LONG_PRESS_DELAY);
+  }, [clearRepeat, decrement, increment, interactive]);
+  const handleChangeText = useCallback(text => {
+    const cleaned = sanitizeTyped(text, allowDecimal);
+    setDraft(cleaned);
+    // Don't push numeric value while user types intermediate states (e.g., '-' or '1.').
+    const parsed = Number(cleaned);
+    if (cleaned !== '' && cleaned !== '-' && cleaned !== '.' && Number.isFinite(parsed)) {
+      // Only push if within bounds; otherwise wait for blur to clamp.
+      if (parsed >= min && parsed <= max) {
+        if (parsed !== value) {
+          onChange(roundToPrecision(parsed, allowDecimal ? precision : 0));
+        }
+      }
+    }
+  }, [allowDecimal, max, min, onChange, precision, value]);
+  const handleBlur = useCallback(() => {
+    setEditing(false);
+    const parsed = Number(draft);
+    if (draft === '' || !Number.isFinite(parsed)) {
+      // Reset to the last known good value.
+      setDraft(formatValue(value, allowDecimal, precision));
+      return;
+    }
+    const rounded = roundToPrecision(parsed, allowDecimal ? precision : 0);
+    const clamped = clamp(rounded, min, max);
+    if (clamped !== value) {
+      onChange(clamped);
+    }
+    setDraft(formatValue(clamped, allowDecimal, precision));
+  }, [allowDecimal, draft, max, min, onChange, precision, value]);
+  const handleFocus = useCallback(() => {
+    setEditing(true);
+  }, []);
+  const minusBg = atMin || disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
+  const plusBg = atMax || disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
+  const minusFg = atMin || disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+  const plusFg = atMax || disabled ? theme.colors.text.disabled : theme.colors.text.primary;
+  const inputBg = disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
+  const borderColor = error ? theme.colors.border.error : theme.colors.border.primary;
+  const buttonBaseStyle = {
+    width: sizeStyles.buttonSize,
+    height: sizeStyles.buttonSize,
+    borderRadius: sizeStyles.borderRadius,
+    borderWidth: 1,
+    borderColor,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+  const renderButton = (type, onPress, disabledLocal, a11yLabel, bg, fg, glyph) => /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    onLongPress: () => startRepeating(type),
+    onPressOut: clearRepeat,
+    delayLongPress: LONG_PRESS_DELAY,
+    disabled: disabledLocal,
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      disabled: disabledLocal
+    },
+    style: ({
+      pressed
+    }) => [buttonBaseStyle, {
+      backgroundColor: bg
+    }, pressed && !disabledLocal ? {
+      backgroundColor: theme.colors.surface.pressed
+    } : null],
+    testID: `${testID ?? 'numberinput'}-${type === 'inc' ? 'plus' : 'minus'}`,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: sizeStyles.iconFontSize,
+        color: fg,
+        fontWeight: theme.typography.fontWeight.semibold,
+        lineHeight: sizeStyles.iconFontSize + 2
+      },
+      children: glyph
+    })
+  });
+  const accessibleInputLabel = accessibilityLabel ?? label ?? 'Number input';
+  const inputBlock = /*#__PURE__*/_jsxs(View, {
+    style: [styles.row, {
+      columnGap: sizeStyles.gap
+    }],
+    children: [renderButton('dec', decrement, atMin || disabled, 'Decrease', minusBg, minusFg, '−'), /*#__PURE__*/_jsxs(View, {
+      style: [styles.inputContainer, {
+        minWidth: sizeStyles.inputMinWidth,
+        height: sizeStyles.inputHeight,
+        paddingHorizontal: sizeStyles.paddingHorizontal,
+        borderRadius: sizeStyles.borderRadius,
+        backgroundColor: inputBg,
+        borderColor
+      }],
+      children: [/*#__PURE__*/_jsx(TextInput, {
+        ref: inputRef,
+        value: draft,
+        onChangeText: handleChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        editable: !disabled,
+        keyboardType: allowDecimal ? 'decimal-pad' : 'number-pad',
+        selectTextOnFocus: true,
+        accessibilityRole: "adjustable",
+        accessibilityLabel: accessibleInputLabel,
+        accessibilityValue: {
+          now: Number.isFinite(value) ? value : 0
+        },
+        accessibilityState: {
+          disabled
+        },
+        accessibilityActions: [{
+          name: 'increment',
+          label: 'Increase'
+        }, {
+          name: 'decrement',
+          label: 'Decrease'
+        }],
+        onAccessibilityAction: e => {
+          if (e.nativeEvent.actionName === 'increment') increment();
+          if (e.nativeEvent.actionName === 'decrement') decrement();
+        },
+        style: [styles.input, {
+          fontSize: sizeStyles.fontSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
+          fontWeight: theme.typography.fontWeight.medium
+        }, inputStyle],
+        ...textInputProps
+      }), unit ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.unit, {
+          fontSize: sizeStyles.fontSize,
+          color: theme.colors.text.tertiary
+        }],
+        children: unit
+      }) : null]
+    }), renderButton('inc', increment, atMax || disabled, 'Increase', plusBg, plusFg, '+')]
+  });
+  const labelEl = label ? /*#__PURE__*/_jsx(Text, {
+    style: [styles.label, {
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.fontSize.sm,
+      fontWeight: theme.typography.fontWeight.medium
+    }, labelStyle],
+    children: label
+  }) : null;
+  const helperEl = error || helperText ? /*#__PURE__*/_jsx(Text, {
+    style: [styles.helper, {
+      color: error ? theme.colors.error : theme.colors.text.tertiary,
+      fontSize: theme.typography.fontSize.sm
+    }],
+    accessibilityLiveRegion: error ? 'polite' : 'none',
+    children: error ?? helperText
+  }) : null;
+  if (variant === 'horizontal') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.horizontalContainer, style],
+      testID: testID,
+      accessibilityState: {
+        disabled
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.horizontalLabelWrap,
+        children: labelEl
+      }), /*#__PURE__*/_jsxs(View, {
+        children: [inputBlock, helperEl]
+      })]
+    });
+  }
+
+  // 'inline' and 'stacked' both stack label above the spinner row.
+  return /*#__PURE__*/_jsxs(View, {
+    style: style,
+    testID: testID,
+    accessibilityState: {
+      disabled
+    },
+    children: [labelEl, inputBlock, helperEl]
+  });
+});
+NumberInput.displayName = 'NumberInput';
+const buildStyles = _theme => StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderWidth: 1,
+    flex: 0
+  },
+  input: {
+    flex: 1,
+    textAlign: 'center',
+    padding: 0
+  },
+  unit: {
+    marginLeft: 4
+  },
+  label: {
+    marginBottom: 6
+  },
+  helper: {
+    marginTop: 6
+  },
+  horizontalContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  horizontalLabelWrap: {
+    flexShrink: 1,
+    paddingRight: 12
+  }
+});
+export { NumberInput };
+export default NumberInput;
+//# sourceMappingURL=NumberInput.js.map

package/lib/module/components/NumberInput/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { NumberInput, default } from "./NumberInput.js";
+//# sourceMappingURL=index.js.map