@shoutem/ui 7.2.2-rc.0 → 7.2.2-rc.2

package/components/Icon/assets/index.js

@@ -41,7 +41,7 @@ import eye from './eye.svg';
 import eyeCrossed from './eye-crossed.svg';
 import facebook from './facebook.svg';
 import facebookLogo from './facebook-logo.svg';
-import filter from './filter.svg';
+import filters from './filters.svg';
 import folder from './folder.svg';
 import forward from './forward.svg';
 import forward5 from './forward-5.svg';
@@ -173,7 +173,7 @@ export const defaultConfig = [
   { name: 'eye-crossed', icon: eyeCrossed },
   { name: 'facebook', icon: facebook },
   { name: 'facebook-logo', icon: facebookLogo },
-  { name: 'filter', icon: filter },
+  { name: 'filters', icon: filters },
   { name: 'folder', icon: folder },
   { name: 'forward-5', icon: forward5 },
   { name: 'forward-10', icon: forward10 },

package/components/SearchField.js

@@ -1,5 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useEffect, useState } from 'react';
+import { ActivityIndicator } from 'react-native';
 import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
@@ -24,18 +25,13 @@ ClearButton.propTypes = {
  * It has a search icon, placeholder and a button that clears the current query.
  *
  */
-const SearchField = ({
-  onChangeText,
-  placeholder,
-  style,
-  defaultValue,
-  ...otherProps
-}) => {
-  const [text, setText] = useState(defaultValue);
+const SearchField = ({ onChangeText, loading, style, ...otherProps }) => {
+  const [text, setText] = useState(otherProps.defaultValue);
 
   useEffect(() => {
     onChangeText(text);
-  }, [onChangeText, text]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text]);
 
   return (
     <View
@@ -44,15 +40,17 @@ const SearchField = ({
     >
       <Icon name="search" style={style.searchIcon} />
       <TextInput
-        {...otherProps}
         autoCapitalize="none"
         autoCorrect={false}
-        onChangeText={setText}
-        placeholder={placeholder}
-        style={style.input}
         value={text}
+        style={style.input}
+        {...otherProps}
+        onChangeText={setText}
       />
-      {!!text && <ClearButton onPress={() => setText('')} style={style} />}
+      {!!text && !loading && (
+        <ClearButton onPress={() => setText('')} style={style} />
+      )}
+      {loading && <ActivityIndicator style={style.clearButton} />}
     </View>
   );
 };
@@ -60,12 +58,12 @@ const SearchField = ({
 SearchField.propTypes = {
   style: PropTypes.object.isRequired,
   defaultValue: PropTypes.string,
-  placeholder: PropTypes.string,
+  loading: PropTypes.bool,
   onChangeText: PropTypes.func,
 };
 
 SearchField.defaultProps = {
-  placeholder: undefined,
+  loading: false,
   onChangeText: undefined,
   defaultValue: '',
 };

package/components/TextInput.js

@@ -80,8 +80,8 @@ class TextInput extends PureComponent {
             underlineColorAndroid={underlineColorAndroid}
             style={{
               ...(hasBorder ? withBorder : withoutBorder),
-              ...(errorMessage ? errorBorderColor : {}),
               ...otherStyle,
+              ...(errorMessage ? errorBorderColor : {}),
               height,
             }}
             ref={forwardedRef}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "7.2.2-rc.0",
+  "version": "7.2.2-rc.2",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",

package/theme.js

@@ -2040,7 +2040,6 @@ export default () => {
       clearButton: {
         position: 'absolute',
         right: 5,
-        top: 3,
       },
 
       clearIcon: {