@bpmn-io/properties-panel 0.8.1 → 0.9.0
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 +5 -0
- package/lib/PropertiesPanel.js +63 -23
- package/lib/PropertiesPanel.js.map +1 -1
- package/lib/components/entries/Checkbox.js +5 -3
- package/lib/components/entries/Checkbox.js.map +1 -1
- package/lib/components/entries/Description.js +26 -0
- package/lib/components/entries/Description.js.map +1 -0
- package/lib/components/entries/NumberField.js +5 -3
- package/lib/components/entries/NumberField.js.map +1 -1
- package/lib/components/entries/Select.js +9 -6
- package/lib/components/entries/Select.js.map +1 -1
- package/lib/components/entries/TextArea.js +5 -3
- package/lib/components/entries/TextArea.js.map +1 -1
- package/lib/components/entries/TextField.js +5 -3
- package/lib/components/entries/TextField.js.map +1 -1
- package/lib/components/entries/ToggleSwitch.js +8 -4
- package/lib/components/entries/ToggleSwitch.js.map +1 -1
- package/lib/context/DescriptionContext.js +7 -0
- package/lib/context/DescriptionContext.js.map +1 -0
- package/lib/context/index.js +1 -0
- package/lib/context/index.js.map +1 -1
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/index.js.map +1 -1
- package/lib/hooks/useDescriptionContext.js +25 -0
- package/lib/hooks/useDescriptionContext.js.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -6,6 +6,11 @@ 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.9.0
|
|
10
|
+
|
|
11
|
+
* `FEAT`: add `DescriptionContext` and `useDescriptionContext` hook ([#122](https://github.com/bpmn-io/properties-panel/pull/122))
|
|
12
|
+
* `FEAT`: add seperate `Description` entry ([#122](https://github.com/bpmn-io/properties-panel/pull/122))
|
|
13
|
+
|
|
9
14
|
## 0.8.1
|
|
10
15
|
|
|
11
16
|
* `CHORE`: add outline to checkboxes ([#120](https://github.com/bpmn-io/properties-panel/pull/120))
|
package/lib/PropertiesPanel.js
CHANGED
|
@@ -3,12 +3,13 @@ import { get, set } from 'min-dash';
|
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import Header from './components/Header';
|
|
5
5
|
import Group from './components/Group';
|
|
6
|
-
import { LayoutContext } from './context';
|
|
6
|
+
import { LayoutContext, DescriptionContext } from './context';
|
|
7
7
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
8
8
|
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
9
9
|
const DEFAULT_LAYOUT = {
|
|
10
10
|
open: true
|
|
11
11
|
};
|
|
12
|
+
const DEFAULT_DESCRIPTION = {};
|
|
12
13
|
/**
|
|
13
14
|
* @typedef { {
|
|
14
15
|
* component: import('preact').ComponentChild,
|
|
@@ -43,6 +44,16 @@ const DEFAULT_LAYOUT = {
|
|
|
43
44
|
* label: String
|
|
44
45
|
* } } GroupDefinition
|
|
45
46
|
*
|
|
47
|
+
* @typedef { {
|
|
48
|
+
* [id: String]: GetDescriptionFunction
|
|
49
|
+
* } } DescriptionConfig
|
|
50
|
+
*
|
|
51
|
+
* @callback { {
|
|
52
|
+
* @param {string} id
|
|
53
|
+
* @param {djs.model.base} element
|
|
54
|
+
* @returns {string}
|
|
55
|
+
* } } GetDescriptionFunction
|
|
56
|
+
*
|
|
46
57
|
*/
|
|
47
58
|
|
|
48
59
|
/**
|
|
@@ -55,6 +66,8 @@ const DEFAULT_LAYOUT = {
|
|
|
55
66
|
* @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
|
|
56
67
|
* @param {Object} [props.layoutConfig]
|
|
57
68
|
* @param {Function} [props.layoutChanged]
|
|
69
|
+
* @param {DescriptionConfig} [props.descriptionConfig]
|
|
70
|
+
* @param {Function} [props.descriptionLoaded]
|
|
58
71
|
*/
|
|
59
72
|
|
|
60
73
|
export default function PropertiesPanel(props) {
|
|
@@ -63,8 +76,11 @@ export default function PropertiesPanel(props) {
|
|
|
63
76
|
headerProvider,
|
|
64
77
|
groups,
|
|
65
78
|
layoutConfig = {},
|
|
66
|
-
layoutChanged
|
|
67
|
-
|
|
79
|
+
layoutChanged,
|
|
80
|
+
descriptionConfig = {},
|
|
81
|
+
descriptionLoaded
|
|
82
|
+
} = props; // set-up layout context
|
|
83
|
+
|
|
68
84
|
const [layout, setLayout] = useState(createLayoutContext(layoutConfig));
|
|
69
85
|
useEffect(() => {
|
|
70
86
|
if (typeof layoutChanged === 'function') {
|
|
@@ -85,6 +101,21 @@ export default function PropertiesPanel(props) {
|
|
|
85
101
|
setLayout,
|
|
86
102
|
getLayoutForKey,
|
|
87
103
|
setLayoutForKey
|
|
104
|
+
}; // set-up description context
|
|
105
|
+
|
|
106
|
+
const description = createDescriptionContext(descriptionConfig);
|
|
107
|
+
|
|
108
|
+
if (typeof descriptionLoaded === 'function') {
|
|
109
|
+
descriptionLoaded(description);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
const getDescriptionForId = (id, element) => {
|
|
113
|
+
return description[id] && description[id](element);
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
const descriptionContext = {
|
|
117
|
+
description,
|
|
118
|
+
getDescriptionForId
|
|
88
119
|
};
|
|
89
120
|
|
|
90
121
|
if (!element) {
|
|
@@ -94,26 +125,29 @@ export default function PropertiesPanel(props) {
|
|
|
94
125
|
});
|
|
95
126
|
}
|
|
96
127
|
|
|
97
|
-
return _jsx(
|
|
98
|
-
value:
|
|
99
|
-
children:
|
|
100
|
-
|
|
101
|
-
children:
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
128
|
+
return _jsx(DescriptionContext.Provider, {
|
|
129
|
+
value: descriptionContext,
|
|
130
|
+
children: _jsx(LayoutContext.Provider, {
|
|
131
|
+
value: layoutContext,
|
|
132
|
+
children: _jsxs("div", {
|
|
133
|
+
class: classnames('bio-properties-panel', layout.open ? 'open' : ''),
|
|
134
|
+
children: [_jsx(Header, {
|
|
135
|
+
element: element,
|
|
136
|
+
headerProvider: headerProvider
|
|
137
|
+
}), _jsx("div", {
|
|
138
|
+
class: "bio-properties-panel-scroll-container",
|
|
139
|
+
children: groups.map(group => {
|
|
140
|
+
const {
|
|
141
|
+
component: GroupComponent = Group,
|
|
142
|
+
id
|
|
143
|
+
} = group;
|
|
144
|
+
return _jsx(GroupComponent, {
|
|
145
|
+
element: element,
|
|
146
|
+
...group
|
|
147
|
+
}, id);
|
|
148
|
+
})
|
|
149
|
+
})]
|
|
150
|
+
})
|
|
117
151
|
})
|
|
118
152
|
});
|
|
119
153
|
} // helpers //////////////////
|
|
@@ -123,4 +157,10 @@ function createLayoutContext(overrides) {
|
|
|
123
157
|
...overrides
|
|
124
158
|
};
|
|
125
159
|
}
|
|
160
|
+
|
|
161
|
+
function createDescriptionContext(overrides) {
|
|
162
|
+
return { ...DEFAULT_DESCRIPTION,
|
|
163
|
+
...overrides
|
|
164
|
+
};
|
|
165
|
+
}
|
|
126
166
|
//# sourceMappingURL=PropertiesPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/PropertiesPanel.js"],"names":["useState","useEffect","get","set","classnames","Header","Group","LayoutContext","DEFAULT_LAYOUT","open","PropertiesPanel","props","element","headerProvider","groups","layoutConfig","layoutChanged","layout","setLayout","createLayoutContext","getLayoutForKey","key","defaultValue","setLayoutForKey","config","layoutContext","map","group","component","GroupComponent","
|
|
1
|
+
{"version":3,"sources":["../src/PropertiesPanel.js"],"names":["useState","useEffect","get","set","classnames","Header","Group","LayoutContext","DescriptionContext","DEFAULT_LAYOUT","open","DEFAULT_DESCRIPTION","PropertiesPanel","props","element","headerProvider","groups","layoutConfig","layoutChanged","descriptionConfig","descriptionLoaded","layout","setLayout","createLayoutContext","getLayoutForKey","key","defaultValue","setLayoutForKey","config","layoutContext","description","createDescriptionContext","getDescriptionForId","id","descriptionContext","map","group","component","GroupComponent","overrides"],"mappings":"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","sourcesContent":["import {\n useState,\n useEffect\n} from 'preact/hooks';\n\nimport {\n get,\n set\n} from 'min-dash';\n\nimport classnames from 'classnames';\n\nimport Header from './components/Header';\n\nimport Group from './components/Group';\n\nimport {\n LayoutContext,\n DescriptionContext\n} from './context';\n\nconst DEFAULT_LAYOUT = {\n open: true\n};\n\nconst DEFAULT_DESCRIPTION = {};\n\n\n/**\n * @typedef { {\n * component: import('preact').ComponentChild,\n * id: String,\n * isEdited?: Function\n * } } EntryDefinition\n *\n * @typedef { {\n * autoFocusEntry: String,\n * autoOpen?: Boolean,\n * entries: Array<EntryDefinition>,\n * id: String,\n * label: String,\n * remove: (event: MouseEvent) => void\n * } } ListItemDefinition\n *\n * @typedef { {\n * add: (event: MouseEvent) => void,\n * component: import('preact').Component,\n * element: Object,\n * id: String,\n * items: Array<ListItemDefinition>,\n * label: String,\n * shouldSort?: Boolean,\n * shouldOpen?: Boolean\n * } } ListGroupDefinition\n *\n * @typedef { {\n * component?: import('preact').Component,\n * entries: Array<EntryDefinition>,\n * id: String,\n * label: String\n * } } GroupDefinition\n *\n * @typedef { {\n * [id: String]: GetDescriptionFunction\n * } } DescriptionConfig\n *\n * @callback { {\n * @param {string} id\n * @param {djs.model.base} element\n * @returns {string}\n * } } GetDescriptionFunction\n *\n */\n\n\n/**\n * A basic properties panel component. Describes *how* content will be rendered, accepts\n * data from implementor to describe *what* will be rendered.\n *\n * @param {Object} props\n * @param {Object} props.element\n * @param {import('./components/Header').HeaderProvider} props.headerProvider\n * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups\n * @param {Object} [props.layoutConfig]\n * @param {Function} [props.layoutChanged]\n * @param {DescriptionConfig} [props.descriptionConfig]\n * @param {Function} [props.descriptionLoaded]\n */\nexport default function PropertiesPanel(props) {\n const {\n element,\n headerProvider,\n groups,\n layoutConfig = {},\n layoutChanged,\n descriptionConfig = {},\n descriptionLoaded\n } = props;\n\n // set-up layout context\n const [ layout, setLayout ] = useState(createLayoutContext(layoutConfig));\n\n useEffect(() => {\n if (typeof layoutChanged === 'function') {\n layoutChanged(layout);\n }\n }, [ layout, layoutChanged ]);\n\n const getLayoutForKey = (key, defaultValue) => {\n return get(layout, key, defaultValue);\n };\n\n const setLayoutForKey = (key, config) => {\n setLayout(set(layout, key, config));\n };\n\n const layoutContext = {\n layout,\n setLayout,\n getLayoutForKey,\n setLayoutForKey\n };\n\n // set-up description context\n const description = createDescriptionContext(descriptionConfig);\n\n if (typeof descriptionLoaded === 'function') {\n descriptionLoaded(description);\n }\n\n const getDescriptionForId = (id, element) => {\n return description[id] && description[id](element);\n };\n\n const descriptionContext = {\n description,\n getDescriptionForId\n };\n\n if (!element) {\n return <div class=\"bio-properties-panel-placeholder\">Select an element to edit its properties.</div>;\n }\n\n return <DescriptionContext.Provider value={ descriptionContext }>\n <LayoutContext.Provider value={ layoutContext }>\n <div\n class={ classnames(\n 'bio-properties-panel',\n layout.open ? 'open' : '')\n }>\n <Header\n element={ element }\n headerProvider={ headerProvider } />\n <div class=\"bio-properties-panel-scroll-container\">\n {\n groups.map(group => {\n\n const {\n component: GroupComponent = Group,\n id\n } = group;\n\n return <GroupComponent\n key={ id }\n element={ element }\n { ...group } />;\n })\n }\n </div>\n </div>\n </LayoutContext.Provider>\n </DescriptionContext.Provider>;\n}\n\n\n// helpers //////////////////\n\nfunction createLayoutContext(overrides) {\n return {\n ...DEFAULT_LAYOUT,\n ...overrides\n };\n}\n\nfunction createDescriptionContext(overrides) {\n return {\n ...DEFAULT_DESCRIPTION,\n ...overrides\n };\n}\n"],"file":"PropertiesPanel.js"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import Description from './Description';
|
|
1
2
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
3
|
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
3
4
|
|
|
@@ -65,9 +66,10 @@ export default function CheckboxEntry(props) {
|
|
|
65
66
|
onChange: setValue,
|
|
66
67
|
value: value,
|
|
67
68
|
disabled: disabled
|
|
68
|
-
}),
|
|
69
|
-
|
|
70
|
-
|
|
69
|
+
}), _jsx(Description, {
|
|
70
|
+
forId: id,
|
|
71
|
+
element: element,
|
|
72
|
+
value: description
|
|
71
73
|
})]
|
|
72
74
|
});
|
|
73
75
|
}
|
|
@@ -1 +1 @@
|
|
|
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":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/Checkbox.js"],"names":["Description","Checkbox","props","id","label","onChange","disabled","value","handleChange","target","checked","prefixId","CheckboxEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;;;;AAEA,SAASC,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,EAEE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGH,EAArB;AAA0B,MAAA,OAAO,EAAGU,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAFF;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":["import Description from './Description';\n\nfunction 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 forId={ id } element={ element } value={ description } />\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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { useDescriptionContext } from '../../hooks';
|
|
2
|
+
/**
|
|
3
|
+
* @param {Object} props
|
|
4
|
+
* @param {Object} props.element
|
|
5
|
+
* @param {String} props.forId - id of the entry the description is used for
|
|
6
|
+
* @param {String} props.value
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
10
|
+
export default function Description(props) {
|
|
11
|
+
const {
|
|
12
|
+
element,
|
|
13
|
+
forId,
|
|
14
|
+
value
|
|
15
|
+
} = props;
|
|
16
|
+
const contextDescription = useDescriptionContext(forId, element);
|
|
17
|
+
const description = value || contextDescription;
|
|
18
|
+
|
|
19
|
+
if (description) {
|
|
20
|
+
return _jsx("div", {
|
|
21
|
+
class: "bio-properties-panel-description",
|
|
22
|
+
children: description
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
//# sourceMappingURL=Description.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/Description.js"],"names":["useDescriptionContext","Description","props","element","forId","value","contextDescription","description"],"mappings":"AAAA,SACEA,qBADF,QAEO,aAFP;AAIA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA4B;AACzC,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA;AAHI,MAIFH,KAJJ;AAMA,QAAMI,kBAAkB,GAAGN,qBAAqB,CAACI,KAAD,EAAQD,OAAR,CAAhD;AAEA,QAAMI,WAAW,GAAGF,KAAK,IAAIC,kBAA7B;;AAEA,MAAIC,WAAJ,EAAiB;AACf,WACE;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBACIA;AADJ,MADF;AAKD;AACF","sourcesContent":["import {\n useDescriptionContext\n} from '../../hooks';\n\n/**\n * @param {Object} props\n * @param {Object} props.element\n * @param {String} props.forId - id of the entry the description is used for\n * @param {String} props.value\n */\nexport default function Description(props) {\n const {\n element,\n forId,\n value\n } = props;\n\n const contextDescription = useDescriptionContext(forId, element);\n\n const description = value || contextDescription;\n\n if (description) {\n return (\n <div class=\"bio-properties-panel-description\">\n { description }\n </div>\n );\n }\n}\n"],"file":"Description.js"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useMemo } from 'preact/hooks';
|
|
2
|
+
import Description from './Description';
|
|
2
3
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
3
4
|
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
4
5
|
|
|
@@ -92,9 +93,10 @@ export default function NumberFieldEntry(props) {
|
|
|
92
93
|
min: min,
|
|
93
94
|
step: step,
|
|
94
95
|
value: value
|
|
95
|
-
}),
|
|
96
|
-
|
|
97
|
-
|
|
96
|
+
}), _jsx(Description, {
|
|
97
|
+
forId: id,
|
|
98
|
+
element: element,
|
|
99
|
+
value: description
|
|
98
100
|
})]
|
|
99
101
|
});
|
|
100
102
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/entries/NumberField.js"],"names":["useMemo","NumberField","props","debounce","disabled","id","label","max","min","onInput","step","value","handleInput","event","validity","target","valid","parseFloat","undefined","prefixId","NumberFieldEntry","description","element","getValue","setValue","isEdited","node"],"mappings":"AAAA,SACEA,OADF,QAEO,cAFP
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/NumberField.js"],"names":["useMemo","Description","NumberField","props","debounce","disabled","id","label","max","min","onInput","step","value","handleInput","event","validity","target","valid","parseFloat","undefined","prefixId","NumberFieldEntry","description","element","getValue","setValue","isEdited","node"],"mappings":"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","sourcesContent":["import {\n useMemo\n} from 'preact/hooks';\n\nimport Description from './Description';\n\nfunction NumberField(props) {\n\n const {\n debounce,\n disabled,\n id,\n label,\n max,\n min,\n onInput,\n step,\n value = ''\n } = props;\n\n const handleInput = useMemo(() => {\n return debounce(event => {\n\n const {\n validity,\n value\n } = event.target;\n\n if (validity.valid) {\n onInput(value ? parseFloat(value) : undefined);\n }\n });\n }, [ onInput, debounce ]);\n\n return (\n <div class=\"bio-properties-panel-numberfield\">\n <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n <input\n id={ prefixId(id) }\n type=\"number\"\n name={ id }\n spellCheck=\"false\"\n autoComplete=\"off\"\n disabled={ disabled }\n class=\"bio-properties-panel-input\"\n max={ max }\n min={ min }\n onInput={ handleInput }\n step={ step }\n value={ value } />\n </div>\n );\n}\n\n/**\n * @param {Object} props\n * @param {Boolean} props.debounce\n * @param {String} props.description\n * @param {Boolean} props.disabled\n * @param {Object} props.element\n * @param {Function} props.getValue\n * @param {String} props.id\n * @param {String} props.label\n * @param {String} props.max\n * @param {String} props.min\n * @param {Function} props.setValue\n * @param {String} props.step\n */\nexport default function NumberFieldEntry(props) {\n const {\n debounce,\n description,\n disabled,\n element,\n getValue,\n id,\n label,\n max,\n min,\n setValue,\n step\n } = props;\n\n const value = getValue(element);\n return (\n <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n <NumberField\n debounce={ debounce }\n disabled={ disabled }\n id={ id }\n label={ label }\n onInput={ setValue }\n max={ max }\n min={ min }\n step={ step }\n value={ value } />\n <Description forId={ id } element={ element } value={ description } />\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}\n"],"file":"NumberField.js"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
3
|
-
|
|
1
|
+
import Description from './Description';
|
|
4
2
|
/**
|
|
5
3
|
* @typedef { { value: string, label: string, disabled: boolean } } Option
|
|
6
4
|
*/
|
|
@@ -16,6 +14,10 @@ import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
|
16
14
|
* @param {string} props.value
|
|
17
15
|
* @param {boolean} [props.disabled]
|
|
18
16
|
*/
|
|
17
|
+
|
|
18
|
+
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
19
|
+
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
20
|
+
|
|
19
21
|
function Select(props) {
|
|
20
22
|
const {
|
|
21
23
|
id,
|
|
@@ -91,9 +93,10 @@ export default function SelectEntry(props) {
|
|
|
91
93
|
onChange: setValue,
|
|
92
94
|
options: options,
|
|
93
95
|
disabled: disabled
|
|
94
|
-
}),
|
|
95
|
-
|
|
96
|
-
|
|
96
|
+
}), _jsx(Description, {
|
|
97
|
+
forId: id,
|
|
98
|
+
element: element,
|
|
99
|
+
value: description
|
|
97
100
|
})]
|
|
98
101
|
});
|
|
99
102
|
}
|
|
@@ -1 +1 @@
|
|
|
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":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/Select.js"],"names":["Description","Select","props","id","label","onChange","options","value","disabled","handleChange","target","prefixId","map","option","idx","SelectEntry","element","description","getValue","setValue","getOptions","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,SAASC,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,EAQE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGL,EAArB;AAA0B,MAAA,OAAO,EAAGa,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MARF;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":["import Description from './Description';\n\n/**\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 forId={ id } element={ element } value={ description } />\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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import Description from './Description';
|
|
1
2
|
import { useMemo } from 'preact/hooks';
|
|
2
3
|
import classnames from 'classnames';
|
|
3
4
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
@@ -80,9 +81,10 @@ export default function TextAreaEntry(props) {
|
|
|
80
81
|
debounce: debounce,
|
|
81
82
|
monospace: monospace,
|
|
82
83
|
disabled: disabled
|
|
83
|
-
}),
|
|
84
|
-
|
|
85
|
-
|
|
84
|
+
}), _jsx(Description, {
|
|
85
|
+
forId: id,
|
|
86
|
+
element: element,
|
|
87
|
+
value: description
|
|
86
88
|
})]
|
|
87
89
|
});
|
|
88
90
|
}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/TextArea.js"],"names":["Description","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,OAAOA,WAAP,MAAwB,eAAxB;AAEA,SACEC,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,EAUE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGN,EAArB;AAA0B,MAAA,OAAO,EAAGgB,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAVF;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 Description from './Description';\n\nimport {\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 forId={ id } element={ element } value={ description } />\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}\n"],"file":"TextArea.js"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import Description from './Description';
|
|
1
2
|
import { useEffect, useMemo, useState } from 'preact/hooks';
|
|
2
3
|
import classnames from 'classnames';
|
|
3
4
|
import { usePrevious } from '../../hooks';
|
|
@@ -102,9 +103,10 @@ export default function TextfieldEntry(props) {
|
|
|
102
103
|
onInput: handleChange,
|
|
103
104
|
debounce: debounce,
|
|
104
105
|
disabled: disabled
|
|
105
|
-
}),
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
}), _jsx(Description, {
|
|
107
|
+
forId: id,
|
|
108
|
+
element: element,
|
|
109
|
+
value: description
|
|
108
110
|
}), error && _jsx("div", {
|
|
109
111
|
class: "bio-properties-panel-error",
|
|
110
112
|
children: error
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/entries/TextField.js"],"names":["useEffect","useMemo","useState","classnames","usePrevious","Textfield","props","debounce","disabled","id","label","onInput","value","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextfieldEntry","element","description","getValue","setValue","validate","error","setError","invalidValueCache","setInvalidValueCache","prevValue","err","handleChange","newValue","isEdited","node"],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/TextField.js"],"names":["Description","useEffect","useMemo","useState","classnames","usePrevious","Textfield","props","debounce","disabled","id","label","onInput","value","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextfieldEntry","element","description","getValue","setValue","validate","error","setError","invalidValueCache","setInvalidValueCache","prevValue","err","handleChange","newValue","isEdited","node"],"mappings":"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","sourcesContent":["import Description from './Description';\n\nimport {\n useEffect,\n useMemo,\n useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n usePrevious\n} from '../../hooks';\n\n\nfunction Textfield(props) {\n\n const {\n debounce,\n disabled = false,\n id,\n label,\n onInput,\n value = ''\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-textfield\">\n <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n <input\n id={ prefixId(id) }\n type=\"text\"\n name={ id }\n spellCheck=\"false\"\n autoComplete=\"off\"\n disabled={ disabled }\n class=\"bio-properties-panel-input\"\n onInput={ handleInput }\n onFocus={ props.onFocus }\n onBlur={ props.onBlur }\n value={ value || '' } />\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 {Boolean} props.disabled\n * @param {String} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Function} props.validate\n */\nexport default function TextfieldEntry(props) {\n const {\n element,\n id,\n description,\n debounce,\n disabled,\n label,\n getValue,\n setValue,\n validate\n } = props;\n\n const [ error, setError ] = useState(null);\n const [ invalidValueCache, setInvalidValueCache ] = useState(null);\n\n let value = getValue(element);\n const prevValue = usePrevious(value);\n\n // validate again when value prop changed\n useEffect(() => {\n const err = validate ? validate(value) : null;\n setError(err);\n }, [ value ]);\n\n // validate on change\n const handleChange = (newValue) => {\n const err = validate ? validate(newValue) : null;\n\n if (err) {\n setInvalidValueCache(newValue);\n } else {\n setValue(newValue);\n }\n\n setError(err);\n };\n\n // keep showing invalid value on errors, although it was not set\n if (prevValue === value && error) {\n value = invalidValueCache;\n }\n\n return (\n <div class={ classnames(\n 'bio-properties-panel-entry',\n error ? 'has-error' : '')\n } data-entry-id={ id }>\n <Textfield id={ id } label={ label } value={ value } onInput={ handleChange } debounce={ debounce } disabled={ disabled } />\n <Description forId={ id } element={ element } value={ description } />\n { error && <div class=\"bio-properties-panel-error\">{ error }</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}\n"],"file":"TextField.js"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import Description from './Description';
|
|
1
2
|
import { jsx as _jsx } from "preact/jsx-runtime";
|
|
2
3
|
import { jsxs as _jsxs } from "preact/jsx-runtime";
|
|
3
4
|
|
|
@@ -43,6 +44,7 @@ function ToggleSwitch(props) {
|
|
|
43
44
|
}
|
|
44
45
|
/**
|
|
45
46
|
* @param {Object} props
|
|
47
|
+
* @param {Object} props.element
|
|
46
48
|
* @param {String} props.id
|
|
47
49
|
* @param {String} props.description
|
|
48
50
|
* @param {String} props.label
|
|
@@ -54,6 +56,7 @@ function ToggleSwitch(props) {
|
|
|
54
56
|
|
|
55
57
|
export default function ToggleSwitchEntry(props) {
|
|
56
58
|
const {
|
|
59
|
+
element,
|
|
57
60
|
id,
|
|
58
61
|
description,
|
|
59
62
|
label,
|
|
@@ -61,7 +64,7 @@ export default function ToggleSwitchEntry(props) {
|
|
|
61
64
|
getValue,
|
|
62
65
|
setValue
|
|
63
66
|
} = props;
|
|
64
|
-
const value = getValue();
|
|
67
|
+
const value = getValue(element);
|
|
65
68
|
return _jsxs("div", {
|
|
66
69
|
class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
|
|
67
70
|
"data-entry-id": id,
|
|
@@ -71,9 +74,10 @@ export default function ToggleSwitchEntry(props) {
|
|
|
71
74
|
value: value,
|
|
72
75
|
onInput: setValue,
|
|
73
76
|
switcherLabel: switcherLabel
|
|
74
|
-
}),
|
|
75
|
-
|
|
76
|
-
|
|
77
|
+
}), _jsx(Description, {
|
|
78
|
+
forId: id,
|
|
79
|
+
element: element,
|
|
80
|
+
value: description
|
|
77
81
|
})]
|
|
78
82
|
});
|
|
79
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/entries/ToggleSwitch.js"],"names":["ToggleSwitch","props","id","label","onInput","value","switcherLabel","handleInput","prefixId","ToggleSwitchEntry","description","getValue","setValue","isEdited","node","checked"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../src/components/entries/ToggleSwitch.js"],"names":["Description","ToggleSwitch","props","id","label","onInput","value","switcherLabel","handleInput","prefixId","ToggleSwitchEntry","element","description","getValue","setValue","isEdited","node","checked"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;;;;AAEA,SAASC,YAAT,CAAsBC,KAAtB,EAA6B;AAC3B,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,KAJI;AAKJC,IAAAA;AALI,MAMFL,KANJ;;AAQA,QAAMM,WAAW,GAAG,YAAY;AAC9BH,IAAAA,OAAO,CAAC,CAACC,KAAF,CAAP;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,oCAAX;AAAA,eACE;AAAO,MAAA,KAAK,EAAC,4BAAb;AACE,MAAA,GAAG,EAAGG,QAAQ,CAACN,EAAD,CADhB;AAAA,gBAEIC;AAFJ,MADF,EAKE;AAAK,MAAA,KAAK,EAAC,oCAAX;AAAA,iBACE;AAAO,QAAA,KAAK,EAAC,8CAAb;AAAA,mBACE;AACE,UAAA,EAAE,EAAGK,QAAQ,CAACN,EAAD,CADf;AAEE,UAAA,KAAK,EAAC,4BAFR;AAGE,UAAA,IAAI,EAAC,UAHP;AAIE,UAAA,IAAI,EAAGA,EAJT;AAKE,UAAA,OAAO,EAAGK,WALZ;AAME,UAAA,OAAO,EAAGF;AANZ,UADF,EAQE;AAAM,UAAA,KAAK,EAAC;AAAZ,UARF;AAAA,QADF,EAWE;AAAG,QAAA,KAAK,EAAC,2CAAT;AAAA,kBAAuDC;AAAvD,QAXF;AAAA,MALF;AAAA,IADF;AAqBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASG,iBAAT,CAA2BR,KAA3B,EAAkC;AAC/C,QAAM;AACJS,IAAAA,OADI;AAEJR,IAAAA,EAFI;AAGJS,IAAAA,WAHI;AAIJR,IAAAA,KAJI;AAKJG,IAAAA,aALI;AAMJM,IAAAA,QANI;AAOJC,IAAAA;AAPI,MAQFZ,KARJ;AAUA,QAAMI,KAAK,GAAGO,QAAQ,CAACF,OAAD,CAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,qEAAX;AAAiF,qBAAgBR,EAAjG;AAAA,eACE,KAAC,YAAD;AAAc,MAAA,EAAE,EAAGA,EAAnB;AAAwB,MAAA,KAAK,EAAGC,KAAhC;AAAwC,MAAA,KAAK,EAAGE,KAAhD;AAAwD,MAAA,OAAO,EAAGQ,QAAlE;AAA6E,MAAA,aAAa,EAAGP;AAA7F,MADF,EAEE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGJ,EAArB;AAA0B,MAAA,OAAO,EAAGQ,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAFF;AAAA,IADF;AAMD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACC,OAAtB;AACD,C,CAGD;;AAEA,SAASR,QAAT,CAAkBN,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\nfunction ToggleSwitch(props) {\n const {\n id,\n label,\n onInput,\n value,\n switcherLabel\n } = props;\n\n const handleInput = async () => {\n onInput(!value);\n };\n\n return (\n <div class=\"bio-properties-panel-toggle-switch\">\n <label class=\"bio-properties-panel-label\"\n for={ prefixId(id) }>\n { label }\n </label>\n <div class=\"bio-properties-panel-field-wrapper\">\n <label class=\"bio-properties-panel-toggle-switch__switcher\">\n <input\n id={ prefixId(id) }\n class=\"bio-properties-panel-input\"\n type=\"checkbox\"\n name={ id }\n onInput={ handleInput }\n checked={ value } />\n <span class=\"bio-properties-panel-toggle-switch__slider\" />\n </label>\n <p class=\"bio-properties-panel-toggle-switch__label\">{ switcherLabel }</p>\n </div>\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 {String} props.switcherLabel\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n */\nexport default function ToggleSwitchEntry(props) {\n const {\n element,\n id,\n description,\n label,\n switcherLabel,\n getValue,\n setValue\n } = props;\n\n const value = getValue(element);\n return (\n <div class=\"bio-properties-panel-entry bio-properties-panel-toggle-switch-entry\" data-entry-id={ id }>\n <ToggleSwitch id={ id } label={ label } value={ value } onInput={ setValue } switcherLabel={ switcherLabel } />\n <Description forId={ id } element={ element } value={ description } />\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":"ToggleSwitch.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/DescriptionContext.js"],"names":["createContext","DescriptionContext","description","getDescriptionForId"],"mappings":"AAAA,SACEA,aADF,QAEO,QAFP;AAIA,MAAMC,kBAAkB,GAAGD,aAAa,CAAC;AACvCE,EAAAA,WAAW,EAAE,EAD0B;AAEvCC,EAAAA,mBAAmB,EAAE,MAAM,CAAE;AAFU,CAAD,CAAxC;AAKA,eAAeF,kBAAf","sourcesContent":["import {\n createContext\n} from 'preact';\n\nconst DescriptionContext = createContext({\n description: {},\n getDescriptionForId: () => {}\n});\n\nexport default DescriptionContext;\n"],"file":"DescriptionContext.js"}
|
package/lib/context/index.js
CHANGED
package/lib/context/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/context/index.js"],"names":["default","LayoutContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as LayoutContext } from './LayoutContext'
|
|
1
|
+
{"version":3,"sources":["../../src/context/index.js"],"names":["default","DescriptionContext","LayoutContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAApB,QAA8C,sBAA9C;AACA,SAASD,OAAO,IAAIE,aAApB,QAAyC,iBAAzC","sourcesContent":["export { default as DescriptionContext } from './DescriptionContext';\nexport { default as LayoutContext } from './LayoutContext';\n"],"file":"index.js"}
|
package/lib/hooks/index.js
CHANGED
package/lib/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/hooks/index.js"],"names":["default","usePrevious","useKeyFactory","useLayoutState"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,cAAT,QAA+B,kBAA/B","sourcesContent":["export { default as usePrevious } from './usePrevious';\nexport { useKeyFactory } from './useKeyFactory';\nexport { useLayoutState } from './useLayoutState'
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/index.js"],"names":["default","usePrevious","useKeyFactory","useLayoutState","useDescriptionContext"],"mappings":"AAAA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,cAAT,QAA+B,kBAA/B;AACA,SAASC,qBAAT,QAAsC,yBAAtC","sourcesContent":["export { default as usePrevious } from './usePrevious';\nexport { useKeyFactory } from './useKeyFactory';\nexport { useLayoutState } from './useLayoutState';\nexport { useDescriptionContext } from './useDescriptionContext';\n"],"file":"index.js"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { useContext } from 'preact/hooks';
|
|
2
|
+
import { DescriptionContext } from '../context';
|
|
3
|
+
/**
|
|
4
|
+
* Accesses the global DescriptionContext and returns a description for a given id and element.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```jsx
|
|
8
|
+
* function TextField(props) {
|
|
9
|
+
* const description = useDescriptionContext('input1', element);
|
|
10
|
+
* }
|
|
11
|
+
* ```
|
|
12
|
+
*
|
|
13
|
+
* @param {string} id
|
|
14
|
+
* @param {djs.model.Base} element
|
|
15
|
+
*
|
|
16
|
+
* @returns {string}
|
|
17
|
+
*/
|
|
18
|
+
|
|
19
|
+
export function useDescriptionContext(id, element) {
|
|
20
|
+
const {
|
|
21
|
+
getDescriptionForId
|
|
22
|
+
} = useContext(DescriptionContext);
|
|
23
|
+
return getDescriptionForId(id, element);
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=useDescriptionContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useDescriptionContext.js"],"names":["useContext","DescriptionContext","useDescriptionContext","id","element","getDescriptionForId"],"mappings":"AAAA,SACEA,UADF,QAEO,cAFP;AAIA,SACEC,kBADF,QAEO,YAFP;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,qBAAT,CAA+BC,EAA/B,EAAmCC,OAAnC,EAA4C;AACjD,QAAM;AACJC,IAAAA;AADI,MAEFL,UAAU,CAACC,kBAAD,CAFd;AAIA,SAAOI,mBAAmB,CAACF,EAAD,EAAKC,OAAL,CAA1B;AACD","sourcesContent":["import {\n useContext\n} from 'preact/hooks';\n\nimport {\n DescriptionContext\n} from '../context';\n\n/**\n * Accesses the global DescriptionContext and returns a description for a given id and element.\n *\n * @example\n * ```jsx\n * function TextField(props) {\n * const description = useDescriptionContext('input1', element);\n * }\n * ```\n *\n * @param {string} id\n * @param {djs.model.Base} element\n *\n * @returns {string}\n */\nexport function useDescriptionContext(id, element) {\n const {\n getDescriptionForId\n } = useContext(DescriptionContext);\n\n return getDescriptionForId(id, element);\n}\n"],"file":"useDescriptionContext.js"}
|