fix: change UI when only one country on PhoneInput

nexxtway · Sep 15, 2020 · 2751710 · 2751710
1 parent 7bb048b
commit 2751710
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/src/components/PhoneInput/index.js b/src/components/PhoneInput/index.js
@@ -9,6 +9,8 @@ import ErrorText from '../Input/styled/errorText';
 import {
     StyledInputContainer,
     StyledInput,
+    StyledIndicator,
+    StyledTrigger,
     StyledFlagContainer,
     StyledCountryCode,
     StyledIconContainer,
@@ -23,7 +25,6 @@ import {
     useHandleCountryChange,
 } from './hooks';
 import CountriesDropdown from './countriesDropdown';
-import VariantRenderIf from './variantRenderIf';
 
 /**
  * phone input are used for freeform data entry.
@@ -118,6 +119,10 @@ const PhoneInput = React.forwardRef((props, ref) => {
     const isFocus = focusIndex > -1;
     const formattedCountryCode = `(${countryCode})`;
 
+    const isReadOnly = readOnly && !disabled;
+    const hasTrigger = !isReadOnly && countries.length > 1;
+    const isOnlyCountry = !isReadOnly && countries.length === 1;
+
     return (
         <StyledContainer id={id} ref={containerRef} className={className} style={style}>
             <Label
@@ -136,21 +141,35 @@ const PhoneInput = React.forwardRef((props, ref) => {
                 error={error}
                 isFocus={isFocus}
             >
-                <RenderIf isTrue={readOnly && !disabled}>
+                <RenderIf isTrue={isReadOnly}>
                     <StyledFlagContainer readOnly>{flagIcon}</StyledFlagContainer>
                 </RenderIf>
-                <VariantRenderIf
-                    isTrue
-                    ref={triggerRef}
-                    onClick={handleClick}
-                    onFocus={event => handleFocus(event, 0)}
-                    onBlur={handleBlur}
-                    tabIndex={tabIndex}
-                    disabled={disabled}
-                    error={error}
-                    countries={countriesProps}
-                    flagIcon={flagIcon}
-                />
+                <RenderIf isTrue={hasTrigger}>
+                    <StyledTrigger
+                        ref={triggerRef}
+                        onClick={handleClick}
+                        onFocus={event => handleFocus(event, 0)}
+                        onBlur={handleBlur}
+                        tabIndex={tabIndex}
+                        disabled={disabled}
+                    >
+                        <StyledFlagContainer disabled={disabled}>
+                            {flagIcon}
+                            <StyledIndicator error={error} disabled={disabled} />
+                        </StyledFlagContainer>
+                    </StyledTrigger>
+                </RenderIf>
+                <RenderIf isTrue={isOnlyCountry}>
+                    <StyledTrigger
+                        ref={triggerRef}
+                        onFocus={event => handleFocus(event, 0)}
+                        onBlur={handleBlur}
+                        tabIndex={tabIndex}
+                        disabled={disabled}
+                    >
+                        <StyledFlagContainer disabled={disabled}>{flagIcon}</StyledFlagContainer>
+                    </StyledTrigger>
+                </RenderIf>
                 <StyledCountryCode>{formattedCountryCode}</StyledCountryCode>
                 <StyledInput
                     id={inputId}

diff --git a/src/components/PhoneInput/readme.md b/src/components/PhoneInput/readme.md
@@ -52,7 +52,9 @@ const Form = () => {
             placeholder="Enter your phone number"
             onChange={setPhone}
             value={phone}
-            countries=''
+            countries={[]}
+
+
         />
     );
 };

diff --git a/src/components/PhoneInput/variantRenderIf.js b/src/components/PhoneInput/variantRenderIf.js
@@ -4,35 +4,31 @@ import PropTypes from 'prop-types';
 import { StyledTrigger, StyledFlagContainer, StyledIndicator } from './styled';
 
 export default function VariantRenderIf(props) {
-    const { isTrue, ref, onClick, onBlur, tabIndex, disabled, error, countries, flagIcon } = props;
+    const { ref, onClick, onBlur, tabIndex, disabled, error, countries, flagIcon } = props;
 
-    if (typeof countries === 'string') {
+    if (countries.length === 1) {
         return (
             <StyledTrigger ref={ref} tabIndex={tabIndex} disabled={disabled}>
                 <StyledFlagContainer disabled={disabled}>{flagIcon}</StyledFlagContainer>
             </StyledTrigger>
         );
     }
-    if (isTrue) {
-        return (
-            <StyledTrigger
-                ref={ref}
-                onClick={onClick}
-                onBlur={onBlur}
-                tabIndex={tabIndex}
-                disabled={disabled}
-            >
-                <StyledFlagContainer disabled={disabled}>
-                    {flagIcon}
-                    <StyledIndicator error={error} disabled={disabled} />
-                </StyledFlagContainer>
-            </StyledTrigger>
-        );
-    }
-    return null;
+    return (
+        <StyledTrigger
+            ref={ref}
+            onClick={onClick}
+            onBlur={onBlur}
+            tabIndex={tabIndex}
+            disabled={disabled}
+        >
+            <StyledFlagContainer disabled={disabled}>
+                {flagIcon}
+                <StyledIndicator error={error} disabled={disabled} />
+            </StyledFlagContainer>
+        </StyledTrigger>
+    );
 }
 VariantRenderIf.propTypes = {
-    isTrue: PropTypes.bool,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
     error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),