Support rendering leading Icon to TextField #815
Conversation
| @@ -57,6 +64,8 @@ export default class BasicTextFieldScreen extends Component { | |||
| error | |||
| } = this.state; | |||
|
|
|||
|
|
|||
|
|
|||
There was a problem hiding this comment.
I think it's a github issue..
anyway I remove those lines, maybe it'll fix it..
src/components/inputs/TextField.js
Outdated
| @@ -642,6 +649,7 @@ export default class TextField extends BaseInput { | |||
| {paddingTop: this.getTopPaddings()} | |||
| ]} | |||
| > | |||
| {leadingIcon && <Image {...leadingIcon} onLayout={this.onLeadingIconLayout}/>} | |||
There was a problem hiding this comment.
onLayout is never used / this. onLeadingIconLayout is never defined.
Maybe you meant to implement onLayout to allow floating placeholder? to avoid this?:
| const LEADING_ICON = { | ||
| source: Assets.icons.demo.search, | ||
| style: {marginRight: Spacings.s1} | ||
| }; |
There was a problem hiding this comment.
We don't want to supply a default margin and let it be overridden?
This forces to always supply a margin since it doesn't look good without it.
There was a problem hiding this comment.
I preferred to keep it clean as long as it doesn't look bad without custom styling.
This spacing is just for the sake of this example.
I assume we will pass something else in the private config
| return Boolean(floatingPlaceholder && !centered && !this.shouldShowTopError()); | ||
| const {floatingPlaceholder, centered, leadingIcon, prefix} = this.getThemeProps(); | ||
|
|
||
| return !leadingIcon && !prefix && Boolean(floatingPlaceholder && !centered && !this.shouldShowTopError()); |
There was a problem hiding this comment.
Why not to allow leading icon and floatingPlaceholder?. Missing onLayout implementation for this of course (See relevant comment above).
There was a problem hiding this comment.
I was about to add it, but it caused a weird UI issue where the floating placeholder transition looked bad.
Anyway, I discussed with Yulia and she agreed there's no reason for both of these features to come together.
src/components/inputs/TextField.js
Outdated
| @@ -216,7 +220,7 @@ export default class TextField extends BaseInput { | |||
| const translate = width / 2 - (width * FLOATING_PLACEHOLDER_SCALE) / 2; | |||
| this.setState({floatingPlaceholderTranslate: translate / FLOATING_PLACEHOLDER_SCALE}); | |||
| }; | |||
|
|
|||
leadingIconpropprefixorleadingIconwithfloatingPlaceholder(WOAUILIB-499)