@platformatic/ui-components 0.8.5 → 0.8.7
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.
- package/dist/assets/{index-C8-hJodH.js → index-CwsXXQCE.js} +7 -7
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/forms/Select.jsx +25 -3
- package/src/components/icons/PodhealthIcon.jsx +93 -0
- package/src/components/icons/index.js +2 -0
- package/src/stories/forms/Select.stories.jsx +2 -1
package/dist/index.html
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
6
|
<title>Platformatic UI Components</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-CwsXXQCE.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-Bj5xxPry.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -28,8 +28,10 @@ function Select ({
|
|
|
28
28
|
backgroundColor = WHITE,
|
|
29
29
|
inputTextClassName = '',
|
|
30
30
|
beforeIcon = {},
|
|
31
|
-
paddingClass = ''
|
|
31
|
+
paddingClass = '',
|
|
32
|
+
handleClickOutside = false
|
|
32
33
|
}) {
|
|
34
|
+
const wrapperRef = useRef(null)
|
|
33
35
|
const inputRef = useRef()
|
|
34
36
|
const [showOptions, setShowOptions] = useState(false)
|
|
35
37
|
// eslint-disable-next-line no-unused-vars
|
|
@@ -105,6 +107,22 @@ function Select ({
|
|
|
105
107
|
}
|
|
106
108
|
}, [value])
|
|
107
109
|
|
|
110
|
+
useEffect(() => {
|
|
111
|
+
if (showOptions && handleClickOutside) {
|
|
112
|
+
function innerHandleClickOutside (event) {
|
|
113
|
+
if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
|
|
114
|
+
setShowOptions(false)
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
// Bind the event listener
|
|
118
|
+
document.addEventListener('mousedown', innerHandleClickOutside)
|
|
119
|
+
return () => {
|
|
120
|
+
// Unbind the event listener on clean up
|
|
121
|
+
document.removeEventListener('mousedown', innerHandleClickOutside)
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}, [handleClickOutside, showOptions])
|
|
125
|
+
|
|
108
126
|
useEffect(() => {
|
|
109
127
|
if (disabled) {
|
|
110
128
|
const className = normalClassName() + ' ' + commonStyles['apply-opacity-30']
|
|
@@ -170,7 +188,7 @@ function Select ({
|
|
|
170
188
|
}
|
|
171
189
|
|
|
172
190
|
return (
|
|
173
|
-
<div className={containerClassName} {...dataProps}>
|
|
191
|
+
<div className={containerClassName} {...dataProps} ref={wrapperRef}>
|
|
174
192
|
<div className={wrapperClassName}>
|
|
175
193
|
{beforeIcon?.iconName && getBeforeIcon()}
|
|
176
194
|
<input type='text' name={name} value={value} className={inputClassName} ref={inputRef} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} readOnly />
|
|
@@ -285,7 +303,11 @@ Select.propTypes = {
|
|
|
285
303
|
/**
|
|
286
304
|
* paddingClass
|
|
287
305
|
*/
|
|
288
|
-
paddingClass: PropTypes.string
|
|
306
|
+
paddingClass: PropTypes.string,
|
|
307
|
+
/**
|
|
308
|
+
* handleClickOutside
|
|
309
|
+
*/
|
|
310
|
+
handleClickOutside: PropTypes.bool
|
|
289
311
|
}
|
|
290
312
|
|
|
291
313
|
export default Select
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
|
|
5
|
+
|
|
6
|
+
const PodhealthIcon = ({
|
|
7
|
+
color = MAIN_DARK_BLUE,
|
|
8
|
+
size = MEDIUM,
|
|
9
|
+
disabled = false,
|
|
10
|
+
inactive = false
|
|
11
|
+
}) => {
|
|
12
|
+
let className = `${styles.svgClassName} ` + styles[`${color}`]
|
|
13
|
+
if (disabled) {
|
|
14
|
+
className += ` ${styles.iconDisabled}`
|
|
15
|
+
}
|
|
16
|
+
if (inactive) {
|
|
17
|
+
className += ` ${styles.iconInactive}`
|
|
18
|
+
}
|
|
19
|
+
let icon = <></>
|
|
20
|
+
|
|
21
|
+
switch (size) {
|
|
22
|
+
case SMALL:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={16}
|
|
26
|
+
height={16}
|
|
27
|
+
viewBox='0 0 16 16'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<path d='M8 2L3 5L3 11L8 14L13 11L13 8L13 5L8 2Z' stroke='none' strokeLinejoin='round' />
|
|
33
|
+
<path d='M4.5 8H5.5L7 5L8 11L9.5 6L10 8H11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<path d='M12 3L4.5 7.5L4.5 16.5L12 21L19.5 16.5L19.5 12L19.5 7.5L12 3Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
|
|
48
|
+
<path d='M6.75 12H8.25L10.5 7.5L12 16.5L14.25 9L15 12H17.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
49
|
+
</svg>
|
|
50
|
+
)
|
|
51
|
+
break
|
|
52
|
+
case LARGE:
|
|
53
|
+
icon = (
|
|
54
|
+
<svg
|
|
55
|
+
width={40}
|
|
56
|
+
height={40}
|
|
57
|
+
viewBox='0 0 40 40'
|
|
58
|
+
fill='none'
|
|
59
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
60
|
+
className={className}
|
|
61
|
+
>
|
|
62
|
+
<path d='M20 5L7.5 12.5L7.5 27.5L20 35L32.5 27.5L32.5 20L32.5 12.5L20 5Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
|
|
63
|
+
<path d='M11.25 20H13.75L17.5 12.5L20 27.5L23.75 15L25 20H28.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
break
|
|
67
|
+
|
|
68
|
+
default:
|
|
69
|
+
break
|
|
70
|
+
}
|
|
71
|
+
return icon
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
PodhealthIcon.propTypes = {
|
|
75
|
+
/**
|
|
76
|
+
* color of text, icon and borders
|
|
77
|
+
*/
|
|
78
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
79
|
+
/**
|
|
80
|
+
* Size
|
|
81
|
+
*/
|
|
82
|
+
size: PropTypes.oneOf(SIZES),
|
|
83
|
+
/**
|
|
84
|
+
* disabled
|
|
85
|
+
*/
|
|
86
|
+
disabled: PropTypes.bool,
|
|
87
|
+
/**
|
|
88
|
+
* inactive
|
|
89
|
+
*/
|
|
90
|
+
inactive: PropTypes.bool
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export default PodhealthIcon
|
|
@@ -141,6 +141,7 @@ import PlatformaticRuntimeIcon from './PlatformaticRuntimeIcon'
|
|
|
141
141
|
import PlatformaticServiceIcon from './PlatformaticServiceIcon'
|
|
142
142
|
import PlayIcon from './PlayIcon'
|
|
143
143
|
import PodDetailsIcon from './PodDetailsIcon'
|
|
144
|
+
import PodhealthIcon from './PodhealthIcon'
|
|
144
145
|
import PodLogsIcon from './PodLogsIcon'
|
|
145
146
|
import PodMetricsIcon from './PodMetricsIcon'
|
|
146
147
|
import PodServicesIcon from './PodServicesIcon'
|
|
@@ -348,6 +349,7 @@ export default {
|
|
|
348
349
|
PlayIcon,
|
|
349
350
|
PodPerformanceIcon,
|
|
350
351
|
PodDetailsIcon,
|
|
352
|
+
PodhealthIcon,
|
|
351
353
|
PodLogsIcon,
|
|
352
354
|
PodMetricsIcon,
|
|
353
355
|
PodServicesIcon,
|