Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 00:03:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: z-index of field settings (#1469)

Browse Source
This commit is contained in:
Ephraim Duncan
2024-12-17 06:09:58 +00:00
committed by GitHub
parent 9502f4361d
commit c960a48b4f
3 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/ui/primitives/document-flow/add-fields.tsx
View File

@ -129,6 +129,7 @@ export const AddFieldsFormPartial = ({
currentStep === 1 && typeof documentFlow.onBackStep === 'function' && canGoBack; currentStep === 1 && typeof documentFlow.onBackStep === 'function' && canGoBack;
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false); const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [currentField, setCurrentField] = useState<FieldFormType>(); const [currentField, setCurrentField] = useState<FieldFormType>();
const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
const form = useForm<TAddFieldsFormSchema>({ const form = useForm<TAddFieldsFormSchema>({
defaultValues: { defaultValues: {
@ -652,6 +653,9 @@ export const AddFieldsFormPartial = ({
}} }}
hideRecipients={hideRecipients} hideRecipients={hideRecipients}
hasErrors={!!hasFieldError} hasErrors={!!hasFieldError}
active={activeFieldId === field.formId}
onFieldActivate={() => setActiveFieldId(field.formId)}
onFieldDeactivate={() => setActiveFieldId(null)}
/> />
); );
})} })}

29
packages/ui/primitives/document-flow/field-item.tsx
View File

@ -47,6 +47,9 @@ export type FieldItemProps = {
recipientIndex?: number; recipientIndex?: number;
hideRecipients?: boolean; hideRecipients?: boolean;
hasErrors?: boolean; hasErrors?: boolean;
active?: boolean;
onFieldActivate?: () => void;
onFieldDeactivate?: () => void;
}; };
export const FieldItem = ({ export const FieldItem = ({
@ -67,8 +70,10 @@ export const FieldItem = ({
recipientIndex = 0, recipientIndex = 0,
hideRecipients = false, hideRecipients = false,
hasErrors, hasErrors,
active,
onFieldActivate,
onFieldDeactivate,
}: FieldItemProps) => { }: FieldItemProps) => {
const [active, setActive] = useState(false);
const [coords, setCoords] = useState({ const [coords, setCoords] = useState({
pageX: 0, pageX: 0,
pageY: 0, pageY: 0,
@ -150,6 +155,8 @@ export const FieldItem = ({
}); });
if (isOutsideOfField) { if (isOutsideOfField) {
setSettingsActive(false);
onFieldDeactivate?.();
onBlur?.(); onBlur?.();
} }
}; };
@ -188,10 +195,12 @@ export const FieldItem = ({
return createPortal( return createPortal(
<Rnd <Rnd
key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth} key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
className={cn('group z-20', { className={cn('group', {
'pointer-events-none': passive, 'pointer-events-none': passive,
'pointer-events-none cursor-not-allowed opacity-75': disabled, 'pointer-events-none cursor-not-allowed opacity-75': disabled,
'z-10': !active || disabled, 'z-50': active && !disabled,
'z-20': !active && !disabled,
'z-10': disabled,
})} })}
minHeight={fixedSize ? '' : minHeight || 'auto'} minHeight={fixedSize ? '' : minHeight || 'auto'}
minWidth={fixedSize ? '' : minWidth || 'auto'} minWidth={fixedSize ? '' : minWidth || 'auto'}
@ -202,15 +211,15 @@ export const FieldItem = ({
width: fixedSize ? '' : coords.pageWidth, width: fixedSize ? '' : coords.pageWidth,
}} }}
bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`} bounds={`${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`}
onDragStart={() => setActive(true)} onDragStart={() => onFieldActivate?.()}
onResizeStart={() => setActive(true)} onResizeStart={() => onFieldActivate?.()}
enableResizing={!fixedSize} enableResizing={!fixedSize}
onResizeStop={(_e, _d, ref) => { onResizeStop={(_e, _d, ref) => {
setActive(false); onFieldDeactivate?.();
onResize?.(ref); onResize?.(ref);
}} }}
onDragStop={(_e, d) => { onDragStop={(_e, d) => {
setActive(false); onFieldDeactivate?.();
onMove?.(d.node); onMove?.(d.node);
}} }}
> >
@ -226,8 +235,10 @@ export const FieldItem = ({
!fixedSize && '[container-type:size]', !fixedSize && '[container-type:size]',
)} )}
data-error={hasErrors ? 'true' : undefined} data-error={hasErrors ? 'true' : undefined}
onClick={() => { onClick={(e) => {
e.stopPropagation();
setSettingsActive((prev) => !prev); setSettingsActive((prev) => !prev);
onFieldActivate?.();
onFocus?.(); onFocus?.();
}} }}
ref={$el} ref={$el}
@ -264,7 +275,7 @@ export const FieldItem = ({
</div> </div>
{!disabled && settingsActive && ( {!disabled && settingsActive && (
<div className="mt-1 flex justify-center"> <div className="z-[60] mt-1 flex justify-center">
<div className="dark:bg-background group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5"> <div className="dark:bg-background group flex items-center justify-evenly gap-x-1 rounded-md border bg-gray-900 p-0.5">
{advancedField && ( {advancedField && (
<button <button

4
packages/ui/primitives/template-flow/add-template-fields.tsx
View File

@ -100,6 +100,7 @@ export const AddTemplateFieldsFormPartial = ({
const { currentStep, totalSteps, previousStep } = useStep(); const { currentStep, totalSteps, previousStep } = useStep();
const [showAdvancedSettings, setShowAdvancedSettings] = useState(false); const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
const [currentField, setCurrentField] = useState<FieldFormType>(); const [currentField, setCurrentField] = useState<FieldFormType>();
const [activeFieldId, setActiveFieldId] = useState<string | null>(null);
const form = useForm<TAddTemplateFieldsFormSchema>({ const form = useForm<TAddTemplateFieldsFormSchema>({
defaultValues: { defaultValues: {
@ -475,6 +476,9 @@ export const AddTemplateFieldsFormPartial = ({
handleAdvancedSettings(); handleAdvancedSettings();
}} }}
hideRecipients={hideRecipients} hideRecipients={hideRecipients}
active={activeFieldId === field.formId}
onFieldActivate={() => setActiveFieldId(field.formId)}
onFieldDeactivate={() => setActiveFieldId(null)}
/> />
); );
})} })}