@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
61 lines (60 loc) • 2.14 kB
JavaScript
"use client";
import React, { useCallback, useContext } from 'react';
import clsx from 'clsx';
import DataContext from "../../DataContext/Context.js";
import Button from "../../../../components/button/Button.js";
import SubmitIndicator from "../SubmitIndicator/index.js";
import useTranslation from "../../hooks/useTranslation.js";
import { send } from "../../../../icons/index.js";
import useId from "../../../../shared/helpers/useId.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function SubmitButton(props) {
const translations = useTranslation().SubmitButton;
const {
variant,
className,
showIndicator,
children,
text,
...rest
} = props;
const content = text || children || (variant === 'send' ? translations.sendText : translations.text);
const submitButtonId = useId();
const {
formState,
handleSubmit,
hasElementRef,
props: dataContextProps,
activeSubmitButtonId,
setActiveSubmitButtonId
} = useContext(DataContext) || {};
const {
isolate
} = dataContextProps || {};
const onClickHandler = useCallback(() => {
setActiveSubmitButtonId?.(submitButtonId);
if (!hasElementRef?.current) {
handleSubmit?.();
}
}, [hasElementRef, handleSubmit, setActiveSubmitButtonId, submitButtonId]);
const isActiveSubmitButton = !activeSubmitButtonId || activeSubmitButtonId === submitButtonId;
const indicatorState = showIndicator ? 'pending' : isActiveSubmitButton ? formState : undefined;
return _jsxs(Button, {
className: clsx('dnb-forms-submit-button', className),
onClick: onClickHandler,
type: isolate ? 'button' : 'submit',
variant: variant === 'secondary' ? 'secondary' : undefined,
icon: variant === 'send' ? send : null,
"data-form-submit-button-id": submitButtonId,
...rest,
children: [content, _jsx(SubmitIndicator, {
state: indicatorState
})]
});
}
withComponentMarkers(SubmitButton, {
_supportsSpacingProps: true
});
export default SubmitButton;
//# sourceMappingURL=SubmitButton.js.map