Skip to content

Commit 0bb2e51

Browse files
thesocialdevthesocialdev
authored
Merge pull request #1792 from AletheiaFact/migrate-selects
Migrate Select Components
2 parents 61a0b99 + 2d966f5 commit 0bb2e51

File tree

2 files changed

+128
-81
lines changed

2 files changed

+128
-81
lines changed

‎src/components/Form/ClaimReviewSelect.tsx‎

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import { Select } from "antd";
21
import React, { useContext, useEffect, useState } from "react";
32
import styled from "styled-components";
43
import { useAppSelector } from "../../store/store";
54
import colors from "../../styles/colors";
65
import ClassificationText from "../ClassificationText";
76
import ClassificationModal from "./ClassificationModal";
87
import { VisualEditorContext } from "../Collaborative/VisualEditorProvider";
9-
10-
const { Option } = Select;
8+
import { MenuItem, Select, FormControl } from "@mui/material";
119

1210
export const SelectInput = styled(Select)`
1311
background: ${colors.white};
@@ -16,25 +14,23 @@ export const SelectInput = styled(Select)`
1614
border: none;
1715
height: 40px;
1816
width: 100%;
17+
padding: 10px;
1918
20-
.ant-select-selector {
21-
background: none !important;
22-
border: none !important;
23-
top: 6px;
24-
.ant-select-selection-item {
25-
color: ${colors.blackSecondary};
26-
}
27-
}
19+
.MuiSelect-select {
20+
background: none !important;
21+
color: ${colors.blackSecondary};
22+
padding: 0 !important;
23+
}
2824
29-
.ant-select-selection-placeholder {
30-
color: ${colors.blackSecondary};
31-
}
25+
.MuiOutlinedInput-notchedOutline {
26+
border: none !important;
27+
}
3228
3329
::placeholder {
3430
color: ${colors.blackSecondary};
3531
}
3632
37-
:focus {
33+
:focus .MuiOutlinedInput-notchedOutline {
3834
border: none;
3935
box-shadow: 0px 2px 2px ${colors.shadow};
4036
}
@@ -43,7 +39,7 @@ export const SelectInput = styled(Select)`
4339
border: none;
4440
}
4541
46-
:hover {
42+
:hover .MuiOutlinedInput-notchedOutline {
4743
border: none;
4844
}
4945
`;
@@ -57,11 +53,11 @@ const ClaimReviewSelect = ({
5753
}) => {
5854
const { vw } = useAppSelector((state) => state);
5955
const [open, setOpen] = useState(false);
60-
const [value, setValue] = useState(defaultValue);
56+
const [value, setValue] = useState(defaultValue || "");
6157
const { editorConfiguration } = useContext(VisualEditorContext);
6258

6359
const onChangeSelect = (e) => {
64-
setValue(e);
60+
setValue(e.target.value);
6561
};
6662

6763
useEffect(() => {
@@ -84,47 +80,49 @@ const ClaimReviewSelect = ({
8480

8581
return (
8682
<>
87-
<SelectInput
88-
type={type}
89-
onChange={onChangeSelect}
90-
onClick={handleOnClick}
91-
value={value}
92-
disabled={editorConfiguration?.readonly}
93-
data-cy={"testClassificationText"}
94-
dropdownStyle={vw?.sm && { display: "none" }}
95-
style={style}
96-
>
97-
<Option value="" disabled>
98-
{placeholder}
99-
</Option>
100-
<Option value="not-fact">
101-
<ClassificationText classification="not-fact" />
102-
</Option>
103-
<Option value="trustworthy">
104-
<ClassificationText classification="trustworthy" />
105-
</Option>
106-
<Option value="trustworthy-but">
107-
<ClassificationText classification="trustworthy-but" />
108-
</Option>
109-
<Option value="arguable">
110-
<ClassificationText classification="arguable" />
111-
</Option>
112-
<Option value="misleading">
113-
<ClassificationText classification="misleading" />
114-
</Option>
115-
<Option value="false">
116-
<ClassificationText classification="false" />
117-
</Option>
118-
<Option value="unsustainable">
119-
<ClassificationText classification="unsustainable" />
120-
</Option>
121-
<Option value="exaggerated">
122-
<ClassificationText classification="exaggerated" />
123-
</Option>
124-
<Option value="unverifiable">
125-
<ClassificationText classification="unverifiable" />
126-
</Option>
127-
</SelectInput>
83+
<FormControl fullWidth>
84+
<SelectInput
85+
type={type}
86+
onChange={onChangeSelect}
87+
onClick={handleOnClick}
88+
value={value}
89+
disabled={editorConfiguration?.readonly}
90+
data-cy={"testClassificationText"}
91+
dropdownStyle={vw?.sm && { display: "none" }}
92+
style={style}
93+
>
94+
<MenuItem value="" disabled>
95+
{placeholder}
96+
</MenuItem>
97+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="not-fact">
98+
<ClassificationText classification="not-fact" />
99+
</MenuItem>
100+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="trustworthy">
101+
<ClassificationText classification="trustworthy" />
102+
</MenuItem>
103+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="trustworthy-but">
104+
<ClassificationText classification="trustworthy-but" />
105+
</MenuItem>
106+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="arguable">
107+
<ClassificationText classification="arguable" />
108+
</MenuItem>
109+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="misleading">
110+
<ClassificationText classification="misleading" />
111+
</MenuItem>
112+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="false">
113+
<ClassificationText classification="false" />
114+
</MenuItem>
115+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="unsustainable">
116+
<ClassificationText classification="unsustainable" />
117+
</MenuItem>
118+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="exaggerated">
119+
<ClassificationText classification="exaggerated" />
120+
</MenuItem>
121+
<MenuItem sx={{ fontFamily: "open-sans, sans-serif" }} value="unverifiable">
122+
<ClassificationText classification="unverifiable" />
123+
</MenuItem>
124+
</SelectInput>
125+
</FormControl>
128126
<ClassificationModal
129127
open={open}
130128
value={value}

‎src/components/Header/SelectLanguage.tsx‎

Lines changed: 71 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,51 @@
1-
import { Select, Switch } from "antd";
21
import ReactCountryFlag from "react-country-flag";
32
import Cookies from "js-cookie";
43
import React, { useLayoutEffect, useState } from "react";
54
import styled from "styled-components";
5+
import { Select, MenuItem, Switch } from "@mui/material";
66
import colors from "../../styles/colors";
77
import { useAppSelector } from "../../store/store";
88
import { NameSpaceEnum } from "../../types/Namespace";
99
import { useAtom } from "jotai";
1010
import { currentNameSpace } from "../../atoms/namespace";
1111

12-
const { Option } = Select;
1312

1413
const SelectInput = styled(Select)`
15-
.ant-select-selection-item {
14+
.MuiOutlinedInput-notchedOutline {
15+
border: none;
16+
}
17+
18+
.MuiSelect-select {
1619
display: flex;
1720
align-items: center;
1821
}
1922
20-
.ant-select-arrow {
23+
.MuiSvgIcon-root {
2124
color: ${colors.white};
2225
font-size: 0.8rem;
2326
}
2427
`;
2528

26-
const SwitchInputStyle = styled(Switch)`
29+
const StyledSwitch = styled(Switch)`
30+
.MuiSwitch-switchBase {
31+
padding: 6px;
32+
}
33+
34+
MuiSwitch-thumb {
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
background-color: ${colors.white};
39+
border-radius: 50%;
40+
}
41+
42+
.MuiSwitch-track {
43+
border-radius: 22px;
2744
background-color: ${({ namespace }) =>
28-
namespace === NameSpaceEnum.Main
29-
? colors.primary
30-
: colors.secondary};
45+
namespace === NameSpaceEnum.Main ? colors.secondary : colors.primary};
46+
opacity: 1;
47+
height: 18px;
48+
}
3149
`;
3250

3351
const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
@@ -61,21 +79,23 @@ const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
6179
bordered={false}
6280
showArrow={true}
6381
value={language}
82+
onChange={(e) => setDefaultLanguage(e.target.value as string)}
6483
onSelect={setDefaultLanguage}
6584
data-cy={props.dataCy}
85+
loading={switchLoading}
6686
>
67-
<Option value="pt" data-cy="testLanguagePt">
87+
<MenuItem value="pt" data-cy="testLanguagePt">
6888
<ReactCountryFlag
6989
countryCode="BR"
70-
style={{ fontSize: "20px", paddingTop: "6px" }}
90+
style={{ fontSize: "18px", borderRadius: "50%" }}
7191
/>
72-
</Option>
73-
<Option value="en" data-cy="testLanguageEn">
92+
</MenuItem>
93+
<MenuItem value="en" data-cy="testLanguageEn">
7494
<ReactCountryFlag
7595
countryCode="GB"
76-
style={{ fontSize: "20px", paddingTop: "6px" }}
96+
style={{ fontSize: "18px", borderRadius: "50%" }}
7797
/>
78-
</Option>
98+
</MenuItem>
7999
</SelectInput>
80100
)}
81101
{vw?.xs && (
@@ -90,15 +110,44 @@ const SelectLanguage = (props: { defaultLanguage; dataCy }) => {
90110
<span style={{ fontSize: 10 }}>
91111
{language === "pt" ? "BR" : "EN"}
92112
</span>
93-
<SwitchInputStyle
94-
checkedChildren={<ReactCountryFlag countryCode="BR" />}
95-
unCheckedChildren={
96-
<ReactCountryFlag countryCode="GB" />
97-
}
98-
defaultChecked={language === "pt"}
99-
onChange={onChangeSwitch}
100-
loading={switchLoading}
113+
<StyledSwitch
114+
checked={language === "pt"}
115+
onChange={(e) => onChangeSwitch(e.target.checked)}
101116
namespace={nameSpaceProp}
117+
icon={
118+
<ReactCountryFlag
119+
countryCode="GB"
120+
style={{
121+
fontSize: "16px",
122+
paddingTop: "6px",
123+
borderRadius: "50%",
124+
backgroundColor: colors.white,
125+
width: "24px",
126+
height: "24px",
127+
display: "flex",
128+
alignItems: "center",
129+
justifyContent: "center",
130+
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
131+
}}
132+
/>
133+
}
134+
checkedIcon={
135+
<ReactCountryFlag
136+
countryCode="BR"
137+
style={{
138+
fontSize: "16px",
139+
paddingTop: "6px",
140+
borderRadius: "50%",
141+
backgroundColor: colors.white,
142+
width: "24px",
143+
height: "24px",
144+
display: "flex",
145+
alignItems: "center",
146+
justifyContent: "center",
147+
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)",
148+
}}
149+
/>
150+
}
102151
/>
103152
</div>
104153
)}

0 commit comments

Comments
 (0)