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

refactor(web/input): input dialog mantine rewrite

Browse Source
This commit is contained in:
Luke
2022-12-16 15:00:01 +01:00
parent f24e43a1a4
commit c419474969
8 changed files with 108 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
web/src/features/dialog/components/fields/slider.tsx
View File

@@ -1,7 +1,6 @@
import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
import { Box, Slider, Text } from '@mantine/core';
import { useEffect, useState } from 'react';
import { ISlider } from '../../../../interfaces/dialog';
import Label from '../Label';
interface Props {
row: ISlider;
@@ -17,31 +16,23 @@ const SliderField: React.FC<Props> = (props) => {
const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
return (
<>
<Box mb={3}>
<Label label={props.row.label} description={props.row.description} />
<Slider
onChangeEnd={(val: number) => props.handleChange(val, props.index)}
onChange={(val: number) => setSliderValue(val)}
defaultValue={props.row.default || props.row.min || 0}
min={props.row.min}
max={props.row.max}
step={props.row.step}
isDisabled={props.row.disabled}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<Tooltip hasArrow label={sliderValue} placement="bottom" gutter={10}>
<SliderThumb />
</Tooltip>
</Slider>
<HStack justifyContent="space-between">
<Text fontSize="sm">{props.row.min || 0}</Text>
<Text fontSize="sm">{props.row.max || 100}</Text>
</HStack>
</Box>
</>
<Box>
<Text sx={{ fontSize: 14, fontWeight: 500 }}>{props.row.label}</Text>
<Slider
mb={10}
onChangeEnd={(val: number) => props.handleChange(val, props.index)}
onChange={(val: number) => setSliderValue(val)}
defaultValue={props.row.default || props.row.min || 0}
min={props.row.min}
max={props.row.max}
step={props.row.step}
disabled={props.row.disabled}
marks={[
{ value: props.row.min || 0, label: props.row.min || 0 },
{ value: props.row.max || 100, label: props.row.max || 100 },
]}
/>
</Box>
);
};