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

Add styled component rule (#1261)

Browse Source 
* Add StyledComponent rule

* update doc

* update doc

* update doc
This commit is contained in:
Weiko
2023-08-17 20:58:02 -07:00
committed by GitHub
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/modules/spreadsheet-import/components/ContinueButton.tsx
View File

@ -4,7 +4,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
import { Modal } from '@/ui/modal/components/Modal';
import { CircularProgressBar } from '@/ui/progress-bar/components/CircularProgressBar';
const Footer = styled(Modal.Footer)`
const StyledFooter = styled(Modal.Footer)`
height: 60px;
justify-content: center;
padding: 0px;
@ -12,7 +12,7 @@ const Footer = styled(Modal.Footer)`
padding-right: ${({ theme }) => theme.spacing(30)};
`;
const Button = styled(MainButton)`
const StyledButton = styled(MainButton)`
width: 200px;
`;
@ -27,11 +27,11 @@ export const ContinueButton = ({
title,
isLoading,
}: ContinueButtonProps) => (
<Footer>
<Button
<StyledFooter>
<StyledButton
icon={isLoading && <CircularProgressBar size={16} barWidth={2} />}
title={title}
onClick={!isLoading ? onContinue : undefined}
/>
</Footer>
</StyledFooter>
);

14
front/src/modules/spreadsheet-import/components/Heading.tsx
View File

@ -6,20 +6,20 @@ export type Props = React.ComponentProps<'div'> & {
description?: string;
};
const Container = styled.div`
const StyledContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
`;
const Title = styled.span`
const StyledTitle = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.lg};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
text-align: center;
`;
const Description = styled.span`
const StyledDescription = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
@ -29,9 +29,9 @@ const Description = styled.span`
export function Heading({ title, description, ...props }: Props) {
return (
<Container {...props}>
<Title>{title}</Title>
{description && <Description>{description}</Description>}
</Container>
<StyledContainer {...props}>
<StyledTitle>{title}</StyledTitle>
{description && <StyledDescription>{description}</StyledDescription>}
</StyledContainer>
);
}

18
front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx
View File

@ -25,7 +25,7 @@ import { AppTooltip } from '@/ui/tooltip/AppTooltip';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { useUpdateEffect } from '~/hooks/useUpdateEffect';
const DropdownItem = styled.div`
const StyledDropdownItem = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm};
@ -42,7 +42,7 @@ const DropdownItem = styled.div`
}
`;
const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
const StyledDropdownLabel = styled.span<{ isPlaceholder: boolean }>`
color: ${({ theme, isPlaceholder }) =>
isPlaceholder ? theme.font.color.tertiary : theme.font.color.primary};
display: flex;
@ -53,7 +53,7 @@ const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
padding-right: ${({ theme }) => theme.spacing(1)};
`;
const FloatingDropdown = styled.div`
const StyledFloatingDropdown = styled.div`
z-index: ${({ theme }) => theme.lastLayerZIndex};
`;
@ -147,7 +147,7 @@ export const MatchColumnSelect = ({
return (
<>
<DropdownItem
<StyledDropdownItem
id={name}
ref={(node) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
@ -158,14 +158,14 @@ export const MatchColumnSelect = ({
onClick={handleDropdownItemClick}
>
{renderIcon(value?.icon)}
<DropdownLabel isPlaceholder={!value?.label}>
<StyledDropdownLabel isPlaceholder={!value?.label}>
{value?.label ?? placeholder}
</DropdownLabel>
</StyledDropdownLabel>
<IconChevronDown size={16} color={theme.font.color.tertiary} />
</DropdownItem>
</StyledDropdownItem>
{isOpen &&
createPortal(
<FloatingDropdown ref={refs.setFloating} style={floatingStyles}>
<StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
<DropdownMenu
ref={dropdownContainerRef}
width={dropdownItemRef.current?.clientWidth}
@ -210,7 +210,7 @@ export const MatchColumnSelect = ({
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
</FloatingDropdown>,
</StyledFloatingDropdown>,
document.body,
)}
</>

6
front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx
View File

@ -6,7 +6,7 @@ import { IconButton } from '@/ui/button/components/IconButton';
import { useDialog } from '@/ui/dialog/hooks/useDialog';
import { IconX } from '@/ui/icon/index';
const CloseButtonContainer = styled.div`
const StyledCloseButtonContainer = styled.div`
align-items: center;
aspect-ratio: 1;
display: flex;
@ -39,12 +39,12 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
return (
<>
<CloseButtonContainer>
<StyledCloseButtonContainer>
<IconButton
icon={<IconX size={16} color={theme.font.color.tertiary} />}
onClick={handleClose}
/>
</CloseButtonContainer>
</StyledCloseButtonContainer>
</>
);
};

36
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import type { Columns } from '../MatchColumnsStep';
const GridContainer = styled.div`
const StyledGridContainer = styled.div`
align-items: center;
display: flex;
flex-direction: column;
@ -12,7 +12,7 @@ const GridContainer = styled.div`
width: 100%;
`;
const Grid = styled.div`
const StyledGrid = styled.div`
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
box-sizing: border-box;
@ -26,7 +26,7 @@ type HeightProps = {
height?: `${number}px`;
};
const GridRow = styled.div<HeightProps>`
const StyledGridRow = styled.div<HeightProps>`
box-sizing: border-box;
display: flex;
flex-direction: row;
@ -37,7 +37,7 @@ type PositionProps = {
position: 'left' | 'right';
};
const GridCell = styled.div<PositionProps>`
const StyledGridCell = styled.div<PositionProps>`
align-items: center;
box-sizing: border-box;
display: flex;
@ -59,7 +59,7 @@ const GridCell = styled.div<PositionProps>`
}};
`;
const GridHeader = styled.div<PositionProps>`
const StyledGridHeader = styled.div<PositionProps>`
align-items: center;
background-color: ${({ theme }) => theme.background.tertiary};
box-sizing: border-box;
@ -98,29 +98,31 @@ export const ColumnGrid = <T extends string>({
}: ColumnGridProps<T>) => {
return (
<>
<GridContainer>
<Grid>
<GridRow height="29px">
<GridHeader position="left">Imported data</GridHeader>
<GridHeader position="right">Twenty fields</GridHeader>
</GridRow>
<StyledGridContainer>
<StyledGrid>
<StyledGridRow height="29px">
<StyledGridHeader position="left">Imported data</StyledGridHeader>
<StyledGridHeader position="right">Twenty fields</StyledGridHeader>
</StyledGridRow>
{columns.map((column, index) => {
const userColumn = renderUserColumn(columns, index);
const templateColumn = renderTemplateColumn(columns, index);
if (React.isValidElement(userColumn)) {
return (
<GridRow key={index}>
<GridCell position="left">{userColumn}</GridCell>
<GridCell position="right">{templateColumn}</GridCell>
</GridRow>
<StyledGridRow key={index}>
<StyledGridCell position="left">{userColumn}</StyledGridCell>
<StyledGridCell position="right">
{templateColumn}
</StyledGridCell>
</StyledGridRow>
);
}
return null;
})}
</Grid>
</GridContainer>
</StyledGrid>
</StyledGridContainer>
</>
);
};

10
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx
View File

@ -11,12 +11,12 @@ import type {
MatchedSelectOptionsColumn,
} from '../MatchColumnsStep';
const Container = styled.div`
const StyledContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
`;
const SelectLabel = styled.span`
const StyledSelectLabel = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -40,8 +40,8 @@ export const SubMatchingSelect = <T extends string>({
const value = options.find((opt) => opt.value === option.value);
return (
<Container>
<SelectLabel>{option.entry}</SelectLabel>
<StyledContainer>
<StyledSelectLabel>{option.entry}</StyledSelectLabel>
<MatchColumnSelect
value={value}
placeholder="Select..."
@ -51,6 +51,6 @@ export const SubMatchingSelect = <T extends string>({
options={options}
name={option.entry}
/>
</Container>
</StyledContainer>
);
};

24
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx
View File

@ -18,14 +18,14 @@ import { ColumnType } from '../MatchColumnsStep';
import { SubMatchingSelect } from './SubMatchingSelect';
const Container = styled.div`
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
min-height: 10px;
width: 100%;
`;
const AccordionButton = styled(ChakraAccordionButton)`
const StyledAccordionButton = styled(ChakraAccordionButton)`
align-items: center;
background-color: ${({ theme }) => theme.accent.secondary};
border: none;
@ -46,12 +46,12 @@ const AccordionButton = styled(ChakraAccordionButton)`
}
`;
const AccordionContainer = styled.div`
const StyledAccordionContainer = styled.div`
display: flex;
width: 100%;
`;
const AccordionLabel = styled.span`
const StyledAccordionLabel = styled.span`
color: ${({ theme }) => theme.font.color.primary};
display: flex;
flex: 1;
@ -123,7 +123,7 @@ export const TemplateColumn = <T extends string>({
);
return (
<Container>
<StyledContainer>
<MatchColumnSelect
placeholder="Select column..."
value={isIgnored ? ignoreValue : selectValue}
@ -132,15 +132,15 @@ export const TemplateColumn = <T extends string>({
name={column.header}
/>
{isSelect && (
<AccordionContainer>
<StyledAccordionContainer>
<Accordion allowMultiple width="100%">
<AccordionItem border="none" py={1}>
<AccordionButton data-testid="accordion-button">
<AccordionLabel>
<StyledAccordionButton data-testid="accordion-button">
<StyledAccordionLabel>
{getAccordionTitle<T>(fields, column)}
</AccordionLabel>
</StyledAccordionLabel>
<AccordionIcon as={IconChevronDown} />
</AccordionButton>
</StyledAccordionButton>
<AccordionPanel pb={4} pr={3} display="flex" flexDir="column">
{column.matchedOptions.map((option) => (
<SubMatchingSelect
@ -153,8 +153,8 @@ export const TemplateColumn = <T extends string>({
</AccordionPanel>
</AccordionItem>
</Accordion>
</AccordionContainer>
</StyledAccordionContainer>
)}
</Container>
</StyledContainer>
);
};

14
front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx
View File

@ -5,13 +5,13 @@ import { assertNotNull } from '~/utils/assert';
import type { Column } from '../MatchColumnsStep';
const Container = styled.div`
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
`;
const Value = styled.span`
const StyledValue = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -20,7 +20,7 @@ const Value = styled.span`
white-space: nowrap;
`;
const Example = styled.span`
const StyledExample = styled.span`
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
@ -42,9 +42,9 @@ export const UserTableColumn = <T extends string>({
const entry = entries.find(assertNotNull);
return (
<Container>
<Value>{header}</Value>
{entry && <Example>{`ex: ${entry}`}</Example>}
</Container>
<StyledContainer>
<StyledValue>{header}</StyledValue>
{entry && <StyledExample>{`ex: ${entry}`}</StyledExample>}
</StyledContainer>
);
};

6
front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx
View File

@ -12,7 +12,7 @@ const StyledHeading = styled(Heading)`
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
const TableContainer = styled.div`
const StyledTableContainer = styled.div`
display: flex;
flex-grow: 1;
height: 0px;
@ -42,13 +42,13 @@ export const SelectHeaderStep = ({ data, onContinue }: SelectHeaderProps) => {
<>
<Modal.Content>
<StyledHeading title="Select header row" />
<TableContainer>
<StyledTableContainer>
<SelectHeaderTable
data={data}
selectedRows={selectedRows}
setSelectedRows={setSelectedRows}
/>
</TableContainer>
</StyledTableContainer>
</Modal.Content>
<ContinueButton
onContinue={handleContinue}

12
front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx
View File

@ -7,7 +7,7 @@ import { Radio } from '@/ui/input/radio/components/Radio';
import { RadioGroup } from '@/ui/input/radio/components/RadioGroup';
import { Modal } from '@/ui/modal/components/Modal';
const Content = styled(Modal.Content)`
const StyledContent = styled(Modal.Content)`
align-items: center;
`;
@ -15,7 +15,7 @@ const StyledHeading = styled(Heading)`
margin-bottom: ${({ theme }) => theme.spacing(8)};
`;
const RadioContainer = styled.div`
const StyledRadioContainer = styled.div`
display: flex;
flex-direction: column;
flex-grow: 1;
@ -46,16 +46,16 @@ export const SelectSheetStep = ({
return (
<>
<Content>
<StyledContent>
<StyledHeading title="Select the sheet to use" />
<RadioContainer>
<StyledRadioContainer>
<RadioGroup onValueChange={(value) => setValue(value)} value={value}>
{sheetNames.map((sheetName) => (
<Radio value={sheetName} key={sheetName} />
))}
</RadioGroup>
</RadioContainer>
</Content>
</StyledRadioContainer>
</StyledContent>
<ContinueButton
isLoading={isLoading}
onContinue={() => handleOnContinue(value)}

6
front/src/modules/spreadsheet-import/steps/components/Steps.tsx
View File

@ -8,7 +8,7 @@ import { useStepBar } from '@/ui/step-bar/hooks/useStepBar';
import { UploadFlow } from './UploadFlow';
const Header = styled(Modal.Header)`
const StyledHeader = styled(Modal.Header)`
background-color: ${({ theme }) => theme.background.secondary};
border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
height: 60px;
@ -36,13 +36,13 @@ export const Steps = () => {
return (
<>
<Header>
<StyledHeader>
<StepBar activeStep={activeStep}>
{steps.map((key) => (
<StepBar.Step label={stepTitles[key]} key={key} />
))}
</StepBar>
</Header>
</StyledHeader>
<UploadFlow nextStep={nextStep} />
</>
);

6
front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx
View File

@ -17,7 +17,7 @@ import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep';
import { UploadStep } from './UploadStep/UploadStep';
import { ValidationStep } from './ValidationStep/ValidationStep';
const ProgressBarContainer = styled(Modal.Content)`
const StyledProgressBarContainer = styled(Modal.Content)`
align-items: center;
display: flex;
justify-content: center;
@ -209,13 +209,13 @@ export const UploadFlow = ({ nextStep }: Props) => {
case StepType.loading:
default:
return (
<ProgressBarContainer>
<StyledProgressBarContainer>
<CircularProgressBar
size={80}
barWidth={8}
barColor={theme.font.color.primary}
/>
</ProgressBarContainer>
</StyledProgressBarContainer>
);
}
};

6
front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx
View File

@ -6,7 +6,7 @@ import { Modal } from '@/ui/modal/components/Modal';
import { DropZone } from './components/DropZone';
const Content = styled(Modal.Content)`
const StyledContent = styled(Modal.Content)`
padding: ${({ theme }) => theme.spacing(6)};
`;
@ -27,8 +27,8 @@ export const UploadStep = ({ onContinue }: UploadProps) => {
);
return (
<Content>
<StyledContent>
<DropZone onContinue={handleOnContinue} isLoading={isLoading} />
</Content>
</StyledContent>
);
};

22
front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx
View File

@ -8,7 +8,7 @@ import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
import { MainButton } from '@/ui/button/components/MainButton';
import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
const Container = styled.div`
const StyledContainer = styled.div`
align-items: center;
background: ${({ theme }) => `
repeating-linear-gradient(
@ -55,7 +55,7 @@ const Container = styled.div`
position: relative;
`;
const Overlay = styled.div`
const StyledOverlay = styled.div`
background: ${({ theme }) => theme.background.transparent.medium};
border-radius: ${({ theme }) => theme.border.radius.sm};
bottom: 0px;
@ -65,14 +65,14 @@ const Overlay = styled.div`
top: 0px;
`;
const Text = styled.span`
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
text-align: center;
`;
const Button = styled(MainButton)`
const StyledButton = styled(MainButton)`
margin-top: ${({ theme }) => theme.spacing(2)};
width: 200px;
`;
@ -125,19 +125,19 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
});
return (
<Container {...getRootProps()}>
{isDragActive && <Overlay />}
<StyledContainer {...getRootProps()}>
{isDragActive && <StyledOverlay />}
<input {...getInputProps()} />
{isDragActive ? (
<Text>Drop file here...</Text>
<StyledText>Drop file here...</StyledText>
) : loading || isLoading ? (
<Text>Processing...</Text>
<StyledText>Processing...</StyledText>
) : (
<>
<Text>Upload .xlsx, .xls or .csv file</Text>
<Button onClick={open} title="Select file" />
<StyledText>Upload .xlsx, .xls or .csv file</StyledText>
<StyledButton onClick={open} title="Select file" />
</>
)}
</Container>
</StyledContainer>
);
};

16
front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx
View File

@ -5,21 +5,21 @@ import styled from '@emotion/styled';
import type { Fields } from '@/spreadsheet-import/types';
import { AppTooltip } from '@/ui/tooltip/AppTooltip';
const HeaderContainer = styled.div`
const StyledHeaderContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
position: relative;
`;
const HeaderLabel = styled.span`
const StyledHeaderLabel = styled.span`
display: flex;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
`;
const DefaultContainer = styled.div`
const StyledDefaultContainer = styled.div`
min-height: 100%;
min-width: 100%;
overflow: hidden;
@ -33,8 +33,10 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
name: column.label,
minWidth: 150,
headerRenderer: () => (
<HeaderContainer>
<HeaderLabel id={`${column.key}`}>{column.label}</HeaderLabel>
<StyledHeaderContainer>
<StyledHeaderLabel id={`${column.key}`}>
{column.label}
</StyledHeaderLabel>
{column.description &&
createPortal(
<AppTooltip
@ -44,10 +46,10 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
/>,
document.body,
)}
</HeaderContainer>
</StyledHeaderContainer>
),
formatter: ({ row }) => (
<DefaultContainer>{row[column.key]}</DefaultContainer>
<StyledDefaultContainer>{row[column.key]}</StyledDefaultContainer>
),
}),
);

30
front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx
View File

@ -17,7 +17,7 @@ import { Modal } from '@/ui/modal/components/Modal';
import { generateColumns } from './components/columns';
import type { Meta } from './types';
const Toolbar = styled.div`
const StyledToolbar = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
@ -25,20 +25,20 @@ const Toolbar = styled.div`
margin-top: ${({ theme }) => theme.spacing(8)};
`;
const ErrorToggle = styled.div`
const StyledErrorToggle = styled.div`
align-items: center;
display: flex;
flex-direction: row;
`;
const ErrorToggleDescription = styled.span`
const StyledErrorToggleDescription = styled.span`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
margin-left: ${({ theme }) => theme.spacing(2)};
`;
const ScrollContainer = styled.div`
const StyledScrollContainer = styled.div`
display: flex;
flex-direction: column;
flex-grow: 1;
@ -46,7 +46,7 @@ const ScrollContainer = styled.div`
width: 100%;
`;
const NoRowsContainer = styled.div`
const StyledNoRowsContainer = styled.div`
display: flex;
grid-column: 1/-1;
justify-content: center;
@ -188,16 +188,16 @@ export const ValidationStep = <T extends string>({
title="Review your import"
description="Correct the issues and fill the missing data."
/>
<Toolbar>
<ErrorToggle>
<StyledToolbar>
<StyledErrorToggle>
<Toggle
value={filterByErrors}
onChange={() => setFilterByErrors(!filterByErrors)}
/>
<ErrorToggleDescription>
<StyledErrorToggleDescription>
Show only rows with errors
</ErrorToggleDescription>
</ErrorToggle>
</StyledErrorToggleDescription>
</StyledErrorToggle>
<Button
icon={<IconTrash />}
title="Remove"
@ -205,8 +205,8 @@ export const ValidationStep = <T extends string>({
onClick={deleteSelectedRows}
disabled={selectedRows.size === 0}
/>
</Toolbar>
<ScrollContainer>
</StyledToolbar>
<StyledScrollContainer>
<Table
rowKeyGetter={rowKeyGetter}
rows={tableData}
@ -216,15 +216,15 @@ export const ValidationStep = <T extends string>({
onSelectedRowsChange={setSelectedRows}
components={{
noRowsFallback: (
<NoRowsContainer>
<StyledNoRowsContainer>
{filterByErrors
? 'No data containing errors'
: 'No data found'}
</NoRowsContainer>
</StyledNoRowsContainer>
),
}}
/>
</ScrollContainer>
</StyledScrollContainer>
</Modal.Content>
<ContinueButton onContinue={onContinue} title="Confirm" />
</>

38
front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx
View File

@ -14,21 +14,21 @@ import { AppTooltip } from '@/ui/tooltip/AppTooltip';
import type { Meta } from '../types';
const HeaderContainer = styled.div`
const StyledHeaderContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
position: relative;
`;
const HeaderLabel = styled.span`
const StyledHeaderLabel = styled.span`
display: flex;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
`;
const CheckboxContainer = styled.div`
const StyledCheckboxContainer = styled.div`
align-items: center;
box-sizing: content-box;
display: flex;
@ -39,13 +39,13 @@ const CheckboxContainer = styled.div`
width: 100%;
`;
const ToggleContainer = styled.div`
const StyledToggleContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
`;
const InputContainer = styled.div`
const StyledInputContainer = styled.div`
align-items: center;
display: flex;
min-height: 100%;
@ -53,7 +53,7 @@ const InputContainer = styled.div`
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const DefaultContainer = styled.div`
const StyledDefaultContainer = styled.div`
min-height: 100%;
min-width: 100%;
overflow: hidden;
@ -79,7 +79,7 @@ export const generateColumns = <T extends string>(
const [isRowSelected, onRowSelectionChange] = useRowSelection();
return (
<CheckboxContainer>
<StyledCheckboxContainer>
<Checkbox
aria-label="Select"
checked={isRowSelected}
@ -92,7 +92,7 @@ export const generateColumns = <T extends string>(
});
}}
/>
</CheckboxContainer>
</StyledCheckboxContainer>
);
},
},
@ -103,8 +103,10 @@ export const generateColumns = <T extends string>(
minWidth: 150,
resizable: true,
headerRenderer: () => (
<HeaderContainer>
<HeaderLabel id={`${column.key}`}>{column.label}</HeaderLabel>
<StyledHeaderContainer>
<StyledHeaderLabel id={`${column.key}`}>
{column.label}
</StyledHeaderLabel>
{column.description &&
createPortal(
<AppTooltip
@ -114,7 +116,7 @@ export const generateColumns = <T extends string>(
/>,
document.body,
)}
</HeaderContainer>
</StyledHeaderContainer>
),
editable: column.fieldType.type !== 'checkbox',
editor: ({ row, onRowChange, onClose }) => {
@ -158,7 +160,7 @@ export const generateColumns = <T extends string>(
);
}
return <InputContainer>{component}</InputContainer>;
return <StyledInputContainer>{component}</StyledInputContainer>;
},
editorOptions: {
editOnClick: true,
@ -170,7 +172,7 @@ export const generateColumns = <T extends string>(
switch (column.fieldType.type) {
case 'checkbox':
component = (
<ToggleContainer
<StyledToggleContainer
id={`${columnKey}-${row.__index}`}
onClick={(event) => {
event.stopPropagation();
@ -185,23 +187,23 @@ export const generateColumns = <T extends string>(
});
}}
/>
</ToggleContainer>
</StyledToggleContainer>
);
break;
case 'select':
component = (
<DefaultContainer id={`${columnKey}-${row.__index}`}>
<StyledDefaultContainer id={`${columnKey}-${row.__index}`}>
{column.fieldType.options.find(
(option) => option.value === row[columnKey as T],
)?.label || null}
</DefaultContainer>
</StyledDefaultContainer>
);
break;
default:
component = (
<DefaultContainer id={`${columnKey}-${row.__index}`}>
<StyledDefaultContainer id={`${columnKey}-${row.__index}`}>
{row[columnKey]}
</DefaultContainer>
</StyledDefaultContainer>
);
}