Add styled component rule (#1261)
* Add StyledComponent rule * update doc * update doc * update doc
This commit is contained in:
Weiko
@ -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" />
|
||||
</>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user