ITQC/pydase
24
0
Fork 0
mirror of https://github.com/tiqi-group/pydase.git synced 2025-06-05 21:20:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

frontend: updating SliderComponent (using mui slider)

Browse Source
This commit is contained in:
Mose Müller 2023-08-02 12:06:20 +02:00
parent 23684f9175
commit a2502c1e74
1 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
frontend/src/components/SliderComponent.tsx
View File

@ -1,8 +1,8 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { InputGroup, Form, Row, Col, Button, Collapse } from 'react-bootstrap'; import { InputGroup, Form, Row, Col, Button, Collapse } from 'react-bootstrap';
import { socket } from '../socket'; import { socket } from '../socket';
import RangeSlider from 'react-bootstrap-range-slider';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { Slider } from '@mui/material';
interface SliderComponentProps { interface SliderComponentProps {
name: string; name: string;
@ -36,7 +36,12 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
value: { value: newNumber, min: min, max: max, step_size: stepSize } value: { value: newNumber, min: min, max: max, step_size: stepSize }
}); });
}; };
const handleOnChange = (event, newNumber: number) => { const handleOnChange = (event, newNumber: number | number[]) => {
// This will never be the case as we do not have a range slider. However, we should
// make sure this is properly handled.
if (Array.isArray(newNumber)) {
newNumber = newNumber[0];
}
socketEmit(newNumber, min, max, stepSize); socketEmit(newNumber, min, max, stepSize);
}; };
@ -57,25 +62,41 @@ export const SliderComponent = React.memo((props: SliderComponentProps) => {
}; };
return ( return (
<div className={'component boolean'} id={parent_path.concat('.' + name)}> <div className={'slider'} id={parent_path.concat('.' + name)}>
<p>Render count: {renderCount.current}</p> <p>Render count: {renderCount.current}</p>
<DocStringComponent docString={docString} /> <DocStringComponent docString={docString} />
<Row> <Row>
<Col className="col-2 d-flex align-items-center"> <Col className="col-2 d-flex align-items-center">
<InputGroup.Text style={{ height: '65px' }}>{name}</InputGroup.Text> <InputGroup.Text
<Form.Group> // style={{ height: '80px' }}
<RangeSlider >
disabled={readOnly} {name}
</InputGroup.Text>
{/* <Form.Group> */}
<Slider
style={{ flex: 1, margin: '0px 0px 5px 10px' }}
aria-label="Always visible"
valueLabelDisplay="on"
disabled={readOnly}
value={value}
onChange={(event, newNumber) => handleOnChange(event, newNumber)}
min={min}
max={max}
step={stepSize}
marks={[
{ value: min, label: `${min}` },
{ value: max, label: `${max}` }
]}
/>
{/* <Form.Control
type="text"
value={value} value={value}
onChange={(event, newNumber) => handleOnChange(event, newNumber)} name={name}
min={min} disabled={true}
max={max} style={{ flex: 1, margin: '5px 0px 0px 10px' }}
step={stepSize} /> */}
tooltip={'off'} {/* </Form.Group> */}
/>
<Form.Control type="text" value={value} name={name} disabled={true} />
</Form.Group>
</Col> </Col>
</Row> </Row>
<Row xs="auto"> <Row xs="auto">