diff --git a/src/renderer/components/input/input.tsx b/src/renderer/components/input/input.tsx index 9d206bd5aa..91bfa27b38 100644 --- a/src/renderer/components/input/input.tsx +++ b/src/renderer/components/input/input.tsx @@ -12,22 +12,23 @@ import { Icon } from "../icon"; import type { TooltipProps } from "../tooltip"; import { Tooltip } from "../tooltip"; import * as Validators from "./input_validators"; -import type { InputValidator, InputValidation, InputValidationResult, SyncValidationMessageBuilder } from "./input_validators"; +import type { InputValidator, InputValidation, InputValidationResult, SyncValidationMessage } from "./input_validators"; import uniqueId from "lodash/uniqueId"; import { debounce } from "lodash"; -const { conditionalValidators, asyncInputValidator, inputValidator, ...InputValidators } = Validators; +const { conditionalValidators, asyncInputValidator, inputValidator, inputValidatorWithRequiredProps, ...InputValidators } = Validators; export { InputValidators, asyncInputValidator, inputValidator, + inputValidatorWithRequiredProps, }; export type { InputValidator, InputValidation, InputValidationResult, - SyncValidationMessageBuilder, + SyncValidationMessage, }; type InputElement = HTMLInputElement | HTMLTextAreaElement; diff --git a/src/renderer/components/input/input_validators.ts b/src/renderer/components/input/input_validators.ts index 1f4ff7d459..cba09101cc 100644 --- a/src/renderer/components/input/input_validators.ts +++ b/src/renderer/components/input/input_validators.ts @@ -4,7 +4,7 @@ */ import type { InputProps } from "./input"; -import type { ReactNode } from "react"; +import type React from "react"; import fse from "fs-extra"; import { TypedRegEx } from "typed-regex"; @@ -19,10 +19,10 @@ export type InputValidation InputValidationResult ); -export type SyncValidationMessageBuilder = ( +export type SyncValidationMessage = React.ReactNode | ( RequireProps extends true - ? (value: string, props: InputProps) => ReactNode - : (value: string, props?: InputProps) => ReactNode + ? (value: string, props: InputProps) => React.ReactNode + : (value: string, props?: InputProps) => React.ReactNode ); export type InputValidator = { @@ -34,7 +34,7 @@ export type InputValidator; - message: ReactNode | SyncValidationMessageBuilder; + message: SyncValidationMessage; debounce?: undefined; } : { @@ -43,22 +43,20 @@ export type InputValidator; - message?: ReactNode | SyncValidationMessageBuilder; + message?: SyncValidationMessage; debounce: number; } ); -export function asyncInputValidator(validator: InputValidator): InputValidator; -export function asyncInputValidator(validator: InputValidator): InputValidator; - -export function asyncInputValidator(validator: InputValidator): InputValidator { +export function asyncInputValidator(validator: InputValidator): InputValidator { return validator; } -export function inputValidator(validator: InputValidator): InputValidator; -export function inputValidator(validator: InputValidator): InputValidator; +export function inputValidator(validator: InputValidator): InputValidator { + return validator; +} -export function inputValidator(validator: InputValidator): InputValidator { +export function inputValidatorWithRequiredProps(validator: InputValidator): InputValidator { return validator; } @@ -74,7 +72,7 @@ export const isEmail = inputValidator({ validate: value => !!value.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/), }); -export const isNumber = inputValidator({ +export const isNumber = inputValidatorWithRequiredProps({ condition: ({ type }) => type === "number", message(value, { min, max }) { const minMax: string = [ @@ -133,18 +131,16 @@ export const isPath = asyncInputValidator({ }, }); -export const minLength = inputValidator({ +export const minLength = inputValidatorWithRequiredProps({ condition: ({ minLength }) => !!minLength, message: (value, { minLength }) => `Minimum length is ${minLength}`, - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - validate: (value, { minLength }) => value.length >= minLength!, + validate: (value, { minLength = 0 }) => value.length >= minLength, }); -export const maxLength = inputValidator({ +export const maxLength = inputValidatorWithRequiredProps({ condition: ({ maxLength }) => !!maxLength, message: (value, { maxLength }) => `Maximum length is ${maxLength}`, - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - validate: (value, { maxLength }) => value.length <= maxLength!, + validate: (value, { maxLength = 0 }) => value.length <= maxLength, }); const systemNameMatcher = /^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/;