From 94ca61c887ead6f61bc495577de48cc1c7f94d27 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Fri, 7 Jul 2023 18:10:32 -0700 Subject: [PATCH] Revert "Refacto/remaining inplace input cells" (#534) Revert "Refacto/remaining inplace input cells (#531)" This reverts commit 6446692f25f336b76c6b0899d4dc10cd9aeda2a8. --- .../components/CompanyEditableNameCell.tsx | 4 +-- .../components/EditablePeopleFullName.tsx | 4 +-- .../components/CompanyBoardCard.tsx | 25 ++++++++++---- .../components/editable-cell/EditableCell.tsx | 12 +++++-- .../types/EditableChip.tsx} | 18 ++++------ .../editable-cell/types/EditableChipCell.tsx | 33 ------------------- .../types/EditableDate.tsx} | 18 ++++------ .../editable-cell/types/EditableDateCell.tsx | 22 ------------- .../types/EditableDoubleText.tsx} | 14 +++----- .../types/EditableDoubleTextCell.tsx | 26 --------------- .../types/EditablePhone.tsx} | 16 ++------- .../editable-cell/types/EditablePhoneCell.tsx | 21 ------------ .../types/EditableRelationCreateButton.tsx | 19 +++++++++++ .../editable-cell/types/EditableTextCell.tsx | 12 +++++-- .../src/pages/companies/companies-columns.tsx | 4 +-- front/src/pages/people/people-columns.tsx | 8 ++--- 16 files changed, 88 insertions(+), 168 deletions(-) rename front/src/modules/ui/components/{inplace-input/types/InplaceChipInput.tsx => editable-cell/types/EditableChip.tsx} (85%) delete mode 100644 front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx rename front/src/modules/ui/components/{inplace-input/types/InplaceDateInput.tsx => editable-cell/types/EditableDate.tsx} (83%) delete mode 100644 front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx rename front/src/modules/ui/components/{inplace-input/types/InplaceDoubleTextInput.tsx => editable-cell/types/EditableDoubleText.tsx} (82%) delete mode 100644 front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx rename front/src/modules/ui/components/{inplace-input/types/InplacePhoneInput.tsx => editable-cell/types/EditablePhone.tsx} (81%) delete mode 100644 front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx create mode 100644 front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx 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) => ( -