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

updates Adding_Components guide

Browse Source
This commit is contained in:
Mose Müller 2024-01-08 17:11:55 +01:00
parent c9ff3db9e9
commit 8aa7fd31f8
1 changed files with 14 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/dev-guide/Adding_Components.md
View File

@ -111,6 +111,7 @@ import { setAttribute, runMethod } from '../socket'; // use this when your comp
// or runs a method, respectively // or runs a method, respectively
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from 'react';
import { WebSettingsContext } from '../WebSettings';
import { Card, Collapse, Image } from 'react-bootstrap'; import { Card, Collapse, Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons'; import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
@ -119,7 +120,7 @@ import { LevelName } from './NotificationsComponent';
interface ImageComponentProps { interface ImageComponentProps {
name: string; name: string;
parentPath: string; parentPath?: string;
readOnly: boolean; readOnly: boolean;
docString: string; docString: string;
addNotification: (message: string, levelname?: LevelName) => void; addNotification: (message: string, levelname?: LevelName) => void;
@ -133,9 +134,17 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
const renderCount = useRef(0); const renderCount = useRef(0);
const [open, setOpen] = useState(true); // add this if you want to expand/collapse your component const [open, setOpen] = useState(true); // add this if you want to expand/collapse your component
const fullAccessPath = parentPath.concat('.' + name); const fullAccessPath = [parentPath, name].filter((element) => element).join('.');
const id = getIdFromFullAccessPath(fullAccessPath); const id = getIdFromFullAccessPath(fullAccessPath);
// Web settings contain the user-defined display name of the components (and possibly more later)
const webSettings = useContext(WebSettingsContext);
let displayName = name;
if (webSettings[fullAccessPath] && webSettings[fullAccessPath].displayName) {
displayName = webSettings[fullAccessPath].displayName;
}
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
}); });
@ -156,7 +165,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
onClick={() => setOpen(!open)} onClick={() => setOpen(!open)}
style={{ cursor: 'pointer' }} // Change cursor style on hover style={{ cursor: 'pointer' }} // Change cursor style on hover
> >
{name} {open ? <ChevronDown /> : <ChevronRight />} {displayName} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header> </Card.Header>
<Collapse in={open}> <Collapse in={open}>
<Card.Body> <Card.Body>
@ -206,6 +215,7 @@ React components in the frontend often need to send updates to the backend, part
export const ButtonComponent = React.memo((props: ButtonComponentProps) => { export const ButtonComponent = React.memo((props: ButtonComponentProps) => {
// ... // ...
const { name, parentPath, value } = props; const { name, parentPath, value } = props;
let displayName = ... // to access the user-defined display name
const setChecked = (checked: boolean) => { const setChecked = (checked: boolean) => {
setAttribute(name, parentPath, checked); setAttribute(name, parentPath, checked);
@ -217,7 +227,7 @@ React components in the frontend often need to send updates to the backend, part
value={parentPath} value={parentPath}
// ... other props // ... other props
onChange={(e) => setChecked(e.currentTarget.checked)}> onChange={(e) => setChecked(e.currentTarget.checked)}>
<p>{name}</p> {displayName}
</ToggleButton> </ToggleButton>
); );
}); });