UNPKG

4.11 kBTypeScriptView Raw
1/*
2 * Copyright 2020 Adobe. All rights reserved.
3 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License. You may obtain a copy
5 * of the License at http://www.apache.org/licenses/LICENSE-2.0
6 *
7 * Unless required by applicable law or agreed to in writing, software distributed under
8 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9 * OF ANY KIND, either express or implied. See the License for the specific language
10 * governing permissions and limitations under the License.
11 */
12
13import {ReactNode} from 'react';
14
15export type ValidationState = 'valid' | 'invalid';
16
17export type ValidationError = string | string[];
18export type ValidationErrors = Record<string, ValidationError>;
19export type ValidationFunction<T> = (value: T) => ValidationError | true | null | undefined;
20
21export interface Validation<T> {
22 /** Whether user input is required on the input before form submission. */
23 isRequired?: boolean,
24 /** Whether the input value is invalid. */
25 isInvalid?: boolean,
26 /** @deprecated Use `isInvalid` instead. */
27 validationState?: ValidationState,
28 /**
29 * Whether to use native HTML form validation to prevent form submission
30 * when the value is missing or invalid, or mark the field as required
31 * or invalid via ARIA.
32 * @default 'aria'
33 */
34 validationBehavior?: 'aria' | 'native',
35 /**
36 * A function that returns an error message if a given value is invalid.
37 * Validation errors are displayed to the user when the form is submitted
38 * if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
39 * prop instead.
40 */
41 validate?: (value: T) => ValidationError | true | null | undefined
42}
43
44export interface ValidationResult {
45 /** Whether the input value is invalid. */
46 isInvalid: boolean,
47 /** The current error messages for the input if it is invalid, otherwise an empty array. */
48 validationErrors: string[],
49 /** The native validation details for the input. */
50 validationDetails: ValidityState
51}
52
53export interface SpectrumFieldValidation<T> extends Omit<Validation<T>, 'isInvalid' | 'validationState'> {
54 /** Whether the input should display its "valid" or "invalid" visual styling. */
55 validationState?: ValidationState
56}
57
58export interface InputBase {
59 /** Whether the input is disabled. */
60 isDisabled?: boolean,
61 /** Whether the input can be selected but not changed by the user. */
62 isReadOnly?: boolean
63}
64
65export interface ValueBase<T, C = T> {
66 /** The current value (controlled). */
67 value?: T,
68 /** The default value (uncontrolled). */
69 defaultValue?: T,
70 /** Handler that is called when the value changes. */
71 onChange?: (value: C) => void
72}
73
74export interface TextInputBase {
75 /** Temporary text that occupies the text input when it is empty. */
76 placeholder?: string
77}
78
79export interface SpectrumTextInputBase {
80 /**
81 * Temporary text that occupies the text input when it is empty.
82 * Please use help text instead.
83 * @deprecated
84 **/
85 placeholder?: string
86}
87
88export interface RangeValue<T> {
89 /** The start value of the range. */
90 start: T,
91 /** The end value of the range. */
92 end: T
93}
94
95export interface RangeInputBase<T> {
96 /** The smallest value allowed for the input. */
97 minValue?: T,
98 /** The largest value allowed for the input. */
99 maxValue?: T,
100 /** The amount that the input value changes with each increment or decrement "tick". */
101 step?: T // ??
102}
103
104export interface HelpTextProps {
105 /** A description for the field. Provides a hint such as specific requirements for what to choose. */
106 description?: ReactNode,
107 /** An error message for the field. */
108 errorMessage?: ReactNode | ((v: ValidationResult) => ReactNode)
109}
110
111// Spectrum specific types. Extends `Validation` so that the `validationState` prop is available.
112export interface SpectrumHelpTextProps extends HelpTextProps {
113 /** Whether the description is displayed with lighter text. */
114 isDisabled?: boolean,
115 /** Whether an error icon is rendered. */
116 showErrorIcon?: boolean
117}
118
\No newline at end of file