130 lines
No EOL
3.5 KiB
TypeScript
130 lines
No EOL
3.5 KiB
TypeScript
import {Setting, useSettingsStore} from "../../store/settingsStore";
|
|
import {ChangeEvent} from "react";
|
|
import styled, {useTheme} from "styled-components";
|
|
import {IconComponent} from "../../const/buttons/icons";
|
|
import {buttonNames} from "../../const/buttons/names";
|
|
import SettingSelect from "./SettingSelect";
|
|
import {MainButton} from "../UI/buttons/mainButton";
|
|
|
|
const SettingBlock = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 24px;
|
|
margin-bottom: 18px;
|
|
font-size: 18px;
|
|
width: 90%;
|
|
input{
|
|
font-size: 16px;
|
|
outline: none;
|
|
background-color: ${props => props.theme.primary};
|
|
border: 1px solid ${props => props.theme.borderColor};
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
input[type="number"]{
|
|
width: 80px;
|
|
}
|
|
input[type="number"]::-webkit-inner-spin-button,
|
|
input[type="number"]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
`
|
|
const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
|
|
width: 22px !important;
|
|
height: 22px !important;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
position: relative;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: ${props => props.theme.primary};
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
&:checked::after {
|
|
background: ${props => props.theme.accent};
|
|
}
|
|
|
|
`;
|
|
const LabelCheckbox = styled.label`
|
|
position: relative;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
svg{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
`
|
|
|
|
|
|
export const SettingItem = ({ setting }: { setting: Setting }) => {
|
|
const { updateSetting } = useSettingsStore();
|
|
const theme = useTheme();
|
|
|
|
const handleChange = (
|
|
e: ChangeEvent<HTMLInputElement | HTMLSelectElement>
|
|
) => {
|
|
const value =
|
|
setting.type === 'boolean'
|
|
? (e.target as HTMLInputElement).checked
|
|
: e.target.value;
|
|
updateSetting(setting.id, value);
|
|
};
|
|
|
|
return (
|
|
<SettingBlock>
|
|
<label>{setting.label}</label>
|
|
|
|
{setting.type === 'boolean' && (
|
|
<LabelCheckbox>
|
|
<StyledCheckbox />
|
|
<IconComponent name={buttonNames[19]} width="18" height="18" setColor={theme.primary} />
|
|
</LabelCheckbox>
|
|
)}
|
|
|
|
{setting.type === 'select' && setting.options && (
|
|
<SettingSelect
|
|
value={setting.value}
|
|
options={setting.options}
|
|
onChange={(value) => updateSetting(setting.id, value)}
|
|
/>
|
|
)}
|
|
|
|
{setting.type === 'text' && (
|
|
<input
|
|
type="text"
|
|
value={setting.value}
|
|
onChange={handleChange}
|
|
/>
|
|
)}
|
|
|
|
{setting.type === 'number' && (
|
|
<input
|
|
type="number"
|
|
min={setting?.min}
|
|
max={setting?.max}
|
|
value={setting.value}
|
|
onChange={handleChange}
|
|
/>
|
|
)}
|
|
|
|
{setting.type === 'button' && (
|
|
<MainButton
|
|
type="button"
|
|
size="small"
|
|
title={setting.value}
|
|
/>
|
|
)}
|
|
</SettingBlock>
|
|
);
|
|
}; |