@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
75 lines (74 loc) • 6.17 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { Card } from '../../components/Card';
import { cn } from '../../lib/utils';
import { getCollapsibleWizardCardCollapsedClasses, getCollapsibleWizardCardExpandedClasses, } from '../../Utilities/wizardSelection';
import { Box, Flex } from '../../components/Flex';
import useProperty from '../../components/utils/useProperty';
import { ColumnTag, Tag } from '../../components/Tag';
import { IconComponent } from '../../components/Icon';
import { targetOwn } from '../../components/twUtils';
export function getWizardAccordionSectionClassName(hasExpandedCard, fillExpandedCard = true) {
return cn('twa:h-full twa:min-h-0 twa:flex twa:flex-col twa:gap-2', hasExpandedCard && fillExpandedCard ? 'twa:overflow-hidden' : 'twa:overflow-y-auto');
}
export function renderCompactColumnTags(columnIds, getFriendlyName, options) {
const { maxVisible = 5, emptyLabel = 'None' } = options ?? {};
if (!columnIds.length) {
return _jsx(Tag, { children: emptyLabel });
}
const visibleIds = columnIds.slice(0, maxVisible);
const remainder = columnIds.length - visibleIds.length;
return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: [visibleIds.map((columnId) => (_jsx(ColumnTag, { className: "twa:shrink-0", children: getFriendlyName(columnId) }, columnId))), remainder > 0 ? (_jsxs("span", { className: "twa:text-xs twa:opacity-70 twa:shrink-0", children: ["+", remainder] })) : null] }));
}
export const CollapsibleWizardCard = (props) => {
const { title, help, collapsedHelp, summary, compactSummary, compactSummaryInteractive = false, headerVisual, headerActions, children, defaultExpanded = false, compact = false, fillAvailable = false, className, bodyClassName, surface = 'popup', 'data-name': dataName, } = props;
const [expanded, setExpanded] = useProperty(props, 'expanded', defaultExpanded, {
onChange: props.onExpandedChange,
});
const showSummary = !expanded && !compact;
const collapsedHeaderInline = collapsedHelp === false ? undefined : collapsedHelp ?? help;
const headerInline = expanded ? help : compact ? compactSummary : collapsedHeaderInline;
const isInteractiveCompactSummary = compact && compactSummaryInteractive;
const toggleExpanded = () => setExpanded(!expanded);
const handleTitleKeyDown = (event) => {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
toggleExpanded();
}
};
return (_jsxs(Card, { shadow: false, className: cn('ab-CollapsibleWizardCard twa:border twa:transition-[border-color,background-color]', expanded
? getCollapsibleWizardCardExpandedClasses(surface)
: getCollapsibleWizardCardCollapsedClasses(surface), compact && 'ab-CollapsibleWizardCard--compact twa:p-0!', fillAvailable
? 'twa:flex-1 twa:min-h-0 twa:flex twa:flex-col twa:overflow-hidden'
: 'twa:shrink-0', className), children: [_jsx(Card.Title, { className: "twa:p-0", border: !compact, children: _jsxs(Box, { className: cn('twa:flex twa:flex-row twa:items-center twa:gap-2 twa:w-full twa:px-2 twa:cursor-pointer twa:rounded-standard twa:hover:bg-primary', { 'twa:py-2': true, 'twa:mb-0.5': !compact && !expanded }, targetOwn.focusOutline, 'twa:focus-visible:ring-inset'), "data-name": dataName, onClick: toggleExpanded, onKeyDown: handleTitleKeyDown, tabIndex: 0, "aria-expanded": expanded, role: "button", children: [_jsxs(Box, { className: "twa:flex twa:flex-row twa:items-center twa:gap-2 twa:shrink-0 twa:cursor-pointer twa:select-none", children: [_jsx(IconComponent, { icon: { name: expanded ? 'collapse' : 'expand' } }), _jsx(Box, { className: "twa:font-medium", children: title })] }), headerVisual ? (_jsx(Box, { className: "twa:flex-1 twa:min-w-0 twa:flex twa:justify-end twa:items-center twa:overflow-hidden twa:pointer-events-none", children: headerVisual })) : headerInline ? (_jsx(Box, { className: cn('twa:flex-1 twa:min-w-0 twa:font-normal', isInteractiveCompactSummary
? 'twa:flex twa:justify-end twa:items-center twa:overflow-visible'
: cn('twa:text-xs twa:opacity-70 twa:pointer-events-none twa:cursor-default', compact ? 'twa:overflow-hidden' : 'twa:truncate')), children: headerInline })) : (_jsx(Box, { className: "twa:flex-1 twa:min-w-0" })), headerActions ? (_jsx(Box, { className: "twa:shrink-0 twa:gap-2 twa:flex", onClick: (event) => event.stopPropagation(), children: headerActions })) : null] }) }), expanded ? (_jsx(Card.Body, { className: cn('twa:p-1', bodyClassName, fillAvailable && 'twa:max-h-none! twa:flex-1 twa:min-h-0'), children: children })) : showSummary ? (_jsx(Card.Body, { className: "twa:p-1", gap: 1, children: summary })) : null] }));
};
export function useWizardCardAccordion(initialExpandedId, options) {
const fillExpandedCard = options?.fillExpandedCard ?? false;
const cardFillByIdRef = React.useRef({});
const [expandedId, setExpandedId] = React.useState(initialExpandedId);
const hasExpandedCard = expandedId !== null;
const bindCard = React.useCallback((id, cardOptions) => {
const shouldFillWhenExpanded = cardOptions?.fillAvailable ?? fillExpandedCard;
cardFillByIdRef.current[id] = shouldFillWhenExpanded;
return {
expanded: expandedId === id,
compact: hasExpandedCard && expandedId !== id,
fillAvailable: expandedId === id && shouldFillWhenExpanded,
onExpandedChange: (expanded) => {
setExpandedId(expanded ? id : null);
},
};
}, [expandedId, hasExpandedCard, fillExpandedCard]);
const expandedFillsSpace = expandedId != null && cardFillByIdRef.current[expandedId] === true;
return {
expandedId,
hasExpandedCard,
expandedFillsSpace,
bindCard,
fillExpandedCard,
setExpandedId,
};
}
export const CollapsibleWizardValueSummary = ({ value }) => _jsx(_Fragment, { children: value });