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 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({
|
function ToolbarLayoutSelectorWithServices({
|
||||||
commandsManager,
|
commandsManager,
|
||||||
servicesManager,
|
servicesManager,
|
||||||
|
rows = 3,
|
||||||
|
columns = 4,
|
||||||
...props
|
...props
|
||||||
}: withAppTypes) {
|
}) {
|
||||||
const [isDisabled, setIsDisabled] = useState(false);
|
const { customizationService } = servicesManager.services;
|
||||||
|
|
||||||
const handleMouseEnter = () => {
|
// Get the presets from the customization service
|
||||||
setIsDisabled(false);
|
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 => {
|
// Get the advanced presets generator from the customization service
|
||||||
commandsManager.run({
|
const advancedPresetsGenerator = customizationService?.getCustomization(
|
||||||
commandName: 'setViewportGridLayout',
|
'layoutSelector.advancedPresetGenerator'
|
||||||
commandOptions: { ...props },
|
);
|
||||||
});
|
|
||||||
setIsDisabled(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const onSelectionPreset = useCallback(props => {
|
// Generate the advanced presets
|
||||||
commandsManager.run({
|
const advancedPresets = advancedPresetsGenerator
|
||||||
commandName: 'setHangingProtocol',
|
? advancedPresetsGenerator({ servicesManager })
|
||||||
commandOptions: { ...props },
|
: [
|
||||||
});
|
{
|
||||||
setIsDisabled(true);
|
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 (
|
return (
|
||||||
<div onMouseEnter={handleMouseEnter}>
|
<div
|
||||||
|
id="Layout"
|
||||||
|
data-cy="Layout"
|
||||||
|
>
|
||||||
<LayoutSelector
|
<LayoutSelector
|
||||||
|
onSelectionChange={handleSelectionChange}
|
||||||
{...props}
|
{...props}
|
||||||
onSelection={onSelection}
|
>
|
||||||
onSelectionPreset={onSelectionPreset}
|
<LayoutSelector.Trigger tooltip="Change layout" />
|
||||||
servicesManager={servicesManager}
|
<LayoutSelector.Content>
|
||||||
tooltipDisabled={isDisabled}
|
{/* 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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function LayoutSelector({
|
ToolbarLayoutSelectorWithServices.propTypes = {
|
||||||
rows = 3,
|
commandsManager: PropTypes.instanceOf(CommandsManager),
|
||||||
columns = 4,
|
servicesManager: PropTypes.object,
|
||||||
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 = {
|
|
||||||
rows: PropTypes.number,
|
rows: PropTypes.number,
|
||||||
columns: PropTypes.number,
|
columns: PropTypes.number,
|
||||||
onLayoutChange: PropTypes.func,
|
|
||||||
servicesManager: PropTypes.object.isRequired,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ToolbarLayoutSelectorWithServices;
|
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