playbook_ui 14.18.0.pre.alpha.PLAY20787400 → 14.18.0.pre.alpha.play2034zonesandcolors7407
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +0 -12
- data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +1 -50
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +0 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +1 -5
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +0 -10
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +43 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
- data/app/pb_kits/playbook/pb_draggable/index.js +139 -142
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
- data/dist/chunks/{_typeahead-BX8IifKY.js → _typeahead-CvkGr9xV.js} +1 -1
- data/dist/chunks/_weekday_stacked-B-ran-L1.js +45 -0
- data/dist/chunks/{lib-96_ZmvAo.js → lib-yWHJ_8mm.js} +1 -1
- data/dist/chunks/{pb_form_validation-Vv2TqXVC.js → pb_form_validation-CFPfX89U.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +2 -2
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +10 -11
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +0 -34
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +0 -14
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +0 -20
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +0 -14
- data/dist/chunks/_weekday_stacked-DfMD7HJz.js +0 -45
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
@@ -1,24 +1,26 @@
|
|
1
1
|
import PbEnhancedElement from "../pb_enhanced_element";
|
2
2
|
|
3
|
-
const DRAGGABLE_SELECTOR
|
3
|
+
const DRAGGABLE_SELECTOR = "[data-pb-draggable]";
|
4
4
|
const DRAGGABLE_CONTAINER = ".pb_draggable_container";
|
5
|
+
const NEEDS_CLONE = ["shadow", "outline"]; // clone only for these types
|
5
6
|
|
6
7
|
export default class PbDraggable extends PbEnhancedElement {
|
7
|
-
static get selector() {
|
8
|
-
return DRAGGABLE_SELECTOR;
|
9
|
-
}
|
8
|
+
static get selector() { return DRAGGABLE_SELECTOR; }
|
10
9
|
|
11
10
|
connect() {
|
12
11
|
this.state = {
|
13
|
-
items:
|
14
|
-
dragData:
|
15
|
-
isDragging:
|
16
|
-
activeContainer: ""
|
12
|
+
items: [],
|
13
|
+
dragData: { id: "", initialGroup: "" },
|
14
|
+
isDragging: "",
|
15
|
+
activeContainer: "",
|
17
16
|
};
|
18
17
|
|
19
|
-
this.draggedItem
|
18
|
+
this.draggedItem = null;
|
20
19
|
this.draggedItemId = null;
|
20
|
+
this.dragGhost = null;
|
21
21
|
this.hasMultipleContainers = false;
|
22
|
+
this.dragZoneType = "";
|
23
|
+
this.dragZoneColor = "";
|
22
24
|
|
23
25
|
document.addEventListener("DOMContentLoaded", () => this.bindEventListeners());
|
24
26
|
}
|
@@ -26,13 +28,12 @@ export default class PbDraggable extends PbEnhancedElement {
|
|
26
28
|
setState(newState) {
|
27
29
|
this.state = { ...this.state, ...newState };
|
28
30
|
if (newState.items) {
|
29
|
-
|
31
|
+
this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
|
30
32
|
detail: {
|
31
33
|
reorderedItems: this.state.items,
|
32
|
-
containerId:
|
33
|
-
}
|
34
|
-
});
|
35
|
-
this.element.dispatchEvent(customEvent);
|
34
|
+
containerId: this.element.querySelector(DRAGGABLE_CONTAINER).id,
|
35
|
+
},
|
36
|
+
}));
|
36
37
|
}
|
37
38
|
}
|
38
39
|
|
@@ -43,71 +44,100 @@ export default class PbDraggable extends PbEnhancedElement {
|
|
43
44
|
|
44
45
|
// Needed to prevent images within draggable items from being independently draggable
|
45
46
|
// Needed if using Image kit in draggable items
|
46
|
-
this.element.querySelectorAll(".pb_draggable_item img")
|
47
|
-
img.setAttribute("draggable", "false");
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
47
|
+
this.element.querySelectorAll(".pb_draggable_item img")
|
48
|
+
.forEach(img => img.setAttribute("draggable", "false"));
|
49
|
+
|
50
|
+
this.element.querySelectorAll(".pb_draggable_item")
|
51
|
+
.forEach(item => {
|
52
|
+
item.addEventListener("dragstart", this.handleDragStart.bind(this));
|
53
|
+
item.addEventListener("dragend", this.handleDragEnd.bind(this));
|
54
|
+
item.addEventListener("dragenter", this.handleDragEnter.bind(this));
|
55
|
+
});
|
55
56
|
|
56
|
-
containers.forEach(
|
57
|
-
|
58
|
-
|
57
|
+
containers.forEach(c => {
|
58
|
+
c.addEventListener("dragover", this.handleDragOver.bind(this));
|
59
|
+
c.addEventListener("drop", this.handleDrop.bind(this));
|
59
60
|
});
|
60
61
|
}
|
61
62
|
|
63
|
+
/* ---------------- DRAG START ---------------- */
|
62
64
|
handleDragStart(event) {
|
63
65
|
// Needed to prevent images within draggable items from being independently draggable
|
64
66
|
// Needed if using Image kit in draggable items
|
65
|
-
if (event.target.tagName.toLowerCase() ===
|
67
|
+
if (event.target.tagName.toLowerCase() === "img") {
|
66
68
|
event.preventDefault();
|
67
69
|
return;
|
68
70
|
}
|
69
71
|
|
70
|
-
const container
|
71
|
-
this.draggedItem
|
72
|
+
const container = event.target.closest(DRAGGABLE_CONTAINER);
|
73
|
+
this.draggedItem = event.target;
|
72
74
|
this.draggedItemId = event.target.id;
|
75
|
+
this.dragZoneType = this.element.dataset.dropZoneType || "";
|
76
|
+
this.dragZoneColor = this.element.dataset.dropZoneColor || "";
|
73
77
|
|
74
78
|
this.setState({
|
75
|
-
dragData:
|
76
|
-
isDragging: this.draggedItemId
|
79
|
+
dragData: { id: this.draggedItemId, initialGroup: container.id },
|
80
|
+
isDragging: this.draggedItemId,
|
77
81
|
});
|
78
82
|
|
79
|
-
|
83
|
+
this.draggedItem.classList.add(
|
84
|
+
"is_dragging",
|
85
|
+
`drop_zone_${this.dragZoneType}`,
|
86
|
+
`drop_zone_color_${this.dragZoneColor}`,
|
87
|
+
);
|
88
|
+
|
80
89
|
if (event.dataTransfer) {
|
81
|
-
event.dataTransfer.effectAllowed =
|
82
|
-
event.dataTransfer.setData(
|
90
|
+
event.dataTransfer.effectAllowed = "move";
|
91
|
+
event.dataTransfer.setData("text/plain", this.draggedItemId);
|
92
|
+
|
93
|
+
/* ---------- custom ghost clone (shadow + outline only) ---------- */
|
94
|
+
if (NEEDS_CLONE.includes(this.dragZoneType)) {
|
95
|
+
const ghost = this.draggedItem.cloneNode(true);
|
96
|
+
ghost.classList.remove(
|
97
|
+
"is_dragging",
|
98
|
+
`drop_zone_${this.dragZoneType}`,
|
99
|
+
`drop_zone_color_${this.dragZoneColor}`,
|
100
|
+
);
|
101
|
+
const { width, height } = this.draggedItem.getBoundingClientRect();
|
102
|
+
Object.assign(ghost.style, {
|
103
|
+
border: "none",
|
104
|
+
width: `${width}px`,
|
105
|
+
height: `${height}px`,
|
106
|
+
position: "absolute",
|
107
|
+
top: "-9999px",
|
108
|
+
left: "-9999px",
|
109
|
+
boxSizing: "border-box",
|
110
|
+
zIndex: "9999",
|
111
|
+
});
|
112
|
+
document.body.appendChild(ghost);
|
113
|
+
this.dragGhost = ghost;
|
114
|
+
event.dataTransfer.setDragImage(ghost, width / 2, height / 2);
|
115
|
+
}
|
116
|
+
/* ---------------------------------------------------------------- */
|
83
117
|
}
|
84
118
|
|
85
|
-
|
86
|
-
event.target.style.opacity = '0.5';
|
87
|
-
}, 0);
|
119
|
+
requestAnimationFrame(() => (event.target.style.opacity = "0.5"));
|
88
120
|
}
|
89
121
|
|
122
|
+
/* ---------------- DRAG ENTER ---------------- */
|
90
123
|
handleDragEnter(event) {
|
91
124
|
if (!this.draggedItem || event.target === this.draggedItem) return;
|
92
|
-
|
93
|
-
|
94
|
-
this.
|
95
|
-
} else {
|
96
|
-
this.handleSingleContainerDragEnter(event);
|
97
|
-
}
|
125
|
+
this.hasMultipleContainers
|
126
|
+
? this.handleMultiContainerDragEnter(event)
|
127
|
+
: this.handleSingleContainerDragEnter(event);
|
98
128
|
}
|
99
129
|
|
100
130
|
handleSingleContainerDragEnter(event) {
|
101
|
-
const targetItem = event.target.closest(
|
131
|
+
const targetItem = event.target.closest(".pb_draggable_item");
|
132
|
+
// If we're entering a container directly or there's no target item
|
102
133
|
if (!targetItem) return;
|
103
134
|
|
104
135
|
const container = targetItem.parentNode;
|
105
|
-
const items
|
136
|
+
const items = Array.from(container.children);
|
137
|
+
const fromIdx = items.indexOf(this.draggedItem);
|
138
|
+
const toIdx = items.indexOf(targetItem);
|
106
139
|
|
107
|
-
|
108
|
-
const targetIndex = items.indexOf(targetItem);
|
109
|
-
|
110
|
-
if (draggedIndex > targetIndex) {
|
140
|
+
if (fromIdx > toIdx) {
|
111
141
|
container.insertBefore(this.draggedItem, targetItem);
|
112
142
|
} else {
|
113
143
|
container.insertBefore(this.draggedItem, targetItem.nextSibling);
|
@@ -116,146 +146,113 @@ export default class PbDraggable extends PbEnhancedElement {
|
|
116
146
|
|
117
147
|
handleMultiContainerDragEnter(event) {
|
118
148
|
const targetContainer = event.target.closest(DRAGGABLE_CONTAINER);
|
119
|
-
const targetItem
|
120
|
-
|
149
|
+
const targetItem = event.target.closest(".pb_draggable_item");
|
121
150
|
if (!targetContainer) return;
|
122
151
|
|
123
|
-
// If we're entering a container directly or there's no target item
|
124
152
|
if (!targetItem) {
|
125
|
-
const
|
126
|
-
|
127
|
-
targetContainer.insertBefore(this.draggedItem,
|
128
|
-
|
129
|
-
targetContainer.appendChild(this.draggedItem);
|
130
|
-
}
|
153
|
+
const last = targetContainer.querySelector(".pb_draggable_item:last-child");
|
154
|
+
last
|
155
|
+
? targetContainer.insertBefore(this.draggedItem, last.nextSibling)
|
156
|
+
: targetContainer.appendChild(this.draggedItem);
|
131
157
|
return;
|
132
158
|
}
|
133
159
|
|
134
|
-
const
|
135
|
-
|
136
|
-
|
137
|
-
const newItems = [...items].map(item => ({
|
138
|
-
id: item.id,
|
139
|
-
container: container.id
|
140
|
-
}));
|
141
|
-
|
142
|
-
this.setState({ items: newItems });
|
160
|
+
const items = Array.from(targetContainer.children);
|
161
|
+
this.setState({ items: items.map(i => ({ id: i.id, container: targetContainer.id })) });
|
143
162
|
|
144
|
-
const
|
145
|
-
|
163
|
+
const midY = targetItem.getBoundingClientRect().top +
|
164
|
+
targetItem.getBoundingClientRect().height / 2;
|
146
165
|
|
147
|
-
if (event.clientY <
|
148
|
-
|
166
|
+
if (event.clientY < midY) {
|
167
|
+
targetContainer.insertBefore(this.draggedItem, targetItem);
|
149
168
|
} else {
|
150
|
-
|
169
|
+
targetContainer.insertBefore(this.draggedItem, targetItem.nextSibling);
|
151
170
|
}
|
152
171
|
}
|
153
172
|
|
173
|
+
/* ---------------- DRAG OVER ---------------- */
|
154
174
|
handleDragOver(event) {
|
155
175
|
event.preventDefault();
|
156
176
|
event.stopPropagation();
|
157
|
-
|
158
|
-
|
159
|
-
this.
|
160
|
-
} else {
|
161
|
-
this.handleSingleContainerDragOver(event);
|
162
|
-
}
|
177
|
+
this.hasMultipleContainers
|
178
|
+
? this.handleMultiContainerDragOver(event)
|
179
|
+
: this.handleSingleContainerDragOver(event);
|
163
180
|
}
|
164
181
|
|
165
182
|
handleSingleContainerDragOver(event) {
|
166
183
|
const container = event.target.closest(DRAGGABLE_CONTAINER);
|
167
|
-
if (container)
|
168
|
-
container.classList.add("active_container");
|
169
|
-
}
|
184
|
+
if (container) container.classList.add("active_container");
|
170
185
|
}
|
171
186
|
|
172
187
|
handleMultiContainerDragOver(event) {
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
}
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
const lastItem = container.querySelector('.pb_draggable_item:last-child');
|
186
|
-
if (!lastItem || (lastItem && event.clientY > lastItem.getBoundingClientRect().bottom)) {
|
187
|
-
if (this.draggedItem && this.draggedItem.parentNode !== container) {
|
188
|
-
container.appendChild(this.draggedItem);
|
189
|
-
}
|
188
|
+
const container = event.target.matches(DRAGGABLE_CONTAINER)
|
189
|
+
? event.target
|
190
|
+
: event.target.closest(DRAGGABLE_CONTAINER);
|
191
|
+
if (!container) return;
|
192
|
+
|
193
|
+
this.setState({ activeContainer: container.id });
|
194
|
+
container.classList.add("active_container");
|
195
|
+
|
196
|
+
const last = container.querySelector(".pb_draggable_item:last-child");
|
197
|
+
if (!last || event.clientY > last.getBoundingClientRect().bottom) {
|
198
|
+
if (this.draggedItem && this.draggedItem.parentNode !== container) {
|
199
|
+
container.appendChild(this.draggedItem);
|
190
200
|
}
|
191
201
|
}
|
192
202
|
}
|
193
203
|
|
204
|
+
/* ---------------- DROP ---------------- */
|
194
205
|
handleDrop(event) {
|
195
206
|
event.preventDefault();
|
196
207
|
event.stopPropagation();
|
197
208
|
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
} else {
|
202
|
-
container = event.target.closest(DRAGGABLE_CONTAINER);
|
203
|
-
}
|
204
|
-
|
209
|
+
const container = event.target.matches(DRAGGABLE_CONTAINER)
|
210
|
+
? event.target
|
211
|
+
: event.target.closest(DRAGGABLE_CONTAINER);
|
205
212
|
if (!container || !this.draggedItem) return;
|
206
213
|
|
207
214
|
container.classList.remove("active_container");
|
208
|
-
this.draggedItem.style.opacity =
|
215
|
+
this.draggedItem.style.opacity = "1";
|
209
216
|
|
210
217
|
// Handle empty containers
|
211
|
-
if (this.hasMultipleContainers && !container.querySelector(
|
218
|
+
if (this.hasMultipleContainers && !container.querySelector(".pb_draggable_item")) {
|
212
219
|
container.appendChild(this.draggedItem);
|
213
220
|
}
|
214
221
|
|
215
222
|
// Updated order of items as an array of item IDs
|
216
|
-
const reorderedItems = Array.from(
|
217
|
-
|
218
|
-
).map(item => ({
|
219
|
-
id: item.id,
|
220
|
-
container: item.closest(DRAGGABLE_CONTAINER).id
|
221
|
-
}));
|
222
|
-
|
223
|
-
// Store reordered items in a data attribute on the container
|
224
|
-
container.setAttribute("data-reordered-items", JSON.stringify(reorderedItems));
|
225
|
-
|
226
|
-
const customEvent = new CustomEvent('pb-draggable-reorder', {
|
227
|
-
detail: {
|
228
|
-
reorderedItems,
|
229
|
-
containerId: container.id,
|
230
|
-
}
|
231
|
-
});
|
232
|
-
|
233
|
-
this.element.dispatchEvent(customEvent);
|
223
|
+
const reorderedItems = Array.from(this.element.querySelectorAll(".pb_draggable_item"))
|
224
|
+
.map(i => ({ id: i.id, container: i.closest(DRAGGABLE_CONTAINER).id }));
|
234
225
|
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
});
|
226
|
+
container.dataset.reorderedItems = JSON.stringify(reorderedItems);
|
227
|
+
this.element.dispatchEvent(new CustomEvent("pb-draggable-reorder", {
|
228
|
+
detail: { reorderedItems, containerId: container.id },
|
229
|
+
}));
|
240
230
|
|
241
|
-
this.
|
231
|
+
this.setState({ items: reorderedItems, isDragging: "", activeContainer: "" });
|
232
|
+
this.draggedItem = null;
|
242
233
|
this.draggedItemId = null;
|
243
234
|
}
|
244
235
|
|
236
|
+
/* ---------------- DRAG END ---------------- */
|
245
237
|
handleDragEnd(event) {
|
246
|
-
event.target.classList.remove(
|
247
|
-
|
238
|
+
event.target.classList.remove(
|
239
|
+
"is_dragging",
|
240
|
+
`drop_zone_${this.dragZoneType}`,
|
241
|
+
`drop_zone_color_${this.dragZoneColor}`,
|
242
|
+
);
|
243
|
+
event.target.style.opacity = "1";
|
244
|
+
|
245
|
+
if (this.dragGhost) {
|
246
|
+
document.body.removeChild(this.dragGhost);
|
247
|
+
this.dragGhost = null;
|
248
|
+
}
|
248
249
|
|
249
|
-
this.setState({
|
250
|
-
isDragging: "",
|
251
|
-
activeContainer: ""
|
252
|
-
});
|
250
|
+
this.setState({ isDragging: "", activeContainer: "" });
|
253
251
|
|
254
|
-
this.
|
255
|
-
|
252
|
+
this.element.querySelectorAll(DRAGGABLE_CONTAINER)
|
253
|
+
.forEach(c => c.classList.remove("active_container"));
|
256
254
|
|
257
|
-
this.
|
258
|
-
|
259
|
-
});
|
255
|
+
this.draggedItem = null;
|
256
|
+
this.draggedItemId = null;
|
260
257
|
}
|
261
258
|
}
|
@@ -1,9 +1,12 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
import Dropdown from '../../pb_dropdown/_dropdown'
|
3
|
+
import Icon from '../../pb_icon/_icon'
|
3
4
|
|
4
5
|
const DropdownError = (props) => {
|
5
6
|
const [selectedOption, setSelectedOption] = useState()
|
6
|
-
const error = selectedOption?.value ? null :
|
7
|
+
const error = selectedOption?.value ? null : (<>
|
8
|
+
<Icon icon="warning" /> Please make a valid selection
|
9
|
+
</>)
|
7
10
|
const options = [
|
8
11
|
{
|
9
12
|
label: "United States",
|
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
|
|
3
3
|
import Button from '../../pb_button/_button'
|
4
4
|
import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
|
5
5
|
import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
|
6
|
+
import Icon from '../../pb_icon/_icon'
|
6
7
|
|
7
8
|
const PhoneNumberInputValidation = (props) => {
|
8
9
|
const [formErrors, setFormErrors] = useState("");
|
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
|
|
29
30
|
setShowFormErrors(formErrors.length > 0);
|
30
31
|
}, [formErrors]);
|
31
32
|
|
33
|
+
const error = (
|
34
|
+
<>
|
35
|
+
<Icon icon="warning" /> Missing phone number.
|
36
|
+
</>
|
37
|
+
)
|
38
|
+
|
32
39
|
return (
|
33
40
|
<form
|
34
41
|
action=""
|
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
|
|
43
50
|
/>
|
44
51
|
)}
|
45
52
|
<PhoneNumberInput
|
46
|
-
error=
|
53
|
+
error={error}
|
47
54
|
id="validation"
|
48
55
|
initialCountry={countryCode}
|
49
56
|
onChange={handleOnChange}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import Body from '../../pb_body/_body'
|
3
3
|
import Select from '../../pb_select/_select'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const SelectError = (props) => {
|
6
7
|
const options = [
|
@@ -18,10 +19,14 @@ const SelectError = (props) => {
|
|
18
19
|
},
|
19
20
|
]
|
20
21
|
|
22
|
+
const error = (<>
|
23
|
+
<Icon icon="warning" /> Please make a valid selection
|
24
|
+
</>)
|
25
|
+
|
21
26
|
return (
|
22
27
|
<div>
|
23
28
|
<Select
|
24
|
-
error=
|
29
|
+
error={error}
|
25
30
|
label="Favorite Food"
|
26
31
|
name="food"
|
27
32
|
options={options}
|
@@ -29,7 +34,7 @@ const SelectError = (props) => {
|
|
29
34
|
{...props}
|
30
35
|
/>
|
31
36
|
<Body
|
32
|
-
error=
|
37
|
+
error={error}
|
33
38
|
status="negative"
|
34
39
|
{...props}
|
35
40
|
/>
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState } from 'react'
|
2
2
|
|
3
3
|
import TextInput from '../_text_input'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const TextInputError = (props) => {
|
6
7
|
const [email, setEmail] = useState('')
|
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
|
|
8
9
|
const handleUpdateEmail = ({ target }) => {
|
9
10
|
setEmail(target.value)
|
10
11
|
}
|
12
|
+
|
13
|
+
const error = (
|
14
|
+
<>
|
15
|
+
<Icon icon="warning" /> Please enter a valid email address
|
16
|
+
</>
|
17
|
+
)
|
18
|
+
|
11
19
|
return (
|
12
20
|
<div>
|
13
21
|
<TextInput
|
14
22
|
addOn={{ icon: 'user', alignment: 'left', border: true }}
|
15
|
-
error=
|
23
|
+
error={error}
|
16
24
|
label="Email Address"
|
17
25
|
onChange={handleUpdateEmail}
|
18
26
|
placeholder="Enter email address"
|
@@ -1,15 +1,21 @@
|
|
1
1
|
import React, {useState} from 'react'
|
2
2
|
import Textarea from '../../pb_textarea/_textarea'
|
3
|
+
import Icon from '../../pb_icon/_icon'
|
3
4
|
|
4
5
|
const TextareaError = (props) => {
|
5
6
|
const [value, setValue] = useState('default value text')
|
6
7
|
const handleChange = (event) => {
|
7
8
|
setValue(event.target.value)
|
8
9
|
}
|
10
|
+
const error = (
|
11
|
+
<>
|
12
|
+
<Icon icon="warning" /> This field has an error!
|
13
|
+
</>
|
14
|
+
)
|
9
15
|
return (
|
10
16
|
<div>
|
11
17
|
<Textarea
|
12
|
-
error=
|
18
|
+
error={error}
|
13
19
|
label="Label"
|
14
20
|
name="comment"
|
15
21
|
onChange={(e)=> handleChange(e)}
|
@@ -1,6 +1,7 @@
|
|
1
1
|
import React, { useState, useEffect } from 'react'
|
2
2
|
|
3
3
|
import Typeahead from '../_typeahead'
|
4
|
+
import Icon from '../../pb_icon/_icon'
|
4
5
|
|
5
6
|
const options = [
|
6
7
|
{ label: 'Orange', value: '#FFA500' },
|
@@ -10,7 +11,10 @@ const options = [
|
|
10
11
|
]
|
11
12
|
|
12
13
|
const TypeaheadErrorState = (props) => {
|
13
|
-
const
|
14
|
+
const error = (<>
|
15
|
+
<Icon icon="warning" /> Please make a valid selection
|
16
|
+
</>)
|
17
|
+
const [errorState, setErrorState] = useState(error);
|
14
18
|
const [searchValue, setSearchValue] = useState(null);
|
15
19
|
|
16
20
|
const handleOnChange = (value) => setSearchValue(value)
|
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
|
|
19
23
|
if(searchValue) {
|
20
24
|
setErrorState("")
|
21
25
|
} else {
|
22
|
-
setErrorState(
|
26
|
+
setErrorState(error)
|
23
27
|
}
|
24
28
|
}, [searchValue])
|
25
29
|
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-
|
1
|
+
import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useRef,useState,useEffect,useMemo,useContext,createElement,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{s as getDefaultExportFromCjs,y as filter,z as omit,u as useCollapsible,A as get,k as getAllIcons,r as commonjsGlobal,x as colors$1,v as highchartsTheme,B as merge,t as highchartsDarkTheme,C as offset$2,E as shift$2,F as flip$2,G as computePosition$1,H as arrow$3,I as createCoords$1,J as round$1,K as max$1,L as min$1,M as rectToClientRect$1,N as getAugmentedNamespace,O as createPopper,Q as uniqueId,S as typography,T as cloneDeep,m as isEmpty$1,U as isString}from"./lib-yWHJ_8mm.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return{...state,items:action.payload};case"SET_DRAG_DATA":return{...state,dragData:action.payload};case"SET_IS_DRAGGING":return{...state,isDragging:action.payload};case"SET_ACTIVE_CONTAINER":return{...state,activeContainer:action.payload};case"CHANGE_CATEGORY":return{...state,items:state.items.map((item=>item.id===action.payload.itemId?{...item,container:action.payload.container}:item))};case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const targetItem=newItems.find((item=>item.id===targetId));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return state}if(dragId===targetId){return state}const draggedIndex=newItems.findIndex((item=>item.id===dragId));const targetIndex=newItems.findIndex((item=>item.id===targetId));if(draggedIndex===-1||targetIndex===-1){return state}newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return{...state,items:newItems}}default:return state}};const DragContext=createContext({});const DraggableContext=()=>{const context=useContext(DragContext);if(context===void 0){throw new Error("DraggableContext must be used within a DraggableProvider")}return context};const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver,dropZone:dropZone={type:"ghost",color:"neutral",direction:"vertical"}})=>{const[state,dispatch]=useReducer(reducer,initialState);const initialItemsRef=useRef(initialItems);const[isDragging,setIsDragging]=useState(false);let dropZoneType="ghost";let dropZoneColor="neutral";let dropZoneDirection="vertical";if(typeof dropZone==="string"){dropZoneType=dropZone}else{dropZoneType=dropZone.type||"ghost";dropZoneColor=dropZone.type==="line"?dropZone.color||"primary":dropZone.color||"neutral";if(dropZoneType==="line"){dropZoneDirection=dropZone.direction||"vertical"}}useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems});initialItemsRef.current=initialItems}),[initialItems]);useEffect((()=>{if(onReorder){onReorder(state.items)}}),[state.items,onReorder]);const handleDragStart=(id,container)=>{setIsDragging(true);dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(!isDragging||container!==state.activeContainer)return;if(state.dragData.id===id)return;const draggedItem=state.items.find((item=>item.id===state.dragData.id));const targetItem=state.items.find((item=>item.id===id));if(!draggedItem||!targetItem||draggedItem.container!==targetItem.container){return}dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{setIsDragging(false);dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const handleDrop=container=>{const draggedItem=state.items.find((item=>item.id===state.dragData.id));if(draggedItem&&draggedItem.container!==container){dispatch({type:"CHANGE_CATEGORY",payload:{itemId:state.dragData.id,container:container}})}dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});setIsDragging(false);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();e.stopPropagation();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,dropZone:dropZoneType,dropZoneColor:dropZoneColor,...dropZoneType==="line"?{direction:dropZoneDirection}:{},handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state,dropZoneType,dropZoneColor,dropZoneDirection,handleDragStart,handleDragEnter,handleDragEnd,handleDrop,handleDragOver]);return jsx$1(DragContext.Provider,{value:contextValue,children:children})};var classnames$1={exports:{}};
|
2
2
|
/*!
|
3
3
|
Copyright (c) 2018 Jed Watson.
|
4
4
|
Licensed under the MIT License (MIT), see
|