fix(ref): input ref

platformbuilders · Sep 21, 2021 · ff126d8 · ff126d8
1 parent e2d0660
commit ff126d8
Show file tree

Hide file tree

Showing 11 changed files with 1,260 additions and 1,993 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@platformbuilders/react-native-elements",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Platform Builders Shared Components Library For React Native",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/MaskedText/lib/text-input-mask.js b/src/components/MaskedText/lib/text-input-mask.js
@@ -1,10 +1,11 @@
+/* eslint-disable react/jsx-filename-extension */
 import React from 'react';
 import { TextInput } from 'react-native';
 import BaseTextComponent from './base-text-component';
 
 export default class TextInputMask extends BaseTextComponent {
   getElement() {
-    return this._inputElement;
+    return this.props.inputRef || this._inputElement;
   }
 
   _onChangeText(text) {
@@ -52,15 +53,7 @@ export default class TextInputMask extends BaseTextComponent {
 
     return (
       <Input
-        ref={(ref) => {
-          if (ref) {
-            this._inputElement = ref;
-
-            if (typeof this.props.refInput === 'function') {
-              this.props.refInput(ref);
-            }
-          }
-        }}
+        ref={this.getElement()}
         keyboardType={this._getKeyboardType()}
         {...this.props}
         {...customTextInputProps}

diff --git a/src/components/SearchInput/__tests__/Search.spec.tsx b/src/components/SearchInput/__tests__/Search.spec.tsx
@@ -12,7 +12,12 @@ describe('<Search />', () => {
     const onChange = jest.fn();
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
-        <Search id="test" accessibility="" onChange={onChange} />
+        <Search
+          inputRef="$text"
+          id="test"
+          accessibility=""
+          onChange={onChange}
+        />
       </ThemeProvider>,
     );
 
@@ -24,6 +29,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -40,6 +46,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -56,6 +63,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -72,6 +80,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -87,7 +96,13 @@ describe('<Search />', () => {
     const onChange = jest.fn();
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
-        <Search id="test" accessibility="" onChange={onChange} iconSize={24} />
+        <Search
+          inputRef="$text"
+          id="test"
+          accessibility=""
+          onChange={onChange}
+          iconSize={24}
+        />
       </ThemeProvider>,
     );
 
@@ -98,7 +113,13 @@ describe('<Search />', () => {
     const onChange = jest.fn();
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
-        <Search id="test" accessibility="" onChange={onChange} hasShadow />
+        <Search
+          inputRef="$text"
+          id="test"
+          accessibility=""
+          onChange={onChange}
+          hasShadow
+        />
       </ThemeProvider>,
     );
 
@@ -110,6 +131,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -126,6 +148,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -142,6 +165,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -158,6 +182,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -173,7 +198,13 @@ describe('<Search />', () => {
     const onChange = jest.fn();
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
-        <Search id="test" accessibility="" onChange={onChange} autoFocus />
+        <Search
+          inputRef="$text"
+          id="test"
+          accessibility=""
+          onChange={onChange}
+          autoFocus
+        />
       </ThemeProvider>,
     );
 
@@ -185,6 +216,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}
@@ -201,6 +233,7 @@ describe('<Search />', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
         <Search
+          inputRef="$text"
           id="test"
           accessibility=""
           onChange={onChange}

diff --git a/src/components/SearchInput/__tests__/__snapshots__/Search.spec.tsx.snap b/src/components/SearchInput/__tests__/__snapshots__/Search.spec.tsx.snap
@@ -103,6 +103,7 @@ exports[`<Search /> should render search 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={true}
           keyboardType="default"
           large={false}
@@ -311,6 +312,7 @@ exports[`<Search /> should render search with auto focus 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={false}
           keyboardType="default"
           large={false}
@@ -522,6 +524,7 @@ exports[`<Search /> should render search with custom container style 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={false}
           keyboardType="default"
           large={false}
@@ -730,6 +733,7 @@ exports[`<Search /> should render search with custom icon color 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={false}
           keyboardType="default"
           large={false}
@@ -941,6 +945,7 @@ exports[`<Search /> should render search with custom input style 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={true}
           keyboardType="default"
           large={false}
@@ -1149,6 +1154,7 @@ exports[`<Search /> should render search with custom placeholder 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={true}
           keyboardType="default"
           large={false}
@@ -1357,6 +1363,7 @@ exports[`<Search /> should render search with custom placeholder color 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={true}
           keyboardType="default"
           large={false}
@@ -1565,6 +1572,7 @@ exports[`<Search /> should render search with custom text style 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={false}
           keyboardType="default"
           large={false}
@@ -1775,6 +1783,7 @@ exports[`<Search /> should render search with icon size 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={false}
           keyboardType="default"
           large={false}
@@ -2029,6 +2038,7 @@ exports[`<Search /> should render search with left icon 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={false}
           keyboardType="default"
           large={false}
@@ -2193,6 +2203,7 @@ exports[`<Search /> should render search with padding 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={true}
           keyboardType="default"
           large={false}
@@ -2401,6 +2412,7 @@ exports[`<Search /> should render search with right icon 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={true}
           keyboardType="default"
           large={false}
@@ -2616,6 +2628,7 @@ exports[`<Search /> should render search with shadow 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={true}
           keyboardType="default"
           large={false}
@@ -2825,6 +2838,7 @@ exports[`<Search /> should render search with wrapper height 1`] = `
           centered={false}
           contrast={false}
           id="test"
+          inputRef="$text"
           isPlaceholder={false}
           keyboardType="default"
           large={false}

diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx
@@ -25,6 +25,7 @@ type Props = {
   autoFocus?: boolean;
   rightIconName?: string;
   leftIconName?: string;
+  inputRef?: any;
 };
 
 const SearchInput: React.FC<Props> = ({
@@ -49,12 +50,13 @@ const SearchInput: React.FC<Props> = ({
   autoFocus = false,
   rightIconName,
   leftIconName,
+  inputRef,
   ...rest
 }) => {
   const [searchText, setSearchText] = useState('');
   const [isSearching, setSearching] = useState(false);
   const [isFocused, setFocused] = useState(false);
-  const ref = useRef<HTMLInputElement>(null);
+  const ref = inputRef || useRef<HTMLInputElement>(null);
 
   const onPressIcon = (): void => {
     if (onIconPress) {

diff --git a/src/components/TextInput/MaskedTextInput/index.tsx b/src/components/TextInput/MaskedTextInput/index.tsx
@@ -19,7 +19,7 @@ const MaskedTextInput: FC<MaskedTextInputType> = ({
     accessibility={accessibility}
     testID={id || accessibility}
     accessibilityLabel={accessibility}
-    ref={inputRef}
+    inputRef={inputRef}
     contrast={contrast}
     multiline={multiline}
     type={maskType}

diff --git a/src/components/TextInput/__tests__/PasswordInput.spec.tsx b/src/components/TextInput/__tests__/PasswordInput.spec.tsx
@@ -10,7 +10,7 @@ describe('<PasswordInput />', () => {
   it('should render PasswordInput', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
-        <PasswordInput id="test" accessibility="test" />
+        <PasswordInput inputRef="$text" id="test" accessibility="test" />
       </ThemeProvider>,
     );
 

diff --git a/src/components/TextInput/__tests__/TextInput.spec.tsx b/src/components/TextInput/__tests__/TextInput.spec.tsx
@@ -10,7 +10,7 @@ describe('<TextInput />', () => {
   it('should render textinput', () => {
     const wrapper = renderer.create(
       <ThemeProvider theme={theme}>
-        <TextInput id="test" accessibility="" />
+        <TextInput inputRef="$text" id="test" accessibility="" />
       </ThemeProvider>,
     );
 

diff --git a/src/components/TextInput/__tests__/__snapshots__/PasswordInput.spec.tsx.snap b/src/components/TextInput/__tests__/__snapshots__/PasswordInput.spec.tsx.snap
@@ -74,6 +74,7 @@ exports[`<PasswordInput /> should render PasswordInput 1`] = `
         centered={false}
         contrast={false}
         id="test"
+        inputRef="$text"
         isPlaceholder={true}
         keyboardType="default"
         large={false}

diff --git a/src/components/TextInput/__tests__/__snapshots__/TextInput.spec.tsx.snap b/src/components/TextInput/__tests__/__snapshots__/TextInput.spec.tsx.snap
@@ -74,6 +74,7 @@ exports[`<TextInput /> should render textinput 1`] = `
         centered={false}
         contrast={false}
         id="test"
+        inputRef="$text"
         isPlaceholder={true}
         keyboardType="default"
         large={false}