admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Revert "Refacto/remaining inplace input cells" (#534)

Browse Source 
Revert "Refacto/remaining inplace input cells (#531)"

This reverts commit 6446692f25.
This commit is contained in:
Charles Bochet
2023-07-07 18:10:32 -07:00
committed by GitHub
parent a975935f49
commit 94ca61c887
16 changed files with 88 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
front/src/modules/ui/components/editable-cell/EditableCell.tsx
View File

@ -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 (
<InplaceInput
{...props}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={!!hasSoftFocus}
/>

18
front/src/modules/ui/components/inplace-input/types/InplaceChipInput.tsx → front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
View File

@ -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<HTMLDivElement>) => 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<HTMLInputElement>(null);
const [inputValue, setInputValue] = useState(value);
@ -62,7 +58,7 @@ export function InplaceChipInput({
};
return (
<InplaceInput
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<StyledInplaceInput
@ -90,8 +86,8 @@ export function InplaceChipInput({
</RightContainer>
</NoEditModeContainer>
}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
hasSoftFocus={hasSoftFocus}
/>
);
}
export default EditableChip;

33
front/src/modules/ui/components/editable-cell/types/EditableChipCell.tsx
View File

@ -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<HTMLDivElement>) => void;
rightEndContents?: ReactNode[];
};
export function EditableChipCell(props: OwnProps) {
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
const hasSoftFocus = useIsSoftFocusOnCurrentCell();
return (
<InplaceChipInput
{...props}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={hasSoftFocus}
/>
);
}

18
front/src/modules/ui/components/inplace-input/types/InplaceDateInput.tsx → front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
View File

@ -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<StyledCalendarContainerProps>`
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<HTMLDivElement>;
@ -62,7 +58,7 @@ export function InplaceDateInput({
};
return (
<InplaceInput
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<StyledContainer>
@ -77,11 +73,9 @@ export function InplaceDateInput({
/>
</StyledContainer>
}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
hasSoftFocus={hasSoftFocus}
nonEditModeContent={
<div>{inputValue && humanReadableDate(inputValue)}</div>
}
></InplaceInput>
></EditableCell>
);
}

22
front/src/modules/ui/components/editable-cell/types/EditableDateCell.tsx
View File

@ -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 (
<InplaceDateInput
{...props}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={hasSoftFocus}
/>
);
}

14
front/src/modules/ui/components/inplace-input/types/InplaceDoubleTextInput.tsx → front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
View File

@ -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<HTMLInputElement>(null);
return (
<InplaceInput
<EditableCell
editModeContent={
<StyledContainer>
<StyledEditInplaceInput
@ -71,8 +67,6 @@ export function InplaceDoubleTextInput({
</StyledContainer>
}
nonEditModeContent={nonEditModeContent}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
hasSoftFocus={hasSoftFocus}
></InplaceInput>
></EditableCell>
);
}

26
front/src/modules/ui/components/editable-cell/types/EditableDoubleTextCell.tsx
View File

@ -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 (
<InplaceDoubleTextInput
{...props}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={hasSoftFocus}
/>
);
}

16
front/src/modules/ui/components/inplace-input/types/InplacePhoneInput.tsx → front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
View File

@ -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<HTMLInputElement>(null);
const [inputValue, setInputValue] = useState(value);
return (
<InplaceInput
<EditableCell
editModeContent={
<StyledEditInplaceInput
autoFocus
@ -73,8 +65,6 @@ export function InplacePhoneInput({
)}
</>
}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentInplaceInput}
hasSoftFocus={hasSoftFocus}
/>
);
}

21
front/src/modules/ui/components/editable-cell/types/EditablePhoneCell.tsx
View File

@ -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 (
<InplacePhoneInput
{...props}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={hasSoftFocus}
/>
);
}

19
front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx Normal file
View File

@ -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%;
`;

12
front/src/modules/ui/components/editable-cell/types/EditableTextCell.tsx
View File

@ -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 (
<InplaceTextInput
{...props}
editModeHorizontalAlign={editModeHorizontalAlign}
content={content}
changeHandler={changeHandler}
placeholder={placeholder}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={hasSoftFocus}
/>