diff --git a/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx b/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx index 2b12dcf79..3accda9f3 100644 --- a/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx +++ b/front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx @@ -2,10 +2,11 @@ import { useEffect, useState } from 'react'; import { useRecoilValue } from 'recoil'; import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState'; -import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText'; import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId'; import { useUpdateOneCompanyMutation } from '~/generated/graphql'; +import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL'; + export function EditableCompanyDomainNameCell() { const currentRowEntityId = useCurrentRowEntityId(); @@ -20,8 +21,8 @@ export function EditableCompanyDomainNameCell() { }, [name]); return ( - updateCompany({ diff --git a/front/src/modules/ui/link/components/RawLink.tsx b/front/src/modules/ui/link/components/RawLink.tsx index b0d397354..e9be8d2f9 100644 --- a/front/src/modules/ui/link/components/RawLink.tsx +++ b/front/src/modules/ui/link/components/RawLink.tsx @@ -20,7 +20,7 @@ const StyledClickable = styled.div` export function RawLink({ className, href, children, onClick }: OwnProps) { return ( - + {children} diff --git a/front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx b/front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx new file mode 100644 index 000000000..0390d8f77 --- /dev/null +++ b/front/src/modules/ui/table/editable-cell/types/EditableCellURL.tsx @@ -0,0 +1,64 @@ +import { ChangeEvent, useEffect, useState } from 'react'; + +import { InplaceInputTextEditMode } from '@/ui/inplace-input/components/InplaceInputTextEditMode'; + +import { RawLink } from '../../../link/components/RawLink'; +import { CellSkeleton } from '../components/CellSkeleton'; +import { EditableCell } from '../components/EditableCell'; + +type OwnProps = { + placeholder?: string; + url: string; + onChange: (newURL: string) => void; + editModeHorizontalAlign?: 'left' | 'right'; + loading?: boolean; + onSubmit?: () => void; + onCancel?: () => void; +}; + +export function EditableCellURL({ + url, + placeholder, + onChange, + editModeHorizontalAlign, + loading, + onCancel, + onSubmit, +}: OwnProps) { + const [internalValue, setInternalValue] = useState(url); + + useEffect(() => { + setInternalValue(url); + }, [url]); + + return ( + ) => { + setInternalValue(event.target.value); + onChange(event.target.value); + }} + /> + } + onSubmit={onSubmit} + onCancel={onCancel} + nonEditModeContent={ + loading ? ( + + ) : ( + e.stopPropagation()} + href={internalValue ? 'https://' + internalValue : ''} + > + {internalValue} + + ) + } + > + ); +}