@platformatic/ui-components 0.1.66 → 0.1.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Sidebar.jsx +12 -6
  3. package/src/components/Sidebar.module.css +4 -1
  4. package/src/stories/Sidebar.stories.jsx +2 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.66",
4
+ "version": "0.1.67",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Sidebar.jsx CHANGED
@@ -18,10 +18,12 @@ function Sidebar (props) {
18
18
  items,
19
19
  onClickAdd,
20
20
  addTitle,
21
- onClickSettings
21
+ onClickSettings,
22
+ disableClickAdd
22
23
  } = props
23
24
  const [collapsed, setCollapsed] = useState(false)
24
25
  const [selectedItem, setSelectedItem] = useState(null)
26
+ const disabledCreateButton = disableClickAdd ? styles.disabled : ''
25
27
 
26
28
  function onClickItemSelected (item) {
27
29
  setSelectedItem(item.id)
@@ -95,13 +97,13 @@ function Sidebar (props) {
95
97
  </React.Fragment>
96
98
  )
97
99
  })}
98
- {/* <Button label='Add' buttonClass='transparent' icon={faPlus} color='white' size='small' inClick={onClickAdd}/> */}
99
- <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed}`} onClick={onClickAdd}>
100
+ <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton}`} onClick={onClickAdd} disabled={disableClickAdd}>
100
101
  <PlatformaticIcon
101
102
  iconName='CircleAddIcon'
102
103
  color='white'
103
104
  size='medium'
104
105
  tip={addTitle}
106
+ onClick={null}
105
107
  />
106
108
  {!collapsed && <span className={styles.item}>{addTitle}</span>}
107
109
  </button>
@@ -158,8 +160,11 @@ Sidebar.propTypes = {
158
160
  /**
159
161
  * Apply onClickSettings: function called clicking on Settings button
160
162
  */
161
- onClickSettings: PropTypes.func
162
-
163
+ onClickSettings: PropTypes.func,
164
+ /**
165
+ * disableClickAdd
166
+ */
167
+ disableClickAdd: PropTypes.bool
163
168
  }
164
169
 
165
170
  Sidebar.defaultProps = {
@@ -170,7 +175,8 @@ Sidebar.defaultProps = {
170
175
  items: [],
171
176
  onClickAdd: () => {},
172
177
  addTitle: 'Add',
173
- onClickSettings: () => {}
178
+ onClickSettings: () => {},
179
+ disableClickAdd: false
174
180
  }
175
181
 
176
182
  export default Sidebar
package/src/components/Sidebar.module.css CHANGED
@@ -26,7 +26,10 @@
26
26
  @apply flex items-center justify-start border-0 rounded-md w-full py-1 hover:bg-white hover:bg-opacity-20;
27
27
  }
28
28
  .buttonCreate {
29
- @apply flex items-center justify-start border-0 w-full pt-1 pb-4;
29
+ @apply flex items-center justify-start border-0 w-full pt-1 pb-4 cursor-pointer;
30
+ }
31
+ .disabled {
32
+ @apply opacity-30 cursor-default;
30
33
  }
31
34
  .buttonItemCollapsed {
32
35
  @apply w-auto;
package/src/stories/Sidebar.stories.jsx CHANGED
@@ -57,7 +57,8 @@ FullSidebar.args = {
57
57
  title: 'Sidebar bar Full',
58
58
  addTitle: 'Create',
59
59
  onClickItemSelected: (index) => alert('selected: ' + index),
60
- onClickSettings: () => alert('settings')
60
+ onClickSettings: () => alert('settings'),
61
+ disableClickAdd: true
61
62
  }
62
63
 
63
64
  export const AlreadySelected = Template.bind({})