Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-29 22:58:18 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

form controls (#417)

Browse Source
This commit is contained in:
Igor
2021-04-17 23:17:36 +03:00
committed by GitHub
parent e5d01e2443
commit 9290e3eb6f
6 changed files with 265 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app/calendar/components/EventModal.tsx
View File

@@ -148,11 +148,10 @@ export function EventModal({
</Stack>
</RadioGroup> */}
<FormLabel htmlFor="name">
<Trans>Name</Trans>
</FormLabel>
<FormControl isInvalid={!!errors.name}>
<FormLabel htmlFor="name">
<Trans>Name</Trans>
</FormLabel>
<Input
name="name"
ref={register}
@@ -162,11 +161,10 @@ export function EventModal({
<FormErrorMessage>{errors.name}</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="date" mt={4}>
<Trans>Date</Trans>
</FormLabel>
<FormControl isInvalid={!!errors.date}>
<FormLabel htmlFor="date" mt={4}>
<Trans>Date</Trans>
</FormLabel>
<Controller
name="date"
control={control}
@@ -191,11 +189,10 @@ export function EventModal({
<FormErrorMessage>{errors.date?.message}</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="discordInviteUrl" mt={4}>
<Trans>Discord invite URL</Trans>
</FormLabel>
<FormControl isInvalid={!!errors.discordInviteUrl}>
<FormLabel htmlFor="discordInviteUrl" mt={4}>
<Trans>Discord invite URL</Trans>
</FormLabel>
<Input
name="discordInviteUrl"
ref={register}
@@ -207,11 +204,10 @@ export function EventModal({
</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="eventUrl" mt={4}>
<Trans>Registration URL</Trans>
</FormLabel>
<FormControl isInvalid={!!errors.eventUrl}>
<FormLabel htmlFor="eventUrl" mt={4}>
<Trans>Registration URL</Trans>
</FormLabel>
<Input
name="eventUrl"
ref={register}
@@ -221,17 +217,19 @@ export function EventModal({
<FormErrorMessage>{errors.eventUrl?.message}</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="format" mt={4}>
<Trans>Format</Trans>
</FormLabel>
<FormControl>
<FormLabel htmlFor="format" mt={4}>
<Trans>Format</Trans>
</FormLabel>
<Select name="format" ref={register}>
{EVENT_FORMATS.map((format) => (
<option key={format.code} value={format.code}>
{format.name}
</option>
))}
</Select>
<Select name="format" ref={register}>
{EVENT_FORMATS.map((format) => (
<option key={format.code} value={format.code}>
{format.name}
</option>
))}
</Select>
</FormControl>
<MarkdownTextarea
fieldName="description"
@@ -247,17 +245,19 @@ export function EventModal({
dataCy="description-markdown"
/>
<FormLabel htmlFor="tags" mt={4}>
<Trans>Tags</Trans>
</FormLabel>
<Controller
name="tags"
control={control}
defaultValue={[]}
render={({ onChange, value }) => (
<TagsSelector value={value} setValue={onChange} />
)}
/>
<FormControl>
<FormLabel htmlFor="tags" mt={4}>
<Trans>Tags</Trans>
</FormLabel>
<Controller
name="tags"
control={control}
defaultValue={[]}
render={({ onChange, value }) => (
<TagsSelector value={value} setValue={onChange} />
)}
/>
</FormControl>
</ModalBody>
<ModalFooter>

42
app/freeagents/components/FAModal.tsx
View File

@@ -124,11 +124,11 @@ const FAModal = ({ onClose, post, refetchQuery }: Props) => {
</FormControl>
</>
)}
<FormLabel htmlFor="playstyles">
<Trans>Roles</Trans>
</FormLabel>
<FormControl isInvalid={!!errors.playstyles}>
<FormLabel htmlFor="playstyles">
<Trans>Roles</Trans>
</FormLabel>
<Controller
name="playstyles"
control={control}
@@ -155,23 +155,25 @@ const FAModal = ({ onClose, post, refetchQuery }: Props) => {
</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="canVC" mt={4}>
<Trans>Can you voice chat?</Trans>
</FormLabel>
<Controller
name="canVC"
control={control}
defaultValue="YES"
render={({ onChange, value }) => (
<RadioGroup value={value} onChange={onChange}>
<Stack direction="row">
<Radio value="YES">Yes</Radio>
<Radio value="MAYBE">Sometimes</Radio>
<Radio value="NO">No</Radio>
</Stack>
</RadioGroup>
)}
/>
<FormControl>
<FormLabel htmlFor="canVC" mt={4}>
<Trans>Can you voice chat?</Trans>
</FormLabel>
<Controller
name="canVC"
control={control}
defaultValue="YES"
render={({ onChange, value }) => (
<RadioGroup value={value} onChange={onChange}>
<Stack direction="row">
<Radio value="YES">Yes</Radio>
<Radio value="MAYBE">Sometimes</Radio>
<Radio value="NO">No</Radio>
</Stack>
</RadioGroup>
)}
/>
</FormControl>
<MarkdownTextarea
fieldName="content"

92
components/u/BuildModal.tsx
View File

@@ -298,49 +298,59 @@ const BuildModal: React.FC<Props> = ({ onClose, build, weaponFromQuery }) => {
</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="headGear" mt={4}>
<Trans>Head</Trans>
</FormLabel>
<Controller
name="headGear"
control={control}
defaultValue=""
render={({ onChange, value, name }) => (
<GearSelector slot="head" value={value} setValue={onChange} />
)}
/>
<FormControl>
<FormLabel htmlFor="headGear" mt={4}>
<Trans>Head</Trans>
</FormLabel>
<Controller
name="headGear"
control={control}
defaultValue=""
render={({ onChange, value, name }) => (
<GearSelector
slot="head"
value={value}
setValue={onChange}
/>
)}
/>
</FormControl>
<FormLabel htmlFor="clothingGear" mt={4}>
<Trans>Clothing</Trans>
</FormLabel>
<Controller
name="clothingGear"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<GearSelector
slot="clothing"
value={value}
setValue={onChange}
/>
)}
/>
<FormControl>
<FormLabel htmlFor="clothingGear" mt={4}>
<Trans>Clothing</Trans>
</FormLabel>
<Controller
name="clothingGear"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<GearSelector
slot="clothing"
value={value}
setValue={onChange}
/>
)}
/>
</FormControl>
<FormLabel htmlFor="shoesGear" mt={4}>
<Trans>Shoes</Trans>
</FormLabel>
<Controller
name="shoesGear"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<GearSelector
slot="shoes"
value={value}
setValue={onChange}
/>
)}
/>
<FormControl>
<FormLabel htmlFor="shoesGear" mt={4}>
<Trans>Shoes</Trans>
</FormLabel>
<Controller
name="shoesGear"
control={control}
defaultValue=""
render={({ onChange, value }) => (
<GearSelector
slot="shoes"
value={value}
setValue={onChange}
/>
)}
/>
</FormControl>
<FormControl isInvalid={!!errors.modes}>
<FormLabel htmlFor="modes" mt={4}>

180
components/u/ProfileModal.tsx
View File

@@ -225,95 +225,103 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
<FormErrorMessage>{errors.youtubeId?.message}</FormErrorMessage>
</FormControl>
<FormLabel htmlFor="country" mt={4}>
<Trans>Country</Trans>
</FormLabel>
<Controller
name="country"
control={control}
defaultValue={""}
render={({ onChange, value }) => (
<ChakraSelect
value={value}
setValue={onChange}
placeholder={t`Select country`}
>
{(Object.keys(countries) as Array<keyof typeof countries>)
.sort((a, b) =>
countries[a].name.localeCompare(countries[b].name)
)
.map((countryCode) => (
<option key={countryCode} value={countryCode}>
{countries[countryCode].name}
<FormControl>
<FormLabel htmlFor="country" mt={4}>
<Trans>Country</Trans>
</FormLabel>
<Controller
name="country"
control={control}
defaultValue={""}
render={({ onChange, value }) => (
<ChakraSelect
value={value}
setValue={onChange}
placeholder={t`Select country`}
>
{(Object.keys(countries) as Array<keyof typeof countries>)
.sort((a, b) =>
countries[a].name.localeCompare(countries[b].name)
)
.map((countryCode) => (
<option key={countryCode} value={countryCode}>
{countries[countryCode].name}
</option>
))}
</ChakraSelect>
)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="weaponPool" mt={4}>
<Trans>Weapon pool</Trans>
</FormLabel>
<Controller
name="weaponPool"
control={control}
defaultValue={[]}
render={({ onChange, value }) => (
<WeaponSelector
value={value}
setValue={onChange}
isMulti
pool="WITH_ALTS"
maxMultiCount={5}
/>
)}
/>
</FormControl>
<FormControl>
<FormLabel htmlFor="sensStick" mt={4}>
<Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
<Trans>Stick sensitivity</Trans>
</FormLabel>
<Controller
name="sensStick"
control={control}
render={({ onChange, value, name }) => (
<ChakraSelect
placeholder={t`Select stick sensitivity`}
name={name}
value={value}
setValue={onChange}
>
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</ChakraSelect>
)}
/>
</ChakraSelect>
)}
/>
</FormControl>
<FormLabel htmlFor="weaponPool" mt={4}>
<Trans>Weapon pool</Trans>
</FormLabel>
<Controller
name="weaponPool"
control={control}
defaultValue={[]}
render={({ onChange, value }) => (
<WeaponSelector
value={value}
setValue={onChange}
isMulti
pool="WITH_ALTS"
maxMultiCount={5}
/>
)}
/>
<FormLabel htmlFor="sensStick" mt={4}>
<Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
<Trans>Stick sensitivity</Trans>
</FormLabel>
<Controller
name="sensStick"
control={control}
render={({ onChange, value, name }) => (
<ChakraSelect
placeholder={t`Select stick sensitivity`}
name={name}
value={value}
setValue={onChange}
>
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</ChakraSelect>
)}
/>
<FormLabel htmlFor="sensMotion" mt={4}>
<Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
<Trans>Motion sensitivity</Trans>
</FormLabel>
<Controller
name="sensMotion"
control={control}
render={({ onChange, value, name }) => (
<ChakraSelect
placeholder={t`Select motion sensitivity`}
name={name}
value={value}
setValue={onChange}
>
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</ChakraSelect>
)}
/>
<FormControl>
<FormLabel htmlFor="sensMotion" mt={4}>
<Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
<Trans>Motion sensitivity</Trans>
</FormLabel>
<Controller
name="sensMotion"
control={control}
render={({ onChange, value, name }) => (
<ChakraSelect
placeholder={t`Select motion sensitivity`}
name={name}
value={value}
setValue={onChange}
>
{sensOptions.map((sens) => (
<option key={sens} value={sens}>
{sens}
</option>
))}
</ChakraSelect>
)}
/>
</FormControl>
<MarkdownTextarea
fieldName="bio"

89
pages/maps.tsx
View File

@@ -4,6 +4,7 @@ import {
Box,
Button,
Checkbox,
FormControl,
FormLabel,
Grid,
Input,
@@ -256,27 +257,29 @@ const MapsGeneratorPage = () => {
);
})}
</Grid>
<FormLabel htmlFor="share" mt={4}>
<Trans>Share your map pool</Trans>
</FormLabel>
{window && (
<InputGroup size="md" mb={8}>
<Input name="share" value={window.location.href} readOnly />
<InputRightElement width="4.5rem">
<Button
onClick={() => {
navigator.clipboard.writeText(window.location.href);
setCopied("URL");
}}
h="1.75rem"
size="sm"
disabled={copied === "URL"}
>
{copied === "URL" ? <FiCheck /> : <Trans>Copy</Trans>}
</Button>
</InputRightElement>
</InputGroup>
)}
<FormControl>
<FormLabel htmlFor="share" mt={4}>
<Trans>Share your map pool</Trans>
</FormLabel>
{window && (
<InputGroup size="md" mb={8}>
<Input name="share" value={window.location.href} readOnly />
<InputRightElement width="4.5rem">
<Button
onClick={() => {
navigator.clipboard.writeText(window.location.href);
setCopied("URL");
}}
h="1.75rem"
size="sm"
disabled={copied === "URL"}
>
{copied === "URL" ? <FiCheck /> : <Trans>Copy</Trans>}
</Button>
</InputRightElement>
</InputGroup>
)}
</FormControl>
</>
) : (
<Grid
@@ -380,27 +383,29 @@ const MapsGeneratorPage = () => {
width={"90%"}
/>
)}
<FormLabel htmlFor="count" fontSize="sm" mt={4}>
<Trans>Amount of maps to generate</Trans>
</FormLabel>
<NumberInput
name="count"
size="sm"
value={count}
min={1}
max={100}
onChange={(_, value) => {
if (!Number.isNaN(value)) setCount(value);
}}
mb={4}
width={24}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
<FormControl>
<FormLabel htmlFor="count" fontSize="sm" mt={4}>
<Trans>Amount of maps to generate</Trans>
</FormLabel>
<NumberInput
name="count"
size="sm"
value={count}
min={1}
max={100}
onChange={(_, value) => {
if (!Number.isNaN(value)) setCount(value);
}}
mb={4}
width={24}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</FormControl>
{maplist && (
<>
<Textarea value={maplist} readOnly rows={9} />

26
pages/sr/leaderboards/new.tsx
View File

@@ -97,18 +97,20 @@ const AddRecordModal = () => {
{watchRotationId && (
<>
<FormLabel htmlFor="category" mt={4}>
<Trans>Category</Trans>
</FormLabel>
<Select name="category" ref={register}>
{Object.entries(salmonRunCategoryToNatural).map(
([key, value]) => (
<option key={key} value={key}>
{i18n._(value)}
</option>
)
)}
</Select>
<FormControl>
<FormLabel htmlFor="category" mt={4}>
<Trans>Category</Trans>
</FormLabel>
<Select name="category" ref={register}>
{Object.entries(salmonRunCategoryToNatural).map(
([key, value]) => (
<option key={key} value={key}>
{i18n._(value)}
</option>
)
)}
</Select>
</FormControl>
<FormControl isInvalid={!!errors.goldenEggCount}>
<FormLabel htmlFor="goldenEggCount" mt={4}>