gdx-ui 1.4.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/base.css +1 -1
- package/components/box/Box.js +4 -6
- package/components/button/IconButton.js +19 -26
- package/components/button/index.js +0 -11
- package/components/expandable/Expandable.js +4 -5
- package/components/forms/Input.js +4 -5
- package/components/images/Picture.js +159 -0
- package/components/images/PictureZoom.js +296 -0
- package/components/images/PictureZoomBtns.js +308 -0
- package/components/images/{Image.js → PictureZoomSquare.js} +3 -3
- package/components/images/Thumb.js +17 -5
- package/components/images/index.js +4 -4
- package/components/information/Information.js +1 -1
- package/components/navbar/NavbarResponsive.js +3 -3
- package/components/navbar/index.js +11 -0
- package/components/scroller/ListScroller.js +113 -0
- package/components/snackbar/Snackbar.js +6 -9
- package/components/tree/Tree.js +4 -6
- package/package.json +1 -1
- package/components/button/CircleButton.js +0 -33
- package/components/cards/Card.js +0 -22
- package/components/cards/CardScroller.js +0 -114
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
var
|
|
7
|
-
Object.keys(
|
|
6
|
+
var _PictureZoom = require("./PictureZoom");
|
|
7
|
+
Object.keys(_PictureZoom).forEach(function (key) {
|
|
8
8
|
if (key === "default" || key === "__esModule") return;
|
|
9
|
-
if (key in exports && exports[key] ===
|
|
9
|
+
if (key in exports && exports[key] === _PictureZoom[key]) return;
|
|
10
10
|
Object.defineProperty(exports, key, {
|
|
11
11
|
enumerable: true,
|
|
12
12
|
get: function get() {
|
|
13
|
-
return
|
|
13
|
+
return _PictureZoom[key];
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
16
|
});
|
|
@@ -12,7 +12,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
12
12
|
var Information = exports.Information = function Information(_ref) {
|
|
13
13
|
var children = _ref.children,
|
|
14
14
|
_ref$color = _ref.color,
|
|
15
|
-
color = _ref$color === void 0 ? '
|
|
15
|
+
color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
16
16
|
icon = _ref.icon;
|
|
17
17
|
var faIcon = color === 'primary' ? _freeSolidSvgIcons.faInfoCircle : color === 'success' ? _freeSolidSvgIcons.faCircleCheck : color === 'alert' ? _freeSolidSvgIcons.faCircleExclamation : color === 'warning' ? _freeSolidSvgIcons.faTriangleExclamation : _freeSolidSvgIcons.faComment;
|
|
18
18
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
@@ -89,14 +89,14 @@ var NavbarResponsive = exports.NavbarResponsive = function NavbarResponsive(_ref
|
|
|
89
89
|
onClick: function onClick() {
|
|
90
90
|
if (window.innerWidth <= 990) setSubmenuOpen(submenuOpen === idx ? null : idx);
|
|
91
91
|
}
|
|
92
|
-
},
|
|
92
|
+
}, item.element, item.submenu && /*#__PURE__*/_react["default"].createElement("ul", {
|
|
93
93
|
className: "navbar-submenu"
|
|
94
94
|
}, item.submenu.map(function (sub) {
|
|
95
95
|
return /*#__PURE__*/_react["default"].createElement("li", {
|
|
96
96
|
key: sub.label,
|
|
97
97
|
className: "navbar-submenu-item",
|
|
98
98
|
onClick: handleMenuClick
|
|
99
|
-
},
|
|
99
|
+
}, item.element);
|
|
100
100
|
})));
|
|
101
101
|
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
102
102
|
className: "navbar-icons"
|
|
@@ -106,7 +106,7 @@ var NavbarResponsive = exports.NavbarResponsive = function NavbarResponsive(_ref
|
|
|
106
106
|
className: "navbar-icon-btn",
|
|
107
107
|
"aria-label": icon.label,
|
|
108
108
|
onClick: function onClick() {
|
|
109
|
-
return setIconArea(iconArea === icon.id ? null : icon.id);
|
|
109
|
+
return icon.onClick ? icon.onClick() : setIconArea(iconArea === icon.id ? null : icon.id);
|
|
110
110
|
}
|
|
111
111
|
}, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
|
|
112
112
|
icon: icon.icon
|
|
@@ -13,4 +13,15 @@ Object.keys(_Navbar).forEach(function (key) {
|
|
|
13
13
|
return _Navbar[key];
|
|
14
14
|
}
|
|
15
15
|
});
|
|
16
|
+
});
|
|
17
|
+
var _NavbarResponsive = require("./NavbarResponsive");
|
|
18
|
+
Object.keys(_NavbarResponsive).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _NavbarResponsive[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function get() {
|
|
24
|
+
return _NavbarResponsive[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
16
27
|
});
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.ListScroller = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
+
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
11
|
+
var _button = require("../button");
|
|
12
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
14
|
+
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 && Object.prototype.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; }
|
|
15
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
16
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
17
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
18
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
19
|
+
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; } }
|
|
20
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
21
|
+
var ListScroller = exports.ListScroller = function ListScroller(_ref) {
|
|
22
|
+
var children = _ref.children,
|
|
23
|
+
_ref$className = _ref.className,
|
|
24
|
+
className = _ref$className === void 0 ? '' : _ref$className,
|
|
25
|
+
_ref$itemWidth = _ref.itemWidth,
|
|
26
|
+
itemWidth = _ref$itemWidth === void 0 ? 120 : _ref$itemWidth,
|
|
27
|
+
_ref$gap = _ref.gap,
|
|
28
|
+
gap = _ref$gap === void 0 ? 15 : _ref$gap;
|
|
29
|
+
var containerRef = (0, _react.useRef)(null);
|
|
30
|
+
var _useState = (0, _react.useState)(false),
|
|
31
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
32
|
+
canScrollLeft = _useState2[0],
|
|
33
|
+
setCanScrollLeft = _useState2[1];
|
|
34
|
+
var _useState3 = (0, _react.useState)(false),
|
|
35
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
36
|
+
canScrollRight = _useState4[0],
|
|
37
|
+
setCanScrollRight = _useState4[1];
|
|
38
|
+
|
|
39
|
+
// Actualiza el estado de los botones según el scroll
|
|
40
|
+
var updateScrollButtons = function updateScrollButtons() {
|
|
41
|
+
var el = containerRef.current;
|
|
42
|
+
if (!el) return;
|
|
43
|
+
setCanScrollLeft(el.scrollLeft > 0);
|
|
44
|
+
setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
|
|
45
|
+
};
|
|
46
|
+
(0, _react.useEffect)(function () {
|
|
47
|
+
updateScrollButtons();
|
|
48
|
+
var el = containerRef.current;
|
|
49
|
+
if (!el) return;
|
|
50
|
+
el.addEventListener('scroll', updateScrollButtons);
|
|
51
|
+
window.addEventListener('resize', updateScrollButtons);
|
|
52
|
+
return function () {
|
|
53
|
+
el.removeEventListener('scroll', updateScrollButtons);
|
|
54
|
+
window.removeEventListener('resize', updateScrollButtons);
|
|
55
|
+
};
|
|
56
|
+
}, [children]);
|
|
57
|
+
|
|
58
|
+
// Scroll a la izquierda/derecha por el ancho de un item
|
|
59
|
+
var scrollBy = function scrollBy(dir) {
|
|
60
|
+
if (containerRef.current) {
|
|
61
|
+
containerRef.current.scrollBy({
|
|
62
|
+
left: dir * (itemWidth + gap),
|
|
63
|
+
behavior: 'smooth'
|
|
64
|
+
});
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
// Touch/swipe para móviles
|
|
69
|
+
var startX = 0;
|
|
70
|
+
var scrollLeft = 0;
|
|
71
|
+
var onTouchStart = function onTouchStart(e) {
|
|
72
|
+
startX = e.touches[0].pageX;
|
|
73
|
+
scrollLeft = containerRef.current.scrollLeft;
|
|
74
|
+
};
|
|
75
|
+
var onTouchMove = function onTouchMove(e) {
|
|
76
|
+
if (!startX) return;
|
|
77
|
+
var x = e.touches[0].pageX;
|
|
78
|
+
containerRef.current.scrollLeft = scrollLeft - (x - startX);
|
|
79
|
+
};
|
|
80
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
81
|
+
className: "list-scroller-wrapper ".concat(className)
|
|
82
|
+
}, canScrollLeft && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
|
|
83
|
+
className: "list-scroller-btn list-scroller-btn-left",
|
|
84
|
+
bg: "solid",
|
|
85
|
+
size: "large",
|
|
86
|
+
icon: _freeSolidSvgIcons.faChevronLeft,
|
|
87
|
+
onClick: function onClick() {
|
|
88
|
+
return scrollBy(-1);
|
|
89
|
+
}
|
|
90
|
+
}), /*#__PURE__*/_react["default"].createElement("ul", {
|
|
91
|
+
className: "list-scroller",
|
|
92
|
+
ref: containerRef,
|
|
93
|
+
style: {
|
|
94
|
+
gap: gap
|
|
95
|
+
},
|
|
96
|
+
onTouchStart: onTouchStart,
|
|
97
|
+
onTouchMove: onTouchMove
|
|
98
|
+
}, children), canScrollRight && /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
|
|
99
|
+
className: "list-scroller-btn list-scroller-btn-right",
|
|
100
|
+
bg: "solid",
|
|
101
|
+
size: "large",
|
|
102
|
+
icon: _freeSolidSvgIcons.faChevronRight,
|
|
103
|
+
onClick: function onClick() {
|
|
104
|
+
return scrollBy(1);
|
|
105
|
+
}
|
|
106
|
+
}));
|
|
107
|
+
};
|
|
108
|
+
ListScroller.propTypes = {
|
|
109
|
+
children: _propTypes["default"].node.isRequired,
|
|
110
|
+
className: _propTypes["default"].string,
|
|
111
|
+
itemWidth: _propTypes["default"].number,
|
|
112
|
+
gap: _propTypes["default"].number
|
|
113
|
+
};
|
|
@@ -7,8 +7,7 @@ exports.Snackbar = void 0;
|
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
10
|
-
var
|
|
11
|
-
var _CircleButton = require("../button/CircleButton");
|
|
10
|
+
var _IconButton = require("../button/IconButton");
|
|
12
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
12
|
var Snackbar = exports.Snackbar = function Snackbar(_ref) {
|
|
14
13
|
var children = _ref.children,
|
|
@@ -18,18 +17,16 @@ var Snackbar = exports.Snackbar = function Snackbar(_ref) {
|
|
|
18
17
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
|
|
19
18
|
className: "snackbar-wrapper"
|
|
20
19
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
21
|
-
className: "snackbar
|
|
20
|
+
className: "snackbar bg-".concat(color)
|
|
22
21
|
}, children, /*#__PURE__*/_react["default"].createElement("div", {
|
|
23
22
|
className: "snackbar-close"
|
|
24
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
25
|
-
|
|
23
|
+
}, /*#__PURE__*/_react["default"].createElement(_IconButton.IconButton, {
|
|
24
|
+
icon: _freeSolidSvgIcons.faTimes,
|
|
26
25
|
onClick: onClose
|
|
27
|
-
}
|
|
28
|
-
icon: _freeSolidSvgIcons.faTimes
|
|
29
|
-
}))))));
|
|
26
|
+
})))));
|
|
30
27
|
};
|
|
31
28
|
Snackbar.propTypes = {
|
|
32
29
|
children: _propTypes["default"].any,
|
|
33
|
-
color: _propTypes["default"].oneOf(['
|
|
30
|
+
color: _propTypes["default"].oneOf(['default', 'primary', 'alert', 'success', 'warning']),
|
|
34
31
|
onClose: _propTypes["default"].func
|
|
35
32
|
};
|
package/components/tree/Tree.js
CHANGED
|
@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
10
|
var _reactFontawesome = require("@fortawesome/react-fontawesome");
|
|
11
11
|
var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
|
|
12
|
-
var
|
|
12
|
+
var _IconButton = require("../button/IconButton");
|
|
13
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
14
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
15
15
|
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 && Object.prototype.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; }
|
|
@@ -41,12 +41,10 @@ var TreeItem = exports.TreeItem = function TreeItem(_ref2) {
|
|
|
41
41
|
className: "tree-item"
|
|
42
42
|
}, onExpand && /*#__PURE__*/_react["default"].createElement("div", {
|
|
43
43
|
className: "tree-button"
|
|
44
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
45
|
-
|
|
44
|
+
}, /*#__PURE__*/_react["default"].createElement(_IconButton.IconButton, {
|
|
45
|
+
icon: show ? _freeRegularSvgIcons.faMinusSquare : _freeRegularSvgIcons.faPlusSquare,
|
|
46
46
|
onClick: onClick
|
|
47
|
-
}, /*#__PURE__*/_react["default"].createElement(
|
|
48
|
-
icon: show ? _freeRegularSvgIcons.faMinusSquare : _freeRegularSvgIcons.faPlusSquare
|
|
49
|
-
}))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
47
|
+
})), /*#__PURE__*/_react["default"].createElement("div", {
|
|
50
48
|
className: "tree-content"
|
|
51
49
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
52
50
|
className: "tree-label"
|
package/package.json
CHANGED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.CircleButton = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
-
/**
|
|
11
|
-
* @deprecated
|
|
12
|
-
* @param {color} string [default, inverted]
|
|
13
|
-
* @returns
|
|
14
|
-
*/
|
|
15
|
-
var CircleButton = exports.CircleButton = function CircleButton(_ref) {
|
|
16
|
-
var children = _ref.children,
|
|
17
|
-
_ref$type = _ref.type,
|
|
18
|
-
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
19
|
-
_ref$color = _ref.color,
|
|
20
|
-
color = _ref$color === void 0 ? 'default' : _ref$color,
|
|
21
|
-
onClick = _ref.onClick;
|
|
22
|
-
return /*#__PURE__*/_react["default"].createElement("button", {
|
|
23
|
-
type: type,
|
|
24
|
-
className: "btn-circle btn-circle-".concat(color),
|
|
25
|
-
onClick: onClick
|
|
26
|
-
}, children);
|
|
27
|
-
};
|
|
28
|
-
CircleButton.propTypes = {
|
|
29
|
-
children: _propTypes["default"].any,
|
|
30
|
-
color: _propTypes["default"].oneOf(['default', 'white', 'solid']),
|
|
31
|
-
type: _propTypes["default"].oneOf(['button', 'submit']),
|
|
32
|
-
onClick: _propTypes["default"].func
|
|
33
|
-
};
|
package/components/cards/Card.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.CardContainer = exports.Card = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
9
|
-
var CardContainer = exports.CardContainer = function CardContainer(_ref) {
|
|
10
|
-
var children = _ref.children,
|
|
11
|
-
_ref$count = _ref.count,
|
|
12
|
-
count = _ref$count === void 0 ? 4 : _ref$count;
|
|
13
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
14
|
-
className: "card-wrapper card-".concat(count)
|
|
15
|
-
}, children);
|
|
16
|
-
};
|
|
17
|
-
var Card = exports.Card = function Card(_ref2) {
|
|
18
|
-
var children = _ref2.children;
|
|
19
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
20
|
-
className: "card-item"
|
|
21
|
-
}, children);
|
|
22
|
-
};
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.CardScrollerItem = exports.CardScrollerContext = exports.CardScroller = void 0;
|
|
8
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
|
-
var _utils = require("../../utils/utils");
|
|
11
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
12
|
-
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
13
|
-
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 && Object.prototype.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; }
|
|
14
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
15
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
16
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
17
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
18
|
-
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; } }
|
|
19
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
-
// import { useScreenDimentions } from '../../hooks';
|
|
21
|
-
|
|
22
|
-
var CardScrollerContext = exports.CardScrollerContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
23
|
-
var CardScroller = exports.CardScroller = function CardScroller(_ref) {
|
|
24
|
-
var children = _ref.children,
|
|
25
|
-
_ref$visible = _ref.visible,
|
|
26
|
-
visible = _ref$visible === void 0 ? 3 : _ref$visible,
|
|
27
|
-
_ref$height = _ref.height,
|
|
28
|
-
height = _ref$height === void 0 ? 300 : _ref$height;
|
|
29
|
-
// const [step, setStep] = useState(0);
|
|
30
|
-
var _useState = (0, _react.useState)({
|
|
31
|
-
height: height
|
|
32
|
-
}),
|
|
33
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
34
|
-
settings = _useState2[0],
|
|
35
|
-
setSettings = _useState2[1];
|
|
36
|
-
// const [marginLeft, setMarginLeft] = useState(0);
|
|
37
|
-
|
|
38
|
-
// const wrapperRef = useRef(null);
|
|
39
|
-
|
|
40
|
-
// const onKeyHandler = (e) => {
|
|
41
|
-
// const { key } = e;
|
|
42
|
-
// console.log({ key })
|
|
43
|
-
// if (key === 'ArrowRight') {
|
|
44
|
-
// setMarginLeft(m => m - step <= 0 ? 0 : m - step);
|
|
45
|
-
// } else if (key === 'ArrowLeft') {
|
|
46
|
-
// setMarginLeft(marginLeft + step);
|
|
47
|
-
// // setMarginLeft(m => m <= 0 ? m : m - step);
|
|
48
|
-
// }
|
|
49
|
-
// // console.log({marginLeft})
|
|
50
|
-
// }
|
|
51
|
-
|
|
52
|
-
// const onClickRight = () => {
|
|
53
|
-
// setMarginLeft(m => m - step <= 0 ? m : m - step);
|
|
54
|
-
// }
|
|
55
|
-
|
|
56
|
-
// const onClickLeft = () => {
|
|
57
|
-
// setMarginLeft(marginLeft + step);
|
|
58
|
-
// }
|
|
59
|
-
|
|
60
|
-
// useEffect(() => {
|
|
61
|
-
// setStep(wrapperRef.current.offsetWidth / visible);
|
|
62
|
-
// }, [])
|
|
63
|
-
|
|
64
|
-
return /*#__PURE__*/_react["default"].createElement(CardScrollerContext.Provider, {
|
|
65
|
-
value: {
|
|
66
|
-
settings: settings,
|
|
67
|
-
setSettings: setSettings
|
|
68
|
-
}
|
|
69
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
70
|
-
className: "card-scroller"
|
|
71
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
72
|
-
className: "card-scroller-crop",
|
|
73
|
-
style: {
|
|
74
|
-
height: height
|
|
75
|
-
}
|
|
76
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
77
|
-
className: "card-scroller-overflow"
|
|
78
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
79
|
-
// style={{marginLeft: `${marginLeft}px`}}
|
|
80
|
-
className: "card-scroller-platter card-scroller-".concat(visible)
|
|
81
|
-
}, children)))));
|
|
82
|
-
};
|
|
83
|
-
var CardScrollerItem = exports.CardScrollerItem = function CardScrollerItem(_ref2) {
|
|
84
|
-
var children = _ref2.children;
|
|
85
|
-
// const itemRef = useRef(null);
|
|
86
|
-
var _useContext = (0, _react.useContext)(CardScrollerContext),
|
|
87
|
-
settings = _useContext.settings;
|
|
88
|
-
var height = settings.height;
|
|
89
|
-
|
|
90
|
-
// useEffect(() => {
|
|
91
|
-
// if (itemRef.current) {
|
|
92
|
-
// setSettings({...settings, width: itemRef.current.offsetWidth})
|
|
93
|
-
// }
|
|
94
|
-
// }, []);
|
|
95
|
-
|
|
96
|
-
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
97
|
-
key: (0, _utils.generateId)(),
|
|
98
|
-
className: "card-scroller-item",
|
|
99
|
-
style: {
|
|
100
|
-
height: height + 16
|
|
101
|
-
}
|
|
102
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
103
|
-
// ref={itemRef}
|
|
104
|
-
className: "card-scroller-item-sized"
|
|
105
|
-
}, children));
|
|
106
|
-
};
|
|
107
|
-
CardScroller.propTypes = {
|
|
108
|
-
children: _propTypes["default"].any,
|
|
109
|
-
visible: _propTypes["default"].number,
|
|
110
|
-
height: _propTypes["default"].number
|
|
111
|
-
};
|
|
112
|
-
CardScrollerItem.propTypes = {
|
|
113
|
-
children: _propTypes["default"].any
|
|
114
|
-
};
|