mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Change to using arrow functions (#1603)

Browse Source 
* Change to using arrow functions

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>

* Add lint rule

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Matheus <matheus_benini@hotmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-09-16 02:41:10 +01:00
committed by GitHub
parent 549335054a
commit 00a3c8ca2b
575 changed files with 2848 additions and 3063 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,7 +43,7 @@ const DEFAULT_CELL_SCOPE: HotkeyScope = {
scope: TableHotkeyScope.CellEditMode,
};
export function EditableCell({
export const EditableCell = ({
editModeHorizontalAlign = 'left',
editModeVerticalPosition = 'over',
editModeContent,
@ -52,7 +52,7 @@ export function EditableCell({
transparent = false,
maxContentWidth,
useEditButton,
}: EditableCellProps) {
}: EditableCellProps) => {
const { isCurrentCellInEditMode } = useCurrentCellEditMode();
const [isHovered, setIsHovered] = useState(false);
@ -60,18 +60,18 @@ export function EditableCell({
const { openEditableCell } = useEditableCell();
function handlePenClick() {
const handlePenClick = () => {
setSoftFocusOnCurrentCell();
openEditableCell();
}
};
function handleContainerMouseEnter() {
const handleContainerMouseEnter = () => {
setIsHovered(true);
}
};
function handleContainerMouseLeave() {
const handleContainerMouseLeave = () => {
setIsHovered(false);
}
};
const showEditButton = useEditButton && isHovered && !isCurrentCellInEditMode;
@ -116,4 +116,4 @@ export function EditableCell({
</StyledCellBaseContainer>
</CellHotkeyScopeContext.Provider>
);
}
};

36
front/src/modules/ui/table/editable-cell/components/EditableCellDisplayContainer.tsx
View File

@ -36,28 +36,24 @@ const StyledEditableCellDisplayModeInnerContainer = styled.div`
width: 100%;
`;
export function EditableCellDisplayContainer({
export const EditableCellDisplayContainer = ({
children,
softFocus,
onClick,
scrollRef,
isHovered,
}: React.PropsWithChildren<EditableCellDisplayContainerProps>) {
return (
<StyledEditableCellDisplayModeOuterContainer
data-testid={
softFocus
? 'editable-cell-soft-focus-mode'
: 'editable-cell-display-mode'
}
onClick={onClick}
isHovered={isHovered}
softFocus={softFocus}
ref={scrollRef}
>
<StyledEditableCellDisplayModeInnerContainer>
{children}
</StyledEditableCellDisplayModeInnerContainer>
</StyledEditableCellDisplayModeOuterContainer>
);
}
}: React.PropsWithChildren<EditableCellDisplayContainerProps>) => (
<StyledEditableCellDisplayModeOuterContainer
data-testid={
softFocus ? 'editable-cell-soft-focus-mode' : 'editable-cell-display-mode'
}
onClick={onClick}
isHovered={isHovered}
softFocus={softFocus}
ref={scrollRef}
>
<StyledEditableCellDisplayModeInnerContainer>
{children}
</StyledEditableCellDisplayModeInnerContainer>
</StyledEditableCellDisplayModeOuterContainer>
);

10
front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx
View File

@ -3,22 +3,22 @@ import { useSetSoftFocusOnCurrentCell } from '../hooks/useSetSoftFocusOnCurrentC
import { EditableCellDisplayContainer } from './EditableCellDisplayContainer';
export function EditableCellDisplayMode({
export const EditableCellDisplayMode = ({
children,
isHovered,
}: React.PropsWithChildren<unknown> & { isHovered?: boolean }) {
}: React.PropsWithChildren<unknown> & { isHovered?: boolean }) => {
const setSoftFocusOnCurrentCell = useSetSoftFocusOnCurrentCell();
const { openEditableCell } = useEditableCell();
function handleClick() {
const handleClick = () => {
setSoftFocusOnCurrentCell();
openEditableCell();
}
};
return (
<EditableCellDisplayContainer isHovered={isHovered} onClick={handleClick}>
{children}
</EditableCellDisplayContainer>
);
}
};

24
front/src/modules/ui/table/editable-cell/components/EditableCellEditButton.tsx
View File

@ -13,17 +13,15 @@ type EditableCellEditButtonProps = {
onClick?: () => void;
};
export function EditableCellEditButton({
export const EditableCellEditButton = ({
onClick,
}: EditableCellEditButtonProps) {
return (
<StyledEditButtonContainer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.1 }}
whileHover={{ scale: 1.04 }}
>
<FloatingIconButton size="small" onClick={onClick} Icon={IconPencil} />
</StyledEditButtonContainer>
);
}
}: EditableCellEditButtonProps) => (
<StyledEditButtonContainer
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.1 }}
whileHover={{ scale: 1.04 }}
>
<FloatingIconButton size="small" onClick={onClick} Icon={IconPencil} />
</StyledEditButtonContainer>
);

26
front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx
View File

@ -37,22 +37,20 @@ export type EditableCellEditModeProps = {
initialValue?: string;
};
export function EditableCellEditMode({
export const EditableCellEditMode = ({
editModeHorizontalAlign,
editModeVerticalPosition,
children,
transparent = false,
maxContentWidth,
}: EditableCellEditModeProps) {
return (
<StyledEditableCellEditModeContainer
maxContentWidth={maxContentWidth}
transparent={transparent}
data-testid="editable-cell-edit-mode-container"
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{children}
</StyledEditableCellEditModeContainer>
);
}
}: EditableCellEditModeProps) => (
<StyledEditableCellEditModeContainer
maxContentWidth={maxContentWidth}
transparent={transparent}
data-testid="editable-cell-edit-mode-container"
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>
{children}
</StyledEditableCellEditModeContainer>
);

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

@ -10,7 +10,7 @@ import { EditableCellDisplayContainer } from './EditableCellDisplayContainer';
type OwnProps = PropsWithChildren<unknown>;
export function EditableCellSoftFocusMode({ children }: OwnProps) {
export const EditableCellSoftFocusMode = ({ children }: OwnProps) => {
const { openEditableCell } = useEditableCell();
const scrollRef = useRef<HTMLDivElement>(null);
@ -19,9 +19,9 @@ export function EditableCellSoftFocusMode({ children }: OwnProps) {
scrollRef.current?.scrollIntoView({ block: 'nearest' });
}, []);
function openEditMode() {
const openEditMode = () => {
openEditableCell();
}
};
useScopedHotkeys(
'enter',
@ -53,9 +53,9 @@ export function EditableCellSoftFocusMode({ children }: OwnProps) {
},
);
function handleClick() {
const handleClick = () => {
openEditMode();
}
};
return (
<EditableCellDisplayContainer
@ -66,4 +66,4 @@ export function EditableCellSoftFocusMode({ children }: OwnProps) {
{children}
</EditableCellDisplayContainer>
);
}
};

4
front/src/modules/ui/table/editable-cell/components/GenericEditableCell.tsx
View File

@ -30,7 +30,7 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldMetadata>;
};
export function GenericEditableCell({ columnDefinition }: OwnProps) {
export const GenericEditableCell = ({ columnDefinition }: OwnProps) => {
if (isViewFieldEmail(columnDefinition)) {
return <GenericEditableEmailCell columnDefinition={columnDefinition} />;
} else if (isViewFieldText(columnDefinition)) {
@ -65,4 +65,4 @@ export function GenericEditableCell({ columnDefinition }: OwnProps) {
);
return <></>;
}
}
};

4
front/src/modules/ui/table/editable-cell/hooks/useCurrentCellEditMode.ts
View File

@ -6,7 +6,7 @@ import { isCellInEditModeFamilyState } from '../../states/isCellInEditModeFamily
import { useCurrentCellPosition } from './useCurrentCellPosition';
export function useCurrentCellEditMode() {
export const useCurrentCellEditMode = () => {
const moveEditModeToCellPosition = useMoveEditModeToCellPosition();
const currentCellPosition = useCurrentCellPosition();
@ -20,4 +20,4 @@ export function useCurrentCellEditMode() {
}, [currentCellPosition, moveEditModeToCellPosition]);
return { isCurrentCellInEditMode, setCurrentCellInEditMode };
}
};

4
front/src/modules/ui/table/editable-cell/hooks/useCurrentCellPosition.ts
View File

@ -4,7 +4,7 @@ import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { RowIndexContext } from '../../contexts/RowIndexContext';
import { CellPosition } from '../../types/CellPosition';
export function useCurrentCellPosition() {
export const useCurrentCellPosition = () => {
const currentRowNumber = useContext(RowIndexContext);
const currentColumnNumber = useContext(ColumnIndexContext);
@ -17,4 +17,4 @@ export function useCurrentCellPosition() {
);
return currentCellPosition;
}
};

12
front/src/modules/ui/table/editable-cell/hooks/useEditableCell.ts
View File

@ -14,7 +14,7 @@ const DEFAULT_CELL_SCOPE: HotkeyScope = {
scope: TableHotkeyScope.CellEditMode,
};
export function useEditableCell() {
export const useEditableCell = () => {
const { setCurrentCellInEditMode } = useCurrentCellEditMode();
const setHotkeyScope = useSetHotkeyScope();
@ -24,13 +24,13 @@ export function useEditableCell() {
const customCellHotkeyScope = useContext(CellHotkeyScopeContext);
function closeEditableCell() {
const closeEditableCell = () => {
setDragSelectionStartEnabled(true);
closeCurrentCellInEditMode();
setHotkeyScope(TableHotkeyScope.TableSoftFocus);
}
};
function openEditableCell() {
const openEditableCell = () => {
setDragSelectionStartEnabled(false);
setCurrentCellInEditMode();
@ -42,10 +42,10 @@ export function useEditableCell() {
} else {
setHotkeyScope(DEFAULT_CELL_SCOPE.scope, DEFAULT_CELL_SCOPE.customScopes);
}
}
};
return {
closeEditableCell,
openEditableCell,
};
}
};

4
front/src/modules/ui/table/editable-cell/hooks/useIsSoftFocusOnCurrentCell.ts
View File

@ -4,7 +4,7 @@ import { isSoftFocusOnCellFamilyState } from '../../states/isSoftFocusOnCellFami
import { useCurrentCellPosition } from './useCurrentCellPosition';
export function useIsSoftFocusOnCurrentCell() {
export const useIsSoftFocusOnCurrentCell = () => {
const currentCellPosition = useCurrentCellPosition();
const isSoftFocusOnCell = useRecoilValue(
@ -12,4 +12,4 @@ export function useIsSoftFocusOnCurrentCell() {
);
return isSoftFocusOnCell;
}
};

6
front/src/modules/ui/table/editable-cell/hooks/useRegisterCloseCellHandlers.ts
View File

@ -7,11 +7,11 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentCellEditMode } from './useCurrentCellEditMode';
import { useEditableCell } from './useEditableCell';
export function useRegisterCloseCellHandlers(
export const useRegisterCloseCellHandlers = (
wrapperRef: React.RefObject<HTMLDivElement>,
onSubmit?: () => void,
onCancel?: () => void,
) {
) => {
const { closeEditableCell } = useEditableCell();
const { isCurrentCellInEditMode } = useCurrentCellEditMode();
@ -72,4 +72,4 @@ export function useRegisterCloseCellHandlers(
TableHotkeyScope.CellEditMode,
[closeEditableCell, onSubmit, moveRight],
);
}
};

4
front/src/modules/ui/table/editable-cell/hooks/useSetSoftFocusOnCurrentCell.ts
View File

@ -8,7 +8,7 @@ import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentCellPosition } from './useCurrentCellPosition';
export function useSetSoftFocusOnCurrentCell() {
export const useSetSoftFocusOnCurrentCell = () => {
const setSoftFocusPosition = useSetSoftFocusPosition();
const currentCellPosition = useCurrentCellPosition();
@ -26,4 +26,4 @@ export function useSetSoftFocusOnCurrentCell() {
},
[setHotkeyScope, currentCellPosition, setSoftFocusPosition],
);
}
};

25
front/src/modules/ui/table/editable-cell/type/components/DoubleTextCellEdit.tsx
View File

@ -35,14 +35,14 @@ const StyledContainer = styled.div`
}
`;
export function DoubleTextCellEdit({
export const DoubleTextCellEdit = ({
firstValue,
secondValue,
firstValuePlaceholder,
secondValuePlaceholder,
onSubmit,
onCancel,
}: OwnProps) {
}: OwnProps) => {
const [firstInternalValue, setFirstInternalValue] = useState(firstValue);
const [secondInternalValue, setSecondInternalValue] = useState(secondValue);
@ -51,10 +51,13 @@ export function DoubleTextCellEdit({
setSecondInternalValue(secondValue);
}, [firstValue, secondValue]);
function handleOnChange(newFirstValue: string, newSecondValue: string): void {
const handleOnChange = (
newFirstValue: string,
newSecondValue: string,
): void => {
setFirstInternalValue(newFirstValue);
setSecondInternalValue(newSecondValue);
}
};
const [focusPosition, setFocusPosition] = useState<'left' | 'right'>('left');
@ -64,21 +67,21 @@ export function DoubleTextCellEdit({
const { closeEditableCell } = useEditableCell();
const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
function closeCell() {
const closeCell = () => {
setFocusPosition('left');
closeEditableCell();
}
};
function handleCancel() {
const handleCancel = () => {
setFirstInternalValue(firstValue);
setSecondInternalValue(secondValue);
onCancel?.();
}
};
function handleSubmit() {
const handleSubmit = () => {
onSubmit?.(firstInternalValue, secondInternalValue);
}
};
useScopedHotkeys(
Key.Enter,
@ -161,4 +164,4 @@ export function DoubleTextCellEdit({
/>
</StyledContainer>
);
}
};

8
front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx
View File

@ -26,7 +26,7 @@ const StyledCellBaseContainer = styled.div`
width: 100%;
`;
export function GenericEditableBooleanCell({ columnDefinition }: OwnProps) {
export const GenericEditableBooleanCell = ({ columnDefinition }: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const [fieldValue, setFieldValue] = useRecoilState<boolean>(
@ -38,7 +38,7 @@ export function GenericEditableBooleanCell({ columnDefinition }: OwnProps) {
const updateField = useUpdateEntityField();
function handleClick() {
const handleClick = () => {
const newValue = !fieldValue;
try {
@ -52,7 +52,7 @@ export function GenericEditableBooleanCell({ columnDefinition }: OwnProps) {
`In GenericEditableBooleanCellEditMode, Invalid value: ${newValue}, ${error}`,
);
}
}
};
return (
<StyledCellBaseContainer>
@ -61,4 +61,4 @@ export function GenericEditableBooleanCell({ columnDefinition }: OwnProps) {
</EditableCellDisplayContainer>
</StyledCellBaseContainer>
);
}
};

28
front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCell.tsx
View File

@ -12,21 +12,17 @@ type OwnProps = {
placeholder?: string;
};
export function GenericEditableChipCell({
export const GenericEditableChipCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
return (
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<GenericEditableChipCellEditMode columnDefinition={columnDefinition} />
}
nonEditModeContent={
<GenericEditableChipCellDisplayMode
columnDefinition={columnDefinition}
/>
}
></EditableCell>
);
}
}: OwnProps) => (
<EditableCell
editModeHorizontalAlign={editModeHorizontalAlign}
editModeContent={
<GenericEditableChipCellEditMode columnDefinition={columnDefinition} />
}
nonEditModeContent={
<GenericEditableChipCellDisplayMode columnDefinition={columnDefinition} />
}
></EditableCell>
);

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellDisplayMode.tsx
View File

@ -13,9 +13,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldChipMetadata>;
};
export function GenericEditableChipCellDisplayMode({
export const GenericEditableChipCellDisplayMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const content = useRecoilValue<any | null>(
@ -48,4 +48,4 @@ export function GenericEditableChipCellDisplayMode({
);
return <> </>;
}
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableChipCellEditMode.tsx
View File

@ -14,9 +14,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldChipMetadata>;
};
export function GenericEditableChipCellEditMode({
export const GenericEditableChipCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -29,7 +29,7 @@ export function GenericEditableChipCellEditMode({
const updateField = useUpdateEntityField();
function handleSubmit(newText: string) {
const handleSubmit = (newText: string) => {
if (newText === fieldValue) return;
setFieldValue(newText);
@ -37,7 +37,7 @@ export function GenericEditableChipCellEditMode({
if (currentRowEntityId && updateField) {
updateField(currentRowEntityId, columnDefinition, newText);
}
}
};
const {
handleEnter,
@ -62,4 +62,4 @@ export function GenericEditableChipCellEditMode({
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCell.tsx
View File

@ -15,10 +15,10 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
export function GenericEditableDateCell({
export const GenericEditableDateCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const fieldValue = useRecoilValue<string>(
@ -37,4 +37,4 @@ export function GenericEditableDateCell({
nonEditModeContent={<DateDisplay value={fieldValue} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDateCellEditMode.tsx
View File

@ -16,9 +16,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldDateMetadata>;
};
export function GenericEditableDateCellEditMode({
export const GenericEditableDateCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -32,7 +32,7 @@ export function GenericEditableDateCellEditMode({
const updateField = useUpdateEntityField();
// Wrap this into a hook
function handleSubmit(newDate: Nullable<Date>) {
const handleSubmit = (newDate: Nullable<Date>) => {
const fieldValueDate = fieldValue
? DateTime.fromISO(fieldValue).toJSDate()
: null;
@ -46,7 +46,7 @@ export function GenericEditableDateCellEditMode({
if (currentRowEntityId && updateField && newDateISO) {
updateField(currentRowEntityId, columnDefinition, newDateISO);
}
}
};
const { handleEnter, handleEscape, handleClickOutside } =
useCellInputEventHandlers({
@ -62,4 +62,4 @@ export function GenericEditableDateCellEditMode({
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCell.tsx
View File

@ -14,7 +14,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldDoubleTextMetadata>;
};
export function GenericEditableDoubleTextCell({ columnDefinition }: OwnProps) {
export const GenericEditableDoubleTextCell = ({
columnDefinition,
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const firstValue = useRecoilValue<string>(
@ -43,4 +45,4 @@ export function GenericEditableDoubleTextCell({ columnDefinition }: OwnProps) {
nonEditModeContent={<TextDisplay text={displayName} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextCellEditMode.tsx
View File

@ -13,9 +13,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldDoubleTextMetadata>;
};
export function GenericEditableDoubleTextCellEditMode({
export const GenericEditableDoubleTextCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -35,7 +35,7 @@ export function GenericEditableDoubleTextCellEditMode({
const updateField = useUpdateEntityField();
function handleSubmit(newFirstValue: string, newSecondValue: string) {
const handleSubmit = (newFirstValue: string, newSecondValue: string) => {
if (newFirstValue === firstValue && newSecondValue === secondValue) return;
setFirstValue(newFirstValue);
@ -47,7 +47,7 @@ export function GenericEditableDoubleTextCellEditMode({
secondValue: newSecondValue,
});
}
}
};
return (
<DoubleTextCellEdit
@ -58,4 +58,4 @@ export function GenericEditableDoubleTextCellEditMode({
onSubmit={handleSubmit}
/>
);
}
};

34
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCell.tsx
View File

@ -11,22 +11,20 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldDoubleTextChipMetadata>;
};
export function GenericEditableDoubleTextChipCell({
export const GenericEditableDoubleTextChipCell = ({
columnDefinition,
}: OwnProps) {
return (
<EditableCell
editHotkeyScope={{ scope: TableHotkeyScope.CellDoubleTextInput }}
editModeContent={
<GenericEditableDoubleTextChipCellEditMode
columnDefinition={columnDefinition}
/>
}
nonEditModeContent={
<GenericEditableDoubleTextChipCellDisplayMode
columnDefinition={columnDefinition}
/>
}
></EditableCell>
);
}
}: OwnProps) => (
<EditableCell
editHotkeyScope={{ scope: TableHotkeyScope.CellDoubleTextInput }}
editModeContent={
<GenericEditableDoubleTextChipCellEditMode
columnDefinition={columnDefinition}
/>
}
nonEditModeContent={
<GenericEditableDoubleTextChipCellDisplayMode
columnDefinition={columnDefinition}
/>
}
></EditableCell>
);

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellDisplayMode.tsx
View File

@ -13,9 +13,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldDoubleTextChipMetadata>;
};
export function GenericEditableDoubleTextChipCellDisplayMode({
export const GenericEditableDoubleTextChipCellDisplayMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const [firstValue] = useRecoilState<string>(
@ -60,4 +60,4 @@ export function GenericEditableDoubleTextChipCellDisplayMode({
);
return <> </>;
}
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableDoubleTextChipCellEditMode.tsx
View File

@ -13,9 +13,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldDoubleTextChipMetadata>;
};
export function GenericEditableDoubleTextChipCellEditMode({
export const GenericEditableDoubleTextChipCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -35,7 +35,7 @@ export function GenericEditableDoubleTextChipCellEditMode({
const updateField = useUpdateEntityField();
function handleSubmit(newFirstValue: string, newSecondValue: string) {
const handleSubmit = (newFirstValue: string, newSecondValue: string) => {
const firstValueChanged = newFirstValue !== firstValue;
const secondValueChanged = newSecondValue !== secondValue;
@ -57,7 +57,7 @@ export function GenericEditableDoubleTextChipCellEditMode({
secondValue: secondValueChanged ? newSecondValue : secondValue,
});
}
}
};
return (
<DoubleTextCellEdit
@ -68,4 +68,4 @@ export function GenericEditableDoubleTextChipCellEditMode({
onSubmit={handleSubmit}
/>
);
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCell.tsx
View File

@ -15,10 +15,10 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
export function GenericEditableEmailCell({
export const GenericEditableEmailCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const fieldValue = useRecoilValue<string>(
@ -37,4 +37,4 @@ export function GenericEditableEmailCell({
nonEditModeContent={<EmailDisplay value={fieldValue} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableEmailCellEditMode.tsx
View File

@ -14,9 +14,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldEmailMetadata>;
};
export function GenericEditableEmailCellEditMode({
export const GenericEditableEmailCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -29,7 +29,7 @@ export function GenericEditableEmailCellEditMode({
const updateField = useUpdateEntityField();
function handleSubmit(newEmail: string) {
const handleSubmit = (newEmail: string) => {
if (newEmail === fieldValue) return;
setFieldValue(newEmail);
@ -37,7 +37,7 @@ export function GenericEditableEmailCellEditMode({
if (currentRowEntityId && updateField) {
updateField(currentRowEntityId, columnDefinition, newEmail);
}
}
};
const {
handleEnter,
@ -62,4 +62,4 @@ export function GenericEditableEmailCellEditMode({
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCell.tsx
View File

@ -15,10 +15,10 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
export function GenericEditableMoneyCell({
export const GenericEditableMoneyCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const fieldValue = useRecoilValue<number>(
@ -37,4 +37,4 @@ export function GenericEditableMoneyCell({
nonEditModeContent={<MoneyDisplay value={fieldValue} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableMoneyCellEditMode.tsx
View File

@ -14,9 +14,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldMoneyMetadata>;
};
export function GenericEditableMoneyCellEditMode({
export const GenericEditableMoneyCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const [fieldValue, setFieldValue] = useRecoilState<string>(
@ -29,7 +29,7 @@ export function GenericEditableMoneyCellEditMode({
const updateField = useUpdateEntityField();
// TODO: handle this logic in a number input
function handleSubmit(newText: string) {
const handleSubmit = (newText: string) => {
if (newText === fieldValue) return;
try {
@ -53,7 +53,7 @@ export function GenericEditableMoneyCellEditMode({
`In GenericEditableMoneyCellEditMode, Invalid number: ${newText}, ${error}`,
);
}
}
};
const {
handleEnter,
@ -78,4 +78,4 @@ export function GenericEditableMoneyCellEditMode({
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCell.tsx
View File

@ -15,10 +15,10 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
export function GenericEditableNumberCell({
export const GenericEditableNumberCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const fieldValue = useRecoilValue<string>(
@ -39,4 +39,4 @@ export function GenericEditableNumberCell({
nonEditModeContent={<NumberDisplay value={fieldValue} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableNumberCellEditMode.tsx
View File

@ -18,9 +18,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldNumberMetadata>;
};
export function GenericEditableNumberCellEditMode({
export const GenericEditableNumberCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -33,7 +33,7 @@ export function GenericEditableNumberCellEditMode({
const updateField = useUpdateEntityField();
function handleSubmit(newText: string) {
const handleSubmit = (newText: string) => {
if (newText === fieldValue) return;
try {
@ -73,7 +73,7 @@ export function GenericEditableNumberCellEditMode({
`In GenericEditableNumberCellEditMode, Invalid number: ${newText}, ${error}`,
);
}
}
};
const {
handleEnter,
@ -97,4 +97,4 @@ export function GenericEditableNumberCellEditMode({
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCell.tsx
View File

@ -15,10 +15,10 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
export function GenericEditablePhoneCell({
export const GenericEditablePhoneCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const fieldValue = useRecoilValue<string>(
@ -38,4 +38,4 @@ export function GenericEditablePhoneCell({
nonEditModeContent={<PhoneDisplay value={fieldValue} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditablePhoneCellEditMode.tsx
View File

@ -15,9 +15,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldPhoneMetadata>;
};
export function GenericEditablePhoneCellEditMode({
export const GenericEditablePhoneCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -30,7 +30,7 @@ export function GenericEditablePhoneCellEditMode({
const updateField = useUpdateEntityField();
function handleSubmit(newValue: string) {
const handleSubmit = (newValue: string) => {
if (!isPossiblePhoneNumber(newValue)) return;
if (newValue === fieldValue) return;
@ -40,7 +40,7 @@ export function GenericEditablePhoneCellEditMode({
if (currentRowEntityId && updateField) {
updateField(currentRowEntityId, columnDefinition, newValue);
}
}
};
const {
handleEnter,
@ -65,4 +65,4 @@ export function GenericEditablePhoneCellEditMode({
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};

42
front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCell.tsx
View File

@ -13,28 +13,26 @@ type OwnProps = {
placeholder?: string;
};
export function GenericEditableRelationCell({
export const GenericEditableRelationCell = ({
columnDefinition,
editModeHorizontalAlign,
placeholder,
}: OwnProps) {
return (
<EditableCell
maxContentWidth={160}
editModeHorizontalAlign={editModeHorizontalAlign}
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={
<GenericEditableRelationCellEditMode
columnDefinition={columnDefinition}
/>
}
nonEditModeContent={
<GenericEditableRelationCellDisplayMode
columnDefinition={columnDefinition}
editModeHorizontalAlign={editModeHorizontalAlign}
placeholder={placeholder}
/>
}
></EditableCell>
);
}
}: OwnProps) => (
<EditableCell
maxContentWidth={160}
editModeHorizontalAlign={editModeHorizontalAlign}
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={
<GenericEditableRelationCellEditMode
columnDefinition={columnDefinition}
/>
}
nonEditModeContent={
<GenericEditableRelationCellDisplayMode
columnDefinition={columnDefinition}
editModeHorizontalAlign={editModeHorizontalAlign}
placeholder={placeholder}
/>
}
></EditableCell>
);

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellDisplayMode.tsx
View File

@ -16,9 +16,9 @@ type OwnProps = {
placeholder?: string;
};
export function GenericEditableRelationCellDisplayMode({
export const GenericEditableRelationCellDisplayMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: type value with generic getter
@ -54,4 +54,4 @@ export function GenericEditableRelationCellDisplayMode({
);
return <> </>;
}
}
};

30
front/src/modules/ui/table/editable-cell/type/components/GenericEditableRelationCellEditMode.tsx
View File

@ -19,9 +19,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldRelationMetadata>;
};
export function GenericEditableRelationCellEditMode({
export const GenericEditableRelationCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const { closeEditableCell } = useEditableCell();
@ -34,28 +34,28 @@ export function GenericEditableRelationCellEditMode({
);
const updateEntityField = useUpdateEntityField();
function updateCachedPersonField(newFieldEntity: EntityForSelect | null) {
const updateCachedPersonField = (newFieldEntity: EntityForSelect | null) => {
setFieldValueEntity({
avatarUrl: newFieldEntity?.avatarUrl ?? '',
entityType: Entity.Company,
id: newFieldEntity?.id ?? '',
displayName: newFieldEntity?.name ?? '',
});
}
};
function updateCachedCompanyField(
const updateCachedCompanyField = (
newFieldEntity: CompanyPickerSelectedCompany | null,
) {
) => {
setFieldValueEntity({
id: newFieldEntity?.id ?? '',
name: newFieldEntity?.name ?? '',
domainName: newFieldEntity?.domainName ?? '',
});
}
};
function handleCompanySubmit(
const handleCompanySubmit = (
newFieldEntity: CompanyPickerSelectedCompany | null,
) {
) => {
if (
newFieldEntity?.id !== fieldValueEntity?.id &&
currentRowEntityId &&
@ -70,9 +70,9 @@ export function GenericEditableRelationCellEditMode({
}
closeEditableCell();
}
};
function handlePersonSubmit(newFieldEntity: EntityForSelect | null) {
const handlePersonSubmit = (newFieldEntity: EntityForSelect | null) => {
if (
newFieldEntity?.id !== fieldValueEntity?.id &&
currentRowEntityId &&
@ -83,11 +83,11 @@ export function GenericEditableRelationCellEditMode({
}
closeEditableCell();
}
};
function handleCancel() {
const handleCancel = () => {
closeEditableCell();
}
};
switch (columnDefinition.metadata.relationType) {
case Entity.Company: {
@ -117,4 +117,4 @@ export function GenericEditableRelationCellEditMode({
);
return <></>;
}
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCell.tsx
View File

@ -15,10 +15,10 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
export function GenericEditableTextCell({
export const GenericEditableTextCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const fieldValue = useRecoilValue<string>(
@ -37,4 +37,4 @@ export function GenericEditableTextCell({
nonEditModeContent={<TextDisplay text={fieldValue} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableTextCellEditMode.tsx
View File

@ -14,9 +14,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldTextMetadata>;
};
export function GenericEditableTextCellEditMode({
export const GenericEditableTextCellEditMode = ({
columnDefinition,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -29,7 +29,7 @@ export function GenericEditableTextCellEditMode({
const updateField = useUpdateEntityField();
function handleSubmit(newText: string) {
const handleSubmit = (newText: string) => {
if (newText === fieldValue) return;
setFieldValue(newText);
@ -37,7 +37,7 @@ export function GenericEditableTextCellEditMode({
if (currentRowEntityId && updateField) {
updateField(currentRowEntityId, columnDefinition, newText);
}
}
};
const {
handleEnter,
@ -62,4 +62,4 @@ export function GenericEditableTextCellEditMode({
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};

6
front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCell.tsx
View File

@ -16,10 +16,10 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
};
export function GenericEditableURLCell({
export const GenericEditableURLCell = ({
columnDefinition,
editModeHorizontalAlign,
}: OwnProps) {
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
const fieldValue = useRecoilValue<string>(
@ -39,4 +39,4 @@ export function GenericEditableURLCell({
nonEditModeContent={<URLDisplay value={sanitizeURL(fieldValue)} />}
></EditableCell>
);
}
};

10
front/src/modules/ui/table/editable-cell/type/components/GenericEditableURLCellEditMode.tsx
View File

@ -15,7 +15,9 @@ type OwnProps = {
columnDefinition: ColumnDefinition<ViewFieldURLMetadata>;
};
export function GenericEditableURLCellEditMode({ columnDefinition }: OwnProps) {
export const GenericEditableURLCellEditMode = ({
columnDefinition,
}: OwnProps) => {
const currentRowEntityId = useCurrentRowEntityId();
// TODO: we could use a hook that would return the field value with the right type
@ -28,7 +30,7 @@ export function GenericEditableURLCellEditMode({ columnDefinition }: OwnProps) {
const updateField = useUpdateEntityField();
function handleSubmit(newText: string) {
const handleSubmit = (newText: string) => {
if (newText === fieldValue) return;
if (newText !== '' && !isURL(newText)) return;
@ -38,7 +40,7 @@ export function GenericEditableURLCellEditMode({ columnDefinition }: OwnProps) {
if (currentRowEntityId && updateField) {
updateField(currentRowEntityId, columnDefinition, newText);
}
}
};
const {
handleEnter,
@ -63,4 +65,4 @@ export function GenericEditableURLCellEditMode({ columnDefinition }: OwnProps) {
hotkeyScope={TableHotkeyScope.CellEditMode}
/>
);
}
};