From 1e84b98ce68aeff13b6a8e4db0750618837b2bd9 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Thu, 30 May 2024 15:03:17 +0800 Subject: [PATCH] refactor(docs): revise validate content --- apps/docs/content/docs/components/checkbox-group.mdx | 2 +- apps/docs/content/docs/components/date-input.mdx | 2 +- apps/docs/content/docs/components/date-picker.mdx | 2 +- apps/docs/content/docs/components/date-range-picker.mdx | 2 +- apps/docs/content/docs/components/input.mdx | 2 +- apps/docs/content/docs/components/radio-group.mdx | 2 +- apps/docs/content/docs/components/range-calendar.mdx | 2 +- apps/docs/content/docs/components/textarea.mdx | 2 +- apps/docs/content/docs/components/time-input.mdx | 2 +- 9 files changed, 9 insertions(+), 9 deletions(-) diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx index bd4466a484..a5b10c992c 100644 --- a/apps/docs/content/docs/components/checkbox-group.mdx +++ b/apps/docs/content/docs/components/checkbox-group.mdx @@ -109,7 +109,7 @@ In case you need to customize the checkbox even further, you can use the `useChe | validationState | `valid` \| `invalid` | Whether the inputs should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | - | | description | `ReactNode` | The checkbox group description. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | The checkbox group error message. | - | -| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string[]) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | isDisabled | `boolean` | Whether the checkbox group is disabled. | `false` | | isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` | diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx index e9d17c5503..df9e377e38 100644 --- a/apps/docs/content/docs/components/date-input.mdx +++ b/apps/docs/content/docs/components/date-input.mdx @@ -299,7 +299,7 @@ import {parseZonedDateTime} from "@internationalized/date"; | locale | `string` | The locale to display and edit the value according to. | - | | description | `ReactNode` | A description for the date input. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date input. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date input. | - | diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx index ead42d035d..139b6d809f 100644 --- a/apps/docs/content/docs/components/date-picker.mdx +++ b/apps/docs/content/docs/components/date-picker.mdx @@ -313,7 +313,7 @@ import {I18nProvider} from "@react-aria/i18n"; | placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-picker. | - | | description | `ReactNode` | A description for the date-picker. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: MappedDateValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date-picker. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date-picker. | - | diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx index fc727a25a1..5f33327606 100644 --- a/apps/docs/content/docs/components/date-range-picker.mdx +++ b/apps/docs/content/docs/components/date-range-picker.mdx @@ -354,7 +354,7 @@ import {I18nProvider} from "@react-aria/i18n"; | placeholderValue | `ZonedDateTime` \| `CalendarDate` \| `CalendarDateTime` \| `undefined` \| `null` | The placeholder of the date-range-picker. | - | | description | `ReactNode` | A description for the date-range-picker. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the date input. | - | -| validate | `(value: RangeValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g., on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: RangeValue>) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Display validation errors upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the date-range-picker. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the date-range-picker. | - | diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx index deeab401cf..44125d3550 100644 --- a/apps/docs/content/docs/components/input.mdx +++ b/apps/docs/content/docs/components/input.mdx @@ -207,7 +207,7 @@ In case you need to customize the input even further, you can use the `useInput` | placeholder | `string` | The placeholder of the input. | - | | description | `ReactNode` | A description for the input. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the input. It is only shown when `isInvalid` is set to `true` | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | startContent | `ReactNode` | Element to be rendered in the left side of the input. | - | | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - | diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx index ab65a795e0..78733bed9b 100644 --- a/apps/docs/content/docs/components/radio-group.mdx +++ b/apps/docs/content/docs/components/radio-group.mdx @@ -159,7 +159,7 @@ In case you need to customize the radio group even further, you can use the `use | defaultValue | `string[]` | The default selected value. (uncontrolled). | - | | description | `ReactNode` | Radio group description . | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | Radio group error message. | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | isDisabled | `boolean` | Whether the radio group is disabled. | `false` | | isRequired | `boolean` | Whether user checkboxes are required on the input before form submission. | `false` | diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx index 7c3907087c..9f747166dc 100644 --- a/apps/docs/content/docs/components/range-calendar.mdx +++ b/apps/docs/content/docs/components/range-calendar.mdx @@ -226,7 +226,7 @@ Here's the example to customize `topContent` and `bottomContent` to have some pr | isDateUnavailable | `(date: DateValue) => boolean` | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. | - | | | createCalendar | `(calendar: SupportedCalendars) => Calendar \| null` | This function helps to reduce the bundle size by providing a custom calendar system. You can also use the NextUIProvider to provide the createCalendar function to all nested components. | `all
calendars` | | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | | -| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | | +| validate | `(value: { inputValue: string, selectedKey: React.Key }) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | | hideDisabledDates | `boolean` | Whether to hide the disabled or invalid dates. | `false` | | | disableAnimation | `boolean` | Whether to disable the animation of the calendar. | `false` | | | classNames | `Record<"base"｜ "prevButton"｜ "nextButton"｜ "headerWrapper" \| "header" \| "title" \| "content" \| "gridWrapper" \| "grid" \| "gridHeader" \| "gridHeaderRow" \| "gridHeaderCell" \| "gridBody" \| "gridBodyRow" \| "cell" \| "cellButton" \| "pickerWrapper" \| "pickerMonthList" \| "pickerYearList" \| "pickerHighlight" \| "pickerItem" \| "helperWrapper" \| "errorMessage", string>` | Allows to set custom class names for the calendar slots. | - | | diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx index 6e3253929d..851985ee55 100644 --- a/apps/docs/content/docs/components/textarea.mdx +++ b/apps/docs/content/docs/components/textarea.mdx @@ -157,7 +157,7 @@ You can use the `value` and `onValueChange` properties to control the input valu | endContent | `ReactNode` | Element to be rendered in the right side of the input. | - | | description | `ReactNode` | A description for the textarea. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode` \| `((v: ValidationResult) => ReactNode)` | An error message for the textarea. | - | -| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: string) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.| `aria` | | labelPlacement | `inside` \| `outside` \| `outside-left` | The position of the label. | `inside` | | fullWidth | `boolean` | Whether the textarea should take up the width of its parent. | `true` | diff --git a/apps/docs/content/docs/components/time-input.mdx b/apps/docs/content/docs/components/time-input.mdx index 96c9da853a..1010112b7d 100644 --- a/apps/docs/content/docs/components/time-input.mdx +++ b/apps/docs/content/docs/components/time-input.mdx @@ -223,7 +223,7 @@ By default, `TimeInput` displays times in either 12 or 24 hour hour format depen | autoFocus | `boolean` | Whether the element should receive focus on render. | - | | description | `ReactNode` | A description for the field. Provides a hint such as specific requirements for what to choose. | - | | errorMessage | `ReactNode \| (v: ValidationResult) => ReactNode` | An error message for the field. | - | -| validate | `(value: MappedTimeValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate time input values when committing (e.g. on blur), and return error messages for invalid values. Validation errors are displayed to the user when the form is submitted if `validationBehavior` is set to `native`. For realtime validation, use the `isInvalid` prop instead.| - | +| validate | `(value: MappedTimeValue) => ValidationError ｜ true ｜ null ｜ undefined` | Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.| - | | validationBehavior | `native` \| `aria` | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA. | `aria` | | disableAnimation | `boolean` | Whether to disable the animation of the time input. | - | | classNames | `Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper" ｜ "segment" ｜ "helperWrapper" ｜ "input" ｜ "description" ｜ "errorMessage", string>` | Allows to set custom class names for the time input slots. | - |