ui(components): LayoutSelector recreated for ui-next (#4845)
Co-authored-by: sedghi <ar.sedghi@gmail.com>
This commit is contained in:
Dan Rukas
GitHub
parent
b7fbf04230
commit
abab3dc7ad
@ -1,169 +1,201 @@
|
||||
import React, { useEffect, useState, useCallback, useRef } from 'react';
|
||||
// Updated ToolbarLayoutSelector.tsx
|
||||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { LayoutSelector as OHIFLayoutSelector, ToolbarButton, LayoutPreset } from '@ohif/ui';
|
||||
import { CommandsManager } from '@ohif/core';
|
||||
|
||||
import { LayoutSelector } from '../../../../platform/ui-next/src/components/LayoutSelector';
|
||||
|
||||
function ToolbarLayoutSelectorWithServices({
|
||||
commandsManager,
|
||||
servicesManager,
|
||||
rows = 3,
|
||||
columns = 4,
|
||||
...props
|
||||
}: withAppTypes) {
|
||||
const [isDisabled, setIsDisabled] = useState(false);
|
||||
}) {
|
||||
const { customizationService } = servicesManager.services;
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
setIsDisabled(false);
|
||||
};
|
||||
// Get the presets from the customization service
|
||||
const commonPresets = customizationService?.getCustomization('layoutSelector.commonPresets') || [
|
||||
{
|
||||
icon: 'layout-single',
|
||||
commandOptions: {
|
||||
numRows: 1,
|
||||
numCols: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'layout-side-by-side',
|
||||
commandOptions: {
|
||||
numRows: 1,
|
||||
numCols: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'layout-four-up',
|
||||
commandOptions: {
|
||||
numRows: 2,
|
||||
numCols: 2,
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: 'layout-three-row',
|
||||
commandOptions: {
|
||||
numRows: 3,
|
||||
numCols: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const onSelection = useCallback(props => {
|
||||
commandsManager.run({
|
||||
commandName: 'setViewportGridLayout',
|
||||
commandOptions: { ...props },
|
||||
});
|
||||
setIsDisabled(true);
|
||||
}, []);
|
||||
// Get the advanced presets generator from the customization service
|
||||
const advancedPresetsGenerator = customizationService?.getCustomization(
|
||||
'layoutSelector.advancedPresetGenerator'
|
||||
);
|
||||
|
||||
const onSelectionPreset = useCallback(props => {
|
||||
commandsManager.run({
|
||||
commandName: 'setHangingProtocol',
|
||||
commandOptions: { ...props },
|
||||
});
|
||||
setIsDisabled(true);
|
||||
}, []);
|
||||
// Generate the advanced presets
|
||||
const advancedPresets = advancedPresetsGenerator
|
||||
? advancedPresetsGenerator({ servicesManager })
|
||||
: [
|
||||
{
|
||||
title: 'MPR',
|
||||
icon: 'layout-three-col',
|
||||
commandOptions: {
|
||||
protocolId: 'mpr',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '3D four up',
|
||||
icon: 'layout-four-up',
|
||||
commandOptions: {
|
||||
protocolId: '3d-four-up',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '3D main',
|
||||
icon: 'layout-three-row',
|
||||
commandOptions: {
|
||||
protocolId: '3d-main',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Axial Primary',
|
||||
icon: 'layout-side-by-side',
|
||||
commandOptions: {
|
||||
protocolId: 'axial-primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '3D only',
|
||||
icon: 'layout-single',
|
||||
commandOptions: {
|
||||
protocolId: '3d-only',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '3D primary',
|
||||
icon: 'layout-side-by-side',
|
||||
commandOptions: {
|
||||
protocolId: '3d-primary',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Frame View',
|
||||
icon: 'icon-stack',
|
||||
commandOptions: {
|
||||
protocolId: 'frame-view',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// Unified selection handler that dispatches to the appropriate command
|
||||
const handleSelectionChange = useCallback(
|
||||
(commandOptions, isPreset) => {
|
||||
if (isPreset) {
|
||||
// Advanced preset selection
|
||||
commandsManager.run({
|
||||
commandName: 'setHangingProtocol',
|
||||
commandOptions,
|
||||
});
|
||||
} else {
|
||||
// Common preset or custom grid selection
|
||||
commandsManager.run({
|
||||
commandName: 'setViewportGridLayout',
|
||||
commandOptions,
|
||||
});
|
||||
}
|
||||
},
|
||||
[commandsManager]
|
||||
);
|
||||
|
||||
return (
|
||||
<div onMouseEnter={handleMouseEnter}>
|
||||
<div
|
||||
id="Layout"
|
||||
data-cy="Layout"
|
||||
>
|
||||
<LayoutSelector
|
||||
onSelectionChange={handleSelectionChange}
|
||||
{...props}
|
||||
onSelection={onSelection}
|
||||
onSelectionPreset={onSelectionPreset}
|
||||
servicesManager={servicesManager}
|
||||
tooltipDisabled={isDisabled}
|
||||
/>
|
||||
>
|
||||
<LayoutSelector.Trigger tooltip="Change layout" />
|
||||
<LayoutSelector.Content>
|
||||
{/* Left side - Presets */}
|
||||
{(commonPresets.length > 0 || advancedPresets.length > 0) && (
|
||||
<div className="bg-popover flex flex-col gap-2.5 rounded-lg p-2">
|
||||
{commonPresets.length > 0 && (
|
||||
<>
|
||||
<LayoutSelector.PresetSection title="Common">
|
||||
{commonPresets.map((preset, index) => (
|
||||
<LayoutSelector.Preset
|
||||
key={`common-preset-${index}`}
|
||||
icon={preset.icon}
|
||||
commandOptions={preset.commandOptions}
|
||||
isPreset={false}
|
||||
/>
|
||||
))}
|
||||
</LayoutSelector.PresetSection>
|
||||
<LayoutSelector.Divider />
|
||||
</>
|
||||
)}
|
||||
|
||||
{advancedPresets.length > 0 && (
|
||||
<LayoutSelector.PresetSection title="Advanced">
|
||||
{advancedPresets.map((preset, index) => (
|
||||
<LayoutSelector.Preset
|
||||
key={`advanced-preset-${index}`}
|
||||
title={preset.title}
|
||||
icon={preset.icon}
|
||||
commandOptions={preset.commandOptions}
|
||||
disabled={preset.disabled}
|
||||
isPreset={true}
|
||||
/>
|
||||
))}
|
||||
</LayoutSelector.PresetSection>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Right Side - Grid Layout */}
|
||||
<div className="bg-muted flex flex-col gap-2.5 border-l-2 border-solid border-black p-2">
|
||||
<div className="text-muted-foreground text-xs">Custom</div>
|
||||
<LayoutSelector.GridSelector
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
/>
|
||||
<LayoutSelector.HelpText>
|
||||
Hover to select <br />
|
||||
rows and columns <br /> Click to apply
|
||||
</LayoutSelector.HelpText>
|
||||
</div>
|
||||
</LayoutSelector.Content>
|
||||
</LayoutSelector>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LayoutSelector({
|
||||
rows = 3,
|
||||
columns = 4,
|
||||
onLayoutChange = () => {},
|
||||
className,
|
||||
onSelection,
|
||||
onSelectionPreset,
|
||||
servicesManager,
|
||||
tooltipDisabled,
|
||||
...rest
|
||||
}: withAppTypes) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const dropdownRef = useRef(null);
|
||||
|
||||
const { customizationService } = servicesManager.services;
|
||||
|
||||
const commonPresets = customizationService.getCustomization('layoutSelector.commonPresets');
|
||||
const advancedPresetsGenerator = customizationService.getCustomization(
|
||||
'layoutSelector.advancedPresetGenerator'
|
||||
);
|
||||
|
||||
const advancedPresets = advancedPresetsGenerator({ servicesManager });
|
||||
|
||||
const closeOnOutsideClick = event => {
|
||||
if (isOpen && dropdownRef.current) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
window.addEventListener('click', closeOnOutsideClick);
|
||||
}, 0);
|
||||
return () => {
|
||||
window.removeEventListener('click', closeOnOutsideClick);
|
||||
dropdownRef.current = null;
|
||||
};
|
||||
}, [isOpen]);
|
||||
|
||||
const onInteractionHandler = () => {
|
||||
setIsOpen(!isOpen);
|
||||
};
|
||||
const DropdownContent = isOpen ? OHIFLayoutSelector : null;
|
||||
|
||||
return (
|
||||
<ToolbarButton
|
||||
id="Layout"
|
||||
label="Layout"
|
||||
icon="tool-layout"
|
||||
onInteraction={onInteractionHandler}
|
||||
className={className}
|
||||
rounded={rest.rounded}
|
||||
disableToolTip={tooltipDisabled}
|
||||
dropdownContent={
|
||||
DropdownContent !== null && (
|
||||
<div
|
||||
className="flex"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<div className="bg-secondary-dark flex flex-col gap-2.5 p-2">
|
||||
<div className="text-aqua-pale text-xs">Common</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{commonPresets.map((preset, index) => (
|
||||
<LayoutPreset
|
||||
key={index}
|
||||
classNames="hover:bg-primary-dark group p-1 cursor-pointer"
|
||||
icon={preset.icon}
|
||||
commandOptions={preset.commandOptions}
|
||||
onSelection={onSelection}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="h-[2px] bg-black"></div>
|
||||
|
||||
<div className="text-aqua-pale text-xs">Advanced</div>
|
||||
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{advancedPresets.map((preset, index) => (
|
||||
<LayoutPreset
|
||||
key={index + commonPresets.length}
|
||||
classNames="hover:bg-primary-dark group flex gap-2 p-1 cursor-pointer"
|
||||
icon={preset.icon}
|
||||
title={preset.title}
|
||||
disabled={preset.disabled}
|
||||
commandOptions={preset.commandOptions}
|
||||
onSelection={onSelectionPreset}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-primary-dark flex flex-col gap-2.5 border-l-2 border-solid border-black p-2">
|
||||
<div className="text-aqua-pale text-xs">Custom</div>
|
||||
<DropdownContent
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
onSelection={onSelection}
|
||||
/>
|
||||
<p className="text-aqua-pale text-xs leading-tight">
|
||||
Hover to select <br></br>rows and columns <br></br> Click to apply
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
isActive={isOpen}
|
||||
type="toggle"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
LayoutSelector.propTypes = {
|
||||
ToolbarLayoutSelectorWithServices.propTypes = {
|
||||
commandsManager: PropTypes.instanceOf(CommandsManager),
|
||||
servicesManager: PropTypes.object,
|
||||
rows: PropTypes.number,
|
||||
columns: PropTypes.number,
|
||||
onLayoutChange: PropTypes.func,
|
||||
servicesManager: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default ToolbarLayoutSelectorWithServices;
|
||||
|
||||
@ -0,0 +1,365 @@
|
||||
import React, { createContext, useContext, useState, useCallback } from 'react';
|
||||
import { Popover, PopoverTrigger, PopoverContent } from '../Popover/Popover';
|
||||
import { Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip';
|
||||
import { Button } from '../Button';
|
||||
import { cn } from '../../lib/utils';
|
||||
import { Icons } from '../Icons';
|
||||
import * as PropTypes from 'prop-types';
|
||||
|
||||
// Types
|
||||
type LayoutCommandOptions = {
|
||||
numRows?: number;
|
||||
numCols?: number;
|
||||
protocolId?: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
type LayoutPresetType = {
|
||||
title?: string;
|
||||
icon: string;
|
||||
commandOptions: LayoutCommandOptions;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
// Context
|
||||
type LayoutSelectorContextType = {
|
||||
isOpen: boolean;
|
||||
setIsOpen: (isOpen: boolean) => void;
|
||||
onSelection: (commandOptions: LayoutCommandOptions) => void;
|
||||
onSelectionPreset: (commandOptions: LayoutCommandOptions) => void;
|
||||
};
|
||||
|
||||
const LayoutSelectorContext = createContext<LayoutSelectorContextType | undefined>(undefined);
|
||||
|
||||
const useLayoutSelector = () => {
|
||||
const context = useContext(LayoutSelectorContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useLayoutSelector must be used within a LayoutSelector component');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
// Main component
|
||||
type LayoutSelectorProps = {
|
||||
onSelectionChange?: (commandOptions: LayoutCommandOptions, isPreset: boolean) => void;
|
||||
onSelection?: (commandOptions: LayoutCommandOptions) => void;
|
||||
onSelectionPreset?: (commandOptions: LayoutCommandOptions) => void;
|
||||
children: React.ReactNode;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
tooltipDisabled?: boolean; // Keep this prop for now as it might be used elsewhere
|
||||
};
|
||||
|
||||
const LayoutSelector = ({
|
||||
onSelectionChange,
|
||||
onSelection = commandOptions => {},
|
||||
onSelectionPreset = commandOptions => {},
|
||||
children,
|
||||
open,
|
||||
onOpenChange,
|
||||
tooltipDisabled,
|
||||
}: LayoutSelectorProps) => {
|
||||
const [isOpenInternal, setIsOpenInternal] = useState(false);
|
||||
|
||||
const isControlled = open !== undefined;
|
||||
const isOpen = isControlled ? open : isOpenInternal;
|
||||
const setIsOpen = isControlled ? onOpenChange! : setIsOpenInternal;
|
||||
|
||||
const handleSelection = useCallback(
|
||||
(commandOptions: LayoutCommandOptions) => {
|
||||
onSelection(commandOptions);
|
||||
if (onSelectionChange) {
|
||||
onSelectionChange(commandOptions, false);
|
||||
}
|
||||
setIsOpen(false);
|
||||
},
|
||||
[onSelection, onSelectionChange, setIsOpen]
|
||||
);
|
||||
|
||||
const handlePresetSelection = useCallback(
|
||||
(commandOptions: LayoutCommandOptions) => {
|
||||
onSelectionPreset(commandOptions);
|
||||
if (onSelectionChange) {
|
||||
onSelectionChange(commandOptions, true);
|
||||
}
|
||||
setIsOpen(false);
|
||||
},
|
||||
[onSelectionPreset, onSelectionChange, setIsOpen]
|
||||
);
|
||||
|
||||
return (
|
||||
<LayoutSelectorContext.Provider
|
||||
value={{
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
onSelection: handleSelection,
|
||||
onSelectionPreset: handlePresetSelection,
|
||||
}}
|
||||
>
|
||||
<Popover
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
>
|
||||
{children}
|
||||
</Popover>
|
||||
</LayoutSelectorContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
// Sub-components
|
||||
type TriggerProps = {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
tooltip?: string;
|
||||
disabled?: boolean;
|
||||
disabledText?: string;
|
||||
};
|
||||
|
||||
const Trigger = ({
|
||||
children,
|
||||
className,
|
||||
tooltip = 'Change layout',
|
||||
disabled = false,
|
||||
disabledText,
|
||||
}: TriggerProps) => {
|
||||
const { isOpen } = useLayoutSelector();
|
||||
|
||||
// Style constants matching ToolButton
|
||||
const baseClasses = '!rounded-lg inline-flex items-center justify-center';
|
||||
const defaultClasses =
|
||||
'bg-transparent text-foreground/80 hover:bg-background hover:text-highlight';
|
||||
const activeClasses = 'bg-background text-foreground/80';
|
||||
const disabledClasses =
|
||||
'text-common-bright hover:bg-primary-dark hover:text-primary-light opacity-40 cursor-not-allowed';
|
||||
const buttonSizeClass = 'w-10 h-10';
|
||||
const iconSizeClass = 'h-7 w-7';
|
||||
|
||||
const buttonClasses = cn(
|
||||
baseClasses,
|
||||
buttonSizeClass,
|
||||
disabled ? disabledClasses : isOpen ? activeClasses : defaultClasses
|
||||
);
|
||||
|
||||
const hasTooltip = tooltip || (disabled && disabledText);
|
||||
|
||||
if (children) {
|
||||
return (
|
||||
<PopoverTrigger
|
||||
asChild
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</PopoverTrigger>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip>
|
||||
<TooltipTrigger
|
||||
asChild
|
||||
className={cn(disabled && 'cursor-not-allowed')}
|
||||
>
|
||||
<span data-cy="layout-button">
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
className={buttonClasses}
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
aria-label={tooltip}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Icons.ByName
|
||||
name="tool-layout"
|
||||
className={iconSizeClass}
|
||||
/>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
{hasTooltip && (
|
||||
<TooltipContent side="bottom">
|
||||
{tooltip && <div>{tooltip}</div>}
|
||||
{disabled && disabledText && <div className="text-muted-foreground">{disabledText}</div>}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
type ContentProps = {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
align?: 'center' | 'start' | 'end';
|
||||
sideOffset?: number;
|
||||
};
|
||||
|
||||
const Content = ({ children, className, align = 'center', sideOffset = 8 }: ContentProps) => {
|
||||
return (
|
||||
<PopoverContent
|
||||
align={align}
|
||||
sideOffset={sideOffset}
|
||||
className={cn('w-auto rounded-lg border-none p-0 shadow-lg', className)}
|
||||
>
|
||||
<div className="flex">{children}</div>
|
||||
</PopoverContent>
|
||||
);
|
||||
};
|
||||
|
||||
type PresetSectionProps = {
|
||||
children: React.ReactNode;
|
||||
title: string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const PresetSection = ({ children, title, className }: PresetSectionProps) => {
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-2', className)}>
|
||||
<div className="text-muted-foreground text-xs">{title}</div>
|
||||
{React.Children.count(children) > 0 && (
|
||||
<div
|
||||
className={cn(title.toLowerCase() === 'common' ? 'flex gap-2' : 'flex flex-col gap-0')}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type PresetProps = LayoutPresetType & {
|
||||
className?: string;
|
||||
isPreset?: boolean;
|
||||
iconSize?: string; // Add new prop for icon size
|
||||
};
|
||||
|
||||
const Preset = ({
|
||||
title,
|
||||
icon,
|
||||
commandOptions,
|
||||
disabled = false,
|
||||
className,
|
||||
isPreset = false,
|
||||
iconSize, // New prop
|
||||
}: PresetProps) => {
|
||||
const { onSelection, onSelectionPreset } = useLayoutSelector();
|
||||
|
||||
const handleClick = () => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (isPreset) {
|
||||
onSelectionPreset(commandOptions);
|
||||
} else {
|
||||
onSelection(commandOptions);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group cursor-pointer rounded transition',
|
||||
'hover:bg-accent flex items-center gap-2 p-1.5',
|
||||
disabled && 'pointer-events-none opacity-50',
|
||||
className
|
||||
)}
|
||||
onClick={handleClick}
|
||||
data-cy={title}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<Icons.ByName
|
||||
name={icon}
|
||||
className={cn('group-hover:text-primary', iconSize)}
|
||||
/>
|
||||
</div>
|
||||
{title && <div className="text-foreground text-base">{title}</div>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
type GridSelectorProps = {
|
||||
rows?: number;
|
||||
columns?: number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const GridSelector = ({ rows = 3, columns = 4, className }: GridSelectorProps) => {
|
||||
const [hoveredIndex, setHoveredIndex] = useState<number | undefined>(undefined);
|
||||
const { onSelection } = useLayoutSelector();
|
||||
|
||||
const hoverX = hoveredIndex !== undefined ? hoveredIndex % columns : -1;
|
||||
const hoverY = hoveredIndex !== undefined ? Math.floor(hoveredIndex / columns) : -1;
|
||||
|
||||
const isHovered = (index: number) => {
|
||||
if (hoveredIndex === undefined) {
|
||||
return false;
|
||||
}
|
||||
const x = index % columns;
|
||||
const y = Math.floor(index / columns);
|
||||
|
||||
return x <= hoverX && y <= hoverY;
|
||||
};
|
||||
|
||||
const handleSelection = (index: number) => {
|
||||
const x = index % columns;
|
||||
const y = Math.floor(index / columns);
|
||||
onSelection({
|
||||
numRows: y + 1,
|
||||
numCols: x + 1,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(className)}
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(${columns}, 20px)`,
|
||||
gridTemplateRows: `repeat(${rows}, 20px)`,
|
||||
gap: '2px',
|
||||
}}
|
||||
>
|
||||
{Array.from(Array(rows * columns).keys()).map(index => (
|
||||
<div
|
||||
key={index}
|
||||
className={cn('cursor-pointer', isHovered(index) ? 'bg-primary-active' : 'bg-[#04225b]')}
|
||||
data-cy={`Layout-${index % columns}-${Math.floor(index / columns)}`}
|
||||
onClick={() => handleSelection(index)}
|
||||
onMouseEnter={() => setHoveredIndex(index)}
|
||||
onMouseLeave={() => setHoveredIndex(undefined)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Divider = ({ className }: { className?: string }) => (
|
||||
<div className={cn('h-px bg-black', className)}></div>
|
||||
);
|
||||
|
||||
const HelpText = ({ children, className }: { children: React.ReactNode; className?: string }) => (
|
||||
<p className={cn('text-muted-foreground text-xs leading-tight', className)}>{children}</p>
|
||||
);
|
||||
|
||||
// Assemble the compound component
|
||||
LayoutSelector.Trigger = Trigger;
|
||||
LayoutSelector.Content = Content;
|
||||
LayoutSelector.PresetSection = PresetSection;
|
||||
LayoutSelector.Preset = Preset;
|
||||
LayoutSelector.GridSelector = GridSelector;
|
||||
LayoutSelector.Divider = Divider;
|
||||
LayoutSelector.HelpText = HelpText;
|
||||
|
||||
// PropTypes
|
||||
LayoutSelector.propTypes = {
|
||||
onSelectionChange: PropTypes.func,
|
||||
onSelection: PropTypes.func,
|
||||
onSelectionPreset: PropTypes.func,
|
||||
children: PropTypes.node.isRequired,
|
||||
open: PropTypes.bool,
|
||||
onOpenChange: PropTypes.func,
|
||||
tooltipDisabled: PropTypes.bool,
|
||||
};
|
||||
|
||||
export { LayoutSelector };
|
||||
export default LayoutSelector;
|
||||
4
platform/ui-next/src/components/LayoutSelector/index.ts
Normal file
4
platform/ui-next/src/components/LayoutSelector/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
import { LayoutSelector } from './LayoutSelector';
|
||||
|
||||
export { LayoutSelector };
|
||||
export default LayoutSelector;
|
||||
Loading…
Reference in New Issue
Block a user