diff --git a/front/src/modules/companies/components/CompanyChip.tsx b/front/src/modules/companies/components/CompanyChip.tsx index 73610d7261..4e01286e39 100644 --- a/front/src/modules/companies/components/CompanyChip.tsx +++ b/front/src/modules/companies/components/CompanyChip.tsx @@ -1,70 +1,21 @@ -import { Link } from 'react-router-dom'; -import { Theme } from '@emotion/react'; -import styled from '@emotion/styled'; +import { EntityChip } from '@/ui/chip/components/EntityChip'; -import { Avatar } from '@/users/components/Avatar'; - -export type CompanyChipPropsType = { +type OwnProps = { id: string; name: string; picture?: string; + clickable?: boolean; }; -const baseStyle = ({ theme }: { theme: Theme }) => ` - align-items: center; - background-color: ${theme.background.tertiary}; - border-radius: ${theme.spacing(1)}; - color: ${theme.font.color.primary}; - display: inline-flex; - gap: ${theme.spacing(1)}; - height: calc(20px - 2 * ${theme.spacing(1)}); - overflow: hidden; - padding: ${theme.spacing(1)}; - - text-decoration: none; - - user-select: none; - - :hover { - filter: brightness(95%); - } - - img { - height: 14px; - object-fit: cover; - width: 14px; - } -`; - -const StyledName = styled.span` - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -`; - -const StyledContainerLink = styled(Link)` - ${baseStyle} -`; - -const StyledContainerNoLink = styled.div` - ${baseStyle} -`; - -export function CompanyChip({ id, name, picture }: CompanyChipPropsType) { - const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink; - +export function CompanyChip({ id, name, picture, clickable }: OwnProps) { return ( - - {picture && ( - - )} - {name} - + ); } diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx index 42beae7623..9928981fd4 100644 --- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx +++ b/front/src/modules/companies/components/CompanyEditableNameCell.tsx @@ -29,10 +29,15 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) { + } onSubmit={() => updateCompany({ variables: { diff --git a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx index dd78ad80b2..1244dfe78a 100644 --- a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx +++ b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx @@ -25,15 +25,13 @@ export function CompanyAccountOwnerEditableField({ company }: OwnProps) { }} parentHotkeyScope={{ scope: PageHotkeyScope.CompanyShowPage, + customScopes: { + goto: true, + }, }} iconLabel={} editModeContent={ - + } displayModeContent={ company.accountOwner?.displayName ? ( diff --git a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx index a43e8c69ac..7e2092f93f 100644 --- a/front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx +++ b/front/src/modules/companies/editable-field/components/CompanyAccountOwnerPickerFieldEditMode.tsx @@ -24,9 +24,8 @@ export function CompanyAccountOwnerPickerFieldEditMode({ company, onSubmit, onCancel, - parentHotkeyScope, }: OwnProps) { - const { closeEditableField } = useEditableField(parentHotkeyScope); + const { closeEditableField } = useEditableField(); function handleSubmit() { closeEditableField(); diff --git a/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx b/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx index 7688ea0d68..6869cead6a 100644 --- a/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx +++ b/front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx @@ -54,6 +54,7 @@ export function CompanyAddressEditableField({ company }: OwnProps) { /> } displayModeContent={internalValue ?? ''} + isDisplayModeContentEmpty={!(internalValue !== '')} /> ); diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx index d5d7a3b541..3550701468 100644 --- a/front/src/modules/people/components/EditablePeopleFullName.tsx +++ b/front/src/modules/people/components/EditablePeopleFullName.tsx @@ -51,6 +51,7 @@ export function EditablePeopleFullName({ } diff --git a/front/src/modules/people/components/PersonChip.tsx b/front/src/modules/people/components/PersonChip.tsx index f98b67f1b9..d6db804376 100644 --- a/front/src/modules/people/components/PersonChip.tsx +++ b/front/src/modules/people/components/PersonChip.tsx @@ -1,66 +1,26 @@ -import * as React from 'react'; -import { Link } from 'react-router-dom'; -import { Theme } from '@emotion/react'; -import styled from '@emotion/styled'; - -import { Avatar } from '@/users/components/Avatar'; +import { EntityChip } from '@/ui/chip/components/EntityChip'; export type PersonChipPropsType = { id: string; name: string; picture?: string; + clickable?: boolean; }; -const baseStyle = ({ theme }: { theme: Theme }) => ` - align-items: center; - background-color: ${theme.background.tertiary}; - border-radius: ${theme.spacing(1)}; - color: ${theme.font.color.primary}; - display: inline-flex; - gap: ${theme.spacing(1)}; - height: 12px; - overflow: hidden; - padding: ${theme.spacing(1)}; - text-decoration: none; - :hover { - filter: brightness(95%); - } - img { - border-radius: ${theme.border.radius.rounded}; - height: 14px; - object-fit: cover; - width: 14px; - } - white-space: nowrap; -`; - -const StyledContainerLink = styled(Link)` - ${baseStyle} -`; - -const StyledContainerNoLink = styled.div` - ${baseStyle} -`; - -const StyledName = styled.span` - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -`; - -export function PersonChip({ id, name, picture }: PersonChipPropsType) { - const ContainerComponent = id ? StyledContainerLink : StyledContainerNoLink; - +export function PersonChip({ + id, + name, + picture, + clickable, +}: PersonChipPropsType) { return ( - - - {name} - + ); } diff --git a/front/src/modules/ui/chip/components/EntityChip.tsx b/front/src/modules/ui/chip/components/EntityChip.tsx new file mode 100644 index 0000000000..daf6a6f562 --- /dev/null +++ b/front/src/modules/ui/chip/components/EntityChip.tsx @@ -0,0 +1,97 @@ +import * as React from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Theme } from '@emotion/react'; +import styled from '@emotion/styled'; + +import { Avatar, AvatarType } from '@/users/components/Avatar'; + +const baseStyle = ({ theme }: { theme: Theme }) => ` + align-items: center; + border-radius: ${theme.spacing(1)}; + color: ${theme.font.color.primary}; + display: inline-flex; + gap: ${theme.spacing(1)}; + height: 12px; + overflow: hidden; + padding: ${theme.spacing(1)}; + text-decoration: none; + + img { + border-radius: ${theme.border.radius.rounded}; + height: 14px; + object-fit: cover; + width: 14px; + } + + white-space: nowrap; +`; + +const StyledContainerLink = styled.div` + ${baseStyle} + + background-color: ${(props) => props.theme.background.tertiary}; + :hover { + filter: brightness(95%); + } +`; + +const StyledContainerReadOnly = styled.div` + ${baseStyle} +`; + +const StyledName = styled.span` + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +type OwnProps = { + linkToEntity: string; + entityId: string; + name: string; + picture?: string; + clickable?: boolean; + avatarType?: AvatarType; +}; + +export function EntityChip({ + linkToEntity, + entityId, + name, + picture, + clickable, + avatarType = 'rounded', +}: OwnProps) { + const navigate = useNavigate(); + + function handleLinkClick(event: React.MouseEvent) { + event.preventDefault(); + event.stopPropagation(); + + navigate(linkToEntity); + } + + return clickable && linkToEntity ? ( + + + {name} + + ) : ( + + + {name} + + ); +} diff --git a/front/src/modules/ui/editable-field/components/EditableField.tsx b/front/src/modules/ui/editable-field/components/EditableField.tsx index a5edba7e7d..ef001550b1 100644 --- a/front/src/modules/ui/editable-field/components/EditableField.tsx +++ b/front/src/modules/ui/editable-field/components/EditableField.tsx @@ -4,6 +4,7 @@ import { motion } from 'framer-motion'; import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; +import { useBindFieldHotkeyScope } from '../hooks/useBindFieldHotkeyScope'; import { useEditableField } from '../hooks/useEditableField'; import { EditableFieldDisplayMode } from './EditableFieldDisplayMode'; @@ -43,8 +44,10 @@ export const EditableFieldBaseContainer = styled.div` box-sizing: border-box; display: flex; + gap: ${({ theme }) => theme.spacing(1)}; height: 24px; + justify-content: flex-start; position: relative; user-select: none; @@ -60,6 +63,7 @@ type OwnProps = { displayModeContent: React.ReactNode; parentHotkeyScope?: HotkeyScope; customEditHotkeyScope?: HotkeyScope; + isDisplayModeContentEmpty?: boolean; onSubmit?: () => void; onCancel?: () => void; }; @@ -73,11 +77,17 @@ export function EditableField({ displayModeContent, parentHotkeyScope, customEditHotkeyScope, + isDisplayModeContentEmpty, onSubmit, onCancel, }: OwnProps) { const [isHovered, setIsHovered] = useState(false); + useBindFieldHotkeyScope({ + customEditHotkeyScope, + parentHotkeyScope, + }); + function handleContainerMouseEnter() { setIsHovered(true); } @@ -86,11 +96,10 @@ export function EditableField({ setIsHovered(false); } - const { isFieldInEditMode, openEditableField } = - useEditableField(parentHotkeyScope); + const { isFieldInEditMode, openEditableField } = useEditableField(); function handleDisplayModeClick() { - openEditableField(customEditHotkeyScope); + openEditableField(); } const showEditButton = !isFieldInEditMode && isHovered && useEditButton; @@ -114,6 +123,7 @@ export function EditableField({ {displayModeContent} diff --git a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx index 60f0bc5a33..d5cf542ee6 100644 --- a/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx +++ b/front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx @@ -2,7 +2,7 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; export const EditableFieldNormalModeOuterContainer = styled.div< - Pick + Pick >` align-items: center; border-radius: ${({ theme }) => theme.border.radius.sm}; @@ -15,7 +15,18 @@ export const EditableFieldNormalModeOuterContainer = styled.div< padding: ${({ theme }) => theme.spacing(1)}; - width: 100%; + ${(props) => { + console.log(props.isDisplayModeContentEmpty); + if (props.isDisplayModeContentEmpty) { + return css` + min-width: 50px; + `; + } else { + return css` + width: fit-content; + `; + } + }} ${(props) => { if (props.disableClick) { @@ -51,17 +62,20 @@ export const EditableFieldNormalModeInnerContainer = styled.div` type OwnProps = { disableClick?: boolean; onClick?: () => void; + isDisplayModeContentEmpty?: boolean; }; export function EditableFieldDisplayMode({ children, disableClick, onClick, + isDisplayModeContentEmpty, }: React.PropsWithChildren) { return ( {children} diff --git a/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx b/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx index d18ed15bbc..067a88d47f 100644 --- a/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx +++ b/front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx @@ -34,7 +34,7 @@ export function EditableFieldEditButton({ customHotkeyScope }: OwnProps) { const { openEditableField } = useEditableField(); function handleClick() { - openEditableField(customHotkeyScope); + openEditableField(); } return ( diff --git a/front/src/modules/ui/editable-field/hooks/useBindFieldHotkeyScope.ts b/front/src/modules/ui/editable-field/hooks/useBindFieldHotkeyScope.ts new file mode 100644 index 0000000000..8e9ea02f37 --- /dev/null +++ b/front/src/modules/ui/editable-field/hooks/useBindFieldHotkeyScope.ts @@ -0,0 +1,52 @@ +import { useEffect } from 'react'; + +import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; +import { isSameHotkeyScope } from '@/ui/hotkey/utils/isSameHotkeyScope'; +import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; + +import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState'; +import { FieldContext } from '../states/FieldContext'; +import { parentHotkeyScopeForFieldScopedState } from '../states/parentHotkeyScopeForFieldScopedState'; + +export function useBindFieldHotkeyScope({ + customEditHotkeyScope, + parentHotkeyScope, +}: { + customEditHotkeyScope?: HotkeyScope; + parentHotkeyScope?: HotkeyScope; +}) { + const [customEditHotkeyScopeForField, setCustomEditHotkeyScopeForField] = + useRecoilScopedState( + customEditHotkeyScopeForFieldScopedState, + FieldContext, + ); + + const [parentHotkeyScopeForField, setParentHotkeyScopeForField] = + useRecoilScopedState(parentHotkeyScopeForFieldScopedState, FieldContext); + + useEffect(() => { + if ( + customEditHotkeyScope && + !isSameHotkeyScope(customEditHotkeyScope, customEditHotkeyScopeForField) + ) { + setCustomEditHotkeyScopeForField(customEditHotkeyScope); + } + }, [ + customEditHotkeyScope, + customEditHotkeyScopeForField, + setCustomEditHotkeyScopeForField, + ]); + + useEffect(() => { + if ( + parentHotkeyScope && + !isSameHotkeyScope(parentHotkeyScope, parentHotkeyScopeForField) + ) { + setParentHotkeyScopeForField(parentHotkeyScope); + } + }, [ + parentHotkeyScope, + parentHotkeyScopeForField, + setParentHotkeyScopeForField, + ]); +} diff --git a/front/src/modules/ui/editable-field/hooks/useEditableField.ts b/front/src/modules/ui/editable-field/hooks/useEditableField.ts index a981b8492e..08bb8219b3 100644 --- a/front/src/modules/ui/editable-field/hooks/useEditableField.ts +++ b/front/src/modules/ui/editable-field/hooks/useEditableField.ts @@ -1,33 +1,50 @@ import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope'; -import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState'; +import { customEditHotkeyScopeForFieldScopedState } from '../states/customEditHotkeyScopeForFieldScopedState'; import { FieldContext } from '../states/FieldContext'; import { isFieldInEditModeScopedState } from '../states/isFieldInEditModeScopedState'; +import { parentHotkeyScopeForFieldScopedState } from '../states/parentHotkeyScopeForFieldScopedState'; import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope'; // TODO: use atoms for hotkey scopes -export function useEditableField(parentHotkeyScope?: HotkeyScope) { +export function useEditableField() { const [isFieldInEditMode, setIsFieldInEditMode] = useRecoilScopedState( isFieldInEditModeScopedState, FieldContext, ); + const [customEditHotkeyScopeForField] = useRecoilScopedState( + customEditHotkeyScopeForFieldScopedState, + FieldContext, + ); + + const [parentHotkeyScopeForField] = useRecoilScopedState( + parentHotkeyScopeForFieldScopedState, + FieldContext, + ); + const setHotkeyScope = useSetHotkeyScope(); function closeEditableField() { setIsFieldInEditMode(false); - if (parentHotkeyScope) { - setHotkeyScope(parentHotkeyScope.scope, parentHotkeyScope.customScopes); + if (parentHotkeyScopeForField) { + setHotkeyScope( + parentHotkeyScopeForField.scope, + parentHotkeyScopeForField.customScopes, + ); } } - function openEditableField(customHotkeyScope?: HotkeyScope) { + function openEditableField() { setIsFieldInEditMode(true); - if (customHotkeyScope) { - setHotkeyScope(customHotkeyScope.scope, customHotkeyScope.customScopes); + if (customEditHotkeyScopeForField) { + setHotkeyScope( + customEditHotkeyScopeForField.scope, + customEditHotkeyScopeForField.customScopes, + ); } else { setHotkeyScope(EditableFieldHotkeyScope.EditableField); } diff --git a/front/src/modules/ui/editable-field/states/customEditHotkeyScopeForFieldScopedState.ts b/front/src/modules/ui/editable-field/states/customEditHotkeyScopeForFieldScopedState.ts new file mode 100644 index 0000000000..2d17c89c86 --- /dev/null +++ b/front/src/modules/ui/editable-field/states/customEditHotkeyScopeForFieldScopedState.ts @@ -0,0 +1,11 @@ +import { atomFamily } from 'recoil'; + +import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; + +export const customEditHotkeyScopeForFieldScopedState = atomFamily< + HotkeyScope | null, + string +>({ + key: 'customEditHotkeyScopeForFieldScopedState', + default: null, +}); diff --git a/front/src/modules/ui/editable-field/states/parentHotkeyScopeForFieldScopedState.ts b/front/src/modules/ui/editable-field/states/parentHotkeyScopeForFieldScopedState.ts new file mode 100644 index 0000000000..bad16f7a1b --- /dev/null +++ b/front/src/modules/ui/editable-field/states/parentHotkeyScopeForFieldScopedState.ts @@ -0,0 +1,11 @@ +import { atomFamily } from 'recoil'; + +import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; + +export const parentHotkeyScopeForFieldScopedState = atomFamily< + HotkeyScope | null, + string +>({ + key: 'parentHotkeyScopeForFieldScopedState', + default: null, +}); diff --git a/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx b/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx index 86112006ec..28878d1ddc 100644 --- a/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx +++ b/front/src/modules/ui/editable-field/variants/components/EditableFieldEditModeDate.tsx @@ -10,12 +10,8 @@ type OwnProps = { parentHotkeyScope?: HotkeyScope; }; -export function EditableFieldEditModeDate({ - value, - onChange, - parentHotkeyScope, -}: OwnProps) { - const { closeEditableField } = useEditableField(parentHotkeyScope); +export function EditableFieldEditModeDate({ value, onChange }: OwnProps) { + const { closeEditableField } = useEditableField(); function handleChange(newValue: string) { onChange?.(newValue); diff --git a/front/src/modules/ui/hotkey/utils/isSameHotkeyScope.ts b/front/src/modules/ui/hotkey/utils/isSameHotkeyScope.ts new file mode 100644 index 0000000000..9ea91ce556 --- /dev/null +++ b/front/src/modules/ui/hotkey/utils/isSameHotkeyScope.ts @@ -0,0 +1,8 @@ +import { HotkeyScope } from '../types/HotkeyScope'; + +export function isSameHotkeyScope( + hotkeyScope1: HotkeyScope | undefined | null, + hotkeyScope2: HotkeyScope | undefined | null, +): boolean { + return JSON.stringify(hotkeyScope1) === JSON.stringify(hotkeyScope2); +} diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx new file mode 100644 index 0000000000..06c3535343 --- /dev/null +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx @@ -0,0 +1,51 @@ +import styled from '@emotion/styled'; + +type Props = { + softFocus?: boolean; + onClick?: () => void; +}; + +export const EditableCellDisplayModeOuterContainer = styled.div< + Pick +>` + align-items: center; + display: flex; + height: 100%; + overflow: hidden; + + padding-left: ${({ theme }) => theme.spacing(2)}; + padding-right: ${({ theme }) => theme.spacing(1)}; + width: 100%; + + ${(props) => + props.softFocus + ? `background: ${props.theme.background.transparent.secondary}; + border-radius: ${props.theme.border.radius.sm}; + box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};` + : ''} +`; + +export const EditableCellDisplayModeInnerContainer = styled.div` + align-items: center; + display: flex; + height: 100%; + overflow: hidden; + width: 100%; +`; + +export function EditableCellDisplayContainer({ + children, + softFocus, + onClick, +}: React.PropsWithChildren) { + return ( + + + {children} + + + ); +} diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx index cd118983f9..18cf455559 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx @@ -1,51 +1,19 @@ -import styled from '@emotion/styled'; - import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell'; -type Props = { - softFocus?: boolean; -}; - -export const EditableCellNormalModeOuterContainer = styled.div` - align-items: center; - display: flex; - height: 100%; - overflow: hidden; - - padding-left: ${({ theme }) => theme.spacing(2)}; - padding-right: ${({ theme }) => theme.spacing(1)}; - width: 100%; - - ${(props) => - props.softFocus - ? `background: ${props.theme.background.transparent.secondary}; - border-radius: ${props.theme.border.radius.sm}; - box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};` - : ''} -`; - -export const EditableCellNormalModeInnerContainer = styled.div` - align-items: center; - display: flex; - height: 100%; - overflow: hidden; - width: 100%; -`; +import { EditableCellDisplayContainer } from './EditableCellContainer'; export function EditableCellDisplayMode({ children, }: React.PropsWithChildren) { const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); - function handleOnClick() { + function handleClick() { setSoftFocusOnCurrentCell(); } return ( - - - {children} - - + + {children} + ); } diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx index 6af77205eb..fcfc58145d 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellSoftFocusMode.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import { PropsWithChildren } from 'react'; import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys'; import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope'; @@ -7,15 +7,16 @@ import { isNonTextWritingKey } from '@/ui/hotkey/utils/isNonTextWritingKey'; import { TableHotkeyScope } from '../../types/TableHotkeyScope'; import { useEditableCell } from '../hooks/useEditableCell'; -import { - EditableCellNormalModeInnerContainer, - EditableCellNormalModeOuterContainer, -} from './EditableCellDisplayMode'; +import { EditableCellDisplayContainer } from './EditableCellContainer'; + +type OwnProps = PropsWithChildren<{ + editHotkeyScope?: HotkeyScope; +}>; export function EditableCellSoftFocusMode({ children, editHotkeyScope, -}: React.PropsWithChildren<{ editHotkeyScope?: HotkeyScope }>) { +}: OwnProps) { const { openEditableCell } = useEditableCell(); function openEditMode() { @@ -61,13 +62,8 @@ export function EditableCellSoftFocusMode({ } return ( - - - {children} - - + + {children} + ); } diff --git a/front/src/modules/ui/table/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/table/editable-cell/types/EditableChip.tsx index b9e578af88..1208a53910 100644 --- a/front/src/modules/ui/table/editable-cell/types/EditableChip.tsx +++ b/front/src/modules/ui/table/editable-cell/types/EditableChip.tsx @@ -1,11 +1,4 @@ -import { - ChangeEvent, - ComponentType, - ReactNode, - useEffect, - useRef, - useState, -} from 'react'; +import { ChangeEvent, ReactNode, useEffect, useRef, useState } from 'react'; import styled from '@emotion/styled'; import { textInputStyle } from '@/ui/themes/effects'; @@ -13,18 +6,11 @@ import { textInputStyle } from '@/ui/themes/effects'; import { EditableCell } from '../components/EditableCell'; export type EditableChipProps = { - id: string; placeholder?: string; value: string; - picture: string; changeHandler: (updated: string) => void; editModeHorizontalAlign?: 'left' | 'right'; - ChipComponent: ComponentType<{ - id: string; - name: string; - picture: string; - isOverlapped?: boolean; - }>; + ChipComponent: React.ReactNode; commentThreadCount?: number; onCommentClick?: (event: React.MouseEvent) => void; rightEndContents?: ReactNode[]; @@ -52,11 +38,9 @@ const RightContainer = styled.div` // TODO: move right end content in EditableCell export function EditableCellChip({ - id, value, placeholder, changeHandler, - picture, editModeHorizontalAlign, ChipComponent, rightEndContents, @@ -95,7 +79,7 @@ export function EditableCellChip({ onCancel={onCancel} nonEditModeContent={ - + {ChipComponent} {rightEndContents && rightEndContents.length > 0 &&