Skip to content

Commit

Permalink
use native select element
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chakravarthy7102
Chakravarthy7102 committed Feb 14, 2024
1 parent 3505385 commit acb8fa7
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 100 deletions.
10 changes: 5 additions & 5 deletions build/asset-manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
"static/media/ST_icon_light_theme.svg": "/static/media/ST_icon_light_theme.svg",
"static/media/ST_full_logo_dark_theme.svg": "/static/media/ST_full_logo_dark_theme.svg",
"static/media/secuity-key.svg": "/static/media/secuity-key.svg",
"static/media/ST_full_logo_light_theme.svg": "/static/media/ST_full_logo_light_theme.svg",
"static/media/refresh.svg": "/static/media/refresh.svg",
"static/media/ST_full_logo_light_theme.svg": "/static/media/ST_full_logo_light_theme.svg",
"static/media/ST_icon_dark_theme.svg": "/static/media/ST_icon_dark_theme.svg",
"static/media/auth-method.svg": "/static/media/auth-method.svg",
"static/media/logo.svg": "/static/media/logo.svg",
Expand All @@ -20,19 +20,19 @@
"static/media/email.svg": "/static/media/email.svg",
"static/media/user-managment.svg": "/static/media/user-managment.svg",
"static/media/lock.svg": "/static/media/lock.svg",
"static/media/provider-apple.svg": "/static/media/provider-apple.svg",
"static/media/checkmark-green.svg": "/static/media/checkmark-green.svg",
"static/media/plus.svg": "/static/media/plus.svg",
"static/media/green-check.svg": "/static/media/green-check.svg",
"static/media/clear.svg": "/static/media/clear.svg",
"static/media/provider-apple.svg": "/static/media/provider-apple.svg",
"static/media/search.png": "/static/media/search.png",
"static/media/provider-google.svg": "/static/media/provider-google.svg",
"static/media/phone-no.svg": "/static/media/phone-no.svg",
"static/media/provider-google.svg": "/static/media/provider-google.svg",
"static/media/no-users-graphic.svg": "/static/media/no-users-graphic.svg",
"static/media/unlink-login-method.png": "/static/media/unlink-login-method.png",
"static/media/eye-stroke.svg": "/static/media/eye-stroke.svg",
"static/media/mail-opened.svg": "/static/media/mail-opened.svg",
"static/media/people-restricted.svg": "/static/media/people-restricted.svg",
"static/media/mail-opened.svg": "/static/media/mail-opened.svg",
"static/media/form-field-error-icon.svg": "/static/media/form-field-error-icon.svg",
"static/media/provider-github.svg": "/static/media/provider-github.svg",
"static/media/edit-login-method.png": "/static/media/edit-login-method.png",
Expand Down Expand Up @@ -68,8 +68,8 @@
"static/media/Union-yellow.png": "/static/media/Union-yellow.png",
"static/media/Union.png": "/static/media/Union.png",
"static/media/checkmark-yellow.svg": "/static/media/checkmark-yellow.svg",
"static/media/cross.svg": "/static/media/cross.svg",
"static/media/spinner.svg": "/static/media/spinner.svg",
"static/media/cross.svg": "/static/media/cross.svg",
"static/media/triangle-down.svg": "/static/media/triangle-down.svg",
"main.css.map": "/static/css/main.css.map",
"bundle.js.map": "/static/js/bundle.js.map",
Expand Down
2 changes: 1 addition & 1 deletion build/static/css/main.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/static/css/main.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/static/js/bundle.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion build/static/js/bundle.js.map
View file

Large diffs are not rendered by default.

63 changes: 24 additions & 39 deletions src/ui/components/select/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
import { useState } from "react";
import { ReactComponent as ArrowDown } from "../../../assets/arrow-down.svg";

import "./select.scss";

type SelectProps = {
Expand All @@ -9,42 +6,30 @@ type SelectProps = {
onOptionSelect: (value: string) => void;
};
export default function Select({ onOptionSelect, options, selectedOption }: SelectProps) {
const [showOptions, setShowOptions] = useState(false);
function handleChange(e: React.ChangeEvent<HTMLSelectElement>) {
const selectedOption = options.find((option) => option.value === e.currentTarget.value)!;
onOptionSelect(selectedOption.value);
}
return (
<div
className="select-container"
onMouseLeave={() => setShowOptions(false)}
onMouseEnter={() => setShowOptions(true)}
// this code make sure that the select options show up in the mobile view
// since there will be no onMouseEnter event there.
onClick={() => setShowOptions(true)}>
<div className="select-action">
{selectedOption === undefined ? "Please select" : selectedOption}{" "}
<ArrowDown
color="#000"
style={{ rotate: showOptions ? "180deg" : undefined }}
/>
</div>
{showOptions ? (
<div className="select-dropdown-wrapper">
<div className="select-dropdown">
{options.map((option) => {
return (
<div
className="select-item"
key={option.value}
onClick={(e) => {
e.stopPropagation();
onOptionSelect(option.value);
setShowOptions(false);
}}>
{option.name}
</div>
);
})}
</div>
</div>
) : null}
</div>
<select
className="st-select"
onChange={handleChange}>
<option
disabled
selected={selectedOption === undefined}>
Please select
</option>
{options.map((option) => {
const isSelected = option.value === selectedOption;
return (
<option
selected={isSelected}
value={option.value}
key={option.value}>
{option.name}
</option>
);
})}
</select>
);
}
65 changes: 13 additions & 52 deletions src/ui/components/select/select.scss
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,17 @@
.select-container {
position: relative;
cursor: pointer;
.st-select {
outline: none;

.select-action {
display: flex;
width: 210px;
height: 36px;
padding: 9px 13px;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-shrink: 0;
width: 210px;
height: 36px;
padding: 9px 13px;

border-radius: 6px;
border: 1px solid #e5e5e5;
background: #fff;
border-radius: 6px;
border: 1px solid #e5e5e5;
background: #fff;

color: #222;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.select-dropdown-wrapper {
padding-top: 5px;
top: 36px;
z-index: 5;
position: absolute;
width: 100%;
max-height: 150px;
overflow: auto;
box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16);

.select-dropdown {
background: #fff;
border-radius: 6px;
background: #fff;

.select-item {
cursor: pointer;
padding: 12px;
color: #222;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;

&:hover {
background: #f0f0f0;
width: 100%;
}
}
}
}
color: #222;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

0 comments on commit acb8fa7

Please sign in to comment.