Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit a1d2b38

Browse files
yagopvyagopv
authored
Fix <AddressInput /> component (#188)
1 parent 59b0080 commit a1d2b38

File tree

10 files changed

+165
-107
lines changed

10 files changed

+165
-107
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gnosis.pm/safe-react-components",
3-
"version": "1.0.0",
3+
"version": "1.0.1",
44
"description": "Gnosis UI components",
55
"main": "dist/index.min.js",
66
"typings": "dist/index.d.ts",

‎src/inputs/AddressInput/index.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,12 @@ function AddressInput({
5151
...rest
5252
}: AddressInputProps): ReactElement {
5353
const [isLoadingENSResolution, setIsLoadingENSResolution] = useState(false);
54-
const [inputValue, setInputValue] = useState('');
55-
const defaulInputValue = addPrefix(address, networkPrefix, showNetworkPrefix);
56-
const inputRef = useRef({ value: defaulInputValue });
54+
const defaultInputValue = addPrefix(
55+
address,
56+
networkPrefix,
57+
showNetworkPrefix
58+
);
59+
const inputRef = useRef({ value: defaultInputValue });
5760
const throttle = useThrottle();
5861

5962
// we checksum & include the network prefix in the input if showNetworkPrefix is set to true
@@ -134,7 +137,6 @@ function AddressInput({
134137
);
135138

136139
onChangeAddress(checksumAddress);
137-
setInputValue(checksumAddress);
138140
},
139141
[networkPrefix, onChangeAddress]
140142
);
@@ -151,7 +153,7 @@ function AddressInput({
151153

152154
const isLoading = isLoadingENSResolution || showLoadingSpinner;
153155

154-
const [shrink, setshrink] = useState(!!defaulInputValue);
156+
const [shrink, setshrink] = useState(!!defaultInputValue);
155157

156158
useEffect(() => {
157159
setshrink(!!inputRef.current?.value);
@@ -163,7 +165,6 @@ function AddressInput({
163165
hiddenLabel={hiddenLabel && !shrink}
164166
disabled={disabled || isLoadingENSResolution}
165167
onChange={onChange}
166-
value={inputValue}
167168
InputProps={{
168169
...InputProps,
169170
// if isLoading we show a custom loader adornment

‎src/inputs/Select/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ function Select({
4444
onItemClick,
4545
fallbackImage,
4646
fullWidth,
47+
disabled,
4748
...rest
4849
}: SelectProps): React.ReactElement {
4950
const [open, setOpen] = React.useState(false);
@@ -72,8 +73,12 @@ function Select({
7273
};
7374

7475
return (
75-
<StyledFormControl variant="outlined" fullWidth={fullWidth}>
76-
<InputLabel error={!!error}>
76+
<StyledFormControl
77+
variant="outlined"
78+
fullWidth={fullWidth}
79+
error={hasError}
80+
disabled={disabled}>
81+
<InputLabel error={hasError} disabled={disabled}>
7782
{showErrorsInTheLabel && hasError ? error : label}
7883
</InputLabel>
7984
<StyledSelect
@@ -88,6 +93,7 @@ function Select({
8893
onChange={handleChange}
8994
label={id ? id : 'generic-select'}
9095
variant="outlined"
96+
disabled={disabled}
9197
{...rest}>
9298
{items.map((i) => {
9399
return (

‎src/inputs/TextFieldInput/TextFieldInput.stories.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,3 +193,18 @@ export const FullWidthTextField = (): React.ReactElement => {
193193
</div>
194194
);
195195
};
196+
197+
export const HelperText = (): React.ReactElement => {
198+
const [value, setValue] = useState<string>('');
199+
return (
200+
<TextFieldInput
201+
id="standard-TextFieldInput"
202+
label="TextFieldInput"
203+
name="TextFieldInput"
204+
placeholder="TextFieldInput with default values"
205+
value={value}
206+
helperText="This is a helper text"
207+
onChange={(e) => setValue(e.target.value)}
208+
/>
209+
);
210+
};

‎src/inputs/TextFieldInput/index.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import React, { ReactElement } from 'react';
22
import TextFieldMui, { TextFieldProps } from '@material-ui/core/TextField';
33
import styled from 'styled-components';
4-
import {
5-
errorStyles,
6-
inputLabelStyles,
7-
inputStyles,
8-
StyledTextFieldProps,
9-
} from '../styles';
4+
import { errorStyles, inputLabelStyles, inputStyles } from '../styles';
105

116
export type TextFieldInputProps = {
127
id?: string;
@@ -37,12 +32,11 @@ function TextFieldInput({
3732
name={name}
3833
label={showErrorsInTheLabel && hasError ? error : label}
3934
value={value}
40-
helperText={hasError ? error : helperText}
35+
helperText={!showErrorsInTheLabel && hasError ? error : helperText}
4136
error={hasError}
4237
color="primary"
4338
variant="outlined"
4439
hiddenLabel={hiddenLabel}
45-
showErrorsInTheLabel={showErrorsInTheLabel}
4640
InputLabelProps={{
4741
...rest.InputLabelProps,
4842
shrink: hiddenLabel || undefined,
@@ -52,7 +46,7 @@ function TextFieldInput({
5246
);
5347
}
5448

55-
const TextField = styled((props: StyledTextFieldProps) => (
49+
const TextField = styled((props: TextFieldProps) => (
5650
<TextFieldMui {...props} />
5751
))<TextFieldProps>`
5852
&& {

‎src/inputs/styles.ts‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import { TextFieldProps } from '@material-ui/core';
22
import { css } from 'styled-components';
33

4-
export type StyledTextFieldProps = {
5-
showErrorsInTheLabel?: boolean | undefined;
6-
} & TextFieldProps;
7-
8-
export const inputLabelStyles = css<StyledTextFieldProps>`
4+
export const inputLabelStyles = css<TextFieldProps>`
95
&:hover {
106
.MuiInputLabel-root {
117
&.MuiInputLabel-shrink:not(.Mui-focused):not(.Mui-disabled) {
@@ -47,7 +43,7 @@ export const inputLabelStyles = css<StyledTextFieldProps>`
4743
}
4844
`;
4945

50-
export const inputStyles = css<StyledTextFieldProps>`
46+
export const inputStyles = css<TextFieldProps>`
5147
.MuiOutlinedInput-root {
5248
font-family: ${({ theme }) => theme.fonts.fontFamily};
5349
color: ${({ theme }) => theme.colors.inputText};
@@ -72,11 +68,13 @@ export const inputStyles = css<StyledTextFieldProps>`
7268
display: ${({ hiddenLabel }) => (hiddenLabel ? 'none' : 'block')};
7369
}
7470
}
71+
7572
&:hover {
7673
.MuiOutlinedInput-notchedOutline {
7774
border-color: ${({ theme }) => theme.colors.primary};
7875
}
7976
}
77+
8078
&.Mui-focused {
8179
.MuiOutlinedInput-notchedOutline {
8280
border-color: ${({ theme }) => theme.colors.inputFilled};
@@ -93,9 +91,15 @@ export const inputStyles = css<StyledTextFieldProps>`
9391
}
9492
}
9593
}
94+
.MuiFormLabel-filled
95+
+ .MuiOutlinedInput-root:not(:hover):not(.Mui-disabled)
96+
.MuiOutlinedInput-notchedOutline {
97+
border-color: ${({ theme, error }) =>
98+
error ? theme.colors.error : theme.colors.inputFilled};
99+
}
96100
`;
97101

98-
export const errorStyles = css<StyledTextFieldProps>`
102+
export const errorStyles = css<TextFieldProps>`
99103
.Mui-error {
100104
&:hover,
101105
.Mui-focused {
@@ -106,11 +110,5 @@ export const errorStyles = css<StyledTextFieldProps>`
106110
.MuiOutlinedInput-notchedOutline {
107111
border-color: ${({ theme }) => theme.colors.error};
108112
}
109-
110-
.MuiFormHelperText-root.Mui-error {
111-
font-family: ${({ theme }) => theme.fonts.fontFamily};
112-
${({ error, showErrorsInTheLabel }) =>
113-
error && showErrorsInTheLabel ? `display: none` : ''}
114-
}
115113
}
116114
`;

‎tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Disabled 1`] = `
77
onSubmit={[Function]}
88
>
99
<div
10-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe deKauR"
10+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe kexQVt"
1111
spellCheck={false}
1212
>
1313
<label
@@ -36,7 +36,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Disabled 1`] = `
3636
placeholder="Ethereum address"
3737
required={false}
3838
type="text"
39-
value=""
4039
/>
4140
<fieldset
4241
aria-hidden={true}
@@ -62,7 +61,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Loading 1`] = `
6261
onSubmit={[Function]}
6362
>
6463
<div
65-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
64+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
6665
spellCheck={false}
6766
>
6867
<label
@@ -91,7 +90,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Loading 1`] = `
9190
placeholder="Ethereum address"
9291
required={false}
9392
type="text"
94-
value=""
9593
/>
9694
<div
9795
className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
@@ -146,7 +144,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Adornment 1`] = `
146144
onSubmit={[Function]}
147145
>
148146
<div
149-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
147+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
150148
spellCheck={false}
151149
>
152150
<label
@@ -175,7 +173,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With Adornment 1`] = `
175173
placeholder="Ethereum address"
176174
required={false}
177175
type="text"
178-
value=""
179176
/>
180177
<div
181178
className="MuiInputAdornment-root MuiInputAdornment-positionEnd"
@@ -267,7 +264,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
267264
}
268265
>
269266
<div
270-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
267+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
271268
spellCheck={false}
272269
>
273270
<label
@@ -297,7 +294,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
297294
placeholder="Type safe.test to check ENS resolution"
298295
required={false}
299296
type="text"
300-
value=""
301297
/>
302298
<fieldset
303299
aria-hidden={true}
@@ -330,7 +326,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
330326
}
331327
>
332328
<div
333-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe ciMulG"
329+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe flGugG"
334330
>
335331
<label
336332
className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -402,7 +398,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Errors 1`] = `
402398
onSubmit={[Function]}
403399
>
404400
<div
405-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
401+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe fynudp"
406402
spellCheck={false}
407403
>
408404
<label
@@ -432,7 +428,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With Errors 1`] = `
432428
placeholder="Ethereum address"
433429
required={false}
434430
type="text"
435-
value=""
436431
/>
437432
<fieldset
438433
aria-hidden={true}
@@ -464,7 +459,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Valida
464459
onSubmit={[Function]}
465460
>
466461
<div
467-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
462+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
468463
spellCheck={false}
469464
>
470465
<label
@@ -493,7 +488,6 @@ exports[`Storyshots Inputs/AddressInput Address Input With Simple Address Valida
493488
placeholder="Ethereum address"
494489
required={false}
495490
type="text"
496-
value=""
497491
/>
498492
<fieldset
499493
aria-hidden={true}
@@ -529,7 +523,7 @@ exports[`Storyshots Inputs/AddressInput Address Input Without Prefix 1`] = `
529523
onSubmit={[Function]}
530524
>
531525
<div
532-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
526+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
533527
spellCheck={false}
534528
>
535529
<label
@@ -558,7 +552,6 @@ exports[`Storyshots Inputs/AddressInput Address Input Without Prefix 1`] = `
558552
placeholder="Ethereum address"
559553
required={false}
560554
type="text"
561-
value=""
562555
/>
563556
<fieldset
564557
aria-hidden={true}
@@ -612,8 +605,7 @@ exports[`Storyshots Inputs/AddressInput Safe Address Input Validation 1`] = `
612605
className="MuiTypography-root sc-fbyfCU iNHYoN MuiTypography-body1"
613606
/>
614607
<div
615-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
616-
showErrorsInTheLabel={false}
608+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
617609
spellCheck={false}
618610
>
619611
<label
@@ -643,7 +635,6 @@ exports[`Storyshots Inputs/AddressInput Safe Address Input Validation 1`] = `
643635
placeholder="Type the valid safe address"
644636
required={false}
645637
type="text"
646-
value=""
647638
/>
648639
<fieldset
649640
aria-hidden={true}
@@ -686,7 +677,7 @@ exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = `
686677
Network Settings:
687678
</p>
688679
<div
689-
className="MuiFormControl-root sc-kLwhqv UVNmp"
680+
className="MuiFormControl-root sc-kLwhqv hCASnh"
690681
>
691682
<label
692683
className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled"
@@ -766,7 +757,7 @@ exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = `
766757
}
767758
>
768759
<div
769-
className="MuiFormControl-root MuiTextField-root sc-gWXbKe BaIDq"
760+
className="MuiFormControl-root MuiTextField-root sc-gWXbKe eRauOW"
770761
spellCheck={false}
771762
>
772763
<label
@@ -795,7 +786,6 @@ exports[`Storyshots Inputs/AddressInput Simple Address Input 1`] = `
795786
placeholder="Ethereum address"
796787
required={false}
797788
type="text"
798-
value=""
799789
/>
800790
<fieldset
801791
aria-hidden={true}

0 commit comments

Comments
 (0)