@webority-technologies/mobile-ui 0.0.1

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

@@ -0,0 +1,377 @@
+"use strict";
+
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useControllableState } from "../../hooks/index.js";
+import { useTheme } from "../../theme/index.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
+import { FieldBase, resolveFieldSize, resolveFieldTextStyle } from "../FieldBase/FieldBase.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LONG_PRESS_DELAY = 500;
+const DEFAULT_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, '');
+  cleaned = cleaned.replace(/(?!^)-/g, '');
+  if (!allowDecimal) {
+    cleaned = cleaned.replace(/\./g, '');
+  } else {
+    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,
+    defaultValue,
+    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,
+    haptic,
+    accessibilityLabel,
+    style,
+    containerStyle,
+    inputStyle,
+    buttonStyle,
+    unitStyle,
+    labelStyle,
+    textInputProps,
+    testID
+  } = props;
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? props.min ?? 0,
+    onChange
+  });
+  const theme = useTheme();
+  const sizeTokens = resolveFieldSize(theme, size);
+  const fieldText = resolveFieldTextStyle(theme, {
+    disabled
+  });
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const longPressDelay = theme.components.numberInput?.longPressDelayMs ?? DEFAULT_LONG_PRESS_DELAY;
+  const longPressInterval = theme.components.numberInput?.longPressIntervalMs ?? DEFAULT_LONG_PRESS_INTERVAL;
+  const inputRef = useRef(null);
+  const [draft, setDraft] = useState(formatValue(current, allowDecimal, precision));
+  const [editing, setEditing] = useState(false);
+  const [focused, setFocused] = 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]);
+  useEffect(() => {
+    if (!editing) {
+      setDraft(formatValue(current, allowDecimal, precision));
+    }
+  }, [current, allowDecimal, precision, editing]);
+  const atMin = current <= min;
+  const atMax = current >= max;
+  const interactive = !disabled;
+  const setExternal = useCallback(next => {
+    const rounded = roundToPrecision(next, allowDecimal ? precision : 0);
+    const clamped = clamp(rounded, min, max);
+    if (clamped !== current) {
+      setCurrent(clamped);
+    }
+  }, [allowDecimal, max, min, setCurrent, precision, current]);
+  const decrement = useCallback(() => {
+    if (!interactive || atMin) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setExternal(current - step);
+  }, [atMin, interactive, haptic, setExternal, step, current]);
+  const increment = useCallback(() => {
+    if (!interactive || atMax) {
+      return;
+    }
+    const h = resolveHaptic(haptic, 'selection');
+    if (h) {
+      triggerHaptic(h);
+    }
+    setExternal(current + step);
+  }, [atMax, interactive, haptic, setExternal, step, current]);
+  React.useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    clear: () => {
+      setDraft('');
+      if (Number.isFinite(min) && min > 0) {
+        setCurrent(min);
+      } else {
+        setCurrent(0 < min ? min : 0 > max ? max : 0);
+      }
+    }
+  }), [max, min, setCurrent]);
+  const startRepeating = useCallback(direction => {
+    if (!interactive) {
+      return;
+    }
+    clearRepeat();
+    repeatTimeoutRef.current = setTimeout(() => {
+      repeatIntervalRef.current = setInterval(() => {
+        if (direction === 'inc') {
+          increment();
+        } else {
+          decrement();
+        }
+      }, longPressInterval);
+    }, longPressDelay);
+  }, [clearRepeat, decrement, increment, interactive, longPressDelay, longPressInterval]);
+  const handleChangeText = useCallback(text => {
+    const cleaned = sanitizeTyped(text, allowDecimal);
+    setDraft(cleaned);
+    const parsed = Number(cleaned);
+    if (cleaned !== '' && cleaned !== '-' && cleaned !== '.' && Number.isFinite(parsed)) {
+      if (parsed >= min && parsed <= max) {
+        if (parsed !== current) {
+          setCurrent(roundToPrecision(parsed, allowDecimal ? precision : 0));
+        }
+      }
+    }
+  }, [allowDecimal, max, min, setCurrent, precision, current]);
+  const handleBlur = useCallback(() => {
+    setEditing(false);
+    setFocused(false);
+    const parsed = Number(draft);
+    if (draft === '' || !Number.isFinite(parsed)) {
+      setDraft(formatValue(current, allowDecimal, precision));
+      return;
+    }
+    const rounded = roundToPrecision(parsed, allowDecimal ? precision : 0);
+    const clamped = clamp(rounded, min, max);
+    if (clamped !== current) {
+      setCurrent(clamped);
+    }
+    setDraft(formatValue(clamped, allowDecimal, precision));
+  }, [allowDecimal, draft, max, min, setCurrent, precision, current]);
+  const handleFocus = useCallback(() => {
+    setEditing(true);
+    setFocused(true);
+  }, []);
+  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 stepperSize = sizeTokens.iconSize + 8;
+  const renderStepper = (type, onPress, disabledLocal, a11yLabel, fg, glyph) => /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    onLongPress: () => startRepeating(type),
+    onPressOut: clearRepeat,
+    delayLongPress: longPressDelay,
+    disabled: disabledLocal,
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    accessibilityState: {
+      disabled: disabledLocal
+    },
+    style: ({
+      pressed
+    }) => [{
+      width: stepperSize,
+      height: stepperSize,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: stepperSize / 2
+    }, pressed && !disabledLocal ? {
+      backgroundColor: theme.colors.surface.pressed
+    } : null, buttonStyle],
+    testID: `${testID ?? 'numberinput'}-${type === 'inc' ? 'plus' : 'minus'}`,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: {
+        fontSize: sizeTokens.iconSize,
+        color: fg,
+        fontWeight: theme.typography.fontWeight.semibold,
+        lineHeight: sizeTokens.iconSize + 2
+      },
+      children: glyph
+    })
+  });
+  const accessibleInputLabel = accessibilityLabel ?? label ?? 'Number input';
+  const inputBlock = /*#__PURE__*/_jsx(FieldBase, {
+    size: size,
+    disabled: disabled,
+    error: Boolean(error),
+    filled: true,
+    focused: focused,
+    leading: renderStepper('dec', decrement, atMin || disabled, 'Decrease', minusFg, '−'),
+    trailing: renderStepper('inc', increment, atMax || disabled, 'Increase', plusFg, '+'),
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.inputRow,
+      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(current) ? current : 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: sizeTokens.fontSize,
+          color: fieldText.color,
+          ...fieldText.weightStyle
+        }, inputStyle],
+        ...textInputProps
+      }), unit ? /*#__PURE__*/_jsx(Text, {
+        style: [styles.unit, {
+          fontSize: sizeTokens.fontSize,
+          color: fieldText.placeholderColor
+        }, unitStyle],
+        children: unit
+      }) : null]
+    })
+  });
+  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, containerStyle],
+      testID: testID,
+      accessibilityState: {
+        disabled
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.horizontalLabelWrap,
+        children: labelEl
+      }), /*#__PURE__*/_jsxs(View, {
+        children: [inputBlock, helperEl]
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [style, containerStyle],
+    testID: testID,
+    accessibilityState: {
+      disabled
+    },
+    children: [labelEl, inputBlock, helperEl]
+  });
+});
+NumberInput.displayName = 'NumberInput';
+const buildStyles = _theme => StyleSheet.create({
+  inputRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  input: {
+    flex: 1,
+    textAlign: 'center',
+    padding: 0,
+    margin: 0,
+    includeFontPadding: false
+  },
+  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 { default, NumberInput } from "./NumberInput.js";
+//# sourceMappingURL=index.js.map