react-pop-cards 0.2.0 → 0.2.3
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 +98 -70
- package/dist/index.css +683 -162
- package/dist/index.d.ts +18 -0
- package/dist/index.js +29 -14
- package/package.json +73 -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,18 +1,20 @@
|
|
|
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");
|
|
14
15
|
require("../index.css");
|
|
15
16
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
+
var _chromaJs = _interopRequireDefault(require("chroma-js"));
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
19
|
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); }
|
|
18
20
|
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; }
|
|
@@ -26,79 +28,82 @@ const Card = _ref => {
|
|
|
26
28
|
data,
|
|
27
29
|
bgColor,
|
|
28
30
|
disposition,
|
|
29
|
-
isRounded
|
|
31
|
+
isRounded,
|
|
32
|
+
tension,
|
|
33
|
+
friction
|
|
30
34
|
} = _ref;
|
|
31
35
|
const isMobile = (0, _reactResponsive.useMediaQuery)({
|
|
32
|
-
query: "max-width:
|
|
36
|
+
query: "(max-width: 640px)"
|
|
33
37
|
});
|
|
34
38
|
const activeCardRef = (0, _react.useRef)(null);
|
|
35
39
|
const parentCard = (0, _react.useRef)(null);
|
|
36
40
|
|
|
37
|
-
// default content div classes
|
|
41
|
+
// NOTE: default content div classes
|
|
38
42
|
const cardDivClass = "col-span-3 flex justify-center items-center duration-100";
|
|
39
43
|
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-
|
|
44
|
+
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
45
|
|
|
42
46
|
// Define card data
|
|
43
47
|
const initialCardDimensions = {
|
|
44
48
|
width: "6rem",
|
|
45
49
|
height: "6rem"
|
|
46
50
|
};
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
const [cards, setCards] = (0, _react.useState)(
|
|
51
|
+
|
|
52
|
+
// NOTE: assign the data to the cards
|
|
53
|
+
|
|
54
|
+
const newArray = data.map(item => _objectSpread(_objectSpread({}, initialCardDimensions), item));
|
|
55
|
+
const [cards, setCards] = (0, _react.useState)(newArray);
|
|
52
56
|
|
|
53
57
|
// active card
|
|
54
|
-
const [activeCard, setActiveCard] = (0, _react.useState)(data[0].
|
|
58
|
+
const [activeCard, setActiveCard] = (0, _react.useState)(data[0].title);
|
|
55
59
|
(0, _react.useEffect)(() => {
|
|
56
60
|
handleCardClick(activeCard);
|
|
57
61
|
const handleLocalStorageUpdate = () => {
|
|
58
62
|
try {
|
|
59
|
-
const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
}, {});
|
|
63
|
-
setCards(newData);
|
|
63
|
+
const updatedArray = JSON.parse(localStorage.getItem("data")).map(item => _objectSpread(_objectSpread({}, initialCardDimensions), item));
|
|
64
|
+
setCards(updatedArray);
|
|
65
|
+
setActiveCard(updatedArray[0].title);
|
|
64
66
|
} catch (error) {
|
|
65
|
-
console.error(
|
|
67
|
+
console.error("Error parsing local storage data:", error);
|
|
66
68
|
}
|
|
67
69
|
};
|
|
68
|
-
window.addEventListener(
|
|
70
|
+
window.addEventListener("DataChange", handleLocalStorageUpdate);
|
|
69
71
|
return () => {
|
|
70
|
-
window.removeEventListener(
|
|
72
|
+
window.removeEventListener("DataChange", handleLocalStorageUpdate);
|
|
71
73
|
};
|
|
72
74
|
}, [data, activeCard, isMobile]);
|
|
73
75
|
|
|
74
76
|
// Handle card click and update dimensions
|
|
75
77
|
const handleCardClick = cardKey => {
|
|
76
|
-
const updatedCards =
|
|
77
|
-
|
|
78
|
-
width: "20rem",
|
|
79
|
-
height: isMobile ? "11rem" : "20rem"
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
}, {});
|
|
78
|
+
const updatedCards = cards.map(card => {
|
|
79
|
+
return _objectSpread(_objectSpread({}, card), {}, {
|
|
80
|
+
width: cardKey === card.title ? isMobile ? "11rem" : "20rem" : initialCardDimensions.width,
|
|
81
|
+
height: cardKey === card.title ? isMobile ? "11rem" : "20rem" : initialCardDimensions.height
|
|
82
|
+
});
|
|
83
|
+
});
|
|
83
84
|
setCards(updatedCards);
|
|
84
85
|
setActiveCard(cardKey);
|
|
85
86
|
};
|
|
86
87
|
|
|
87
|
-
// Animated styles for each card
|
|
88
|
-
const animatedStyles = Object.keys(cards).reduce((acc,
|
|
89
|
-
acc[
|
|
88
|
+
// NOTE: Animated styles for each card
|
|
89
|
+
const animatedStyles = Object.keys(cards).reduce((acc, cardKey) => {
|
|
90
|
+
acc[cardKey] = (0, _web.useSpring)({
|
|
90
91
|
to: {
|
|
91
|
-
width: cards[
|
|
92
|
-
height: cards[
|
|
92
|
+
width: cards[cardKey[0]].width.toString(),
|
|
93
|
+
height: cards[cardKey[0]].height.toString(),
|
|
94
|
+
backgroundColor: bgColor
|
|
93
95
|
},
|
|
94
96
|
config: {
|
|
95
|
-
tension:
|
|
96
|
-
friction:
|
|
97
|
+
tension: tension,
|
|
98
|
+
friction: friction
|
|
97
99
|
}
|
|
98
100
|
});
|
|
99
101
|
return acc;
|
|
100
102
|
}, {});
|
|
103
|
+
|
|
104
|
+
// NOTE: parent classNames of the animated cards
|
|
101
105
|
const getCardClasses = key => {
|
|
106
|
+
key = Number(key);
|
|
102
107
|
switch (key) {
|
|
103
108
|
case 0:
|
|
104
109
|
return "flex justify-end items-end";
|
|
@@ -109,64 +114,87 @@ const Card = _ref => {
|
|
|
109
114
|
case 3:
|
|
110
115
|
return "flex";
|
|
111
116
|
default:
|
|
112
|
-
return "";
|
|
117
|
+
return "lol";
|
|
113
118
|
}
|
|
114
119
|
};
|
|
120
|
+
|
|
121
|
+
// NOTE: classNames for the disposition
|
|
115
122
|
const getDisposition = disposition => {
|
|
116
123
|
switch (disposition) {
|
|
117
124
|
case "LeftRight":
|
|
118
|
-
return "grid grid-cols-5 h-
|
|
125
|
+
return "".concat(isMobile ? "flex flex-col justify-center items-center gap-8 h-full" : "grid grid-cols-5 h-full");
|
|
119
126
|
case "RightLeft":
|
|
120
|
-
return "grid grid-cols-5 h-
|
|
127
|
+
return "".concat(isMobile ? "flex flex-col-reverse justify-center items-center gap-8 h-full" : "grid grid-cols-5 h-full");
|
|
121
128
|
case "TopBottom":
|
|
122
|
-
return "flex flex-col justify-center items-center gap-
|
|
129
|
+
return "flex flex-col justify-center items-center gap-8 h-full";
|
|
123
130
|
case "BottomTop":
|
|
124
|
-
return "flex flex-col-reverse justify-center items-center gap-
|
|
131
|
+
return "flex flex-col-reverse justify-center items-center gap-8 h-full";
|
|
125
132
|
default:
|
|
126
|
-
return "grid grid-cols-5 h-
|
|
133
|
+
return "grid grid-cols-5 h-full";
|
|
127
134
|
}
|
|
128
135
|
};
|
|
136
|
+
|
|
137
|
+
// NOTE: text color according to bg color
|
|
138
|
+
const [textColor, setTextColor] = (0, _react.useState)();
|
|
139
|
+
(0, _react.useEffect)(() => {
|
|
140
|
+
const luminance = (0, _chromaJs.default)(bgColor).luminance();
|
|
141
|
+
luminance < 0.5 ? setTextColor('#e5e5e5') : setTextColor('#1c2531');
|
|
142
|
+
}, [bgColor]);
|
|
129
143
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
130
144
|
className: getDisposition(disposition)
|
|
131
145
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
132
146
|
className: (disposition === "LeftRight" ? "order-1" : "order-2") + " ".concat(cardDivClass)
|
|
133
147
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
134
148
|
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
|
-
|
|
149
|
+
}, Object.entries(cards).map(_ref2 => {
|
|
150
|
+
let [key, value] = _ref2;
|
|
151
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
152
|
+
key: key,
|
|
153
|
+
className: getCardClasses(key),
|
|
154
|
+
ref: parentCard
|
|
155
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
156
|
+
style: {
|
|
157
|
+
color: textColor
|
|
158
|
+
}
|
|
159
|
+
}, /*#__PURE__*/_react.default.createElement(_web.animated.div, {
|
|
160
|
+
ref: activeCard === value.title ? activeCardRef : null,
|
|
161
|
+
style: animatedStyles[key],
|
|
162
|
+
onClick: () => handleCardClick(value.title),
|
|
163
|
+
className: "".concat(activeCard === value.title ? "px-6 py-4" : "flex justify-center items-center", " cursor-pointer duration-100 ").concat(isRounded ? " rounded-2xl" : " rounded-none")
|
|
164
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
165
|
+
className: "".concat(activeCard === value.title ? "min-h-full" : "max-sm:space-y-1 space-y-3")
|
|
166
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
167
|
+
className: "flex max-sm:flex-col-reverse justify-between items-center"
|
|
168
|
+
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
169
|
+
className: (activeCard === value.title ? "max-sm:text-xl text-5xl" : "max-sm:text-xs text-base") + " capitalize font-bold duration-100"
|
|
170
|
+
}, value.title), activeCard === value.title && value.image != null && /*#__PURE__*/_react.default.createElement("img", {
|
|
171
|
+
className: "max-sm:w-12 max-sm:h-12 w-20 h-20",
|
|
172
|
+
src: value.image,
|
|
173
|
+
alt: "imageCard"
|
|
174
|
+
})), activeCard === value.title && /*#__PURE__*/_react.default.createElement("p", {
|
|
175
|
+
className: "line-clamp-[8] text-justify max-sm:text-xs"
|
|
176
|
+
}, value.description)))));
|
|
177
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
155
178
|
className: (disposition === "RightLeft" ? "order-1" : "order-2") + " ".concat(miniCardDivClass)
|
|
156
|
-
}, Object.
|
|
157
|
-
key
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
179
|
+
}, Object.entries(cards).map(_ref3 => {
|
|
180
|
+
let [key, value] = _ref3;
|
|
181
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
182
|
+
key: key,
|
|
183
|
+
onClick: () => handleCardClick(value.title),
|
|
184
|
+
className: "bg-base-100 ".concat(activeCard === value.title ? "scale-105 shadow-xl" : "scale-90", " ").concat(miniCardClass, " ").concat(isRounded ? "rounded-2xl" : "rounded-none")
|
|
185
|
+
}, /*#__PURE__*/_react.default.createElement("label", {
|
|
186
|
+
className: "text-center text-xs capitalize"
|
|
187
|
+
}, value.title));
|
|
188
|
+
})));
|
|
163
189
|
};
|
|
164
190
|
Card.propTypes = {
|
|
165
191
|
data: _propTypes.default.array.isRequired
|
|
166
192
|
};
|
|
167
193
|
Card.defaultProps = {
|
|
168
|
-
disposition:
|
|
169
|
-
bgColor:
|
|
170
|
-
isRounded: false
|
|
194
|
+
disposition: "LeftRight",
|
|
195
|
+
bgColor: "#e5e7eb",
|
|
196
|
+
isRounded: false,
|
|
197
|
+
tension: 120,
|
|
198
|
+
friction: 10
|
|
171
199
|
};
|
|
172
200
|
var _default = exports.default = Card;
|