@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
90 lines (89 loc) • 3.1 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useContext, useMemo } from 'react';
import classnames from 'classnames';
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";
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 React.createElement(Button, _extends({
className: classnames('dnb-forms-iterate-push-button', className),
variant: "secondary",
icon: add,
icon_position: "left",
on_click: handleClick
}, buttonProps), content);
}
PushButton._supportsSpacingProps = true;
export default PushButton;
//# sourceMappingURL=PushButton.js.map