krl-alfred 1.71.2 → 1.71.4
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.
|
@@ -19,36 +19,31 @@ var react_1 = require("react");
|
|
|
19
19
|
var ActionButton_styled_1 = require("./ActionButton.styled");
|
|
20
20
|
var Icon_1 = __importDefault(require("../Icon/Icon"));
|
|
21
21
|
var Button_1 = __importDefault(require("../Button"));
|
|
22
|
+
var date_fns_1 = require("date-fns");
|
|
22
23
|
var ActionButton = function (props) {
|
|
23
24
|
var _a = (0, react_1.useState)(0), days = _a[0], setDays = _a[1];
|
|
24
25
|
var _b = (0, react_1.useState)(0), minutes = _b[0], setMinutes = _b[1];
|
|
25
26
|
var _c = (0, react_1.useState)(0), hours = _c[0], setHours = _c[1];
|
|
26
27
|
//const [secounds,setSecounds] = useState(0);
|
|
27
28
|
var deadline = new Date(props.date).getTime();
|
|
29
|
+
var now = new Date().getTime();
|
|
28
30
|
var count = function () {
|
|
29
|
-
var
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
//setSecounds(ss < 10 ? "0" + ss : ss)
|
|
39
|
-
if (t < 0) {
|
|
31
|
+
var duration = (0, date_fns_1.intervalToDuration)({
|
|
32
|
+
start: deadline,
|
|
33
|
+
end: now
|
|
34
|
+
});
|
|
35
|
+
setDays(deadline - now > 0 ? (0, date_fns_1.differenceInDays)(deadline, now) : 0);
|
|
36
|
+
setMinutes(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.minutes : 0);
|
|
37
|
+
setHours(deadline - now > 0 ? duration === null || duration === void 0 ? void 0 : duration.hours : 0);
|
|
38
|
+
//setSecounds(deadline - now > 0 ? duration?.seconds : 0)
|
|
39
|
+
if (deadline - now < 0)
|
|
40
40
|
clearInterval(timer);
|
|
41
|
-
setDays(0);
|
|
42
|
-
setMinutes(0);
|
|
43
|
-
setHours(0);
|
|
44
|
-
//setSecounds(0)
|
|
45
|
-
}
|
|
46
41
|
};
|
|
47
42
|
var timer = setInterval(count, 60 * 1000);
|
|
48
43
|
(0, react_1.useEffect)(function () {
|
|
49
44
|
count();
|
|
50
45
|
}, [props.date]);
|
|
51
|
-
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" })] })] })] }));
|
|
46
|
+
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" })] })] })] }));
|
|
52
47
|
};
|
|
53
48
|
ActionButton.defaultProps = {
|
|
54
49
|
title: "Title",
|
|
@@ -13,7 +13,7 @@ var devices_1 = require("../../constants/devices");
|
|
|
13
13
|
exports.TooltipStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"], ["\n display: block;\n position: relative;\n vertical-align: middle;\n color: var(--dark);\n ", "\n"])), function (props) { return !props.hasClickAction && "\n &:hover {\n > div {\n opacity: 1;\n }\n }\n "; });
|
|
14
14
|
exports.Selector = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"], ["\n display: block;\n cursor: ", ";\n\n svg {\n display: block;\n\n path {\n stroke: var(--primary);\n }\n }\n"])), function (props) { return props.hasClickAction ? 'pointer' : 'initial'; });
|
|
15
15
|
exports.Title = styled_components_1.default.strong(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: block;\n margin-bottom: 0.5rem;\n"], ["\n display: block;\n margin-bottom: 0.5rem;\n"])));
|
|
16
|
-
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding:
|
|
16
|
+
exports.Popup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n position: absolute;\n width: ", ";\n padding: 0.5rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.2rem;\n padding: 0.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"], ["\n\n position: absolute;\n width: ", ";\n padding: 0.5rem;\n border-radius: 0.5rem;\n background-color: var(--primary-opacity-10);\n z-index: 99999;\n box-sizing: border-box;\n ", ";\n user-select: none;\n pointer-events: none;\n transition: all 0.15s ease;\n opacity: ", ";\n\n @media only screen and ", " {\n left: auto;\n transform: none;\n right: -1.2rem;\n padding: 0.5rem;\n &:before {\n left: auto !important;\n transform: rotate(45deg) !important;\n right: ", " !important;\n }\n }\n\n &:before {\n content: '';\n position: absolute;\n\n ", ";\n background-color: var(--primary-opacity-10);\n width: 12px;\n height: 12px;\n border-radius: 3px;\n }\n"])), function (props) { return props.popupWidth ? props.popupWidth : "151px"; }, function (props) {
|
|
17
17
|
switch (props.position) {
|
|
18
18
|
case 'bottomRight':
|
|
19
19
|
return "\n right: -20px;\n top: calc(100% + 10px);\n ";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "krl-alfred",
|
|
3
|
-
"version": "1.71.
|
|
3
|
+
"version": "1.71.4",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"@types/styled-components": "^5.0.1",
|
|
24
24
|
"classnames": "^2.3.2",
|
|
25
25
|
"css-loader": "^6.7.3",
|
|
26
|
+
"date-fns": "^2.30.0",
|
|
26
27
|
"plop": "^3.1.2",
|
|
27
28
|
"react": "^18.2.0",
|
|
28
29
|
"react-circular-progressbar": "^2.1.0",
|