@tradly/asset 1.0.5 → 1.0.6
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/dist/components/MediaTab.js +131 -86
- package/dist/esm/components/MediaTab.js +134 -89
- package/package.json +1 -2
|
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _react2 = require("@headlessui/react");
|
|
10
9
|
var _MediaGallery = _interopRequireDefault(require("./MediaGallery"));
|
|
11
10
|
var _VideosGallery = _interopRequireDefault(require("./VideosGallery"));
|
|
12
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -22,7 +21,7 @@ function classNames() {
|
|
|
22
21
|
for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
23
22
|
classes[_key] = arguments[_key];
|
|
24
23
|
}
|
|
25
|
-
return classes.filter(Boolean).join(
|
|
24
|
+
return classes.filter(Boolean).join(" ");
|
|
26
25
|
}
|
|
27
26
|
var MediaTab = function MediaTab(_ref) {
|
|
28
27
|
var imagePopup = _ref.imagePopup,
|
|
@@ -42,100 +41,146 @@ var MediaTab = function MediaTab(_ref) {
|
|
|
42
41
|
imageItemClassName = _ref.imageItemClassName,
|
|
43
42
|
videoItemClassName = _ref.videoItemClassName,
|
|
44
43
|
paginationContainerClassName = _ref.paginationContainerClassName;
|
|
44
|
+
// Build a stable list of enabled tabs in order
|
|
45
|
+
var availableTabs = (0, _react.useMemo)(function () {
|
|
46
|
+
var tabs = [];
|
|
47
|
+
if (options !== null && options !== void 0 && options.includes("image")) tabs.push("image");
|
|
48
|
+
if (options !== null && options !== void 0 && options.includes("video")) tabs.push("video");
|
|
49
|
+
if (options !== null && options !== void 0 && options.includes("file")) tabs.push("file");
|
|
50
|
+
return tabs;
|
|
51
|
+
}, [options]);
|
|
45
52
|
var _useState = (0, _react.useState)(0),
|
|
46
53
|
_useState2 = _slicedToArray(_useState, 2),
|
|
47
54
|
selectedIndex = _useState2[0],
|
|
48
55
|
setSelectedIndex = _useState2[1];
|
|
49
56
|
|
|
57
|
+
// Guard: if no options passed, render nothing
|
|
58
|
+
if (!availableTabs.length) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
|
|
50
62
|
// Default classes with customization support
|
|
51
|
-
var defaultTabGroupClass =
|
|
52
|
-
var defaultTabListClass =
|
|
53
|
-
var defaultTabButtonBaseClass =
|
|
63
|
+
var defaultTabGroupClass = "h-[520px] overflow-y-auto scrollbar-none";
|
|
64
|
+
var defaultTabListClass = "sticky top-0 z-30 bg-white w-full flex border-b-2 border-gray-200";
|
|
65
|
+
var defaultTabButtonBaseClass = "rounded-lg py-2.5 px-8 text-base font-medium leading-5 flex flex-col md:flex-row items-center justify-center gap-3 ring-0 focus:outline-none";
|
|
54
66
|
var defaultTabButtonActiveClass = 'relative text-primary after:content-[""] after:h-1 after:w-full after:block after:absolute after:-bottom-0.5 after:bg-primary after:rounded-card';
|
|
55
|
-
var defaultTabButtonInactiveClass =
|
|
56
|
-
var defaultTabPanelClass =
|
|
57
|
-
|
|
58
|
-
|
|
67
|
+
var defaultTabButtonInactiveClass = "text-[#4F4F4F]";
|
|
68
|
+
var defaultTabPanelClass = "h-full py-4 relative";
|
|
69
|
+
var handleKeyDown = function handleKeyDown(event, index) {
|
|
70
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
71
|
+
event.preventDefault();
|
|
72
|
+
setSelectedIndex(index);
|
|
73
|
+
}
|
|
74
|
+
if (event.key === "ArrowRight") {
|
|
75
|
+
event.preventDefault();
|
|
76
|
+
setSelectedIndex(function (prev) {
|
|
77
|
+
return (prev + 1) % availableTabs.length;
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
if (event.key === "ArrowLeft") {
|
|
81
|
+
event.preventDefault();
|
|
82
|
+
setSelectedIndex(function (prev) {
|
|
83
|
+
return (prev - 1 + availableTabs.length) % availableTabs.length;
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
var renderTabLabel = function renderTabLabel(type) {
|
|
88
|
+
if (type === "image") return "Images";
|
|
89
|
+
if (type === "video") return "Videos";
|
|
90
|
+
if (type === "file") return "Files";
|
|
91
|
+
return type;
|
|
92
|
+
};
|
|
93
|
+
var renderPanel = function renderPanel(type) {
|
|
94
|
+
if (type === "image") {
|
|
95
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaGallery.default, {
|
|
96
|
+
imagePopup: imagePopup,
|
|
97
|
+
update_data: update_data,
|
|
98
|
+
current_data: current_data,
|
|
99
|
+
closePopup: closePopup,
|
|
100
|
+
apiService: apiService,
|
|
101
|
+
onError: onError,
|
|
102
|
+
gridClassName: gridClassName,
|
|
103
|
+
imageItemClassName: imageItemClassName,
|
|
104
|
+
paginationContainerClassName: paginationContainerClassName
|
|
105
|
+
});
|
|
106
|
+
}
|
|
107
|
+
if (type === "video") {
|
|
108
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideosGallery.default, {
|
|
109
|
+
imagePopup: imagePopup,
|
|
110
|
+
update_data: update_data,
|
|
111
|
+
current_data: current_data,
|
|
112
|
+
closePopup: closePopup,
|
|
113
|
+
apiService: apiService,
|
|
114
|
+
onError: onError,
|
|
115
|
+
gridClassName: gridClassName,
|
|
116
|
+
videoItemClassName: videoItemClassName,
|
|
117
|
+
paginationContainerClassName: paginationContainerClassName
|
|
118
|
+
});
|
|
119
|
+
}
|
|
120
|
+
if (type === "file") {
|
|
121
|
+
// Reuse ImagesGallery for files as in original implementation
|
|
122
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaGallery.default, {
|
|
123
|
+
imagePopup: imagePopup,
|
|
124
|
+
update_data: update_data,
|
|
125
|
+
current_data: current_data,
|
|
126
|
+
closePopup: closePopup,
|
|
127
|
+
apiService: apiService,
|
|
128
|
+
onError: onError,
|
|
129
|
+
gridClassName: gridClassName,
|
|
130
|
+
imageItemClassName: imageItemClassName,
|
|
131
|
+
paginationContainerClassName: paginationContainerClassName
|
|
132
|
+
});
|
|
133
|
+
}
|
|
134
|
+
return null;
|
|
135
|
+
};
|
|
136
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
59
137
|
className: className || defaultTabGroupClass,
|
|
60
|
-
|
|
61
|
-
selectedIndex: selectedIndex,
|
|
62
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_react2.Tab.List, {
|
|
138
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
63
139
|
className: tabListClassName || defaultTabListClass,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
},
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
})
|
|
94
|
-
})]
|
|
95
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react2.Tab.Panels, {
|
|
140
|
+
role: "tablist",
|
|
141
|
+
"aria-orientation": "horizontal",
|
|
142
|
+
children: availableTabs.map(function (type, index) {
|
|
143
|
+
var isSelected = index === selectedIndex;
|
|
144
|
+
var baseClass = tabButtonClassName || defaultTabButtonBaseClass;
|
|
145
|
+
var activeClass = tabButtonActiveClassName || defaultTabButtonActiveClass;
|
|
146
|
+
var inactiveClass = tabButtonInactiveClassName || defaultTabButtonInactiveClass;
|
|
147
|
+
var tabClassName = classNames(baseClass, isSelected ? activeClass : inactiveClass);
|
|
148
|
+
var id = type === "image" ? "image-tab-button" : type === "video" ? "video-tab-button" : "file-tab-button";
|
|
149
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
|
|
150
|
+
id: id,
|
|
151
|
+
type: "button",
|
|
152
|
+
role: "tab",
|
|
153
|
+
"aria-selected": isSelected,
|
|
154
|
+
"aria-controls": "".concat(id, "-panel"),
|
|
155
|
+
tabIndex: isSelected ? 0 : -1,
|
|
156
|
+
className: tabClassName,
|
|
157
|
+
onClick: function onClick() {
|
|
158
|
+
return setSelectedIndex(index);
|
|
159
|
+
},
|
|
160
|
+
onKeyDown: function onKeyDown(e) {
|
|
161
|
+
return handleKeyDown(e, index);
|
|
162
|
+
},
|
|
163
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
164
|
+
children: renderTabLabel(type)
|
|
165
|
+
})
|
|
166
|
+
}, type);
|
|
167
|
+
})
|
|
168
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
96
169
|
className: "h-full",
|
|
97
|
-
|
|
98
|
-
children:
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
})
|
|
111
|
-
}), options.includes('video') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Tab.Panel, {
|
|
112
|
-
className: tabPanelClassName || defaultTabPanelClass,
|
|
113
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideosGallery.default, {
|
|
114
|
-
imagePopup: imagePopup,
|
|
115
|
-
update_data: update_data,
|
|
116
|
-
current_data: current_data,
|
|
117
|
-
closePopup: closePopup,
|
|
118
|
-
apiService: apiService,
|
|
119
|
-
onError: onError,
|
|
120
|
-
gridClassName: gridClassName,
|
|
121
|
-
videoItemClassName: videoItemClassName,
|
|
122
|
-
paginationContainerClassName: paginationContainerClassName
|
|
123
|
-
})
|
|
124
|
-
}), options.includes('file') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Tab.Panel, {
|
|
125
|
-
className: tabPanelClassName || defaultTabPanelClass,
|
|
126
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaGallery.default, {
|
|
127
|
-
imagePopup: imagePopup,
|
|
128
|
-
update_data: update_data,
|
|
129
|
-
current_data: current_data,
|
|
130
|
-
closePopup: closePopup,
|
|
131
|
-
apiService: apiService,
|
|
132
|
-
onError: onError,
|
|
133
|
-
gridClassName: gridClassName,
|
|
134
|
-
imageItemClassName: imageItemClassName,
|
|
135
|
-
paginationContainerClassName: paginationContainerClassName
|
|
136
|
-
})
|
|
137
|
-
})]
|
|
170
|
+
role: "tabpanel",
|
|
171
|
+
children: availableTabs.map(function (type, index) {
|
|
172
|
+
var isSelected = index === selectedIndex;
|
|
173
|
+
var id = type === "image" ? "image-tab-button" : type === "video" ? "video-tab-button" : "file-tab-button";
|
|
174
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
175
|
+
id: "".concat(id, "-panel"),
|
|
176
|
+
role: "tabpanel",
|
|
177
|
+
"aria-labelledby": id,
|
|
178
|
+
hidden: !isSelected,
|
|
179
|
+
className: tabPanelClassName || defaultTabPanelClass,
|
|
180
|
+
children: isSelected && renderPanel(type)
|
|
181
|
+
}, type);
|
|
182
|
+
})
|
|
138
183
|
})]
|
|
139
|
-
}
|
|
184
|
+
});
|
|
140
185
|
};
|
|
141
186
|
var _default = exports.default = MediaTab;
|
|
@@ -4,16 +4,15 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
|
|
|
4
4
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
5
5
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
6
6
|
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
7
|
-
import React, { useState } from
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
import VideosGallery from './VideosGallery';
|
|
7
|
+
import React, { useMemo, useState } from "react";
|
|
8
|
+
import ImagesGallery from "./MediaGallery";
|
|
9
|
+
import VideosGallery from "./VideosGallery";
|
|
11
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
11
|
function classNames() {
|
|
13
12
|
for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
14
13
|
classes[_key] = arguments[_key];
|
|
15
14
|
}
|
|
16
|
-
return classes.filter(Boolean).join(
|
|
15
|
+
return classes.filter(Boolean).join(" ");
|
|
17
16
|
}
|
|
18
17
|
var MediaTab = function MediaTab(_ref) {
|
|
19
18
|
var imagePopup = _ref.imagePopup,
|
|
@@ -33,100 +32,146 @@ var MediaTab = function MediaTab(_ref) {
|
|
|
33
32
|
imageItemClassName = _ref.imageItemClassName,
|
|
34
33
|
videoItemClassName = _ref.videoItemClassName,
|
|
35
34
|
paginationContainerClassName = _ref.paginationContainerClassName;
|
|
35
|
+
// Build a stable list of enabled tabs in order
|
|
36
|
+
var availableTabs = useMemo(function () {
|
|
37
|
+
var tabs = [];
|
|
38
|
+
if (options !== null && options !== void 0 && options.includes("image")) tabs.push("image");
|
|
39
|
+
if (options !== null && options !== void 0 && options.includes("video")) tabs.push("video");
|
|
40
|
+
if (options !== null && options !== void 0 && options.includes("file")) tabs.push("file");
|
|
41
|
+
return tabs;
|
|
42
|
+
}, [options]);
|
|
36
43
|
var _useState = useState(0),
|
|
37
44
|
_useState2 = _slicedToArray(_useState, 2),
|
|
38
45
|
selectedIndex = _useState2[0],
|
|
39
46
|
setSelectedIndex = _useState2[1];
|
|
40
47
|
|
|
48
|
+
// Guard: if no options passed, render nothing
|
|
49
|
+
if (!availableTabs.length) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
|
|
41
53
|
// Default classes with customization support
|
|
42
|
-
var defaultTabGroupClass =
|
|
43
|
-
var defaultTabListClass =
|
|
44
|
-
var defaultTabButtonBaseClass =
|
|
54
|
+
var defaultTabGroupClass = "h-[520px] overflow-y-auto scrollbar-none";
|
|
55
|
+
var defaultTabListClass = "sticky top-0 z-30 bg-white w-full flex border-b-2 border-gray-200";
|
|
56
|
+
var defaultTabButtonBaseClass = "rounded-lg py-2.5 px-8 text-base font-medium leading-5 flex flex-col md:flex-row items-center justify-center gap-3 ring-0 focus:outline-none";
|
|
45
57
|
var defaultTabButtonActiveClass = 'relative text-primary after:content-[""] after:h-1 after:w-full after:block after:absolute after:-bottom-0.5 after:bg-primary after:rounded-card';
|
|
46
|
-
var defaultTabButtonInactiveClass =
|
|
47
|
-
var defaultTabPanelClass =
|
|
48
|
-
|
|
49
|
-
|
|
58
|
+
var defaultTabButtonInactiveClass = "text-[#4F4F4F]";
|
|
59
|
+
var defaultTabPanelClass = "h-full py-4 relative";
|
|
60
|
+
var handleKeyDown = function handleKeyDown(event, index) {
|
|
61
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
setSelectedIndex(index);
|
|
64
|
+
}
|
|
65
|
+
if (event.key === "ArrowRight") {
|
|
66
|
+
event.preventDefault();
|
|
67
|
+
setSelectedIndex(function (prev) {
|
|
68
|
+
return (prev + 1) % availableTabs.length;
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
if (event.key === "ArrowLeft") {
|
|
72
|
+
event.preventDefault();
|
|
73
|
+
setSelectedIndex(function (prev) {
|
|
74
|
+
return (prev - 1 + availableTabs.length) % availableTabs.length;
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
var renderTabLabel = function renderTabLabel(type) {
|
|
79
|
+
if (type === "image") return "Images";
|
|
80
|
+
if (type === "video") return "Videos";
|
|
81
|
+
if (type === "file") return "Files";
|
|
82
|
+
return type;
|
|
83
|
+
};
|
|
84
|
+
var renderPanel = function renderPanel(type) {
|
|
85
|
+
if (type === "image") {
|
|
86
|
+
return /*#__PURE__*/_jsx(ImagesGallery, {
|
|
87
|
+
imagePopup: imagePopup,
|
|
88
|
+
update_data: update_data,
|
|
89
|
+
current_data: current_data,
|
|
90
|
+
closePopup: closePopup,
|
|
91
|
+
apiService: apiService,
|
|
92
|
+
onError: onError,
|
|
93
|
+
gridClassName: gridClassName,
|
|
94
|
+
imageItemClassName: imageItemClassName,
|
|
95
|
+
paginationContainerClassName: paginationContainerClassName
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
if (type === "video") {
|
|
99
|
+
return /*#__PURE__*/_jsx(VideosGallery, {
|
|
100
|
+
imagePopup: imagePopup,
|
|
101
|
+
update_data: update_data,
|
|
102
|
+
current_data: current_data,
|
|
103
|
+
closePopup: closePopup,
|
|
104
|
+
apiService: apiService,
|
|
105
|
+
onError: onError,
|
|
106
|
+
gridClassName: gridClassName,
|
|
107
|
+
videoItemClassName: videoItemClassName,
|
|
108
|
+
paginationContainerClassName: paginationContainerClassName
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
if (type === "file") {
|
|
112
|
+
// Reuse ImagesGallery for files as in original implementation
|
|
113
|
+
return /*#__PURE__*/_jsx(ImagesGallery, {
|
|
114
|
+
imagePopup: imagePopup,
|
|
115
|
+
update_data: update_data,
|
|
116
|
+
current_data: current_data,
|
|
117
|
+
closePopup: closePopup,
|
|
118
|
+
apiService: apiService,
|
|
119
|
+
onError: onError,
|
|
120
|
+
gridClassName: gridClassName,
|
|
121
|
+
imageItemClassName: imageItemClassName,
|
|
122
|
+
paginationContainerClassName: paginationContainerClassName
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
return null;
|
|
126
|
+
};
|
|
127
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
50
128
|
className: className || defaultTabGroupClass,
|
|
51
|
-
|
|
52
|
-
selectedIndex: selectedIndex,
|
|
53
|
-
children: [/*#__PURE__*/_jsxs(Tab.List, {
|
|
129
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
54
130
|
className: tabListClassName || defaultTabListClass,
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
},
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
})
|
|
85
|
-
})]
|
|
86
|
-
}), /*#__PURE__*/_jsxs(Tab.Panels, {
|
|
131
|
+
role: "tablist",
|
|
132
|
+
"aria-orientation": "horizontal",
|
|
133
|
+
children: availableTabs.map(function (type, index) {
|
|
134
|
+
var isSelected = index === selectedIndex;
|
|
135
|
+
var baseClass = tabButtonClassName || defaultTabButtonBaseClass;
|
|
136
|
+
var activeClass = tabButtonActiveClassName || defaultTabButtonActiveClass;
|
|
137
|
+
var inactiveClass = tabButtonInactiveClassName || defaultTabButtonInactiveClass;
|
|
138
|
+
var tabClassName = classNames(baseClass, isSelected ? activeClass : inactiveClass);
|
|
139
|
+
var id = type === "image" ? "image-tab-button" : type === "video" ? "video-tab-button" : "file-tab-button";
|
|
140
|
+
return /*#__PURE__*/_jsx("button", {
|
|
141
|
+
id: id,
|
|
142
|
+
type: "button",
|
|
143
|
+
role: "tab",
|
|
144
|
+
"aria-selected": isSelected,
|
|
145
|
+
"aria-controls": "".concat(id, "-panel"),
|
|
146
|
+
tabIndex: isSelected ? 0 : -1,
|
|
147
|
+
className: tabClassName,
|
|
148
|
+
onClick: function onClick() {
|
|
149
|
+
return setSelectedIndex(index);
|
|
150
|
+
},
|
|
151
|
+
onKeyDown: function onKeyDown(e) {
|
|
152
|
+
return handleKeyDown(e, index);
|
|
153
|
+
},
|
|
154
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
155
|
+
children: renderTabLabel(type)
|
|
156
|
+
})
|
|
157
|
+
}, type);
|
|
158
|
+
})
|
|
159
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
87
160
|
className: "h-full",
|
|
88
|
-
|
|
89
|
-
children:
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
})
|
|
102
|
-
}), options.includes('video') && /*#__PURE__*/_jsx(Tab.Panel, {
|
|
103
|
-
className: tabPanelClassName || defaultTabPanelClass,
|
|
104
|
-
children: /*#__PURE__*/_jsx(VideosGallery, {
|
|
105
|
-
imagePopup: imagePopup,
|
|
106
|
-
update_data: update_data,
|
|
107
|
-
current_data: current_data,
|
|
108
|
-
closePopup: closePopup,
|
|
109
|
-
apiService: apiService,
|
|
110
|
-
onError: onError,
|
|
111
|
-
gridClassName: gridClassName,
|
|
112
|
-
videoItemClassName: videoItemClassName,
|
|
113
|
-
paginationContainerClassName: paginationContainerClassName
|
|
114
|
-
})
|
|
115
|
-
}), options.includes('file') && /*#__PURE__*/_jsx(Tab.Panel, {
|
|
116
|
-
className: tabPanelClassName || defaultTabPanelClass,
|
|
117
|
-
children: /*#__PURE__*/_jsx(ImagesGallery, {
|
|
118
|
-
imagePopup: imagePopup,
|
|
119
|
-
update_data: update_data,
|
|
120
|
-
current_data: current_data,
|
|
121
|
-
closePopup: closePopup,
|
|
122
|
-
apiService: apiService,
|
|
123
|
-
onError: onError,
|
|
124
|
-
gridClassName: gridClassName,
|
|
125
|
-
imageItemClassName: imageItemClassName,
|
|
126
|
-
paginationContainerClassName: paginationContainerClassName
|
|
127
|
-
})
|
|
128
|
-
})]
|
|
161
|
+
role: "tabpanel",
|
|
162
|
+
children: availableTabs.map(function (type, index) {
|
|
163
|
+
var isSelected = index === selectedIndex;
|
|
164
|
+
var id = type === "image" ? "image-tab-button" : type === "video" ? "video-tab-button" : "file-tab-button";
|
|
165
|
+
return /*#__PURE__*/_jsx("div", {
|
|
166
|
+
id: "".concat(id, "-panel"),
|
|
167
|
+
role: "tabpanel",
|
|
168
|
+
"aria-labelledby": id,
|
|
169
|
+
hidden: !isSelected,
|
|
170
|
+
className: tabPanelClassName || defaultTabPanelClass,
|
|
171
|
+
children: isSelected && renderPanel(type)
|
|
172
|
+
}, type);
|
|
173
|
+
})
|
|
129
174
|
})]
|
|
130
|
-
}
|
|
175
|
+
});
|
|
131
176
|
};
|
|
132
177
|
export default MediaTab;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tradly/asset",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.6",
|
|
4
4
|
"description": "A reusable media gallery component for uploading and selecting images, videos, and files with Tradly authentication",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -38,7 +38,6 @@
|
|
|
38
38
|
"react-dom": ">=16.8.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@headlessui/react": "^1.7.0",
|
|
42
41
|
"axios": "^0.24.0"
|
|
43
42
|
},
|
|
44
43
|
"devDependencies": {
|