FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-17 15:06:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): support min and max value for number input type

Browse Source
This commit is contained in:
Luke
2022-08-27 15:54:43 +02:00
parent 0bc185ef38
commit 52ce1c53ae
2 changed files with 38 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/src/features/dev/debug/input.ts
View File

@@ -1,30 +1,36 @@
import { debugData } from "../../../utils/debugData";
import {InputProps} from "../../dialog/InputDialog";
import { InputProps } from "../../dialog/InputDialog";
export const debugInput = () => {
debugData<InputProps>([
{
action: "openDialog",
data: {
heading: "Police locker",
rows: [
{ type: "input", label: "Locker number", placeholder: "420" },
{ type: "checkbox", label: "Some checkbox" },
{ type: "input", label: "Locker PIN", password: true, icon: "lock" },
{ type: "checkbox", label: "Some other checkbox", checked: true },
{
type: "select",
label: "Locker type",
options: [
{ value: "option1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
],
},
{ type: "number", label: "Number counter", default: 12 },
{ type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 },
],
{
action: "openDialog",
data: {
heading: "Police locker",
rows: [
{ type: "input", label: "Locker number", placeholder: "420" },
{ type: "checkbox", label: "Some checkbox" },
{ type: "input", label: "Locker PIN", password: true, icon: "lock" },
{ type: "checkbox", label: "Some other checkbox", checked: true },
{
type: "select",
label: "Locker type",
options: [
{ value: "option1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
],
},
{
type: "number",
label: "Number counter",
default: 12,
min: 3,
max: 10,
},
{ type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 },
],
},
},
},
]);
}
]);
};

9
web/src/features/dialog/components/number.tsx
View File

@@ -18,13 +18,18 @@ interface Props {
const NumberField: React.FC<Props> = (props) => {
useEffect(() => {
if(props.row.default) props.handleChange(props.row.default, props.index);
if (props.row.default) props.handleChange(props.row.default, props.index);
}, []);
return (
<Box mb={3}>
<Text>{props.row.label}</Text>
<NumberInput onChange={(val: string) => props.handleChange(+val, props.index)} defaultValue={props.row.default}>
<NumberInput
onChange={(val: string) => props.handleChange(+val, props.index)}
defaultValue={props.row.default}
min={props.row.min}
max={props.row.max}
>
<NumberInputField placeholder={props.row.placeholder} />
<NumberInputStepper>
<NumberIncrementStepper />