yolokube/dashboard
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove "selected" from select.tsx

Browse source
This commit is contained in:
Bastian Meissner 2021-11-26 21:06:15 +01:00
parent 30657f04d3
commit a24579420a
2 changed files with 50 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/components/select.tsx
View file

@ -1,4 +1,4 @@
import React from "react";
import React, { useState } from "react";
import styled from "styled-components";
export interface IItemProps {
@ -19,51 +19,58 @@ const List = styled.select`
padding: 0.5rem;
`;
const update = (
items: Array<IItemProps>,
onChange: (item: any) => void,
e: React.ChangeEvent<HTMLSelectElement>,
) => {
onChange(items.find((item) => item.value.toString() === e.target.value));
};
const Select = ({
items,
onChange,
current,
className,
testId,
}: ISelectProps) => (
<List
data-testid={"select" + (testId ? "-" + testId : "")}
onChange={(e) => update(items, onChange, e)}
className={className}
>
{items.map(({ label, value }, index) => {
if (label === current) {
return (
<option
data-testid={"option-" + (testId ? testId + "-" : "") + index}
key={[label, index].join("")}
value={value.toString()}
selected
>
{label}
</option>
);
} else {
return (
<option
data-testid={"option-" + (testId ? testId + "-" : "") + index}
key={[label, index].join("")}
value={value.toString()}
>
{label}
</option>
);
}
})}
</List>
);
}: ISelectProps) => {
const [selected, setSelected] = useState<string | undefined>(current);
const update = (
items: Array<IItemProps>,
onChange: (item: any) => void,
event: React.ChangeEvent<HTMLSelectElement>,
) => {
setSelected(event.target.value);
onChange(
items.find((item) => item.value.toString() === event.target.value),
);
};
return (
<List
data-testid={"select" + (testId ? `-${testId}` : "")}
onChange={(e) => update(items, onChange, e)}
className={className}
value={selected}
>
{items.map(({ label, value }, index) => {
if (label === current) {
return (
<option
data-testid={"option-" + (testId ? `${testId}-` : "") + index}
key={[label, index].join("")}
value={value.toString()}
>
{label}
</option>
);
} else {
return (
<option
data-testid={"option-" + (testId ? `${testId}-` : "") + index}
key={[label, index].join("")}
value={value.toString()}
>
{label}
</option>
);
}
})}
</List>
);
};
export default Select;

4
src/components/settings.tsx
View file

@ -101,8 +101,8 @@ const Settings = ({ themes, search }: ISettingsProps) => {
const [newLightTheme, setNewLightTheme] = useState<IThemeProps>();
const [newDarkTheme, setNewDarkTheme] = useState<IThemeProps>();
const currentLightTheme = getTheme("light").label;
const currentDarkTheme = getTheme("dark").label;
const currentLightTheme = getTheme("light").value;
const currentDarkTheme = getTheme("dark").value;
if (themes || search) {
return (