john-okeefe
7bdf42ac07
- New FixedSelect wrapper over chakra-react-select v6 restoring the v4 look everywhere: single gray.500 control border, flush addon chevron zone with rounded inner corners, hidden indicator separator, v4 option padding/type scale, gray subtle pills, brighter unselected hover - GameForm: FormControl/InputGroup -> Field/Flex, Button colorScheme/isLoading -> colorPalette/loading, Stack spacing -> gap, Container container.md -> 768px, Steam Scrape row rebuilt as nowrap Flex, select wrappers de-bordered (control owns the border) - formFields: Field/Checkbox/Switch shims in, required asterisk dropped to match legacy labels, Select/Creatable wrappers de-bordered, TS-typed select callbacks
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import React from "react";
|
|
import { Input } from "@chakra-ui/react";
|
|
import { Field } from "../ui/field";
|
|
import { Data } from "../../models/game";
|
|
|
|
interface Props {
|
|
label: string;
|
|
textField: string;
|
|
field: string;
|
|
bg: string;
|
|
handleInputChange: <G extends keyof Data>(
|
|
name: string,
|
|
value: Data[G],
|
|
) => void;
|
|
required: boolean;
|
|
}
|
|
|
|
const SingleFieldNumericInput = ({
|
|
label,
|
|
textField,
|
|
field,
|
|
bg,
|
|
handleInputChange,
|
|
required,
|
|
}: Props) => {
|
|
const isValidSteamValue = (v: string) => {
|
|
const s = v.trim();
|
|
if (!s) return false;
|
|
if (/^\d+$/.test(s)) return true;
|
|
return s.includes("store.steampowered.com");
|
|
};
|
|
|
|
const showError = field.trim() !== "" && !isValidSteamValue(field);
|
|
|
|
return (
|
|
<Field
|
|
mb="3"
|
|
label={label}
|
|
errorText="Enter a Steam App Id or a Steam App URL"
|
|
>
|
|
<Input
|
|
id={textField}
|
|
name={textField}
|
|
bg={bg}
|
|
type="text"
|
|
inputMode="text"
|
|
aria-invalid={showError}
|
|
placeholder="Steam Id or Steam URL"
|
|
borderWidth="1px"
|
|
borderStyle="solid"
|
|
borderColor={{ base: "gray.500", _invalid: "red.500" }}
|
|
rounded="md"
|
|
value={field}
|
|
required={required}
|
|
onChange={(e) => {
|
|
handleInputChange(textField, e.target.value);
|
|
}}
|
|
/>
|
|
</Field>
|
|
);
|
|
};
|
|
|
|
export default SingleFieldNumericInput;
|