diff --git a/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx b/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx index 17dc3e5eae..b341d2c86a 100644 --- a/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx +++ b/src/renderer/components/+config-resource-quotas/add-quota-dialog.tsx @@ -175,6 +175,7 @@ export class AddQuotaDialog extends React.Component { this.quotaName = v.toLowerCase()} className="box grow" diff --git a/src/renderer/components/+config-secrets/add-secret-dialog.tsx b/src/renderer/components/+config-secrets/add-secret-dialog.tsx index bfd7a3262e..23adfaf804 100644 --- a/src/renderer/components/+config-secrets/add-secret-dialog.tsx +++ b/src/renderer/components/+config-secrets/add-secret-dialog.tsx @@ -223,6 +223,7 @@ export class AddSecretDialog extends React.Component { this.name = v} /> diff --git a/src/renderer/components/+namespaces/add-namespace-dialog.tsx b/src/renderer/components/+namespaces/add-namespace-dialog.tsx index 213891c233..2427c9fd9b 100644 --- a/src/renderer/components/+namespaces/add-namespace-dialog.tsx +++ b/src/renderer/components/+namespaces/add-namespace-dialog.tsx @@ -100,6 +100,7 @@ export class AddNamespaceDialog extends React.Component { required autoFocus iconLeft="layers" placeholder="Namespace" + trim validators={systemName} value={namespace} onChange={v => this.namespace = v.toLowerCase()} /> diff --git a/src/renderer/components/+preferences/add-helm-repo-dialog.tsx b/src/renderer/components/+preferences/add-helm-repo-dialog.tsx index 44ef32b9af..36388088e1 100644 --- a/src/renderer/components/+preferences/add-helm-repo-dialog.tsx +++ b/src/renderer/components/+preferences/add-helm-repo-dialog.tsx @@ -177,6 +177,7 @@ export class AddHelmRepoDialog extends React.Component { this.helmRepo.name = v} /> diff --git a/src/renderer/components/+user-management/+service-accounts/create-dialog.tsx b/src/renderer/components/+user-management/+service-accounts/create-dialog.tsx index e812068506..1f50e717c6 100644 --- a/src/renderer/components/+user-management/+service-accounts/create-dialog.tsx +++ b/src/renderer/components/+user-management/+service-accounts/create-dialog.tsx @@ -88,8 +88,10 @@ export class CreateServiceAccountDialog extends React.Component { this.name = v.toLowerCase()} /> diff --git a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx index f4006bd89f..0e2f98d16a 100644 --- a/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx +++ b/src/renderer/components/+workloads-cronjobs/cronjob-trigger-dialog.tsx @@ -123,6 +123,7 @@ export class CronJobTriggerDialog extends Component { this.jobName = v.toLowerCase()} diff --git a/src/renderer/components/input/input.tsx b/src/renderer/components/input/input.tsx index d182a8c202..91b58c24b5 100644 --- a/src/renderer/components/input/input.tsx +++ b/src/renderer/components/input/input.tsx @@ -41,11 +41,13 @@ export type { InputValidator }; type InputElement = HTMLInputElement | HTMLTextAreaElement; type InputElementProps = InputHTMLAttributes & TextareaHTMLAttributes & DOMAttributes; -export type InputProps = Omit & { +export type InputProps = Omit & { theme?: "round-black" | "round"; className?: string; - value?: T; - autoSelectOnFocus?: boolean + value?: string; + trim?: boolean; + autoSelectOnFocus?: boolean; + defaultValue?: string; multiLine?: boolean; // use text-area as input field maxRows?: number; // when multiLine={true} define max rows size dirty?: boolean; // show validation errors even if the field wasn't touched yet @@ -55,8 +57,8 @@ export type InputProps = Omit): void; - onSubmit?(value: T, evt: React.KeyboardEvent): void; + onChange?(value: string, evt: React.ChangeEvent): void; + onSubmit?(value: string, evt: React.KeyboardEvent): void; }; interface State { @@ -73,6 +75,7 @@ const defaultProps: Partial = { maxRows: 10000, showValidationLine: true, validators: [], + defaultValue: "", }; export class Input extends React.Component { @@ -102,12 +105,10 @@ export class Input extends React.Component { } getValue(): string { - const { value, defaultValue = "" } = this.props; + const { trim, value, defaultValue } = this.props; + const rawValue = value ?? this.input?.value ?? defaultValue; - if (value !== undefined) return value; // controlled input - if (this.input) return this.input.value; // uncontrolled input - - return defaultValue as string; + return trim ? rawValue.trim() : rawValue; } focus() { @@ -138,7 +139,8 @@ export class Input extends React.Component { private validationId: string; - async validate(value = this.getValue()) { + async validate() { + const value = this.getValue(); let validationId = (this.validationId = ""); // reset every time for async validators const asyncValidators: Promise[] = []; const errors: React.ReactNode[] = [];