krl-alfred 1.71.3 → 1.71.4

package/dist/components/ActionButton/ActionButton.js

@@ -19,36 +19,31 @@ var react_1 = require("react");
 var ActionButton_styled_1 = require("./ActionButton.styled");
 var Icon_1 = __importDefault(require("../Icon/Icon"));
 var Button_1 = __importDefault(require("../Button"));
+var date_fns_1 = require("date-fns");
 var ActionButton = function (props) {
     var _a = (0, react_1.useState)(0), days = _a[0], setDays = _a[1];
     var _b = (0, react_1.useState)(0), minutes = _b[0], setMinutes = _b[1];
     var _c = (0, react_1.useState)(0), hours = _c[0], setHours = _c[1];
     //const [secounds,setSecounds] = useState(0);
     var deadline = new Date(props.date).getTime();
+    var now = new Date().getTime();
     var count = function () {
-        var now = new Date().getTime();
-        var t = deadline - now;
-        var dd = Math.floor(t / (1000 * 60 * 60 * 24));
-        var hh = Math.floor((t % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        var mm = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
-        //const ss = Math.floor((t % (1000 * 60)) / 1000);
-        setDays(dd < 10 ? "0" + dd : dd);
-        setMinutes(mm < 10 ? "0" + mm : mm);
-        setHours(hh < 10 ? "0" + hh : hh);
-        //setSecounds(ss < 10 ? "0" + ss : ss)
-        if (t < 0) {
+        var duration = (0, date_fns_1.intervalToDuration)({
+            start: deadline,
+            end: now
+        });
+        setDays(deadline - now > 0 ? (0, date_fns_1.differenceInDays)(deadline, now) : 0);
+        setMinutes(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.minutes : 0);
+        setHours(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.hours : 0);
+        //setSecounds(deadline - now > 0 ? duration?.seconds : 0)
+        if (deadline - now < 0)
             clearInterval(timer);
-            setDays(0);
-            setMinutes(0);
-            setHours(0);
-            //setSecounds(0)
-        }
     };
     var timer = setInterval(count, 60 * 1000);
     (0, react_1.useEffect)(function () {
         count();
     }, [props.date]);
-    return (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "top", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: props.icon, width: "45px", height: "45px" }) }), (0, jsx_runtime_1.jsx)("strong", { className: "title body-bold-14-17", children: props.title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bottom", children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "timer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: days }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "G\u00FCn" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: hours }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Saat" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: minutes }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Dk." })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] })] }));
+    return (0, jsx_runtime_1.jsxs)(ActionButton_styled_1.ActionButtonStyled, __assign({}, props, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "top", children: [(0, jsx_runtime_1.jsx)("div", { className: "icon", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: props.icon, width: "45px", height: "45px" }) }), (0, jsx_runtime_1.jsx)("strong", { className: "title body-bold-14-17", children: props.title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bottom", children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: "timer", children: [(0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: days }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "G\u00FCn" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: hours.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Saat" })] }), (0, jsx_runtime_1.jsx)("div", { className: "dots caption-bold-12-15", children: ":" }), (0, jsx_runtime_1.jsxs)("div", { className: "box", children: [(0, jsx_runtime_1.jsx)("div", { className: "title-extra-bold-16-19", children: minutes.toString().padStart(2, '0') }), (0, jsx_runtime_1.jsx)("div", { className: "caption-regular-10-12", children: "Dk." })] })] }), (0, jsx_runtime_1.jsx)(Button_1.default, { size: "xsmall", width: "32px", icon: "ArrowMediumRight", variant: "primary" })] })] })] }));
 };
 ActionButton.defaultProps = {
     title: "Title",

package/dist/components/ActionButton/stories/ActionButton.stories.js

@@ -22,6 +22,7 @@ exports.Default = {
         width: '311px',
         title: 'Title',
         date: date.toISOString(),
+        //date:"2024-09-25T14:51:41.115Z",
         icon: 'TimeCircle',
         onClick: function (e) { return console.log(e); },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "krl-alfred",
-  "version": "1.71.3",
+  "version": "1.71.4",
   "files": [
     "dist"
   ],
@@ -23,6 +23,7 @@
     "@types/styled-components": "^5.0.1",
     "classnames": "^2.3.2",
     "css-loader": "^6.7.3",
+    "date-fns": "^2.30.0",
     "plop": "^3.1.2",
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",