react-pop-cards 0.2.0 → 0.2.2
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/README.md +42 -2
- package/dist/components/Card.js +86 -70
- package/dist/index.css +672 -162
- package/dist/index.js +26 -4
- package/package.json +70 -65
- package/dist/Sandbox.js +0 -186
- package/dist/styles.css +0 -79
package/README.md
CHANGED
|
@@ -1,3 +1,43 @@
|
|
|
1
|
-
|
|
1
|
+
# Docs (Beta)
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Official documentation on [react-pop-cards](https://react-pop-cards.vercel.app)
|
|
4
|
+
|
|
5
|
+
## How can you use it in a jsx file?
|
|
6
|
+
|
|
7
|
+
Here is an example:
|
|
8
|
+
|
|
9
|
+
```jsx
|
|
10
|
+
import { Card } from "react-pop-cards"
|
|
11
|
+
|
|
12
|
+
const array = [
|
|
13
|
+
{
|
|
14
|
+
"title": "Title1",
|
|
15
|
+
"description": "Description1",
|
|
16
|
+
"image": "https://placehold.co/600x400"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
"title": "Title2",
|
|
20
|
+
"description": "Description2",
|
|
21
|
+
"image": "https://placehold.co/600x400"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"title": "Title3",
|
|
25
|
+
"description": "Description3",
|
|
26
|
+
"image": "https://placehold.co/600x400"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"title": "Title4",
|
|
30
|
+
"description": "Description4",
|
|
31
|
+
"image": "https://placehold.co/600x400"
|
|
32
|
+
}
|
|
33
|
+
]
|
|
34
|
+
|
|
35
|
+
const myApp = () => {
|
|
36
|
+
return (
|
|
37
|
+
<Card data={array} disposition="LeftRight" isRounded=true tension={120} friction={10}/>
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export default myApp
|
|
42
|
+
|
|
43
|
+
```
|
package/dist/components/Card.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
require("core-js/modules/es.symbol.description.js");
|
|
4
3
|
require("core-js/modules/es.weak-map.js");
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
require("core-js/modules/es.array.reduce.js");
|
|
10
8
|
require("core-js/modules/web.dom-collections.iterator.js");
|
|
9
|
+
require("core-js/modules/es.array.reduce.js");
|
|
10
|
+
require("core-js/modules/es.regexp.to-string.js");
|
|
11
|
+
require("core-js/modules/es.symbol.description.js");
|
|
11
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
12
13
|
var _web = require("@react-spring/web");
|
|
13
14
|
var _reactResponsive = require("react-responsive");
|
|
@@ -26,79 +27,82 @@ const Card = _ref => {
|
|
|
26
27
|
data,
|
|
27
28
|
bgColor,
|
|
28
29
|
disposition,
|
|
29
|
-
isRounded
|
|
30
|
+
isRounded,
|
|
31
|
+
tension,
|
|
32
|
+
friction
|
|
30
33
|
} = _ref;
|
|
31
34
|
const isMobile = (0, _reactResponsive.useMediaQuery)({
|
|
32
|
-
query: "max-width:
|
|
35
|
+
query: "(max-width: 640px)"
|
|
33
36
|
});
|
|
34
37
|
const activeCardRef = (0, _react.useRef)(null);
|
|
35
38
|
const parentCard = (0, _react.useRef)(null);
|
|
36
39
|
|
|
37
|
-
// default content div classes
|
|
40
|
+
// NOTE: default content div classes
|
|
38
41
|
const cardDivClass = "col-span-3 flex justify-center items-center duration-100";
|
|
39
42
|
const miniCardDivClass = "col-span-2 gap-4 flex justify-center items-center duration-100";
|
|
40
|
-
const miniCardClass = "hover:scale-125 duration-200 cursor-pointer flex justify-center items-center w-[5rem] h-[5rem] shadow-
|
|
43
|
+
const miniCardClass = "hover:scale-125 duration-200 cursor-pointer flex justify-center items-center max-sm:w-[4rem] max-sm:h-[4rem] w-[5rem] h-[5rem] shadow-lg";
|
|
41
44
|
|
|
42
45
|
// Define card data
|
|
43
46
|
const initialCardDimensions = {
|
|
44
47
|
width: "6rem",
|
|
45
48
|
height: "6rem"
|
|
46
49
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
const [cards, setCards] = (0, _react.useState)(
|
|
50
|
+
|
|
51
|
+
// NOTE: assign the data to the cards
|
|
52
|
+
|
|
53
|
+
const newArray = data.map(item => _objectSpread(_objectSpread({}, initialCardDimensions), item));
|
|
54
|
+
const [cards, setCards] = (0, _react.useState)(newArray);
|
|
52
55
|
|
|
53
56
|
// active card
|
|
54
|
-
const [activeCard, setActiveCard] = (0, _react.useState)(data[0].
|
|
57
|
+
const [activeCard, setActiveCard] = (0, _react.useState)(data[0].title);
|
|
55
58
|
(0, _react.useEffect)(() => {
|
|
56
59
|
handleCardClick(activeCard);
|
|
57
60
|
const handleLocalStorageUpdate = () => {
|
|
58
61
|
try {
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}, {});
|
|
63
|
-
setCards(newData);
|
|
62
|
+
const updatedArray = JSON.parse(localStorage.getItem("data")).map(item => _objectSpread(_objectSpread({}, initialCardDimensions), item));
|
|
63
|
+
setCards(updatedArray);
|
|
64
|
+
setActiveCard(updatedArray[0].title);
|
|
64
65
|
} catch (error) {
|
|
65
|
-
console.error(
|
|
66
|
+
console.error("Error parsing local storage data:", error);
|
|
66
67
|
}
|
|
67
68
|
};
|
|
68
|
-
window.addEventListener(
|
|
69
|
+
window.addEventListener("DataChange", handleLocalStorageUpdate);
|
|
69
70
|
return () => {
|
|
70
|
-
window.removeEventListener(
|
|
71
|
+
window.removeEventListener("DataChange", handleLocalStorageUpdate);
|
|
71
72
|
};
|
|
72
73
|
}, [data, activeCard, isMobile]);
|
|
73
74
|
|
|
74
75
|
// Handle card click and update dimensions
|
|
75
76
|
const handleCardClick = cardKey => {
|
|
76
|
-
const updatedCards =
|
|
77
|
-
|
|
78
|
-
width: "20rem",
|
|
79
|
-
height: isMobile ? "11rem" : "20rem"
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
}, {});
|
|
77
|
+
const updatedCards = cards.map(card => {
|
|
78
|
+
return _objectSpread(_objectSpread({}, card), {}, {
|
|
79
|
+
width: cardKey === card.title ? isMobile ? "11rem" : "20rem" : initialCardDimensions.width,
|
|
80
|
+
height: cardKey === card.title ? isMobile ? "11rem" : "20rem" : initialCardDimensions.height
|
|
81
|
+
});
|
|
82
|
+
});
|
|
83
83
|
setCards(updatedCards);
|
|
84
84
|
setActiveCard(cardKey);
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
-
// Animated styles for each card
|
|
88
|
-
const animatedStyles = Object.keys(cards).reduce((acc,
|
|
89
|
-
acc[
|
|
87
|
+
// NOTE: Animated styles for each card
|
|
88
|
+
const animatedStyles = Object.keys(cards).reduce((acc, cardKey) => {
|
|
89
|
+
acc[cardKey] = (0, _web.useSpring)({
|
|
90
90
|
to: {
|
|
91
|
-
width: cards[
|
|
92
|
-
height: cards[
|
|
91
|
+
width: cards[cardKey[0]].width.toString(),
|
|
92
|
+
height: cards[cardKey[0]].height.toString(),
|
|
93
|
+
backgroundColor: bgColor
|
|
93
94
|
},
|
|
94
95
|
config: {
|
|
95
|
-
tension:
|
|
96
|
-
friction:
|
|
96
|
+
tension: tension,
|
|
97
|
+
friction: friction
|
|
97
98
|
}
|
|
98
99
|
});
|
|
99
100
|
return acc;
|
|
100
101
|
}, {});
|
|
102
|
+
|
|
103
|
+
// NOTE: parent classNames of the animated cards
|
|
101
104
|
const getCardClasses = key => {
|
|
105
|
+
key = Number(key);
|
|
102
106
|
switch (key) {
|
|
103
107
|
case 0:
|
|
104
108
|
return "flex justify-end items-end";
|
|
@@ -109,21 +113,23 @@ const Card = _ref => {
|
|
|
109
113
|
case 3:
|
|
110
114
|
return "flex";
|
|
111
115
|
default:
|
|
112
|
-
return "";
|
|
116
|
+
return "lol";
|
|
113
117
|
}
|
|
114
118
|
};
|
|
119
|
+
|
|
120
|
+
// NOTE: classNames for the disposition
|
|
115
121
|
const getDisposition = disposition => {
|
|
116
122
|
switch (disposition) {
|
|
117
123
|
case "LeftRight":
|
|
118
|
-
return "grid grid-cols-5 h-
|
|
124
|
+
return "".concat(isMobile ? "flex flex-col justify-center items-center gap-8 h-full" : "grid grid-cols-5 h-full");
|
|
119
125
|
case "RightLeft":
|
|
120
|
-
return "grid grid-cols-5 h-
|
|
126
|
+
return "".concat(isMobile ? "flex flex-col-reverse justify-center items-center gap-8 h-full" : "grid grid-cols-5 h-full");
|
|
121
127
|
case "TopBottom":
|
|
122
|
-
return "flex flex-col justify-center items-center gap-
|
|
128
|
+
return "flex flex-col justify-center items-center gap-8 h-full";
|
|
123
129
|
case "BottomTop":
|
|
124
|
-
return "flex flex-col-reverse justify-center items-center gap-
|
|
130
|
+
return "flex flex-col-reverse justify-center items-center gap-8 h-full";
|
|
125
131
|
default:
|
|
126
|
-
return "grid grid-cols-5 h-
|
|
132
|
+
return "grid grid-cols-5 h-full";
|
|
127
133
|
}
|
|
128
134
|
};
|
|
129
135
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -132,41 +138,51 @@ const Card = _ref => {
|
|
|
132
138
|
className: (disposition === "LeftRight" ? "order-1" : "order-2") + " ".concat(cardDivClass)
|
|
133
139
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
134
140
|
className: "grid grid-cols-2 gap-2"
|
|
135
|
-
}, Object.
|
|
136
|
-
key
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
141
|
+
}, Object.entries(cards).map(_ref2 => {
|
|
142
|
+
let [key, value] = _ref2;
|
|
143
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
144
|
+
key: key,
|
|
145
|
+
className: getCardClasses(key),
|
|
146
|
+
ref: parentCard
|
|
147
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_web.animated.div, {
|
|
148
|
+
ref: activeCard === value.title ? activeCardRef : null,
|
|
149
|
+
style: animatedStyles[key],
|
|
150
|
+
onClick: () => handleCardClick(value.title),
|
|
151
|
+
className: "".concat(activeCard === value.title ? "px-6 py-4" : "flex justify-center items-center", " cursor-pointer duration-100 ").concat(isRounded ? " rounded-2xl" : " rounded-none")
|
|
152
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
153
|
+
className: "".concat(activeCard === value.title ? "min-h-full" : "max-sm:space-y-1 space-y-3")
|
|
154
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
155
|
+
className: "flex max-sm:flex-col-reverse justify-between items-center"
|
|
156
|
+
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
157
|
+
className: (activeCard === value.title ? "max-sm:text-xl text-5xl" : "max-sm:text-xs text-base") + " capitalize font-bold duration-100"
|
|
158
|
+
}, value.title), activeCard === value.title && value.image != null && /*#__PURE__*/_react.default.createElement("img", {
|
|
159
|
+
className: "max-sm:w-12 max-sm:h-12 w-20 h-20",
|
|
160
|
+
src: value.image,
|
|
161
|
+
alt: "imageCard"
|
|
162
|
+
})), activeCard === value.title && /*#__PURE__*/_react.default.createElement("p", {
|
|
163
|
+
className: "line-clamp-[8] text-justify max-sm:text-xs"
|
|
164
|
+
}, value.description)))));
|
|
165
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
155
166
|
className: (disposition === "RightLeft" ? "order-1" : "order-2") + " ".concat(miniCardDivClass)
|
|
156
|
-
}, Object.
|
|
157
|
-
key
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
167
|
+
}, Object.entries(cards).map(_ref3 => {
|
|
168
|
+
let [key, value] = _ref3;
|
|
169
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
170
|
+
key: key,
|
|
171
|
+
onClick: () => handleCardClick(value.title),
|
|
172
|
+
className: "".concat(activeCard === value.title ? "scale-105 shadow-xl" : "scale-90", " ").concat(miniCardClass, " ").concat(isRounded ? "rounded-2xl" : "rounded-none")
|
|
173
|
+
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
174
|
+
className: "text-center text-xs capitalize"
|
|
175
|
+
}, value.title));
|
|
176
|
+
})));
|
|
163
177
|
};
|
|
164
178
|
Card.propTypes = {
|
|
165
179
|
data: _propTypes.default.array.isRequired
|
|
166
180
|
};
|
|
167
181
|
Card.defaultProps = {
|
|
168
|
-
disposition:
|
|
169
|
-
bgColor:
|
|
170
|
-
isRounded: false
|
|
182
|
+
disposition: "LeftRight",
|
|
183
|
+
bgColor: "#e5e7eb",
|
|
184
|
+
isRounded: false,
|
|
185
|
+
tension: 120,
|
|
186
|
+
friction: 10
|
|
171
187
|
};
|
|
172
188
|
var _default = exports.default = Card;
|