Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: input validation #1018

Merged
merged 1 commit into from
Feb 7, 2024
Merged

fix: input validation #1018

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 2 additions & 16 deletions src/Input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,6 @@
normalized?: boolean;
/** Utilizzare per mostrare il successo nella validazione del valore nel campo Input */
valid?: boolean;
/** Utilizzare per mostrare il fallimento nella validazione del valore nel campo Input */
invalid?: boolean;
innerRef?: Ref<HTMLInputElement>;
/** Utilizzare per mostrare testo statico non modificabile. */
plaintext?: boolean;
Expand All @@ -96,11 +94,6 @@
tag?: ElementType;
/** Classi aggiuntive da usare per il componente Input */
className?: string;
/**
* Usare "valid" o "invalid" per indicare lo stato del componente.
* @deprecated
*/
state?: string;
/**
* Usare "plaintext".
* @deprecated
Expand All @@ -116,7 +109,6 @@
className,
cssModule,
type = 'text',
state,
tag,
addon,
addonText,
Expand Down Expand Up @@ -165,7 +157,7 @@
}
}, [value]);

let { bsSize, valid, invalid, ...rest } = attributes;
let { bsSize, valid, ...rest } = attributes;

const Tag = getTag({ tag, plaintext, staticInput, type });
addon = addonText != null ? true : addon;
Expand All @@ -179,12 +171,7 @@
},
cssModule
);
const validationTextControlClass = getValidationTextControlClass({ valid, invalid }, cssModule);

if (state && valid == null && invalid == null) {
invalid = state === 'danger';
valid = state === 'success';
}
const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);

const extraAttributes: {
type?: InputType;
Expand Down Expand Up @@ -228,7 +215,6 @@
type,
{
valid,
invalid,
bsSize,
placeholder,
value,
Expand Down Expand Up @@ -305,9 +291,9 @@
'input-group': true,
'input-number': true,
disabled: rest.disabled,
'input-number-percentage': type == 'percentage',

Check warning on line 294 in src/Input/Input.tsx

View workflow job for this annotation

GitHub Actions / coverage 

Expected '===' and instead saw '=='
'input-number-currency': type == 'currency',

Check warning on line 295 in src/Input/Input.tsx

View workflow job for this annotation

GitHub Actions / coverage 

Expected '===' and instead saw '=='
'input-number-adaptive': type == 'adaptive'

Check warning on line 296 in src/Input/Input.tsx

View workflow job for this annotation

GitHub Actions / coverage 

Expected '===' and instead saw '=='
})}
style={{ width }}
ref={divResizeRef}
Expand Down
6 changes: 1 addition & 5 deletions src/Input/TextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,6 @@ export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
normalized?: boolean;
/** Utilizzare per mostrare il successo nella validazione del valore nel campo TextArea */
valid?: boolean;
/** Utilizzare per mostrare il fallimento nella validazione del valore nel campo TextArea */
invalid?: boolean;
innerRef?: Ref<HTMLTextAreaElement>;
/** Oggetto contenente la nuova mappatura per le classi CSS. */
cssModule?: CSSModule;
Expand All @@ -46,7 +44,6 @@ export const TextArea = ({
value,
wrapperClassName: originalWrapperClass,
valid,
invalid,
testId,
...attributes
}: TextAreaProps) => {
Expand All @@ -55,7 +52,7 @@ export const TextArea = ({
onBlur: attributes.onBlur
});

const validationTextControlClass = getValidationTextControlClass({ valid, invalid }, cssModule);
const validationTextControlClass = getValidationTextControlClass({ valid }, cssModule);

const extraAttributes: { ['aria-describedby']?: string } = {};

Expand All @@ -71,7 +68,6 @@ export const TextArea = ({
'textarea',
{
valid,
invalid,
placeholder,
value,
label,
Expand Down
11 changes: 5 additions & 6 deletions src/Input/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
import { mapToCssModules } from '../utils';
import type { InputProps } from './Input';

type ValidationProps = Pick<InputProps, 'valid' | 'invalid'>;
type ValidationProps = Pick<InputProps, 'valid'>;
type TypeProps = Pick<InputProps, 'plaintext' | 'type'> & {
staticInput?: boolean;
};
Expand All @@ -30,11 +30,11 @@
return mapToCssModules(getFormControlClassInternal(props), cssModule);
}

export function getValidationTextControlClass({ invalid }: ValidationProps, cssModule?: CSSModule) {
export function getValidationTextControlClass({ valid }: ValidationProps, cssModule?: CSSModule) {
return mapToCssModules(
classNames({
'form-text': true,
'form-feedback just-validate-error-label': invalid
'form-feedback just-validate-error-label': valid == false

Check warning on line 37 in src/Input/utils.tsx

View workflow job for this annotation

GitHub Actions / coverage 

Expected '===' and instead saw '=='
}),
cssModule
);
Expand Down Expand Up @@ -68,7 +68,6 @@
{
isFocused,
valid,
invalid,
bsSize,
placeholder,
value,
Expand All @@ -91,7 +90,7 @@
classNames(
className,
{
'is-invalid': invalid,
'is-invalid': valid == false,

Check warning on line 93 in src/Input/utils.tsx

View workflow job for this annotation

GitHub Actions / coverage 

Expected '===' and instead saw '=='
'just-validate-success-field': valid,
[`form-control-${bsSize}`]: bsSize
},
Expand All @@ -104,7 +103,7 @@
classNames(
{
'valid-feedback': valid,
'invalid-feedback form-feedback just-validate-error-label': invalid
'invalid-feedback form-feedback just-validate-error-label': valid == false

Check warning on line 106 in src/Input/utils.tsx

View workflow job for this annotation

GitHub Actions / coverage 

Expected '===' and instead saw '=='
},
validationTextControlClass
),
Expand Down
25 changes: 15 additions & 10 deletions stories/Form/FormValidation.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,15 @@ export default {
export const ValidazioneBase = () => (
<div>
<Input label='Valid Input' valid />
<Input label='Invalid Input' invalid />
<Input label='Invalid Input' valid={false} />
<Input value='Mario' label='First name' validationText='Validated!' valid />
<Input label='Username' validationText='Please choose a username.' invalid />
<Input label='Username' infoText='Username of your account' validationText='Please choose a username.' invalid />
<Input label='Username' validationText='Please choose a username.' valid={false} />
<Input
label='Username'
infoText='Username of your account'
validationText='Please choose a username.'
valid={false}
/>
</div>
);

Expand Down Expand Up @@ -59,7 +64,7 @@ export const ValidazioneCompleta = () => {
value={username}
label='Username'
validationText='Questo campo è richiesto'
invalid
valid={false}
onChange={(e) => setUsername(e.target.value)}
/>
</FormGroup>
Expand All @@ -82,7 +87,7 @@ export const ValidazioneCompleta = () => {
type='date'
label='Date picker'
validationText='Questo campo è richiesto'
invalid
valid={false}
/>
</FormGroup>
<FormGroup className='col-md-6 mb-6'>
Expand All @@ -91,7 +96,7 @@ export const ValidazioneCompleta = () => {
type='time'
label='Time picker'
validationText='Questo campo è richiesto'
invalid
valid={false}
/>
</FormGroup>
</Row>
Expand All @@ -103,7 +108,7 @@ export const ValidazioneCompleta = () => {
value={city}
label='Città'
validationText='Questo campo è richiesto'
invalid
valid={false}
onChange={(e) => setCity(e.target.value)}
/>
</FormGroup>
Expand All @@ -114,7 +119,7 @@ export const ValidazioneCompleta = () => {
value={province}
label='Provincia'
validationText='Per favore inserisci un nome di provincia valida.'
invalid
valid={false}
onChange={(e) => setProvince(e.target.value)}
/>
</FormGroup>
Expand All @@ -126,7 +131,7 @@ export const ValidazioneCompleta = () => {
value={cap}
label='CAP (5 cifre)'
validationText='Questo campo è richiesto'
invalid
valid={false}
onChange={(e) => setCap(e.target.value)}
/>
</FormGroup>
Expand All @@ -139,7 +144,7 @@ export const ValidazioneCompleta = () => {
type='checkbox'
checked={termsAndConditions}
onChange={() => setTermsAndConditions(!termsAndConditions)}
invalid={!termsAndConditions}
valid={termsAndConditions}
/>
<Label for='termsAndConditions' check>
Accetto i termini e condizioni
Expand Down
Loading