diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx index 20327a07a..2c254e28d 100644 --- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx +++ b/front/src/modules/companies/components/CompanyEditableNameCell.tsx @@ -1,6 +1,6 @@ import { CellCommentChip } from '@/comments/components/CellCommentChip'; import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer'; -import EditableChip from '@/ui/components/editable-cell/types/EditableChip'; +import { EditableChipCell } from '@/ui/components/editable-cell/types/EditableChipCell'; import { getLogoUrlFromDomainName } from '@/utils/utils'; import { CommentableType, @@ -34,7 +34,7 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) { } return ( - ; -// TODO: Remove when refactoring EditableCell into EditableField -function HackScope({ children }: { children: React.ReactNode }) { - return ( - - - {children} - - - ); -} - export function CompanyBoardCard({ company, pipelineProgress, @@ -112,7 +99,7 @@ export function CompanyBoardCard({ - + - + - - + { onCardUpdate({ @@ -137,7 +124,7 @@ export function CompanyBoardCard({ }); }} /> - + diff --git a/front/src/modules/ui/components/editable-cell/EditableCell.tsx b/front/src/modules/ui/components/editable-cell/EditableCell.tsx index dc21dcd62..8239a4178 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCell.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCell.tsx @@ -12,20 +12,12 @@ type OwnProps = { editModeVerticalPosition?: 'over' | 'below'; }; -export function EditableCell({ - editModeHorizontalAlign = 'left', - editModeVerticalPosition = 'over', - editModeContent, - nonEditModeContent, -}: OwnProps) { +export function EditableCell(props: OwnProps) { const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); const hasSoftFocus = useIsSoftFocusOnCurrentCell(); return ( diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx new file mode 100644 index 000000000..082e4cd09 --- /dev/null +++ b/front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx @@ -0,0 +1,33 @@ +import { ComponentType, ReactNode } from 'react'; + +import { InplaceChipInput } from '../../inplace-input/types/InplaceChipInput'; +import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell'; +import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell'; + +export type OwnProps = { + placeholder?: string; + value: string; + picture: string; + changeHandler: (upChipd: string) => void; + editModeHorizontalAlign?: 'left' | 'right'; + ChipComponent: ComponentType<{ + name: string; + picture: string; + isOverlapped?: boolean; + }>; + commentCount?: number; + onCommentClick?: (event: React.MouseEvent) => void; + rightEndContents?: ReactNode[]; +}; + +export function EditableChipCell(props: OwnProps) { + const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); + const hasSoftFocus = useIsSoftFocusOnCurrentCell(); + return ( + + ); +} diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx new file mode 100644 index 000000000..8f64b3c72 --- /dev/null +++ b/front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx @@ -0,0 +1,22 @@ +import { InplaceDateInput } from '../../inplace-input/types/InplaceDateInput'; +import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell'; +import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell'; + +type OwnProps = { + placeholder?: string; + value: Date; + changeHandler: (date: Date) => void; + editModeHorizontalAlign?: 'left' | 'right'; +}; + +export function EditableDateCell(props: OwnProps) { + const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); + const hasSoftFocus = useIsSoftFocusOnCurrentCell(); + return ( + + ); +} diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx new file mode 100644 index 000000000..7f68866f6 --- /dev/null +++ b/front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx @@ -0,0 +1,26 @@ +import { ReactElement } from 'react'; + +import { InplaceDoubleTextInput } from '../../inplace-input/types/InplaceDoubleTextInput'; +import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell'; +import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell'; + +type OwnProps = { + firstValue: string; + secondValue: string; + firstValuePlaceholder: string; + secondValuePlaceholder: string; + nonEditModeContent: ReactElement; + onChange: (firstValue: string, secondValue: string) => void; +}; + +export function EditableDoubleTextCell(props: OwnProps) { + const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); + const hasSoftFocus = useIsSoftFocusOnCurrentCell(); + return ( + + ); +} diff --git a/front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx new file mode 100644 index 000000000..e2436e962 --- /dev/null +++ b/front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx @@ -0,0 +1,21 @@ +import { InplacePhoneInput } from '../../inplace-input/types/InplacePhoneInput'; +import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell'; +import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentCell'; + +type OwnProps = { + placeholder?: string; + value: string; + changeHandler: (Phone: string) => void; +}; + +export function EditablePhoneCell(props: OwnProps) { + const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); + const hasSoftFocus = useIsSoftFocusOnCurrentCell(); + return ( + + ); +} diff --git a/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx deleted file mode 100644 index f1ce9a4bd..000000000 --- a/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import styled from '@emotion/styled'; - -export const EditableRelationCreateButton = styled.button` - align-items: center; - background: none; - border: none; - border-radius: 4px; - cursor: pointer; - display: flex; - font-family: 'Inter'; - font-size: ${({ theme }) => theme.font.size.md}; - gap: ${({ theme }) => theme.spacing(2)}; - height: 31px; - padding-bottom: ${({ theme }) => theme.spacing(1)}; - padding-left: ${({ theme }) => theme.spacing(1)}; - padding-top: ${({ theme }) => theme.spacing(1)}; - user-select: none; - width: 100%; -`; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx index 138be06a3..33fe3fea6 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx @@ -9,20 +9,12 @@ type OwnProps = { editModeHorizontalAlign?: 'left' | 'right'; }; -export function EditableTextCell({ - editModeHorizontalAlign = 'left', - content, - changeHandler, - placeholder, -}: OwnProps) { +export function EditableTextCell(props: OwnProps) { const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); const hasSoftFocus = useIsSoftFocusOnCurrentCell(); return ( diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx b/front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx similarity index 85% rename from front/src/modules/ui/components/editable-cell/types/EditableChip.tsx rename to front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx index 3c228b280..41c8d99c5 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx +++ b/front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx @@ -3,9 +3,9 @@ import styled from '@emotion/styled'; import { textInputStyle } from '@/ui/themes/effects'; -import { EditableCell } from '../EditableCell'; +import { InplaceInput } from '../InplaceInput'; -export type EditableChipProps = { +export type OwnProps = { placeholder?: string; value: string; picture: string; @@ -19,6 +19,8 @@ export type EditableChipProps = { commentCount?: number; onCommentClick?: (event: React.MouseEvent) => void; rightEndContents?: ReactNode[]; + setSoftFocusOnCurrentInplaceInput?: () => void; + hasSoftFocus?: boolean; }; // TODO: refactor @@ -39,7 +41,7 @@ const RightContainer = styled.div` margin-left: ${(props) => props.theme.spacing(1)}; `; -function EditableChip({ +export function InplaceChipInput({ value, placeholder, changeHandler, @@ -47,7 +49,9 @@ function EditableChip({ editModeHorizontalAlign, ChipComponent, rightEndContents, -}: EditableChipProps) { + setSoftFocusOnCurrentInplaceInput, + hasSoftFocus, +}: OwnProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); @@ -58,7 +62,7 @@ function EditableChip({ }; return ( - } + setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} + hasSoftFocus={hasSoftFocus} /> ); } - -export default EditableChip; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx b/front/src/modules/ui/components/inplace-input/types/InplaceDateInput.tsx similarity index 83% rename from front/src/modules/ui/components/editable-cell/types/EditableDate.tsx rename to front/src/modules/ui/components/inplace-input/types/InplaceDateInput.tsx index 9c8e46fa0..272d8d128 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx +++ b/front/src/modules/ui/components/inplace-input/types/InplaceDateInput.tsx @@ -4,12 +4,14 @@ import styled from '@emotion/styled'; import { humanReadableDate } from '@/utils/utils'; import DatePicker from '../../form/DatePicker'; -import { EditableCell } from '../EditableCell'; +import { InplaceInput } from '../InplaceInput'; -export type EditableDateProps = { +export type OwnProps = { value: Date; changeHandler: (date: Date) => void; editModeHorizontalAlign?: 'left' | 'right'; + setSoftFocusOnCurrentInplaceInput?: () => void; + hasSoftFocus?: boolean; }; const StyledContainer = styled.div` @@ -32,11 +34,13 @@ const StyledCalendarContainer = styled.div` top: 10px; z-index: 1; `; -export function EditableDate({ +export function InplaceDateInput({ value, changeHandler, editModeHorizontalAlign, -}: EditableDateProps) { + setSoftFocusOnCurrentInplaceInput, + hasSoftFocus, +}: OwnProps) { const [inputValue, setInputValue] = useState(value); type DivProps = React.HTMLProps; @@ -58,7 +62,7 @@ export function EditableDate({ }; return ( - @@ -73,9 +77,11 @@ export function EditableDate({ /> } + setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} + hasSoftFocus={hasSoftFocus} nonEditModeContent={
{inputValue && humanReadableDate(inputValue)}
} - >
+ >
); } diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx b/front/src/modules/ui/components/inplace-input/types/InplaceDoubleTextInput.tsx similarity index 82% rename from front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx rename to front/src/modules/ui/components/inplace-input/types/InplaceDoubleTextInput.tsx index c450c7eee..485575c6d 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx +++ b/front/src/modules/ui/components/inplace-input/types/InplaceDoubleTextInput.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { textInputStyle } from '@/ui/themes/effects'; -import { EditableCell } from '../EditableCell'; +import { InplaceInput } from '../InplaceInput'; type OwnProps = { firstValue: string; @@ -12,6 +12,8 @@ type OwnProps = { secondValuePlaceholder: string; nonEditModeContent: ReactElement; onChange: (firstValue: string, secondValue: string) => void; + setSoftFocusOnCurrentInplaceInput?: () => void; + hasSoftFocus?: boolean; }; const StyledContainer = styled.div` @@ -33,18 +35,20 @@ const StyledEditInplaceInput = styled.input` ${textInputStyle} `; -export function EditableDoubleText({ +export function InplaceDoubleTextInput({ firstValue, secondValue, firstValuePlaceholder, secondValuePlaceholder, nonEditModeContent, onChange, + setSoftFocusOnCurrentInplaceInput, + hasSoftFocus, }: OwnProps) { const firstValueInputRef = useRef(null); return ( - } nonEditModeContent={nonEditModeContent} - > + setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} + hasSoftFocus={hasSoftFocus} + > ); } diff --git a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx b/front/src/modules/ui/components/inplace-input/types/InplacePhoneInput.tsx similarity index 81% rename from front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx rename to front/src/modules/ui/components/inplace-input/types/InplacePhoneInput.tsx index cdb341c35..9cb0d01ec 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx +++ b/front/src/modules/ui/components/inplace-input/types/InplacePhoneInput.tsx @@ -5,12 +5,14 @@ import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'; import { textInputStyle } from '@/ui/themes/effects'; import { RawLink } from '../../links/RawLink'; -import { EditableCell } from '../EditableCell'; +import { InplaceInput } from '../InplaceInput'; type OwnProps = { placeholder?: string; value: string; changeHandler: (updated: string) => void; + setSoftFocusOnCurrentInplaceInput?: () => void; + hasSoftFocus?: boolean; }; const StyledRawLink = styled(RawLink)` @@ -30,12 +32,18 @@ const StyledEditInplaceInput = styled.input` ${textInputStyle} `; -export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) { +export function InplacePhoneInput({ + value, + placeholder, + changeHandler, + setSoftFocusOnCurrentInplaceInput, + hasSoftFocus, +}: OwnProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); return ( - } + setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} + hasSoftFocus={hasSoftFocus} /> ); } diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx index d5536df8d..1b95cba07 100644 --- a/front/src/pages/companies/companies-columns.tsx +++ b/front/src/pages/companies/companies-columns.tsx @@ -3,7 +3,7 @@ import { createColumnHelper } from '@tanstack/react-table'; import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell'; import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell'; -import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate'; +import { EditableDateCell } from '@/ui/components/editable-cell/types/EditableDateCell'; import { EditableTextCell } from '@/ui/components/editable-cell/types/EditableTextCell'; import { ColumnHead } from '@/ui/components/table/ColumnHead'; import { @@ -114,7 +114,7 @@ export const useCompaniesColumns = () => { /> ), cell: (props) => ( - { } /> ), cell: (props) => ( - { @@ -112,7 +112,7 @@ export const usePeopleColumns = () => { /> ), cell: (props) => ( -