@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
32 lines (31 loc) • 4.95 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Input from '../../components/Input';
import { Box } from '../../components/Flex';
import { Card } from '../../components/Card';
import { cn } from '../../lib/utils';
export const WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS = 'twa:flex twa:w-full twa:min-h-[32px] twa:items-center twa:justify-center twa:overflow-hidden twa:rounded-standard twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)] twa:bg-[color-mix(in_srgb,var(--ab-color-primary)_35%,transparent)] twa:px-2 twa:py-1';
export const getWizardTypeSelectionGridColumns = (choiceCount) => choiceCount === 4 ? 2 : 3;
export const WizardTypeSelectionCard = ({ label, description, selected, disabled, disabledTooltip, dataName, minHeightClassName = 'twa:min-h-[108px]', onSelect, children, footer, }) => {
const handleActivate = () => {
if (!disabled) {
onSelect();
}
};
return (_jsxs(Box, { role: "radio", tabIndex: disabled ? -1 : 0, "aria-checked": selected, "aria-disabled": disabled, "data-name": dataName, className: cn('ab-WizardTypeSelectionCard group twa:relative twa:h-full twa:rounded-standard twa:border twa:border-primarydark/32 twa:bg-card twa:text-card-foreground twa:outline-none twa:transition-colors twa:focus-visible:ring-2 twa:focus-visible:ring-accent', minHeightClassName, disabled
? 'twa:cursor-not-allowed twa:opacity-60'
: 'twa:cursor-pointer hover:twa:border-accent/55 hover:twa:bg-accent/5', selected &&
'twa:after:pointer-events-none twa:after:absolute twa:after:inset-0 twa:after:rounded-standard twa:after:border-2 twa:after:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:after:bg-[var(--ab-cmp-wizard-type-selection-card__selected-overlay)]'), onClick: handleActivate, onKeyDown: (event) => {
if (disabled) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
onSelect();
}
}, children: [_jsx(Box, { "aria-hidden": true, className: cn('twa:pointer-events-none twa:absolute twa:top-2.5 twa:right-2.5 twa:z-10 twa:size-4 twa:rounded-full twa:border-2 twa:transition-colors', selected
? 'twa:border-[var(--ab-cmp-wizard-type-selection-card__selected-border)] twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-border)]'
: 'twa:border-primarydark/35 twa:bg-base group-hover:twa:border-accent/55'), children: selected ? (_jsx(Box, { className: "twa:absolute twa:inset-0 twa:m-auto twa:size-1.5 twa:rounded-full twa:bg-[var(--ab-cmp-wizard-type-selection-card__selected-indicator-inner)]" })) : null }), _jsxs(Card, { shadow: false, style: { backgroundColor: 'transparent' }, className: "twa:flex twa:h-full twa:flex-col twa:justify-between twa:p-3 twa:pr-7", gap: 0, children: [_jsx(Box, { className: "twa:font-medium", children: label }), children, description || disabledTooltip ? (_jsxs(Box, { children: [description ? (_jsx(Box, { className: "twa:text-xs twa:leading-snug twa:opacity-70", children: description })) : null, disabled && disabledTooltip ? (_jsx(Box, { className: "twa:mt-1 twa:text-1 twa:leading-snug twa:italic twa:opacity-80", children: disabledTooltip })) : null] })) : null, footer] })] }));
};
export const WizardTypeSelectionSection = ({ headingId, title, intro, columns, dataName, className, children }) => (_jsxs(Card, { shadow: false, gap: 1, className: cn('twa:flex-1 twa:min-h-0', className), children: [_jsxs(Card.Title, { gap: 1, border: false, className: "twa:flex-col twa:items-start twa:px-1 twa:pb-1", children: [_jsx(Box, { id: headingId, className: "twa:font-medium", children: title }), _jsx(Box, { className: "twa:mt-1.5 twa:text-xs twa:font-normal twa:opacity-70", children: intro })] }), _jsx(Card.Body, { className: "twa:min-h-0 twa:overflow-y-auto twa:p-1 twa:pt-0", children: _jsx(Box, { "data-name": dataName, className: cn('twa:grid twa:gap-2', columns === 2 ? 'twa:grid-cols-2' : 'twa:grid-cols-3'), role: "radiogroup", "aria-labelledby": headingId, children: children }) })] }));
export const WizardNameFieldSection = ({ value, onChange, inputDataName = 'wizard-name', placeholder = 'Enter Name', }) => (_jsxs(Card, { shadow: false, gap: 1, className: "twa:bg-card twa:text-card-foreground", children: [_jsx(Card.Title, { gap: 1, border: false, className: "twa:px-1 twa:pb-1", children: _jsx(Box, { className: "twa:font-medium", children: "Name" }) }), _jsx(Card.Body, { className: "twa:p-1", children: _jsx(Input, { className: "twa:w-full twa:max-w-[420px]", "data-name": inputDataName, onChange: onChange, placeholder: placeholder, value: value }) })] }));
export const WizardTypeSelectionPreviewFrame = ({ children, }) => (_jsx(Box, { "aria-hidden": true, className: WIZARD_TYPE_SELECTION_PREVIEW_FRAME_CLASS, children: children }));