Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-30 23:27:55 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

profile modal allow removing sens

Browse Source
This commit is contained in:
Kalle (Sendou)
2020-11-22 12:34:05 +02:00
parent d8f541258e
commit 5b12157e4c
3 changed files with 73 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
components/common/MultiWeaponSelector.tsx
View File

@@ -10,7 +10,7 @@ interface Props {
onChange: (value: string[]) => void;
}
const WeaponSelector: React.FC<Props> = ({ name, value, onChange }) => {
const MultiWeaponSelector: React.FC<Props> = ({ name, value, onChange }) => {
const { i18n } = useLingui();
return (
<>
@@ -20,9 +20,10 @@ const WeaponSelector: React.FC<Props> = ({ name, value, onChange }) => {
if (!!e.target.value && !value.includes(e.target.value))
onChange(value.concat(e.target.value));
}}
defaultValue="NO_VALUE"
value=""
disabled={value.length === 5}
>
<option hidden value="NO_VALUE">
<option hidden value="">
{t`Select weapon`}
</option>
{weaponsWithHeroCategorizedLocalized.map((wpnCategory) => (
@@ -59,4 +60,4 @@ const WeaponSelector: React.FC<Props> = ({ name, value, onChange }) => {
);
};
export default WeaponSelector;
export default MultiWeaponSelector;

19
components/common/MySelect.tsx
View File

@@ -3,32 +3,29 @@ import { Select } from "@chakra-ui/react";
interface Props {
value: string;
setValue: (value?: string) => void;
options: {
label: string;
value: string;
}[];
placeholder?: string;
name?: string;
children: React.ReactNode;
}
const MySelect: React.FC<Props> = ({
value,
setValue,
options,
placeholder,
children,
name,
}) => {
console.log({ value });
return (
<Select
value={value}
value={value ?? ""}
onChange={(e) =>
setValue(e.target.value !== "" ? undefined : e.target.value)
}
name={name}
>
{placeholder && <option value="">{placeholder}</option>}
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
{children}
</Select>
);
};

104
components/u/ProfileModal.tsx
View File

@@ -14,7 +14,6 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
Select,
useToast,
} from "@chakra-ui/react";
import { zodResolver } from "@hookform/resolvers/zod";
@@ -230,63 +229,80 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
<MySelect
value={value}
setValue={onChange}
options={(Object.keys(countries) as Array<
keyof typeof countries
>).map((countryCode) => ({
label: countries[countryCode].name,
value: countryCode,
}))}
placeholder={t`Select country`}
/>
>
{(Object.keys(countries) as Array<
keyof typeof countries
>).map((countryCode) => (
<option key={countryCode} value={countryCode}>
{countries[countryCode].name}
</option>
))}
</MySelect>
)}
/>
<FormControl isInvalid={!!errors.weaponPool}>
<FormLabel htmlFor="weaponPool" mt={4}>
<Trans>Weapon pool</Trans>
</FormLabel>
<Controller
name="weaponPool"
control={control}
defaultValue={[]}
render={({ onChange, value, name }) => (
<WeaponSelector
name={name}
value={value}
onChange={onChange}
/>
)}
/>
<FormErrorMessage>
{/* Seems to be mistyped */}
{/* @ts-ignore */}
{errors.weaponPool?.message}
</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="weaponPool" mt={4}>
<Trans>Weapon pool</Trans>
</FormLabel>
<Controller
name="weaponPool"
control={control}
defaultValue={[]}
render={({ onChange, value, name }) => (
<WeaponSelector
name={name}
value={value}
onChange={onChange}
/>
)}
/>
<FormLabel htmlFor="sensStick" mt={4}>
<Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
<Trans>Stick sensitivity</Trans>
</FormLabel>
<Select ref={register} name="sensStick">
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</Select>
<Controller
name="sensStick"
control={control}
render={({ onChange, value, name }) => (
<MySelect
placeholder={t`Select stick sensitivity`}
name={name}
value={value}
setValue={onChange}
>
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</MySelect>
)}
/>
<FormLabel htmlFor="sensMotion" mt={4}>
<Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
<Trans>Motion sensitivity</Trans>
</FormLabel>
<Select ref={register} name="sensMotion">
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</Select>
<Controller
name="sensMotion"
control={control}
render={({ onChange, value, name }) => (
<MySelect
placeholder={t`Select motion sensitivity`}
name={name}
value={value}
setValue={onChange}
>
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</MySelect>
)}
/>
<MarkdownTextarea
fieldName="bio"