@papillonbits/components 0.87.0 → 0.89.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/build/primer/Breadcrumb/Breadcrumb.js +2 -2
- package/build/primer/Button/Button.js +2 -2
- package/build/primer/Dropdown/Dropdown.js +2 -2
- package/build/primer/Icon/Icon.js +2 -2
- package/build/primer/Navigation/Menu/Menu.js +2 -2
- package/build/primer/Navigation/TabNav/TabNav.js +2 -2
- package/build/primer/Navigation/UnderlineNav/UnderlineNav.js +2 -2
- package/build/primer/Pagination/PreviousNext/PreviousNext.js +2 -2
- package/build/primer/index.js +0 -2
- package/package.json +4 -4
- package/build/primer/ImageSlider/ImageSlider.images.js +0 -37
- package/build/primer/ImageSlider/ImageSlider.js +0 -95
- package/build/primer/ImageSlider/ImageSlider.prop.js +0 -10
- package/build/primer/ImageSlider/ImageSlider.scss +0 -7
- package/build/primer/ImageSlider/images/0.jpg +0 -0
- package/build/primer/ImageSlider/images/1.jpg +0 -0
- package/build/primer/ImageSlider/images/2.jpg +0 -0
- package/build/primer/ImageSlider/images/3.jpg +0 -0
- package/build/primer/ImageSlider/index.js +0 -12
|
@@ -13,8 +13,8 @@ var _array = require("@papillonbits/library/array");
|
|
|
13
13
|
var _Breadcrumb = require("./Breadcrumb.prop");
|
|
14
14
|
var _Breadcrumb2 = _interopRequireDefault(require("./Breadcrumb.scss"));
|
|
15
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
function ownKeys(
|
|
17
|
-
function _objectSpread(
|
|
16
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ /* eslint-disable jsx-a11y/click-events-have-key-events */
|
|
18
18
|
function Breadcrumb(_ref) {
|
|
19
19
|
var className = _ref.className,
|
|
20
20
|
ariaAttr = _ref.ariaAttr,
|
|
@@ -13,8 +13,8 @@ var _Button = require("./Button.prop");
|
|
|
13
13
|
var _Button2 = _interopRequireDefault(require("./Button.scss"));
|
|
14
14
|
var _Icon = require("../Icon");
|
|
15
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
function ownKeys(
|
|
17
|
-
function _objectSpread(
|
|
16
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
18
|
function Button(_ref) {
|
|
19
19
|
var dataTest = _ref.dataTest,
|
|
20
20
|
id = _ref.id,
|
|
@@ -18,8 +18,8 @@ var _Button = _interopRequireDefault(require("../Button/Button.scss"));
|
|
|
18
18
|
var _Dropdown = require("./Dropdown.prop");
|
|
19
19
|
var _Dropdown2 = _interopRequireDefault(require("./Dropdown.scss"));
|
|
20
20
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
|
-
function ownKeys(
|
|
22
|
-
function _objectSpread(
|
|
21
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
22
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
23
23
|
function Dropdown(_ref) {
|
|
24
24
|
var _ariaAttr$haspopup;
|
|
25
25
|
var className = _ref.className,
|
|
@@ -12,8 +12,8 @@ var _Icon = require("./Icon.prop");
|
|
|
12
12
|
var _Icon2 = require("./Icon.part");
|
|
13
13
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
14
|
var _excluded = ["className", "ariaLabel", "icon", "height", "width", "size", "fill", "verticalAlign"];
|
|
15
|
-
function ownKeys(
|
|
16
|
-
function _objectSpread(
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
17
|
var defaultSize = [16, 16];
|
|
18
18
|
function Icon(_ref) {
|
|
19
19
|
var className = _ref.className,
|
|
@@ -15,8 +15,8 @@ var _Menu = require("./Menu.prop");
|
|
|
15
15
|
var _Menu2 = _interopRequireDefault(require("./Menu.scss"));
|
|
16
16
|
var _Icon = require("../../Icon");
|
|
17
17
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
18
|
-
function ownKeys(
|
|
19
|
-
function _objectSpread(
|
|
18
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
19
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
20
|
function Menu(_ref) {
|
|
21
21
|
var className = _ref.className,
|
|
22
22
|
heading = _ref.heading,
|
|
@@ -13,8 +13,8 @@ var _array = require("@papillonbits/library/array");
|
|
|
13
13
|
var _TabNav = require("./TabNav.prop");
|
|
14
14
|
var _TabNav2 = _interopRequireDefault(require("./TabNav.scss"));
|
|
15
15
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
16
|
-
function ownKeys(
|
|
17
|
-
function _objectSpread(
|
|
16
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
17
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
18
18
|
function TabNav(_ref) {
|
|
19
19
|
var className = _ref.className,
|
|
20
20
|
ariaAttr = _ref.ariaAttr,
|
|
@@ -17,8 +17,8 @@ var _UnderlineNav2 = _interopRequireDefault(require("./UnderlineNav.scss"));
|
|
|
17
17
|
var _container = _interopRequireDefault(require("../../Layout/container.scss"));
|
|
18
18
|
var _Icon = require("../../Icon");
|
|
19
19
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
20
|
-
function ownKeys(
|
|
21
|
-
function _objectSpread(
|
|
20
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
21
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
22
22
|
function UnderlineNav(_ref) {
|
|
23
23
|
var _cx;
|
|
24
24
|
var className = _ref.className,
|
|
@@ -12,8 +12,8 @@ var _pagination = require("@papillonbits/library/pagination");
|
|
|
12
12
|
var _PreviousNext = require("./PreviousNext.prop");
|
|
13
13
|
var _PreviousNext2 = _interopRequireDefault(require("./PreviousNext.scss"));
|
|
14
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
-
function ownKeys(
|
|
16
|
-
function _objectSpread(
|
|
15
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
17
|
function PreviousNext(_ref) {
|
|
18
18
|
var className = _ref.className,
|
|
19
19
|
ariaAttr = _ref.ariaAttr,
|
package/build/primer/index.js
CHANGED
|
@@ -13,7 +13,6 @@ var _ErrorBoundary = require("./ErrorBoundary");
|
|
|
13
13
|
var _Form = require("./Form");
|
|
14
14
|
var _Grid = require("./Grid");
|
|
15
15
|
var _Icon = require("./Icon");
|
|
16
|
-
var _ImageSlider = require("./ImageSlider");
|
|
17
16
|
var _Label = require("./Label");
|
|
18
17
|
var _Loader = require("./Loader");
|
|
19
18
|
var _Navigation = require("./Navigation");
|
|
@@ -59,7 +58,6 @@ var primer = {
|
|
|
59
58
|
iconName: _Icon.iconName,
|
|
60
59
|
iconSize: _Icon.iconSize
|
|
61
60
|
},
|
|
62
|
-
ImageSlider: _ImageSlider.ImageSlider,
|
|
63
61
|
Label: _Label.Label,
|
|
64
62
|
Loader: {
|
|
65
63
|
Loader: _Loader.Loader,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@papillonbits/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.89.0",
|
|
4
4
|
"description": "Papillon Bits Components",
|
|
5
5
|
"homepage": "https://github.com/papillonbits/papillonbits/tree/master/packages/components",
|
|
6
6
|
"repository": {
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
"build-release": "npm run build"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@papillonbits/css": "^0.
|
|
33
|
-
"@papillonbits/library": "^0.
|
|
32
|
+
"@papillonbits/css": "^0.89.0",
|
|
33
|
+
"@papillonbits/library": "^0.89.0"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "a253821bba204b6aa9e3582b71b137dfb5f7befd"
|
|
36
36
|
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.images = void 0;
|
|
8
|
-
var _ = _interopRequireDefault(require("./images/0.jpg"));
|
|
9
|
-
var _2 = _interopRequireDefault(require("./images/1.jpg"));
|
|
10
|
-
var _3 = _interopRequireDefault(require("./images/2.jpg"));
|
|
11
|
-
var _4 = _interopRequireDefault(require("./images/3.jpg"));
|
|
12
|
-
var images = [{
|
|
13
|
-
url: _["default"],
|
|
14
|
-
left: 0,
|
|
15
|
-
top: 0,
|
|
16
|
-
width: 750,
|
|
17
|
-
height: 400
|
|
18
|
-
}, {
|
|
19
|
-
url: _2["default"],
|
|
20
|
-
left: 750,
|
|
21
|
-
top: 25,
|
|
22
|
-
width: 750,
|
|
23
|
-
height: 350
|
|
24
|
-
}, {
|
|
25
|
-
url: _3["default"],
|
|
26
|
-
left: 1550,
|
|
27
|
-
top: 0,
|
|
28
|
-
width: 750,
|
|
29
|
-
height: 400
|
|
30
|
-
}, {
|
|
31
|
-
url: _4["default"],
|
|
32
|
-
left: 2500,
|
|
33
|
-
top: 0,
|
|
34
|
-
width: 350,
|
|
35
|
-
height: 400
|
|
36
|
-
}];
|
|
37
|
-
exports.images = images;
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
Object.defineProperty(exports, "__esModule", {
|
|
5
|
-
value: true
|
|
6
|
-
});
|
|
7
|
-
exports.ImageSlider = ImageSlider;
|
|
8
|
-
var _react = require("react");
|
|
9
|
-
var _ImageSlider = require("./ImageSlider.prop");
|
|
10
|
-
var _ImageSlider2 = require("./ImageSlider.images");
|
|
11
|
-
var _ImageSlider3 = _interopRequireDefault(require("./ImageSlider.scss"));
|
|
12
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
|
|
14
|
-
// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
|
|
15
|
-
|
|
16
|
-
function ImageSlider() {
|
|
17
|
-
var isDown = false;
|
|
18
|
-
var startX;
|
|
19
|
-
var scrollLeft;
|
|
20
|
-
var sliderRef = (0, _react.useRef)(0);
|
|
21
|
-
var canvasRef = (0, _react.useRef)(0);
|
|
22
|
-
function handleEnd() {
|
|
23
|
-
isDown = false;
|
|
24
|
-
}
|
|
25
|
-
function handleStart(e) {
|
|
26
|
-
isDown = true;
|
|
27
|
-
startX = e.pageX || e.touches[0].pageX - sliderRef.current.offsetLeft;
|
|
28
|
-
scrollLeft = sliderRef.current.scrollLeft;
|
|
29
|
-
}
|
|
30
|
-
function handleMove(e) {
|
|
31
|
-
if (!isDown) return;
|
|
32
|
-
var x = e.pageX || e.touches[0].pageX - sliderRef.current.offsetLeft;
|
|
33
|
-
var dist = x - startX;
|
|
34
|
-
sliderRef.current.scrollLeft = scrollLeft - dist;
|
|
35
|
-
}
|
|
36
|
-
function addSliderEventListeners() {
|
|
37
|
-
sliderRef.current.addEventListener('mousedown', handleStart, {
|
|
38
|
-
passive: true
|
|
39
|
-
});
|
|
40
|
-
sliderRef.current.addEventListener('touchstart', handleStart, {
|
|
41
|
-
passive: true
|
|
42
|
-
});
|
|
43
|
-
sliderRef.current.addEventListener('mousemove', handleMove, {
|
|
44
|
-
passive: true
|
|
45
|
-
});
|
|
46
|
-
sliderRef.current.addEventListener('touchmove', handleMove, {
|
|
47
|
-
passive: true
|
|
48
|
-
});
|
|
49
|
-
sliderRef.current.addEventListener('mouseleave', handleEnd, {
|
|
50
|
-
passive: true
|
|
51
|
-
});
|
|
52
|
-
sliderRef.current.addEventListener('mouseup', handleEnd, {
|
|
53
|
-
passive: true
|
|
54
|
-
});
|
|
55
|
-
sliderRef.current.addEventListener('touchend', handleEnd, {
|
|
56
|
-
passive: true
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
function getCanvasContext() {
|
|
60
|
-
return canvasRef.current.getContext('2d');
|
|
61
|
-
}
|
|
62
|
-
function drawCanvasImages(_ref) {
|
|
63
|
-
var canvasContext = _ref.canvasContext;
|
|
64
|
-
_ImageSlider2.images.forEach(function (_ref2) {
|
|
65
|
-
var url = _ref2.url,
|
|
66
|
-
left = _ref2.left,
|
|
67
|
-
top = _ref2.top,
|
|
68
|
-
width = _ref2.width,
|
|
69
|
-
height = _ref2.height;
|
|
70
|
-
var image = new Image();
|
|
71
|
-
image.src = url;
|
|
72
|
-
image.onload = function () {
|
|
73
|
-
return canvasContext.drawImage(image, left, top, width, height);
|
|
74
|
-
};
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
(0, _react.useEffect)(function () {
|
|
78
|
-
addSliderEventListeners();
|
|
79
|
-
drawCanvasImages({
|
|
80
|
-
canvasContext: getCanvasContext()
|
|
81
|
-
});
|
|
82
|
-
});
|
|
83
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
84
|
-
ref: sliderRef,
|
|
85
|
-
className: _ImageSlider3["default"].items,
|
|
86
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
|
|
87
|
-
width: "3050",
|
|
88
|
-
height: "400",
|
|
89
|
-
ref: canvasRef,
|
|
90
|
-
className: _ImageSlider3["default"].canvas
|
|
91
|
-
})
|
|
92
|
-
});
|
|
93
|
-
}
|
|
94
|
-
ImageSlider.propTypes = _ImageSlider.propTypes;
|
|
95
|
-
ImageSlider.defaultProps = _ImageSlider.defaultProps;
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
Object.defineProperty(exports, "ImageSlider", {
|
|
7
|
-
enumerable: true,
|
|
8
|
-
get: function get() {
|
|
9
|
-
return _ImageSlider.ImageSlider;
|
|
10
|
-
}
|
|
11
|
-
});
|
|
12
|
-
var _ImageSlider = require("./ImageSlider");
|