dzeio/components
1
0
Fork 0
mirror of https://github.com/dzeiocom/components.git synced 2025-04-23 03:12:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: if this.props.value is not set onValue event is launched

Browse Source 
Signed-off-by: Avior <f.bouillon@aptatio.com>
This commit is contained in:
Florian Bouillon 2022-09-28 15:48:55 +02:00
parent a3f9cdf90c
commit fb72d5a040
Signed by: Florian Bouillon
GPG Key ID: E05B3A94178D3A7C
1 changed files with 44 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/Input/index.tsx
View File

@ -88,18 +88,19 @@ export default class Input extends React.PureComponent<Props, States> {
} }
// Handle default Value // Handle default Value
if (this.props.defaultValue) { if (this.props.defaultValue || this.props.value) {
const value = this.props.defaultValue ?? this.props.value ?? ''
if (!this.props.choices) { if (!this.props.choices) {
this.setState({displayedValue: this.props.defaultValue.toString()}) this.setState({displayedValue: value.toString()})
} else { } else {
const res = this.props.choices.find((it) => { const res = this.props.choices.find(
return typeof it === 'string' ? it === this.props.defaultValue : it.value === this.props.defaultValue (it) => typeof it === 'string' ? it === value : it.value === value
}) )
if (!res) { if (!res) {
if (this.props.strictChoices) { if (this.props.strictChoices) {
this.setState({value: '', displayedValue: ''}) this.setState({value: '', displayedValue: ''})
} else { } else {
this.setState({displayedValue: this.props.defaultValue.toString()}) this.setState({displayedValue: value.toString()})
} }
return return
} }
@ -123,7 +124,7 @@ export default class Input extends React.PureComponent<Props, States> {
public async componentDidUpdate(prevProps: Props, prevStates: States) { public async componentDidUpdate(prevProps: Props, prevStates: States) {
if (prevProps.value !== this.props.value) { if (prevProps.value !== this.props.value) {
this.onChange(this.props.value?.toString() ?? '') this.setState({ displayedValue: this.props.value?.toString(), value : this.props.value?.toString(), valueUpdate: true })
} }
if (prevStates.value !== this.state.value) { if (prevStates.value !== this.state.value) {
if (this.props.onValue) { if (this.props.onValue) {
@ -147,7 +148,7 @@ export default class Input extends React.PureComponent<Props, States> {
* return the real value of the field (depending if you a choices and the display value) * return the real value of the field (depending if you a choices and the display value)
* @returns the value of the field * @returns the value of the field
*/ */
public value(): string | number | readonly string[] | undefined { public value(): string | number | ReadonlyArray<string> | undefined {
return this.state?.value ?? this.state.displayedValue ?? this.props.value ?? undefined return this.state?.value ?? this.state.displayedValue ?? this.props.value ?? undefined
} }
@ -223,46 +224,46 @@ export default class Input extends React.PureComponent<Props, States> {
return ( return (
<> <>
{this.props.label && ( {this.props.label && (
<label className={css.label} htmlFor={this.props.id}>{this.props.label}</label> <label className={css.label} htmlFor={this.props.id}>{this.props.label}</label>
)}
<div
className={buildClassName(
css.parent,
[css.block, this.props.block]
)} )}
ref={this.parentRef} <div
> className={buildClassName(
css.parent,
[css.block, this.props.block]
)}
ref={this.parentRef}
>
{input as any} {input as any}
{/* Left Icon */} {/* Left Icon */}
{this.getIcon(iconLeft, 'left')} {this.getIcon(iconLeft, 'left')}
{/* Right Icon */} {/* Right Icon */}
{iconRight ? {iconRight ?
this.getIcon(iconRight, 'right') : this.getIcon(iconRight, 'right') :
(this.props.choices && !this.props.disabled && !this.props.disableAutoIcons) && ( this.props.choices && !this.props.disabled && !this.props.disableAutoIcons && (
<ChevronDown size="18" className={buildClassName(css.right, css.rotate)} /> <ChevronDown size="18" className={buildClassName(css.right, css.rotate)} />
) )
} }
{/* Helper text */} {/* Helper text */}
{(this.props.helper) && ( {this.props.helper && (
<Text>{this.props.helper}</Text> <Text>{this.props.helper}</Text>
)} )}
{/* List when this is an autocomplete */} {/* List when this is an autocomplete */}
{this.props.choices && ( {this.props.choices && (
<Menu <Menu
outline outline
hideWhenEmpty hideWhenEmpty
className={buildClassName(css.autocomplete, [css.reverse, !this.state.isInFirstPartOfScreen])} className={buildClassName(css.autocomplete, [css.reverse, !this.state.isInFirstPartOfScreen])}
items={this.state.list ?? []} items={this.state.list ?? []}
onClick={this.listSelection} onClick={this.listSelection}
/> />
)} )}
</div> </div>
</> </>
) )
} }
@ -294,7 +295,7 @@ export default class Input extends React.PureComponent<Props, States> {
} }
const v = this.state.displayedValue?.toLowerCase() const v = this.state.displayedValue?.toLowerCase()
return this.props.choices return this.props.choices
.map((item, index) => typeof item === 'string' ? ({item: {display: item, value: item}, index}) : {item, index}) .map((item, index) => typeof item === 'string' ? {item: {display: item, value: item}, index} : {item, index})
.filter( .filter(
(item) => this.props.displayAllOptions || !this.state.valueUpdate || !v || item.item.display.toLowerCase().includes(v) || item.item.display.toLowerCase().toLowerCase().includes(v) (item) => this.props.displayAllOptions || !this.state.valueUpdate || !v || item.item.display.toLowerCase().includes(v) || item.item.display.toLowerCase().toLowerCase().includes(v)
) )
@ -326,8 +327,8 @@ export default class Input extends React.PureComponent<Props, States> {
* @returns the icon * @returns the icon
*/ */
private getIcon(Icon: Icon | { private getIcon(Icon: Icon | {
icon: Icon; icon: Icon
transformer: (value: string) => string; transformer: (value: string) => string
} | undefined, position: 'left' | 'right') { } | undefined, position: 'left' | 'right') {
if (!Icon) { if (!Icon) {
return undefined return undefined