@axinom/mosaic-ui 0.63.0-rc.3 → 0.63.0-rc.5

package/src/components/FieldSelection/FieldSelection.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { noop } from '../../helpers/utils';
 import { Accordion, AccordionItem } from '../Accordion';
 import { Button, ButtonContext } from '../Buttons';
 import { Select } from '../FormElements';
@@ -8,6 +9,8 @@ import classes from './FieldSelection.scss';
 
 interface FieldSelectionProps {
   className?: string;
+  onFieldAdded?: (field: string) => void;
+  onFieldRemoved?: (field: string) => void;
 }
 
 interface FieldDefinition {
@@ -19,6 +22,8 @@ interface FieldDefinition {
 
 export const FieldSelection: React.FC<FieldSelectionProps> = ({
   className,
+  onFieldAdded = noop,
+  onFieldRemoved = noop,
   children,
 }) => {
   useEffect(() => {
@@ -70,6 +75,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 ...currentFields,
                 newField,
               ]);
+              onFieldAdded(newField.value);
             }
           }}
         />
@@ -88,6 +94,7 @@ export const FieldSelection: React.FC<FieldSelectionProps> = ({
                 setAvailableFields((currentFields) =>
                   [...currentFields, field].sort((a, b) => a.index - b.index),
                 );
+                onFieldRemoved(field.value);
               }}
             />
           }

package/src/components/FormStation/FormStation.tsx

@@ -39,6 +39,16 @@ export interface FormStationProps<
   actionsWidth?: string;
   /** If set to true, the save header action is shown. (default: true) */
   showSaveHeaderAction?: boolean;
+  /**
+   * If set, this will override the default title of the save header action.
+   * This is useful when you want to have a custom title for the save action.
+   */
+  saveHeaderActionTitle?: string;
+  /**
+   * If set, this will override the default notification message shown
+   * after a successful save.
+   */
+  saveNotificationMessage?: string;
   /**
    * An object containing the initial data of the form.
    */
@@ -91,6 +101,8 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
   className = '',
   setTabTitle = true,
   showSaveHeaderAction = true,
+  saveHeaderActionTitle,
+  saveNotificationMessage,
 }: PropsWithChildren<
   FormStationProps<TValues, TSubmitResponse>
 >): JSX.Element => {
@@ -103,7 +115,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
     setStationError,
     isFormSubmitting,
     lastSubmittedResponse,
-  } = useDataProvider(initialData, saveData);
+  } = useDataProvider(initialData, saveData, saveNotificationMessage);
 
   const { setValidationError, validationWatcher } = useValidationError(
     stationError,
@@ -137,6 +149,7 @@ export const FormStation = <TValues extends Data, TSubmitResponse = unknown>({
             className={classes.header}
             setTabTitle={setTabTitle}
             showSaveHeaderAction={showSaveHeaderAction}
+            saveHeaderActionTitle={saveHeaderActionTitle}
           />
           {!bulkEditContext && (
             <SaveOnNavigate

package/src/components/FormStation/FormStationHeader/FormStationHeader.tsx

@@ -22,6 +22,7 @@ export const FormStationHeader: React.FC<
     cancelNavigationUrl?: string;
     setTabTitle?: boolean;
     showSaveHeaderAction?: boolean;
+    saveHeaderActionTitle?: string;
   }
 > = ({
   titleProperty,
@@ -31,6 +32,7 @@ export const FormStationHeader: React.FC<
   className,
   setTabTitle,
   showSaveHeaderAction,
+  saveHeaderActionTitle = 'Save',
 }) => {
   const { dirty, submitForm, resetForm } = useFormikContext<FormikValues>();
   const quickEditContext = useContext(QuickEditContext);
@@ -56,7 +58,7 @@ export const FormStationHeader: React.FC<
 
       if (showSaveHeaderAction) {
         actionItems.push({
-          label: 'Save',
+          label: saveHeaderActionTitle,
           icon: IconName.Save,
           kind: 'action',
           actionType: PageHeaderActionType.Context,
@@ -116,6 +118,7 @@ export const FormStationHeader: React.FC<
     history,
     quickEditContext,
     resetForm,
+    saveHeaderActionTitle,
     showSaveHeaderAction,
     submitForm,
   ]);

package/src/components/FormStation/helpers/useDataProvider.ts

@@ -20,6 +20,7 @@ import {
 export type FormStationDataProvider = <TValues extends Data, TSubmitResponse>(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   onSubmit: (
     values: TValues,
@@ -38,6 +39,7 @@ export const useDataProvider: FormStationDataProvider = <
 >(
   initialData: InitialFormData<TValues>,
   saveData: SaveDataFunction<TValues, TSubmitResponse>,
+  saveNotificationMessage?: string,
 ) => {
   const [stationError, setStationError] = useState<StationErrorStateType>();
   const [isFormSubmitting, setIsFormSubmitting] = useState<boolean>(false);
@@ -92,7 +94,9 @@ export const useDataProvider: FormStationDataProvider = <
           }
 
           showNotification({
-            title: 'Your changes were saved successfully.',
+            title:
+              saveNotificationMessage ??
+              'Your changes were saved successfully.',
             options: {
               type: 'success',
               autoClose: 1500,
@@ -115,7 +119,7 @@ export const useDataProvider: FormStationDataProvider = <
         setIsFormSubmitting(false);
       }
     },
-    [isFormSubmitting, initialData, saveData, setStationError],
+    [isFormSubmitting, initialData, saveData, saveNotificationMessage],
   );
 
   return {

package/src/styles/variables.scss

@@ -42,6 +42,7 @@ $accordion-item-text-color: $dark-gray;
 $accordion-item-hover-color: rgba($blue, 0.15);
 $accordion-item-border: 1px solid $light-gray;
 $accordion-item-arrow-color: $blue;
+$accordion-item-arrow-disabled-color: $gray;
 
 /* Explorer vars */
 $explorer-background-color: #ffffff;