@vaadin/hilla-react-crud 24.6.4 → 24.7.0-alpha10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autoform.d.ts.map +1 -1
- package/autoform.js +1 -1
- package/autoform.js.map +2 -2
- package/crud.d.ts +2 -0
- package/index.js +1 -1
- package/locale.js +1 -1
- package/locale.js.map +2 -2
- package/package.json +10 -31
- package/util.js +1 -1
package/autoform.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"autoform.d.ts","sourceRoot":"","sources":["src/autoform.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"autoform.d.ts","sourceRoot":"","sources":["src/autoform.tsx"],"names":[],"mappings":"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"}
|
package/autoform.js
CHANGED
|
@@ -62,7 +62,7 @@ function AutoForm({
|
|
|
62
62
|
if (error instanceof ValidationError) {
|
|
63
63
|
const nonPropertyErrorMessages = error.errors.filter((validationError) => !validationError.property || typeof validationError.property === "string").map((validationError) => {
|
|
64
64
|
const property = validationError.property && typeof validationError.property === "string" ? `${validationError.property}: ` : "";
|
|
65
|
-
return `${property}${validationError.validatorMessage
|
|
65
|
+
return `${property}${validationError.validatorMessage ?? validationError.message}`;
|
|
66
66
|
});
|
|
67
67
|
if (nonPropertyErrorMessages.length > 0) {
|
|
68
68
|
setFormError(
|
package/autoform.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["src/autoform.tsx"],
|
|
4
|
-
"sourcesContent": ["import { EndpointError } from '@vaadin/hilla-frontend';\nimport { type AbstractModel, type DetachedModelConstructor, ValidationError, type Value } from '@vaadin/hilla-lit-form';\nimport { useForm, type UseFormResult } from '@vaadin/hilla-react-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { ConfirmDialog } from '@vaadin/react-components/ConfirmDialog';\nimport { FormLayout } from '@vaadin/react-components/FormLayout';\nimport { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';\nimport {\n type ComponentType,\n type JSX,\n type KeyboardEvent,\n type ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AutoFormField, type AutoFormFieldProps, type FieldOptions } from './autoform-field.js';\nimport css from './autoform.obj.js';\nimport type { FormService } from './crud.js';\nimport { getDefaultProperties, ModelInfo, type PropertyInfo } from './model-info.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport const emptyItem = Symbol();\n\n/**\n * An event that is fired when an error occurs while submitting the form.\n */\nexport type SubmitErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully submitted.\n */\nexport type SubmitEvent<TItem> = {\n /**\n * The item that was submitted, as returned by the service.\n */\n item: TItem;\n};\n\n/**\n * An event that is fired when an error occurs while deleting an item.\n */\nexport type DeleteErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully deleted.\n */\nexport type DeleteEvent<TItem> = {\n /**\n * The item that was deleted, as returned by the service.\n */\n item: TItem;\n};\n\nexport type AutoFormLayoutRendererProps<M extends AbstractModel> = Readonly<{\n form: UseFormResult<M>;\n children: ReadonlyArray<ReactElement<AutoFormFieldProps>>;\n}>;\n\nexport type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentStyleProps &\n Readonly<{\n /**\n * The service to use for saving and deleting items. This must be a\n * TypeScript service that has been generated by Hilla from a backend Java\n * service that implements the `com.vaadin.hilla.crud.FormService` interface.\n */\n service: FormService<Value<M>>;\n /**\n * The entity model to use, which determines which fields to show in the\n * form. This must be a Typescript model class that has been generated by\n * Hilla from a backend Java class. The model must match with the type of\n * the items handled by the service. For example, a `PersonModel` can be\n * used with a service that handles `Person` instances.\n *\n * By default, the form shows fields for all properties of the model which\n * have a type that is supported. Use the `visibleFields` option to customize\n * which fields to show and in which order.\n */\n model: DetachedModelConstructor<M>;\n /**\n * The property to use to detect an item's ID. The item ID is required for\n * deleting items via the `FormService.delete` method. The delete button\n * will not be shown if no item ID can be found.\n *\n * By default, the component uses the property annotated with\n * `jakarta.persistence.Id`, or a property named `id`, in that order.\n * This option can be used to override the default behavior, or define the ID\n * property in case a class doesn't have a property matching the defaults.\n */\n itemIdProperty?: string;\n /**\n * The item to edit in the form. The form fields are automatically populated\n * with values from the item's properties. In order to create a new item,\n * either pass `null`, or leave this prop as undefined.\n *\n * Use the `onSubmitSuccess` callback to get notified when the item has been\n * saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n item?: Value<M> | typeof emptyItem | null;\n /**\n * Whether the form should be disabled. This disables all form fields and\n * all buttons.\n */\n disabled?: boolean;\n /**\n * Allows to customize the layout of the form by providing a custom\n * renderer. The renderer receives the form instance and the pre-rendered\n * fields as props. The renderer can either reuse the pre-rendered fields in\n * the custom layout, or render custom fields and connect them to the form\n * manually.\n *\n * Check the component documentation for details and examples.\n *\n * Example using pre-rendered fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ children }) =>\n * <VerticalLayout>\n * {children}\n * <p>All data is collected anonymously.</p>\n * </VerticalLayout>\n * } />\n * ```\n *\n * Example rendering custom fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ form }) =>\n * <VerticalLayout>\n * <TextField {...form.field(form.model.name)} />\n * ...\n * </VerticalLayout>\n * } />\n * ```\n */\n layoutRenderer?: ComponentType<AutoFormLayoutRendererProps<M>>;\n /**\n * Defines the fields to show in the form, and in which order. This takes\n * an array of property names. Properties that are not included in this\n * array will not be shown in the form, and properties that are included,\n * but don't exist in the model, will be ignored.\n */\n visibleFields?: string[];\n /**\n * Defines the fields to hide in the form, keeping the default order. This takes\n * an array of property names. Properties that are not included in this\n * array will not be hidden in the form, and properties that are included,\n * but don't exist in the model, will be ignored.\n */\n hiddenFields?: string[];\n /**\n * Allows to customize the FormLayout used by default. This is especially useful\n * to define the `responsiveSteps`. See the\n * {@link https://hilla.dev/docs/react/components/form-layout | FormLayout documentation}\n * for details.\n */\n formLayoutProps?: ComponentStyleProps & Pick<Parameters<typeof FormLayout>[0], 'responsiveSteps'>;\n /**\n * Allows to customize individual fields of the form. This takes an object\n * where the keys are property names, and the values are options for the\n * respective field for editing that property.\n */\n fieldOptions?: Record<string, FieldOptions>;\n /**\n * Whether to show the delete button in the form. This is disabled by\n * default. If enabled, the delete button will only be shown when editing\n * an existing item, which means that `item` is not null. The delete button\n * will also only be shown if an item has a discernible ID. See the\n * `itemIdProperty` prop for details how the item ID is detected.\n *\n * Use the `onDeleteSuccess` callback to get notified when the item has been\n * deleted.\n *\n * NOTE: This only hides the button, it does not prevent from calling the\n * delete method on the service. To completely disable deleting, you must\n * override the `delete` method in the backend Java service to either throw\n * an exception or annotate it with `@DenyAll` to prevent access.\n */\n deleteButtonVisible?: boolean;\n /**\n * A callback that will be called if an unexpected error occurs while\n * submitting the form.\n *\n * Note that this will not be called for validation errors, which are\n * handled automatically.\n */\n onSubmitError?({ error }: SubmitErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * submitted and the item has been saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n onSubmitSuccess?({ item }: SubmitEvent<Value<M>>): void;\n /**\n * A callback that will be called if an unexpected error occurs while\n * deleting an item.\n */\n onDeleteError?({ error }: DeleteErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * deleted.\n */\n onDeleteSuccess?({ item }: DeleteEvent<Value<M>>): void;\n }>;\n\n/**\n * Auto Form is a component that automatically generates a form for editing,\n * updating and deleting items from a backend service.\n *\n * Example usage:\n * ```tsx\n * import { AutoForm } from '@vaadin/hilla-react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoForm\n * service={PersonService}\n * model={PersonModel}\n * onSubmitSuccess={({ item }) => {\n * console.log('Submitted item:', item);\n * }}\n * />\n * ```\n */\nexport function AutoForm<M extends AbstractModel>({\n service,\n model,\n itemIdProperty,\n item = emptyItem,\n onSubmitError,\n onSubmitSuccess,\n disabled,\n layoutRenderer: LayoutRenderer,\n visibleFields,\n hiddenFields,\n formLayoutProps,\n fieldOptions,\n style,\n id,\n className,\n deleteButtonVisible,\n onDeleteSuccess,\n onDeleteError,\n}: AutoFormProps<M>): JSX.Element {\n const form = useForm(model, {\n onSubmit: async (formItem) => service.save(formItem),\n });\n const formErrorRef = useRef<HTMLDivElement>(null);\n const [formError, setFormError] = useState<JSX.Element | string>('');\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const modelInfo = useMemo(() => new ModelInfo(model, itemIdProperty), [model]);\n\n const isEditMode = item !== undefined && item !== null && item !== emptyItem;\n const showDeleteButton = deleteButtonVisible && isEditMode && modelInfo.idProperty;\n const isSubmitDisabled = !!disabled || (isEditMode && !form.dirty);\n\n useEffect(() => {\n if (item !== emptyItem) {\n form.read(item);\n } else {\n form.clear();\n }\n }, [item]);\n\n useEffect(() => {\n formErrorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });\n }, [formError]);\n\n function handleSubmitError(error: unknown) {\n if (error instanceof ValidationError) {\n const nonPropertyErrorMessages = error.errors\n .filter((validationError) => !validationError.property || typeof validationError.property === 'string')\n .map((validationError) => {\n const property =\n validationError.property && typeof validationError.property === 'string'\n ? `${validationError.property}: `\n : '';\n return `${property}${\n validationError.validatorMessage ? validationError.validatorMessage : validationError.message\n }`;\n });\n if (nonPropertyErrorMessages.length > 0) {\n setFormError(\n <div ref={formErrorRef}>\n Validation errors:\n <ul>\n {nonPropertyErrorMessages.map((message, index) => (\n <li key={index}>{message}</li>\n ))}\n </ul>\n </div>,\n );\n }\n } else if (error instanceof EndpointError) {\n if (onSubmitError) {\n onSubmitError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n }\n\n async function handleSubmit(): Promise<void> {\n try {\n setFormError('');\n const newItem = await form.submit();\n if (newItem === undefined) {\n // If update returns an empty object, then no update was performed\n throw new EndpointError('No update performed');\n } else if (onSubmitSuccess) {\n onSubmitSuccess({ item: newItem });\n }\n // Automatically clear the form after submitting a new item.\n // Otherwise, there would be no way for the developer to clear it, as the\n // there is no new value to set for the item prop to trigger the above\n // effect in case the prop is already null, undefined or the empty item.\n if (!item || item === emptyItem) {\n form.clear();\n }\n } catch (error) {\n handleSubmitError(error);\n }\n }\n\n function deleteItem() {\n setShowDeleteDialog(true);\n }\n\n async function confirmDelete() {\n // At this point, item can not be null or emptyItem\n const deletedItem = item as Value<M>;\n try {\n const idProperty = modelInfo.idProperty!;\n // eslint-disable-next-line\n const id = (item as any)[idProperty.name];\n await service.delete(id);\n if (onDeleteSuccess) {\n onDeleteSuccess({ item: deletedItem });\n }\n } catch (error) {\n if (error instanceof EndpointError) {\n if (onDeleteError) {\n onDeleteError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n } finally {\n setShowDeleteDialog(false);\n }\n }\n\n function cancelDelete() {\n setShowDeleteDialog(false);\n }\n\n const handleKeyDown = (event: KeyboardEvent): void => {\n if (event.target instanceof HTMLTextAreaElement) {\n return;\n }\n if (event.key === 'Enter' && !isSubmitDisabled) {\n // eslint-disable-next-line no-void\n void handleSubmit();\n }\n };\n\n function createAutoFormField(propertyInfo: PropertyInfo): JSX.Element {\n const fieldOptionsForProperty = fieldOptions?.[propertyInfo.name] ?? {};\n\n return (\n <AutoFormField\n key={propertyInfo.name}\n propertyInfo={propertyInfo}\n form={form}\n disabled={disabled}\n options={fieldOptionsForProperty}\n />\n );\n }\n\n let visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);\n\n // When using `hiddenFields`, remove fields to hide using their `name`\n if (hiddenFields) {\n visibleProperties = visibleProperties.filter(({ name }) => !hiddenFields.includes(name));\n }\n\n const fields = visibleProperties.map(createAutoFormField);\n\n const layout = LayoutRenderer ? (\n <LayoutRenderer form={form}>{fields}</LayoutRenderer>\n ) : (\n <FormLayout {...formLayoutProps}>{fields}</FormLayout>\n );\n\n return (\n <div className={`auto-form ${className ?? ''}`} id={id} style={style} data-testid=\"auto-form\">\n <VerticalLayout className=\"auto-form-fields\" onKeyDown={handleKeyDown}>\n {layout}\n {formError ? <div style={{ color: 'var(--lumo-error-color)' }}>{formError}</div> : <></>}\n </VerticalLayout>\n <div className=\"auto-form-toolbar\">\n <Button\n theme=\"primary\"\n disabled={isSubmitDisabled}\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n onClick={handleSubmit}\n >\n Submit\n </Button>\n {form.dirty ? (\n <Button theme=\"tertiary\" onClick={() => form.reset()}>\n Discard\n </Button>\n ) : null}\n {showDeleteButton && (\n <Button className=\"auto-form-delete-button\" theme=\"tertiary error\" onClick={deleteItem}>\n Delete...\n </Button>\n )}\n </div>\n {showDeleteDialog && (\n <ConfirmDialog\n opened\n header=\"Delete item\"\n confirmTheme=\"error\"\n cancelButtonVisible\n // eslint-disable-next-line\n onConfirm={confirmDelete}\n onCancel={cancelDelete}\n >\n Are you sure you want to delete the selected item?\n </ConfirmDialog>\n )}\n </div>\n );\n}\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { EndpointError } from '@vaadin/hilla-frontend';\nimport { type AbstractModel, type DetachedModelConstructor, ValidationError, type Value } from '@vaadin/hilla-lit-form';\nimport { useForm, type UseFormResult } from '@vaadin/hilla-react-form';\nimport { Button } from '@vaadin/react-components/Button.js';\nimport { ConfirmDialog } from '@vaadin/react-components/ConfirmDialog';\nimport { FormLayout } from '@vaadin/react-components/FormLayout';\nimport { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';\nimport {\n type ComponentType,\n type JSX,\n type KeyboardEvent,\n type ReactElement,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AutoFormField, type AutoFormFieldProps, type FieldOptions } from './autoform-field.js';\nimport css from './autoform.obj.js';\nimport type { FormService } from './crud.js';\nimport { getDefaultProperties, ModelInfo, type PropertyInfo } from './model-info.js';\nimport { type ComponentStyleProps, registerStylesheet } from './util.js';\n\nregisterStylesheet(css);\n\nexport const emptyItem = Symbol();\n\n/**\n * An event that is fired when an error occurs while submitting the form.\n */\nexport type SubmitErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully submitted.\n */\nexport type SubmitEvent<TItem> = {\n /**\n * The item that was submitted, as returned by the service.\n */\n item: TItem;\n};\n\n/**\n * An event that is fired when an error occurs while deleting an item.\n */\nexport type DeleteErrorEvent = {\n /**\n * The error that occurred.\n */\n error: EndpointError;\n /**\n * A function that can be used to set a custom error message. This will be\n * shown in the form at the same position as the default error message.\n * You are not required to call this function if you want to handle the\n * error differently.\n */\n setMessage(message: string): void;\n};\n\n/**\n * An event that is fired when the form has been successfully deleted.\n */\nexport type DeleteEvent<TItem> = {\n /**\n * The item that was deleted, as returned by the service.\n */\n item: TItem;\n};\n\nexport type AutoFormLayoutRendererProps<M extends AbstractModel> = Readonly<{\n form: UseFormResult<M>;\n children: ReadonlyArray<ReactElement<AutoFormFieldProps>>;\n}>;\n\nexport type AutoFormProps<M extends AbstractModel = AbstractModel> = ComponentStyleProps &\n Readonly<{\n /**\n * The service to use for saving and deleting items. This must be a\n * TypeScript service that has been generated by Hilla from a backend Java\n * service that implements the `com.vaadin.hilla.crud.FormService` interface.\n */\n service: FormService<Value<M>>;\n /**\n * The entity model to use, which determines which fields to show in the\n * form. This must be a Typescript model class that has been generated by\n * Hilla from a backend Java class. The model must match with the type of\n * the items handled by the service. For example, a `PersonModel` can be\n * used with a service that handles `Person` instances.\n *\n * By default, the form shows fields for all properties of the model which\n * have a type that is supported. Use the `visibleFields` option to customize\n * which fields to show and in which order.\n */\n model: DetachedModelConstructor<M>;\n /**\n * The property to use to detect an item's ID. The item ID is required for\n * deleting items via the `FormService.delete` method. The delete button\n * will not be shown if no item ID can be found.\n *\n * By default, the component uses the property annotated with\n * `jakarta.persistence.Id`, or a property named `id`, in that order.\n * This option can be used to override the default behavior, or define the ID\n * property in case a class doesn't have a property matching the defaults.\n */\n itemIdProperty?: string;\n /**\n * The item to edit in the form. The form fields are automatically populated\n * with values from the item's properties. In order to create a new item,\n * either pass `null`, or leave this prop as undefined.\n *\n * Use the `onSubmitSuccess` callback to get notified when the item has been\n * saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n item?: Value<M> | typeof emptyItem | null;\n /**\n * Whether the form should be disabled. This disables all form fields and\n * all buttons.\n */\n disabled?: boolean;\n /**\n * Allows to customize the layout of the form by providing a custom\n * renderer. The renderer receives the form instance and the pre-rendered\n * fields as props. The renderer can either reuse the pre-rendered fields in\n * the custom layout, or render custom fields and connect them to the form\n * manually.\n *\n * Check the component documentation for details and examples.\n *\n * Example using pre-rendered fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ children }) =>\n * <VerticalLayout>\n * {children}\n * <p>All data is collected anonymously.</p>\n * </VerticalLayout>\n * } />\n * ```\n *\n * Example rendering custom fields:\n * ```tsx\n * <AutoForm layoutRenderer={({ form }) =>\n * <VerticalLayout>\n * <TextField {...form.field(form.model.name)} />\n * ...\n * </VerticalLayout>\n * } />\n * ```\n */\n layoutRenderer?: ComponentType<AutoFormLayoutRendererProps<M>>;\n /**\n * Defines the fields to show in the form, and in which order. This takes\n * an array of property names. Properties that are not included in this\n * array will not be shown in the form, and properties that are included,\n * but don't exist in the model, will be ignored.\n */\n visibleFields?: string[];\n /**\n * Defines the fields to hide in the form, keeping the default order. This takes\n * an array of property names. Properties that are not included in this\n * array will not be hidden in the form, and properties that are included,\n * but don't exist in the model, will be ignored.\n */\n hiddenFields?: string[];\n /**\n * Allows to customize the FormLayout used by default. This is especially useful\n * to define the `responsiveSteps`. See the\n * {@link https://hilla.dev/docs/react/components/form-layout | FormLayout documentation}\n * for details.\n */\n formLayoutProps?: ComponentStyleProps & Pick<Parameters<typeof FormLayout>[0], 'responsiveSteps'>;\n /**\n * Allows to customize individual fields of the form. This takes an object\n * where the keys are property names, and the values are options for the\n * respective field for editing that property.\n */\n fieldOptions?: Record<string, FieldOptions>;\n /**\n * Whether to show the delete button in the form. This is disabled by\n * default. If enabled, the delete button will only be shown when editing\n * an existing item, which means that `item` is not null. The delete button\n * will also only be shown if an item has a discernible ID. See the\n * `itemIdProperty` prop for details how the item ID is detected.\n *\n * Use the `onDeleteSuccess` callback to get notified when the item has been\n * deleted.\n *\n * NOTE: This only hides the button, it does not prevent from calling the\n * delete method on the service. To completely disable deleting, you must\n * override the `delete` method in the backend Java service to either throw\n * an exception or annotate it with `@DenyAll` to prevent access.\n */\n deleteButtonVisible?: boolean;\n /**\n * A callback that will be called if an unexpected error occurs while\n * submitting the form.\n *\n * Note that this will not be called for validation errors, which are\n * handled automatically.\n */\n onSubmitError?({ error }: SubmitErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * submitted and the item has been saved.\n *\n * When submitting a new item (i.e. when `item` is null or undefined), the\n * form will be automatically cleared, allowing to submit another new item.\n * In order to keep editing the same item after submitting, set the `item`\n * prop to the new item.\n */\n onSubmitSuccess?({ item }: SubmitEvent<Value<M>>): void;\n /**\n * A callback that will be called if an unexpected error occurs while\n * deleting an item.\n */\n onDeleteError?({ error }: DeleteErrorEvent): void;\n /**\n * A callback that will be called after the form has been successfully\n * deleted.\n */\n onDeleteSuccess?({ item }: DeleteEvent<Value<M>>): void;\n }>;\n\n/**\n * Auto Form is a component that automatically generates a form for editing,\n * updating and deleting items from a backend service.\n *\n * Example usage:\n * ```tsx\n * import { AutoForm } from '@vaadin/hilla-react-crud';\n * import PersonService from 'Frontend/generated/endpoints';\n * import PersonModel from 'Frontend/generated/com/example/application/Person';\n *\n * <AutoForm\n * service={PersonService}\n * model={PersonModel}\n * onSubmitSuccess={({ item }) => {\n * console.log('Submitted item:', item);\n * }}\n * />\n * ```\n */\nexport function AutoForm<M extends AbstractModel>({\n service,\n model,\n itemIdProperty,\n item = emptyItem,\n onSubmitError,\n onSubmitSuccess,\n disabled,\n layoutRenderer: LayoutRenderer,\n visibleFields,\n hiddenFields,\n formLayoutProps,\n fieldOptions,\n style,\n id,\n className,\n deleteButtonVisible,\n onDeleteSuccess,\n onDeleteError,\n}: AutoFormProps<M>): JSX.Element {\n const form = useForm(model, {\n onSubmit: async (formItem) => service.save(formItem),\n });\n const formErrorRef = useRef<HTMLDivElement>(null);\n const [formError, setFormError] = useState<JSX.Element | string>('');\n const [showDeleteDialog, setShowDeleteDialog] = useState(false);\n const modelInfo = useMemo(() => new ModelInfo(model, itemIdProperty), [model]);\n\n const isEditMode = item !== undefined && item !== null && item !== emptyItem;\n const showDeleteButton = deleteButtonVisible && isEditMode && modelInfo.idProperty;\n const isSubmitDisabled = !!disabled || (isEditMode && !form.dirty);\n\n useEffect(() => {\n if (item !== emptyItem) {\n form.read(item);\n } else {\n form.clear();\n }\n }, [item]);\n\n useEffect(() => {\n formErrorRef.current?.scrollIntoView({ behavior: 'smooth', block: 'end' });\n }, [formError]);\n\n function handleSubmitError(error: unknown) {\n if (error instanceof ValidationError) {\n const nonPropertyErrorMessages = error.errors\n .filter((validationError) => !validationError.property || typeof validationError.property === 'string')\n .map((validationError) => {\n const property =\n validationError.property && typeof validationError.property === 'string'\n ? `${validationError.property}: `\n : '';\n return `${property}${validationError.validatorMessage ?? validationError.message}`;\n });\n if (nonPropertyErrorMessages.length > 0) {\n setFormError(\n <div ref={formErrorRef}>\n Validation errors:\n <ul>\n {nonPropertyErrorMessages.map((message, index) => (\n <li key={index}>{message}</li>\n ))}\n </ul>\n </div>,\n );\n }\n } else if (error instanceof EndpointError) {\n if (onSubmitError) {\n onSubmitError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n }\n\n async function handleSubmit(): Promise<void> {\n try {\n setFormError('');\n const newItem = await form.submit();\n if (newItem === undefined) {\n // If update returns an empty object, then no update was performed\n throw new EndpointError('No update performed');\n } else if (onSubmitSuccess) {\n onSubmitSuccess({ item: newItem });\n }\n // Automatically clear the form after submitting a new item.\n // Otherwise, there would be no way for the developer to clear it, as the\n // there is no new value to set for the item prop to trigger the above\n // effect in case the prop is already null, undefined or the empty item.\n if (!item || item === emptyItem) {\n form.clear();\n }\n } catch (error) {\n handleSubmitError(error);\n }\n }\n\n function deleteItem() {\n setShowDeleteDialog(true);\n }\n\n async function confirmDelete() {\n // At this point, item can not be null or emptyItem\n const deletedItem = item as Value<M>;\n try {\n const idProperty = modelInfo.idProperty!;\n // eslint-disable-next-line\n const id = (item as any)[idProperty.name];\n await service.delete(id);\n if (onDeleteSuccess) {\n onDeleteSuccess({ item: deletedItem });\n }\n } catch (error) {\n if (error instanceof EndpointError) {\n if (onDeleteError) {\n onDeleteError({ error, setMessage: setFormError });\n } else {\n setFormError(error.message);\n }\n } else {\n throw error;\n }\n } finally {\n setShowDeleteDialog(false);\n }\n }\n\n function cancelDelete() {\n setShowDeleteDialog(false);\n }\n\n const handleKeyDown = (event: KeyboardEvent): void => {\n if (event.target instanceof HTMLTextAreaElement) {\n return;\n }\n if (event.key === 'Enter' && !isSubmitDisabled) {\n // eslint-disable-next-line no-void\n void handleSubmit();\n }\n };\n\n function createAutoFormField(propertyInfo: PropertyInfo): JSX.Element {\n const fieldOptionsForProperty = fieldOptions?.[propertyInfo.name] ?? {};\n\n return (\n <AutoFormField\n key={propertyInfo.name}\n propertyInfo={propertyInfo}\n form={form}\n disabled={disabled}\n options={fieldOptionsForProperty}\n />\n );\n }\n\n let visibleProperties = visibleFields ? modelInfo.getProperties(visibleFields) : getDefaultProperties(modelInfo);\n\n // When using `hiddenFields`, remove fields to hide using their `name`\n if (hiddenFields) {\n visibleProperties = visibleProperties.filter(({ name }) => !hiddenFields.includes(name));\n }\n\n const fields = visibleProperties.map(createAutoFormField);\n\n const layout = LayoutRenderer ? (\n <LayoutRenderer form={form}>{fields}</LayoutRenderer>\n ) : (\n <FormLayout {...formLayoutProps}>{fields}</FormLayout>\n );\n\n return (\n <div className={`auto-form ${className ?? ''}`} id={id} style={style} data-testid=\"auto-form\">\n <VerticalLayout className=\"auto-form-fields\" onKeyDown={handleKeyDown}>\n {layout}\n {formError ? <div style={{ color: 'var(--lumo-error-color)' }}>{formError}</div> : <></>}\n </VerticalLayout>\n <div className=\"auto-form-toolbar\">\n <Button\n theme=\"primary\"\n disabled={isSubmitDisabled}\n // eslint-disable-next-line @typescript-eslint/no-misused-promises\n onClick={handleSubmit}\n >\n Submit\n </Button>\n {form.dirty ? (\n <Button theme=\"tertiary\" onClick={() => form.reset()}>\n Discard\n </Button>\n ) : null}\n {showDeleteButton && (\n <Button className=\"auto-form-delete-button\" theme=\"tertiary error\" onClick={deleteItem}>\n Delete...\n </Button>\n )}\n </div>\n {showDeleteDialog && (\n <ConfirmDialog\n opened\n header=\"Delete item\"\n confirmTheme=\"error\"\n cancelButtonVisible\n // eslint-disable-next-line\n onConfirm={confirmDelete}\n onCancel={cancelDelete}\n >\n Are you sure you want to delete the selected item?\n </ConfirmDialog>\n )}\n </div>\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["id"]
|
|
7
7
|
}
|
package/crud.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ import type Pageable from './types/com/vaadin/hilla/mappedtypes/Pageable';
|
|
|
3
3
|
|
|
4
4
|
export interface FormService<T> {
|
|
5
5
|
save(value: T): Promise<T | undefined>;
|
|
6
|
+
|
|
6
7
|
delete(id: any): Promise<void>;
|
|
7
8
|
}
|
|
8
9
|
|
|
@@ -10,6 +11,7 @@ export interface ListService<T> {
|
|
|
10
11
|
list(request: Pageable, filter: FilterUnion | undefined): Promise<T[]>;
|
|
11
12
|
}
|
|
12
13
|
|
|
14
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
13
15
|
export interface CountService<T> {
|
|
14
16
|
count(filter: FilterUnion | undefined): Promise<number>;
|
|
15
17
|
}
|
package/index.js
CHANGED
|
@@ -2,7 +2,7 @@ function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
|
|
|
2
2
|
vaadinObj.registrations ??= [];
|
|
3
3
|
vaadinObj.registrations.push({
|
|
4
4
|
is: feature ? `${"@vaadin/hilla-react-crud"}/${feature}` : "@vaadin/hilla-react-crud",
|
|
5
|
-
version: "24.
|
|
5
|
+
version: "24.7.0-alpha10"
|
|
6
6
|
});
|
|
7
7
|
}
|
|
8
8
|
export * from "./autogrid-feature.js";
|
package/locale.js
CHANGED
package/locale.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["src/locale.ts"],
|
|
4
|
-
"sourcesContent": ["import { DatePickerElement, type DatePickerDate, type DatePickerI18n } from '@vaadin/react-components/DatePicker.js';\nimport { DateTimePickerElement, type DateTimePickerI18n } from '@vaadin/react-components/DateTimePicker.js';\nimport { createContext, useContext, useMemo } from 'react';\n\nexport const LocaleContext = createContext(navigator.language);\n\nfunction getFormatRegex(format: Intl.DateTimeFormat) {\n const sampleDate = new Date(1234, 5 - 1, 6);\n const formattedSample = format.format(sampleDate);\n const pattern = formattedSample\n .replace('1234', '(?<year>\\\\d+)')\n .replace('05', '(?<month>\\\\d+)')\n .replace('5', '(?<month>\\\\d+)')\n .replace('06', '(?<day>\\\\d+)')\n .replace('6', '(?<day>\\\\d+)');\n\n return new RegExp(pattern, 'u');\n}\n\nfunction tryFormatDate(formatter: Intl.DateTimeFormat, value?: string): string {\n try {\n return value ? formatter.format(new Date(value)) : '';\n } catch
|
|
5
|
-
"mappings": "AAAA,SAAS,yBAAmE;AAC5E,SAAS,6BAAsD;AAC/D,SAAS,eAAe,YAAY,eAAe;AAE5C,MAAM,gBAAgB,cAAc,UAAU,QAAQ;AAE7D,SAAS,eAAe,QAA6B;AACnD,QAAM,aAAa,IAAI,KAAK,MAAM,IAAI,GAAG,CAAC;AAC1C,QAAM,kBAAkB,OAAO,OAAO,UAAU;AAChD,QAAM,UAAU,gBACb,QAAQ,QAAQ,eAAe,EAC/B,QAAQ,MAAM,gBAAgB,EAC9B,QAAQ,KAAK,gBAAgB,EAC7B,QAAQ,MAAM,cAAc,EAC5B,QAAQ,KAAK,cAAc;AAE9B,SAAO,IAAI,OAAO,SAAS,GAAG;AAChC;AAEA,SAAS,cAAc,WAAgC,OAAwB;AAC7E,MAAI;AACF,WAAO,QAAQ,UAAU,OAAO,IAAI,KAAK,KAAK,CAAC,IAAI;AAAA,EACrD,
|
|
4
|
+
"sourcesContent": ["import { DatePickerElement, type DatePickerDate, type DatePickerI18n } from '@vaadin/react-components/DatePicker.js';\nimport { DateTimePickerElement, type DateTimePickerI18n } from '@vaadin/react-components/DateTimePicker.js';\nimport { createContext, useContext, useMemo } from 'react';\n\nexport const LocaleContext = createContext(navigator.language);\n\nfunction getFormatRegex(format: Intl.DateTimeFormat) {\n const sampleDate = new Date(1234, 5 - 1, 6);\n const formattedSample = format.format(sampleDate);\n const pattern = formattedSample\n .replace('1234', '(?<year>\\\\d+)')\n .replace('05', '(?<month>\\\\d+)')\n .replace('5', '(?<month>\\\\d+)')\n .replace('06', '(?<day>\\\\d+)')\n .replace('6', '(?<day>\\\\d+)');\n\n return new RegExp(pattern, 'u');\n}\n\nfunction tryFormatDate(formatter: Intl.DateTimeFormat, value?: string): string {\n try {\n return value ? formatter.format(new Date(value)) : '';\n } catch {\n return '';\n }\n}\n\nexport class LocaleFormatter {\n readonly #date: Intl.DateTimeFormat;\n readonly #localTime: Intl.DateTimeFormat;\n readonly #localDateTime: Intl.DateTimeFormat;\n readonly #integer: Intl.NumberFormat;\n readonly #decimal: Intl.NumberFormat;\n readonly #parsePattern: RegExp;\n\n constructor(locale?: string) {\n this.#date = new Intl.DateTimeFormat(locale);\n\n this.#localTime = new Intl.DateTimeFormat(locale, {\n hour: 'numeric',\n minute: 'numeric',\n });\n\n this.#localDateTime = new Intl.DateTimeFormat(locale, {\n day: 'numeric',\n month: 'numeric',\n year: 'numeric',\n hour: 'numeric',\n minute: 'numeric',\n });\n\n this.#integer = new Intl.NumberFormat(locale, {\n maximumFractionDigits: 0,\n });\n\n this.#decimal = new Intl.NumberFormat(locale, {\n maximumFractionDigits: 2,\n minimumFractionDigits: 2,\n });\n\n this.#parsePattern = getFormatRegex(this.#date);\n }\n\n formatDate(value?: string): string;\n formatDate(value: DatePickerDate): string;\n formatDate(value?: DatePickerDate | string): string {\n if (typeof value === 'object') {\n const { year, month, day } = value;\n const date = new Date();\n date.setFullYear(year, month, day);\n return this.#date.format(date);\n }\n\n return tryFormatDate(this.#date, value);\n }\n\n formatLocalTime(value?: string): string {\n return tryFormatDate(this.#localTime, `2000-01-01T${value}`);\n }\n\n formatLocalDateTime(value?: string): string {\n return tryFormatDate(this.#localDateTime, value);\n }\n\n formatInteger(value?: number): string {\n return value && Number.isFinite(value) ? this.#integer.format(value) : '';\n }\n\n formatDecimal(value?: number): string {\n return value && Number.isFinite(value) ? this.#decimal.format(value) : '';\n }\n\n parse(dateString: string): DatePickerDate | undefined {\n const match = this.#parsePattern.exec(dateString);\n const year = Number(match?.groups?.year);\n const month = Number(match?.groups?.month) - 1;\n const day = Number(match?.groups?.day);\n\n // Verify that the parsed date is valid\n const dateInstance = new Date();\n dateInstance.setFullYear(year, month, day);\n\n if (dateInstance.getFullYear() !== year || dateInstance.getMonth() !== month || dateInstance.getDate() !== day) {\n return undefined;\n }\n\n return { year, month, day };\n }\n}\n\nexport function useLocaleFormatter(): LocaleFormatter {\n const locale = useContext(LocaleContext);\n return useMemo(() => new LocaleFormatter(locale), [locale]);\n}\n\nconst defaultDatePickerI18n = new DatePickerElement().i18n;\n\nexport function useDatePickerI18n(): DatePickerI18n {\n const formatter = useLocaleFormatter();\n\n return useMemo(\n () => ({\n ...defaultDatePickerI18n,\n formatDate(value) {\n return formatter.formatDate(value);\n },\n parseDate(value) {\n return formatter.parse(value);\n },\n }),\n [formatter],\n );\n}\n\nconst defaultDateTimePickerI18n = new DateTimePickerElement().i18n;\n\nexport function useDateTimePickerI18n(): DateTimePickerI18n {\n const datePickerI18n = useDatePickerI18n();\n\n return useMemo(\n () => ({\n ...defaultDateTimePickerI18n,\n ...datePickerI18n,\n }),\n [datePickerI18n],\n );\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/hilla-react-crud",
|
|
3
|
-
"version": "24.
|
|
3
|
+
"version": "24.7.0-alpha10",
|
|
4
4
|
"description": "Hilla CRUD utils for React",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"build:copy": "cd src && copyfiles **/*.d.ts ..",
|
|
24
24
|
"lint": "eslint src test",
|
|
25
25
|
"lint:fix": "eslint src test --fix",
|
|
26
|
-
"test": "
|
|
27
|
-
"test:coverage": "
|
|
28
|
-
"test:watch": "
|
|
26
|
+
"test": "vitest --run",
|
|
27
|
+
"test:coverage": "vitest --run --coverage",
|
|
28
|
+
"test:watch": "vitest",
|
|
29
29
|
"typecheck": "tsc --noEmit"
|
|
30
30
|
},
|
|
31
31
|
"exports": {
|
|
@@ -56,34 +56,13 @@
|
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@vaadin/hilla-frontend": "24.
|
|
60
|
-
"@vaadin/hilla-lit-form": "24.
|
|
61
|
-
"@vaadin/hilla-react-form": "24.
|
|
62
|
-
"@vaadin/react-components": "24.
|
|
59
|
+
"@vaadin/hilla-frontend": "24.7.0-alpha10",
|
|
60
|
+
"@vaadin/hilla-lit-form": "24.7.0-alpha10",
|
|
61
|
+
"@vaadin/hilla-react-form": "24.7.0-alpha10",
|
|
62
|
+
"@vaadin/react-components": "24.7.0-alpha7"
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
|
-
"react": "
|
|
66
|
-
"react-dom": "
|
|
67
|
-
},
|
|
68
|
-
"devDependencies": {
|
|
69
|
-
"@testing-library/dom": "^10.4.0",
|
|
70
|
-
"@testing-library/react": "^16.1.0",
|
|
71
|
-
"@testing-library/user-event": "^14.5.2",
|
|
72
|
-
"@types/chai": "^4.3.6",
|
|
73
|
-
"@types/chai-as-promised": "^7.1.6",
|
|
74
|
-
"@types/chai-dom": "^1.11.1",
|
|
75
|
-
"@types/mocha": "^10.0.2",
|
|
76
|
-
"@types/react": "^18.3.17",
|
|
77
|
-
"@types/react-dom": "^18",
|
|
78
|
-
"@types/sinon": "^10.0.20",
|
|
79
|
-
"@types/sinon-chai": "^3.2.12",
|
|
80
|
-
"@types/validator": "^13.12.2",
|
|
81
|
-
"chai": "^5.1.2",
|
|
82
|
-
"chai-as-promised": "^7.1.2",
|
|
83
|
-
"chai-dom": "^1.12.0",
|
|
84
|
-
"karma-viewport": "^1.0.9",
|
|
85
|
-
"sinon": "^16.0.0",
|
|
86
|
-
"sinon-chai": "^3.7.0",
|
|
87
|
-
"typescript": "5.7.2"
|
|
65
|
+
"react": "18 || 19",
|
|
66
|
+
"react-dom": "18 || 19"
|
|
88
67
|
}
|
|
89
68
|
}
|
package/util.js
CHANGED
|
@@ -2,7 +2,7 @@ function __REGISTER__(feature, vaadinObj = window.Vaadin ??= {}) {
|
|
|
2
2
|
vaadinObj.registrations ??= [];
|
|
3
3
|
vaadinObj.registrations.push({
|
|
4
4
|
is: feature ? `${"@vaadin/hilla-react-crud"}/${feature}` : "@vaadin/hilla-react-crud",
|
|
5
|
-
version: "24.
|
|
5
|
+
version: "24.7.0-alpha10"
|
|
6
6
|
});
|
|
7
7
|
}
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|