@platformatic/ui-components 0.1.57 → 0.1.58

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.57",
+  "version": "0.1.58",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Icons from './icons'
 import styles from './Sidebar.module.css'
 import ReactTooltip from 'react-tooltip'
@@ -17,13 +17,17 @@ function Sidebar (props) {
     onClickSettings
   } = props
   const [collapsed, setCollapsed] = useState(false)
-  const [selectedItem, setSelectedItem] = useState(defaultSelected)
+  const [selectedItem, setSelectedItem] = useState(null)
 
-  function onClickItemSelected (index) {
-    setSelectedItem(index)
-    onClickItemSelectedParent(index)
+  function onClickItemSelected (item) {
+    setSelectedItem(item.id)
+    onClickItemSelectedParent(item.id)
   }
 
+  useEffect(() => {
+    setSelectedItem(defaultSelected)
+  }, [defaultSelected])
+
   return (
     <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
       {collapsed
@@ -63,11 +67,11 @@ function Sidebar (props) {
               {title}
             </div>
             <div className={styles.items} data-test-id='lateral-bar-items'>
-              {items.map((item, index) => {
-                const isSelected = selectedItem === index
+              {items.map(item => {
+                const isSelected = selectedItem === item.id
                 return (
-                  <React.Fragment key={index}>
-                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
+                  <React.Fragment key={item.id}>
+                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
                       {item.iconName && (<PlatformaticIcon
                         iconName={item.iconName}
                         color={isSelected ? 'green' : 'white'}
@@ -114,18 +118,20 @@ Sidebar.propTypes = {
   /**
    * defaultSelected
    */
-  defaultSelected: PropTypes.number,
+  defaultSelected: PropTypes.string,
   /**
    * addTitle
    */
   addTitle: PropTypes.string,
   /**
    * items: array with keys
+   * id: id of the worspacedSeleted
    * title: name to display
    * subtitle: secondary title
    * icon: what Icon
    */
   items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
     title: PropTypes.string,
     subtitle: PropTypes.string,
     iconName: PropTypes.string
@@ -147,7 +153,7 @@ Sidebar.propTypes = {
 
 Sidebar.defaultProps = {
   title: '',
-  defaultSelected: 0,
+  defaultSelected: null,
   onClickItemSelectedParent: () => {},
   items: [],
   onClickAdd: () => {},

package/src/stories/Sidebar.stories.jsx

@@ -36,9 +36,9 @@ EmptySidebar.args = {
 
 const FullSidebarTemplate = (args) => {
   const [items, setItems] = useState([
-    { iconName: 'WorkspaceStaticIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
-    { title: 'Title number 2', subTitle: 'Subtitle 2' },
-    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'WorkspaceDynamicIcon' }
+    { id: '1', iconName: 'WorkspaceStaticIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    { id: '2', title: 'Title number 2', subTitle: 'Subtitle 2' },
+    { id: '3', title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'WorkspaceDynamicIcon' }
   ])
   function onClickAdd () {
     const tmpItem = items.map(item => item)
@@ -59,3 +59,18 @@ FullSidebar.args = {
   onClickItemSelected: (index) => alert('selected: ' + index),
   onClickSettings: () => alert('settings')
 }
+
+export const AlreadySelected = Template.bind({})
+
+AlreadySelected.args = {
+  title: 'Sidebar bar Full',
+  addTitle: 'Create',
+  defaultSelected: '3',
+  items: [
+    { id: '1', iconName: 'WorkspaceStaticIcon', title: 'Static 1', subTitle: 'Subtitle 1' },
+    { id: '2', iconName: 'WorkspaceStaticIcon', title: 'Static 2', subTitle: 'Subtitle 2' },
+    { id: '3', iconName: 'WorkspaceDynamicIcon', title: 'Dynamic', subTitle: 'Subtitle 3' }
+  ],
+  onClickItemSelected: (index) => alert('selected: ' + index),
+  onClickSettings: () => alert('settings')
+}