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 <></>;
}
}
};