67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { ReactElement } from 'react';
|
|
import styled from '@emotion/styled';
|
|
|
|
import { HotkeysScope } from '@/hotkeys/types/internal/HotkeysScope';
|
|
|
|
import { useCurrentCellEditMode } from './hooks/useCurrentCellEditMode';
|
|
import { useIsSoftFocusOnCurrentCell } from './hooks/useIsSoftFocusOnCurrentCell';
|
|
import { EditableCellDisplayMode } from './EditableCellDisplayMode';
|
|
import { EditableCellEditMode } from './EditableCellEditMode';
|
|
import { EditableCellSoftFocusMode } from './EditableCellSoftFocusMode';
|
|
|
|
export const CellBaseContainer = styled.div`
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
display: flex;
|
|
height: 32px;
|
|
position: relative;
|
|
user-select: none;
|
|
width: 100%;
|
|
`;
|
|
|
|
type OwnProps = {
|
|
editModeContent: ReactElement;
|
|
nonEditModeContent: ReactElement;
|
|
editModeHorizontalAlign?: 'left' | 'right';
|
|
editModeVerticalPosition?: 'over' | 'below';
|
|
editHotkeysScope?: HotkeysScope;
|
|
onSubmit?: () => void;
|
|
onCancel?: () => void;
|
|
};
|
|
|
|
export function EditableCell({
|
|
editModeHorizontalAlign = 'left',
|
|
editModeVerticalPosition = 'over',
|
|
editModeContent,
|
|
nonEditModeContent,
|
|
editHotkeysScope,
|
|
onSubmit,
|
|
onCancel,
|
|
}: OwnProps) {
|
|
const { isCurrentCellInEditMode } = useCurrentCellEditMode();
|
|
|
|
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
|
|
|
|
return (
|
|
<CellBaseContainer>
|
|
{isCurrentCellInEditMode ? (
|
|
<EditableCellEditMode
|
|
editModeHorizontalAlign={editModeHorizontalAlign}
|
|
editModeVerticalPosition={editModeVerticalPosition}
|
|
onSubmit={onSubmit}
|
|
onCancel={onCancel}
|
|
>
|
|
{editModeContent}
|
|
</EditableCellEditMode>
|
|
) : hasSoftFocus ? (
|
|
<EditableCellSoftFocusMode editHotkeysScope={editHotkeysScope}>
|
|
{nonEditModeContent}
|
|
</EditableCellSoftFocusMode>
|
|
) : (
|
|
<EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
|
|
)}
|
|
</CellBaseContainer>
|
|
);
|
|
}
|