@visns-studio/visns-components 5.26.0 → 5.26.1

package/package.json

@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.26.0",
+    "version": "5.26.1",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Form.jsx

@@ -9,7 +9,7 @@ import moment from 'moment';
 import parse from 'html-react-parser';
 import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { X } from 'lucide-react';
+import { Info, X } from 'lucide-react';
 import imageCompression from 'browser-image-compression';
 import { confirmDialog } from './utils/ConfirmDialog';
 
@@ -3376,82 +3376,128 @@ function Form({
                                             </div>
                                         );
                                     } else if (formType === 'update') {
+                                        const saveAnotherDisableWhen =
+                                            formSettings.update?.saveAnother
+                                                ?.disableWhen;
+                                        const saveAnotherDisabled =
+                                            saveAnotherDisableWhen
+                                                ? evaluateDisableWhen(
+                                                      saveAnotherDisableWhen,
+                                                      formData
+                                                  )
+                                                : false;
+
                                         return (
-                                            <div
-                                                className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
-                                            >
-                                                <button
-                                                    className={styles.btn}
-                                                    onClick={handleSubmit}
-                                                    data-type="save"
+                                            <>
+                                                <div
+                                                    className={`${styles.formItem} ${styles.fwItem} ${styles.buttonContainer}`}
                                                 >
-                                                    Save & Close
-                                                </button>
-                                                {formSettings.update?.hasOwnProperty(
-                                                    'saveAnother'
-                                                ) &&
-                                                    (() => {
-                                                        const disableWhen =
-                                                            formSettings.update
-                                                                .saveAnother
-                                                                ?.disableWhen;
-                                                        const isDisabled =
-                                                            disableWhen
-                                                                ? evaluateDisableWhen(
-                                                                      disableWhen,
-                                                                      formData
-                                                                  )
-                                                                : false;
-
-                                                        return (
-                                                            <button
-                                                                className={
-                                                                    styles.btn
-                                                                }
-                                                                onClick={
-                                                                    handleSubmit
-                                                                }
-                                                                data-type="saveAnother"
-                                                                disabled={
-                                                                    isDisabled
-                                                                }
-                                                                title={
-                                                                    isDisabled
-                                                                        ? disableWhen?.message ||
-                                                                          ''
-                                                                        : undefined
-                                                                }
-                                                                style={
-                                                                    isDisabled
-                                                                        ? {
-                                                                              opacity: 0.5,
-                                                                              cursor: 'not-allowed',
-                                                                          }
-                                                                        : undefined
-                                                                }
-                                                            >
-                                                                {formSettings
-                                                                    .update
-                                                                    .saveAnother
-                                                                    ?.label ||
-                                                                    'Save & Create Another'}
-                                                            </button>
-                                                        );
-                                                    })()}
-                                                {formSettings.update?.hasOwnProperty(
-                                                    'saveExit'
-                                                ) && (
                                                     <button
                                                         className={styles.btn}
                                                         onClick={handleSubmit}
-                                                        data-type="saveExit"
+                                                        data-type="save"
                                                     >
-                                                        {formSettings.update
-                                                            .saveExit?.label ||
-                                                            'Save & Exit'}
+                                                        Save & Close
                                                     </button>
+                                                    {formSettings.update?.hasOwnProperty(
+                                                        'saveAnother'
+                                                    ) && (
+                                                        <button
+                                                            className={
+                                                                styles.btn
+                                                            }
+                                                            onClick={
+                                                                handleSubmit
+                                                            }
+                                                            data-type="saveAnother"
+                                                            disabled={
+                                                                saveAnotherDisabled
+                                                            }
+                                                            style={
+                                                                saveAnotherDisabled
+                                                                    ? {
+                                                                          opacity: 0.5,
+                                                                          cursor: 'not-allowed',
+                                                                      }
+                                                                    : undefined
+                                                            }
+                                                        >
+                                                            {formSettings
+                                                                .update
+                                                                .saveAnother
+                                                                ?.label ||
+                                                                'Save & Create Another'}
+                                                        </button>
+                                                    )}
+                                                    {formSettings.update?.hasOwnProperty(
+                                                        'saveExit'
+                                                    ) && (
+                                                        <button
+                                                            className={
+                                                                styles.btn
+                                                            }
+                                                            onClick={
+                                                                handleSubmit
+                                                            }
+                                                            data-type="saveExit"
+                                                        >
+                                                            {formSettings
+                                                                .update
+                                                                .saveExit
+                                                                ?.label ||
+                                                                'Save & Exit'}
+                                                        </button>
+                                                    )}
+                                                </div>
+                                                {saveAnotherDisabled && (
+                                                    /* Always-visible note (hover
+                                                       tooltips don't exist on
+                                                       tablets) explaining why the
+                                                       button is disabled */
+                                                    <div
+                                                        className={`${styles.formItem} ${styles.fwItem}`}
+                                                        style={{
+                                                            display: 'flex',
+                                                            justifyContent:
+                                                                'flex-end',
+                                                        }}
+                                                    >
+                                                        <div
+                                                            style={{
+                                                                display: 'flex',
+                                                                alignItems:
+                                                                    'center',
+                                                                gap: '8px',
+                                                                fontSize:
+                                                                    '0.85rem',
+                                                                color: '#1e40af',
+                                                                backgroundColor:
+                                                                    '#eff6ff',
+                                                                border: '1px solid #bfdbfe',
+                                                                borderRadius:
+                                                                    '6px',
+                                                                padding:
+                                                                    '8px 12px',
+                                                                marginTop:
+                                                                    '8px',
+                                                                maxWidth:
+                                                                    '100%',
+                                                            }}
+                                                        >
+                                                            <Info
+                                                                size={16}
+                                                                style={{
+                                                                    flexShrink: 0,
+                                                                }}
+                                                            />
+                                                            <span>
+                                                                {saveAnotherDisableWhen?.message ||
+                                                                    'This action is currently unavailable.'}
+                                                            </span>
+                                                        </div>
+                                                    </div>
                                                 )}
-                                            </div>
+                                            </>
                                         );
                                     } else {
                                         return (