react-native-ui-lib 7.38.0-snapshot.6221 → 7.38.0-snapshot.6232

package/package.json

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

package/src/components/index.js

@@ -137,9 +137,6 @@ export default {
   get ProgressiveImage() {
     return require('./progressiveImage').default;
   },
-  get SearchInput() {
-    return require('./searchInput').default;
-  },
   get StateScreen() {
     return require('./stateScreen').default;
   },

package/src/index.d.ts

@@ -76,7 +76,6 @@ export { default as RadioGroup, RadioGroupProps } from './components/radioGroup'
 export type { RecorderProps } from './typings/recorderTypes';
 export type { ComponentStatics } from './typings/common';
 export { default as ScrollBar, ScrollBarProps } from './components/scrollBar';
-export { default as SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets } from './components/searchInput';
 export { default as SectionsWheelPicker, SectionsWheelPickerProps } from './components/sectionsWheelPicker';
 export { default as SegmentedControl, SegmentedControlProps, SegmentedControlItemProps, SegmentedControlPreset } from './components/segmentedControl';
 export { default as SharedTransition } from './components/sharedTransition';

package/src/index.js

@@ -178,10 +178,6 @@ var _exportNames = {
   RadioGroupProps: true,
   ScrollBar: true,
   ScrollBarProps: true,
-  SearchInput: true,
-  SearchInputProps: true,
-  SearchInputRef: true,
-  SearchInputPresets: true,
   SectionsWheelPicker: true,
   SectionsWheelPickerProps: true,
   SegmentedControl: true,
@@ -1210,30 +1206,6 @@ Object.defineProperty(exports, "ScrollBarProps", {
     return _scrollBar().ScrollBarProps;
   }
 });
-Object.defineProperty(exports, "SearchInput", {
-  enumerable: true,
-  get: function () {
-    return _searchInput().default;
-  }
-});
-Object.defineProperty(exports, "SearchInputPresets", {
-  enumerable: true,
-  get: function () {
-    return _searchInput().SearchInputPresets;
-  }
-});
-Object.defineProperty(exports, "SearchInputProps", {
-  enumerable: true,
-  get: function () {
-    return _searchInput().SearchInputProps;
-  }
-});
-Object.defineProperty(exports, "SearchInputRef", {
-  enumerable: true,
-  get: function () {
-    return _searchInput().SearchInputRef;
-  }
-});
 Object.defineProperty(exports, "SectionsWheelPicker", {
   enumerable: true,
   get: function () {
@@ -2221,13 +2193,6 @@ function _scrollBar() {
   };
   return data;
 }
-function _searchInput() {
-  const data = _interopRequireWildcard(require("./components/searchInput"));
-  _searchInput = function () {
-    return data;
-  };
-  return data;
-}
 function _sectionsWheelPicker() {
   const data = _interopRequireWildcard(require("./components/sectionsWheelPicker"));
   _sectionsWheelPicker = function () {

package/searchInput.d.ts

@@ -1,2 +0,0 @@
-import {SearchInput} from './src';
-export default SearchInput;

package/searchInput.js

@@ -1 +0,0 @@
-module.exports = require('./src/components/searchInput').default;

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { SearchInputPresets, SearchInputProps, SearchInputRef } from './types';
-declare const SearchInput: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    onClear?: (() => void) | undefined;
-    onDismiss?: (() => void) | undefined;
-    cancelButtonProps?: import("../button").ButtonProps | undefined;
-    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    title?: string | 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;
-    useSafeArea?: boolean | undefined;
-    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;
-} & React.RefAttributes<any>>;
-interface StaticMembers {
-    presets: typeof SearchInputPresets;
-}
-export { SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets };
-declare const _default: React.ForwardRefExoticComponent<import("react-native").TextInputProps & {
-    onClear?: (() => void) | undefined;
-    onDismiss?: (() => void) | undefined;
-    cancelButtonProps?: import("../button").ButtonProps | undefined;
-    renderCustomRightElement?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>>) | undefined;
-    title?: string | 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;
-    useSafeArea?: boolean | undefined;
-    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;
-} & React.RefAttributes<any>> & StaticMembers;
-export default _default;

package/src/components/searchInput/index.js

@@ -1,220 +0,0 @@
-import _isEmpty from "lodash/isEmpty";
-import React, { useImperativeHandle, forwardRef, useEffect, useRef, useState } from 'react';
-import { StyleSheet, Animated, TextInput, ActivityIndicator } from 'react-native';
-import { SearchInputPresets, SearchInputProps, SearchInputRef } from "./types";
-import { Colors, BorderRadiuses, Spacings, Typography } from "../../style";
-import { Constants, asBaseComponent } from "../../commons/new";
-import Button from "../button";
-import Icon from "../icon";
-import View from "../view";
-import Assets from "../../assets";
-const ICON_SIZE = 24;
-const INPUT_HEIGHT = 60;
-const TOP_INPUT_HEIGHT = Constants.isIOS ? 40 : 56;
-const PROMINENT_INPUT_HEIGHT = 48;
-const INVERTED_TEXT_COLOR = Colors.$textDefaultLight;
-const INVERTED_ICON_COLOR = Colors.$iconDefaultLight;
-const HIT_SLOP_VALUE = 20;
-const SearchInput = forwardRef((props, ref) => {
-  const {
-    preset = SearchInputPresets.DEFAULT,
-    onDismiss,
-    useSafeArea,
-    invertColors,
-    testID,
-    showLoader,
-    loaderProps,
-    value: controlledValue,
-    onChangeText,
-    onClear,
-    containerStyle,
-    renderCustomRightElement,
-    style,
-    inaccessible
-  } = props;
-  const currentAnimatedValue = 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));
-  const [isAnimatingClearButton, setIsAnimatingClearButton] = useState(!_isEmpty(controlledValue));
-  useImperativeHandle(ref, () => {
-    return {
-      blur: () => searchInputRef.current?.blur(),
-      focus: () => searchInputRef.current?.focus(),
-      clear: () => {
-        searchInputRef.current?.clear();
-        onChangeText?.('');
-        onClear?.();
-      }
-    };
-  });
-  useEffect(() => {
-    if (controlledValue !== value) {
-      setValue(controlledValue);
-      setHasValue(Boolean(controlledValue));
-    }
-  }, [controlledValue]);
-  useEffect(() => {
-    if (hasValue) {
-      animatedValueState(1);
-    } else {
-      animatedValueState(0);
-    }
-  }, [hasValue]);
-  useEffect(() => {
-    return () => {
-      currentAnimatedValue.current?.stop();
-    };
-  }, []);
-  const animatedValueState = value => {
-    setIsAnimatingClearButton(true);
-    if (currentAnimatedValue.current) {
-      currentAnimatedValue.current.stop();
-    }
-    currentAnimatedValue.current = Animated.timing(valueState, {
-      toValue: value,
-      duration: 160,
-      useNativeDriver: true
-    });
-    currentAnimatedValue.current.start(() => {
-      if (!hasValue) {
-        setIsAnimatingClearButton(false);
-      }
-    });
-  };
-  const getHeight = () => {
-    const isProminent = preset === SearchInputPresets.PROMINENT;
-    if (isProminent) {
-      return PROMINENT_INPUT_HEIGHT;
-    }
-    return useSafeArea ? TOP_INPUT_HEIGHT : INPUT_HEIGHT;
-  };
-  const onChangeTextHandler = text => {
-    console.log(`onChangeTextHandler, text:`, text);
-    onChangeText?.(text);
-    setValue(text);
-    setHasValue(!_isEmpty(text));
-  };
-  const clearInput = () => {
-    searchInputRef?.current?.clear();
-    onChangeTextHandler('');
-    onClear?.();
-  };
-  const renderClearButton = () => {
-    const transform = [{
-      translateY: valueState.interpolate({
-        inputRange: [0, 1],
-        outputRange: [50, 1]
-      })
-    }];
-    const clearButtonStyle = !isDismissible() && isAnimatingClearButton && styles.clearButton;
-    const iconStyle = {
-      tintColor: invertColors ? INVERTED_ICON_COLOR : Colors.grey40,
-      width: 12,
-      height: 12
-    };
-    return <Animated.View style={[{
-      transform
-    }, clearButtonStyle]}>
-        <Button link grey10 text80 iconSource={Assets.icons.x} iconStyle={iconStyle} onPress={clearInput} hitSlop={HIT_SLOP_VALUE} accessible={Boolean(hasValue)} accessibilityLabel={'clear'} testID={`${testID}.clearButton`} />
-      </Animated.View>;
-  };
-  const renderCancelButton = () => {
-    const {
-      cancelButtonProps
-    } = props;
-    if (onDismiss) {
-      return <Button style={styles.cancelButton} link color={invertColors ? INVERTED_TEXT_COLOR : undefined} $textDefault text65M {...cancelButtonProps} onPress={onDismiss} testID={`${testID}.cancelButton`} />;
-    }
-  };
-  const renderTextInput = () => {
-    const {
-      placeholder
-    } = props;
-    const height = getHeight();
-    const placeholderTextColor = invertColors ? INVERTED_TEXT_COLOR : Colors.$textDefault;
-    const selectionColor = invertColors ? INVERTED_TEXT_COLOR : Colors.$textDefault;
-    return <View style={[styles.inputContainer, {
-      height
-    }]}>
-        <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() && renderCustomRightElement && renderCustomRightElement()}
-      </View>;
-  };
-  const isDismissible = () => {
-    return typeof onDismiss !== 'undefined';
-  };
-  const renderIcon = (icon, left = true) => {
-    const invertedColor = invertColors ? {
-      tintColor: INVERTED_ICON_COLOR
-    } : undefined;
-    return <View>
-        <Icon tintColor={invertedColor?.tintColor} style={[styles.icon, invertedColor, left && styles.leftIcon]} source={icon} size={ICON_SIZE} />
-      </View>;
-  };
-  const renderLoader = () => {
-    const {
-      renderLoaderElement
-    } = props;
-    return <View>
-        {renderLoaderElement ? renderLoaderElement() : <ActivityIndicator style={styles.loader} {...loaderProps} />}
-      </View>;
-  };
-  const topInputTopMargin = useSafeArea && {
-    marginTop: Constants.isIOS ? Constants.statusBarHeight : 0
-  };
-  const isProminent = preset === SearchInputPresets.PROMINENT;
-  return <View inaccessible={inaccessible} row centerV style={[style, isProminent && styles.prominentContainer, topInputTopMargin]} testID={`${testID}.searchBox`}>
-      {showLoader ? renderLoader() : renderIcon(Assets.icons.search)}
-      {renderTextInput()}
-    </View>;
-});
-const styles = StyleSheet.create({
-  inputContainer: {
-    height: INPUT_HEIGHT,
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    overflow: 'hidden'
-  },
-  prominentContainer: {
-    borderWidth: 1,
-    borderColor: Colors.$outlineDefault,
-    borderRadius: BorderRadiuses.br20,
-    marginHorizontal: Spacings.s5
-  },
-  input: {
-    flex: 1,
-    ...Typography.body,
-    lineHeight: undefined,
-    color: Colors.$textDefault,
-    textAlign: Constants.isRTL ? 'right' : 'left'
-  },
-  emptyInput: {
-    marginRight: Spacings.s4
-  },
-  cancelButton: {
-    marginLeft: Spacings.s4,
-    marginRight: Spacings.s4
-  },
-  clearButton: {
-    marginRight: Spacings.s4
-  },
-  icon: {
-    marginRight: Spacings.s4
-  },
-  leftIcon: {
-    marginLeft: Spacings.s4
-  },
-  loader: {
-    marginHorizontal: Spacings.s4
-  }
-});
-SearchInput.displayName = 'SearchInput';
-export { SearchInput, SearchInputProps, SearchInputRef, SearchInputPresets };
-export default asBaseComponent(SearchInput);

package/src/components/searchInput/searchInput.api.json

@@ -1,60 +0,0 @@
-{
-  "name": "SearchInput",
-  "category": "form",
-  "description": "Search input for filtering purpose",
-  "example": "https://github.com/wix-private/wix-react-native-ui-lib/blob/master/example/screens/components/SearchInputScreen.tsx",
-  "extends": ["TextInput"],
-  "extendsLink": "https://reactnative.dev/docs/textinput",
-  "props": [
-    {"name": "onDismiss", "type": "() => void", "description": "callback for dismiss action"},
-    {"name": "onClear", "type": "() => void", "description": "On clear button callback."},
-    {"name": "title", "type": "string", "description": "Title prop."},
-    {"name": "showFilterIcon", "type": "boolean", "description": "Pass true to add filter icon on the right."},
-    {
-      "name": "showLoader",
-      "type": "boolean",
-      "description": "Whether to show a loader instead of the left search icon."
-    },
-    {
-      "name": "renderLoaderElement",
-      "type": " () => React.ReactElement",
-      "description": "custom loader element to render instead of the default loader"
-    },
-    {
-      "name": "renderLoaderElement",
-      "type": " () => React.ReactElement",
-      "description": "custom loader element to render instead of the default loader"
-    },
-    {
-      "name": "cancelButtonProps",
-      "type": "ButtonProps",
-      "description": "Props for the cancel button"
-    },
-    {
-      "name": "schemeColor",
-      "type": "string | null",
-      "description": "The SearchInput colors (affects the search icon color, the filter icon color when 'showFilterIcon' is passed and the cancel button color)"
-    },
-    {
-      "name": "inaccessible",
-      "type": "boolean",
-      "description": "Turn off accessibility for this view and its nested children"
-    },
-    {
-      "name": "useSafeArea",
-      "type": "boolean",
-      "description": "in case the SearchInput is rendered in a safe area (top of the screen)"
-    },
-    {"name": "containerStyle", "type": "ViewStyle", "description": "Override styles for the input"},
-    {"name": "style", "type": "ViewStyle", "description": "Override styles for container"}
-  ],
-  "snippet": [
-    "<SearchInput",
-    "  ref={searchInputRef$1}",
-    "  testID={'searchInput'$2}",
-    "  placeholder={'Search'$3}",
-    "  onDismiss={onDismiss$4}",
-    "  showFilterIcon={showFilterIcon$5}",
-    "/>"
-  ]
-}

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

@@ -1,70 +0,0 @@
-/// <reference types="react" />
-import { TextInputProps, StyleProp, ViewStyle, TextStyle, ActivityIndicatorProps } from 'react-native';
-import { ButtonProps } from '../button';
-export declare enum SearchInputPresets {
-    DEFAULT = "default",
-    PROMINENT = "prominent"
-}
-export interface SearchInputRef {
-    blur: () => void;
-    clear: () => void;
-    focus: () => void;
-}
-export type SearchInputProps = TextInputProps & {
-    /**
-     * On clear button callback.
-     */
-    onClear?: () => void;
-    /**
-     * callback for dismiss action
-     */
-    onDismiss?: () => void;
-    /**
-     * Props for the cancel button
-     */
-    cancelButtonProps?: ButtonProps;
-    /**
-     * Custom right element
-     */
-    renderCustomRightElement?: () => React.ReactElement;
-    /**
-     * Title prop
-     */
-    title?: string;
-    /**
-     * Whether to show a loader instead of the left search icon
-     */
-    showLoader?: boolean;
-    /**
-     * Loader props
-     */
-    loaderProps?: ActivityIndicatorProps;
-    /**
-     * custom loader element
-     */
-    renderLoaderElement?: () => React.ReactElement;
-    /**
-     * converts the colors of the search's input elements, icons and button to white
-     */
-    invertColors?: boolean;
-    /**
-     * Turn off accessibility for this view and its nested children
-     */
-    inaccessible?: boolean;
-    /**
-     * in case the SearchInput is rendered in a safe area (top of the screen)
-     */
-    useSafeArea?: boolean;
-    /**
-     * Override styles for container
-     */
-    style?: StyleProp<ViewStyle>;
-    /**
-     * Override styles for the input
-     */
-    containerStyle?: StyleProp<ViewStyle | TextStyle>;
-    /**
-     * The preset for the search input: default or prominent
-     */
-    preset?: SearchInputPresets | `${SearchInputPresets}`;
-};

package/src/components/searchInput/types.js

@@ -1,5 +0,0 @@
-export let SearchInputPresets = /*#__PURE__*/function (SearchInputPresets) {
-  SearchInputPresets["DEFAULT"] = "default";
-  SearchInputPresets["PROMINENT"] = "prominent";
-  return SearchInputPresets;
-}({});