diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx index 2c254e28d..20327a07a 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 { EditableChipCell } from '@/ui/components/editable-cell/types/EditableChipCell'; +import EditableChip from '@/ui/components/editable-cell/types/EditableChip'; 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, @@ -99,7 +112,7 @@ export function CompanyBoardCard({ - + - + - - + { onCardUpdate({ @@ -124,7 +137,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 8239a4178..dc21dcd62 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCell.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCell.tsx @@ -12,12 +12,20 @@ type OwnProps = { editModeVerticalPosition?: 'over' | 'below'; }; -export function EditableCell(props: OwnProps) { +export function EditableCell({ + editModeHorizontalAlign = 'left', + editModeVerticalPosition = 'over', + editModeContent, + nonEditModeContent, +}: OwnProps) { const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); const hasSoftFocus = useIsSoftFocusOnCurrentCell(); return ( diff --git a/front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx similarity index 85% rename from front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index 41c8d99c5..3c228b280 100644 --- a/front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx @@ -3,9 +3,9 @@ import styled from '@emotion/styled'; import { textInputStyle } from '@/ui/themes/effects'; -import { InplaceInput } from '../InplaceInput'; +import { EditableCell } from '../EditableCell'; -export type OwnProps = { +export type EditableChipProps = { placeholder?: string; value: string; picture: string; @@ -19,8 +19,6 @@ export type OwnProps = { commentCount?: number; onCommentClick?: (event: React.MouseEvent) => void; rightEndContents?: ReactNode[]; - setSoftFocusOnCurrentInplaceInput?: () => void; - hasSoftFocus?: boolean; }; // TODO: refactor @@ -41,7 +39,7 @@ const RightContainer = styled.div` margin-left: ${(props) => props.theme.spacing(1)}; `; -export function InplaceChipInput({ +function EditableChip({ value, placeholder, changeHandler, @@ -49,9 +47,7 @@ export function InplaceChipInput({ editModeHorizontalAlign, ChipComponent, rightEndContents, - setSoftFocusOnCurrentInplaceInput, - hasSoftFocus, -}: OwnProps) { +}: EditableChipProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); @@ -62,7 +58,7 @@ export function InplaceChipInput({ }; return ( - } - setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} - hasSoftFocus={hasSoftFocus} /> ); } + +export default EditableChip; diff --git a/front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx deleted file mode 100644 index 082e4cd09..000000000 --- a/front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx +++ /dev/null @@ -1,33 +0,0 @@ -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/inplace-input/types/InplaceDateInput.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx similarity index 83% rename from front/src/modules/ui/components/inplace-input/types/InplaceDateInput.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableDate.tsx index 272d8d128..9c8e46fa0 100644 --- a/front/src/modules/ui/components/inplace-input/types/InplaceDateInput.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx @@ -4,14 +4,12 @@ import styled from '@emotion/styled'; import { humanReadableDate } from '@/utils/utils'; import DatePicker from '../../form/DatePicker'; -import { InplaceInput } from '../InplaceInput'; +import { EditableCell } from '../EditableCell'; -export type OwnProps = { +export type EditableDateProps = { value: Date; changeHandler: (date: Date) => void; editModeHorizontalAlign?: 'left' | 'right'; - setSoftFocusOnCurrentInplaceInput?: () => void; - hasSoftFocus?: boolean; }; const StyledContainer = styled.div` @@ -34,13 +32,11 @@ const StyledCalendarContainer = styled.div` top: 10px; z-index: 1; `; -export function InplaceDateInput({ +export function EditableDate({ value, changeHandler, editModeHorizontalAlign, - setSoftFocusOnCurrentInplaceInput, - hasSoftFocus, -}: OwnProps) { +}: EditableDateProps) { const [inputValue, setInputValue] = useState(value); type DivProps = React.HTMLProps; @@ -62,7 +58,7 @@ export function InplaceDateInput({ }; return ( - @@ -77,11 +73,9 @@ export function InplaceDateInput({ /> } - setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} - hasSoftFocus={hasSoftFocus} nonEditModeContent={
{inputValue && humanReadableDate(inputValue)}
} - >
+ > ); } diff --git a/front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx deleted file mode 100644 index 8f64b3c72..000000000 --- a/front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx +++ /dev/null @@ -1,22 +0,0 @@ -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/inplace-input/types/InplaceDoubleTextInput.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx similarity index 82% rename from front/src/modules/ui/components/inplace-input/types/InplaceDoubleTextInput.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx index 485575c6d..c450c7eee 100644 --- a/front/src/modules/ui/components/inplace-input/types/InplaceDoubleTextInput.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { textInputStyle } from '@/ui/themes/effects'; -import { InplaceInput } from '../InplaceInput'; +import { EditableCell } from '../EditableCell'; type OwnProps = { firstValue: string; @@ -12,8 +12,6 @@ type OwnProps = { secondValuePlaceholder: string; nonEditModeContent: ReactElement; onChange: (firstValue: string, secondValue: string) => void; - setSoftFocusOnCurrentInplaceInput?: () => void; - hasSoftFocus?: boolean; }; const StyledContainer = styled.div` @@ -35,20 +33,18 @@ const StyledEditInplaceInput = styled.input` ${textInputStyle} `; -export function InplaceDoubleTextInput({ +export function EditableDoubleText({ 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/EditableDoubleTextCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx deleted file mode 100644 index 7f68866f6..000000000 --- a/front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx +++ /dev/null @@ -1,26 +0,0 @@ -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/inplace-input/types/InplacePhoneInput.tsx b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx similarity index 81% rename from front/src/modules/ui/components/inplace-input/types/InplacePhoneInput.tsx rename to front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx index 9cb0d01ec..cdb341c35 100644 --- a/front/src/modules/ui/components/inplace-input/types/InplacePhoneInput.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx @@ -5,14 +5,12 @@ import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'; import { textInputStyle } from '@/ui/themes/effects'; import { RawLink } from '../../links/RawLink'; -import { InplaceInput } from '../InplaceInput'; +import { EditableCell } from '../EditableCell'; type OwnProps = { placeholder?: string; value: string; changeHandler: (updated: string) => void; - setSoftFocusOnCurrentInplaceInput?: () => void; - hasSoftFocus?: boolean; }; const StyledRawLink = styled(RawLink)` @@ -32,18 +30,12 @@ const StyledEditInplaceInput = styled.input` ${textInputStyle} `; -export function InplacePhoneInput({ - value, - placeholder, - changeHandler, - setSoftFocusOnCurrentInplaceInput, - hasSoftFocus, -}: OwnProps) { +export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) { const inputRef = useRef(null); const [inputValue, setInputValue] = useState(value); return ( - } - setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput} - hasSoftFocus={hasSoftFocus} /> ); } diff --git a/front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx b/front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx deleted file mode 100644 index e2436e962..000000000 --- a/front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx +++ /dev/null @@ -1,21 +0,0 @@ -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 new file mode 100644 index 000000000..f1ce9a4bd --- /dev/null +++ b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx @@ -0,0 +1,19 @@ +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 33fe3fea6..138be06a3 100644 --- a/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx @@ -9,12 +9,20 @@ type OwnProps = { editModeHorizontalAlign?: 'left' | 'right'; }; -export function EditableTextCell(props: OwnProps) { +export function EditableTextCell({ + editModeHorizontalAlign = 'left', + content, + changeHandler, + placeholder, +}: OwnProps) { const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell(); const hasSoftFocus = useIsSoftFocusOnCurrentCell(); return ( diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx index 1b95cba07..d5536df8d 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 { EditableDateCell } from '@/ui/components/editable-cell/types/EditableDateCell'; +import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate'; 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) => ( -