admin/twenty
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

4
front/src/modules/ui/action-bar/components/ActionBar.tsx
View File

@ -33,7 +33,7 @@ const StyledContainerActionBar = styled.div`
z-index: 1;
`;
export function ActionBar({ selectedIds }: OwnProps) {
export const ActionBar = ({ selectedIds }: OwnProps) => {
const actionBarOpen = useRecoilValue(actionBarOpenState);
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
const actionBarEntries = useRecoilValue(actionBarEntriesState);
@ -55,4 +55,4 @@ export function ActionBar({ selectedIds }: OwnProps) {
))}
</StyledContainerActionBar>
);
}
};

6
front/src/modules/ui/action-bar/components/ActionBarItem.tsx
View File

@ -39,12 +39,12 @@ const StyledButtonLabel = styled.div`
margin-left: ${({ theme }) => theme.spacing(2)};
`;
export function ActionBarItem({
export const ActionBarItem = ({
label,
Icon,
accent = 'standard',
onClick,
}: OwnProps) {
}: OwnProps) => {
const theme = useTheme();
return (
<StyledButton accent={accent} onClick={onClick}>
@ -52,4 +52,4 @@ export function ActionBarItem({
<StyledButtonLabel>{label}</StyledButtonLabel>
</StyledButton>
);
}
};

4
front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx
View File

@ -11,13 +11,13 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { actionBarOpenState } from '../../states/actionBarIsOpenState';
import { ActionBar } from '../ActionBar';
function FilledActionBar(props: { selectedIds: string[] }) {
const FilledActionBar = (props: { selectedIds: string[] }) => {
const { setActionBarEntries } = useCompanyTableActionBarEntries();
setActionBarEntries();
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
setActionBarOpenState(true);
return <ActionBar selectedIds={props.selectedIds} />;
}
};
const meta: Meta<typeof ActionBar> = {
title: 'UI/ActionBar/ActionBar',

14
front/src/modules/ui/board/components/BoardColumn.tsx
View File

@ -64,7 +64,7 @@ export type BoardColumnProps = {
stageId: string;
};
export function BoardColumn({
export const BoardColumn = ({
color,
title,
onDelete,
@ -74,7 +74,7 @@ export function BoardColumn({
isFirstColumn,
numChildren,
stageId,
}: BoardColumnProps) {
}: BoardColumnProps) => {
const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
React.useState(false);
@ -83,17 +83,17 @@ export function BoardColumn({
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
function handleTitleClick() {
const handleTitleClick = () => {
setIsBoardColumnMenuOpen(true);
setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
goto: false,
});
}
};
function handleClose() {
const handleClose = () => {
goBackToPreviousHotkeyScope();
setIsBoardColumnMenuOpen(false);
}
};
return (
<StyledColumn isFirstColumn={isFirstColumn}>
@ -115,4 +115,4 @@ export function BoardColumn({
{children}
</StyledColumn>
);
}
};

6
front/src/modules/ui/board/components/BoardColumnEditTitleMenu.tsx
View File

@ -54,12 +54,12 @@ export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
{ name: 'Gray', id: 'gray' },
];
export function BoardColumnEditTitleMenu({
export const BoardColumnEditTitleMenu = ({
onClose,
onTitleEdit,
title,
color,
}: BoardColumnEditTitleMenuProps) {
}: BoardColumnEditTitleMenuProps) => {
const [internalValue, setInternalValue] = useState(title);
const debouncedOnUpdateTitle = debounce(
(newTitle) => onTitleEdit(newTitle, color),
@ -94,4 +94,4 @@ export function BoardColumnEditTitleMenu({
))}
</StyledDropdownMenuItemsContainer>
);
}
};

16
front/src/modules/ui/board/components/BoardColumnMenu.tsx
View File

@ -42,14 +42,14 @@ type OwnProps = {
type Menu = 'actions' | 'add' | 'title';
export function BoardColumnMenu({
export const BoardColumnMenu = ({
color,
onClose,
onDelete,
onTitleEdit,
stageId,
title,
}: OwnProps) {
}: OwnProps) => {
const [currentMenu, setCurrentMenu] = useState('actions');
const [, setBoardColumns] = useRecoilState(boardColumnsState);
@ -59,9 +59,9 @@ export function BoardColumnMenu({
const { enqueueSnackBar } = useSnackBar();
const createCompanyProgress = useCreateCompanyProgress();
function handleCompanySelected(
const handleCompanySelected = (
selectedCompany: EntityForSelect | null | undefined,
) {
) => {
if (!selectedCompany?.id) {
enqueueSnackBar(
'There was a problem with the company selection, please retry.',
@ -78,7 +78,7 @@ export function BoardColumnMenu({
createCompanyProgress(selectedCompany.id, stageId);
closeMenu();
}
};
const {
setHotkeyScopeAndMemorizePreviousScope,
@ -98,14 +98,14 @@ export function BoardColumnMenu({
closeMenu();
}, [closeMenu, onDelete, setBoardColumns, stageId]);
function setMenu(menu: Menu) {
const setMenu = (menu: Menu) => {
if (menu === 'add') {
setHotkeyScopeAndMemorizePreviousScope(
RelationPickerHotkeyScope.RelationPicker,
);
}
setCurrentMenu(menu);
}
};
const [relationPickerSearchFilter] = useRecoilScopedState(
relationPickerSearchFilterScopedState,
);
@ -168,4 +168,4 @@ export function BoardColumnMenu({
</StyledDropdownMenu>
</StyledMenuContainer>
);
}
};

4
front/src/modules/ui/board/components/BoardHeader.tsx
View File

@ -25,7 +25,7 @@ export type BoardHeaderProps = {
onStageAdd?: (boardColumn: BoardColumnDefinition) => void;
};
export function BoardHeader({ className, onStageAdd }: BoardHeaderProps) {
export const BoardHeader = ({ className, onStageAdd }: BoardHeaderProps) => {
const { onCurrentViewSubmit, ...viewBarContextProps } =
useContext(ViewBarContext);
@ -103,4 +103,4 @@ export function BoardHeader({ className, onStageAdd }: BoardHeaderProps) {
</ViewBarContext.Provider>
</RecoilScope>
);
}
};

6
front/src/modules/ui/board/components/BoardOptionsDropdown.tsx
View File

@ -13,10 +13,10 @@ type BoardOptionsDropdownProps = Pick<
'customHotkeyScope' | 'onStageAdd'
>;
export function BoardOptionsDropdown({
export const BoardOptionsDropdown = ({
customHotkeyScope,
onStageAdd,
}: BoardOptionsDropdownProps) {
}: BoardOptionsDropdownProps) => {
return (
<DropdownButton
buttonComponents={<BoardOptionsDropdownButton />}
@ -30,4 +30,4 @@ export function BoardOptionsDropdown({
dropdownId={BoardOptionsDropdownKey}
/>
);
}
};

8
front/src/modules/ui/board/components/BoardOptionsDropdownButton.tsx
View File

@ -3,14 +3,14 @@ import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
import { BoardOptionsDropdownKey } from '../types/BoardOptionsDropdownKey';
export function BoardOptionsDropdownButton() {
export const BoardOptionsDropdownButton = () => {
const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton({
dropdownId: BoardOptionsDropdownKey,
});
function handleClick() {
const handleClick = () => {
toggleDropdownButton();
}
};
return (
<StyledHeaderDropdownButton
@ -20,4 +20,4 @@ export function BoardOptionsDropdownButton() {
Options
</StyledHeaderDropdownButton>
);
}
};

6
front/src/modules/ui/board/components/BoardOptionsDropdownContent.tsx
View File

@ -58,10 +58,10 @@ type ColumnForCreate = {
title: string;
};
export function BoardOptionsDropdownContent({
export const BoardOptionsDropdownContent = ({
customHotkeyScope,
onStageAdd,
}: BoardOptionsDropdownContentProps) {
}: BoardOptionsDropdownContentProps) => {
const theme = useTheme();
const BoardRecoilScopeContext =
@ -250,4 +250,4 @@ export function BoardOptionsDropdownContent({
)}
</StyledDropdownMenu>
);
}
};

6
front/src/modules/ui/board/components/EntityBoard.tsx
View File

@ -48,12 +48,12 @@ const StyledBoardHeader = styled(BoardHeader)`
z-index: 1;
` as typeof BoardHeader;
export function EntityBoard({
export const EntityBoard = ({
boardOptions,
onColumnAdd,
onColumnDelete,
onEditColumnTitle,
}: EntityBoardProps) {
}: EntityBoardProps) => {
const [boardColumns] = useRecoilState(boardColumnsState);
const setCardSelected = useSetCardSelected();
@ -158,4 +158,4 @@ export function EntityBoard({
) : (
<></>
);
}
};

4
front/src/modules/ui/board/components/EntityBoardActionBar.tsx
View File

@ -5,7 +5,7 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar';
import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
export function EntityBoardActionBar() {
export const EntityBoardActionBar = () => {
const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
return <ActionBar selectedIds={selectedCardIds}></ActionBar>;
}
};

10
front/src/modules/ui/board/components/EntityBoardCard.tsx
View File

@ -7,7 +7,7 @@ import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPo
import { useCurrentCardSelected } from '../hooks/useCurrentCardSelected';
import { BoardOptions } from '../types/BoardOptions';
export function EntityBoardCard({
export const EntityBoardCard = ({
boardOptions,
cardId,
index,
@ -15,13 +15,13 @@ export function EntityBoardCard({
boardOptions: BoardOptions;
cardId: string;
index: number;
}) {
}) => {
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const { setCurrentCardSelected } = useCurrentCardSelected();
function handleContextMenu(event: React.MouseEvent) {
const handleContextMenu = (event: React.MouseEvent) => {
event.preventDefault();
setCurrentCardSelected(true);
setContextMenuPosition({
@ -29,7 +29,7 @@ export function EntityBoardCard({
y: event.clientY,
});
setContextMenuOpenState(true);
}
};
return (
<Draggable key={cardId} draggableId={cardId} index={index}>
@ -48,4 +48,4 @@ export function EntityBoardCard({
)}
</Draggable>
);
}
};

10
front/src/modules/ui/board/components/EntityBoardColumn.tsx
View File

@ -47,7 +47,7 @@ const BoardColumnCardsContainer = ({
);
};
export function EntityBoardColumn({
export const EntityBoardColumn = ({
boardOptions,
column,
onDelete,
@ -57,7 +57,7 @@ export function EntityBoardColumn({
column: BoardColumnDefinition;
onDelete?: (columnId: string) => void;
onTitleEdit: (columnId: string, title: string, color: string) => void;
}) {
}) => {
const boardColumnId = useContext(BoardColumnIdContext) ?? '';
const boardColumnTotal = useRecoilValue(
@ -68,9 +68,9 @@ export function EntityBoardColumn({
boardCardIdsByColumnIdFamilyState(boardColumnId ?? ''),
);
function handleTitleEdit(title: string, color: string) {
const handleTitleEdit = (title: string, color: string) => {
onTitleEdit(boardColumnId, title, color);
}
};
return (
<Droppable droppableId={column.id}>
@ -116,4 +116,4 @@ export function EntityBoardColumn({
)}
</Droppable>
);
}
};

4
front/src/modules/ui/board/components/EntityBoardContextMenu.tsx
View File

@ -5,7 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu';
import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSelector';
export function EntityBoardContextMenu() {
export const EntityBoardContextMenu = () => {
const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
return <ContextMenu selectedIds={selectedCardIds}></ContextMenu>;
}
};

4
front/src/modules/ui/board/components/NewButton.tsx
View File

@ -24,7 +24,7 @@ type OwnProps = {
onClick: () => void;
};
export function NewButton({ onClick }: OwnProps) {
export const NewButton = ({ onClick }: OwnProps) => {
const theme = useTheme();
return (
@ -33,4 +33,4 @@ export function NewButton({ onClick }: OwnProps) {
New
</StyledButton>
);
}
};

4
front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx
View File

@ -5,7 +5,7 @@ import { IconTrash } from '@/ui/icon';
import { useDeleteSelectedBoardCards } from './useDeleteSelectedBoardCards';
export function useBoardActionBarEntries() {
export const useBoardActionBarEntries = () => {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
@ -21,4 +21,4 @@ export function useBoardActionBarEntries() {
},
]),
};
}
};

4
front/src/modules/ui/board/hooks/useBoardContextMenuEntries.tsx
View File

@ -5,7 +5,7 @@ import { IconTrash } from '@/ui/icon';
import { useDeleteSelectedBoardCards } from './useDeleteSelectedBoardCards';
export function useBoardContextMenuEntries() {
export const useBoardContextMenuEntries = () => {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const deleteSelectedBoardCards = useDeleteSelectedBoardCards();
@ -21,4 +21,4 @@ export function useBoardContextMenuEntries() {
},
]),
};
}
};

4
front/src/modules/ui/board/hooks/useCurrentCardSelected.ts
View File

@ -7,7 +7,7 @@ import { BoardCardIdContext } from '../contexts/BoardCardIdContext';
import { activeCardIdsState } from '../states/activeCardIdsState';
import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
export function useCurrentCardSelected() {
export const useCurrentCardSelected = () => {
const currentCardId = useContext(BoardCardIdContext);
const isCardSelected = useRecoilValue(
@ -58,4 +58,4 @@ export function useCurrentCardSelected() {
setCurrentCardSelected,
unselectAllActiveCards,
};
}
};

8
front/src/modules/ui/board/hooks/useDeleteSelectedBoardCards.ts
View File

@ -8,7 +8,7 @@ import { selectedCardIdsSelector } from '../states/selectors/selectedCardIdsSele
import { useRemoveCardIds } from './useRemoveCardIds';
export function useDeleteSelectedBoardCards() {
export const useDeleteSelectedBoardCards = () => {
const selectedCardIds = useRecoilValue(selectedCardIdsSelector);
const removeCardIds = useRemoveCardIds();
@ -16,7 +16,7 @@ export function useDeleteSelectedBoardCards() {
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
async function deleteSelectedBoardCards() {
const deleteSelectedBoardCards = async () => {
await deletePipelineProgress({
variables: {
ids: selectedCardIds,
@ -34,7 +34,7 @@ export function useDeleteSelectedBoardCards() {
});
},
});
}
};
return deleteSelectedBoardCards;
}
};

5
front/src/modules/ui/board/hooks/useRemoveCardIds.ts
View File

@ -4,8 +4,8 @@ import { useRecoilCallback } from 'recoil';
import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColumnIdFamilyState';
import { boardColumnsState } from '../states/boardColumnsState';
export function useRemoveCardIds() {
return useRecoilCallback(
export const useRemoveCardIds = () =>
useRecoilCallback(
({ snapshot, set }) =>
(cardIdToRemove: string[]) => {
const boardColumns = snapshot
@ -24,4 +24,3 @@ export function useRemoveCardIds() {
},
[],
);
}

4
front/src/modules/ui/board/hooks/useSetCardSelected.ts
View File

@ -5,7 +5,7 @@ import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState'
import { activeCardIdsState } from '../states/activeCardIdsState';
import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';
export function useSetCardSelected() {
export const useSetCardSelected = () => {
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
return useRecoilCallback(
@ -26,4 +26,4 @@ export function useSetCardSelected() {
}
},
);
}
};

5
front/src/modules/ui/board/hooks/useUpdateBoardCardIds.ts
View File

@ -5,8 +5,8 @@ import { boardCardIdsByColumnIdFamilyState } from '../states/boardCardIdsByColum
import { boardColumnsState } from '../states/boardColumnsState';
import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
export function useUpdateBoardCardIds() {
return useRecoilCallback(
export const useUpdateBoardCardIds = () =>
useRecoilCallback(
({ snapshot, set }) =>
(result: DropResult) => {
const currentBoardColumns = snapshot
@ -83,4 +83,3 @@ export function useUpdateBoardCardIds() {
},
[],
);
}

6
front/src/modules/ui/button/components/Button.tsx
View File

@ -277,7 +277,7 @@ const StyledButton = styled.button<
}
`;
export function Button({
export const Button = ({
className,
Icon,
title,
@ -290,7 +290,7 @@ export function Button({
disabled = false,
focus = false,
onClick,
}: ButtonProps) {
}: ButtonProps) => {
const theme = useTheme();
return (
@ -310,4 +310,4 @@ export function Button({
{soon && <SoonPill />}
</StyledButton>
);
}
};

56
front/src/modules/ui/button/components/ButtonGroup.tsx
View File

@ -16,44 +16,42 @@ export type ButtonGroupProps = Pick<
children: ReactNode[];
};
export function ButtonGroup({
export const ButtonGroup = ({
className,
children,
variant,
size,
accent,
}: ButtonGroupProps) {
return (
<StyledButtonGroupContainer className={className}>
{React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) return null;
}: ButtonGroupProps) => (
<StyledButtonGroupContainer className={className}>
{React.Children.map(children, (child, index) => {
if (!React.isValidElement(child)) return null;
let position: ButtonPosition;
let position: ButtonPosition;
if (index === 0) {
position = 'left';
} else if (index === children.length - 1) {
position = 'right';
} else {
position = 'middle';
}
if (index === 0) {
position = 'left';
} else if (index === children.length - 1) {
position = 'right';
} else {
position = 'middle';
}
const additionalProps: any = { position, variant, accent, size };
const additionalProps: any = { position, variant, accent, size };
if (variant) {
additionalProps.variant = variant;
}
if (variant) {
additionalProps.variant = variant;
}
if (accent) {
additionalProps.variant = variant;
}
if (accent) {
additionalProps.variant = variant;
}
if (size) {
additionalProps.size = size;
}
if (size) {
additionalProps.size = size;
}
return React.cloneElement(child, additionalProps);
})}
</StyledButtonGroupContainer>
);
}
return React.cloneElement(child, additionalProps);
})}
</StyledButtonGroupContainer>
);

6
front/src/modules/ui/button/components/FloatingButton.tsx
View File

@ -79,7 +79,7 @@ const StyledButton = styled.button<
}
`;
export function FloatingButton({
export const FloatingButton = ({
className,
Icon,
title,
@ -88,7 +88,7 @@ export function FloatingButton({
applyShadow = true,
disabled = false,
focus = false,
}: FloatingButtonProps) {
}: FloatingButtonProps) => {
const theme = useTheme();
return (
<StyledButton
@ -103,4 +103,4 @@ export function FloatingButton({
{title}
</StyledButton>
);
}
};

52
front/src/modules/ui/button/components/FloatingButtonGroup.tsx
View File

@ -15,36 +15,34 @@ export type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
children: React.ReactElement[];
};
export function FloatingButtonGroup({
export const FloatingButtonGroup = ({
children,
size,
}: FloatingButtonGroupProps) {
return (
<StyledFloatingButtonGroupContainer>
{React.Children.map(children, (child, index) => {
let position: FloatingButtonPosition;
}: FloatingButtonGroupProps) => (
<StyledFloatingButtonGroupContainer>
{React.Children.map(children, (child, index) => {
let position: FloatingButtonPosition;
if (index === 0) {
position = 'left';
} else if (index === children.length - 1) {
position = 'right';
} else {
position = 'middle';
}
if (index === 0) {
position = 'left';
} else if (index === children.length - 1) {
position = 'right';
} else {
position = 'middle';
}
const additionalProps: any = {
position,
size,
applyShadow: false,
applyBlur: false,
};
const additionalProps: any = {
position,
size,
applyShadow: false,
applyBlur: false,
};
if (size) {
additionalProps.size = size;
}
if (size) {
additionalProps.size = size;
}
return React.cloneElement(child, additionalProps);
})}
</StyledFloatingButtonGroupContainer>
);
}
return React.cloneElement(child, additionalProps);
})}
</StyledFloatingButtonGroupContainer>
);

6
front/src/modules/ui/button/components/FloatingIconButton.tsx
View File

@ -99,7 +99,7 @@ const StyledButton = styled.button<
}
`;
export function FloatingIconButton({
export const FloatingIconButton = ({
className,
Icon,
size = 'small',
@ -109,7 +109,7 @@ export function FloatingIconButton({
disabled = false,
focus = false,
onClick,
}: FloatingIconButtonProps) {
}: FloatingIconButtonProps) => {
const theme = useTheme();
return (
<StyledButton
@ -125,4 +125,4 @@ export function FloatingIconButton({
{Icon && <Icon size={theme.icon.size.md} />}
</StyledButton>
);
}
};

50
front/src/modules/ui/button/components/FloatingIconButtonGroup.tsx
View File

@ -29,32 +29,30 @@ export type FloatingIconButtonGroupProps = Pick<
}[];
};
export function FloatingIconButtonGroup({
export const FloatingIconButtonGroup = ({
iconButtons,
size,
}: FloatingIconButtonGroupProps) {
return (
<StyledFloatingIconButtonGroupContainer>
{iconButtons.map(({ Icon, onClick }, index) => {
const position: FloatingIconButtonPosition =
index === 0
? 'left'
: index === iconButtons.length - 1
? 'right'
: 'middle';
}: FloatingIconButtonGroupProps) => (
<StyledFloatingIconButtonGroupContainer>
{iconButtons.map(({ Icon, onClick }, index) => {
const position: FloatingIconButtonPosition =
index === 0
? 'left'
: index === iconButtons.length - 1
? 'right'
: 'middle';
return (
<FloatingIconButton
key={`floating-icon-button-${index}`}
applyBlur={false}
applyShadow={false}
Icon={Icon}
onClick={onClick}
position={position}
size={size}
/>
);
})}
</StyledFloatingIconButtonGroupContainer>
);
}
return (
<FloatingIconButton
key={`floating-icon-button-${index}`}
applyBlur={false}
applyShadow={false}
Icon={Icon}
onClick={onClick}
position={position}
size={size}
/>
);
})}
</StyledFloatingIconButtonGroupContainer>
);

6
front/src/modules/ui/button/components/IconButton.tsx
View File

@ -269,7 +269,7 @@ const StyledButton = styled.button<
}
`;
export function IconButton({
export const IconButton = ({
className,
Icon,
variant = 'primary',
@ -280,7 +280,7 @@ export function IconButton({
focus = false,
dataTestId,
onClick,
}: IconButtonProps) {
}: IconButtonProps) => {
const theme = useTheme();
return (
<StyledButton
@ -297,4 +297,4 @@ export function IconButton({
{Icon && <Icon size={theme.icon.size.md} />}
</StyledButton>
);
}
};

48
front/src/modules/ui/button/components/IconButtonGroup.tsx
View File

@ -24,33 +24,31 @@ export type IconButtonGroupProps = Pick<
}[];
};
export function IconButtonGroup({
export const IconButtonGroup = ({
accent,
iconButtons,
size,
variant,
}: IconButtonGroupProps) {
return (
<StyledIconButtonGroupContainer>
{iconButtons.map(({ Icon, onClick }, index) => {
const position: IconButtonPosition =
index === 0
? 'left'
: index === iconButtons.length - 1
? 'right'
: 'middle';
}: IconButtonGroupProps) => (
<StyledIconButtonGroupContainer>
{iconButtons.map(({ Icon, onClick }, index) => {
const position: IconButtonPosition =
index === 0
? 'left'
: index === iconButtons.length - 1
? 'right'
: 'middle';
return (
<IconButton
accent={accent}
Icon={Icon}
onClick={onClick}
position={position}
size={size}
variant={variant}
/>
);
})}
</StyledIconButtonGroupContainer>
);
}
return (
<IconButton
accent={accent}
Icon={Icon}
onClick={onClick}
position={position}
size={size}
variant={variant}
/>
);
})}
</StyledIconButtonGroupContainer>
);

6
front/src/modules/ui/button/components/LightButton.tsx
View File

@ -74,7 +74,7 @@ const StyledButton = styled.button<
}
`;
export function LightButton({
export const LightButton = ({
className,
icon: initialIcon,
title,
@ -83,7 +83,7 @@ export function LightButton({
disabled = false,
focus = false,
onClick,
}: LightButtonProps) {
}: LightButtonProps) => {
const icon = useMemo(() => {
if (!initialIcon || !React.isValidElement(initialIcon)) {
return null;
@ -107,4 +107,4 @@ export function LightButton({
{title}
</StyledButton>
);
}
};

6
front/src/modules/ui/button/components/LightIconButton.tsx
View File

@ -78,7 +78,7 @@ const StyledButton = styled.button<
}
`;
export function LightIconButton({
export const LightIconButton = ({
className,
Icon,
active = false,
@ -87,7 +87,7 @@ export function LightIconButton({
disabled = false,
focus = false,
onClick,
}: LightIconButtonProps) {
}: LightIconButtonProps) => {
const theme = useTheme();
return (
<StyledButton
@ -102,4 +102,4 @@ export function LightIconButton({
{Icon && <Icon size={theme.icon.size.md} />}
</StyledButton>
);
}
};

6
front/src/modules/ui/button/components/MainButton.tsx
View File

@ -91,13 +91,13 @@ type MainButtonProps = Props & {
Icon?: IconComponent;
};
export function MainButton({
export const MainButton = ({
Icon,
title,
fullWidth = false,
variant = 'primary',
...props
}: MainButtonProps) {
}: MainButtonProps) => {
const theme = useTheme();
return (
<StyledButton fullWidth={fullWidth} variant={variant} {...props}>
@ -105,4 +105,4 @@ export function MainButton({
{title}
</StyledButton>
);
}
};

7
front/src/modules/ui/button/components/RoundedIconButton.tsx
View File

@ -33,7 +33,10 @@ type RoundedIconButtonProps = {
Icon: IconComponent;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;
export function RoundedIconButton({ Icon, ...props }: RoundedIconButtonProps) {
export const RoundedIconButton = ({
Icon,
...props
}: RoundedIconButtonProps) => {
const theme = useTheme();
return (
@ -41,4 +44,4 @@ export function RoundedIconButton({ Icon, ...props }: RoundedIconButtonProps) {
{<Icon size={theme.icon.size.md} />}
</StyledIconButton>
);
}
};

46
front/src/modules/ui/checkmark/components/AnimatedCheckmark.tsx
View File

@ -7,32 +7,30 @@ export type CheckmarkProps = React.ComponentProps<typeof motion.path> & {
size?: number;
};
export function AnimatedCheckmark({
export const AnimatedCheckmark = ({
isAnimating = false,
color = '#FFF',
duration = 0.5,
size = 28,
...restProps
}: CheckmarkProps) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 52 52"
width={size}
height={size}
>
<motion.path
{...restProps}
fill="none"
stroke={color}
strokeWidth={4}
d="M14 27l7.8 7.8L38 14"
pathLength="1"
strokeDasharray="1"
strokeDashoffset={isAnimating ? '1' : '0'}
animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
transition={{ duration }}
/>
</svg>
);
}
}: CheckmarkProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 52 52"
width={size}
height={size}
>
<motion.path
{...restProps}
fill="none"
stroke={color}
strokeWidth={4}
d="M14 27l7.8 7.8L38 14"
pathLength="1"
strokeDasharray="1"
strokeDashoffset={isAnimating ? '1' : '0'}
animate={{ strokeDashoffset: isAnimating ? '0' : '1' }}
transition={{ duration }}
/>
</svg>
);

4
front/src/modules/ui/checkmark/components/Checkmark.tsx
View File

@ -16,7 +16,7 @@ const StyledContainer = styled.div`
export type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>;
export function Checkmark(props: CheckmarkProps) {
export const Checkmark = (props: CheckmarkProps) => {
const theme = useTheme();
return (
@ -24,4 +24,4 @@ export function Checkmark(props: CheckmarkProps) {
<IconCheck color={theme.grayScale.gray0} size={14} />
</StyledContainer>
);
}
};

40
front/src/modules/ui/chip/components/Chip.tsx
View File

@ -114,7 +114,7 @@ const StyledLabel = styled.span`
white-space: nowrap;
`;
export function Chip({
export const Chip = ({
size = ChipSize.Small,
label,
disabled = false,
@ -125,23 +125,21 @@ export function Chip({
accent = ChipAccent.TextPrimary,
maxWidth,
className,
}: OwnProps) {
return (
<StyledContainer
data-testid="chip"
clickable={clickable}
variant={variant}
accent={accent}
size={size}
disabled={disabled}
className={className}
maxWidth={maxWidth}
>
{leftComponent}
<StyledLabel>
<OverflowingTextWithTooltip text={label} />
</StyledLabel>
{rightComponent}
</StyledContainer>
);
}
}: OwnProps) => (
<StyledContainer
data-testid="chip"
clickable={clickable}
variant={variant}
accent={accent}
size={size}
disabled={disabled}
className={className}
maxWidth={maxWidth}
>
{leftComponent}
<StyledLabel>
<OverflowingTextWithTooltip text={label} />
</StyledLabel>
{rightComponent}
</StyledContainer>
);

10
front/src/modules/ui/chip/components/EntityChip.tsx
View File

@ -20,23 +20,23 @@ export enum EntityChipVariant {
Transparent = 'transparent',
}
export function EntityChip({
export const EntityChip = ({
linkToEntity,
entityId,
name,
pictureUrl,
avatarType = 'rounded',
variant = EntityChipVariant.Regular,
}: OwnProps) {
}: OwnProps) => {
const navigate = useNavigate();
function handleLinkClick(event: React.MouseEvent<HTMLDivElement>) {
const handleLinkClick = (event: React.MouseEvent<HTMLDivElement>) => {
if (linkToEntity) {
event.preventDefault();
event.stopPropagation();
navigate(linkToEntity);
}
}
};
return isNonEmptyString(name) ? (
<div onClick={handleLinkClick}>
@ -63,4 +63,4 @@ export function EntityChip({
) : (
<></>
);
}
};

32
front/src/modules/ui/color-scheme/components/ColorSchemeCard.tsx
View File

@ -100,19 +100,17 @@ export type ColorSchemeSegmentProps = {
controls: AnimationControls;
} & React.ComponentPropsWithoutRef<'div'>;
function ColorSchemeSegment({
const ColorSchemeSegment = ({
variant,
controls,
...rest
}: ColorSchemeSegmentProps) {
return (
<StyledColorSchemeBackground variant={variant} {...rest}>
<StyledColorSchemeContent animate={controls} variant={variant}>
Aa
</StyledColorSchemeContent>
</StyledColorSchemeBackground>
);
}
}: ColorSchemeSegmentProps) => (
<StyledColorSchemeBackground variant={variant} {...rest}>
<StyledColorSchemeContent animate={controls} variant={variant}>
Aa
</StyledColorSchemeContent>
</StyledColorSchemeBackground>
);
const StyledContainer = styled.div`
position: relative;
@ -146,28 +144,28 @@ const checkmarkAnimationVariants = {
exit: { opacity: 0 },
};
export function ColorSchemeCard({
export const ColorSchemeCard = ({
variant,
selected,
...rest
}: ColorSchemeCardProps) {
}: ColorSchemeCardProps) => {
const controls = useAnimation();
function handleMouseEnter() {
const handleMouseEnter = () => {
controls.start({
height: 61,
fontSize: '22px',
transition: { duration: 0.1 },
});
}
};
function handleMouseLeave() {
const handleMouseLeave = () => {
controls.start({
height: 56,
fontSize: '20px',
transition: { duration: 0.1 },
});
}
};
if (variant === 'system') {
return (
@ -231,4 +229,4 @@ export function ColorSchemeCard({
</AnimatePresence>
</StyledContainer>
);
}
};

61
front/src/modules/ui/color-scheme/components/ColorSchemePicker.tsx
View File

@ -30,33 +30,34 @@ export type ColorSchemePickerProps = {
onChange: (value: ColorScheme) => void;
};
export function ColorSchemePicker({ value, onChange }: ColorSchemePickerProps) {
return (
<StyledContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.Light)}
variant="light"
selected={value === ColorScheme.Light}
/>
<StyledLabel>Light</StyledLabel>
</StyledCardContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.Dark)}
variant="dark"
selected={value === ColorScheme.Dark}
/>
<StyledLabel>Dark</StyledLabel>
</StyledCardContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.System)}
variant="system"
selected={value === ColorScheme.System}
/>
<StyledLabel>System settings</StyledLabel>
</StyledCardContainer>
</StyledContainer>
);
}
export const ColorSchemePicker = ({
value,
onChange,
}: ColorSchemePickerProps) => (
<StyledContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.Light)}
variant="light"
selected={value === ColorScheme.Light}
/>
<StyledLabel>Light</StyledLabel>
</StyledCardContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.Dark)}
variant="dark"
selected={value === ColorScheme.Dark}
/>
<StyledLabel>Dark</StyledLabel>
</StyledCardContainer>
<StyledCardContainer>
<ColorSchemeCard
onClick={() => onChange(ColorScheme.System)}
variant="system"
selected={value === ColorScheme.System}
/>
<StyledLabel>System settings</StyledLabel>
</StyledCardContainer>
</StyledContainer>
);

6
front/src/modules/ui/content-display/components/DateDisplay.tsx
View File

@ -4,6 +4,6 @@ type OwnProps = {
value: Date | string | null | undefined;
};
export function DateDisplay({ value }: OwnProps) {
return <div>{value && formatToHumanReadableDate(value)}</div>;
}
export const DateDisplay = ({ value }: OwnProps) => (
<div>{value && formatToHumanReadableDate(value)}</div>
);

9
front/src/modules/ui/content-display/components/EmailDisplay.tsx
View File

@ -2,17 +2,17 @@ import { MouseEvent } from 'react';
import { ContactLink } from '@/ui/link/components/ContactLink';
function validateEmail(email: string) {
const validateEmail = (email: string) => {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPattern.test(email.trim());
}
};
type OwnProps = {
value: string | null;
};
export function EmailDisplay({ value }: OwnProps) {
return value && validateEmail(value) ? (
export const EmailDisplay = ({ value }: OwnProps) =>
value && validateEmail(value) ? (
<ContactLink
href={`mailto:${value}`}
onClick={(event: MouseEvent<HTMLElement>) => {
@ -24,4 +24,3 @@ export function EmailDisplay({ value }: OwnProps) {
) : (
<ContactLink href="#">{value}</ContactLink>
);
}

12
front/src/modules/ui/content-display/components/MoneyDisplay.tsx
View File

@ -13,10 +13,8 @@ type OwnProps = {
value: number | null;
};
export function MoneyDisplay({ value }: OwnProps) {
return (
<StyledTextInputDisplay>
{value ? `$${formatNumber(value)}` : ''}
</StyledTextInputDisplay>
);
}
export const MoneyDisplay = ({ value }: OwnProps) => (
<StyledTextInputDisplay>
{value ? `$${formatNumber(value)}` : ''}
</StyledTextInputDisplay>
);

12
front/src/modules/ui/content-display/components/NumberDisplay.tsx
View File

@ -13,10 +13,8 @@ type OwnProps = {
value: string;
};
export function NumberDisplay({ value }: OwnProps) {
return (
<StyledNumberDisplay>
{value && formatNumber(Number(value))}
</StyledNumberDisplay>
);
}
export const NumberDisplay = ({ value }: OwnProps) => (
<StyledNumberDisplay>
{value && formatNumber(Number(value))}
</StyledNumberDisplay>
);

5
front/src/modules/ui/content-display/components/PhoneDisplay.tsx
View File

@ -7,8 +7,8 @@ type OwnProps = {
value: string | null;
};
export function PhoneDisplay({ value }: OwnProps) {
return value && isValidPhoneNumber(value) ? (
export const PhoneDisplay = ({ value }: OwnProps) =>
value && isValidPhoneNumber(value) ? (
<ContactLink
href={parsePhoneNumber(value, 'FR')?.getURI()}
onClick={(event: MouseEvent<HTMLElement>) => {
@ -20,4 +20,3 @@ export function PhoneDisplay({ value }: OwnProps) {
) : (
<ContactLink href="#">{value}</ContactLink>
);
}

6
front/src/modules/ui/content-display/components/TextDisplay.tsx
View File

@ -11,6 +11,6 @@ type OwnProps = {
text: string;
};
export function TextDisplay({ text }: OwnProps) {
return <StyledTextInputDisplay>{text}</StyledTextInputDisplay>;
}
export const TextDisplay = ({ text }: OwnProps) => (
<StyledTextInputDisplay>{text}</StyledTextInputDisplay>
);

8
front/src/modules/ui/content-display/components/URLDisplay.tsx
View File

@ -33,10 +33,10 @@ const checkUrlType = (url: string) => {
return LinkType.Url;
};
export function URLDisplay({ value }: OwnProps) {
function handleClick(event: MouseEvent<HTMLElement>) {
export const URLDisplay = ({ value }: OwnProps) => {
const handleClick = (event: MouseEvent<HTMLElement>) => {
event.stopPropagation();
}
};
const absoluteUrl = value
? value.startsWith('http')
? value
@ -57,4 +57,4 @@ export function URLDisplay({ value }: OwnProps) {
{value}
</StyledRawLink>
);
}
};

4
front/src/modules/ui/context-menu/components/ContextMenu.tsx
View File

@ -41,7 +41,7 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
z-index: 1;
`;
export function ContextMenu({ selectedIds }: OwnProps) {
export const ContextMenu = ({ selectedIds }: OwnProps) => {
const contextMenuPosition = useRecoilValue(contextMenuPositionState);
const contextMenuIsOpen = useRecoilValue(contextMenuIsOpenState);
const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
@ -81,4 +81,4 @@ export function ContextMenu({ selectedIds }: OwnProps) {
</StyledDropdownMenu>
</StyledContainerContextMenu>
);
}
};

10
front/src/modules/ui/context-menu/components/ContextMenuItem.tsx
View File

@ -10,13 +10,11 @@ type OwnProps = {
onClick: () => void;
};
export function ContextMenuItem({
export const ContextMenuItem = ({
label,
Icon,
accent = 'default',
onClick,
}: OwnProps) {
return (
<MenuItem LeftIcon={Icon} onClick={onClick} accent={accent} text={label} />
);
}
}: OwnProps) => (
<MenuItem LeftIcon={Icon} onClick={onClick} accent={accent} text={label} />
);

4
front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx
View File

@ -12,7 +12,7 @@ import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState';
import { contextMenuPositionState } from '../../states/contextMenuPositionState';
import { ContextMenu } from '../ContextMenu';
function FilledContextMenu(props: { selectedIds: string[] }) {
const FilledContextMenu = (props: { selectedIds: string[] }) => {
const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
setContextMenuEntries();
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
@ -23,7 +23,7 @@ function FilledContextMenu(props: { selectedIds: string[] }) {
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
setContextMenuOpenState(true);
return <ContextMenu selectedIds={props.selectedIds} />;
}
};
const meta: Meta<typeof ContextMenu> = {
title: 'UI/ContextMenu/ContextMenu',

6
front/src/modules/ui/dialog/components/Dialog.tsx
View File

@ -72,7 +72,7 @@ export type DialogProps = React.ComponentPropsWithoutRef<typeof motion.div> & {
onClose?: () => void;
};
export function Dialog({
export const Dialog = ({
title,
message,
buttons = [],
@ -80,7 +80,7 @@ export function Dialog({
children,
onClose,
...rootProps
}: DialogProps) {
}: DialogProps) => {
const closeSnackbar = useCallback(() => {
onClose && onClose();
}, [onClose]);
@ -157,4 +157,4 @@ export function Dialog({
</StyledDialogContainer>
</StyledDialogOverlay>
);
}
};

4
front/src/modules/ui/dialog/components/DialogProvider.tsx
View File

@ -8,7 +8,7 @@ import { DialogHotkeyScope } from '../types/DialogHotkeyScope';
import { Dialog } from './Dialog';
export function DialogProvider({ children }: React.PropsWithChildren) {
export const DialogProvider = ({ children }: React.PropsWithChildren) => {
const [dialogInternal, setDialogInternal] =
useRecoilState(dialogInternalState);
@ -46,4 +46,4 @@ export function DialogProvider({ children }: React.PropsWithChildren) {
))}
</>
);
}
};

4
front/src/modules/ui/dialog/hooks/useDialog.ts
View File

@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
import { DialogOptions, dialogSetQueueState } from '../states/dialogState';
export function useDialog() {
export const useDialog = () => {
const setDialogQueue = useSetRecoilState(dialogSetQueueState);
const enqueueDialog = (options?: Omit<DialogOptions, 'id'>) => {
@ -14,4 +14,4 @@ export function useDialog() {
};
return { enqueueDialog };
}
};

10
front/src/modules/ui/dropdown/components/DropdownButton.tsx
View File

@ -22,7 +22,7 @@ type OwnProps = {
onClickOutside?: () => void;
};
export function DropdownButton({
export const DropdownButton = ({
buttonComponents,
dropdownComponents,
dropdownId,
@ -30,7 +30,7 @@ export function DropdownButton({
dropdownHotkeyScope,
dropdownPlacement = 'bottom-end',
onClickOutside,
}: OwnProps) {
}: OwnProps) => {
const containerRef = useRef<HTMLDivElement>(null);
const { isDropdownButtonOpen, toggleDropdownButton, closeDropdownButton } =
@ -43,9 +43,9 @@ export function DropdownButton({
middleware: [flip(), offset()],
});
function handleHotkeyTriggered() {
const handleHotkeyTriggered = () => {
toggleDropdownButton();
}
};
useListenClickOutside({
refs: [containerRef],
@ -79,4 +79,4 @@ export function DropdownButton({
)}
</div>
);
}
};

6
front/src/modules/ui/dropdown/components/DropdownMenuContainer.tsx
View File

@ -22,13 +22,13 @@ export type DropdownMenuContainerProps = {
width?: `${string}px` | 'auto' | number;
} & HTMLAttributes<HTMLUListElement>;
export function DropdownMenuContainer({
export const DropdownMenuContainer = ({
anchor = 'right',
children,
onClose,
width,
...props
}: DropdownMenuContainerProps) {
}: DropdownMenuContainerProps) => {
const dropdownRef = useRef(null);
useListenClickOutside({
@ -45,4 +45,4 @@ export function DropdownMenuContainer({
</StyledDropdownMenu>
</StyledDropdownMenuContainer>
);
}
};

6
front/src/modules/ui/dropdown/components/DropdownMenuHeader.tsx
View File

@ -46,12 +46,12 @@ type DropdownMenuHeaderProps = ComponentProps<'li'> & {
EndIcon?: IconComponent;
};
export function DropdownMenuHeader({
export const DropdownMenuHeader = ({
children,
StartIcon,
EndIcon,
...props
}: DropdownMenuHeaderProps) {
}: DropdownMenuHeaderProps) => {
const theme = useTheme();
return (
@ -69,4 +69,4 @@ export function DropdownMenuHeader({
)}
</StyledHeader>
);
}
};

16
front/src/modules/ui/dropdown/hooks/useDropdownButton.ts
View File

@ -5,7 +5,7 @@ import { dropdownButtonHotkeyScopeScopedFamilyState } from '../states/dropdownBu
import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButtonOpenScopedFamilyState';
import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
export const useDropdownButton = ({ dropdownId }: { dropdownId: string }) => {
const {
setHotkeyScopeAndMemorizePreviousScope,
goBackToPreviousHotkeyScope,
@ -24,12 +24,12 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
DropdownRecoilScopeContext,
);
function closeDropdownButton() {
const closeDropdownButton = () => {
goBackToPreviousHotkeyScope();
setIsDropdownButtonOpen(false);
}
};
function openDropdownButton() {
const openDropdownButton = () => {
setIsDropdownButtonOpen(true);
if (dropdownButtonHotkeyScope) {
@ -38,15 +38,15 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
dropdownButtonHotkeyScope.customScopes,
);
}
}
};
function toggleDropdownButton() {
const toggleDropdownButton = () => {
if (isDropdownButtonOpen) {
closeDropdownButton();
} else {
openDropdownButton();
}
}
};
return {
isDropdownButtonOpen,
@ -54,4 +54,4 @@ export function useDropdownButton({ dropdownId }: { dropdownId: string }) {
toggleDropdownButton,
openDropdownButton,
};
}
};

18
front/src/modules/ui/editable-field/components/EditableField.tsx
View File

@ -85,7 +85,7 @@ type OwnProps = {
disableHoverEffect?: boolean;
};
export function EditableField({
export const EditableField = ({
IconLabel,
label,
labelFixedWidth,
@ -97,24 +97,24 @@ export function EditableField({
displayModeContentOnly,
isDisplayModeFixHeight,
disableHoverEffect,
}: OwnProps) {
}: OwnProps) => {
const [isHovered, setIsHovered] = useState(false);
function handleContainerMouseEnter() {
const handleContainerMouseEnter = () => {
setIsHovered(true);
}
};
function handleContainerMouseLeave() {
const handleContainerMouseLeave = () => {
setIsHovered(false);
}
};
const { isFieldInEditMode, openEditableField } = useEditableField();
function handleDisplayModeClick() {
const handleDisplayModeClick = () => {
if (!displayModeContentOnly) {
openEditableField(customEditHotkeyScope);
}
}
};
const showEditButton =
!isFieldInEditMode && isHovered && useEditButton && !displayModeContentOnly;
@ -163,4 +163,4 @@ export function EditableField({
</StyledValueContainer>
</StyledEditableFieldBaseContainer>
);
}
};

36
front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx
View File

@ -57,27 +57,25 @@ type OwnProps = {
isHovered?: boolean;
};
export function EditableFieldDisplayMode({
export const EditableFieldDisplayMode = ({
children,
isDisplayModeContentEmpty,
disableHoverEffect,
isDisplayModeFixHeight,
isHovered,
}: React.PropsWithChildren<OwnProps>) {
return (
<StyledEditableFieldNormalModeOuterContainer
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
disableHoverEffect={disableHoverEffect}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
>
<StyledEditableFieldNormalModeInnerContainer>
{isDisplayModeContentEmpty || !children ? (
<StyledEmptyField>{'Empty'}</StyledEmptyField>
) : (
children
)}
</StyledEditableFieldNormalModeInnerContainer>
</StyledEditableFieldNormalModeOuterContainer>
);
}
}: React.PropsWithChildren<OwnProps>) => (
<StyledEditableFieldNormalModeOuterContainer
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
disableHoverEffect={disableHoverEffect}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isHovered}
>
<StyledEditableFieldNormalModeInnerContainer>
{isDisplayModeContentEmpty || !children ? (
<StyledEmptyField>{'Empty'}</StyledEmptyField>
) : (
children
)}
</StyledEditableFieldNormalModeInnerContainer>
</StyledEditableFieldNormalModeOuterContainer>
);

8
front/src/modules/ui/editable-field/components/EditableFieldEditButton.tsx
View File

@ -3,12 +3,12 @@ import { IconPencil } from '@/ui/icon';
import { useEditableField } from '../hooks/useEditableField';
export function EditableFieldEditButton() {
export const EditableFieldEditButton = () => {
const { openEditableField } = useEditableField();
function handleClick() {
const handleClick = () => {
openEditableField();
}
};
return (
<FloatingIconButton
@ -18,4 +18,4 @@ export function EditableFieldEditButton() {
data-testid="editable-field-edit-mode-container"
/>
);
}
};

12
front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx
View File

@ -30,10 +30,8 @@ type OwnProps = {
children: React.ReactNode;
};
export function EditableFieldEditMode({ children }: OwnProps) {
return (
<StyledEditableFieldEditModeContainer data-testid="editable-field-edit-mode-container">
<StyledEditableFieldInput>{children}</StyledEditableFieldInput>
</StyledEditableFieldEditModeContainer>
);
}
export const EditableFieldEditMode = ({ children }: OwnProps) => (
<StyledEditableFieldEditModeContainer data-testid="editable-field-edit-mode-container">
<StyledEditableFieldInput>{children}</StyledEditableFieldInput>
</StyledEditableFieldEditModeContainer>
);

4
front/src/modules/ui/editable-field/components/GenericEditableBooleanField.tsx
View File

@ -10,7 +10,7 @@ import { FieldBooleanMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableBooleanFieldDisplayMode } from './GenericEditableBooleanFieldDisplayMode';
export function GenericEditableBooleanField() {
export const GenericEditableBooleanField = () => {
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldBooleanMetadata>;
@ -24,4 +24,4 @@ export function GenericEditableBooleanField() {
/>
</RecoilScope>
);
}
};

8
front/src/modules/ui/editable-field/components/GenericEditableBooleanFieldDisplayMode.tsx
View File

@ -10,7 +10,7 @@ import { genericEntityFieldFamilySelector } from '../states/selectors/genericEnt
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldBooleanMetadata } from '../types/FieldMetadata';
export function GenericEditableBooleanFieldDisplayMode() {
export const GenericEditableBooleanFieldDisplayMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -27,7 +27,7 @@ export function GenericEditableBooleanFieldDisplayMode() {
const updateField = useUpdateGenericEntityField();
function handleSubmit(newValue: boolean) {
const handleSubmit = (newValue: boolean) => {
if (currentEditableFieldEntityId && updateField) {
updateField(
currentEditableFieldEntityId,
@ -38,7 +38,7 @@ export function GenericEditableBooleanFieldDisplayMode() {
// TODO: use optimistic effect instead, but needs generic refactor
setFieldValue(newValue);
}
}
};
return <BooleanInput value={fieldValue} onToggle={handleSubmit} />;
}
};

4
front/src/modules/ui/editable-field/components/GenericEditableDateField.tsx
View File

@ -14,7 +14,7 @@ import { FieldDateMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableDateFieldEditMode } from './GenericEditableDateFieldEditMode';
export function GenericEditableDateField() {
export const GenericEditableDateField = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -39,4 +39,4 @@ export function GenericEditableDateField() {
/>
</RecoilScope>
);
}
};

8
front/src/modules/ui/editable-field/components/GenericEditableDateFieldEditMode.tsx
View File

@ -13,7 +13,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldDateMetadata } from '../types/FieldMetadata';
export function GenericEditableDateFieldEditMode() {
export const GenericEditableDateFieldEditMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -31,7 +31,7 @@ export function GenericEditableDateFieldEditMode() {
const updateField = useUpdateGenericEntityField();
function handleSubmit(newDate: Nullable<Date>) {
const handleSubmit = (newDate: Nullable<Date>) => {
if (!newDate) {
setFieldValue('');
@ -57,7 +57,7 @@ export function GenericEditableDateFieldEditMode() {
newDateISO,
);
}
}
};
const { handleEnter, handleEscape, handleClickOutside } =
useFieldInputEventHandlers({
@ -73,4 +73,4 @@ export function GenericEditableDateFieldEditMode() {
value={fieldValue ? new Date(fieldValue) : null}
/>
);
}
};

4
front/src/modules/ui/editable-field/components/GenericEditableField.tsx
View File

@ -19,7 +19,7 @@ import { GenericEditableTextField } from './GenericEditableTextField';
import { GenericEditableURLField } from './GenericEditableURLField';
import { ProbabilityEditableField } from './ProbabilityEditableField';
export function GenericEditableField() {
export const GenericEditableField = () => {
const fieldDefinition = useContext(EditableFieldDefinitionContext);
if (isFieldRelation(fieldDefinition)) {
@ -44,4 +44,4 @@ export function GenericEditableField() {
);
return <></>;
}
}
};

4
front/src/modules/ui/editable-field/components/GenericEditableNumberField.tsx
View File

@ -14,7 +14,7 @@ import { FieldNumberMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableNumberFieldEditMode } from './GenericEditableNumberFieldEditMode';
export function GenericEditableNumberField() {
export const GenericEditableNumberField = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -39,4 +39,4 @@ export function GenericEditableNumberField() {
/>
</RecoilScope>
);
}
};

8
front/src/modules/ui/editable-field/components/GenericEditableNumberFieldEditMode.tsx
View File

@ -16,7 +16,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldNumberMetadata } from '../types/FieldMetadata';
export function GenericEditableNumberFieldEditMode() {
export const GenericEditableNumberFieldEditMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -34,7 +34,7 @@ export function GenericEditableNumberFieldEditMode() {
const updateField = useUpdateGenericEntityField();
function handleSubmit(newValue: string) {
const handleSubmit = (newValue: string) => {
if (!canBeCastAsIntegerOrNull(newValue)) {
return;
}
@ -52,7 +52,7 @@ export function GenericEditableNumberFieldEditMode() {
castedValue,
);
}
}
};
const { handleEnter, handleEscape, handleClickOutside } =
useFieldInputEventHandlers({
@ -70,4 +70,4 @@ export function GenericEditableNumberFieldEditMode() {
onEscape={handleEscape}
/>
);
}
};

4
front/src/modules/ui/editable-field/components/GenericEditablePhoneField.tsx
View File

@ -14,7 +14,7 @@ import { FieldPhoneMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditablePhoneFieldEditMode } from './GenericEditablePhoneFieldEditMode';
export function GenericEditablePhoneField() {
export const GenericEditablePhoneField = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -40,4 +40,4 @@ export function GenericEditablePhoneField() {
/>
</RecoilScope>
);
}
};

8
front/src/modules/ui/editable-field/components/GenericEditablePhoneFieldEditMode.tsx
View File

@ -13,7 +13,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldPhoneMetadata } from '../types/FieldMetadata';
export function GenericEditablePhoneFieldEditMode() {
export const GenericEditablePhoneFieldEditMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -31,7 +31,7 @@ export function GenericEditablePhoneFieldEditMode() {
const updateField = useUpdateGenericEntityField();
function handleSubmit(newValue: string) {
const handleSubmit = (newValue: string) => {
if (!isPossiblePhoneNumber(newValue)) return;
setFieldValue(newValue);
@ -43,7 +43,7 @@ export function GenericEditablePhoneFieldEditMode() {
newValue,
);
}
}
};
const { handleEnter, handleEscape, handleClickOutside } =
useFieldInputEventHandlers({
@ -59,4 +59,4 @@ export function GenericEditablePhoneFieldEditMode() {
hotkeyScope={EditableFieldHotkeyScope.EditableField}
/>
);
}
};

4
front/src/modules/ui/editable-field/components/GenericEditableRelationField.tsx
View File

@ -15,7 +15,7 @@ import { EditableField } from './EditableField';
import { GenericEditableRelationFieldDisplayMode } from './GenericEditableRelationFieldDisplayMode';
import { GenericEditableRelationFieldEditMode } from './GenericEditableRelationFieldEditMode';
export function GenericEditableRelationField() {
export const GenericEditableRelationField = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -47,4 +47,4 @@ export function GenericEditableRelationField() {
</RecoilScope>
</RecoilScope>
);
}
};

4
front/src/modules/ui/editable-field/components/GenericEditableRelationFieldDisplayMode.tsx
View File

@ -13,7 +13,7 @@ import { genericEntityFieldFamilySelector } from '../states/selectors/genericEnt
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldRelationMetadata } from '../types/FieldMetadata';
export function GenericEditableRelationFieldDisplayMode() {
export const GenericEditableRelationFieldDisplayMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -67,4 +67,4 @@ export function GenericEditableRelationFieldDisplayMode() {
);
return <> </>;
}
}
};

18
front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx
View File

@ -26,7 +26,7 @@ const StyledRelationPickerContainer = styled.div`
top: -8px;
`;
function RelationPicker({
const RelationPicker = ({
fieldDefinition,
fieldValue,
handleEntitySubmit,
@ -36,7 +36,7 @@ function RelationPicker({
fieldValue: FieldRelationValue & { companyId?: string };
handleEntitySubmit: (newRelationId: EntityForSelect | null) => void;
handleCancel: () => void;
}) {
}) => {
switch (fieldDefinition.metadata.relationType) {
case Entity.Person: {
return (
@ -72,9 +72,9 @@ function RelationPicker({
);
return <></>;
}
}
};
export function GenericEditableRelationFieldEditMode() {
export const GenericEditableRelationFieldEditMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -98,7 +98,7 @@ export function GenericEditableRelationFieldEditMode() {
const updateField = useUpdateGenericEntityField();
const { closeEditableField } = useEditableField();
function handleSubmit(newRelation: EntityForSelect | null) {
const handleSubmit = (newRelation: EntityForSelect | null) => {
if (newRelation?.id === fieldValue?.id) return;
setFieldValue({
@ -116,11 +116,11 @@ export function GenericEditableRelationFieldEditMode() {
}
closeEditableField();
}
};
function handleCancel() {
const handleCancel = () => {
closeEditableField();
}
};
return (
<StyledRelationPickerContainer>
@ -132,4 +132,4 @@ export function GenericEditableRelationFieldEditMode() {
/>
</StyledRelationPickerContainer>
);
}
};

4
front/src/modules/ui/editable-field/components/GenericEditableTextField.tsx
View File

@ -14,7 +14,7 @@ import { FieldNumberMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableTextFieldEditMode } from './GenericEditableTextFieldEditMode';
export function GenericEditableTextField() {
export const GenericEditableTextField = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -39,4 +39,4 @@ export function GenericEditableTextField() {
/>
</RecoilScope>
);
}
};

8
front/src/modules/ui/editable-field/components/GenericEditableTextFieldEditMode.tsx
View File

@ -12,7 +12,7 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
import { FieldDefinition } from '../types/FieldDefinition';
import { FieldTextMetadata } from '../types/FieldMetadata';
export function GenericEditableTextFieldEditMode() {
export const GenericEditableTextFieldEditMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -30,7 +30,7 @@ export function GenericEditableTextFieldEditMode() {
const updateField = useUpdateGenericEntityField();
function handleSubmit(newValue: string) {
const handleSubmit = (newValue: string) => {
if (currentEditableFieldEntityId && updateField) {
updateField(
currentEditableFieldEntityId,
@ -41,7 +41,7 @@ export function GenericEditableTextFieldEditMode() {
// TODO: use optimistic effect instead, but needs generic refactor
setFieldValue(newValue);
}
}
};
const { handleEnter, handleEscape, handleClickOutside } =
useFieldInputEventHandlers({
@ -59,4 +59,4 @@ export function GenericEditableTextFieldEditMode() {
hotkeyScope={EditableFieldHotkeyScope.EditableField}
/>
);
}
};

4
front/src/modules/ui/editable-field/components/GenericEditableURLField.tsx
View File

@ -14,7 +14,7 @@ import { FieldNumberMetadata } from '../types/FieldMetadata';
import { EditableField } from './EditableField';
import { GenericEditableURLFieldEditMode } from './GenericEditableURLFieldEditMode';
export function GenericEditableURLField() {
export const GenericEditableURLField = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -41,4 +41,4 @@ export function GenericEditableURLField() {
/>
</RecoilScope>
);
}
};

8
front/src/modules/ui/editable-field/components/GenericEditableURLFieldEditMode.tsx
View File

@ -14,7 +14,7 @@ import { FieldURLMetadata } from '../types/FieldMetadata';
// This one is very similar to GenericEditableTextFieldEditMode
// We could probably merge them since FieldURLMetadata is basically a FieldTextMetadata
export function GenericEditableURLFieldEditMode() {
export const GenericEditableURLFieldEditMode = () => {
const currentEditableFieldEntityId = useContext(EditableFieldEntityIdContext);
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
@ -32,7 +32,7 @@ export function GenericEditableURLFieldEditMode() {
const updateField = useUpdateGenericEntityField();
function handleSubmit(newValue: string) {
const handleSubmit = (newValue: string) => {
setFieldValue(newValue);
if (currentEditableFieldEntityId && updateField) {
@ -42,7 +42,7 @@ export function GenericEditableURLFieldEditMode() {
newValue,
);
}
}
};
const { handleEnter, handleEscape, handleClickOutside } =
useFieldInputEventHandlers({
@ -60,4 +60,4 @@ export function GenericEditableURLFieldEditMode() {
hotkeyScope={EditableFieldHotkeyScope.EditableField}
/>
);
}
};

4
front/src/modules/ui/editable-field/components/ProbabilityEditableField.tsx
View File

@ -10,7 +10,7 @@ import { FieldProbabilityMetadata } from '../types/FieldMetadata';
import { ProbabilityEditableFieldEditMode } from './ProbabilityEditableFieldEditMode';
export function ProbabilityEditableField() {
export const ProbabilityEditableField = () => {
const currentEditableFieldDefinition = useContext(
EditableFieldDefinitionContext,
) as FieldDefinition<FieldProbabilityMetadata>;
@ -25,4 +25,4 @@ export function ProbabilityEditableField() {
/>
</RecoilScope>
);
}
};

8
front/src/modules/ui/editable-field/components/ProbabilityEditableFieldEditMode.tsx
View File

@ -67,7 +67,7 @@ const PROBABILITY_VALUES = [
{ label: '100%', value: 100 },
];
export function ProbabilityEditableFieldEditMode() {
export const ProbabilityEditableFieldEditMode = () => {
const [nextProbabilityIndex, setNextProbabilityIndex] = useState<
number | null
>(null);
@ -91,7 +91,7 @@ export function ProbabilityEditableFieldEditMode() {
const probabilityIndex = Math.ceil(fieldValue / 25);
function handleChange(newValue: number) {
const handleChange = (newValue: number) => {
setFieldValue(newValue);
if (currentEditableFieldEntityId && updateField) {
updateField(
@ -101,7 +101,7 @@ export function ProbabilityEditableFieldEditMode() {
);
}
closeEditableField();
}
};
return (
<StyledContainer>
@ -137,4 +137,4 @@ export function ProbabilityEditableFieldEditMode() {
</StyledProgressBarContainer>
</StyledContainer>
);
}
};

12
front/src/modules/ui/editable-field/hooks/useEditableField.ts
View File

@ -6,7 +6,7 @@ import { isFieldInEditModeScopedState } from '../states/isFieldInEditModeScopedS
import { FieldRecoilScopeContext } from '../states/recoil-scope-contexts/FieldRecoilScopeContext';
import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
export function useEditableField() {
export const useEditableField = () => {
const [isFieldInEditMode, setIsFieldInEditMode] = useRecoilScopedState(
isFieldInEditModeScopedState,
FieldRecoilScopeContext,
@ -17,13 +17,13 @@ export function useEditableField() {
goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope();
function closeEditableField() {
const closeEditableField = () => {
setIsFieldInEditMode(false);
goBackToPreviousHotkeyScope();
}
};
function openEditableField(customEditHotkeyScopeForField?: HotkeyScope) {
const openEditableField = (customEditHotkeyScopeForField?: HotkeyScope) => {
setIsFieldInEditMode(true);
if (customEditHotkeyScopeForField) {
@ -36,11 +36,11 @@ export function useEditableField() {
EditableFieldHotkeyScope.EditableField,
);
}
}
};
return {
isFieldInEditMode,
closeEditableField,
openEditableField,
};
}
};

6
front/src/modules/ui/editable-field/hooks/useFieldInputEventHandlers.ts
View File

@ -1,12 +1,12 @@
import { useEditableField } from './useEditableField';
export function useFieldInputEventHandlers<T>({
export const useFieldInputEventHandlers = <T>({
onSubmit,
onCancel,
}: {
onSubmit?: (newValue: T) => void;
onCancel?: () => void;
}) {
}) => {
const { closeEditableField, isFieldInEditMode } = useEditableField();
return {
@ -25,4 +25,4 @@ export function useFieldInputEventHandlers<T>({
closeEditableField();
},
};
}
};

6
front/src/modules/ui/editable-field/hooks/useRegisterCloseFieldHandlers.ts
View File

@ -5,11 +5,11 @@ import { EditableFieldHotkeyScope } from '../types/EditableFieldHotkeyScope';
import { useEditableField } from './useEditableField';
export function useRegisterCloseFieldHandlers(
export const useRegisterCloseFieldHandlers = (
wrapperRef: React.RefObject<HTMLDivElement>,
onSubmit?: () => void,
onCancel?: () => void,
) {
) => {
const { closeEditableField, isFieldInEditMode } = useEditableField();
useListenClickOutside({
@ -41,4 +41,4 @@ export function useRegisterCloseFieldHandlers(
EditableFieldHotkeyScope.EditableField,
[closeEditableField, onCancel],
);
}
};

10
front/src/modules/ui/editable-field/hooks/useUpdateGenericEntityField.ts
View File

@ -50,12 +50,12 @@ import { isFieldTextValue } from '../types/guards/isFieldTextValue';
import { isFieldURL } from '../types/guards/isFieldURL';
import { isFieldURLValue } from '../types/guards/isFieldURLValue';
export function useUpdateGenericEntityField() {
export const useUpdateGenericEntityField = () => {
const useUpdateEntityMutation = useContext(EditableFieldMutationContext);
const [updateEntity] = useUpdateEntityMutation();
return function updateEntityField<
const updateEntityField = <
ValueType extends FieldMetadata extends FieldDoubleTextMetadata
? FieldDoubleTextValue
: FieldMetadata extends FieldTextMetadata
@ -83,7 +83,7 @@ export function useUpdateGenericEntityField() {
currentEntityId: string,
field: FieldDefinition<FieldMetadata>,
newFieldValue: ValueType | null,
) {
) => {
// TODO: improve type guards organization, maybe with a common typeguard for all fields
// taking an object of options as parameter ?
//
@ -165,4 +165,6 @@ export function useUpdateGenericEntityField() {
});
}
};
}
return updateEntityField;
};

6
front/src/modules/ui/editable-field/property-box/components/PropertyBox.tsx
View File

@ -16,6 +16,6 @@ interface PropertyBoxProps {
extraPadding?: boolean;
}
export function PropertyBox({ children }: PropertyBoxProps) {
return <StyledPropertyBoxContainer>{children}</StyledPropertyBoxContainer>;
}
export const PropertyBox = ({ children }: PropertyBoxProps) => (
<StyledPropertyBoxContainer>{children}</StyledPropertyBoxContainer>
);

6
front/src/modules/ui/editable-field/types/guards/isFieldBoolean.ts
View File

@ -1,8 +1,6 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldBooleanMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldBoolean(
export const isFieldBoolean = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldBooleanMetadata> {
return field.type === 'boolean';
}
): field is FieldDefinition<FieldBooleanMetadata> => field.type === 'boolean';

13
front/src/modules/ui/editable-field/types/guards/isFieldBooleanValue.ts
View File

@ -1,12 +1,9 @@
import { FieldBooleanValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldBooleanValue(
export const isFieldBooleanValue = (
fieldValue: unknown,
): fieldValue is FieldBooleanValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'boolean'
);
}
): fieldValue is FieldBooleanValue =>
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'boolean';

6
front/src/modules/ui/editable-field/types/guards/isFieldChip.ts
View File

@ -1,8 +1,6 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldChipMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldChip(
export const isFieldChip = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldChipMetadata> {
return field.type === 'chip';
}
): field is FieldDefinition<FieldChipMetadata> => field.type === 'chip';

13
front/src/modules/ui/editable-field/types/guards/isFieldChipValue.ts
View File

@ -1,12 +1,9 @@
import { FieldChipValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldChipValue(
export const isFieldChipValue = (
fieldValue: unknown,
): fieldValue is FieldChipValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string'
);
}
): fieldValue is FieldChipValue =>
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string';

6
front/src/modules/ui/editable-field/types/guards/isFieldDate.ts
View File

@ -1,8 +1,6 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldDateMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldDate(
export const isFieldDate = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldDateMetadata> {
return field.type === 'date';
}
): field is FieldDefinition<FieldDateMetadata> => field.type === 'date';

11
front/src/modules/ui/editable-field/types/guards/isFieldDateValue.ts
View File

@ -1,11 +1,8 @@
import { FieldDateValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldDateValue(
export const isFieldDateValue = (
fieldValue: unknown,
): fieldValue is FieldDateValue {
return (
fieldValue === null ||
(fieldValue !== undefined && typeof fieldValue === 'string')
);
}
): fieldValue is FieldDateValue =>
fieldValue === null ||
(fieldValue !== undefined && typeof fieldValue === 'string');

7
front/src/modules/ui/editable-field/types/guards/isFieldDoubleText.ts
View File

@ -1,8 +1,7 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldDoubleTextMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldDoubleText(
export const isFieldDoubleText = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldDoubleTextMetadata> {
return field.type === 'double-text';
}
): field is FieldDefinition<FieldDoubleTextMetadata> =>
field.type === 'double-text';

7
front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChip.ts
View File

@ -1,8 +1,7 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldDoubleTextChipMetadata, FieldMetadata } from '../FieldMetadata';
export function isFieldDoubleTextChip(
export const isFieldDoubleTextChip = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldDoubleTextChipMetadata> {
return field.type === 'double-text-chip';
}
): field is FieldDefinition<FieldDoubleTextChipMetadata> =>
field.type === 'double-text-chip';

13
front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextChipValue.ts
View File

@ -1,12 +1,9 @@
import { FieldDoubleTextChipValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldDoubleTextChipValue(
export const isFieldDoubleTextChipValue = (
fieldValue: unknown,
): fieldValue is FieldDoubleTextChipValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'object'
);
}
): fieldValue is FieldDoubleTextChipValue =>
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'object';

13
front/src/modules/ui/editable-field/types/guards/isFieldDoubleTextValue.ts
View File

@ -1,12 +1,9 @@
import { FieldDoubleTextValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldDoubleTextValue(
export const isFieldDoubleTextValue = (
fieldValue: unknown,
): fieldValue is FieldDoubleTextValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'object'
);
}
): fieldValue is FieldDoubleTextValue =>
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'object';

6
front/src/modules/ui/editable-field/types/guards/isFieldNumber.ts
View File

@ -1,8 +1,6 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldNumberMetadata } from '../FieldMetadata';
export function isFieldNumber(
export const isFieldNumber = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldNumberMetadata> {
return field.type === 'number';
}
): field is FieldDefinition<FieldNumberMetadata> => field.type === 'number';

11
front/src/modules/ui/editable-field/types/guards/isFieldNumberValue.ts
View File

@ -1,11 +1,8 @@
import { FieldNumberValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldNumberValue(
export const isFieldNumberValue = (
fieldValue: unknown,
): fieldValue is FieldNumberValue {
return (
fieldValue === null ||
(fieldValue !== undefined && typeof fieldValue === 'number')
);
}
): fieldValue is FieldNumberValue =>
fieldValue === null ||
(fieldValue !== undefined && typeof fieldValue === 'number');

6
front/src/modules/ui/editable-field/types/guards/isFieldPhone.ts
View File

@ -1,8 +1,6 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldPhoneMetadata } from '../FieldMetadata';
export function isFieldPhone(
export const isFieldPhone = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldPhoneMetadata> {
return field.type === 'phone';
}
): field is FieldDefinition<FieldPhoneMetadata> => field.type === 'phone';

13
front/src/modules/ui/editable-field/types/guards/isFieldPhoneValue.ts
View File

@ -1,12 +1,9 @@
import { FieldPhoneValue } from '../FieldMetadata';
// TODO: add yup
export function isFieldPhoneValue(
export const isFieldPhoneValue = (
fieldValue: unknown,
): fieldValue is FieldPhoneValue {
return (
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string'
);
}
): fieldValue is FieldPhoneValue =>
fieldValue !== null &&
fieldValue !== undefined &&
typeof fieldValue === 'string';

7
front/src/modules/ui/editable-field/types/guards/isFieldProbability.ts
View File

@ -1,8 +1,7 @@
import { FieldDefinition } from '../FieldDefinition';
import { FieldMetadata, FieldProbabilityMetadata } from '../FieldMetadata';
export function isFieldProbability(
export const isFieldProbability = (
field: FieldDefinition<FieldMetadata>,
): field is FieldDefinition<FieldProbabilityMetadata> {
return field.type === 'probability';
}
): field is FieldDefinition<FieldProbabilityMetadata> =>
field.type === 'probability';

Some files were not shown because too many files have changed in this diff Show More