react-native-system-ui 0.0.1 → 0.0.2

package/dist/es/stepper/Stepper.js

@@ -0,0 +1,442 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useControllableValue } from '../../hooks';
+import { parseNumber, addNumber as add, clampValue, formatNumber as formatValue, numberToString as valueToString, parseDecimalLength, isFiniteNumber, isPromiseLike } from '../../utils';
+import { useStepperTokens } from './tokens';
+const LONG_PRESS_DELAY = 600;
+const LONG_PRESS_INTERVAL = 100;
+export const Stepper = /*#__PURE__*/React.forwardRef((p, ref) => {
+  const tokens = useStepperTokens(p.tokensOverride);
+  const {
+    min,
+    max,
+    step = 1,
+    autoFixed = true,
+    beforeChange,
+    integer = false,
+    decimalLength: decimalLengthProp,
+    disabled = false,
+    disablePlus = false,
+    disableMinus = false,
+    disableInput = false,
+    allowEmpty = false,
+    showPlus = tokens.defaults.showPlus,
+    showMinus = tokens.defaults.showMinus,
+    showInput = tokens.defaults.showInput,
+    longPress = tokens.defaults.longPress,
+    theme = tokens.defaults.theme,
+    inputWidth,
+    buttonSize,
+    name,
+    placeholder,
+    onClick,
+    onPlus,
+    onMinus,
+    onOverlimit,
+    onFocus,
+    onBlur,
+    inputProps,
+    inputStyle,
+    buttonStyle,
+    style,
+    ...rest
+  } = p;
+  const [changing, setChanging] = useState(false);
+  const changingRef = useRef(false);
+  const decimalLength = parseDecimalLength(decimalLengthProp);
+  const resolvedStepRaw = Number(step ?? 1);
+  const resolvedStep = isFiniteNumber(resolvedStepRaw) && resolvedStepRaw > 0 ? resolvedStepRaw : 1;
+  const resolvedButtonSize = Math.max(0, parseNumber(buttonSize, tokens.defaults.buttonSize));
+  const resolvedInputWidth = Math.max(0, parseNumber(inputWidth, tokens.defaults.inputWidth));
+  const resolvedDefaultValue = (() => {
+    const raw = p.defaultValue;
+    if (raw === null) return null;
+    const base = isFiniteNumber(raw) ? raw : 0;
+    const formatted = formatValue(base, integer, decimalLength);
+    return autoFixed ? clampValue(formatted, min, max) : formatted;
+  })();
+  const [value, triggerChange] = useControllableValue({
+    ...p,
+    defaultValue: resolvedDefaultValue
+  }, {
+    defaultValue: resolvedDefaultValue
+  });
+  const valueRef = useRef(value ?? null);
+  useEffect(() => {
+    valueRef.current = value ?? null;
+  }, [value]);
+  const inputRef = useRef(null);
+  useImperativeHandle(ref, () => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur()
+  }));
+  const [hasFocus, setHasFocus] = useState(false);
+  const [inputValue, setInputValue] = useState(() => valueToString(value, decimalLength));
+  const inputValueRef = useRef(inputValue);
+  const setInputText = useCallback(text => {
+    inputValueRef.current = text;
+    setInputValue(text);
+  }, []);
+  useEffect(() => {
+    if (!hasFocus) {
+      const nextText = valueToString(value, decimalLength);
+      setInputText(nextText);
+    }
+  }, [decimalLength, hasFocus, setInputText, value]);
+  const getCurrentNumber = useCallback(() => {
+    const current = valueRef.current;
+    return isFiniteNumber(current) ? current : 0;
+  }, []);
+  const isActionDisabled = useCallback(type => {
+    if (disabled) return true;
+    if (type === 'plus' && disablePlus) return true;
+    if (type === 'minus' && disableMinus) return true;
+    const current = getCurrentNumber();
+    if (type === 'plus' && isFiniteNumber(max) && current >= max) {
+      return true;
+    }
+    if (type === 'minus' && isFiniteNumber(min) && current <= min) {
+      return true;
+    }
+    return false;
+  }, [disableMinus, disablePlus, disabled, getCurrentNumber, max, min]);
+  const setValue = useCallback(next => {
+    const prev = valueRef.current ?? null;
+    if (Object.is(prev, next)) return false;
+    valueRef.current = next;
+    triggerChange(next, {
+      name
+    });
+    return true;
+  }, [name, triggerChange]);
+  const applyNextValue = useCallback(nextRaw => {
+    const formatted = formatValue(nextRaw, integer, decimalLength);
+    return autoFixed ? clampValue(formatted, min, max) : formatted;
+  }, [autoFixed, decimalLength, integer, max, min]);
+  const performValueChange = useCallback((next, committed) => {
+    if (changingRef.current) {
+      return 'noop';
+    }
+    const commit = () => {
+      const didChange = setValue(next);
+      if (!didChange) return 'noop';
+      setInputText(valueToString(next, decimalLength));
+      committed?.(next);
+      return 'changed';
+    };
+    if (!beforeChange) {
+      return commit();
+    }
+    try {
+      const result = beforeChange(next);
+      if (isPromiseLike(result)) {
+        changingRef.current = true;
+        setChanging(true);
+        result.then(allowed => {
+          if (allowed === false) {
+            setInputText(valueToString(valueRef.current, decimalLength));
+            return;
+          }
+          commit();
+        }).catch(error => {
+          if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+          commit();
+        }).finally(() => {
+          changingRef.current = false;
+          setChanging(false);
+        });
+        return 'pending';
+      }
+      if (result === false) {
+        setInputText(valueToString(valueRef.current, decimalLength));
+        return 'noop';
+      }
+      return commit();
+    } catch (error) {
+      if (typeof __DEV__ !== 'undefined' && __DEV__) console.error(error);
+      return commit();
+    }
+  }, [beforeChange, decimalLength, setInputText, setValue]);
+  const stepOnce = useCallback((type, event, options) => {
+    if (changingRef.current) {
+      return 'noop';
+    }
+    const emitOverlimit = options?.emitOverlimit ?? true;
+    const emitButtonCallbacks = options?.emitButtonCallbacks ?? Boolean(event);
+    if (isActionDisabled(type)) {
+      if (emitOverlimit) onOverlimit?.(type);
+      return 'overlimit';
+    }
+    const current = getCurrentNumber();
+    const diff = type === 'plus' ? resolvedStep : -resolvedStep;
+    const next = applyNextValue(add(current, diff));
+    return performValueChange(next, committedValue => {
+      if (!emitButtonCallbacks || !event) return;
+      if (type === 'plus') {
+        onPlus?.(event, committedValue);
+      } else {
+        onMinus?.(event, committedValue);
+      }
+    });
+  }, [applyNextValue, getCurrentNumber, isActionDisabled, onMinus, onOverlimit, onPlus, performValueChange, resolvedStep]);
+  const longPressRef = useRef({
+    hadLongPress: false
+  });
+  const clearLongPress = useCallback(() => {
+    if (longPressRef.current.delay) {
+      clearTimeout(longPressRef.current.delay);
+      longPressRef.current.delay = undefined;
+    }
+    if (longPressRef.current.interval) {
+      clearInterval(longPressRef.current.interval);
+      longPressRef.current.interval = undefined;
+    }
+  }, []);
+  useEffect(() => clearLongPress, [clearLongPress]);
+  useEffect(() => {
+    if (disabled || changing || !longPress) {
+      clearLongPress();
+    }
+  }, [changing, clearLongPress, disabled, longPress]);
+  const startLongPress = useCallback(type => {
+    if (!longPress) return;
+    if (changingRef.current) return;
+    if (isActionDisabled(type)) return;
+    clearLongPress();
+    longPressRef.current.hadLongPress = false;
+    longPressRef.current.delay = setTimeout(() => {
+      longPressRef.current.hadLongPress = true;
+      const first = stepOnce(type, undefined, {
+        emitOverlimit: true,
+        emitButtonCallbacks: false
+      });
+      if (first !== 'changed') {
+        clearLongPress();
+        return;
+      }
+      longPressRef.current.interval = setInterval(() => {
+        const result = stepOnce(type, undefined, {
+          emitOverlimit: true,
+          emitButtonCallbacks: false
+        });
+        if (result !== 'changed') {
+          clearLongPress();
+        }
+      }, LONG_PRESS_INTERVAL);
+    }, LONG_PRESS_DELAY);
+  }, [clearLongPress, isActionDisabled, longPress, stepOnce]);
+  const handlePressOut = useCallback(() => {
+    clearLongPress();
+  }, [clearLongPress]);
+  const handleButtonPress = useCallback((type, event) => {
+    if (longPressRef.current.hadLongPress) {
+      longPressRef.current.hadLongPress = false;
+      return;
+    }
+    longPressRef.current.hadLongPress = false;
+    stepOnce(type, event, {
+      emitOverlimit: true,
+      emitButtonCallbacks: true
+    });
+  }, [stepOnce]);
+  const currentForCompare = isFiniteNumber(value) ? value : 0;
+  const minNumber = isFiniteNumber(min) ? min : undefined;
+  const maxNumber = isFiniteNumber(max) ? max : undefined;
+  const disabledForAll = disabled || changing;
+  const minusDisabled = disabledForAll || disableMinus || minNumber !== undefined && currentForCompare <= minNumber;
+  const plusDisabled = disabledForAll || disablePlus || maxNumber !== undefined && currentForCompare >= maxNumber;
+  const radius = tokens.radii.default;
+  const buttonBaseStyle = useMemo(() => ({
+    width: resolvedButtonSize,
+    height: resolvedButtonSize
+  }), [resolvedButtonSize]);
+  const inputBoxStyle = useMemo(() => ({
+    width: resolvedInputWidth,
+    height: resolvedButtonSize,
+    marginHorizontal: tokens.spacing.gap
+  }), [resolvedButtonSize, resolvedInputWidth, tokens.spacing.gap]);
+  const getButtonStyle = useCallback((type, state) => {
+    const isPlus = type === 'plus';
+    const disabledState = isPlus ? plusDisabled : minusDisabled;
+    if (theme === 'round') {
+      const base = [styles.button, buttonBaseStyle, {
+        borderRadius: resolvedButtonSize / 2,
+        opacity: disabledState ? tokens.opacity.roundDisabled : 1
+      }];
+      if (isPlus) {
+        return [...base, {
+          backgroundColor: tokens.colors.roundTheme,
+          ...(state.pressed && !disabledState && {
+            opacity: tokens.opacity.pressed
+          })
+        }, buttonStyle];
+      }
+      return [...base, {
+        backgroundColor: tokens.colors.roundThemeBackground,
+        borderWidth: StyleSheet.hairlineWidth,
+        borderColor: tokens.colors.roundTheme,
+        ...(state.pressed && !disabledState && {
+          opacity: tokens.opacity.pressed
+        })
+      }, buttonStyle];
+    }
+    const cornerStyle = type === 'minus' ? {
+      borderTopLeftRadius: radius,
+      borderBottomLeftRadius: radius
+    } : {
+      borderTopRightRadius: radius,
+      borderBottomRightRadius: radius
+    };
+    const backgroundColor = disabledState ? tokens.colors.buttonDisabledBackground : state.pressed ? tokens.colors.active : tokens.colors.background;
+    return [styles.button, buttonBaseStyle, cornerStyle, {
+      backgroundColor
+    }, buttonStyle];
+  }, [buttonBaseStyle, buttonStyle, minusDisabled, plusDisabled, radius, resolvedButtonSize, theme, tokens.colors.active, tokens.colors.background, tokens.colors.buttonDisabledBackground, tokens.colors.roundTheme, tokens.colors.roundThemeBackground, tokens.opacity.pressed, tokens.opacity.roundDisabled]);
+  const getButtonTextStyle = useCallback(type => {
+    const isPlus = type === 'plus';
+    const disabledState = isPlus ? plusDisabled : minusDisabled;
+    if (theme === 'round') {
+      const color = isPlus ? tokens.colors.roundThemeText : tokens.colors.roundTheme;
+      return [styles.buttonText, {
+        color,
+        fontSize: tokens.typography.fontSize,
+        fontWeight: tokens.typography.fontWeight
+      }];
+    }
+    return [styles.buttonText, {
+      color: disabledState ? tokens.colors.buttonDisabledIcon : tokens.colors.buttonIcon,
+      fontSize: tokens.typography.fontSize,
+      fontWeight: tokens.typography.fontWeight
+    }];
+  }, [minusDisabled, plusDisabled, theme, tokens.colors.buttonDisabledIcon, tokens.colors.buttonIcon, tokens.colors.roundTheme, tokens.colors.roundThemeText, tokens.typography.fontSize, tokens.typography.fontWeight]);
+  const handleChangeText = useCallback(text => {
+    if (disableInput || disabled || changingRef.current) return;
+    setInputText(text);
+    inputProps?.onChangeText?.(text);
+    const trimmed = text.trim();
+    if (trimmed === '') {
+      performValueChange(allowEmpty ? null : resolvedDefaultValue);
+      return;
+    }
+    const numeric = Number.parseFloat(trimmed);
+    if (!Number.isFinite(numeric)) return;
+    performValueChange(applyNextValue(numeric));
+  }, [allowEmpty, applyNextValue, changingRef, disableInput, disabled, inputProps, performValueChange, resolvedDefaultValue, setInputText]);
+  const handleFocus = useCallback(event => {
+    if (disableInput) {
+      inputRef.current?.blur();
+      return;
+    }
+    setHasFocus(true);
+    onFocus?.(event);
+    inputProps?.onFocus?.(event);
+  }, [disableInput, inputProps, onFocus]);
+  const handleBlur = useCallback(event => {
+    setHasFocus(false);
+    if (!changingRef.current) {
+      const trimmed = inputValueRef.current.trim();
+      if (trimmed === '') {
+        performValueChange(allowEmpty ? null : resolvedDefaultValue);
+      } else {
+        const numeric = Number.parseFloat(trimmed);
+        if (Number.isFinite(numeric)) {
+          performValueChange(applyNextValue(numeric));
+        }
+      }
+    }
+    onBlur?.(event);
+    inputProps?.onBlur?.(event);
+  }, [allowEmpty, applyNextValue, inputProps, onBlur, performValueChange, resolvedDefaultValue]);
+  const handleInputPressIn = useCallback(event => {
+    onClick?.(event);
+    inputProps?.onPressIn?.(event);
+  }, [inputProps, onClick]);
+  const handleMinusPress = useCallback(event => handleButtonPress('minus', event), [handleButtonPress]);
+  const handlePlusPress = useCallback(event => handleButtonPress('plus', event), [handleButtonPress]);
+  const handleMinusPressIn = useCallback(() => startLongPress('minus'), [startLongPress]);
+  const handlePlusPressIn = useCallback(() => startLongPress('plus'), [startLongPress]);
+  const getMinusButtonStyle = useCallback(state => getButtonStyle('minus', state), [getButtonStyle]);
+  const getPlusButtonStyle = useCallback(state => getButtonStyle('plus', state), [getButtonStyle]);
+  const renderMinusButton = useCallback(() => {
+    if (!showMinus) return null;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: "minus",
+      testID: "stepper-minus",
+      accessibilityRole: "button",
+      accessibilityLabel: "minus",
+      accessibilityState: {
+        disabled: minusDisabled
+      },
+      onPress: handleMinusPress,
+      onPressIn: handleMinusPressIn,
+      onPressOut: handlePressOut,
+      style: getMinusButtonStyle
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: getButtonTextStyle('minus')
+    }, "-"));
+  }, [getButtonTextStyle, getMinusButtonStyle, handleMinusPress, handleMinusPressIn, handlePressOut, minusDisabled, showMinus]);
+  const renderPlusButton = useCallback(() => {
+    if (!showPlus) return null;
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: "plus",
+      testID: "stepper-plus",
+      accessibilityRole: "button",
+      accessibilityLabel: "add",
+      accessibilityState: {
+        disabled: plusDisabled
+      },
+      onPress: handlePlusPress,
+      onPressIn: handlePlusPressIn,
+      onPressOut: handlePressOut,
+      style: getPlusButtonStyle
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: getButtonTextStyle('plus')
+    }, "+"));
+  }, [getButtonTextStyle, getPlusButtonStyle, handlePlusPress, handlePlusPressIn, handlePressOut, plusDisabled, showPlus]);
+  const inputNode = useMemo(() => {
+    if (!showInput) return null;
+    const editable = !disabledForAll && !disableInput;
+    const inputDisabled = disabledForAll || disableInput;
+    const inputBackground = theme === 'round' ? 'transparent' : inputDisabled ? tokens.colors.inputDisabledBackground : tokens.colors.background;
+    const inputTextColor = inputDisabled ? tokens.colors.inputDisabledText : tokens.colors.inputText;
+    const keyboardType = integer ? 'number-pad' : 'decimal-pad';
+    return /*#__PURE__*/React.createElement(TextInput, _extends({
+      ref: inputRef
+    }, inputProps, {
+      style: [styles.input, inputBoxStyle, {
+        backgroundColor: inputBackground,
+        color: inputTextColor
+      }, inputStyle],
+      value: inputValue,
+      placeholder: placeholder,
+      editable: editable,
+      keyboardType: keyboardType,
+      onChangeText: handleChangeText,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onPressIn: handleInputPressIn
+    }));
+  }, [disableInput, disabledForAll, handleBlur, handleChangeText, handleFocus, handleInputPressIn, inputBoxStyle, inputProps, inputStyle, inputValue, integer, placeholder, showInput, theme, tokens.colors.background, tokens.colors.inputDisabledBackground, tokens.colors.inputDisabledText, tokens.colors.inputText]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
+    style: [styles.container, style]
+  }), renderMinusButton(), inputNode, renderPlusButton());
+});
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  buttonText: {},
+  input: {
+    textAlign: 'center',
+    paddingHorizontal: 0,
+    paddingVertical: 0
+  }
+});
+Stepper.displayName = 'Stepper';
+export default Stepper;