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

Update Adding_Components.md

Browse Source
This commit is contained in:
Mose Müller 2023-08-17 11:51:33 +02:00
parent 9fa4333196
commit 8ad7ea511c
1 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,23 +107,29 @@ Write the React component code, following the structure and patterns used in exi
For example, for the `Image` component, a template could look like this: For example, for the `Image` component, a template could look like this:
```tsx ```tsx
import React, { useEffect, useRef } from 'react';
import { emit_update } from '../socket'; // use this when your component should update values in the backend import { emit_update } from '../socket'; // use this when your component should update values in the backend
import { Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent'; import { DocStringComponent } from './DocStringComponent';
import React, { useEffect, useRef, useState } from 'react';
import { Card, Collapse, Image } from 'react-bootstrap';
import { DocStringComponent } from './DocStringComponent';
import { ChevronDown, ChevronRight } from 'react-bootstrap-icons';
interface ImageComponentProps { interface ImageComponentProps {
name: string; name: string;
parentPath: string; parentPath: string;
value: boolean;
readOnly: boolean; readOnly: boolean;
docString: string; docString: string;
addNotification: (string) => void;
// Define your component specific props here // Define your component specific props here
value: string;
format: string;
} }
export const ImageComponent = React.memo((props: ImageComponentProps) => { export const ImageComponent = React.memo((props: ImageComponentProps) => {
const { name, parentPath, value, docString, format, addNotification } = props;
const renderCount = useRef(0); const renderCount = useRef(0);
const { name, parentPath, value, readOnly, docString, addNotification } = props; const [open, setOpen] = useState(true); // add this if you want to expand/collapse your component
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
@ -138,11 +144,25 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
return ( return (
<div className={'imageComponent'} id={parentPath.concat('.' + name)}> <div className={'imageComponent'} id={parentPath.concat('.' + name)}>
{process.env.NODE_ENV === 'development' && ( {/* Add the Card and Collapse components here if you want to be able to expand and
<p>Render count: {renderCount.current}</p> collapse your component. */}
)} <Card>
<DocStringComponent docString={docString} /> <Card.Header
{/* Your component TSX here */} onClick={() => setOpen(!open)}
style={{ cursor: 'pointer' }} // Change cursor style on hover
>
{name} {open ? <ChevronDown /> : <ChevronRight />}
</Card.Header>
<Collapse in={open}>
<Card.Body>
{process.env.NODE_ENV === 'development' && (
<p>Render count: {renderCount.current}</p>
)}
<DocStringComponent docString={docString} />
{/* Your component TSX here */}
</Card.Body>
</Collapse>
</Card>
</div> </div>
); );
}); });