FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-18 23:46:03 +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 { debugData } from "../../../utils/debugData";
import {InputProps} from "../../dialog/InputDialog"; import { InputProps } from "../../dialog/InputDialog";
export const debugInput = () => { export const debugInput = () => {
debugData<InputProps>([ debugData<InputProps>([
{ {
action: "openDialog", action: "openDialog",
data: { data: {
heading: "Police locker", heading: "Police locker",
rows: [ rows: [
{ type: "input", label: "Locker number", placeholder: "420" }, { type: "input", label: "Locker number", placeholder: "420" },
{ type: "checkbox", label: "Some checkbox" }, { type: "checkbox", label: "Some checkbox" },
{ type: "input", label: "Locker PIN", password: true, icon: "lock" }, { type: "input", label: "Locker PIN", password: true, icon: "lock" },
{ type: "checkbox", label: "Some other checkbox", checked: true }, { type: "checkbox", label: "Some other checkbox", checked: true },
{ {
type: "select", type: "select",
label: "Locker type", label: "Locker type",
options: [ options: [
{ value: "option1" }, { value: "option1" },
{ value: "option2", label: "Option 2" }, { value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" }, { value: "option3", label: "Option 3" },
], ],
}, },
{ type: "number", label: "Number counter", default: 12 }, {
{ type: "slider", label: "Slide bar", min: 10, max: 50, step: 2 }, 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) => { const NumberField: React.FC<Props> = (props) => {
useEffect(() => { useEffect(() => {
if(props.row.default) props.handleChange(props.row.default, props.index); if (props.row.default) props.handleChange(props.row.default, props.index);
}, []); }, []);
return ( return (
<Box mb={3}> <Box mb={3}>
<Text>{props.row.label}</Text> <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} /> <NumberInputField placeholder={props.row.placeholder} />
<NumberInputStepper> <NumberInputStepper>
<NumberIncrementStepper /> <NumberIncrementStepper />