@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
180 lines • 6.87 kB
JavaScript
import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { useId, useRef, useState } from 'react';
import { FlexBoxAlignItems } from '../../enums/FlexBoxAlignItems.js';
import { FlexBoxDirection } from '../../enums/FlexBoxDirection.js';
import { APPLY_AUTOMATICALLY, CANCEL, PUBLIC, SAVE, SAVE_VIEW, SET_AS_DEFAULT, SPECIFY_VIEW_NAME, VARIANT_MANAGEMENT_ERROR_DUPLICATE, VIEW } from '../../i18n/i18n-defaults.js';
import { trimAndRemoveSpaces } from '../../internal/utils.js';
import { Bar } from '../../webComponents/Bar/index.js';
import { Button } from '../../webComponents/Button/index.js';
import { CheckBox } from '../../webComponents/CheckBox/index.js';
import { Dialog } from '../../webComponents/Dialog/index.js';
import { Input } from '../../webComponents/Input/index.js';
import { Label } from '../../webComponents/Label/index.js';
import { FlexBox } from '../FlexBox/index.js';
import { classNames, styleData } from './SaveViewDialog.module.css.js';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
export const SaveViewDialog = props => {
const {
onAfterClose,
handleSave,
selectedVariant,
showShare,
showApplyAutomatically,
showSetAsDefault,
variantNames,
saveViewInputProps,
onSaveViewCancel
} = props;
const saveViewDialogRef = useRef(null);
const inputRef = useRef(undefined);
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
useStylesheet(styleData, 'SaveViewDialog');
const uniqueId = useId();
const cancelText = i18nBundle.getText(CANCEL);
const saveText = i18nBundle.getText(SAVE);
const headingText = i18nBundle.getText(SAVE_VIEW);
const defaultCbLabel = i18nBundle.getText(SET_AS_DEFAULT);
const publicCbLabel = i18nBundle.getText(PUBLIC);
const applyAutomaticallyCbLabel = i18nBundle.getText(APPLY_AUTOMATICALLY);
const inputLabelText = i18nBundle.getText(VIEW);
const errorTextAlreadyExists = i18nBundle.getText(VARIANT_MANAGEMENT_ERROR_DUPLICATE);
const errorTextEmpty = i18nBundle.getText(SPECIFY_VIEW_NAME);
const [isDefault, setDefault] = useState(selectedVariant.isDefault);
const [isPublic, setPublic] = useState(selectedVariant.global);
const [applyAutomatically, setApplyAutomatically] = useState(selectedVariant.applyAutomatically);
const [variantName, setVariantName] = useState(selectedVariant.children);
const [variantNameInvalid, setVariantNameInvalid] = useState(false);
const [isInvalid, setIsInvalid] = useState(false);
const handleInputChange = e => {
if (typeof saveViewInputProps?.onInput === 'function') {
saveViewInputProps.onInput(e);
}
const trimmedValue = trimAndRemoveSpaces(e.target.value);
setVariantName(trimmedValue);
if (variantNames.includes(trimmedValue)) {
setVariantNameInvalid(errorTextAlreadyExists);
} else if (trimmedValue.length === 0) {
setVariantNameInvalid(errorTextEmpty);
} else if (e.isInvalid) {
setIsInvalid(true);
} else {
setVariantNameInvalid(false);
setIsInvalid(false);
}
};
const onSave = e => {
if (variantNames.includes(variantName)) {
setVariantNameInvalid(errorTextAlreadyExists);
inputRef.current?.focus();
} else if (variantName.length === 0) {
setVariantNameInvalid(errorTextEmpty);
inputRef.current?.focus();
} else if (isInvalid) {
inputRef.current?.focus();
} else {
setVariantNameInvalid(false);
handleSave(e, {
...selectedVariant,
children: variantName,
isDefault,
global: isPublic,
applyAutomatically
});
}
};
const handleClose = e => {
if (e.detail.escPressed) {
handleCancel(e);
} else {
onAfterClose(e);
}
};
const handleCancel = e => {
if (typeof onSaveViewCancel === 'function') {
onSaveViewCancel(enrichEventWithDetails(e, {
...selectedVariant,
children: variantName,
isDefault,
global: isPublic,
applyAutomatically,
isInvalid
}));
}
setIsInvalid(false);
inputRef.current.isInvalid = false;
saveViewDialogRef.current.open = false;
};
const handleChangeDefault = e => {
setDefault(e.target.checked);
};
const handleChangePublic = e => {
setPublic(e.target.checked);
};
const handleChangeApplyAutomatically = e => {
setApplyAutomatically(e.target.checked);
};
return /*#__PURE__*/_jsx(Dialog, {
open: true,
className: classNames.dialog,
ref: saveViewDialogRef,
headerText: headingText,
onClose: onAfterClose,
onBeforeClose: handleClose,
initialFocus: `view-${uniqueId}`,
footer: /*#__PURE__*/_jsx(Bar, {
design: BarDesign.Footer,
endContent: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Button, {
design: ButtonDesign.Emphasized,
onClick: onSave,
children: saveText
}), /*#__PURE__*/_jsx(Button, {
design: ButtonDesign.Transparent,
onClick: handleCancel,
children: cancelText
})]
})
}),
children: /*#__PURE__*/_jsxs(FlexBox, {
direction: FlexBoxDirection.Column,
alignItems: FlexBoxAlignItems.Start,
children: [/*#__PURE__*/_jsx(Label, {
for: `view-${uniqueId}`,
showColon: true,
children: inputLabelText
}), /*#__PURE__*/_jsx(Input, {
accessibleName: inputLabelText,
ref: inputRef,
...saveViewInputProps,
valueState: saveViewInputProps?.valueState ?? (!variantNameInvalid ? 'None' : 'Negative'),
valueStateMessage: saveViewInputProps?.valueStateMessage ?? /*#__PURE__*/_jsx("div", {
children: variantNameInvalid
}),
className: clsx(classNames.input, saveViewInputProps?.className),
id: `view-${uniqueId}`,
value: variantName,
onInput: handleInputChange
}), /*#__PURE__*/_jsxs(FlexBox, {
alignItems: FlexBoxAlignItems.Start,
direction: FlexBoxDirection.Column,
className: classNames.checkBoxesContainer,
children: [showSetAsDefault && /*#__PURE__*/_jsx(CheckBox, {
onChange: handleChangeDefault,
text: defaultCbLabel,
checked: isDefault
}), showShare && /*#__PURE__*/_jsx(CheckBox, {
onChange: handleChangePublic,
text: publicCbLabel,
checked: isPublic
}), showApplyAutomatically && /*#__PURE__*/_jsx(CheckBox, {
onChange: handleChangeApplyAutomatically,
text: applyAutomaticallyCbLabel,
checked: applyAutomatically
})]
})]
})
});
};