fix: change UI when restricting to only one country on PhoneInput #1816
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Bug Fixes
Contributors@gtallesb, @TahimiLeonBravo, @maxxgreene Commit-Lint commandsYou can trigger Commit-Lint actions by commenting on this PR:
|
![codeclimate[bot]](https://avatars.githubusercontent.com/in/9403?s=60&v=4){kind=small}
| import { StyledTrigger, StyledFlagContainer, StyledIndicator } from './styled'; | ||
|
|
||
| export default function VariantRenderIf(props) { | ||
| const { isTrue, ref, onClick, onBlur, tabIndex, disabled, error, countries, flagIcon } = props; |
There was a problem hiding this comment.
Similar blocks of code found in 4 locations. Consider refactoring.
yvmunayev
reviewed
Sep 11, 2020
src/components/PhoneInput/index.js
Outdated
Comment on lines
142
to
153
| <VariantRenderIf | ||
| isTrue | ||
| ref={triggerRef} | ||
| onClick={handleClick} | ||
| onFocus={event => handleFocus(event, 0)} | ||
| onBlur={handleBlur} | ||
| tabIndex={tabIndex} | ||
| disabled={disabled} | ||
| error={error} | ||
| countries={countriesProps} | ||
| flagIcon={flagIcon} | ||
| /> |
There was a problem hiding this comment.
I think the solution can be simpler something like this:
const isReadOnly = readOnly && !disabled;
const hasTrigger = !isReadOnly && countries.length > 1;
const isOnlyCountry = !isReadOnly && countries.length === 1;
<RenderIf isTrue={isReadOnly}>
<StyledFlagContainer readOnly>{flagIcon}</StyledFlagContainer>
</RenderIf>
<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}>
<StyledFlagContainer disabled={disabled}>{flagIcon}</StyledFlagContainer>
</RenderIf>
src/components/PhoneInput/readme.md
Outdated
| placeholder="Enter your phone number" | ||
| onChange={setPhone} | ||
| value={phone} | ||
| countries='' |
There was a problem hiding this comment.
countries has to be an array
…to fix-changing-UI-one-country-on-PhoneInput
…to fix-changing-UI-one-country-on-PhoneInput
…to fix-changing-UI-one-country-on-PhoneInput
| import { StyledTrigger, StyledFlagContainer, StyledIndicator } from './styled'; | ||
|
|
||
| export default function VariantRenderIf(props) { | ||
| const { ref, onClick, onBlur, tabIndex, disabled, error, countries, flagIcon } = props; |
There was a problem hiding this comment.
Similar blocks of code found in 10 locations. Consider refactoring.
| ); | ||
| } | ||
| return ( | ||
| <StyledTrigger |
There was a problem hiding this comment.
Similar blocks of code found in 2 locations. Consider refactoring.
reiniergs
reviewed
Sep 16, 2020
| <Form /> | ||
| </Container> | ||
|
|
||
| ``` |
There was a problem hiding this comment.
remove unnecessary empty lines ^^
reiniergs
reviewed
Sep 16, 2020
src/components/PhoneInput/readme.md
Outdated
| placeholder="Enter your phone number" | ||
| onChange={setPhone} | ||
| value={phone} | ||
| countries={[]} |
There was a problem hiding this comment.
it's an example with a single selection, right?? I see empty array []
There was a problem hiding this comment.
I think when the countries receive an empty array it should render all the countries
…to fix-changing-UI-one-country-on-PhoneInput
TahimiLeonBravo
requested changes
Sep 19, 2020
src/components/PhoneInput/readme.md
Outdated
| placeholder="Enter your phone number" | ||
| onChange={setPhone} | ||
| value={phone} | ||
| countries={[]} |
There was a problem hiding this comment.
I think when the countries receive an empty array it should render all the countries
…to fix-changing-UI-one-country-on-PhoneInput
…ithub.com/nexxtway/react-rainbow into fix-changing-UI-one-country-on-PhoneInput
maxxgreene
reviewed
Sep 21, 2020
|
Code Climate has analyzed commit 287a5c1 and detected 0 issues on this pull request. View more on Code Climate. |
TahimiLeonBravo
deleted the
fix-changing-UI-one-country-on-PhoneInput
branch
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fix: #1649
Changes proposed in this PR:
-add new conditional component VariantRenderIf
-replace one of the RenderIf components with VariantRenderIf on index.js
-add a new interactive example passing the countries prop on .md
@nexxtway/react-rainbow