@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/Autocomplete/Autocomplete.js

@@ -1,222 +1 @@
-"use strict";
-
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Keyboard, Pressable, ScrollView, StyleSheet, Text, 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 { Input } from "../Input/index.js";
-import { Spinner } from "../Spinner/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const defaultGetLabel = o => typeof o === 'string' ? o : String(o);
-function Autocomplete(props) {
-  const {
-    options,
-    value,
-    defaultValue,
-    onChangeText,
-    onSelect,
-    getOptionLabel,
-    getOptionKey,
-    filter,
-    minChars = 1,
-    maxResults = 8,
-    emptyText = 'No matches',
-    loading = false,
-    filterMode = 'client',
-    loadingText = 'Searching…',
-    placeholder,
-    label,
-    error,
-    helperText,
-    disabled = false,
-    size = 'md',
-    variant,
-    haptic,
-    style,
-    listStyle,
-    optionTextStyle,
-    testID
-  } = props;
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const [text, setText] = useControllableState({
-    value,
-    defaultValue: defaultValue ?? '',
-    onChange: onChangeText
-  });
-  const [focused, setFocused] = useState(false);
-  const [fieldHeight, setFieldHeight] = useState(0);
-  const blurTimer = useRef(null);
-  const labelOf = useCallback(o => getOptionLabel ? getOptionLabel(o) : defaultGetLabel(o), [getOptionLabel]);
-  const filtered = useMemo(() => {
-    // Server-side search: trust the provided options, don't re-filter them away.
-    if (filterMode === 'none') {
-      return options.slice(0, maxResults);
-    }
-    const q = text.trim();
-    if (q.length < minChars) {
-      return [];
-    }
-    const lower = q.toLowerCase();
-    const match = filter ? o => filter(o, q) : o => labelOf(o).toLowerCase().includes(lower);
-    return options.filter(match).slice(0, maxResults);
-  }, [options, text, minChars, maxResults, filter, labelOf, filterMode]);
-  const showList = focused && (loading || text.trim().length >= minChars);
-  const handleSelect = useCallback(o => {
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    if (blurTimer.current) {
-      clearTimeout(blurTimer.current);
-    }
-    setText(labelOf(o));
-    setFocused(false);
-    Keyboard.dismiss();
-    onSelect(o);
-  }, [haptic, setText, labelOf, onSelect]);
-  React.useEffect(() => () => {
-    if (blurTimer.current) {
-      clearTimeout(blurTimer.current);
-    }
-  }, []);
-  const onFieldLayout = useCallback(e => {
-    setFieldHeight(e.nativeEvent.layout.height);
-  }, []);
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    testID: testID,
-    children: [/*#__PURE__*/_jsx(View, {
-      onLayout: onFieldLayout,
-      children: /*#__PURE__*/_jsx(Input, {
-        value: text,
-        onChangeText: setText,
-        onFocus: () => {
-          if (blurTimer.current) {
-            clearTimeout(blurTimer.current);
-          }
-          setFocused(true);
-        },
-        onBlur: () => {
-          blurTimer.current = setTimeout(() => setFocused(false), 120);
-        },
-        placeholder: placeholder,
-        label: label,
-        error: error,
-        helperText: helperText,
-        editable: !disabled
-        // editable={false} stops typing but says nothing to a screen reader,
-        // so a disabled field announced as editable is the bug this closes.
-        ,
-        accessibilityState: {
-          disabled
-        },
-        size: size,
-        variant: variant,
-        autoCorrect: false,
-        autoCapitalize: "none"
-      })
-    }), showList ? /*#__PURE__*/_jsx(View, {
-      style: [styles.list, {
-        top: fieldHeight,
-        backgroundColor: theme.colors.background.elevated,
-        borderColor: theme.colors.border.primary,
-        borderRadius: theme.radius.md,
-        ...smoothCorners,
-        ...theme.shadows.lg
-      }, listStyle],
-      children: loading ? /*#__PURE__*/_jsxs(View, {
-        style: styles.loadingRow,
-        children: [/*#__PURE__*/_jsx(Spinner, {
-          size: "sm"
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.loadingText, {
-            color: theme.colors.text.secondary,
-            fontSize: theme.typography.fontSize.sm
-          }],
-          children: loadingText
-        })]
-      }) : filtered.length === 0 ? /*#__PURE__*/_jsx(Text, {
-        style: [styles.empty, {
-          color: theme.colors.text.tertiary,
-          fontSize: theme.typography.fontSize.sm
-        }],
-        children: emptyText
-      }) : /*#__PURE__*/_jsx(ScrollView, {
-        keyboardShouldPersistTaps: "handled",
-        style: styles.scroll,
-        children: filtered.map((o, i) => /*#__PURE__*/_jsx(Pressable, {
-          onPress: () => handleSelect(o),
-          android_ripple: {
-            color: theme.colors.surface.pressed
-          },
-          style: ({
-            pressed
-          }) => [styles.option, {
-            paddingHorizontal: theme.spacing.md,
-            paddingVertical: theme.spacing.sm,
-            backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent'
-          }],
-          accessibilityRole: "button",
-          accessibilityLabel: labelOf(o),
-          accessibilityState: {
-            selected: labelOf(o) === text
-          },
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [styles.optionText, {
-              color: theme.colors.text.primary,
-              fontSize: theme.typography.fontSize.base
-            }, optionTextStyle],
-            numberOfLines: 1,
-            children: labelOf(o)
-          })
-        }, getOptionKey ? getOptionKey(o) : `${labelOf(o)}-${i}`))
-      })
-    }) : null]
-  });
-}
-Autocomplete.displayName = 'Autocomplete';
-const buildStyles = theme => StyleSheet.create({
-  container: {
-    width: '100%',
-    position: 'relative',
-    zIndex: 10
-  },
-  list: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    borderWidth: StyleSheet.hairlineWidth,
-    overflow: 'hidden',
-    zIndex: 20,
-    maxHeight: 240
-  },
-  scroll: {
-    maxHeight: 240
-  },
-  option: {
-    width: '100%'
-  },
-  optionText: {
-    includeFontPadding: false
-  },
-  empty: {
-    padding: theme.spacing.md,
-    textAlign: 'center',
-    includeFontPadding: false
-  },
-  loadingRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: theme.spacing.sm,
-    padding: theme.spacing.md
-  },
-  loadingText: {
-    includeFontPadding: false
-  }
-});
-export { Autocomplete };
-export default Autocomplete;
-//# sourceMappingURL=Autocomplete.js.map
+"use strict";import React,{useCallback,useMemo,useRef,useState}from"react";import{Keyboard,Pressable,ScrollView,StyleSheet,Text,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{Input}from"../Input/index.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";const defaultGetLabel=e=>"string"==typeof e?e:String(e);function Autocomplete(e){const{options:t,value:o,defaultValue:r,onChangeText:i,onSelect:s,getOptionLabel:l,getOptionKey:n,filter:a,minChars:c=1,maxResults:d=8,emptyText:u="No matches",loading:p=!1,filterMode:m="client",loadingText:h="Searching…",placeholder:x,label:g,error:y,helperText:b,disabled:f=!1,size:S="md",variant:j,haptic:T,style:C,listStyle:w,optionTextStyle:_,testID:v}=e,z=useTheme(),V=useMemo(()=>buildStyles(z),[z]),[k,R]=useControllableState({value:o,defaultValue:r??"",onChange:i}),[I,L]=useState(!1),[H,P]=useState(0),A=useRef(null),F=useCallback(e=>l?l(e):defaultGetLabel(e),[l]),M=useMemo(()=>{if("none"===m)return t.slice(0,d);const e=k.trim();if(e.length<c)return[];const o=e.toLowerCase(),r=a?t=>a(t,e):e=>F(e).toLowerCase().includes(o);return t.filter(r).slice(0,d)},[t,k,c,d,a,F,m]),D=I&&(p||k.trim().length>=c),K=useCallback(e=>{const t=resolveHaptic(T,"selection");t&&triggerHaptic(t),A.current&&clearTimeout(A.current),R(F(e)),L(!1),Keyboard.dismiss(),s(e)},[T,R,F,s]);React.useEffect(()=>()=>{A.current&&clearTimeout(A.current)},[]);const O=useCallback(e=>{P(e.nativeEvent.layout.height)},[]);return _jsxs(View,{style:[V.container,C],testID:v,children:[_jsx(View,{onLayout:O,children:_jsx(Input,{value:k,onChangeText:R,onFocus:()=>{A.current&&clearTimeout(A.current),L(!0)},onBlur:()=>{A.current=setTimeout(()=>L(!1),120)},placeholder:x,label:g,error:y,helperText:b,editable:!f,accessibilityState:{disabled:f},size:S,variant:j,autoCorrect:!1,autoCapitalize:"none"})}),D?_jsx(View,{style:[V.list,{top:H,backgroundColor:z.colors.background.elevated,borderColor:z.colors.border.primary,borderRadius:z.radius.md,...smoothCorners,...z.shadows.lg},w],children:p?_jsxs(View,{style:V.loadingRow,children:[_jsx(Spinner,{size:"sm"}),_jsx(Text,{style:[V.loadingText,{color:z.colors.text.secondary,fontSize:z.typography.fontSize.sm}],children:h})]}):0===M.length?_jsx(Text,{style:[V.empty,{color:z.colors.text.tertiary,fontSize:z.typography.fontSize.sm}],children:u}):_jsx(ScrollView,{keyboardShouldPersistTaps:"handled",style:V.scroll,children:M.map((e,t)=>_jsx(Pressable,{onPress:()=>K(e),android_ripple:{color:z.colors.surface.pressed},style:({pressed:e})=>[V.option,{paddingHorizontal:z.spacing.md,paddingVertical:z.spacing.sm,backgroundColor:e?z.colors.surface.pressed:"transparent"}],accessibilityRole:"button",accessibilityLabel:F(e),accessibilityState:{selected:F(e)===k},children:_jsx(Text,{style:[V.optionText,{color:z.colors.text.primary,fontSize:z.typography.fontSize.base},_],numberOfLines:1,children:F(e)})},n?n(e):`${F(e)}-${t}`))})}):null]})}Autocomplete.displayName="Autocomplete";const buildStyles=e=>StyleSheet.create({container:{width:"100%",position:"relative",zIndex:10},list:{position:"absolute",left:0,right:0,borderWidth:StyleSheet.hairlineWidth,overflow:"hidden",zIndex:20,maxHeight:240},scroll:{maxHeight:240},option:{width:"100%"},optionText:{includeFontPadding:!1},empty:{padding:e.spacing.md,textAlign:"center",includeFontPadding:!1},loadingRow:{flexDirection:"row",alignItems:"center",gap:e.spacing.sm,padding:e.spacing.md},loadingText:{includeFontPadding:!1}});export{Autocomplete};export default Autocomplete;

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

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