hide some validation tooltips if fields are valid.
fixes https://github.com/vector-im/element-web/issues/9683
This commit is contained in:
parent
a7e6d8e7f0
commit
5bde16ccbb
2 changed files with 8 additions and 2 deletions
|
@ -250,6 +250,7 @@ export default class RegistrationForm extends React.Component {
|
||||||
|
|
||||||
validateEmailRules = withValidation({
|
validateEmailRules = withValidation({
|
||||||
description: () => _t("Use an email address to recover your account"),
|
description: () => _t("Use an email address to recover your account"),
|
||||||
|
hideDescriptionIfValid: true,
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
key: "required",
|
key: "required",
|
||||||
|
@ -326,6 +327,7 @@ export default class RegistrationForm extends React.Component {
|
||||||
|
|
||||||
validatePhoneNumberRules = withValidation({
|
validatePhoneNumberRules = withValidation({
|
||||||
description: () => _t("Other users can invite you to rooms using your contact details"),
|
description: () => _t("Other users can invite you to rooms using your contact details"),
|
||||||
|
hideDescriptionIfValid: true,
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
key: "required",
|
key: "required",
|
||||||
|
@ -356,6 +358,7 @@ export default class RegistrationForm extends React.Component {
|
||||||
|
|
||||||
validateUsernameRules = withValidation({
|
validateUsernameRules = withValidation({
|
||||||
description: () => _t("Use lowercase letters, numbers, dashes and underscores only"),
|
description: () => _t("Use lowercase letters, numbers, dashes and underscores only"),
|
||||||
|
hideDescriptionIfValid: true,
|
||||||
rules: [
|
rules: [
|
||||||
{
|
{
|
||||||
key: "required",
|
key: "required",
|
||||||
|
|
|
@ -33,6 +33,7 @@ interface IRule<T, D = void> {
|
||||||
interface IArgs<T, D = void> {
|
interface IArgs<T, D = void> {
|
||||||
rules: IRule<T, D>[];
|
rules: IRule<T, D>[];
|
||||||
description(this: T, derivedData: D): React.ReactChild;
|
description(this: T, derivedData: D): React.ReactChild;
|
||||||
|
hideDescriptionIfValid: Boolean;
|
||||||
deriveData?(data: Data): Promise<D>;
|
deriveData?(data: Data): Promise<D>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,6 +55,8 @@ export interface IValidationResult {
|
||||||
* @param {Function} description
|
* @param {Function} description
|
||||||
* Function that returns a string summary of the kind of value that will
|
* Function that returns a string summary of the kind of value that will
|
||||||
* meet the validation rules. Shown at the top of the validation feedback.
|
* meet the validation rules. Shown at the top of the validation feedback.
|
||||||
|
* @param {Boolean} hideDescriptionIfValid
|
||||||
|
* If true, don't show the description if the validation passes validation.
|
||||||
* @param {Function} deriveData
|
* @param {Function} deriveData
|
||||||
* Optional function that returns a Promise to an object of generic type D.
|
* Optional function that returns a Promise to an object of generic type D.
|
||||||
* The result of this Promise is passed to rule methods `skip`, `test`, `valid`, and `invalid`.
|
* The result of this Promise is passed to rule methods `skip`, `test`, `valid`, and `invalid`.
|
||||||
|
@ -71,7 +74,7 @@ export interface IValidationResult {
|
||||||
* A validation function that takes in the current input value and returns
|
* A validation function that takes in the current input value and returns
|
||||||
* the overall validity and a feedback UI that can be rendered for more detail.
|
* the overall validity and a feedback UI that can be rendered for more detail.
|
||||||
*/
|
*/
|
||||||
export default function withValidation<T = undefined, D = void>({ description, deriveData, rules }: IArgs<T, D>) {
|
export default function withValidation<T = undefined, D = void>({ description, hideDescriptionIfValid, deriveData, rules }: IArgs<T, D>) {
|
||||||
return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
|
return async function onValidate({ value, focused, allowEmpty = true }: IFieldState): Promise<IValidationResult> {
|
||||||
if (!value && allowEmpty) {
|
if (!value && allowEmpty) {
|
||||||
return {
|
return {
|
||||||
|
@ -156,7 +159,7 @@ export default function withValidation<T = undefined, D = void>({ description, d
|
||||||
}
|
}
|
||||||
|
|
||||||
let summary;
|
let summary;
|
||||||
if (description) {
|
if (description && (details || !hideDescriptionIfValid)) {
|
||||||
// We're setting `this` to whichever component holds the validation
|
// We're setting `this` to whichever component holds the validation
|
||||||
// function. That allows rules to access the state of the component.
|
// function. That allows rules to access the state of the component.
|
||||||
const content = description.call(this, derivedData);
|
const content = description.call(this, derivedData);
|
||||||
|
|
Loading…
Reference in a new issue