@axinom/mosaic-ui 0.74.0 → 0.74.1

package/src/components/FormStation/ModalForm/ModalForm.tsx

@@ -0,0 +1,80 @@
+import clsx from 'clsx';
+import React, { type PropsWithChildren } from 'react';
+import type { Data } from '../../../types/data';
+import { FormStation, type FormStationProps } from '../FormStation';
+import classes from './ModalForm.module.scss';
+
+export type ModalFormProps<
+  TValues extends Data,
+  TSubmitResponse = unknown,
+> = Omit<
+  FormStationProps<TValues, TSubmitResponse>,
+  | 'cancelNavigationUrl'
+  | 'onCancel'
+  | 'onSaveCompleted'
+  | 'saveOnNavigate'
+  | 'defaultTitle'
+  | 'titleProperty'
+  | 'setTabTitle'
+> & {
+  /** The title of the form, shown in the modal's header */
+  title: string;
+
+  /**
+   * Closes the modal hosting the form. Pass the `closeModal` callback the
+   * `useModal` hook provides to the modal component.
+   */
+  closeModal: () => void;
+
+  /**
+   * The width of the form inside the modal (as CSS width).
+   * Defaults to the full width the modal leaves over.
+   */
+  width?: string;
+};
+
+/**
+ * This component is the basic building block for forms shown inside a modal.
+ *
+ * Its header actions are bound to the hosting modal instead of the router:
+ * 'Cancel' discards the changes and closes the modal, 'Save' calls `saveData`
+ * and closes the modal once the data was saved. A failed save keeps the modal
+ * open and shows the error.
+ *
+ * Use it with the `useModal` hook, or with `useModalForm`, which combines both.
+ *
+ * @example
+ * const { ModalWrapper, openModal } = useModal(({ closeModal }) => (
+ *   <ModalForm<Genre>
+ *     title="Edit Genre"
+ *     closeModal={closeModal}
+ *     initialData={{ loading, data }}
+ *     saveData={saveData}
+ *   >
+ *     <Field name="title" label="Title" as={SingleLineTextField} />
+ *   </ModalForm>
+ * ));
+ */
+export const ModalForm = <TValues extends Data, TSubmitResponse = unknown>({
+  title,
+  closeModal,
+  width,
+  className,
+  ...props
+}: PropsWithChildren<
+  ModalFormProps<TValues, TSubmitResponse>
+>): JSX.Element => (
+  <div className={classes.container} style={{ width }}>
+    <FormStation<TValues, TSubmitResponse>
+      {...props}
+      defaultTitle={title}
+      onCancel={closeModal}
+      onSaveCompleted={closeModal}
+      // Navigating away is not a commit point for a modal - only 'Save' is.
+      saveOnNavigate={false}
+      // The modal is not a page of its own.
+      setTabTitle={false}
+      className={clsx(classes.station, className)}
+    />
+  </div>
+);

package/src/components/FormStation/ModalForm/useModalForm.tsx

@@ -0,0 +1,30 @@
+import React, { type PropsWithChildren } from 'react';
+import type { Data } from '../../../types/data';
+import { type UseModalResult, useModal } from '../../Modal';
+import { ModalForm, type ModalFormProps } from './ModalForm';
+
+export type UseModalFormOptions<
+  TValues extends Data,
+  TSubmitResponse = unknown,
+> = PropsWithChildren<
+  Omit<ModalFormProps<TValues, TSubmitResponse>, 'closeModal'>
+>;
+
+/**
+ * The `useModal` hook with a `ModalForm` already wired up: shows the form in a
+ * modal and returns the methods to control it.
+ *
+ * @example
+ * const { ModalWrapper, openModal } = useModalForm<Genre>({
+ *   title: 'Edit Genre',
+ *   initialData: { loading, data },
+ *   saveData,
+ *   children: <Field name="title" label="Title" as={SingleLineTextField} />,
+ * });
+ */
+export const useModalForm = <TValues extends Data, TSubmitResponse = unknown>(
+  options: UseModalFormOptions<TValues, TSubmitResponse>,
+): UseModalResult =>
+  useModal(({ closeModal }) => (
+    <ModalForm<TValues, TSubmitResponse> {...options} closeModal={closeModal} />
+  ));

package/src/components/FormStation/index.ts

@@ -3,3 +3,8 @@ export { Details, type DetailsProps } from './Details/Details';
 export { FormGrid } from './FormGrid';
 export { FormStation, type FormStationProps } from './FormStation';
 export * from './FormStation.models';
+export { ModalForm, type ModalFormProps } from './ModalForm/ModalForm';
+export {
+  useModalForm,
+  type UseModalFormOptions,
+} from './ModalForm/useModalForm';

package/src/components/Modal/Modal.module.scss

@@ -16,7 +16,8 @@
   justify-content: center;
   z-index: 9999;
 
-  padding: 70px 30px 30px 30px;
+  padding: $modal-padding-top $modal-padding-side $modal-padding-bottom
+    $modal-padding-side;
   background-color: var(--modal-back-drop-color, $modal-back-drop-color);
 
   .child {
@@ -31,7 +32,8 @@
 
   // To avoid the Modal container padding overwritten by parent container
   &.container {
-    padding: 70px 30px 30px 30px;
+    padding: $modal-padding-top $modal-padding-side $modal-padding-bottom
+      $modal-padding-side;
   }
 }
 
@@ -60,4 +62,3 @@
     transform: translateY(100vh);
   }
 }
-

package/src/styles/variables.scss

@@ -305,6 +305,10 @@ $fallback-image-bg-color: var(--mosaic-neutral-3, #efefef);
 /* Modal */
 $modal-back-drop-color: rgba(169, 169, 169, 0.75);
 $modal-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+// Back-drop padding. Content that fills the modal sizes itself against these.
+$modal-padding-top: 70px;
+$modal-padding-bottom: 30px;
+$modal-padding-side: 30px;
 
 /* ProgressBar */
 $progress-bar-processing-indicator: var(--mosaic-secondary);