@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
228 lines • 8.74 kB
JavaScript
import BarDesign from '@ui5/webcomponents/dist/types/BarDesign.js';
import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
import TableOverflowMode from '@ui5/webcomponents/dist/types/TableOverflowMode.js';
import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
import { Children, isValidElement, useEffect, useId, useRef, useState, createElement as _createElement } from 'react';
import { FlexBoxAlignItems, FlexBoxDirection } from '../../enums/index.js';
import { APPLY_AUTOMATICALLY, CANCEL, CREATED_BY, DEFAULT, MANAGE_VIEWS, SAVE, SEARCH, SHARING, VIEW } from '../../i18n/i18n-defaults.js';
import { Bar } from '../../webComponents/Bar/index.js';
import { Button } from '../../webComponents/Button/index.js';
import { Dialog } from '../../webComponents/Dialog/index.js';
import { Icon, Input } from '../../webComponents/index.js';
import { Table } from '../../webComponents/Table/index.js';
import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js';
import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
import { FlexBox } from '../FlexBox/index.js';
import { classNames, styleData } from './ManageViewsDialog.module.css.js';
import { ManageViewsTableRows } from './ManageViewsTableRows.js';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export const ManageViewsDialog = props => {
const {
children,
onAfterClose,
handleSaveManageViews,
showShare,
showApplyAutomatically,
showSetAsDefault,
showCreatedBy,
variantNames,
showOnlyFavorites,
onManageViewsCancel
} = props;
const uniqueId = useId();
const i18nBundle = useI18nBundle('@ui5/webcomponents-react');
const cancelText = i18nBundle.getText(CANCEL);
const saveText = i18nBundle.getText(SAVE);
const viewHeaderText = i18nBundle.getText(VIEW);
const sharingHeaderText = i18nBundle.getText(SHARING);
const defaultHeaderText = i18nBundle.getText(DEFAULT);
const applyAutomaticallyHeaderText = i18nBundle.getText(APPLY_AUTOMATICALLY);
const createdByHeaderText = i18nBundle.getText(CREATED_BY);
const manageViewsText = i18nBundle.getText(MANAGE_VIEWS);
const searchText = i18nBundle.getText(SEARCH);
const [changedVariantNames, setChangedVariantNames] = useState(new Map());
const [invalidVariants, setInvalidVariants] = useState({});
const [hasApplyAutomaticallyText, setHasApplyAutomaticallyText] = useState(false);
useStylesheet(styleData, 'ManageViewsDialog');
const headerRow = /*#__PURE__*/_jsxs(TableHeaderRow, {
sticky: true,
children: [showOnlyFavorites && /*#__PURE__*/_jsx(TableHeaderCell, {}, "favorite-variant-item"), /*#__PURE__*/_jsx(TableHeaderCell, {
importance: 10,
"min-width": "18rem",
children: viewHeaderText
}), showShare && /*#__PURE__*/_jsx(TableHeaderCell, {
minWidth: "7.5rem",
maxWidth: "8rem",
children: sharingHeaderText
}), showSetAsDefault && /*#__PURE__*/_jsx(TableHeaderCell, {
minWidth: "8rem",
maxWidth: "8rem",
children: defaultHeaderText
}), TableHeaderCell && /*#__PURE__*/_jsx(TableHeaderCell, {
minWidth: hasApplyAutomaticallyText ? '25rem' : '5rem',
children: applyAutomaticallyHeaderText
}), showCreatedBy && /*#__PURE__*/_jsx(TableHeaderCell, {
minWidth: "10rem",
children: createdByHeaderText
}), /*#__PURE__*/_jsx(TableHeaderCell, {
importance: 9,
width: "3rem"
}, "delete-variant-item")]
});
const [childrenProps, setChildrenProps] = useState(Children.map(children, child => {
if (! /*#__PURE__*/isValidElement(child)) {
return {};
}
return child.props;
}));
useEffect(() => {
let _hasApplyAutomaticallyText = false;
setChildrenProps(Children.map(children, child => {
if (! /*#__PURE__*/isValidElement(child)) {
return {};
}
if (child.props?.applyAutomaticallyText) {
_hasApplyAutomaticallyText = true;
}
return child.props;
}));
setHasApplyAutomaticallyText(_hasApplyAutomaticallyText);
}, [children]);
const [filteredProps, setFilteredProps] = useState(childrenProps);
useEffect(() => {
setFilteredProps(childrenProps);
}, [childrenProps]);
const [defaultView, setDefaultView] = useState();
const changedTableRows = useRef({});
const handleTableRowChange = (e, payload) => {
if (payload) {
changedTableRows.current[payload.currentVariant] = {
...(changedTableRows.current[payload.currentVariant] ?? {}),
...payload
};
}
};
const deletedTableRows = useRef(new Set([]));
const handleDelete = e => {
deletedTableRows.current.add(e.target.dataset.children);
setChildrenProps(prev => prev.filter(item => item.children !== e.target.dataset.children).map(item => {
if (changedTableRows.current.hasOwnProperty(item.children)) {
return {
...item,
...changedTableRows.current[item.children]
};
}
return item;
}));
};
const handleSave = e => {
if (Object.keys(invalidVariants).length === 0) {
handleSaveManageViews(e, {
updatedRows: changedTableRows.current,
defaultView,
deletedRows: deletedTableRows.current
});
} else {
Object.values(invalidVariants)[0].focus();
}
};
const handleClose = e => {
if (e.detail.escPressed) {
handleCancel(e);
} else {
onAfterClose(e);
}
};
const handleCancel = e => {
if (typeof onManageViewsCancel === 'function') {
onManageViewsCancel(enrichEventWithDetails(e, {
invalidVariants
}));
}
setInvalidVariants(prev => {
Object.values(prev).forEach(item => {
item.isInvalid = false;
});
return {};
});
onAfterClose(e);
};
const handleSearchInput = e => {
const lowerCaseVal = e.target.value.toLowerCase();
setFilteredProps(childrenProps.filter(item => item.children?.toLowerCase()?.includes(lowerCaseVal) || item.author?.toLowerCase()?.includes(lowerCaseVal)));
};
return /*#__PURE__*/_jsx(Dialog, {
open: true,
className: classNames.manageViewsDialog,
"data-component-name": "VariantManagementManageViewsDialog",
onClose: onAfterClose,
onBeforeClose: handleClose,
headerText: manageViewsText,
initialFocus: `search-${uniqueId}`,
style: {
'--_ui5wcr_popup_default_header_height': `var(${getScopedVarName('--_ui5_popup_default_header_height')})`
},
header: /*#__PURE__*/_jsxs(FlexBox, {
direction: FlexBoxDirection.Column,
style: {
width: '100%'
},
alignItems: FlexBoxAlignItems.Center,
children: [/*#__PURE__*/_jsx("h2", {
className: classNames.headerText,
children: manageViewsText
}), /*#__PURE__*/_jsx(Input, {
id: `search-${uniqueId}`,
className: classNames.search,
placeholder: searchText,
showClearIcon: true,
icon: /*#__PURE__*/_jsx(Icon, {
name: searchIcon,
className: classNames.inputIcon
}),
onInput: handleSearchInput
})]
}),
resizable: true,
footer: /*#__PURE__*/_jsx(Bar, {
design: BarDesign.Footer,
endContent: /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(Button, {
design: ButtonDesign.Emphasized,
onClick: handleSave,
children: saveText
}), /*#__PURE__*/_jsx(Button, {
design: ButtonDesign.Transparent,
onClick: handleCancel,
children: cancelText
})]
})
}),
children: /*#__PURE__*/_jsx(Table, {
headerRow: headerRow,
role: "table",
overflowMode: TableOverflowMode.Popin,
children: filteredProps.map(itemProps => {
return /*#__PURE__*/_createElement(ManageViewsTableRows, {
...itemProps,
setInvalidVariants: setInvalidVariants,
setChangedVariantNames: setChangedVariantNames,
changedVariantNames: changedVariantNames,
variantNames: variantNames,
handleRowChange: handleTableRowChange,
handleDelete: handleDelete,
defaultView: defaultView,
setDefaultView: setDefaultView,
showShare: showShare,
showApplyAutomatically: showApplyAutomatically,
showSetAsDefault: showSetAsDefault,
showCreatedBy: showCreatedBy,
key: itemProps?.children,
showOnlyFavorites: showOnlyFavorites
});
})
})
});
};