@shoutem/ui 7.2.1 → 7.2.2-rc.1

package/components/Icon/assets/filters.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 26 26" id="Слой_1" version="1.1" viewBox="0 0 26 26" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M1.75,7.75h6.6803589c0.3355713,1.2952271,1.5039063,2.2587891,2.9026489,2.2587891   S13.9000854,9.0452271,14.2356567,7.75H24.25C24.6640625,7.75,25,7.4140625,25,7s-0.3359375-0.75-0.75-0.75H14.2356567   c-0.3355713-1.2952271-1.5039063-2.2587891-2.9026489-2.2587891S8.7659302,4.9547729,8.4303589,6.25H1.75   C1.3359375,6.25,1,6.5859375,1,7S1.3359375,7.75,1.75,7.75z M11.3330078,5.4912109   c0.8320313,0,1.5087891,0.6767578,1.5087891,1.5087891s-0.6767578,1.5087891-1.5087891,1.5087891S9.8242188,7.8320313,9.8242188,7   S10.5009766,5.4912109,11.3330078,5.4912109z" /><path d="M24.25,12.25h-1.6061401c-0.3355713-1.2952271-1.5039063-2.2587891-2.9026489-2.2587891   S17.1741333,10.9547729,16.838562,12.25H1.75C1.3359375,12.25,1,12.5859375,1,13s0.3359375,0.75,0.75,0.75h15.088562   c0.3355713,1.2952271,1.5039063,2.2587891,2.9026489,2.2587891s2.5670776-0.963562,2.9026489-2.2587891H24.25   c0.4140625,0,0.75-0.3359375,0.75-0.75S24.6640625,12.25,24.25,12.25z M19.7412109,14.5087891   c-0.8320313,0-1.5087891-0.6767578-1.5087891-1.5087891s0.6767578-1.5087891,1.5087891-1.5087891S21.25,12.1679688,21.25,13   S20.5732422,14.5087891,19.7412109,14.5087891z" /><path d="M24.25,18.25H9.7181396c-0.3355103-1.2952271-1.5037842-2.2587891-2.9017334-2.2587891   c-1.3987427,0-2.5670776,0.963562-2.9026489,2.2587891H1.75C1.3359375,18.25,1,18.5859375,1,19s0.3359375,0.75,0.75,0.75h2.1637573   c0.3355713,1.2952271,1.5039063,2.2587891,2.9026489,2.2587891c1.3979492,0,2.5662231-0.963562,2.9017334-2.2587891H24.25   c0.4140625,0,0.75-0.3359375,0.75-0.75S24.6640625,18.25,24.25,18.25z M6.8164063,20.5087891   c-0.8320313,0-1.5087891-0.6767578-1.5087891-1.5087891s0.6767578-1.5087891,1.5087891-1.5087891   c0.8310547,0,1.5078125,0.6767578,1.5078125,1.5087891S7.6474609,20.5087891,6.8164063,20.5087891z" /></g></svg>

package/components/Icon/assets/index.js

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

package/components/SearchField.js

@@ -1,4 +1,5 @@
-import React, { PureComponent } from 'react';
+/* eslint-disable react/no-multi-comp */
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
@@ -23,59 +24,50 @@ ClearButton.propTypes = {
  * It has a search icon, placeholder and a button that clears the current query.
  *
  */
-class SearchField extends PureComponent {
-  render() {
-    const {
-      onChangeText,
-      placeholder,
-      style,
-      value,
-      ...otherProps
-    } = this.props;
+const SearchField = ({
+  onChangeText,
+  placeholder,
+  style,
+  defaultValue,
+  ...otherProps
+}) => {
+  const [text, setText] = useState(defaultValue);
 
-    return (
-      <View
-        style={style.container}
-        styleName="horizontal sm-gutter-horizontal v-center"
-      >
-        <Icon name="search" style={style.searchIcon} />
-        <TextInput
-          {...otherProps}
-          autoCapitalize="none"
-          autoCorrect={false}
-          onChangeText={onChangeText}
-          placeholder={placeholder}
-          style={style.input}
-          value={value}
-        />
-        {!!value && (
-          <ClearButton onPress={() => onChangeText('')} style={style} />
-        )}
-      </View>
-    );
-  }
-}
+  useEffect(() => {
+    onChangeText(text);
+  }, [onChangeText, text]);
+
+  return (
+    <View
+      style={style.container}
+      styleName="horizontal sm-gutter-horizontal v-center"
+    >
+      <Icon name="search" style={style.searchIcon} />
+      <TextInput
+        {...otherProps}
+        autoCapitalize="none"
+        autoCorrect={false}
+        onChangeText={setText}
+        placeholder={placeholder}
+        style={style.input}
+        value={text}
+      />
+      {!!text && <ClearButton onPress={() => setText('')} style={style} />}
+    </View>
+  );
+};
 
 SearchField.propTypes = {
-  // Styles for container and search icon
-  style: PropTypes.shape({
-    clearIcon: PropTypes.object,
-    container: PropTypes.object,
-    input: PropTypes.object,
-    searchIcon: PropTypes.object,
-  }).isRequired,
-  // A placeholder for input when no value is entered
+  style: PropTypes.object.isRequired,
+  defaultValue: PropTypes.string,
   placeholder: PropTypes.string,
-  // Value to render as text in search input
-  value: PropTypes.string,
-  // Called with the new value on text change
   onChangeText: PropTypes.func,
 };
 
 SearchField.defaultProps = {
   placeholder: undefined,
-  value: undefined,
   onChangeText: undefined,
+  defaultValue: '',
 };
 
 const AnimatedSearchField = connectAnimation(SearchField);

package/package.json

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