@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
72 lines (71 loc) • 5.32 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { useDispatch } from 'react-redux';
import SimpleButton from '../../../components/SimpleButton';
import { useAdaptable } from '../../AdaptableContext';
import { Box, Flex } from '../../../components/Flex';
import { TagList } from '../../../components/Tag/Tag';
import { objectListActionButtonClassName } from './objectListActionButtonStyles';
const baseClassName = 'ab-Adaptable-Object-Compact-List';
const ICON_SIZE = 20;
export const AdaptableObjectCompactListItem = (props) => {
const dispatch = useDispatch();
const adaptable = useAdaptable();
const objectView = props.module.toViewCompact(props.abObject);
const viewOptions = props.module?.getViewProperties?.();
const deleteAction = viewOptions?.getCompactDeleteAction?.(props.abObject);
const moduleAccessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
const suspendAction = viewOptions?.getCompactSuspendAction?.(props.abObject);
const unSuspendAction = viewOptions?.getCompactUnSuspendAction?.(props.abObject);
const isSuspended = props.abObject.IsSuspended;
const handleDelete = React.useCallback((event) => {
event.stopPropagation();
event.preventDefault();
dispatch(deleteAction);
}, []);
const handleSuspendUnSuspend = React.useCallback((event) => {
event.stopPropagation();
event.preventDefault();
if (isSuspended) {
dispatch(unSuspendAction);
}
else {
dispatch(suspendAction);
}
}, [props.abObject]);
let labelEl = objectView.item.label;
if (typeof labelEl === 'function') {
labelEl = React.createElement(labelEl, { data: props.abObject });
}
labelEl = labelEl ?? objectView.item.name;
return (_jsxs(Flex, { className: `${baseClassName}__Item`, alignItems: "center", children: [labelEl && (_jsx(Flex, { className: `${baseClassName}__Item__Name twa:flex-[1_1_auto]`, children: labelEl })), _jsxs(Box, { className: "twa:flex-[2_1_auto]", children: [typeof objectView.item.view === 'function'
? React.createElement(objectView.item.view, {
data: props.abObject,
})
: objectView.item.view, Boolean(objectView.item?.values && objectView.item?.values?.length) && (_jsx(Box, { className: `${baseClassName}__Item__Values`, children: _jsx(TagList, { tags: objectView.item.values, variant: objectView.item.tagVariant }) }))] }), suspendAction && unSuspendAction && (_jsx(SimpleButton, { onMouseDown: handleSuspendUnSuspend, tone: "neutral", variant: "text", iconSize: ICON_SIZE, icon: isSuspended ? 'resume' : 'pause', tooltip: isSuspended ? 'Resume' : 'Suspend', className: objectListActionButtonClassName('suspend', isSuspended ? 'twa:opacity-60' : undefined) })), _jsx(Flex, { className: "twa:ml-1 twa:flex-[0_0_auto] twa:gap-1", children: deleteAction && (_jsx(SimpleButton, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onMouseDown: handleDelete, accessLevel: moduleAccessLevel, className: objectListActionButtonClassName('delete') })) })] }));
};
export const AdaptableObjectCompactList = (props) => {
const adaptable = useAdaptable();
const viewProperties = props.module.getViewProperties?.();
const deleteAllAction = viewProperties?.getDeleteAllAction?.();
const suspendAllAction = viewProperties?.getSuspendAllAction?.();
const unSuspendAllAction = viewProperties?.getUnSuspendAllAction?.();
const dispatch = useDispatch();
const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.module.moduleInfo.ModuleName);
const isAtLeastOneAbObjectActive = props.abObjects.some((abObject) => {
return !abObject.IsSuspended;
});
const handleSuspendUnsuspendAll = React.useCallback((event) => {
event.stopPropagation();
event.preventDefault();
if (isAtLeastOneAbObjectActive) {
dispatch(suspendAllAction);
}
else {
dispatch(unSuspendAllAction);
}
}, [isAtLeastOneAbObjectActive]);
return (_jsxs(Flex, { flexDirection: "column", className: baseClassName, children: [_jsxs(Flex, { className: `${baseClassName}__Header twa:text-3`, children: [_jsx(Flex, { className: `${baseClassName}__Title`, alignItems: 'center', children: props.module.moduleInfo.FriendlyName }), _jsx(Box, { className: "twa:flex-1" }), suspendAllAction && unSuspendAllAction && (_jsx(SimpleButton, { className: "twa:mr-2", onMouseDown: handleSuspendUnsuspendAll, tone: "neutral", variant: "raised", icon: isAtLeastOneAbObjectActive ? 'pause' : 'resume', accessLevel: accessLevel, children: isAtLeastOneAbObjectActive ? 'Suspend All' : 'Resume All' })), deleteAllAction && (_jsx(SimpleButton, { onMouseDown: () => dispatch(deleteAllAction), variant: "raised", tone: "neutral", accessLevel: accessLevel, children: "Clear All" }))] }), _jsx(Box, { className: `${baseClassName}__Body`, children: props.abObjects.map((abObject) => {
return (_jsx(AdaptableObjectCompactListItem, { abObject: abObject, module: props.module }, abObject.Uuid));
}) })] }));
};