@bpmn-io/properties-panel 0.6.0 → 0.8.1
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/CHANGELOG.md +18 -0
- package/assets/properties-panel.css +112 -3
- package/lib/components/DropdownButton.js +109 -0
- package/lib/components/DropdownButton.js.map +1 -0
- package/lib/components/HeaderButton.js +16 -0
- package/lib/components/HeaderButton.js.map +1 -0
- package/lib/components/entries/Checkbox.js +8 -3
- package/lib/components/entries/Checkbox.js.map +1 -1
- package/lib/components/entries/Select.js +19 -13
- package/lib/components/entries/Select.js.map +1 -1
- package/lib/components/entries/TextArea.js +16 -11
- package/lib/components/entries/TextArea.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,24 @@ All notable changes to [`@bpmn-io/properties-panel`](https://github.com/bpmn-io/
|
|
|
6
6
|
|
|
7
7
|
___Note:__ Yet to be released changes appear here._
|
|
8
8
|
|
|
9
|
+
## 0.8.1
|
|
10
|
+
|
|
11
|
+
* `CHORE`: add outline to checkboxes ([#120](https://github.com/bpmn-io/properties-panel/pull/120))
|
|
12
|
+
* `CHORE`: add missing description styles ([#121](https://github.com/bpmn-io/properties-panel/pull/121))
|
|
13
|
+
|
|
14
|
+
## 0.8.0
|
|
15
|
+
|
|
16
|
+
* `FEAT`: allow to disable textarea, select, and checkbox ([#118](https://github.com/bpmn-io/properties-panel/pull/118))
|
|
17
|
+
|
|
18
|
+
## 0.7.0
|
|
19
|
+
|
|
20
|
+
* `FEAT`: add dropdown button ([#116](https://github.com/bpmn-io/properties-panel/pull/116))
|
|
21
|
+
* `FEAT`: add header button ([#116](https://github.com/bpmn-io/properties-panel/pull/116))
|
|
22
|
+
|
|
23
|
+
## 0.6.1
|
|
24
|
+
|
|
25
|
+
* `FIX`: style disabled inputs ([#115](https://github.com/bpmn-io/properties-panel/pull/115))
|
|
26
|
+
|
|
9
27
|
## 0.6.0
|
|
10
28
|
|
|
11
29
|
* `FEAT`: accept callbacks instead of containers for `add` and `remove` props ([#108](https://github.com/bpmn-io/properties-panel/issues/108))
|
|
@@ -29,7 +29,12 @@
|
|
|
29
29
|
|
|
30
30
|
--text-base-color: var(--color-grey-225-10-15);
|
|
31
31
|
--text-error-color: var(--color-red-360-100-45);
|
|
32
|
+
--link-color: var(--color-blue-205-100-50);
|
|
33
|
+
|
|
32
34
|
--description-color: var(--color-grey-225-10-35);
|
|
35
|
+
--description-code-background-color: var(--color-grey-225-10-97);
|
|
36
|
+
--description-code-border-color: var(--color-grey-225-10-85);
|
|
37
|
+
--description-list-item-color: var(--color-grey-225-10-35);
|
|
33
38
|
|
|
34
39
|
--placeholder-color: var(--color-grey-225-10-75);
|
|
35
40
|
|
|
@@ -68,6 +73,10 @@
|
|
|
68
73
|
--input-error-border-color: var(--color-red-360-100-45);
|
|
69
74
|
--input-error-focus-border-color: var(--color-red-360-100-45);
|
|
70
75
|
|
|
76
|
+
--input-disabled-color: var(--color-grey-225-10-55);
|
|
77
|
+
--input-disabled-background-color: var(--color-grey-225-10-97);
|
|
78
|
+
--input-disabled-border-color: var(--color-grey-225-10-90);
|
|
79
|
+
|
|
71
80
|
--toggle-switch-on-background-color: var(--color-blue-205-100-50);
|
|
72
81
|
--toggle-switch-off-background-color: var(--color-grey-225-10-75);
|
|
73
82
|
--toggle-switch-switcher-background-color: var(--color-white);
|
|
@@ -83,6 +92,10 @@
|
|
|
83
92
|
--list-entry-add-entry-label-color: var(--color-white);
|
|
84
93
|
--list-entry-add-entry-background-color: var(--color-blue-205-100-50);
|
|
85
94
|
--list-entry-add-entry-fill-color: var(--color-white);
|
|
95
|
+
|
|
96
|
+
--dropdown-item-background-color: var(--color-white);
|
|
97
|
+
--dropdown-item-hover-background-color: var(--color-grey-225-10-95);
|
|
98
|
+
--dropdown-separator-background-color: var(--color-grey-225-10-75);
|
|
86
99
|
|
|
87
100
|
--text-size-base: 14px;
|
|
88
101
|
--text-size-small: 13px;
|
|
@@ -201,7 +214,6 @@
|
|
|
201
214
|
font-size: var(--text-size-base);
|
|
202
215
|
height: 32px;
|
|
203
216
|
user-select: none;
|
|
204
|
-
overflow: hidden;
|
|
205
217
|
justify-content: space-between;
|
|
206
218
|
}
|
|
207
219
|
|
|
@@ -225,7 +237,6 @@
|
|
|
225
237
|
justify-content: center;
|
|
226
238
|
align-items: center;
|
|
227
239
|
align-self: center;
|
|
228
|
-
font-size: var(--text-size-small);
|
|
229
240
|
height: 22px;
|
|
230
241
|
line-height: 22px;
|
|
231
242
|
min-width: 22px;
|
|
@@ -353,7 +364,10 @@
|
|
|
353
364
|
margin: 2px 0 1px;
|
|
354
365
|
}
|
|
355
366
|
|
|
356
|
-
.bio-properties-panel-description
|
|
367
|
+
.bio-properties-panel-description,
|
|
368
|
+
.bio-properties-panel-description p,
|
|
369
|
+
.bio-properties-panel-description span,
|
|
370
|
+
.bio-properties-panel-description div {
|
|
357
371
|
color: var(--description-color);
|
|
358
372
|
display: block;
|
|
359
373
|
margin: 2px 0 4px;
|
|
@@ -362,6 +376,34 @@
|
|
|
362
376
|
font-size: var(--text-size-small);
|
|
363
377
|
}
|
|
364
378
|
|
|
379
|
+
.bio-properties-panel-description code {
|
|
380
|
+
color: var(--description-color);
|
|
381
|
+
font-family: var(--font-family);
|
|
382
|
+
font-size: var(--text-size-small);
|
|
383
|
+
line-height: var(--line-height-condensed);
|
|
384
|
+
padding: 0 2px;
|
|
385
|
+
background-color: var(--description-code-background-color);
|
|
386
|
+
border: 1px solid var(--description-code-border-color);
|
|
387
|
+
border-radius: 3px;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.bio-properties-panel-description ul {
|
|
391
|
+
padding: 0;
|
|
392
|
+
margin: 0 0 0 12px;
|
|
393
|
+
list-style-type: disc;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.bio-properties-panel-description li {
|
|
397
|
+
color: var(--description-list-item-color);
|
|
398
|
+
margin: 0 0 0 12px;
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.bio-properties-panel-description a {
|
|
402
|
+
color: var(--link-color);
|
|
403
|
+
font-size: var(--text-size-small);
|
|
404
|
+
text-decoration: underline;
|
|
405
|
+
}
|
|
406
|
+
|
|
365
407
|
.bio-properties-panel-input {
|
|
366
408
|
padding: 3px 6px 2px;
|
|
367
409
|
border: 1px solid var(--input-border-color);
|
|
@@ -385,6 +427,12 @@ textarea.bio-properties-panel-input,
|
|
|
385
427
|
border: 1px solid var(--input-focus-border-color);
|
|
386
428
|
}
|
|
387
429
|
|
|
430
|
+
.bio-properties-panel-input:disabled {
|
|
431
|
+
border-color: var(--input-disabled-border-color);
|
|
432
|
+
background-color: var(--input-disabled-background-color);
|
|
433
|
+
color: var(--input-disabled-color);
|
|
434
|
+
}
|
|
435
|
+
|
|
388
436
|
select.bio-properties-panel-input {
|
|
389
437
|
padding: 4px 6px;
|
|
390
438
|
}
|
|
@@ -398,6 +446,11 @@ select.bio-properties-panel-input {
|
|
|
398
446
|
vertical-align: middle;
|
|
399
447
|
}
|
|
400
448
|
|
|
449
|
+
.bio-properties-panel-input[type="checkbox"]:focus {
|
|
450
|
+
outline: 1px solid var(--input-focus-border-color);
|
|
451
|
+
outline-offset: 0;
|
|
452
|
+
}
|
|
453
|
+
|
|
401
454
|
.bio-properties-panel-checkbox > .bio-properties-panel-label {
|
|
402
455
|
display: inline-block;
|
|
403
456
|
font-size: var(--text-size-base);
|
|
@@ -778,3 +831,59 @@ textarea.bio-properties-panel-input {
|
|
|
778
831
|
border-bottom-left-radius: 2px;
|
|
779
832
|
border-bottom-right-radius: 2px;
|
|
780
833
|
}
|
|
834
|
+
|
|
835
|
+
.bio-properties-panel-dropdown-button {
|
|
836
|
+
position: relative;
|
|
837
|
+
|
|
838
|
+
--dropdown-button-margin: 5px;
|
|
839
|
+
}
|
|
840
|
+
|
|
841
|
+
.bio-properties-panel-dropdown-button:not(.open) .bio-properties-panel-dropdown-button__menu {
|
|
842
|
+
display: none;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.bio-properties-panel-dropdown-button__menu {
|
|
846
|
+
min-width: calc(100% - var(--dropdown-button-margin) * 2);
|
|
847
|
+
max-width: 240px;
|
|
848
|
+
|
|
849
|
+
position: absolute;
|
|
850
|
+
top: calc(100% - var(--dropdown-button-margin));
|
|
851
|
+
right: var(--dropdown-button-margin);
|
|
852
|
+
z-index: 101;
|
|
853
|
+
|
|
854
|
+
background-color: var(--dropdown-item-background-color);
|
|
855
|
+
|
|
856
|
+
padding: 8px 0;
|
|
857
|
+
|
|
858
|
+
box-shadow: 0 1px 4px 0 var(--color-grey-225-10-85), 0 2px 16px 0 var(--color-grey-225-10-75)
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
.bio-properties-panel-dropdown-button__menu-item {
|
|
862
|
+
display: block;
|
|
863
|
+
width: 100%;
|
|
864
|
+
padding: 4px 12px;
|
|
865
|
+
|
|
866
|
+
font-size: var(--text-size-small);
|
|
867
|
+
appearance: revert;
|
|
868
|
+
border: unset;
|
|
869
|
+
background: unset;
|
|
870
|
+
text-align: unset;
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
.bio-properties-panel-dropdown-button__menu-item--separator {
|
|
874
|
+
width: 100%;
|
|
875
|
+
height: 1px;
|
|
876
|
+
|
|
877
|
+
padding: 0;
|
|
878
|
+
margin: 8px 0;
|
|
879
|
+
|
|
880
|
+
background-color: var(--dropdown-separator-background-color);
|
|
881
|
+
}
|
|
882
|
+
|
|
883
|
+
.bio-properties-panel-dropdown-button__menu-item--actionable {
|
|
884
|
+
font-size: var(--text-size-base);
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
.bio-properties-panel-dropdown-button__menu-item--actionable:hover {
|
|
888
|
+
background-color: var(--dropdown-item-hover-background-color);
|
|
889
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from 'preact/hooks';
|
|
2
|
+
import classnames from 'classnames';
|
|
3
|
+
/**
|
|
4
|
+
*
|
|
5
|
+
* @param {object} props
|
|
6
|
+
* @param {string} [props.class]
|
|
7
|
+
* @param {import('preact').Component[]} [props.menuItems]
|
|
8
|
+
* @returns
|
|
9
|
+
*/
|
|
10
|
+
|
|
11
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
12
|
+
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
13
|
+
export function DropdownButton(props) {
|
|
14
|
+
const {
|
|
15
|
+
class: className,
|
|
16
|
+
children,
|
|
17
|
+
menuItems = []
|
|
18
|
+
} = props;
|
|
19
|
+
const dropdownRef = useRef(null);
|
|
20
|
+
const menuRef = useRef(null);
|
|
21
|
+
const [open, setOpen] = useState(false);
|
|
22
|
+
|
|
23
|
+
const close = () => setOpen(false);
|
|
24
|
+
|
|
25
|
+
function onDropdownToggle(event) {
|
|
26
|
+
if (menuRef.current && menuRef.current.contains(event.target)) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
event.stopPropagation();
|
|
31
|
+
setOpen(open => !open);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
function onActionClick(event, action) {
|
|
35
|
+
event.stopPropagation();
|
|
36
|
+
close();
|
|
37
|
+
action();
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
useGlobalClick([dropdownRef.current], () => close());
|
|
41
|
+
return _jsxs("div", {
|
|
42
|
+
class: classnames('bio-properties-panel-dropdown-button', {
|
|
43
|
+
open
|
|
44
|
+
}, className),
|
|
45
|
+
onClick: onDropdownToggle,
|
|
46
|
+
ref: dropdownRef,
|
|
47
|
+
children: [children, _jsx("div", {
|
|
48
|
+
class: "bio-properties-panel-dropdown-button__menu",
|
|
49
|
+
ref: menuRef,
|
|
50
|
+
children: menuItems.map((item, index) => _jsx(MenuItem, {
|
|
51
|
+
onClick: onActionClick,
|
|
52
|
+
item: item
|
|
53
|
+
}, index))
|
|
54
|
+
})]
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function MenuItem({
|
|
59
|
+
item,
|
|
60
|
+
onClick
|
|
61
|
+
}) {
|
|
62
|
+
if (item.separator) {
|
|
63
|
+
return _jsx("div", {
|
|
64
|
+
class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator"
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
if (item.action) {
|
|
69
|
+
return _jsx("button", {
|
|
70
|
+
class: "bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable",
|
|
71
|
+
onClick: event => onClick(event, item.action),
|
|
72
|
+
children: item.entry
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return _jsx("div", {
|
|
77
|
+
class: "bio-properties-panel-dropdown-button__menu-item",
|
|
78
|
+
children: item.entry
|
|
79
|
+
});
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
*
|
|
83
|
+
* @param {Array<null | Element>} ignoredElements
|
|
84
|
+
* @param {Function} callback
|
|
85
|
+
*/
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
function useGlobalClick(ignoredElements, callback) {
|
|
89
|
+
useEffect(() => {
|
|
90
|
+
/**
|
|
91
|
+
* @param {MouseEvent} event
|
|
92
|
+
*/
|
|
93
|
+
function listener(event) {
|
|
94
|
+
if (ignoredElements.some(element => element && element.contains(event.target))) {
|
|
95
|
+
return;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
callback();
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
document.addEventListener('click', listener, {
|
|
102
|
+
capture: true
|
|
103
|
+
});
|
|
104
|
+
return () => document.removeEventListener('click', listener, {
|
|
105
|
+
capture: true
|
|
106
|
+
});
|
|
107
|
+
}, [...ignoredElements, callback]);
|
|
108
|
+
}
|
|
109
|
+
//# sourceMappingURL=DropdownButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/DropdownButton.js"],"names":["useEffect","useRef","useState","classnames","DropdownButton","props","class","className","children","menuItems","dropdownRef","menuRef","open","setOpen","close","onDropdownToggle","event","current","contains","target","stopPropagation","onActionClick","action","useGlobalClick","map","item","index","MenuItem","onClick","separator","entry","ignoredElements","callback","listener","some","element","document","addEventListener","capture","removeEventListener"],"mappings":"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","sourcesContent":["import {\n useEffect,\n useRef,\n useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\n/**\n *\n * @param {object} props\n * @param {string} [props.class]\n * @param {import('preact').Component[]} [props.menuItems]\n * @returns\n */\nexport function DropdownButton(props) {\n const {\n class: className,\n children,\n menuItems = []\n } = props;\n\n const dropdownRef = useRef(null);\n const menuRef = useRef(null);\n\n const [ open, setOpen ] = useState(false);\n const close = () => setOpen(false);\n\n function onDropdownToggle(event) {\n if (menuRef.current && menuRef.current.contains(event.target)) {\n return;\n }\n\n event.stopPropagation();\n\n setOpen(open => !open);\n }\n\n function onActionClick(event, action) {\n event.stopPropagation();\n\n close();\n action();\n }\n\n useGlobalClick([ dropdownRef.current ], () => close());\n\n return (\n <div\n class={ classnames('bio-properties-panel-dropdown-button', { open }, className) }\n onClick={ onDropdownToggle }\n ref={ dropdownRef }\n >\n { children }\n <div class=\"bio-properties-panel-dropdown-button__menu\" ref={ menuRef }>\n { menuItems.map((item, index) => (\n <MenuItem onClick={ onActionClick } item={ item } key={ index } />\n )) }\n </div>\n </div>\n );\n}\n\nfunction MenuItem({ item, onClick }) {\n if (item.separator) {\n return <div class=\"bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--separator\" />;\n }\n\n if (item.action) {\n return (<button\n class=\"bio-properties-panel-dropdown-button__menu-item bio-properties-panel-dropdown-button__menu-item--actionable\"\n onClick={ event => onClick(event, item.action) }\n >\n {item.entry}\n </button>);\n }\n\n return <div\n class=\"bio-properties-panel-dropdown-button__menu-item\"\n >\n {item.entry}\n </div>;\n}\n\n/**\n *\n * @param {Array<null | Element>} ignoredElements\n * @param {Function} callback\n */\nfunction useGlobalClick(ignoredElements, callback) {\n useEffect(() => {\n\n /**\n * @param {MouseEvent} event\n */\n function listener(event) {\n if (ignoredElements.some(element => element && element.contains(event.target))) {\n return;\n }\n\n callback();\n }\n\n document.addEventListener('click', listener, { capture: true });\n\n return () => document.removeEventListener('click', listener, { capture: true });\n }, [ ...ignoredElements, callback ]);\n}\n"],"file":"DropdownButton.js"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import classnames from 'classnames';
|
|
2
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
3
|
+
export function HeaderButton(props) {
|
|
4
|
+
const {
|
|
5
|
+
children = null,
|
|
6
|
+
class: classname,
|
|
7
|
+
onClick = () => {},
|
|
8
|
+
...otherProps
|
|
9
|
+
} = props;
|
|
10
|
+
return _jsx("button", { ...otherProps,
|
|
11
|
+
onClick: onClick,
|
|
12
|
+
class: classnames('bio-properties-panel-group-header-button', classname),
|
|
13
|
+
children: children
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=HeaderButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/HeaderButton.js"],"names":["classnames","HeaderButton","props","children","class","classname","onClick","otherProps"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,YAAvB;;AAEA,OAAO,SAASC,YAAT,CAAsBC,KAAtB,EAA6B;AAClC,QAAM;AACJC,IAAAA,QAAQ,GAAG,IADP;AAEJC,IAAAA,KAAK,EAAEC,SAFH;AAGJC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAHd;AAIJ,OAAGC;AAJC,MAKFL,KALJ;AAOA,SAAO,oBACAK,UADA;AAEL,IAAA,OAAO,EAAGD,OAFL;AAGL,IAAA,KAAK,EAAGN,UAAU,CAAC,0CAAD,EAA6CK,SAA7C,CAHb;AAAA,cAIHF;AAJG,IAAP;AAMD","sourcesContent":["import classnames from 'classnames';\n\nexport function HeaderButton(props) {\n const {\n children = null,\n class: classname,\n onClick = () => {},\n ...otherProps\n } = props;\n\n return <button\n { ...otherProps }\n onClick={ onClick }\n class={ classnames('bio-properties-panel-group-header-button', classname) }>\n { children }\n </button>;\n}\n"],"file":"HeaderButton.js"}
|
|
@@ -6,6 +6,7 @@ function Checkbox(props) {
|
|
|
6
6
|
id,
|
|
7
7
|
label,
|
|
8
8
|
onChange,
|
|
9
|
+
disabled,
|
|
9
10
|
value = false
|
|
10
11
|
} = props;
|
|
11
12
|
|
|
@@ -23,7 +24,8 @@ function Checkbox(props) {
|
|
|
23
24
|
type: "checkbox",
|
|
24
25
|
class: "bio-properties-panel-input",
|
|
25
26
|
onChange: handleChange,
|
|
26
|
-
checked: value
|
|
27
|
+
checked: value,
|
|
28
|
+
disabled: disabled
|
|
27
29
|
}), _jsx("label", {
|
|
28
30
|
for: prefixId(id),
|
|
29
31
|
class: "bio-properties-panel-label",
|
|
@@ -39,6 +41,7 @@ function Checkbox(props) {
|
|
|
39
41
|
* @param {String} props.label
|
|
40
42
|
* @param {Function} props.getValue
|
|
41
43
|
* @param {Function} props.setValue
|
|
44
|
+
* @param {boolean} [props.disabled]
|
|
42
45
|
*/
|
|
43
46
|
|
|
44
47
|
|
|
@@ -49,7 +52,8 @@ export default function CheckboxEntry(props) {
|
|
|
49
52
|
description,
|
|
50
53
|
label,
|
|
51
54
|
getValue,
|
|
52
|
-
setValue
|
|
55
|
+
setValue,
|
|
56
|
+
disabled
|
|
53
57
|
} = props;
|
|
54
58
|
const value = getValue(element);
|
|
55
59
|
return _jsxs("div", {
|
|
@@ -59,7 +63,8 @@ export default function CheckboxEntry(props) {
|
|
|
59
63
|
id: id,
|
|
60
64
|
label: label,
|
|
61
65
|
onChange: setValue,
|
|
62
|
-
value: value
|
|
66
|
+
value: value,
|
|
67
|
+
disabled: disabled
|
|
63
68
|
}), description && _jsx("div", {
|
|
64
69
|
class: "bio-properties-panel-description",
|
|
65
70
|
children: description
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/entries/Checkbox.js"],"names":["Checkbox","props","id","label","onChange","value","handleChange","target","checked","prefixId","CheckboxEntry","element","description","getValue","setValue","isEdited","node"],"mappings":";;;AAAA,SAASA,QAAT,CAAkBC,KAAlB,EAAyB;AACvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,KAAK,GAAG;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/Checkbox.js"],"names":["Checkbox","props","id","label","onChange","disabled","value","handleChange","target","checked","prefixId","CheckboxEntry","element","description","getValue","setValue","isEdited","node"],"mappings":";;;AAAA,SAASA,QAAT,CAAkBC,KAAlB,EAAyB;AACvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,KAAK,GAAG;AALJ,MAMFL,KANJ;;AAQA,QAAMM,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCJ,IAAAA,QAAQ,CAACI,MAAM,CAACC,OAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AACE,MAAA,EAAE,EAAGC,QAAQ,CAACR,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,KAAK,EAAC,4BAJR;AAKE,MAAA,QAAQ,EAAGK,YALb;AAME,MAAA,OAAO,EAAGD,KANZ;AAOE,MAAA,QAAQ,EAAGD;AAPb,MADF,EASE;AAAO,MAAA,GAAG,EAAGK,QAAQ,CAACR,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MATF;AAAA,IADF;AAaD;AAGD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASQ,aAAT,CAAuBV,KAAvB,EAA8B;AAC3C,QAAM;AACJW,IAAAA,OADI;AAEJV,IAAAA,EAFI;AAGJW,IAAAA,WAHI;AAIJV,IAAAA,KAJI;AAKJW,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJV,IAAAA;AAPI,MAQFJ,KARJ;AAUA,QAAMK,KAAK,GAAGQ,QAAQ,CAACF,OAAD,CAAtB;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,gEAAX;AAA4E,qBAAgBV,EAA5F;AAAA,eACE,KAAC,QAAD;AAAU,MAAA,EAAE,EAAGA,EAAf;AAAoB,MAAA,KAAK,EAAGC,KAA5B;AAAoC,MAAA,QAAQ,EAAGY,QAA/C;AAA0D,MAAA,KAAK,EAAGT,KAAlE;AAA0E,MAAA,QAAQ,EAAGD;AAArF,MADF,EAEIQ,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MAFnB;AAAA,IADF;AAMD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACR,OAAtB;AACD,C,CAGD;;AAEA,SAASC,QAAT,CAAkBR,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["function Checkbox(props) {\n const {\n id,\n label,\n onChange,\n disabled,\n value = false\n } = props;\n\n const handleChange = ({ target }) => {\n onChange(target.checked);\n };\n\n return (\n <div class=\"bio-properties-panel-checkbox\">\n <input\n id={ prefixId(id) }\n name={ id }\n type=\"checkbox\"\n class=\"bio-properties-panel-input\"\n onChange={ handleChange }\n checked={ value }\n disabled={ disabled } />\n <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n </div>\n );\n}\n\n\n/**\n * @param {Object} props\n * @param {Object} props.element\n * @param {String} props.id\n * @param {String} props.description\n * @param {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {boolean} [props.disabled]\n */\nexport default function CheckboxEntry(props) {\n const {\n element,\n id,\n description,\n label,\n getValue,\n setValue,\n disabled\n } = props;\n\n const value = getValue(element);\n\n return (\n <div class=\"bio-properties-panel-entry bio-properties-panel-checkbox-entry\" data-entry-id={ id }>\n <Checkbox id={ id } label={ label } onChange={ setValue } value={ value } disabled={ disabled } />\n { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n </div>\n );\n}\n\nexport function isEdited(node) {\n return node && !!node.checked;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n return `bio-properties-panel-${ id }`;\n}\n"],"file":"Checkbox.js"}
|
|
@@ -2,18 +2,19 @@ import { jsx as _jsx } from "preact/jsx-runtime";
|
|
|
2
2
|
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
3
3
|
|
|
4
4
|
/**
|
|
5
|
-
* @typedef { { value:
|
|
5
|
+
* @typedef { { value: string, label: string, disabled: boolean } } Option
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* Provides basic select input.
|
|
10
10
|
*
|
|
11
|
-
* @param {
|
|
12
|
-
* @param {
|
|
13
|
-
* @param {
|
|
11
|
+
* @param {object} props
|
|
12
|
+
* @param {string} props.id
|
|
13
|
+
* @param {string} props.label
|
|
14
14
|
* @param {Function} props.onChange
|
|
15
15
|
* @param {Array<Option>} [props.options]
|
|
16
|
-
* @param {
|
|
16
|
+
* @param {string} props.value
|
|
17
|
+
* @param {boolean} [props.disabled]
|
|
17
18
|
*/
|
|
18
19
|
function Select(props) {
|
|
19
20
|
const {
|
|
@@ -21,7 +22,8 @@ function Select(props) {
|
|
|
21
22
|
label,
|
|
22
23
|
onChange,
|
|
23
24
|
options = [],
|
|
24
|
-
value
|
|
25
|
+
value,
|
|
26
|
+
disabled
|
|
25
27
|
} = props;
|
|
26
28
|
|
|
27
29
|
const handleChange = ({
|
|
@@ -42,6 +44,7 @@ function Select(props) {
|
|
|
42
44
|
class: "bio-properties-panel-input",
|
|
43
45
|
onInput: handleChange,
|
|
44
46
|
value: value,
|
|
47
|
+
disabled: disabled,
|
|
45
48
|
children: options.map((option, idx) => {
|
|
46
49
|
return _jsx("option", {
|
|
47
50
|
value: option.value,
|
|
@@ -53,14 +56,15 @@ function Select(props) {
|
|
|
53
56
|
});
|
|
54
57
|
}
|
|
55
58
|
/**
|
|
56
|
-
* @param {
|
|
57
|
-
* @param {
|
|
58
|
-
* @param {
|
|
59
|
-
* @param {
|
|
60
|
-
* @param {
|
|
59
|
+
* @param {object} props
|
|
60
|
+
* @param {object} props.element
|
|
61
|
+
* @param {string} props.id
|
|
62
|
+
* @param {string} [props.description]
|
|
63
|
+
* @param {string} props.label
|
|
61
64
|
* @param {Function} props.getValue
|
|
62
65
|
* @param {Function} props.setValue
|
|
63
66
|
* @param {Function} props.getOptions
|
|
67
|
+
* @param {boolean} [props.disabled]
|
|
64
68
|
*/
|
|
65
69
|
|
|
66
70
|
|
|
@@ -72,7 +76,8 @@ export default function SelectEntry(props) {
|
|
|
72
76
|
label,
|
|
73
77
|
getValue,
|
|
74
78
|
setValue,
|
|
75
|
-
getOptions
|
|
79
|
+
getOptions,
|
|
80
|
+
disabled
|
|
76
81
|
} = props;
|
|
77
82
|
const value = getValue(element);
|
|
78
83
|
const options = getOptions(element);
|
|
@@ -84,7 +89,8 @@ export default function SelectEntry(props) {
|
|
|
84
89
|
label: label,
|
|
85
90
|
value: value,
|
|
86
91
|
onChange: setValue,
|
|
87
|
-
options: options
|
|
92
|
+
options: options,
|
|
93
|
+
disabled: disabled
|
|
88
94
|
}), description && _jsx("div", {
|
|
89
95
|
class: "bio-properties-panel-description",
|
|
90
96
|
children: description
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/entries/Select.js"],"names":["Select","props","id","label","onChange","options","value","handleChange","target","prefixId","map","option","idx","
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/Select.js"],"names":["Select","props","id","label","onChange","options","value","disabled","handleChange","target","prefixId","map","option","idx","SelectEntry","element","description","getValue","setValue","getOptions","isEdited","node"],"mappings":";;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,MAAT,CAAgBC,KAAhB,EAAuB;AACrB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,OAAO,GAAG,EAJN;AAKJC,IAAAA,KALI;AAMJC,IAAAA;AANI,MAOFN,KAPJ;;AASA,QAAMO,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCL,IAAAA,QAAQ,CAACK,MAAM,CAACH,KAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,6BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGI,QAAQ,CAACR,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGO,QAAQ,CAACR,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,KAAK,EAAC,4BAHR;AAIE,MAAA,OAAO,EAAGM,YAJZ;AAKE,MAAA,KAAK,EAAGF,KALV;AAME,MAAA,QAAQ,EAAGC,QANb;AAAA,gBASIF,OAAO,CAACM,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAC3B,eACE;AAEE,UAAA,KAAK,EAAGD,MAAM,CAACN,KAFjB;AAGE,UAAA,QAAQ,EAAGM,MAAM,CAACL,QAHpB;AAAA,oBAIIK,MAAM,CAACT;AAJX,WACQU,GADR,CADF;AAQD,OATD;AATJ,MAFF;AAAA,IADF;AA0BD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,WAAT,CAAqBb,KAArB,EAA4B;AACzC,QAAM;AACJc,IAAAA,OADI;AAEJb,IAAAA,EAFI;AAGJc,IAAAA,WAHI;AAIJb,IAAAA,KAJI;AAKJc,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJC,IAAAA,UAPI;AAQJZ,IAAAA;AARI,MASFN,KATJ;AAWA,QAAMK,KAAK,GAAGW,QAAQ,CAACF,OAAD,CAAtB;AACA,QAAMV,OAAO,GAAGc,UAAU,CAACJ,OAAD,CAA1B;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBb,EAAxD;AAAA,eACE,KAAC,MAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGG,KAHV;AAIE,MAAA,QAAQ,EAAGY,QAJb;AAKE,MAAA,OAAO,EAAGb,OALZ;AAME,MAAA,QAAQ,EAAGE;AANb,MADF,EAQIS,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MARnB;AAAA,IADF;AAYD;AAED,OAAO,SAASI,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACf,KAAtB;AACD,C,CAED;;AAEA,SAASI,QAAT,CAAkBR,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["/**\n * @typedef { { value: string, label: string, disabled: boolean } } Option\n */\n\n/**\n * Provides basic select input.\n *\n * @param {object} props\n * @param {string} props.id\n * @param {string} props.label\n * @param {Function} props.onChange\n * @param {Array<Option>} [props.options]\n * @param {string} props.value\n * @param {boolean} [props.disabled]\n */\nfunction Select(props) {\n const {\n id,\n label,\n onChange,\n options = [],\n value,\n disabled\n } = props;\n\n const handleChange = ({ target }) => {\n onChange(target.value);\n };\n\n return (\n <div class=\"bio-properties-panel-select\">\n <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n <select\n id={ prefixId(id) }\n name={ id }\n class=\"bio-properties-panel-input\"\n onInput={ handleChange }\n value={ value }\n disabled={ disabled }\n >\n {\n options.map((option, idx) => {\n return (\n <option\n key={ idx }\n value={ option.value }\n disabled={ option.disabled }>\n { option.label }\n </option>\n );\n })\n }\n </select>\n </div>\n );\n}\n\n/**\n * @param {object} props\n * @param {object} props.element\n * @param {string} props.id\n * @param {string} [props.description]\n * @param {string} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Function} props.getOptions\n * @param {boolean} [props.disabled]\n */\nexport default function SelectEntry(props) {\n const {\n element,\n id,\n description,\n label,\n getValue,\n setValue,\n getOptions,\n disabled\n } = props;\n\n const value = getValue(element);\n const options = getOptions(element);\n\n return (\n <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n <Select\n id={ id }\n label={ label }\n value={ value }\n onChange={ setValue }\n options={ options }\n disabled={ disabled } />\n { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n </div>\n );\n}\n\nexport function isEdited(node) {\n return node && !!node.value;\n}\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n return `bio-properties-panel-${ id }`;\n}\n"],"file":"Select.js"}
|
|
@@ -11,6 +11,7 @@ function TextArea(props) {
|
|
|
11
11
|
debounce,
|
|
12
12
|
onInput,
|
|
13
13
|
value = '',
|
|
14
|
+
disabled,
|
|
14
15
|
monospace
|
|
15
16
|
} = props;
|
|
16
17
|
const handleInput = useMemo(() => {
|
|
@@ -33,21 +34,23 @@ function TextArea(props) {
|
|
|
33
34
|
onFocus: props.onFocus,
|
|
34
35
|
onBlur: props.onBlur,
|
|
35
36
|
rows: rows,
|
|
36
|
-
value: value
|
|
37
|
+
value: value,
|
|
38
|
+
disabled: disabled
|
|
37
39
|
})]
|
|
38
40
|
});
|
|
39
41
|
}
|
|
40
42
|
/**
|
|
41
|
-
* @param {
|
|
42
|
-
* @param {
|
|
43
|
-
* @param {
|
|
44
|
-
* @param {
|
|
45
|
-
* @param {
|
|
46
|
-
* @param {
|
|
43
|
+
* @param {object} props
|
|
44
|
+
* @param {object} props.element
|
|
45
|
+
* @param {string} props.id
|
|
46
|
+
* @param {string} props.description
|
|
47
|
+
* @param {boolean} props.debounce
|
|
48
|
+
* @param {string} props.label
|
|
47
49
|
* @param {Function} props.getValue
|
|
48
50
|
* @param {Function} props.setValue
|
|
49
|
-
* @param {
|
|
50
|
-
* @param {
|
|
51
|
+
* @param {number} props.rows
|
|
52
|
+
* @param {boolean} props.monospace
|
|
53
|
+
* @param {boolean} [props.disabled]
|
|
51
54
|
*/
|
|
52
55
|
|
|
53
56
|
|
|
@@ -61,7 +64,8 @@ export default function TextAreaEntry(props) {
|
|
|
61
64
|
getValue,
|
|
62
65
|
setValue,
|
|
63
66
|
rows,
|
|
64
|
-
monospace
|
|
67
|
+
monospace,
|
|
68
|
+
disabled
|
|
65
69
|
} = props;
|
|
66
70
|
const value = getValue(element);
|
|
67
71
|
return _jsxs("div", {
|
|
@@ -74,7 +78,8 @@ export default function TextAreaEntry(props) {
|
|
|
74
78
|
onInput: setValue,
|
|
75
79
|
rows: rows,
|
|
76
80
|
debounce: debounce,
|
|
77
|
-
monospace: monospace
|
|
81
|
+
monospace: monospace,
|
|
82
|
+
disabled: disabled
|
|
78
83
|
}), description && _jsx("div", {
|
|
79
84
|
class: "bio-properties-panel-description",
|
|
80
85
|
children: description
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/entries/TextArea.js"],"names":["useMemo","classnames","TextArea","props","id","label","rows","debounce","onInput","value","monospace","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextAreaEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,SACEA,OADF,QAEO,cAFP;AAIA,OAAOC,UAAP,MAAuB,YAAvB;;;;AAEA,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AAEvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAAI,GAAG,CAHH;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,OALI;AAMJC,IAAAA,KAAK,GAAG,EANJ;AAOJC,IAAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/TextArea.js"],"names":["useMemo","classnames","TextArea","props","id","label","rows","debounce","onInput","value","disabled","monospace","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextAreaEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,SACEA,OADF,QAEO,cAFP;AAIA,OAAOC,UAAP,MAAuB,YAAvB;;;;AAEA,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AAEvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAAI,GAAG,CAHH;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,OALI;AAMJC,IAAAA,KAAK,GAAG,EANJ;AAOJC,IAAAA,QAPI;AAQJC,IAAAA;AARI,MASFR,KATJ;AAWA,QAAMS,WAAW,GAAGZ,OAAO,CAAC,MAAM;AAChC,WAAOO,QAAQ,CAAC,CAAC;AAAEM,MAAAA;AAAF,KAAD,KAAgBL,OAAO,CAACK,MAAM,CAACJ,KAAP,CAAaK,MAAb,GAAsBD,MAAM,CAACJ,KAA7B,GAAqCM,SAAtC,CAAxB,CAAf;AACD,GAF0B,EAExB,CAAEP,OAAF,EAAWD,QAAX,CAFwB,CAA3B;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGS,QAAQ,CAACZ,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGW,QAAQ,CAACZ,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,UAAU,EAAC,OAHb;AAIE,MAAA,KAAK,EAAGH,UAAU,CAChB,4BADgB,EAEhBU,SAAS,GAAG,sCAAH,GAA4C,EAFrC,CAJpB;AAQE,MAAA,OAAO,EAAGC,WARZ;AASE,MAAA,OAAO,EAAGT,KAAK,CAACc,OATlB;AAUE,MAAA,MAAM,EAAGd,KAAK,CAACe,MAVjB;AAWE,MAAA,IAAI,EAAGZ,IAXT;AAYE,MAAA,KAAK,EAAGG,KAZV;AAaE,MAAA,QAAQ,EAAGC;AAbb,MAFF;AAAA,IADF;AAmBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASS,aAAT,CAAuBhB,KAAvB,EAA8B;AAC3C,QAAM;AACJiB,IAAAA,OADI;AAEJhB,IAAAA,EAFI;AAGJiB,IAAAA,WAHI;AAIJd,IAAAA,QAJI;AAKJF,IAAAA,KALI;AAMJiB,IAAAA,QANI;AAOJC,IAAAA,QAPI;AAQJjB,IAAAA,IARI;AASJK,IAAAA,SATI;AAUJD,IAAAA;AAVI,MAWFP,KAXJ;AAaA,QAAMM,KAAK,GAAGa,QAAQ,CAACF,OAAD,CAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBhB,EAAxD;AAAA,eACE,KAAC,QAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGI,KAHV;AAIE,MAAA,OAAO,EAAGc,QAJZ;AAKE,MAAA,IAAI,EAAGjB,IALT;AAME,MAAA,QAAQ,EAAGC,QANb;AAOE,MAAA,SAAS,EAAGI,SAPd;AAQE,MAAA,QAAQ,EAAGD;AARb,MADF,EAUIW,WAAW,IAAI;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBAAgDA;AAAhD,MAVnB;AAAA,IADF;AAcD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAAChB,KAAtB;AACD,C,CAGD;;AAEA,SAASO,QAAT,CAAkBZ,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import {\n useMemo\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nfunction TextArea(props) {\n\n const {\n id,\n label,\n rows = 2,\n debounce,\n onInput,\n value = '',\n disabled,\n monospace\n } = props;\n\n const handleInput = useMemo(() => {\n return debounce(({ target }) => onInput(target.value.length ? target.value : undefined));\n }, [ onInput, debounce ]);\n\n return (\n <div class=\"bio-properties-panel-textarea\">\n <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n <textarea\n id={ prefixId(id) }\n name={ id }\n spellCheck=\"false\"\n class={ classnames(\n 'bio-properties-panel-input',\n monospace ? 'bio-properties-panel-input-monospace' : '')\n }\n onInput={ handleInput }\n onFocus={ props.onFocus }\n onBlur={ props.onBlur }\n rows={ rows }\n value={ value }\n disabled={ disabled } />\n </div>\n );\n}\n\n/**\n * @param {object} props\n * @param {object} props.element\n * @param {string} props.id\n * @param {string} props.description\n * @param {boolean} props.debounce\n * @param {string} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {number} props.rows\n * @param {boolean} props.monospace\n * @param {boolean} [props.disabled]\n */\nexport default function TextAreaEntry(props) {\n const {\n element,\n id,\n description,\n debounce,\n label,\n getValue,\n setValue,\n rows,\n monospace,\n disabled\n } = props;\n\n const value = getValue(element);\n return (\n <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n <TextArea\n id={ id }\n label={ label }\n value={ value }\n onInput={ setValue }\n rows={ rows }\n debounce={ debounce }\n monospace={ monospace }\n disabled={ disabled } />\n { description && <div class=\"bio-properties-panel-description\">{ description }</div> }\n </div>\n );\n}\n\nexport function isEdited(node) {\n return node && !!node.value;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n return `bio-properties-panel-${ id }`;\n}"],"file":"TextArea.js"}
|