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

Refacto/remaining inplace input cells (#531)

Browse Source 
* Add inplace date input component

* Add inplace phone input component

* Add inplace double text input component

* Add inplace chip input component

* Remove useless styled component

* Reduce code through props destructuring
This commit is contained in:
Emilien Chauvet
2023-07-07 15:00:01 -07:00
committed by GitHub
parent f62fdc1219
commit 6446692f25
16 changed files with 168 additions and 88 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,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 (
<InplaceInput
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent}
{...props}
setSoftFocusOnCurrentInplaceInput={setSoftFocusOnCurrentCell}
hasSoftFocus={!!hasSoftFocus}
/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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