Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: update react peer dependency to react@18
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| import { CalendarInput } from '@dhis2-ui/calendar' | ||
| import PropTypes from 'prop-types' | ||
| import React from 'react' | ||
| import { | ||
| hasError, | ||
| isValid, | ||
| getValidationText, | ||
| isLoading, | ||
| createFocusHandler, | ||
| createChangeHandler, | ||
| createBlurHandler, | ||
| } from '../shared/helpers.js' | ||
| import { metaPropType, inputPropType } from '../shared/propTypes.js' | ||
|
|
||
| export const CalendarInputFF = ({ | ||
| input, | ||
| meta, | ||
| error, | ||
| showValidStatus, | ||
| valid, | ||
| validationText, | ||
| onBlur, | ||
| onFocus, | ||
| loading, | ||
| showLoadingStatus, | ||
| ...rest | ||
| }) => { | ||
| console.log('INPUT', meta) | ||
| return ( | ||
| <CalendarInput | ||
| {...rest} | ||
| name={input.name} | ||
| type={input.type} | ||
| error={meta.error?.isError} | ||
| warning={meta.error?.isWarning} | ||
| // warning={!!meta.error} | ||
| valid={meta.valid} | ||
| validationText={meta.error?.message} | ||
| onFocus={createFocusHandler(input, onFocus)} | ||
| onChange={createChangeHandler(input)} | ||
| onBlur={createBlurHandler(input, onBlur)} | ||
| date={input.value} | ||
| onDateSelect={(date) => { | ||
| input.onChange(date ? date?.calendarDateString : '') | ||
| rest.onDateSelect?.(date) | ||
| }} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| CalendarInputFF.propTypes = { | ||
| /** `input` props received from Final Form `Field` */ | ||
| input: inputPropType.isRequired, | ||
| /** `meta` props received from Final Form `Field` */ | ||
| meta: metaPropType.isRequired, | ||
|
|
||
| error: PropTypes.bool, | ||
| loading: PropTypes.bool, | ||
| showLoadingStatus: PropTypes.bool, | ||
| showValidStatus: PropTypes.bool, | ||
| valid: PropTypes.bool, | ||
| validationText: PropTypes.string, | ||
|
|
||
| onBlur: PropTypes.func, | ||
| onFocus: PropTypes.func, | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import React from 'react' | ||
| import { Field } from 'react-final-form' | ||
| import { formDecorator } from '../formDecorator.js' | ||
| import { inputArgType, metaArgType } from '../shared/propTypes.js' | ||
| import { isValidDate } from '../validators/index.js' | ||
| import { CalendarInputFF } from './CalendarInputFF.js' | ||
|
|
||
| const description = ` | ||
| The \`CalendarInputFF\` is a wrapper around a \`CalendarInput\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps. | ||
| #### Final Form | ||
| See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started). | ||
| Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={CalendarInputFF} />\`. See the code samples below for examples. | ||
| #### Props | ||
| The props shown in the table below are generally provided to the \`CalendarInputFF\` wrapper by the Final Form \`Field\`. | ||
| Note that any props beyond the API of the \`Field\` component will be spread to the \`CalendarInputFF\`, which passes any extra props to the underlying \`CalendarInput\` using \`{...rest}\`. | ||
| Therefore, to add any props to the \`CalendarInputFF\` or \`CalendarInput\`, add those props to the parent Final Form \`Field\` component. | ||
| Also see \`CalendarInput\` for notes about props and implementation. | ||
| \`\`\`js | ||
| import { CalendarInputFF } from '@dhis2/ui' | ||
| \`\`\` | ||
| Press **Submit** to see the form values logged to the console. | ||
| ` | ||
|
|
||
| export default { | ||
| title: 'Calendar Input Field ', | ||
| component: CalendarInputFF, | ||
| decorators: [formDecorator], | ||
| parameters: { docs: { description: { component: description } } }, | ||
| argTypes: { | ||
| input: { ...inputArgType }, | ||
| meta: { ...metaArgType }, | ||
| }, | ||
| } | ||
|
|
||
| export const Default = () => { | ||
| const validationOptions = { | ||
| maxDateString: '2021-01-01', | ||
| strictValidation: false, | ||
| } | ||
| return ( | ||
| <Field | ||
| name="date" | ||
| validate={isValidDate(validationOptions)} | ||
| component={CalendarInputFF} | ||
| // {...validationOptions} | ||
| autoComplete="off" | ||
| // strictValidation={false} | ||
| // warning | ||
| // calendar="ethiopic" | ||
| // date="2020-01-01" | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { validateDateString } from '@dhis2/multi-calendar-dates' | ||
| import i18n from '../locales/index.js' | ||
|
|
||
| const isValidDate = (options) => { | ||
| return (value) => { | ||
| const result = validateDateString(value, options) | ||
| console.log('isValid running', value, options, result) | ||
| if (result.valid) { | ||
| return undefined | ||
| } else { | ||
| console.log(' > ', result.validationText) | ||
| return { | ||
| message: result.validationText, | ||
| isWarning: !options?.strictValidation, | ||
| isError: options?.strictValidation, | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export { isValidDate } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.