@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
95 lines (94 loc) • 3.18 kB
JavaScript
"use client";
import React, { useCallback, useContext, useMemo } from 'react';
import clsx from 'clsx';
import { Button } from "../../../../components/index.js";
import IterateItemContext from "../IterateItemContext.js";
import { useArrayLimit, useItemPath, useSwitchContainerMode } from "../hooks/index.js";
import { omitDataValueReadWriteProps } from "../../types.js";
import { add } from "../../../../icons/index.js";
import DataContext from "../../DataContext/Context.js";
import useDataValue from "../../hooks/useDataValue.js";
import { usePath } from "../../hooks/index.js";
import { convertJsxToString } from "../../../../shared/component-helper.js";
import withComponentMarkers from "../../../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx } from "react/jsx-runtime";
function PushButton(props) {
const {
handlePathChange
} = useContext(DataContext) || {};
const iterateItemContext = useContext(IterateItemContext);
const {
handlePush
} = iterateItemContext !== null && iterateItemContext !== void 0 ? iterateItemContext : {};
const {
pushValue,
className,
path,
itemPath,
text,
children,
...restProps
} = props;
const buttonProps = omitDataValueReadWriteProps(restProps);
const {
absolutePath
} = useItemPath(itemPath);
const {
path: relativePath
} = usePath({
path,
itemPath
});
const arrayValue = useDataValue().getValueByPath(path || absolutePath);
const {
hasReachedLimit,
setShowStatus
} = useArrayLimit(path);
if (arrayValue !== undefined && !Array.isArray(arrayValue)) {
throw new Error('PushButton received a non-array value');
}
const {
setLastItemContainerMode
} = useSwitchContainerMode(path);
const handleClick = useCallback(async () => {
if (hasReachedLimit) {
setShowStatus(true);
return;
}
const newValue = typeof pushValue === 'function' ? pushValue(arrayValue) : pushValue;
if (handlePush && !absolutePath) {
handlePush(newValue);
} else {
await handlePathChange?.(absolutePath || relativePath, [...(arrayValue !== null && arrayValue !== void 0 ? arrayValue : []), newValue]);
}
if (!absolutePath) {
setTimeout(() => {
setLastItemContainerMode('view');
}, 100);
}
}, [arrayValue, absolutePath, handlePathChange, handlePush, hasReachedLimit, relativePath, pushValue, setLastItemContainerMode, setShowStatus]);
const content = useMemo(() => {
if (children || text) {
const str = convertJsxToString(children || text);
if (str.includes('{nextItemNo}')) {
const nextItemNo = (arrayValue?.length || 0) + 1;
return str.replace('{nextItemNo}', String(nextItemNo));
}
}
return children || text;
}, [arrayValue?.length, children, text]);
return _jsx(Button, {
className: clsx('dnb-forms-iterate-push-button', className),
variant: "secondary",
icon: add,
iconPosition: "left",
onClick: handleClick,
...buttonProps,
children: content
});
}
withComponentMarkers(PushButton, {
_supportsSpacingProps: true
});
export default PushButton;
//# sourceMappingURL=PushButton.js.map