react-native-ui-lib 7.37.2-snapshot.6217 → 7.38.0-snapshot.6221

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.37.2-snapshot.6217",
+  "version": "7.38.0-snapshot.6221",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/searchInput/index.d.ts

@@ -3,10 +3,11 @@ import { SearchInputPresets, SearchInputProps, SearchInputRef } from './types';
 declare const SearchInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
     onClear?: (() => void) | undefined;
     onDismiss?: (() => void) | undefined;
-    schemeColor?: string | null | undefined;
+    cancelButtonProps?: import("../button").ButtonProps | undefined;
+    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
     title?: string | undefined;
-    showFilterIcon?: boolean | undefined;
     showLoader?: boolean | undefined;
+    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
     renderLoaderElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
     invertColors?: boolean | undefined;
     inaccessible?: boolean | undefined;
@@ -14,7 +15,6 @@ declare const SearchInput: React.ForwardRefExoticComponent<import("react-native"
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     containerStyle?: import("react-native").StyleProp<import("react-native").TextStyle | import("react-native").ViewStyle>;
     preset?: "default" | "prominent" | SearchInputPresets | undefined;
-    cancelButtonProps?: import("../button").ButtonProps | undefined;
 } & React.RefAttributes<any>>;
 interface StaticMembers {
     presets: typeof SearchInputPresets;
@@ -23,10 +23,11 @@ export { SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets };
 declare const _default: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
     onClear?: (() => void) | undefined;
     onDismiss?: (() => void) | undefined;
-    schemeColor?: string | null | undefined;
+    cancelButtonProps?: import("../button").ButtonProps | undefined;
+    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
     title?: string | undefined;
-    showFilterIcon?: boolean | undefined;
     showLoader?: boolean | undefined;
+    loaderProps?: import("react-native").ActivityIndicatorProps | undefined;
     renderLoaderElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
     invertColors?: boolean | undefined;
     inaccessible?: boolean | undefined;
@@ -34,6 +35,5 @@ declare const _default: React.ForwardRefExoticComponent<import("react-native").T
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
     containerStyle?: import("react-native").StyleProp<import("react-native").TextStyle | import("react-native").ViewStyle>;
     preset?: "default" | "prominent" | SearchInputPresets | undefined;
-    cancelButtonProps?: import("../button").ButtonProps | undefined;
 } & React.RefAttributes<any>> & StaticMembers;
 export default _default;

package/src/components/searchInput/index.js

@@ -23,17 +23,17 @@ const SearchInput = forwardRef((props, ref) => {
     invertColors,
     testID,
     showLoader,
+    loaderProps,
     value: controlledValue,
     onChangeText,
     onClear,
     containerStyle,
-    showFilterIcon,
-    // loaderProps,
+    renderCustomRightElement,
     style,
     inaccessible
   } = props;
   const currentAnimatedValue = useRef();
-  const searchInputRef = useRef();
+  const searchInputRef = useRef(null);
   const [hasValue, setHasValue] = useState(Boolean(controlledValue));
   const [value, setValue] = useState(controlledValue);
   const [valueState] = useState(new Animated.Value(_isEmpty(controlledValue) ? 0 : 1));
@@ -101,27 +101,6 @@ const SearchInput = forwardRef((props, ref) => {
     onChangeTextHandler('');
     onClear?.();
   };
-
-  // const blur = () => {
-  //   if (searchInputRef.current) {
-  //     searchInputRef.current.blur();
-  //   }
-  // };
-
-  // const focus = () => {
-  //   if (searchInputRef.current) {
-  //     searchInputRef.current.focus();
-  //   }
-  // };
-
-  // const clear = () => {
-  //   if (searchInputRef.current) {
-  //     searchInputRef.current.clear();
-  //     onChangeText?.('');
-  //     onClear?.();
-  //   }
-  // };
-
   const renderClearButton = () => {
     const transform = [{
       translateY: valueState.interpolate({
@@ -131,7 +110,9 @@ const SearchInput = forwardRef((props, ref) => {
     }];
     const clearButtonStyle = !isDismissible() && isAnimatingClearButton && styles.clearButton;
     const iconStyle = {
-      tintColor: invertColors ? INVERTED_ICON_COLOR : Colors.grey40
+      tintColor: invertColors ? INVERTED_ICON_COLOR : Colors.grey40,
+      width: 12,
+      height: 12
     };
     return <Animated.View style={[{
       transform
@@ -157,14 +138,12 @@ const SearchInput = forwardRef((props, ref) => {
     return <View style={[styles.inputContainer, {
       height
     }]}>
-        <TextInput accessibilityRole={'search'} placeholder={placeholder} placeholderTextColor={placeholderTextColor} underlineColorAndroid="transparent" selectionColor={selectionColor}
-      //@ts-ignore
-      ref={searchInputRef?.current} value={value} allowFontScaling={false} style={[styles.input, containerStyle, invertColors && {
+        <TextInput accessibilityRole={'search'} placeholder={placeholder} placeholderTextColor={placeholderTextColor} underlineColorAndroid="transparent" selectionColor={selectionColor} ref={searchInputRef} value={value} allowFontScaling={false} style={[styles.input, containerStyle, invertColors && {
         color: INVERTED_TEXT_COLOR
       }, (!isDismissible() || isAnimatingClearButton) && styles.emptyInput]} onChangeText={onChangeTextHandler} testID={testID} />
         {isAnimatingClearButton && renderClearButton()}
         {isDismissible() && renderCancelButton()}
-        {!isDismissible() && showFilterIcon && renderIcon(Assets.icons.general.filter, true)}
+        {!isDismissible() && renderCustomRightElement && renderCustomRightElement()}
       </View>;
   };
   const isDismissible = () => {
@@ -183,7 +162,7 @@ const SearchInput = forwardRef((props, ref) => {
       renderLoaderElement
     } = props;
     return <View>
-        {renderLoaderElement ? renderLoaderElement() : <ActivityIndicator size={'small'} color={Colors.grey40} />}
+        {renderLoaderElement ? renderLoaderElement() : <ActivityIndicator style={styles.loader} {...loaderProps} />}
       </View>;
   };
   const topInputTopMargin = useSafeArea && {
@@ -231,6 +210,9 @@ const styles = StyleSheet.create({
   },
   leftIcon: {
     marginLeft: Spacings.s4
+  },
+  loader: {
+    marginHorizontal: Spacings.s4
   }
 });
 SearchInput.displayName = 'SearchInput';

package/src/components/searchInput/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { TextInputProps, StyleProp, ViewStyle, TextStyle, ActivityIndicatorProps } from 'react-native';
 import { ButtonProps } from '../button';
 export declare enum SearchInputPresets {
     DEFAULT = "default",
@@ -20,21 +20,25 @@ export type SearchInputProps = TextInputProps & {
      */
     onDismiss?: () => void;
     /**
-     * The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed and the cancel button color)
+     * Props for the cancel button
      */
-    schemeColor?: string | null;
+    cancelButtonProps?: ButtonProps;
     /**
-     * Title prop
+     * Custom right element
      */
-    title?: string;
+    renderCustomRightElement?: () => React.ReactElement;
     /**
-     * Pass true to add filter icon on the right
+     * Title prop
      */
-    showFilterIcon?: boolean;
+    title?: string;
     /**
      * Whether to show a loader instead of the left search icon
      */
     showLoader?: boolean;
+    /**
+     * Loader props
+     */
+    loaderProps?: ActivityIndicatorProps;
     /**
      * custom loader element
      */
@@ -63,8 +67,4 @@ export type SearchInputProps = TextInputProps & {
      * The preset for the search input: default or prominent
      */
     preset?: SearchInputPresets | `${SearchInputPresets}`;
-    /**
-     * Props for the cancel button
-     */
-    cancelButtonProps?: ButtonProps;
 };