@keepeek/keepicker-react 1.5.0-beta.3 → 1.5.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/README.md +6 -10
- package/dist/index.js +2 -2
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
## Steps to use the Keepicker
|
|
4
4
|
|
|
5
|
-
1 - Import the JavaScript file registering kpk-keepicker web component
|
|
5
|
+
1 - Import the JavaScript file registering kpk-keepicker web component:
|
|
6
6
|
|
|
7
7
|
```html
|
|
8
8
|
<head>
|
|
@@ -13,14 +13,12 @@
|
|
|
13
13
|
</head>
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
2 - Add the web component tag in the DOM
|
|
16
|
+
2 - Add the web component tag in the DOM:
|
|
17
17
|
|
|
18
18
|
```html
|
|
19
19
|
<body>
|
|
20
20
|
<kpk-keepicker
|
|
21
21
|
id="keepicker"
|
|
22
|
-
keycloak-url="XXX"
|
|
23
|
-
keycloak-realm="XXX"
|
|
24
22
|
keycloak-client-id="XXX"
|
|
25
23
|
api-endpoint="XXX"
|
|
26
24
|
data-locale="FR"
|
|
@@ -29,7 +27,7 @@
|
|
|
29
27
|
</body>
|
|
30
28
|
```
|
|
31
29
|
|
|
32
|
-
3 - Add a callback that will be triggered when selecting an asset
|
|
30
|
+
3 - Add a callback that will be triggered when selecting an asset:
|
|
33
31
|
|
|
34
32
|
```html
|
|
35
33
|
<script>
|
|
@@ -63,8 +61,6 @@ function App() {
|
|
|
63
61
|
<div className="App">
|
|
64
62
|
<kpk-keepicker
|
|
65
63
|
ref={ref}
|
|
66
|
-
keycloak-url="XXX"
|
|
67
|
-
keycloak-realm="XXX"
|
|
68
64
|
keycloak-client-id="XXX"
|
|
69
65
|
api-endpoint="XXX"
|
|
70
66
|
data-locale="FR"
|
|
@@ -77,7 +73,7 @@ function App() {
|
|
|
77
73
|
|
|
78
74
|
### Drupal form
|
|
79
75
|
|
|
80
|
-
To integrate component in a form, add a container
|
|
76
|
+
To integrate component in a form, add a container:
|
|
81
77
|
|
|
82
78
|
```jsx
|
|
83
79
|
$form['container']['picker'] = [
|
|
@@ -86,14 +82,14 @@ $form['container']['picker'] = [
|
|
|
86
82
|
];
|
|
87
83
|
```
|
|
88
84
|
|
|
89
|
-
Add a behaviour to mount web component
|
|
85
|
+
Add a behaviour to mount web component:
|
|
90
86
|
|
|
91
87
|
```jsx
|
|
92
88
|
Drupal.behaviors.addKeepickerWebComponentMarkup = {
|
|
93
89
|
attach: function (context) {
|
|
94
90
|
if (context.id === "node-article-edit-form") {
|
|
95
91
|
document.querySelector("#kpk-keepicker-container").innerHTML =
|
|
96
|
-
'<kpk-keepicker id="keepicker" keycloak-
|
|
92
|
+
'<kpk-keepicker id="keepicker" keycloak-client-id="XXX" api-endpoint="XXX" data-locale="FR" ui-locale="FR"></kpk-keepicker>';
|
|
97
93
|
document
|
|
98
94
|
.querySelector("#keepicker")
|
|
99
95
|
.addEventListener("kpk-insert", (event) => {
|