Skip to content

Commit 1d45d25

Browse files
rsanterirsanteri
committed
dev: Move icon definitions to separate file and and new one, more refactor work
1 parent 4626380 commit 1d45d25

File tree

16 files changed

+211
-179
lines changed

16 files changed

+211
-179
lines changed

‎src/assets/chevron.svg

Lines changed: 2 additions & 5 deletions
Loading

‎src/assets/cross.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/components/FilterInput/AutoCompleteFilter.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const AutoCompleteFilter: React.FC<Props> = ({
4242
return (
4343
<Filter
4444
{...props}
45+
onClear={onClear}
4546
content={({ selected, onClose }) => (
4647
<Content>
4748
<FilterPopupHeading>

‎src/components/FilterInput/Filter.tsx

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,13 @@ export type FilterProps = {
77
label: string;
88
labelRenderer?: (label: string, value?: string | null) => React.ReactNode;
99
onSelect?: (k: string) => void;
10+
onClear?: () => void;
1011
value?: string | null;
1112
content: (props: { onSelect?: (k: string) => void; selected: string[]; onClose: () => void }) => React.ReactNode;
1213
'data-testid'?: string;
1314
};
1415

15-
const Filter: React.FC<FilterProps> = ({ label, labelRenderer, value = '', onSelect, content, ...rest }) => {
16+
const Filter: React.FC<FilterProps> = ({ label, labelRenderer, value = '', onSelect, onClear, content, ...rest }) => {
1617
const [filterWindowOpen, setFilterWindowOpen] = useState(false);
1718
const selected = value?.split(',').filter((item) => item) || [];
1819

@@ -29,7 +30,20 @@ const Filter: React.FC<FilterProps> = ({ label, labelRenderer, value = '', onSel
2930
>
3031
{labelRenderer ? labelRenderer(label, value) : DefaultLabelRenderer(label, value)}
3132
<FilterIcon>
32-
<Icon name="chevron" size="xs" rotate={filterWindowOpen ? -180 : 0} />
33+
{value && onClear ? (
34+
<span
35+
onClick={(event) => {
36+
event.stopPropagation();
37+
event.preventDefault();
38+
onClear();
39+
close();
40+
}}
41+
>
42+
<Icon name="cross" size="sm" />
43+
</span>
44+
) : (
45+
<Icon name="chevron" size="sm" rotate={filterWindowOpen ? -180 : 0} />
46+
)}
3347
</FilterIcon>
3448
</FilterButton>
3549
{filterWindowOpen && <FilterPopup onClose={close}>{content({ onSelect, selected, onClose: close })}</FilterPopup>}
@@ -51,21 +65,24 @@ const FilterBase = styled.div`
5165
`;
5266

5367
const FilterButton = styled.div`
54-
padding: 0.375rem 0.5rem;
68+
padding: 0rem 0.5rem;
5569
border: var(--input-border);
5670
border-radius: var(--radius-primary);
5771
color: var(--input-text-color);
72+
min-height: 1.75rem;
5873
cursor: pointer;
5974
display: flex;
6075
align-items: center;
6176
font-size: var(--font-size-primary);
77+
line-height: 1;
6278
overflow: hidden;
6379
`;
6480

6581
const FilterIcon = styled.div`
6682
margin-left: 0.375rem;
6783
display: flex;
6884
align-items: center;
85+
color: #6a6867;
6986
`;
7087

7188
const SelectedValue = styled.div`

‎src/components/FilterInput/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ import AutoComplete from '@components/AutoComplete';
1313
import { InputLabel } from '@components/Form/InputLabel';
1414
import InputTip from '@components/Form/InputTip';
1515
import InputWrapper from '@components/Form/InputWrapper';
16-
import Icon, { IconKeys, IconSizes } from '@components/Icon';
16+
import Icon, { IconKeys } from '@components/Icon';
17+
import { IconSizes } from '@components/Icon/icon-size';
1718
import useAutoComplete, { AutoCompleteItem } from '@hooks/useAutoComplete';
1819

1920
//

‎src/components/Icon/icon-size.tsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export type SupportedSizes = {
2+
xs: number;
3+
sm: number;
4+
md: number;
5+
lg: number;
6+
hg: number;
7+
};
8+
9+
export type IconSizes = keyof SupportedSizes;
10+
11+
export const sizeTable: SupportedSizes = {
12+
xs: 0.75,
13+
sm: 1,
14+
md: 1.5,
15+
lg: 2,
16+
hg: 2.5,
17+
};

‎src/components/Icon/icons.tsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { ReactComponent as ArrowPointTop } from '@assets/arrow-point-up.svg';
2+
import { ReactComponent as Arrow } from '@assets/arrow.svg';
3+
import { ReactComponent as ArrowDown } from '@assets/arrow_down.svg';
4+
import { ReactComponent as Calendar } from '@assets/calendar.svg';
5+
import { ReactComponent as CaretDown } from '@assets/caret_down.svg';
6+
import { ReactComponent as Check } from '@assets/check.svg';
7+
import { ReactComponent as Chevron } from '@assets/chevron.svg';
8+
import { ReactComponent as Collapse } from '@assets/collapse.svg';
9+
import { ReactComponent as Completed } from '@assets/completed.svg';
10+
import { ReactComponent as Copy } from '@assets/copy.svg';
11+
import { ReactComponent as Cross } from '@assets/cross.svg';
12+
import { ReactComponent as Danger } from '@assets/danger.svg';
13+
import { ReactComponent as Download } from '@assets/download.svg';
14+
import { ReactComponent as Ellipsis } from '@assets/ellipsis.svg';
15+
import { ReactComponent as Enter } from '@assets/enter.svg';
16+
import { ReactComponent as Error } from '@assets/error.svg';
17+
import { ReactComponent as Expand } from '@assets/expand.svg';
18+
import { ReactComponent as External } from '@assets/external.svg';
19+
import { ReactComponent as InfoSmall } from '@assets/info-small.svg';
20+
import { ReactComponent as Info } from '@assets/info.svg';
21+
import { ReactComponent as InfoThick } from '@assets/info_thick.svg';
22+
import { ReactComponent as Link } from '@assets/link.svg';
23+
import { ReactComponent as ListItemNotFound } from '@assets/list-item-not-found.svg';
24+
import { ReactComponent as ListNotFound } from '@assets/list-not-found.svg';
25+
import { ReactComponent as Listing } from '@assets/listing.svg';
26+
import { ReactComponent as Maximize } from '@assets/maximize.svg';
27+
import { ReactComponent as Minus } from '@assets/minus.svg';
28+
import { ReactComponent as NoDag } from '@assets/no-dag.svg';
29+
import { ReactComponent as NoData } from '@assets/no-data.svg';
30+
import { ReactComponent as Pen } from '@assets/pen.svg';
31+
import { ReactComponent as Pending } from '@assets/pending.svg';
32+
import { ReactComponent as Plugin } from '@assets/plugin.svg';
33+
import { ReactComponent as Plus } from '@assets/plus.svg';
34+
import { ReactComponent as QuestionCircled } from '@assets/question-circled.svg';
35+
import { ReactComponent as Return } from '@assets/return.svg';
36+
import { ReactComponent as RowLoader } from '@assets/row-loader.svg';
37+
import { ReactComponent as Running } from '@assets/running.svg';
38+
import { ReactComponent as SearchNotFound } from '@assets/search-not-found.svg';
39+
import { ReactComponent as Search } from '@assets/search.svg';
40+
import { ReactComponent as Sort } from '@assets/sort.svg';
41+
import { ReactComponent as Success } from '@assets/success.svg';
42+
import { ReactComponent as Tag } from '@assets/tag.svg';
43+
import { ReactComponent as Timeline } from '@assets/timeline.svg';
44+
import { ReactComponent as Times } from '@assets/times.svg';
45+
import { ReactComponent as ToTopArrow } from '@assets/to_top_arrow.svg';
46+
import { ReactComponent as Trash } from '@assets/trash.svg';
47+
import { ReactComponent as Warning } from '@assets/warning.svg';
48+
import { ReactComponent as WarningThick } from '@assets/warning_thick.svg';
49+
50+
export const icons = {
51+
arrow: Arrow,
52+
arrowDown: ArrowDown,
53+
arrowPointTop: ArrowPointTop,
54+
calendar: Calendar,
55+
caretDown: CaretDown,
56+
check: Check,
57+
chevron: Chevron,
58+
cross: Cross,
59+
collapse: Collapse,
60+
completed: Completed,
61+
copy: Copy,
62+
danger: Danger,
63+
download: Download,
64+
ellipsis: Ellipsis,
65+
enter: Enter,
66+
error: Error,
67+
expand: Expand,
68+
external: External,
69+
info: Info,
70+
infoSmall: InfoSmall,
71+
infoThick: InfoThick,
72+
link: Link,
73+
listing: Listing,
74+
listItemNotFound: ListItemNotFound,
75+
listNotFound: ListNotFound,
76+
maximize: Maximize,
77+
minus: Minus,
78+
noDag: NoDag,
79+
noData: NoData,
80+
pen: Pen,
81+
pending: Pending,
82+
plugin: Plugin,
83+
plus: Plus,
84+
questionCircled: QuestionCircled,
85+
return: Return,
86+
rowLoader: RowLoader,
87+
running: Running,
88+
search: Search,
89+
searchNotFound: SearchNotFound,
90+
sort: Sort,
91+
success: Success,
92+
tag: Tag,
93+
timeline: Timeline,
94+
times: Times,
95+
trash: Trash,
96+
toTopArrow: ToTopArrow,
97+
warning: Warning,
98+
warningThick: WarningThick,
99+
};

‎src/components/Icon/index.tsx

Lines changed: 2 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,12 @@
11
import React from 'react';
22
import styled, { css, keyframes } from 'styled-components';
3-
import { ReactComponent as ArrowPointTop } from '@assets/arrow-point-up.svg';
4-
import { ReactComponent as Arrow } from '@assets/arrow.svg';
5-
import { ReactComponent as ArrowDown } from '@assets/arrow_down.svg';
6-
import { ReactComponent as Calendar } from '@assets/calendar.svg';
7-
import { ReactComponent as CaretDown } from '@assets/caret_down.svg';
8-
import { ReactComponent as Check } from '@assets/check.svg';
9-
import { ReactComponent as Chevron } from '@assets/chevron.svg';
10-
import { ReactComponent as Collapse } from '@assets/collapse.svg';
11-
import { ReactComponent as Completed } from '@assets/completed.svg';
12-
import { ReactComponent as Copy } from '@assets/copy.svg';
13-
import { ReactComponent as Danger } from '@assets/danger.svg';
14-
import { ReactComponent as Download } from '@assets/download.svg';
15-
import { ReactComponent as Ellipsis } from '@assets/ellipsis.svg';
16-
import { ReactComponent as Enter } from '@assets/enter.svg';
17-
import { ReactComponent as Error } from '@assets/error.svg';
18-
import { ReactComponent as Expand } from '@assets/expand.svg';
19-
import { ReactComponent as External } from '@assets/external.svg';
20-
import { ReactComponent as InfoSmall } from '@assets/info-small.svg';
21-
import { ReactComponent as Info } from '@assets/info.svg';
22-
import { ReactComponent as InfoThick } from '@assets/info_thick.svg';
23-
import { ReactComponent as Link } from '@assets/link.svg';
24-
import { ReactComponent as ListItemNotFound } from '@assets/list-item-not-found.svg';
25-
import { ReactComponent as ListNotFound } from '@assets/list-not-found.svg';
26-
import { ReactComponent as Listing } from '@assets/listing.svg';
27-
import { ReactComponent as Maximize } from '@assets/maximize.svg';
28-
import { ReactComponent as Minus } from '@assets/minus.svg';
29-
import { ReactComponent as NoDag } from '@assets/no-dag.svg';
30-
import { ReactComponent as NoData } from '@assets/no-data.svg';
31-
import { ReactComponent as Pen } from '@assets/pen.svg';
32-
import { ReactComponent as Pending } from '@assets/pending.svg';
33-
import { ReactComponent as Plugin } from '@assets/plugin.svg';
34-
import { ReactComponent as Plus } from '@assets/plus.svg';
35-
import { ReactComponent as QuestionCircled } from '@assets/question-circled.svg';
36-
import { ReactComponent as Return } from '@assets/return.svg';
37-
import { ReactComponent as RowLoader } from '@assets/row-loader.svg';
38-
import { ReactComponent as Running } from '@assets/running.svg';
39-
import { ReactComponent as SearchNotFound } from '@assets/search-not-found.svg';
40-
import { ReactComponent as Search } from '@assets/search.svg';
41-
import { ReactComponent as Sort } from '@assets/sort.svg';
42-
import { ReactComponent as Success } from '@assets/success.svg';
43-
import { ReactComponent as Tag } from '@assets/tag.svg';
44-
import { ReactComponent as Timeline } from '@assets/timeline.svg';
45-
import { ReactComponent as Times } from '@assets/times.svg';
46-
import { ReactComponent as ToTopArrow } from '@assets/to_top_arrow.svg';
47-
import { ReactComponent as Trash } from '@assets/trash.svg';
48-
import { ReactComponent as Warning } from '@assets/warning.svg';
49-
import { ReactComponent as WarningThick } from '@assets/warning_thick.svg';
50-
51-
const icons = {
52-
arrow: Arrow,
53-
arrowDown: ArrowDown,
54-
arrowPointTop: ArrowPointTop,
55-
calendar: Calendar,
56-
caretDown: CaretDown,
57-
check: Check,
58-
chevron: Chevron,
59-
collapse: Collapse,
60-
completed: Completed,
61-
copy: Copy,
62-
danger: Danger,
63-
download: Download,
64-
ellipsis: Ellipsis,
65-
enter: Enter,
66-
error: Error,
67-
expand: Expand,
68-
external: External,
69-
info: Info,
70-
infoSmall: InfoSmall,
71-
infoThick: InfoThick,
72-
link: Link,
73-
listing: Listing,
74-
listItemNotFound: ListItemNotFound,
75-
listNotFound: ListNotFound,
76-
maximize: Maximize,
77-
minus: Minus,
78-
noDag: NoDag,
79-
noData: NoData,
80-
pen: Pen,
81-
pending: Pending,
82-
plugin: Plugin,
83-
plus: Plus,
84-
questionCircled: QuestionCircled,
85-
return: Return,
86-
rowLoader: RowLoader,
87-
running: Running,
88-
search: Search,
89-
searchNotFound: SearchNotFound,
90-
sort: Sort,
91-
success: Success,
92-
tag: Tag,
93-
timeline: Timeline,
94-
times: Times,
95-
trash: Trash,
96-
toTopArrow: ToTopArrow,
97-
warning: Warning,
98-
warningThick: WarningThick,
99-
};
3+
import { sizeTable, SupportedSizes } from '@components/Icon/icon-size';
4+
import { icons } from '@components/Icon/icons';
1005

1016
export type SupportedIcons = typeof icons;
1027

1038
export type IconKeys = keyof SupportedIcons;
1049

105-
type SupportedSizes = {
106-
xs: number;
107-
sm: number;
108-
md: number;
109-
lg: number;
110-
hg: number;
111-
};
112-
113-
export type IconSizes = keyof SupportedSizes;
114-
115-
const sizeTable: SupportedSizes = {
116-
xs: 0.75,
117-
sm: 1,
118-
md: 1.5,
119-
lg: 2,
120-
hg: 2.5,
121-
};
12210
interface IconProps {
12311
name: keyof SupportedIcons;
12412
size?: keyof SupportedSizes;

‎src/components/Tooltip/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Tooltip: React.FC<TooltipProps> = ({ children, ...props }) => {
1717
<ReactTooltip
1818
className="custom-tooltip"
1919
delayHide={250}
20+
delayShow={25}
2021
place="bottom"
2122
effect="solid"
2223
arrowColor="transparent"

0 commit comments

Comments
 (0)