react-native-system-ui 1.0.2 → 1.0.3

package/dist/es/components/password-input/PasswordInput.js

@@ -1,327 +1 @@
-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, useRef, useState } from 'react';
-import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useControllableValue } from '../../hooks';
-import { parseNumberLike } from '../../utils/number';
-import { isString, isText } from '../../utils/validate';
-import { usePasswordInputTokens } from './tokens';
-import { createHairlineView } from '../../utils/hairline';
-const HIP = {
-  caretHidden: true,
-  autoCorrect: false,
-  spellCheck: false,
-  importantForAutofill: 'no',
-  autoComplete: 'off'
-};
-const stripNonNumeric = v => v.replace(/[^0-9]/g, '');
-const PasswordInputImpl = (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 lenVal = Math.max(1, Math.floor(parseNumberLike(length, 6) ?? 6));
-  const tokens = usePasswordInputTokens(tokensOverride);
-  const {
-    colors,
-    radii,
-    sizing,
-    typography,
-    opacity,
-    spacing
-  } = tokens;
-  const inputRef = useRef(null);
-  const [cursorVisible, setCursorVisible] = useState(true);
-  const blinkTimer = useRef(null);
-  const [focused, setFocused] = useState(autoFocus);
-  const keyboardType = type === 'number' ? 'number-pad' : 'default';
-  const inputMode = type === 'number' ? 'numeric' : 'text';
-  const [code = '', setCode] = useControllableValue(props, {
-    defaultValue: ''
-  });
-  const normalizeValue = useCallback(v => {
-    let n = v === null || v === undefined ? '' : isString(v) ? v : String(v);
-    if (type === 'number') n = stripNonNumeric(n);
-    if (lenVal > 0 && n.length > lenVal) n = n.slice(0, lenVal);
-    return n;
-  }, [lenVal, type]);
-  const normCode = normalizeValue(code);
-  const validatorRef = useRef(validator);
-  const onFocusRef = useRef(onFocus);
-  const onBlurRef = useRef(onBlur);
-  const onSubmitRef = useRef(onSubmit);
-  validatorRef.current = validator;
-  onFocusRef.current = onFocus;
-  onBlurRef.current = onBlur;
-  onSubmitRef.current = onSubmit;
-  const updateValue = useCallback(v => {
-    const n = normalizeValue(v);
-    if (n === normCode) return;
-    if (validatorRef.current && !validatorRef.current(n)) return;
-    setCode(n);
-  }, [normalizeValue, normCode, setCode]);
-  const focusInput = useCallback(() => {
-    if (disabled) return;
-    inputRef.current?.focus();
-  }, [disabled]);
-  const blurInput = useCallback(() => {
-    inputRef.current?.blur();
-  }, []);
-  const clearInput = useCallback(() => {
-    updateValue('');
-  }, [updateValue]);
-  useImperativeHandle(ref, () => ({
-    focus: focusInput,
-    blur: blurInput,
-    clear: clearInput
-  }), [blurInput, clearInput, focusInput]);
-  useEffect(() => {
-    if (!autoFocus || disabled) return;
-    const t = setTimeout(() => {
-      inputRef.current?.focus();
-    }, 60);
-    return () => clearTimeout(t);
-  }, [autoFocus, disabled]);
-  const handleChangeText = useCallback(txt => {
-    updateValue(txt ?? '');
-  }, [updateValue]);
-  const handleFocus = useCallback(() => {
-    setFocused(true);
-    onFocusRef.current?.();
-  }, []);
-  const handleBlur = useCallback(() => {
-    setFocused(false);
-    onBlurRef.current?.();
-  }, []);
-  const prevSubmitRef = useRef({
-    value: normCode,
-    length: lenVal
-  });
-  useEffect(() => {
-    const prev = prevSubmitRef.current;
-    prevSubmitRef.current = {
-      value: normCode,
-      length: lenVal
-    };
-    if (!onSubmitRef.current) return;
-    if (prev.length !== lenVal) return;
-    if (lenVal <= 0 || normCode.length !== lenVal) return;
-    if (prev.value === normCode) return;
-    onSubmitRef.current(normCode);
-    inputRef.current?.blur();
-  }, [lenVal, normCode]);
-  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 = Array.from({
-    length: lenVal
-  }, (_, i) => {
-    const char = normCode?.[i];
-    const isFilled = !!char;
-    const showBlink = showCursor && focused && !disabled && normCode.length === i && i < lenVal;
-    return {
-      key: i,
-      char,
-      isFilled,
-      showBlink
-    };
-  });
-  const gutterVal = Math.max(0, parseNumberLike(gutter, 0) ?? 0);
-  const hasGutter = gutterVal > 0;
-  const tipInfo = errorInfo ?? info;
-  const tipClr = errorInfo ? colors.error : colors.muted;
-  const bgClr = hasGutter ? colors.transparent : colors.background;
-  const hiddenInputProps = {
-    ...HIP,
-    underlineColorAndroid: colors.transparent
-  };
-  const cellTxtBase = {
-    color: colors.text,
-    fontSize: sizing.cellTextSize,
-    fontWeight: typography.cellTextWeight,
-    fontFamily: typography.fontFamily
-  };
-  const wrapStyle = [S.w, {
-    backgroundColor: bgClr,
-    borderRadius: radii.wrapper,
-    paddingHorizontal: spacing.none,
-    opacity: disabled ? opacity.disabled : 1
-  }];
-  const sheetStyle = [S.s, {
-    borderRadius: hasGutter ? 0 : radii.wrapper,
-    backgroundColor: bgClr
-  }];
-  return /*#__PURE__*/React.createElement(View, {
-    style: style
-  }, /*#__PURE__*/React.createElement(Pressable, _extends({}, rest, {
-    style: wrapStyle,
-    onPress: focusInput,
-    disabled: disabled,
-    accessibilityRole: "button",
-    accessibilityState: {
-      disabled
-    }
-  }), /*#__PURE__*/React.createElement(View, {
-    style: sheetStyle
-  }, cells.map((item, i) => {
-    const filledTextStyle = [cellTxtBase, cellTextStyle, !mask && item.isFilled && highlightTextStyle];
-    const baseCell = [S.c, {
-      backgroundColor: colors.background,
-      height: sizing.cellHeight
-    }, cellStyle, item.isFilled && cellFilledStyle];
-    if (hasGutter) {
-      baseCell.push(S.cg, {
-        borderRadius: radii.cellGutter
-      }, i > 0 && {
-        marginLeft: gutterVal
-      });
-    }
-    ;
-    return /*#__PURE__*/React.createElement(View, {
-      key: item.key,
-      style: baseCell
-    }, mask ? /*#__PURE__*/React.createElement(View, {
-      style: [{
-        width: sizing.maskSize,
-        height: sizing.maskSize,
-        borderRadius: sizing.maskSize / 2,
-        backgroundColor: colors.text,
-        opacity: item.isFilled ? 1 : 0
-      }, maskStyle]
-    }) : /*#__PURE__*/React.createElement(Text, {
-      style: filledTextStyle,
-      numberOfLines: 1
-    }, item.char ?? ''), item.showBlink ? /*#__PURE__*/React.createElement(View, {
-      testID: "password-input-cursor",
-      style: [S.cr, {
-        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, hasGutter && /*#__PURE__*/React.createElement(View, {
-      style: createHairlineView({
-        position: 'all',
-        color: colors.border,
-        borderRadius: radii.cellGutter
-      })
-    }), !hasGutter && i < lenVal - 1 && /*#__PURE__*/React.createElement(View, {
-      style: createHairlineView({
-        position: 'right',
-        color: colors.border,
-        top: 0,
-        bottom: 0
-      })
-    }));
-  }), /*#__PURE__*/React.createElement(TextInput, _extends({
-    ref: inputRef,
-    value: normCode,
-    editable: !disabled,
-    keyboardType: keyboardType,
-    inputMode: inputMode,
-    maxLength: lenVal,
-    autoFocus: false,
-    secureTextEntry: mask
-  }, hiddenInputProps, {
-    style: [S.hi, {
-      opacity: opacity.hidden
-    }],
-    onChangeText: handleChangeText,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    accessible: false
-  }))), !hasGutter && /*#__PURE__*/React.createElement(View, {
-    style: createHairlineView({
-      position: 'all',
-      color: colors.border,
-      borderRadius: radii.wrapper
-    })
-  })), tipInfo ? /*#__PURE__*/React.createElement(View, {
-    style: [S.iw, {
-      marginTop: spacing.infoMarginTop
-    }]
-  }, isText(tipInfo) ? /*#__PURE__*/React.createElement(Text, {
-    style: [S.it, {
-      color: tipClr
-    }]
-  }, tipInfo) : tipInfo) : null);
-};
-const PasswordInputForwardRef = /*#__PURE__*/React.forwardRef(PasswordInputImpl);
-PasswordInputForwardRef.displayName = 'PasswordInput';
-const PasswordInput = /*#__PURE__*/React.memo(PasswordInputForwardRef);
-export default PasswordInput;
-const S = StyleSheet.create({
-  w: {
-    alignSelf: 'stretch'
-  },
-  s: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    position: 'relative',
-    overflow: 'hidden'
-  },
-  c: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  cg: {},
-  cr: {
-    position: 'absolute',
-    left: '50%'
-  },
-  hi: {
-    ...StyleSheet.absoluteFillObject
-  },
-  iw: {
-    alignItems: 'center'
-  },
-  it: {
-    textAlign: 'center'
-  }
-});
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var l in r)({}).hasOwnProperty.call(r,l)&&(e[l]=r[l])}return e},_extends.apply(null,arguments)}import React,{useCallback,useEffect,useImperativeHandle,useRef,useState}from"react";import{Pressable,StyleSheet,Text,TextInput,View}from"react-native";import{useControllableValue}from"../../hooks";import{parseNumberLike}from"../../utils/number";import{isString,isText}from"../../utils/validate";import{usePasswordInputTokens}from"./tokens";import{createHairlineView}from"../../utils/hairline";const HIP={caretHidden:!0,autoCorrect:!1,spellCheck:!1,importantForAutofill:"no",autoComplete:"off"},stripNonNumeric=e=>e.replace(/[^0-9]/g,""),PasswordInputImpl=(e,t)=>{const{value:r,defaultValue:l,onChange:a,length:n=6,mask:o=!0,gutter:s=0,type:i="text",info:u,errorInfo:c,autoFocus:d=!1,disabled:p=!1,showCursor:m=!0,validator:f,cellStyle:b,cellFilledStyle:h,cellTextStyle:g,maskStyle:y,cursorStyle:w,highlightTextStyle:R,tokensOverride:k,style:x,onSubmit:I,onFocus:C,onBlur:T,...v}=e,E=Math.max(1,Math.floor(parseNumberLike(n,6)??6)),V=usePasswordInputTokens(k),{colors:F,radii:P,sizing:H,typography:N,opacity:z,spacing:L}=V,O=useRef(null),[M,W]=useState(!0),_=useRef(null),[j,A]=useState(d),B="number"===i?"number-pad":"default",D="number"===i?"numeric":"text",[G="",q]=useControllableValue(e,{defaultValue:""}),J=useCallback(e=>{let t=null==e?"":isString(e)?e:String(e);return"number"===i&&(t=stripNonNumeric(t)),E>0&&t.length>E&&(t=t.slice(0,E)),t},[E,i]),K=J(G),Q=useRef(f),U=useRef(C),X=useRef(T),Y=useRef(I);Q.current=f,U.current=C,X.current=T,Y.current=I;const Z=useCallback(e=>{const t=J(e);t!==K&&(Q.current&&!Q.current(t)||q(t))},[J,K,q]),$=useCallback(()=>{p||O.current?.focus()},[p]),ee=useCallback(()=>{O.current?.blur()},[]),te=useCallback(()=>{Z("")},[Z]);useImperativeHandle(t,()=>({focus:$,blur:ee,clear:te}),[ee,te,$]),useEffect(()=>{if(!d||p)return;const e=setTimeout(()=>{O.current?.focus()},60);return()=>clearTimeout(e)},[d,p]);const re=useCallback(e=>{Z(e??"")},[Z]),le=useCallback(()=>{A(!0),U.current?.()},[]),ae=useCallback(()=>{A(!1),X.current?.()},[]),ne=useRef({value:K,length:E});useEffect(()=>{const e=ne.current;ne.current={value:K,length:E},Y.current&&e.length===E&&(E<=0||K.length!==E||e.value!==K&&(Y.current(K),O.current?.blur()))},[E,K]),useEffect(()=>{const e=m&&j&&!p;return _.current&&(clearInterval(_.current),_.current=null),e?(W(!0),_.current=setInterval(()=>{W(e=>!e)},500)):W(!1),()=>{_.current&&(clearInterval(_.current),_.current=null)}},[p,j,m]);const oe=Array.from({length:E},(e,t)=>{const r=K?.[t];return{key:t,char:r,isFilled:!!r,showBlink:m&&j&&!p&&K.length===t&&t<E}}),se=Math.max(0,parseNumberLike(s,0)??0),ie=se>0,ue=c??u,ce=c?F.error:F.muted,de=ie?F.transparent:F.background,pe={...HIP,underlineColorAndroid:F.transparent},me={color:F.text,fontSize:H.cellTextSize,fontWeight:N.cellTextWeight,fontFamily:N.fontFamily},fe=[S.w,{backgroundColor:de,borderRadius:P.wrapper,paddingHorizontal:L.none,opacity:p?z.disabled:1}],be=[S.s,{borderRadius:ie?0:P.wrapper,backgroundColor:de}];return React.createElement(View,{style:x},React.createElement(Pressable,_extends({},v,{style:fe,onPress:$,disabled:p,accessibilityRole:"button",accessibilityState:{disabled:p}}),React.createElement(View,{style:be},oe.map((e,t)=>{const r=[me,g,!o&&e.isFilled&&R],l=[S.c,{backgroundColor:F.background,height:H.cellHeight},b,e.isFilled&&h];return ie&&l.push(S.cg,{borderRadius:P.cellGutter},t>0&&{marginLeft:se}),React.createElement(View,{key:e.key,style:l},o?React.createElement(View,{style:[{width:H.maskSize,height:H.maskSize,borderRadius:H.maskSize/2,backgroundColor:F.text,opacity:e.isFilled?1:0},y]}):React.createElement(Text,{style:r,numberOfLines:1},e.char??""),e.showBlink?React.createElement(View,{testID:"password-input-cursor",style:[S.cr,{width:H.cursorWidth,height:100*H.cursorHeightRatio+"%",borderRadius:H.cursorWidth/2,top:100*H.cursorTopRatio+"%",marginLeft:-H.cursorWidth/2,backgroundColor:F.cursor,opacity:M?1:0},w]}):null,ie&&React.createElement(View,{style:createHairlineView({position:"all",color:F.border,borderRadius:P.cellGutter})}),!ie&&t<E-1&&React.createElement(View,{style:createHairlineView({position:"right",color:F.border,top:0,bottom:0})}))}),React.createElement(TextInput,_extends({ref:O,value:K,editable:!p,keyboardType:B,inputMode:D,maxLength:E,autoFocus:!1,secureTextEntry:o},pe,{style:[S.hi,{opacity:z.hidden}],onChangeText:re,onFocus:le,onBlur:ae,accessible:!1}))),!ie&&React.createElement(View,{style:createHairlineView({position:"all",color:F.border,borderRadius:P.wrapper})})),ue?React.createElement(View,{style:[S.iw,{marginTop:L.infoMarginTop}]},isText(ue)?React.createElement(Text,{style:[S.it,{color:ce}]},ue):ue):null)},PasswordInputForwardRef=React.forwardRef(PasswordInputImpl);PasswordInputForwardRef.displayName="PasswordInput";const PasswordInput=React.memo(PasswordInputForwardRef);export default PasswordInput;const S=StyleSheet.create({w:{alignSelf:"stretch"},s:{flexDirection:"row",alignItems:"center",position:"relative",overflow:"hidden"},c:{flex:1,justifyContent:"center",alignItems:"center"},cg:{},cr:{position:"absolute",left:"50%"},hi:{...StyleSheet.absoluteFillObject},iw:{alignItems:"center"},it:{textAlign:"center"}});

package/dist/es/components/password-input/index.js

@@ -1 +1 @@
-export { default } from './PasswordInput';
+export{default}from"./PasswordInput";

package/dist/es/components/password-input/tokens.js

@@ -1,41 +1 @@
-import { StyleSheet } from 'react-native';
-import { createComponentTokensHook } from '../../design-system';
-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',
-    transparent: 'transparent'
-  },
-  radii: {
-    wrapper: foundations.radii.sm,
-    cellGutter: foundations.radii.none
-  },
-  sizing: {
-    cellHeight: 50,
-    cellTextSize: foundations.fontSize.xl,
-    maskSize: 10,
-    cursorWidth: 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,
-    hidden: 0
-  },
-  spacing: {
-    infoMarginTop: foundations.spacing.sm,
-    none: foundations.spacing.none
-  }
-});
-export const usePasswordInputTokens = createComponentTokensHook('passwordInput', createPasswordInputTokens);
+import{StyleSheet}from"react-native";import{createComponentTokensHook}from"../../design-system";const createPasswordInputTokens=e=>({colors:{border:e.palette.default[100],text:e.palette.default[900],muted:e.palette.default[500],error:e.palette.danger[500],cursor:e.palette.default[800],background:"#ffffff",transparent:"transparent"},radii:{wrapper:e.radii.sm,cellGutter:e.radii.none},sizing:{cellHeight:50,cellTextSize:e.fontSize.xl,maskSize:10,cursorWidth:StyleSheet.hairlineWidth||1,cursorHeightRatio:.4,cursorTopRatio:.3},typography:{fontFamily:e.typography.fontFamily,cellTextWeight:e.typography.weight.semiBold,infoSize:e.fontSize.sm,infoLineHeight:Math.round(e.fontSize.sm*e.typography.lineHeightMultiplier),infoWeight:e.typography.weight.regular},opacity:{disabled:.6,hidden:0},spacing:{infoMarginTop:e.spacing.sm,none:e.spacing.none}});export const usePasswordInputTokens=createComponentTokensHook("passwordInput",createPasswordInputTokens);