@papillonbits/components 0.87.0 → 0.88.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/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
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.88.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.88.0",
|
|
33
|
+
"@papillonbits/library": "^0.88.0"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "bd5cf1f676acc662811b227475ae6caa810ab81a"
|
|
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");
|