@baseplate-dev/ui-components
Version:
Shared UI component library
32 lines • 1.94 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { MdOutlineSave } from 'react-icons/md';
import { cn } from '#src/utils/index.js';
import { Button } from '../button/button.js';
/**
* A fixed bottom bar with form action buttons (Reset and Save).
* Typically used at the bottom of forms to provide consistent action buttons.
*
* Can be used in two ways:
* 1. With a react-hook-form instance: `<FormActionBar form={form} />`
* 2. With individual props: `<FormActionBar disabled={isDisabled} onReset={handleReset} />`
*/
function FormActionBar(props) {
const { className, disabled, children, form, onReset, allowSaveWithoutDirty, ...rest } = props;
// Determine values based on whether form prop is provided
const { formState } = form ?? {};
const defaultSaveIsDisabled = formState
? formState.isSubmitting || (!allowSaveWithoutDirty && !formState.isDirty)
: false;
const defaultResetIsDisabled = formState
? formState.isSubmitting || !formState.isDirty
: false;
const isSaveDisabled = disabled ?? defaultSaveIsDisabled;
const isResetDisabled = disabled ?? defaultResetIsDisabled;
const handleReset = () => {
form?.reset();
onReset?.();
};
return (_jsx("div", { "data-slot": "form-action-bar", className: cn('absolute inset-x-0 bottom-0 z-50 flex min-h-[var(--action-bar-height,52px)] items-center space-x-4 border-t border-border bg-background pl-4', className), ...rest, children: children ?? (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: handleReset, disabled: isResetDisabled, children: "Reset" }), _jsxs(Button, { variant: "default", size: "sm", type: "submit", disabled: isSaveDisabled, children: [_jsx(MdOutlineSave, { className: "mr-2 h-4 w-4" }), "Save"] })] })) }));
}
export { FormActionBar };
//# sourceMappingURL=form-action-bar.js.map