fix(ui): оверлей inline-редактора растягивается по content
- FieldOverlay: при fitOverlay=false добавлен w-max, чтобы оверлей растягивался по ширине редактора, а не обрезался по read-view - TaskDetail: date/datetime с автопролонгацией используют fitOverlay=false и overlayMinWidth=280
This commit is contained in:
@@ -43,7 +43,7 @@ export function FieldOverlay({
|
|||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
'absolute z-50 rounded-md border border-input bg-background shadow-sm',
|
'absolute z-50 rounded-md border border-input bg-background shadow-sm',
|
||||||
fitContainer ? 'inset-0' : 'left-0 top-0 min-w-full',
|
fitContainer ? 'inset-0' : 'left-0 top-0 min-w-full w-max',
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
style={style}
|
style={style}
|
||||||
|
|||||||
@@ -1297,6 +1297,8 @@ function FieldValueRow({
|
|||||||
const editorNode = renderEditor();
|
const editorNode = renderEditor();
|
||||||
const canShowInlineEditor = isGlobalEditMode && isEditable && !fieldState.immutable && !readOnly && editorNode != null;
|
const canShowInlineEditor = isGlobalEditMode && isEditable && !fieldState.immutable && !readOnly && editorNode != null;
|
||||||
const isContractNumberField = field.type === 'contract-number';
|
const isContractNumberField = field.type === 'contract-number';
|
||||||
|
const isDateWithProlongation = (field.type === 'date' || field.type === 'datetime') && field.autoProlongation;
|
||||||
|
const needsWideOverlay = isContractNumberField || isDateWithProlongation;
|
||||||
return canShowInlineEditor ? (
|
return canShowInlineEditor ? (
|
||||||
<InlineField
|
<InlineField
|
||||||
readView={readViewNode}
|
readView={readViewNode}
|
||||||
@@ -1304,16 +1306,24 @@ function FieldValueRow({
|
|||||||
isEditing={true}
|
isEditing={true}
|
||||||
editable={isEditable && !readOnly && !fieldState.immutable}
|
editable={isEditable && !readOnly && !fieldState.immutable}
|
||||||
onEnterEdit={handleEnterEdit}
|
onEnterEdit={handleEnterEdit}
|
||||||
fitOverlay={!isContractNumberField && field.type !== 'textarea' && field.type !== 'rich-text'}
|
fitOverlay={!needsWideOverlay && field.type !== 'textarea' && field.type !== 'rich-text'}
|
||||||
overlayClassName={
|
overlayClassName={
|
||||||
isContractNumberField
|
needsWideOverlay
|
||||||
? 'overflow-visible'
|
? 'overflow-visible'
|
||||||
: field.type === 'textarea' || field.type === 'rich-text'
|
: field.type === 'textarea' || field.type === 'rich-text'
|
||||||
? 'flex flex-col overflow-hidden'
|
? 'flex flex-col overflow-hidden'
|
||||||
: ''
|
: ''
|
||||||
}
|
}
|
||||||
overlayMaxHeight={field.type === 'textarea' || field.type === 'rich-text' ? 'min(85vh, 700px)' : undefined}
|
overlayMaxHeight={field.type === 'textarea' || field.type === 'rich-text' ? 'min(85vh, 700px)' : undefined}
|
||||||
overlayMinWidth={isContractNumberField ? 320 : field.type === 'textarea' || field.type === 'rich-text' ? '100%' : 180}
|
overlayMinWidth={
|
||||||
|
isContractNumberField
|
||||||
|
? 320
|
||||||
|
: isDateWithProlongation
|
||||||
|
? 280
|
||||||
|
: field.type === 'textarea' || field.type === 'rich-text'
|
||||||
|
? '100%'
|
||||||
|
: 180
|
||||||
|
}
|
||||||
overlayWidth={field.type === 'textarea' || field.type === 'rich-text' ? '100%' : undefined}
|
overlayWidth={field.type === 'textarea' || field.type === 'rich-text' ? '100%' : undefined}
|
||||||
className={field.type === 'textarea' || field.type === 'rich-text' ? 'items-start min-h-[24px] w-full' : 'items-center min-h-[28px]'}
|
className={field.type === 'textarea' || field.type === 'rich-text' ? 'items-start min-h-[24px] w-full' : 'items-center min-h-[28px]'}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user