TextField - add 'clearButton' and 'topTrailingAccessory' props (#3113)

* TextField - add clear button

* demo

* adding 'topTrailingAccessory' prop and fix assets

* replacing icon

* fix validationIcon with no validation massage

* fix topmargin

* revert

* fix master merge

* Delete demo/src/assets/Assets.ts

remove Demo/Assets

* add preset

* add icons

* adding size

* add testIDs

* remove console

* pr comments fixes

* fix testID

* pr comments fix

Author: Inbal-Tish

demo/src/configurations.js

@@ -14,7 +14,9 @@ export const loadDemoConfigurations = () => {
     refresh: require('./assets/icons/refresh.png'),
     search: require('./assets/icons/search.png'),
     settings: require('./assets/icons/settings.png'),
-    share: require('./assets/icons/share.png')
+    share: require('./assets/icons/share.png'),
+    info: require('./assets/icons/info.png'),
+    exclamation: require('./assets/icons/exclamationFillSmall.png')
   });
 
   Assets.loadAssetsGroup('images.demo', {

demo/src/screens/componentScreens/TextFieldScreen.tsx

@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import {ScrollView, ActivityIndicator} from 'react-native';
 import {
+  Assets,
   Colors,
   Spacings,
   View,
@@ -12,11 +13,10 @@ import {
   FieldContextType,
   TextFieldProps,
   SegmentedControl,
-  Assets
+  Icon
 } from 'react-native-ui-lib';
 const {KeyboardAwareInsetsView} = Keyboard;
 const priceFormatter = Intl.NumberFormat('en-US');
-const validationIcon = require('../../assets/icons/exclamationFillSmall.png');
 
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextFieldRef>();
@@ -167,7 +167,7 @@ export default class TextFieldScreen extends Component {
   };
 
   renderValidationExample() {
-    const {errorPosition} = this.state;
+    const {errorPosition, preset} = this.state;
 
     return (
       <>
@@ -178,7 +178,7 @@ export default class TextFieldScreen extends Component {
             <SegmentedControl segments={[{label: 'Bottom'}, {label: 'Top'}]} onChangeIndex={this.onChangeIndexValidation}/>
           </View>
         </View>
-        
+
         <TextField
           value={this.state.value}
           onChangeText={value => this.setState({value})}
@@ -204,7 +204,9 @@ export default class TextFieldScreen extends Component {
             containerStyle={{flex: 1}}
             validationMessagePosition={errorPosition}
             helperText={'Enter first and last name'}
-            validationIcon={{source: validationIcon, style: {marginTop: 1}}}
+            validationIcon={{source: Assets.icons.demo.exclamation, style: {marginTop: 1}}}
+            topTrailingAccessory={<Icon source={Assets.icons.demo.info} size={16}/>}
+            preset={preset}
           />
           <Button
             outline
@@ -351,6 +353,26 @@ export default class TextFieldScreen extends Component {
     );
   }
 
+  renderClearButtonExample() {
+    return (
+      <>
+        <Text h3 marginB-s3>
+          Clear Button
+        </Text>
+        
+        <TextField
+          label="Description"
+          placeholder="Enter text..."
+          showClearButton
+          value={this.state.value}
+          onChangeText={value => this.setState({value})}
+          trailingAccessory={<Icon source={Assets.icons.demo.search}/>}
+          // multiline
+        />
+      </>
+    );
+  }
+
   renderHintExample() {
     return (
       <>
@@ -414,15 +436,16 @@ export default class TextFieldScreen extends Component {
 
   render() {
     return (
-      <ScrollView keyboardShouldPersistTaps="always" showsVerticalScrollIndicator={false}>
-        <View flex padding-page>
+      <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always">
+        <View padding-page>
           <Text h1 marginB-s4>TextField</Text>
 
           {this.renderDefaultExample()}
           {this.renderPresetExample()}
           {this.renderPlaceholdersExample()}
           {this.renderValidationExample()}
           {this.renderHintExample()}
+          {this.renderClearButtonExample()}
           {this.renderCherCounterExample()}
           {this.renderAccessoriesExample()}
           {this.renderStateColorsExample()}

src/assets/icons/index.js

@@ -16,5 +16,8 @@ export const icons = {
   },
   get x() {
     return require('./x.png');
+  },
+  get xFlat() {
+    return require('./xFlat.png');
   }
 };

src/assets/icons/xFlat.png

@@ -1,6 +1,6 @@
+import _ from 'lodash';
 import React, {useContext} from 'react';
 import {StyleSheet} from 'react-native';
-import _ from 'lodash';
 import Text from '../text';
 import FieldContext from './FieldContext';
 import {CharCounterProps} from './types';

src/assets/icons/[email protected]

@@ -0,0 +1,71 @@
+import React, {useContext, useCallback, useMemo} from 'react';
+import {StyleSheet} from 'react-native';
+import {useAnimatedStyle, useSharedValue, withSpring} from 'react-native-reanimated';
+import {useDidUpdate} from '../../hooks';
+import Assets from '../../assets';
+import {Spacings, Colors} from '../../style';
+import View from '../view';
+import Button from '../button';
+import FieldContext from './FieldContext';
+import {TextFieldProps} from './types';
+
+const hitSlop = {top: 20, bottom: 20, left: 20, right: 20};
+const NON_VISIBLE_POSITION = 100;
+const VISIBLE_POSITION = 0;
+const SPRING_ANIMATION_CONFIG = {velocity: 300, damping: 20, stiffness: 300, mass: 0.8};
+
+const ClearButton = ({testID, onClear, onChangeText}: Pick<TextFieldProps, 'onClear' | 'testID' | 'onChangeText'>) => {
+  const {hasValue} = useContext(FieldContext);
+  const animatedValue = useSharedValue(hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION);
+
+  // @ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{translateX: animatedValue.value}, {translateY: 0}]
+    };
+  });
+
+  const style = useMemo(() => [styles.container, animatedStyle], [animatedStyle]);
+
+  const animate = useCallback(() => {
+    const toValue = hasValue ? VISIBLE_POSITION : NON_VISIBLE_POSITION;
+    animatedValue.value = withSpring(toValue, SPRING_ANIMATION_CONFIG);
+  },
+  [animatedValue, hasValue]);
+
+  useDidUpdate(() => {
+    animate();
+  }, [hasValue, animate]);
+
+  const clear = () => {
+    onChangeText?.('');
+    onClear?.();
+  };
+
+  return (
+    //@ts-expect-error should be fixed in version 3.5 (https://github.com/software-mansion/react-native-reanimated/pull/4881)
+    <View reanimated style={style}>
+      <Button
+        link
+        iconSource={Assets.icons.xFlat}
+        iconStyle={styles.clearIcon}
+        onPress={clear}
+        hitSlop={hitSlop}
+        accessible={hasValue}
+        accessibilityLabel={'clear'}
+        testID={testID}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginHorizontal: Spacings.s3
+  },
+  clearIcon: {
+    tintColor: Colors.$textNeutralLight
+  }
+});
+
+export default ClearButton;