@chayns-components/core 5.0.0-beta.1004 → 5.0.0-beta.1005
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/lib/cjs/components/accordion/Accordion.js +30 -30
- package/lib/cjs/components/accordion/Accordion.js.map +1 -1
- package/lib/cjs/components/accordion/Accordion.styles.js +22 -21
- package/lib/cjs/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js +2 -2
- package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js +16 -16
- package/lib/cjs/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js +26 -26
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js +11 -11
- package/lib/cjs/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.js +31 -31
- package/lib/cjs/components/amount-control/AmountControl.js.map +1 -1
- package/lib/cjs/components/amount-control/AmountControl.styles.js +2 -2
- package/lib/cjs/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/cjs/components/button/Button.js +12 -12
- package/lib/cjs/components/button/Button.js.map +1 -1
- package/lib/cjs/components/button/Button.styles.js +4 -4
- package/lib/cjs/components/button/Button.styles.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.js +48 -48
- package/lib/cjs/components/combobox/ComboBox.js.map +1 -1
- package/lib/cjs/components/combobox/ComboBox.styles.js +2 -2
- package/lib/cjs/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/cjs/components/context-menu/ContextMenu.js +23 -23
- package/lib/cjs/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js +2 -2
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.js +4 -4
- package/lib/cjs/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js +2 -2
- package/lib/cjs/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.js +27 -27
- package/lib/cjs/components/file-input/FileInput.js.map +1 -1
- package/lib/cjs/components/file-input/FileInput.styles.js +2 -2
- package/lib/cjs/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js +2 -2
- package/lib/cjs/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/cjs/components/input/Input.styles.js +4 -4
- package/lib/cjs/components/input/Input.styles.js.map +1 -1
- package/lib/cjs/components/list/List.js +11 -11
- package/lib/cjs/components/list/List.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.js +17 -17
- package/lib/cjs/components/list/list-item/ListItem.js.map +1 -1
- package/lib/cjs/components/list/list-item/ListItem.styles.js +2 -2
- package/lib/cjs/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js +2 -2
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js +5 -5
- package/lib/cjs/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.js +17 -17
- package/lib/cjs/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/cjs/components/mention-finder/MentionFinder.styles.js +2 -2
- package/lib/cjs/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/cjs/components/popup/Popup.js +34 -34
- package/lib/cjs/components/popup/Popup.js.map +1 -1
- package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +2 -2
- package/lib/cjs/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js +2 -2
- package/lib/cjs/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.js +17 -17
- package/lib/cjs/components/radio-button/RadioButton.js.map +1 -1
- package/lib/cjs/components/radio-button/RadioButton.styles.js +2 -2
- package/lib/cjs/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.js +64 -64
- package/lib/cjs/components/search-box/SearchBox.js.map +1 -1
- package/lib/cjs/components/search-box/SearchBox.styles.js +2 -2
- package/lib/cjs/components/search-box/SearchBox.styles.js.map +1 -1
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js +2 -2
- package/lib/cjs/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.js +16 -16
- package/lib/cjs/components/search-input/SearchInput.js.map +1 -1
- package/lib/cjs/components/search-input/SearchInput.styles.js +3 -3
- package/lib/cjs/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/cjs/components/slider/Slider.styles.js +2 -2
- package/lib/cjs/components/slider/Slider.styles.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.js +44 -44
- package/lib/cjs/components/slider-button/SliderButton.js.map +1 -1
- package/lib/cjs/components/slider-button/SliderButton.styles.js +2 -2
- package/lib/cjs/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/cjs/components/truncation/Truncation.styles.js +2 -2
- package/lib/cjs/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/cjs/utils/sliderButton.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.js +1 -1
- package/lib/esm/components/accordion/Accordion.js.map +1 -1
- package/lib/esm/components/accordion/Accordion.styles.js +21 -20
- package/lib/esm/components/accordion/Accordion.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js +1 -1
- package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js +1 -1
- package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.js.map +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js +1 -1
- package/lib/esm/components/accordion/accordion-head/AccordionHead.styles.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.js +2 -2
- package/lib/esm/components/amount-control/AmountControl.js.map +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js +1 -1
- package/lib/esm/components/amount-control/AmountControl.styles.js.map +1 -1
- package/lib/esm/components/button/Button.js +1 -1
- package/lib/esm/components/button/Button.js.map +1 -1
- package/lib/esm/components/button/Button.styles.js +1 -1
- package/lib/esm/components/button/Button.styles.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.js +1 -1
- package/lib/esm/components/combobox/ComboBox.js.map +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js +1 -1
- package/lib/esm/components/combobox/ComboBox.styles.js.map +1 -1
- package/lib/esm/components/context-menu/ContextMenu.js +1 -1
- package/lib/esm/components/context-menu/ContextMenu.js.map +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.js.map +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js +1 -1
- package/lib/esm/components/expandable-content/ExpandableContent.styles.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.js +1 -1
- package/lib/esm/components/file-input/FileInput.js.map +1 -1
- package/lib/esm/components/file-input/FileInput.styles.js +1 -1
- package/lib/esm/components/file-input/FileInput.styles.js.map +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js +1 -1
- package/lib/esm/components/filter-buttons/filter-button/FilterButton.styles.js.map +1 -1
- package/lib/esm/components/input/Input.styles.js +1 -1
- package/lib/esm/components/input/Input.styles.js.map +1 -1
- package/lib/esm/components/list/List.js +1 -1
- package/lib/esm/components/list/List.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.js +1 -1
- package/lib/esm/components/list/list-item/ListItem.js.map +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js +1 -1
- package/lib/esm/components/list/list-item/ListItem.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js +1 -1
- package/lib/esm/components/list/list-item/list-item-head/ListItemHead.styles.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.js.map +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.styles.js +1 -1
- package/lib/esm/components/mention-finder/MentionFinder.styles.js.map +1 -1
- package/lib/esm/components/popup/Popup.js +1 -1
- package/lib/esm/components/popup/Popup.js.map +1 -1
- package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js +1 -1
- package/lib/esm/components/popup/popup-content-wrapper/PopupContentWrapper.styles.js.map +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js +1 -1
- package/lib/esm/components/progress-bar/ProgressBar.styles.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.js +2 -2
- package/lib/esm/components/radio-button/RadioButton.js.map +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js +1 -1
- package/lib/esm/components/radio-button/RadioButton.styles.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.js +1 -1
- package/lib/esm/components/search-box/SearchBox.js.map +1 -1
- package/lib/esm/components/search-box/SearchBox.styles.js +1 -1
- package/lib/esm/components/search-box/SearchBox.styles.js.map +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js +1 -1
- package/lib/esm/components/search-box/search-box-body/SearchBoxBody.styles.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.js +1 -1
- package/lib/esm/components/search-input/SearchInput.js.map +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js +1 -1
- package/lib/esm/components/search-input/SearchInput.styles.js.map +1 -1
- package/lib/esm/components/slider/Slider.styles.js +1 -1
- package/lib/esm/components/slider/Slider.styles.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.js +1 -1
- package/lib/esm/components/slider-button/SliderButton.js.map +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js +1 -1
- package/lib/esm/components/slider-button/SliderButton.styles.js.map +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js +1 -1
- package/lib/esm/components/truncation/Truncation.styles.js.map +1 -1
- package/lib/esm/utils/sliderButton.js.map +1 -1
- package/lib/types/components/accordion/Accordion.styles.d.ts +2 -263
- package/lib/types/components/accordion/accordion-body/AccordionBody.styles.d.ts +2 -263
- package/lib/types/components/accordion/accordion-head/AccordionHead.styles.d.ts +20 -2660
- package/lib/types/components/amount-control/AmountControl.styles.d.ts +2 -273
- package/lib/types/components/button/Button.styles.d.ts +6 -799
- package/lib/types/components/combobox/ComboBox.styles.d.ts +2 -263
- package/lib/types/components/context-menu/context-menu-content/ContextMenuContent.styles.d.ts +2 -263
- package/lib/types/components/expandable-content/ExpandableContent.styles.d.ts +2 -263
- package/lib/types/components/file-input/FileInput.styles.d.ts +2 -263
- package/lib/types/components/filter-buttons/filter-button/FilterButton.styles.d.ts +2 -263
- package/lib/types/components/input/Input.styles.d.ts +6 -791
- package/lib/types/components/list/list-item/ListItem.styles.d.ts +2 -263
- package/lib/types/components/list/list-item/list-item-body/ListItemBody.styles.d.ts +2 -263
- package/lib/types/components/list/list-item/list-item-head/ListItemHead.styles.d.ts +8 -1052
- package/lib/types/components/mention-finder/MentionFinder.styles.d.ts +2 -263
- package/lib/types/components/popup/popup-content-wrapper/PopupContentWrapper.styles.d.ts +2 -263
- package/lib/types/components/progress-bar/ProgressBar.styles.d.ts +2 -263
- package/lib/types/components/radio-button/RadioButton.styles.d.ts +3 -264
- package/lib/types/components/search-box/SearchBox.styles.d.ts +2 -263
- package/lib/types/components/search-box/search-box-body/SearchBoxBody.styles.d.ts +2 -263
- package/lib/types/components/search-input/SearchInput.styles.d.ts +4 -526
- package/lib/types/components/slider/Slider.styles.d.ts +3 -585
- package/lib/types/components/slider-button/SliderButton.styles.d.ts +2 -263
- package/lib/types/components/truncation/Truncation.styles.d.ts +2 -263
- package/lib/types/utils/sliderButton.d.ts +1 -1
- package/package.json +3 -3
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _chaynsApi = require("chayns-api");
|
|
8
|
-
var
|
|
9
|
-
var
|
|
8
|
+
var _react = require("motion/react");
|
|
9
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _reactDom = require("react-dom");
|
|
11
11
|
var _uuid = require("../../hooks/uuid");
|
|
12
12
|
var _contextMenu = require("../../types/contextMenu");
|
|
@@ -17,9 +17,9 @@ var _ContextMenu = require("./ContextMenu.styles");
|
|
|
17
17
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
19
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
20
|
-
const ContextMenu = /*#__PURE__*/(0,
|
|
20
|
+
const ContextMenu = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
21
21
|
alignment,
|
|
22
|
-
children = /*#__PURE__*/
|
|
22
|
+
children = /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
23
23
|
icons: ['ts-ellipsis_v'],
|
|
24
24
|
size: 18
|
|
25
25
|
}),
|
|
@@ -31,35 +31,35 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
31
31
|
onShow,
|
|
32
32
|
shouldCloseOnPopupClick = true
|
|
33
33
|
}, ref) => {
|
|
34
|
-
const [internalCoordinates, setInternalCoordinates] = (0,
|
|
34
|
+
const [internalCoordinates, setInternalCoordinates] = (0, _react2.useState)({
|
|
35
35
|
x: 0,
|
|
36
36
|
y: 0
|
|
37
37
|
});
|
|
38
|
-
const [newContainer, setNewContainer] = (0,
|
|
39
|
-
const [internalAlignment, setInternalAlignment] = (0,
|
|
40
|
-
const [isContentShown, setIsContentShown] = (0,
|
|
41
|
-
const [portal, setPortal] = (0,
|
|
38
|
+
const [newContainer, setNewContainer] = (0, _react2.useState)(container ?? null);
|
|
39
|
+
const [internalAlignment, setInternalAlignment] = (0, _react2.useState)(_contextMenu.ContextMenuAlignment.TopLeft);
|
|
40
|
+
const [isContentShown, setIsContentShown] = (0, _react2.useState)(false);
|
|
41
|
+
const [portal, setPortal] = (0, _react2.useState)();
|
|
42
42
|
const uuid = (0, _uuid.useUuid)();
|
|
43
43
|
|
|
44
44
|
// ToDo: Replace with hook if new chayns api is ready
|
|
45
|
-
const contextMenuContentRef = (0,
|
|
46
|
-
const contextMenuRef = (0,
|
|
47
|
-
(0,
|
|
45
|
+
const contextMenuContentRef = (0, _react2.useRef)(null);
|
|
46
|
+
const contextMenuRef = (0, _react2.useRef)(null);
|
|
47
|
+
(0, _react2.useEffect)(() => {
|
|
48
48
|
if (contextMenuRef.current && !container) {
|
|
49
49
|
const el = contextMenuRef.current;
|
|
50
50
|
const element = el.closest('.dialog-inner, .page-provider, .tapp, body');
|
|
51
51
|
setNewContainer(element);
|
|
52
52
|
}
|
|
53
53
|
}, [container]);
|
|
54
|
-
(0,
|
|
54
|
+
(0, _react2.useEffect)(() => {
|
|
55
55
|
if (container instanceof Element) {
|
|
56
56
|
setNewContainer(container);
|
|
57
57
|
}
|
|
58
58
|
}, [container]);
|
|
59
|
-
const handleHide = (0,
|
|
59
|
+
const handleHide = (0, _react2.useCallback)(() => {
|
|
60
60
|
setIsContentShown(false);
|
|
61
61
|
}, []);
|
|
62
|
-
const handleShow = (0,
|
|
62
|
+
const handleShow = (0, _react2.useCallback)(async () => {
|
|
63
63
|
const isTouch = (0, _environment.getIsTouch)();
|
|
64
64
|
if (isTouch) {
|
|
65
65
|
const {
|
|
@@ -118,23 +118,23 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
118
118
|
setIsContentShown(true);
|
|
119
119
|
}
|
|
120
120
|
}, [items, newContainer]);
|
|
121
|
-
const handleClick = (0,
|
|
121
|
+
const handleClick = (0, _react2.useCallback)(event => {
|
|
122
122
|
event.preventDefault();
|
|
123
123
|
event.stopPropagation();
|
|
124
124
|
void handleShow();
|
|
125
125
|
}, [handleShow]);
|
|
126
|
-
const handleDocumentClick = (0,
|
|
126
|
+
const handleDocumentClick = (0, _react2.useCallback)(event => {
|
|
127
127
|
var _contextMenuContentRe;
|
|
128
128
|
if (!shouldCloseOnPopupClick && (_contextMenuContentRe = contextMenuContentRef.current) !== null && _contextMenuContentRe !== void 0 && _contextMenuContentRe.contains(event.target)) {
|
|
129
129
|
return;
|
|
130
130
|
}
|
|
131
131
|
handleHide();
|
|
132
132
|
}, [handleHide, shouldCloseOnPopupClick]);
|
|
133
|
-
(0,
|
|
133
|
+
(0, _react2.useImperativeHandle)(ref, () => ({
|
|
134
134
|
hide: handleHide,
|
|
135
135
|
show: handleShow
|
|
136
136
|
}), [handleHide, handleShow]);
|
|
137
|
-
(0,
|
|
137
|
+
(0, _react2.useEffect)(() => {
|
|
138
138
|
if (isContentShown) {
|
|
139
139
|
document.addEventListener('click', handleDocumentClick, true);
|
|
140
140
|
window.addEventListener('blur', handleHide);
|
|
@@ -149,13 +149,13 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
149
149
|
window.removeEventListener('blur', handleHide);
|
|
150
150
|
};
|
|
151
151
|
}, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
|
|
152
|
-
(0,
|
|
152
|
+
(0, _react2.useEffect)(() => {
|
|
153
153
|
if (!newContainer) {
|
|
154
154
|
return;
|
|
155
155
|
}
|
|
156
|
-
setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/
|
|
156
|
+
setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
157
157
|
initial: false
|
|
158
|
-
}, isContentShown && /*#__PURE__*/
|
|
158
|
+
}, isContentShown && /*#__PURE__*/_react2.default.createElement(_ContextMenuContent.default, {
|
|
159
159
|
coordinates: coordinates ?? internalCoordinates,
|
|
160
160
|
items: items,
|
|
161
161
|
key: `contextMenu_${uuid}`,
|
|
@@ -163,7 +163,7 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
163
163
|
ref: contextMenuContentRef
|
|
164
164
|
})), newContainer));
|
|
165
165
|
}, [alignment, newContainer, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
|
|
166
|
-
return /*#__PURE__*/
|
|
166
|
+
return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, /*#__PURE__*/_react2.default.createElement(_ContextMenu.StyledContextMenu, {
|
|
167
167
|
className: "beta-chayns-context-menu",
|
|
168
168
|
onClick: handleClick,
|
|
169
169
|
ref: contextMenuRef
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","ref","internalCoordinates","setInternalCoordinates","useState","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","useEffect","current","el","element","closest","Element","handleHide","useCallback","handleShow","isTouch","getIsTouch","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","index","name","id","icon","open","_items$result$","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","document","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (contextMenuRef.current && !container) {\n const el = contextMenuRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n if (!newContainer) {\n return;\n }\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ContextMenu.js","names":["_chaynsApi","require","_react","_react2","_interopRequireWildcard","_reactDom","_uuid","_contextMenu","_environment","_Icon","_interopRequireDefault","_ContextMenuContent","_ContextMenu","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ContextMenu","forwardRef","alignment","children","createElement","icons","size","container","coordinates","isInDialog","items","onHide","onShow","shouldCloseOnPopupClick","ref","internalCoordinates","setInternalCoordinates","useState","x","y","newContainer","setNewContainer","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","useEffect","current","el","element","closest","Element","handleHide","useCallback","handleShow","isTouch","getIsTouch","result","createDialog","type","DialogType","SELECT","buttons","list","map","text","index","name","id","icon","open","_items$result$","onClick","height","childrenHeight","left","childrenLeft","top","childrenTop","width","childrenWidth","getBoundingClientRect","zoomX","offsetWidth","zoomY","offsetHeight","scrollLeft","scrollTop","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","document","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","key","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { createDialog, DialogType } from 'chayns-api';\nimport { AnimatePresence } from 'motion/react';\nimport React, {\n forwardRef,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n ReactPortal,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport { ContextMenuAlignment } from '../../types/contextMenu';\nimport { getIsTouch } from '../../utils/environment';\nimport Icon from '../icon/Icon';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n x: number;\n y: number;\n};\n\nexport type ContextMenuItem = {\n icons: string[];\n key: string;\n onClick: (event?: MouseEvent<HTMLDivElement>) => Promise<void> | void;\n text: string;\n};\n\nexport type ContextMenuRef = {\n hide: VoidFunction;\n show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n /**\n * Optional custom alignment used instead of calculating it using the\n * alignment within the page. The available alignment can be taken from the\n * ContextMenuAlignment enum.\n */\n alignment?: ContextMenuAlignment;\n /**\n * The element over which the content of the `ContextMenu` should be displayed. The default is an ellipsis icon.\n */\n children?: ReactNode;\n /**\n * The element where the content of the `ContextMenu` should be rendered via React Portal.\n */\n container?: Element;\n /**\n * Optional own coordinates to be used instead of calculating the alignment\n * based on the alignment of the children.\n */\n coordinates?: ContextMenuCoordinates;\n /**\n * Whether the ContextMenu is inside a dialog.\n */\n isInDialog?: boolean;\n /**\n * The items that will be displayed in the content of the `ContextMenu`.\n */\n items: ContextMenuItem[];\n /**\n * Function to be executed when the content of the Context menu has been hidden.\n */\n onHide?: VoidFunction;\n /**\n * Function to be executed when the content of the Context menu has been shown.\n */\n onShow?: VoidFunction;\n /**\n * Whether the popup should be closed if its clicked.\n */\n shouldCloseOnPopupClick?: boolean;\n};\n\ninterface SelectDialogResult {\n buttonType: number;\n result: number[];\n}\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n (\n {\n alignment,\n children = <Icon icons={['ts-ellipsis_v']} size={18} />,\n container,\n coordinates,\n isInDialog = false,\n items,\n onHide,\n onShow,\n shouldCloseOnPopupClick = true,\n },\n ref,\n ) => {\n const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n x: 0,\n y: 0,\n });\n const [newContainer, setNewContainer] = useState<Element | null>(container ?? null);\n\n const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n ContextMenuAlignment.TopLeft,\n );\n\n const [isContentShown, setIsContentShown] = useState(false);\n const [portal, setPortal] = useState<ReactPortal>();\n\n const uuid = useUuid();\n\n // ToDo: Replace with hook if new chayns api is ready\n const contextMenuContentRef = useRef<HTMLDivElement>(null);\n const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n useEffect(() => {\n if (contextMenuRef.current && !container) {\n const el = contextMenuRef.current as HTMLElement;\n\n const element = el.closest('.dialog-inner, .page-provider, .tapp, body');\n\n setNewContainer(element);\n }\n }, [container]);\n\n useEffect(() => {\n if (container instanceof Element) {\n setNewContainer(container);\n }\n }, [container]);\n\n const handleHide = useCallback(() => {\n setIsContentShown(false);\n }, []);\n\n const handleShow = useCallback(async () => {\n const isTouch = getIsTouch();\n\n if (isTouch) {\n const { result } = (await createDialog({\n type: DialogType.SELECT,\n buttons: [],\n list: items.map(({ icons, text }, index) => ({\n name: text,\n id: index,\n icon: icons[0],\n })),\n }).open()) as SelectDialogResult;\n\n if (result && typeof result[0] === 'number') {\n void items[result[0]]?.onClick();\n }\n } else if (contextMenuRef.current) {\n if (!newContainer) {\n return;\n }\n\n const {\n height: childrenHeight,\n left: childrenLeft,\n top: childrenTop,\n width: childrenWidth,\n } = contextMenuRef.current.getBoundingClientRect();\n\n const { height, width, top, left } = newContainer.getBoundingClientRect();\n\n const zoomX = width / (newContainer as HTMLElement).offsetWidth;\n const zoomY = height / (newContainer as HTMLElement).offsetHeight;\n\n const x =\n (childrenLeft + childrenWidth / 2 - left) / zoomX + newContainer.scrollLeft;\n const y = (childrenTop + childrenHeight / 2 - top) / zoomY + newContainer.scrollTop;\n\n setInternalCoordinates({ x, y });\n\n if (x < width / 2) {\n if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomRight);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopRight);\n }\n } else if (y < height / 2) {\n setInternalAlignment(ContextMenuAlignment.BottomLeft);\n } else {\n setInternalAlignment(ContextMenuAlignment.TopLeft);\n }\n\n setIsContentShown(true);\n }\n }, [items, newContainer]);\n\n const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void handleShow();\n },\n [handleShow],\n );\n\n const handleDocumentClick = useCallback<EventListener>(\n (event) => {\n if (\n !shouldCloseOnPopupClick &&\n contextMenuContentRef.current?.contains(event.target as Node)\n ) {\n return;\n }\n\n handleHide();\n },\n [handleHide, shouldCloseOnPopupClick],\n );\n\n useImperativeHandle(\n ref,\n () => ({\n hide: handleHide,\n show: handleShow,\n }),\n [handleHide, handleShow],\n );\n\n useEffect(() => {\n if (isContentShown) {\n document.addEventListener('click', handleDocumentClick, true);\n window.addEventListener('blur', handleHide);\n\n if (typeof onShow === 'function') {\n onShow();\n }\n } else if (typeof onHide === 'function') {\n onHide();\n }\n\n return () => {\n document.removeEventListener('click', handleDocumentClick, true);\n window.removeEventListener('blur', handleHide);\n };\n }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n useEffect(() => {\n if (!newContainer) {\n return;\n }\n\n setPortal(() =>\n createPortal(\n <AnimatePresence initial={false}>\n {isContentShown && (\n <ContextMenuContent\n coordinates={coordinates ?? internalCoordinates}\n items={items}\n key={`contextMenu_${uuid}`}\n alignment={alignment ?? internalAlignment}\n ref={contextMenuContentRef}\n />\n )}\n </AnimatePresence>,\n newContainer,\n ),\n );\n }, [\n alignment,\n newContainer,\n coordinates,\n internalAlignment,\n internalCoordinates,\n isContentShown,\n items,\n uuid,\n ]);\n\n return (\n <>\n <StyledContextMenu\n className=\"beta-chayns-context-menu\"\n onClick={handleClick}\n ref={contextMenuRef}\n >\n {children}\n </StyledContextMenu>\n {portal}\n </>\n );\n },\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.StyledMotionContextMenuContent = exports.StyledContextMenuContentItemText = exports.StyledContextMenuContentItemIconWrapper = exports.StyledContextMenuContentItem = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _react = require("motion/react");
|
|
8
8
|
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
9
|
var _contextMenu = require("../../../types/contextMenu");
|
|
10
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
|
-
const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent = (0, _styledComponents.default)(
|
|
12
|
+
const StyledMotionContextMenuContent = exports.StyledMotionContextMenuContent = (0, _styledComponents.default)(_react.motion.div)`
|
|
13
13
|
background-color: ${({
|
|
14
14
|
theme
|
|
15
15
|
}) => theme['001']};
|
package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.styles.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.styles.js","names":["
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_contextMenu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionContextMenuContent","exports","styled","motion","div","theme","text","$position","ContextMenuAlignment","TopLeft","css","BottomLeft","TopRight","BottomRight","TopCenter","BottomCenter","undefined","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionContextMenuContentProps = WithTheme<{\n $position: ContextMenuAlignment;\n}>;\n\nexport const StyledMotionContextMenuContent = styled(\n motion.div,\n)<StyledMotionContextMenuContentProps>`\n background-color: ${({ theme }: StyledMotionContextMenuContentProps) => theme['001']};\n border: 1px solid rgba(0, 0, 0, 0.1);\n border-radius: 3px;\n box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);\n color: ${({ theme }: StyledMotionContextMenuContentProps) => theme.text};\n pointer-events: all;\n position: absolute;\n z-index: 10;\n\n &::after {\n background-color: inherit;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-right: 1px solid rgba(0, 0, 0, 0.1);\n box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);\n content: '';\n height: 14px;\n position: absolute;\n width: 14px;\n z-index: -2;\n\n ${({ $position }) => {\n switch ($position) {\n case ContextMenuAlignment.TopLeft:\n return css`\n bottom: -7px;\n right: 7px;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomLeft:\n return css`\n top: -7px;\n right: 7px;\n transform: rotate(225deg);\n `;\n case ContextMenuAlignment.TopRight:\n return css`\n transform: rotate(45deg);\n bottom: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.BottomRight:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 7px;\n `;\n case ContextMenuAlignment.TopCenter:\n return css`\n bottom: -7px;\n right: 45%;\n transform: rotate(45deg);\n `;\n case ContextMenuAlignment.BottomCenter:\n return css`\n transform: rotate(225deg);\n top: -7px;\n left: 45%;\n `;\n\n default:\n return undefined;\n }\n }}\n }\n\n &::before {\n background-color: inherit;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: -1;\n }\n`;\n\ntype StyledContextMenuContentItemProps = WithTheme<unknown>;\n\nexport const StyledContextMenuContentItem = styled.div<StyledContextMenuContentItemProps>`\n cursor: pointer;\n display: flex;\n padding: 5px 8px 5px 5px;\n transition: background-color 0.3s ease;\n\n &:hover {\n background-color: ${({ theme }: StyledContextMenuContentItemProps) =>\n theme['secondary-103']};\n }\n`;\n\nexport const StyledContextMenuContentItemIconWrapper = styled.div`\n flex: 0 0 auto;\n margin: 0 8px 0 3px;\n width: 20px;\n`;\n\nexport const StyledContextMenuContentItemText = styled.div`\n flex: 0 0 auto;\n white-space: nowrap;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,17 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
var
|
|
8
|
-
var
|
|
7
|
+
var _react = require("motion/react");
|
|
8
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _ExpandableContent = require("./ExpandableContent.styles");
|
|
10
10
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
11
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
12
12
|
const ExpandableContent = ({
|
|
13
13
|
children,
|
|
14
14
|
isOpen
|
|
15
|
-
}) => (0,
|
|
15
|
+
}) => (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
16
16
|
initial: false
|
|
17
|
-
}, /*#__PURE__*/
|
|
17
|
+
}, /*#__PURE__*/_react2.default.createElement(_ExpandableContent.StyledMotionExpandableContent, {
|
|
18
18
|
$isOpen: isOpen,
|
|
19
19
|
animate: {
|
|
20
20
|
height: isOpen ? 'auto' : '0px'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.js","names":["
|
|
1
|
+
{"version":3,"file":"ExpandableContent.js","names":["_react","require","_react2","_interopRequireWildcard","_ExpandableContent","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ExpandableContent","children","isOpen","useMemo","createElement","AnimatePresence","initial","StyledMotionExpandableContent","$isOpen","animate","height","transition","duration","type","displayName","_default","exports"],"sources":["../../../../src/components/expandable-content/ExpandableContent.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, ReactNode, useMemo } from 'react';\nimport { StyledMotionExpandableContent } from './ExpandableContent.styles';\n\nexport type ExpandableContentProps = {\n /**\n * The children that should be animated.\n */\n children: ReactNode;\n /**\n * Whether the content is expanded.\n */\n isOpen: boolean;\n};\n\nconst ExpandableContent: FC<ExpandableContentProps> = ({ children, isOpen }) =>\n useMemo(\n () => (\n <AnimatePresence initial={false}>\n <StyledMotionExpandableContent\n $isOpen={isOpen}\n animate={{ height: isOpen ? 'auto' : '0px' }}\n transition={{ duration: 0.2, type: 'tween' }}\n >\n {children}\n </StyledMotionExpandableContent>\n </AnimatePresence>\n ),\n [children, isOpen],\n );\n\nExpandableContent.displayName = 'ExpandableContent';\n\nexport default ExpandableContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,OAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAH,OAAA;AAA2E,SAAAI,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAa3E,MAAMW,iBAA6C,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAO,CAAC,KACvE,IAAAC,eAAO,EACH,mBACI1B,OAAA,CAAAS,OAAA,CAAAkB,aAAA,CAAC7B,MAAA,CAAA8B,eAAe;EAACC,OAAO,EAAE;AAAM,gBAC5B7B,OAAA,CAAAS,OAAA,CAAAkB,aAAA,CAACzB,kBAAA,CAAA4B,6BAA6B;EAC1BC,OAAO,EAAEN,MAAO;EAChBO,OAAO,EAAE;IAAEC,MAAM,EAAER,MAAM,GAAG,MAAM,GAAG;EAAM,CAAE;EAC7CS,UAAU,EAAE;IAAEC,QAAQ,EAAE,GAAG;IAAEC,IAAI,EAAE;EAAQ;AAAE,GAE5CZ,QAC0B,CAClB,CACpB,EACD,CAACA,QAAQ,EAAEC,MAAM,CACrB,CAAC;AAELF,iBAAiB,CAACc,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA9B,OAAA,GAErCc,iBAAiB","ignoreList":[]}
|
|
@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.StyledMotionExpandableContent = void 0;
|
|
7
|
-
var
|
|
7
|
+
var _react = require("motion/react");
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
-
const StyledMotionExpandableContent = exports.StyledMotionExpandableContent = (0, _styledComponents.default)(
|
|
10
|
+
const StyledMotionExpandableContent = exports.StyledMotionExpandableContent = (0, _styledComponents.default)(_react.motion.div)`
|
|
11
11
|
overflow: ${({
|
|
12
12
|
$isOpen
|
|
13
13
|
}) => $isOpen ? 'visible' : 'hidden'};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExpandableContent.styles.js","names":["
|
|
1
|
+
{"version":3,"file":"ExpandableContent.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledMotionExpandableContent","exports","styled","motion","div","$isOpen"],"sources":["../../../../src/components/expandable-content/ExpandableContent.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled from 'styled-components';\n\ntype StyledMotionExpandableContentProps = {\n $isOpen: boolean;\n};\n\nexport const StyledMotionExpandableContent = styled(motion.div)<StyledMotionExpandableContentProps>`\n overflow: ${({ $isOpen }) => ($isOpen ? 'visible' : 'hidden')};\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAMhC,MAAMG,6BAA6B,GAAAC,OAAA,CAAAD,6BAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAqC;AACnG,gBAAgB,CAAC;EAAEC;AAAQ,CAAC,KAAMA,OAAO,GAAG,SAAS,GAAG,QAAS;AACjE,CAAC","ignoreList":[]}
|
|
@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _chaynsApi = require("chayns-api");
|
|
8
|
-
var
|
|
9
|
-
var
|
|
8
|
+
var _react = require("motion/react");
|
|
9
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _file = require("../../utils/file");
|
|
11
11
|
var _fileDialog = require("../../utils/fileDialog");
|
|
12
12
|
var _Icon = _interopRequireDefault(require("../icon/Icon"));
|
|
@@ -16,7 +16,7 @@ var _FileInput = require("./FileInput.styles");
|
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
17
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
18
18
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
|
-
const FileInput = /*#__PURE__*/(0,
|
|
19
|
+
const FileInput = /*#__PURE__*/(0, _react2.forwardRef)(({
|
|
20
20
|
fileSelectionIcons = ['fa fa-upload'],
|
|
21
21
|
imageSelectIcons = ['ts-image'],
|
|
22
22
|
fileTypes,
|
|
@@ -30,16 +30,16 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
30
30
|
fileSelectionPlaceholder = 'Dateien hochladen',
|
|
31
31
|
imageSelectPlaceholder
|
|
32
32
|
}, ref) => {
|
|
33
|
-
const [internalFiles, setInternalFiles] = (0,
|
|
34
|
-
const [internalImages, setInternalImages] = (0,
|
|
33
|
+
const [internalFiles, setInternalFiles] = (0, _react2.useState)([]);
|
|
34
|
+
const [internalImages, setInternalImages] = (0, _react2.useState)([]);
|
|
35
35
|
const handleInputClear = () => {
|
|
36
36
|
setInternalFiles([]);
|
|
37
37
|
setInternalImages([]);
|
|
38
38
|
};
|
|
39
|
-
(0,
|
|
39
|
+
(0, _react2.useImperativeHandle)(ref, () => ({
|
|
40
40
|
clear: handleInputClear
|
|
41
41
|
}), []);
|
|
42
|
-
const handleAddImages = (0,
|
|
42
|
+
const handleAddImages = (0, _react2.useCallback)(images => {
|
|
43
43
|
const newImages = [];
|
|
44
44
|
images.forEach(image => {
|
|
45
45
|
if (!(0, _file.filterDuplicateFileUrls)({
|
|
@@ -58,7 +58,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
58
58
|
}
|
|
59
59
|
setInternalImages(prevState => [...prevState, ...tmp]);
|
|
60
60
|
}, [files === null || files === void 0 ? void 0 : files.length, internalFiles.length, internalImages, maxFiles, onAdd]);
|
|
61
|
-
const handleAddFiles = (0,
|
|
61
|
+
const handleAddFiles = (0, _react2.useCallback)(newFiles => {
|
|
62
62
|
const newFileItems = [];
|
|
63
63
|
newFiles.forEach(file => {
|
|
64
64
|
if (fileTypes && !(0, _file.isValidFileType)({
|
|
@@ -83,7 +83,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
83
83
|
}
|
|
84
84
|
setInternalFiles(prevState => [...prevState, ...tmp]);
|
|
85
85
|
}, [fileTypes, files === null || files === void 0 ? void 0 : files.length, internalFiles, internalImages.length, maxFiles, onAdd]);
|
|
86
|
-
const handleDeleteFile = (0,
|
|
86
|
+
const handleDeleteFile = (0, _react2.useCallback)(fileName => {
|
|
87
87
|
let fileToDelete;
|
|
88
88
|
const filteredFiles = internalFiles.filter(file => {
|
|
89
89
|
const {
|
|
@@ -116,7 +116,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
116
116
|
}
|
|
117
117
|
onRemove(fileToDelete);
|
|
118
118
|
}, [files, internalFiles, internalImages, onRemove]);
|
|
119
|
-
const internalIsDisabled = (0,
|
|
119
|
+
const internalIsDisabled = (0, _react2.useMemo)(() => {
|
|
120
120
|
if (isDisabled) {
|
|
121
121
|
return true;
|
|
122
122
|
}
|
|
@@ -130,7 +130,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
130
130
|
}
|
|
131
131
|
return false;
|
|
132
132
|
}, [internalFiles.length, internalImages.length, isDisabled, maxFiles, onMaxFilesReached]);
|
|
133
|
-
const handleImageSelectionClick = (0,
|
|
133
|
+
const handleImageSelectionClick = (0, _react2.useCallback)(async () => {
|
|
134
134
|
if (internalIsDisabled) {
|
|
135
135
|
return;
|
|
136
136
|
}
|
|
@@ -161,7 +161,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
161
161
|
handleAddImages([result.url]);
|
|
162
162
|
}
|
|
163
163
|
}, [handleAddImages, internalIsDisabled]);
|
|
164
|
-
const handleFileSelectionClick = (0,
|
|
164
|
+
const handleFileSelectionClick = (0, _react2.useCallback)(async () => {
|
|
165
165
|
if (internalIsDisabled) {
|
|
166
166
|
return;
|
|
167
167
|
}
|
|
@@ -172,14 +172,14 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
172
172
|
});
|
|
173
173
|
handleAddFiles(newFiles);
|
|
174
174
|
}, [fileTypes, handleAddFiles, internalIsDisabled, maxFileSizeInMB]);
|
|
175
|
-
const handleDrop = (0,
|
|
175
|
+
const handleDrop = (0, _react2.useCallback)(e => {
|
|
176
176
|
e.preventDefault();
|
|
177
177
|
const draggedFiles = Array.from(e.dataTransfer.files);
|
|
178
178
|
handleAddFiles(draggedFiles);
|
|
179
179
|
}, [handleAddFiles]);
|
|
180
|
-
const content = (0,
|
|
180
|
+
const content = (0, _react2.useMemo)(() => {
|
|
181
181
|
const combinedFiles = [...internalImages, ...internalFiles];
|
|
182
|
-
const items = combinedFiles.map(file => /*#__PURE__*/
|
|
182
|
+
const items = combinedFiles.map(file => /*#__PURE__*/_react2.default.createElement(_FileInput.StyledMotionFileInputList, {
|
|
183
183
|
animate: {
|
|
184
184
|
height: 'auto',
|
|
185
185
|
opacity: 1
|
|
@@ -193,7 +193,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
193
193
|
duration: 0.25,
|
|
194
194
|
type: 'tween'
|
|
195
195
|
}
|
|
196
|
-
}, /*#__PURE__*/
|
|
196
|
+
}, /*#__PURE__*/_react2.default.createElement(_FileListItem.default, {
|
|
197
197
|
fileType: typeof file !== 'string' ? file.type : undefined,
|
|
198
198
|
fileName: typeof file !== 'string' ? file.name : undefined,
|
|
199
199
|
fileSize: typeof file !== 'string' ? file.size : undefined,
|
|
@@ -202,7 +202,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
202
202
|
})));
|
|
203
203
|
return items;
|
|
204
204
|
}, [handleDeleteFile, internalFiles, internalImages]);
|
|
205
|
-
const uploadedFiles = (0,
|
|
205
|
+
const uploadedFiles = (0, _react2.useMemo)(() => {
|
|
206
206
|
const items = [];
|
|
207
207
|
const cutFiles = maxFiles ? files === null || files === void 0 ? void 0 : files.splice(0, maxFiles) : files;
|
|
208
208
|
cutFiles === null || cutFiles === void 0 || cutFiles.forEach(({
|
|
@@ -210,7 +210,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
210
210
|
id,
|
|
211
211
|
name
|
|
212
212
|
}) => {
|
|
213
|
-
items.push(/*#__PURE__*/
|
|
213
|
+
items.push(/*#__PURE__*/_react2.default.createElement(_FileInput.StyledMotionFileInputList, {
|
|
214
214
|
animate: {
|
|
215
215
|
height: 'auto',
|
|
216
216
|
opacity: 1
|
|
@@ -224,7 +224,7 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
224
224
|
duration: 0.25,
|
|
225
225
|
type: 'tween'
|
|
226
226
|
}
|
|
227
|
-
}, /*#__PURE__*/
|
|
227
|
+
}, /*#__PURE__*/_react2.default.createElement(_FileListItem.default, {
|
|
228
228
|
url: url,
|
|
229
229
|
onRemove: handleDeleteFile,
|
|
230
230
|
fileName: name
|
|
@@ -232,24 +232,24 @@ const FileInput = /*#__PURE__*/(0, _react.forwardRef)(({
|
|
|
232
232
|
});
|
|
233
233
|
return items;
|
|
234
234
|
}, [files, handleDeleteFile, maxFiles]);
|
|
235
|
-
return (0,
|
|
235
|
+
return (0, _react2.useMemo)(() => /*#__PURE__*/_react2.default.createElement(_FileInput.StyledFileInput, null, /*#__PURE__*/_react2.default.createElement(_FileInput.StyledFileInputWrapper, {
|
|
236
236
|
$isDisabled: internalIsDisabled
|
|
237
|
-
}, /*#__PURE__*/
|
|
237
|
+
}, /*#__PURE__*/_react2.default.createElement(_FileInput.StyledFileInputContainer, {
|
|
238
238
|
onClick: () => void handleFileSelectionClick(),
|
|
239
239
|
onDragOver: e => e.preventDefault(),
|
|
240
240
|
onDrop: e => void handleDrop(e)
|
|
241
|
-
}, /*#__PURE__*/
|
|
241
|
+
}, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
242
242
|
icons: fileSelectionIcons
|
|
243
|
-
}), /*#__PURE__*/
|
|
243
|
+
}), /*#__PURE__*/_react2.default.createElement(_FileInput.StyledFileInputText, null, fileSelectionPlaceholder)), imageSelectPlaceholder && /*#__PURE__*/_react2.default.createElement(_FileInput.StyledFileInputContainer, {
|
|
244
244
|
$isImageSelection: true,
|
|
245
245
|
onClick: () => void handleImageSelectionClick()
|
|
246
|
-
}, /*#__PURE__*/
|
|
246
|
+
}, /*#__PURE__*/_react2.default.createElement(_Icon.default, {
|
|
247
247
|
icons: imageSelectIcons
|
|
248
|
-
}), /*#__PURE__*/
|
|
248
|
+
}), /*#__PURE__*/_react2.default.createElement(_FileInput.StyledFileInputText, null, imageSelectPlaceholder))), /*#__PURE__*/_react2.default.createElement(_List.default, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
249
249
|
initial: false
|
|
250
|
-
}, content)), uploadedFiles.length > 0 && /*#__PURE__*/
|
|
250
|
+
}, content)), uploadedFiles.length > 0 && /*#__PURE__*/_react2.default.createElement(_FileInput.StyledUploadedFilesList, {
|
|
251
251
|
$shouldShowBorder: content.length > 0
|
|
252
|
-
}, /*#__PURE__*/
|
|
252
|
+
}, /*#__PURE__*/_react2.default.createElement(_List.default, null, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
253
253
|
initial: false
|
|
254
254
|
}, uploadedFiles)))), [internalIsDisabled, fileSelectionIcons, fileSelectionPlaceholder, imageSelectPlaceholder, imageSelectIcons, content, uploadedFiles, handleFileSelectionClick, handleDrop, handleImageSelectionClick]);
|
|
255
255
|
});
|