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

docs: updating Adding_Components description

Browse Source
This commit is contained in:
Mose Müller 2023-10-30 14:16:39 +01:00
parent 743531c434
commit b6c956fab8
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,6 +113,7 @@ import React, { useEffect, useRef, useState } from 'react';
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';
import { getIdFromFullAccessPath } from '../utils/stringUtils';
interface ImageComponentProps { interface ImageComponentProps {
name: string; name: string;
@ -130,6 +131,8 @@ 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 id = getIdFromFullAccessPath(fullAccessPath);
useEffect(() => { useEffect(() => {
renderCount.current++; renderCount.current++;
@ -143,7 +146,7 @@ export const ImageComponent = React.memo((props: ImageComponentProps) => {
// Your component logic here // Your component logic here
return ( return (
<div className={'imageComponent'} id={parentPath.concat('.' + name)}> <div className={'imageComponent'} id={id}>
{/* Add the Card and Collapse components here if you want to be able to expand and {/* Add the Card and Collapse components here if you want to be able to expand and
collapse your component. */} collapse your component. */}
<Card> <Card>
@ -296,4 +299,4 @@ However, you might want to use the `addNotification` at different places. For an
Test the frontend component to ensure that it renders correctly and interacts seamlessly Test the frontend component to ensure that it renders correctly and interacts seamlessly
with the backend. Consider writing unit tests using a testing library like Jest or React with the backend. Consider writing unit tests using a testing library like Jest or React
Testing Library, and manually test the component in the browser. Testing Library, and manually test the component in the browser.