@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
203 lines • 7.74 kB
JavaScript
import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
import declineIcon from '@ui5/webcomponents-icons/dist/decline.js';
import favoriteIcon from '@ui5/webcomponents-icons/dist/favorite.js';
import unfavoriteIcon from '@ui5/webcomponents-icons/dist/unfavorite.js';
import { ThemingParameters, useI18nBundle } from '@ui5/webcomponents-react-base';
import { useReducer, useRef, useState } from 'react';
import { APPLY_AUTOMATICALLY, DELETE_VIEW, MARK_AS_FAVORITE, MARK_AS_STANDARD, PRIVATE, PUBLIC, SELECTED_AS_FAVORITE, SPECIFY_VIEW_NAME, UNSELECTED_AS_FAVORITE, VARIANT_MANAGEMENT_ERROR_DUPLICATE, VIEW } from '../../i18n/i18n-defaults.js';
import { trimAndRemoveSpaces } from '../../internal/utils.js';
import { CheckBox } from '../../webComponents/CheckBox/index.js';
import { Icon } from '../../webComponents/Icon/index.js';
import { Input } from '../../webComponents/Input/index.js';
import { RadioButton } from '../../webComponents/RadioButton/index.js';
import { TableCell } from '../../webComponents/TableCell/index.js';
import { TableRow } from '../../webComponents/TableRow/index.js';
import { TableRowAction } from '../../webComponents/TableRowAction/index.js';
import { Text } from '../../webComponents/Text/index.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ManageViewsTableRows = props => {
const {
variantNames,
changedVariantNames,
setChangedVariantNames,
handleRowChange,
defaultView,
setDefaultView,
showShare,
showApplyAutomatically,
showSetAsDefault,
showCreatedBy,
labelReadOnly,
favorite,
children,
global,
isDefault,
applyAutomatically,
applyAutomaticallyText,
author,
setInvalidVariants,
hideDelete,
showOnlyFavorites
} = props;
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
const errorTextAlreadyExists = i18nBundle.getText(VARIANT_MANAGEMENT_ERROR_DUPLICATE);
const errorTextEmpty = i18nBundle.getText(SPECIFY_VIEW_NAME);
const publicText = i18nBundle.getText(PUBLIC);
const privateText = i18nBundle.getText(PRIVATE);
const a11yFavoriteText = i18nBundle.getText(MARK_AS_FAVORITE);
const a11yStandardText = i18nBundle.getText(MARK_AS_STANDARD);
const a11yDeleteText = i18nBundle.getText(DELETE_VIEW);
const a11yApplyAutomaticallyText = i18nBundle.getText(APPLY_AUTOMATICALLY);
const favoriteIconTitleText = i18nBundle.getText(SELECTED_AS_FAVORITE);
const unfavoriteIconTitleText = i18nBundle.getText(UNSELECTED_AS_FAVORITE);
const inputPlaceHolder = i18nBundle.getText(VIEW);
const [internalFavorite, setFavorite] = useReducer(prev => {
return !prev;
}, !!favorite);
const iconName = internalFavorite ? favoriteIcon : unfavoriteIcon;
const inputRef = useRef(undefined);
const [variantNameInvalid, setVariantNameInvalid] = useState(false);
const onFavoriteClick = e => {
setFavorite();
handleRowChange(e, {
currentVariant: children,
favorite: !internalFavorite
});
};
const handleVariantInput = e => {
if (typeof props.manageViewsInputProps?.onInput === 'function') {
props.manageViewsInputProps?.onInput(e);
}
const trimmedValue = trimAndRemoveSpaces(e.target.value);
if (children !== trimmedValue && (variantNames.includes(trimmedValue) || Array.from(changedVariantNames.values()).includes(trimmedValue))) {
setVariantNameInvalid(errorTextAlreadyExists);
setInvalidVariants(prev => ({
...prev,
[`${children}`]: inputRef.current
}));
handleRowChange(e, {
currentVariant: children,
children: trimmedValue
});
} else if (trimmedValue.length === 0) {
setVariantNameInvalid(errorTextEmpty);
setInvalidVariants(prev => ({
...prev,
[children]: inputRef.current
}));
handleRowChange(e, {
currentVariant: children,
children: trimmedValue
});
} else if (e.isInvalid) {
setInvalidVariants(prev => ({
...prev,
[`${children}`]: inputRef.current
}));
} else {
setVariantNameInvalid(false);
setInvalidVariants(prev => {
const invalidRows = {
...prev
};
if (Object.prototype.hasOwnProperty.call(prev, children)) {
delete invalidRows[children];
}
return invalidRows;
});
handleRowChange(e, {
currentVariant: children,
children: trimmedValue
});
}
};
const handleVariantChange = e => {
if (typeof props.manageViewsInputProps?.onChange === 'function') {
props.manageViewsInputProps?.onChange(e);
}
const trimmedValue = trimAndRemoveSpaces(e.target.value);
setChangedVariantNames(prev => {
const currentChangedVariants = new Map(prev);
currentChangedVariants.set(children, trimmedValue);
return currentChangedVariants;
});
};
const handleDefaultChange = () => {
setDefaultView(children);
};
const handleApplyAutomaticallyChange = e => {
handleRowChange(e, {
currentVariant: children,
applyAutomatically: e.target.checked
});
};
const renderView = () => {
if (labelReadOnly) {
return /*#__PURE__*/_jsx(Text, {
style: {
fontFamily: isDefault ? ThemingParameters.sapFontBoldFamily : ThemingParameters.sapFontFamily
},
children: children
});
}
return /*#__PURE__*/_jsx(Input, {
placeholder: inputPlaceHolder,
ref: inputRef,
...props.manageViewsInputProps,
valueStateMessage: props.manageViewsInputProps?.valueStateMessage ?? /*#__PURE__*/_jsx("div", {
children: variantNameInvalid
}),
valueState: props.manageViewsInputProps?.valueState ?? (!variantNameInvalid ? ValueState.None : ValueState.Negative),
value: children,
onInput: handleVariantInput,
onChange: handleVariantChange
});
};
return /*#__PURE__*/_jsxs(TableRow, {
"data-id": children,
actions: !(hideDelete ?? global) && /*#__PURE__*/_jsx(TableRowAction, {
icon: declineIcon,
text: a11yDeleteText
}),
children: [showOnlyFavorites && /*#__PURE__*/_jsx(TableCell, {
children: isDefault ? /*#__PURE__*/_jsx(Icon, {
name: favoriteIcon,
style: {
color: ThemingParameters.sapContent_NonInteractiveIconColor
}
}) : /*#__PURE__*/_jsx(Icon, {
accessibleName: a11yFavoriteText,
title: iconName === favoriteIcon ? favoriteIconTitleText : unfavoriteIconTitleText,
name: iconName,
mode: IconMode.Interactive,
style: {
color: ThemingParameters.sapContent_MarkerIconColor,
cursor: 'pointer'
},
onClick: onFavoriteClick
})
}), /*#__PURE__*/_jsx(TableCell, {
children: renderView()
}), showShare && /*#__PURE__*/_jsx(TableCell, {
children: global ? publicText : privateText
}), showSetAsDefault && /*#__PURE__*/_jsx(TableCell, {
children: /*#__PURE__*/_jsx(RadioButton, {
accessibleName: a11yStandardText,
checked: defaultView !== undefined ? defaultView === children : isDefault,
onChange: handleDefaultChange
})
}), showApplyAutomatically && /*#__PURE__*/_jsx(TableCell, {
children: /*#__PURE__*/_jsx(CheckBox, {
accessibleName: a11yApplyAutomaticallyText,
checked: applyAutomatically,
onChange: handleApplyAutomaticallyChange,
text: applyAutomaticallyText
})
}), showCreatedBy && /*#__PURE__*/_jsx(TableCell, {
children: /*#__PURE__*/_jsx(Text, {
children: author
})
})]
}, `${children}`);
};