@webority/mobile-ui 0.0.39 → 0.1.0

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

@@ -1,382 +1 @@
-"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 { smoothCorners } from "../../utils/corners.js";
-import { FieldBase, FieldLabel, FieldMessage, 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);
-  // A tap anywhere on the box (padding, icon, gap) focuses the input, not
-  // only a tap on its text.
-  const focusInput = useCallback(() => {
-    if (!disabled) {
-      inputRef.current?.focus();
-    }
-  }, [disabled]);
-  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,
-      ...smoothCorners
-    }, 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,
-    onPress: focusInput,
-    pressFeedback: false,
-    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(FieldLabel, {
-    size: size,
-    style: labelStyle,
-    children: label
-  }) : null;
-  const helperEl = /*#__PURE__*/_jsx(FieldMessage, {
-    size: size,
-    error: Boolean(error),
-    text: error ?? helperText
-  });
-  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
+import e,{forwardRef as t,useCallback as i,useEffect as n,useMemo as r,useRef as l,useState as s}from"react";import{Pressable as o,StyleSheet as a,Text as c,TextInput as u,View as d}from"react-native";import{useControllableState as m}from"../../hooks/index.js";import{useTheme as b}from"../../theme/index.js";import{resolveHaptic as p,triggerHaptic as f}from"../../utils/index.js";import{smoothCorners as h}from"../../utils/corners.js";import{FieldBase as y,FieldLabel as g,FieldMessage as x,fieldTextAsString as I,hasFieldText as S,resolveFieldSize as N,resolveFieldTextStyle as z}from"../FieldBase/FieldBase.js";import{jsx as F,jsxs as v}from"react/jsx-runtime";const roundToPrecision=(e,t)=>{if(!Number.isFinite(e))return 0;if(t<=0)return Math.round(e);const i=Math.pow(10,t);return Math.round(e*i)/i},clamp=(e,t,i)=>e<t?t:e>i?i:e,formatValue=(e,t,i)=>Number.isFinite(e)?t&&i>0?e.toFixed(i):String(Math.trunc(e)):"",j=t((t,a)=>{const{value:j,defaultValue:T,onChange:w,min:C=Number.NEGATIVE_INFINITY,max:D=Number.POSITIVE_INFINITY,step:P=1,allowDecimal:L=!1,precision:M=0,label:R,help:k,helperText:A,error:E,disabled:V=!1,size:B="md",variant:O="inline",unit:W,haptic:H,accessibilityLabel:Y,style:$,containerStyle:_,inputStyle:G,buttonStyle:q,unitStyle:J,labelStyle:K,textInputProps:Q,testID:U}=t,[X,Z]=m({value:j,defaultValue:T??t.min??0,onChange:w}),ee=b(),te=N(ee,B),ie=z(ee,{disabled:V}),ne=r(()=>buildStyles(ee),[ee]),re=ee.components.numberInput?.longPressDelayMs??500,le=ee.components.numberInput?.longPressIntervalMs??80,se=l(null),[oe,ae]=s(formatValue(X,L,M)),[ce,ue]=s(!1),[de,me]=s(!1),be=i(()=>{V||se.current?.focus()},[V]),pe=l(null),fe=l(null),he=i(()=>{null!==pe.current&&(clearTimeout(pe.current),pe.current=null),null!==fe.current&&(clearInterval(fe.current),fe.current=null)},[]);n(()=>he,[he]),n(()=>{ce||ae(formatValue(X,L,M))},[X,L,M,ce]);const ye=X<=C,ge=X>=D,xe=!V,Ie=i(e=>{const t=roundToPrecision(e,L?M:0),i=clamp(t,C,D);i!==X&&Z(i)},[L,D,C,Z,M,X]),Se=i(()=>{if(!xe||ye)return;const e=p(H,"selection");e&&f(e),Ie(X-P)},[ye,xe,H,Ie,P,X]),Ne=i(()=>{if(!xe||ge)return;const e=p(H,"selection");e&&f(e),Ie(X+P)},[ge,xe,H,Ie,P,X]);e.useImperativeHandle(a,()=>({focus:()=>se.current?.focus(),blur:()=>se.current?.blur(),clear:()=>{ae(""),Number.isFinite(C)&&C>0?Z(C):Z(0<C?C:0>D?D:0)}}),[D,C,Z]);const ze=i(e=>{xe&&(he(),pe.current=setTimeout(()=>{fe.current=setInterval(()=>{"inc"===e?Ne():Se()},le)},re))},[he,Se,Ne,xe,re,le]),Fe=i(e=>{const t=((e,t)=>{if(!e)return"";let i=e.replace(/[^0-9.-]/g,"");if(i=i.replace(/(?!^)-/g,""),t){const e=i.indexOf(".");-1!==e&&(i=i.slice(0,e+1)+i.slice(e+1).replace(/\./g,""))}else i=i.replace(/\./g,"");return i})(e,L);ae(t);const i=Number(t);""!==t&&"-"!==t&&"."!==t&&Number.isFinite(i)&&i>=C&&i<=D&&i!==X&&Z(roundToPrecision(i,L?M:0))},[L,D,C,Z,M,X]),ve=i(()=>{ue(!1),me(!1);const e=Number(oe);if(""===oe||!Number.isFinite(e))return void ae(formatValue(X,L,M));const t=roundToPrecision(e,L?M:0),i=clamp(t,C,D);i!==X&&Z(i),ae(formatValue(i,L,M))},[L,oe,D,C,Z,M,X]),je=i(()=>{ue(!0),me(!0)},[]),Te=ye||V?ee.colors.text.disabled:ee.colors.text.primary,we=ge||V?ee.colors.text.disabled:ee.colors.text.primary,Ce=te.iconSize+8,renderStepper=(e,t,i,n,r,l)=>F(o,{onPress:t,onLongPress:()=>ze(e),onPressOut:he,delayLongPress:re,disabled:i,accessibilityRole:"button",accessibilityLabel:n,accessibilityState:{disabled:i},style:({pressed:e})=>[{width:Ce,height:Ce,alignItems:"center",justifyContent:"center",borderRadius:Ce/2,...h},e&&!i?{backgroundColor:ee.colors.surface.pressed}:null,q],testID:`${U??"numberinput"}-${"inc"===e?"plus":"minus"}`,children:F(c,{style:{fontSize:te.iconSize,color:r,fontWeight:ee.typography.fontWeight.semibold,lineHeight:te.iconSize+2},children:l})}),De=Y??I(R)??"Number input",Pe=F(y,{size:B,disabled:V,error:S(E),filled:!0,focused:de,onPress:be,pressFeedback:!1,leading:renderStepper("dec",Se,ye||V,"Decrease",Te,"−"),trailing:renderStepper("inc",Ne,ge||V,"Increase",we,"+"),children:v(d,{style:ne.inputRow,children:[F(u,{ref:se,value:oe,onChangeText:Fe,onFocus:je,onBlur:ve,editable:!V,keyboardType:L?"decimal-pad":"number-pad",selectTextOnFocus:!0,accessibilityRole:"adjustable",accessibilityLabel:De,accessibilityValue:{now:Number.isFinite(X)?X:0},accessibilityState:{disabled:V},accessibilityActions:[{name:"increment",label:"Increase"},{name:"decrement",label:"Decrease"}],onAccessibilityAction:e=>{"increment"===e.nativeEvent.actionName&&Ne(),"decrement"===e.nativeEvent.actionName&&Se()},style:[ne.input,{fontSize:te.fontSize,color:ie.color,...ie.weightStyle},G],...Q}),W?F(c,{style:[ne.unit,{fontSize:te.fontSize,color:ie.placeholderColor},J],children:W}):null]})}),Le=S(R)?F(g,{size:B,help:k,style:K,children:R}):null,Me=F(x,{size:B,error:S(E),text:S(E)?E:A});return v(d,"horizontal"===O?{style:[ne.horizontalContainer,$,_],testID:U,accessibilityState:{disabled:V},children:[F(d,{style:ne.horizontalLabelWrap,children:Le}),v(d,{children:[Pe,Me]})]}:{style:[$,_],testID:U,accessibilityState:{disabled:V},children:[Le,Pe,Me]})});j.displayName="NumberInput";const buildStyles=e=>a.create({inputRow:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center"},input:{flex:1,textAlign:"center",padding:0,margin:0,includeFontPadding:!1},unit:{marginLeft:4},label:{marginBottom:6},helper:{marginTop:6},horizontalContainer:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},horizontalLabelWrap:{flexShrink:1,paddingRight:12}});export{j as NumberInput};export default j;

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

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