react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/cjs/password-input/PasswordInput.js

@@ -0,0 +1,358 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactNative() {
+  const data = require("react-native");
+  _reactNative = function () {
+    return data;
+  };
+  return data;
+}
+var _designSystem = require("../../design-system");
+var _hooks = require("../../hooks");
+var _number = require("../../utils/number");
+var _validate = require("../../utils/validate");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+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); }
+const HIDDEN_INPUT_PROPS = {
+  caretHidden: true,
+  underlineColorAndroid: 'transparent',
+  autoCorrect: false,
+  spellCheck: false,
+  importantForAutofill: 'no',
+  autoComplete: 'off'
+};
+const sanitizeNumber = value => value.replace(/[^0-9]/g, '');
+const createPasswordInputTokens = foundations => ({
+  colors: {
+    border: foundations.palette.default[100],
+    text: foundations.palette.default[900],
+    muted: foundations.palette.default[500],
+    error: foundations.palette.danger[500],
+    cursor: foundations.palette.default[800],
+    background: '#ffffff'
+  },
+  radii: {
+    wrapper: foundations.radii.sm
+  },
+  sizing: {
+    cellHeight: 50,
+    cellTextSize: foundations.fontSize.xl,
+    maskSize: 10,
+    cursorWidth: _reactNative().StyleSheet.hairlineWidth || 1,
+    cursorHeightRatio: 0.4,
+    cursorTopRatio: 0.3
+  },
+  typography: {
+    fontFamily: foundations.typography.fontFamily,
+    cellTextWeight: foundations.typography.weight.semiBold,
+    infoSize: foundations.fontSize.sm,
+    infoLineHeight: Math.round(foundations.fontSize.sm * foundations.typography.lineHeightMultiplier),
+    infoWeight: foundations.typography.weight.regular
+  },
+  opacity: {
+    disabled: 0.6
+  },
+  spacing: {
+    infoMarginTop: foundations.spacing.sm
+  }
+});
+const usePasswordInputTokens = (0, _designSystem.createComponentTokensHook)('passwordInput', createPasswordInputTokens);
+const PasswordInput = /*#__PURE__*/_react().default.forwardRef((props, ref) => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    length = 6,
+    mask = true,
+    gutter = 0,
+    type = 'text',
+    info,
+    errorInfo,
+    autoFocus = false,
+    disabled = false,
+    showCursor = true,
+    validator,
+    cellStyle,
+    cellFilledStyle,
+    cellTextStyle,
+    maskStyle,
+    cursorStyle,
+    highlightTextStyle,
+    tokensOverride,
+    style,
+    onSubmit,
+    onFocus,
+    onBlur,
+    ...rest
+  } = props;
+  const lengthSafe = Math.max(1, Math.floor((0, _number.parseNumberLike)(length, 6) ?? 6));
+  const tokens = usePasswordInputTokens(tokensOverride);
+  const {
+    colors,
+    radii,
+    sizing,
+    typography,
+    opacity,
+    spacing
+  } = tokens;
+  const inputRef = (0, _react().useRef)(null);
+  const [cursorVisible, setCursorVisible] = (0, _react().useState)(true);
+  const blinkTimer = (0, _react().useRef)(null);
+  const [focused, setFocused] = (0, _react().useState)(autoFocus);
+  const keyboardType = (0, _react().useMemo)(() => type === 'number' ? 'number-pad' : 'default', [type]);
+  const inputMode = (0, _react().useMemo)(() => type === 'number' ? 'numeric' : 'text', [type]);
+  const [code = '', setCode] = (0, _hooks.useControllableValue)(props, {
+    defaultValue: ''
+  });
+  const normalizeValue = (0, _react().useCallback)(nextValue => {
+    let next = nextValue === null || nextValue === undefined ? '' : (0, _validate.isString)(nextValue) ? nextValue : String(nextValue);
+    if (type === 'number') {
+      next = sanitizeNumber(next);
+    }
+    if (lengthSafe > 0 && next.length > lengthSafe) {
+      next = next.slice(0, lengthSafe);
+    }
+    return next;
+  }, [lengthSafe, type]);
+  const normalizedCode = (0, _react().useMemo)(() => normalizeValue(code), [code, normalizeValue]);
+  const updateValue = (0, _react().useCallback)(nextValue => {
+    const normalized = normalizeValue(nextValue);
+    if (normalized === normalizedCode) return;
+    if (validator && !validator(normalized)) return;
+    setCode(normalized);
+  }, [normalizeValue, normalizedCode, setCode, validator]);
+  const focusInput = (0, _react().useCallback)(() => {
+    if (disabled) return;
+    inputRef.current?.focus();
+  }, [disabled]);
+  const blurInput = (0, _react().useCallback)(() => {
+    inputRef.current?.blur();
+  }, []);
+  const clearInput = (0, _react().useCallback)(() => {
+    updateValue('');
+  }, [updateValue]);
+  (0, _react().useImperativeHandle)(ref, () => ({
+    focus: focusInput,
+    blur: blurInput,
+    clear: clearInput
+  }), [blurInput, clearInput, focusInput]);
+  (0, _react().useEffect)(() => {
+    if (!autoFocus || disabled) return;
+    const timer = setTimeout(() => {
+      inputRef.current?.focus();
+    }, 60);
+    return () => clearTimeout(timer);
+  }, [autoFocus, disabled]);
+  const handleChangeText = (0, _react().useCallback)(text => {
+    updateValue(text ?? '');
+  }, [updateValue]);
+  const handleFocus = (0, _react().useCallback)(() => {
+    setFocused(true);
+    onFocus?.();
+  }, [onFocus]);
+  const handleBlur = (0, _react().useCallback)(() => {
+    setFocused(false);
+    onBlur?.();
+  }, [onBlur]);
+  const prevSubmitRef = (0, _react().useRef)({
+    value: normalizedCode,
+    length: lengthSafe
+  });
+  (0, _react().useEffect)(() => {
+    const prev = prevSubmitRef.current;
+    prevSubmitRef.current = {
+      value: normalizedCode,
+      length: lengthSafe
+    };
+    if (!onSubmit) return;
+    if (prev.length !== lengthSafe) return;
+    if (lengthSafe <= 0 || normalizedCode.length !== lengthSafe) return;
+    if (prev.value === normalizedCode) return;
+    onSubmit(normalizedCode);
+    inputRef.current?.blur();
+  }, [lengthSafe, normalizedCode, onSubmit]);
+  (0, _react().useEffect)(() => {
+    const shouldBlink = showCursor && focused && !disabled;
+    if (blinkTimer.current) {
+      clearInterval(blinkTimer.current);
+      blinkTimer.current = null;
+    }
+    if (shouldBlink) {
+      setCursorVisible(true);
+      blinkTimer.current = setInterval(() => {
+        setCursorVisible(v => !v);
+      }, 500);
+    } else {
+      setCursorVisible(false);
+    }
+    return () => {
+      if (blinkTimer.current) {
+        clearInterval(blinkTimer.current);
+        blinkTimer.current = null;
+      }
+    };
+  }, [disabled, focused, showCursor]);
+  const cells = (0, _react().useMemo)(() => Array.from({
+    length: lengthSafe
+  }, (_, index) => {
+    const char = normalizedCode?.[index];
+    const isFilled = !!char;
+    const showBlink = showCursor && focused && !disabled && normalizedCode.length === index && index < lengthSafe;
+    return {
+      key: index,
+      char,
+      isFilled,
+      showBlink
+    };
+  }), [disabled, focused, lengthSafe, normalizedCode, showCursor]);
+  const gutterValue = (0, _react().useMemo)(() => Math.max(0, (0, _number.parseNumberLike)(gutter, 0) ?? 0), [gutter]);
+  const hasGutter = gutterValue > 0;
+  const tip = errorInfo ?? info;
+  const tipColor = errorInfo ? colors.error : colors.muted;
+  const backgroundColor = hasGutter ? 'transparent' : colors.background;
+  const cellTextBase = (0, _react().useMemo)(() => ({
+    color: colors.text,
+    fontSize: sizing.cellTextSize,
+    fontWeight: typography.cellTextWeight,
+    fontFamily: typography.fontFamily
+  }), [colors.text, sizing.cellTextSize, typography.cellTextWeight, typography.fontFamily]);
+  const wrapperStyle = (0, _react().useMemo)(() => [styles.wrapper, {
+    backgroundColor,
+    borderRadius: radii.wrapper,
+    opacity: disabled ? opacity.disabled : 1
+  }, !hasGutter && {
+    borderWidth: _reactNative().StyleSheet.hairlineWidth,
+    borderColor: colors.border
+  }], [backgroundColor, colors.border, disabled, hasGutter, opacity.disabled, radii.wrapper]);
+  const securityStyle = (0, _react().useMemo)(() => [styles.security, {
+    borderRadius: hasGutter ? 0 : radii.wrapper,
+    backgroundColor
+  }], [backgroundColor, hasGutter, radii.wrapper]);
+  return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: style
+  }, /*#__PURE__*/_react().default.createElement(_reactNative().Pressable, _extends({}, rest, {
+    style: wrapperStyle,
+    onPress: focusInput,
+    disabled: disabled,
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled
+    }
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: securityStyle
+  }, cells.map((item, index) => {
+    const filledTextStyle = [cellTextBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
+    const baseCell = [styles.cell, {
+      backgroundColor: colors.background,
+      height: sizing.cellHeight
+    }, cellStyle, item.isFilled && cellFilledStyle];
+    if (hasGutter) {
+      baseCell.push(styles.cellGutter, {
+        borderColor: colors.border
+      }, index > 0 && {
+        marginLeft: gutterValue
+      });
+    } else if (index < lengthSafe - 1) {
+      baseCell.push({
+        borderRightWidth: _reactNative().StyleSheet.hairlineWidth,
+        borderRightColor: colors.border
+      });
+    }
+    return /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      key: item.key,
+      style: baseCell
+    }, mask ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      style: [{
+        width: sizing.maskSize,
+        height: sizing.maskSize,
+        borderRadius: sizing.maskSize / 2,
+        backgroundColor: colors.text,
+        opacity: item.isFilled ? 1 : 0
+      }, maskStyle]
+    }) : /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+      style: filledTextStyle,
+      numberOfLines: 1
+    }, item.char ?? ''), item.showBlink ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+      testID: "password-input-cursor",
+      style: [styles.cursor, {
+        width: sizing.cursorWidth,
+        height: `${sizing.cursorHeightRatio * 100}%`,
+        borderRadius: sizing.cursorWidth / 2,
+        top: `${sizing.cursorTopRatio * 100}%`,
+        marginLeft: -sizing.cursorWidth / 2,
+        backgroundColor: colors.cursor,
+        opacity: cursorVisible ? 1 : 0
+      }, cursorStyle]
+    }) : null);
+  }), /*#__PURE__*/_react().default.createElement(_reactNative().TextInput, _extends({
+    ref: inputRef,
+    value: normalizedCode,
+    editable: !disabled,
+    keyboardType: keyboardType,
+    inputMode: inputMode,
+    maxLength: lengthSafe,
+    autoFocus: false,
+    secureTextEntry: mask
+  }, HIDDEN_INPUT_PROPS, {
+    style: styles.hiddenInput,
+    onChangeText: handleChangeText,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    accessible: false
+  })))), tip ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
+    style: [styles.infoWrapper, {
+      marginTop: spacing.infoMarginTop
+    }]
+  }, (0, _validate.isText)(tip) ? /*#__PURE__*/_react().default.createElement(_reactNative().Text, {
+    style: [styles.infoText, {
+      color: tipColor
+    }]
+  }, tip) : tip) : null);
+});
+var _default = exports.default = PasswordInput;
+const styles = _reactNative().StyleSheet.create({
+  wrapper: {
+    alignSelf: 'stretch',
+    paddingHorizontal: 0
+  },
+  security: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  cell: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  cellGutter: {
+    borderWidth: _reactNative().StyleSheet.hairlineWidth,
+    borderRadius: 0
+  },
+  cursor: {
+    position: 'absolute',
+    left: '50%'
+  },
+  hiddenInput: {
+    ..._reactNative().StyleSheet.absoluteFillObject,
+    opacity: 0
+  },
+  infoWrapper: {
+    alignItems: 'center'
+  },
+  infoText: {
+    textAlign: 'center'
+  }
+});

package/dist/cjs/password-input/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PasswordInput.default;
+  }
+});
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }