@sydsoft/base 1.18.0 → 1.20.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/dist/esm/_lib/useInterval.d.ts +6 -0
- package/dist/esm/_lib/useInterval.js +24 -0
- package/dist/esm/countDown/index.d.ts +22 -0
- package/dist/esm/countDown/index.js +100 -0
- package/dist/esm/grid/index.d.ts +10 -9
- package/dist/esm/grid/index.js +56 -22
- package/dist/esm/index.d.ts +2 -2
- package/dist/esm/index.js +2 -2
- package/package.json +2 -2
- package/dist/esm/grid/DevelopGridComponent.d.ts +0 -3
- package/dist/esm/grid/DevelopGridComponent.js +0 -39
- /package/dist/esm/{datetime → dateTime}/index.d.ts +0 -0
- /package/dist/esm/{datetime → dateTime}/index.js +0 -0
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2023
|
|
3
|
+
* @author: izzetseydaoglu
|
|
4
|
+
* @last-modified: 29.01.2024 04:09
|
|
5
|
+
*/
|
|
6
|
+
// source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
|
|
7
|
+
import { useEffect, useRef } from "react";
|
|
8
|
+
export function useInterval(callback, delay) {
|
|
9
|
+
var savedCallback = useRef(null);
|
|
10
|
+
// Remember the latest callback.
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
savedCallback.current = callback;
|
|
13
|
+
}, [callback]);
|
|
14
|
+
// Set up the interval.
|
|
15
|
+
useEffect(function () {
|
|
16
|
+
function tick() {
|
|
17
|
+
savedCallback && savedCallback.current && savedCallback.current();
|
|
18
|
+
}
|
|
19
|
+
if (delay !== null) {
|
|
20
|
+
var id_1 = setInterval(tick, delay);
|
|
21
|
+
return function () { return clearInterval(id_1); };
|
|
22
|
+
}
|
|
23
|
+
}, [delay]);
|
|
24
|
+
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type Props = {
|
|
3
|
+
targetTime: number | string;
|
|
4
|
+
timerType?: "countdown" | "datetime";
|
|
5
|
+
speed?: number;
|
|
6
|
+
countType?: "seconds" | "minutes:seconds" | "hours:minutes:seconds" | "days:hours:minutes:seconds";
|
|
7
|
+
hide?: boolean;
|
|
8
|
+
onComplete?: () => void;
|
|
9
|
+
getStatus?: ({ days, hours, minutes, seconds, timer }: any) => void;
|
|
10
|
+
autoStart?: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare const useCountDown: ({ autoStart, onComplete, getStatus, targetTime, timerType, countType, speed, hide }: Props) => {
|
|
13
|
+
ComponentCountDown: (children: any) => React.FunctionComponentElement<{
|
|
14
|
+
ref: React.MutableRefObject<any>;
|
|
15
|
+
}> | null;
|
|
16
|
+
startCountDown: () => void;
|
|
17
|
+
stopCountDown: () => void;
|
|
18
|
+
setTargetTime: (targetTime: number | string) => void;
|
|
19
|
+
setTimerSpeed: (timerSpeed: number) => void;
|
|
20
|
+
getChildrenRef: () => any;
|
|
21
|
+
};
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from "react";
|
|
2
|
+
import React from "react";
|
|
3
|
+
import { useInterval } from "../_lib/useInterval";
|
|
4
|
+
export var useCountDown = function (_a) {
|
|
5
|
+
var _b = _a.autoStart, autoStart = _b === void 0 ? false : _b, onComplete = _a.onComplete, getStatus = _a.getStatus, targetTime = _a.targetTime, _c = _a.timerType, timerType = _c === void 0 ? "countdown" : _c, _d = _a.countType, countType = _d === void 0 ? "seconds" : _d, _e = _a.speed, speed = _e === void 0 ? 1000 : _e, hide = _a.hide;
|
|
6
|
+
var refCountDownRender = useRef(null);
|
|
7
|
+
var _f = useState(timerType === "datetime" || autoStart), enabled = _f[0], setEnabled = _f[1];
|
|
8
|
+
var _g = useState(0), timer = _g[0], setTimer = _g[1];
|
|
9
|
+
var _h = useState(typeof speed === "number" && speed > 0 ? speed : 1000), timerSpeed = _h[0], setTimerSpeed = _h[1];
|
|
10
|
+
useEffect(function () { return prepareTimer(targetTime); }, [targetTime]);
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
if (!hide)
|
|
13
|
+
render();
|
|
14
|
+
}, [timer]);
|
|
15
|
+
useInterval(function () {
|
|
16
|
+
if (enabled) {
|
|
17
|
+
if (timer <= 1) {
|
|
18
|
+
stopCountDown();
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
setTimer(timer - 1);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}, enabled ? timerSpeed : null);
|
|
25
|
+
var prepareTimer = function (timeORstring) {
|
|
26
|
+
if (timerType === "datetime") {
|
|
27
|
+
setTimer(Math.floor((new Date(timeORstring).getTime() - new Date().getTime()) / 1000));
|
|
28
|
+
setEnabled(true);
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
setTimer(timeORstring);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
var stopCountDown = function () {
|
|
35
|
+
setTimer(0);
|
|
36
|
+
setEnabled(false);
|
|
37
|
+
if (onComplete)
|
|
38
|
+
onComplete();
|
|
39
|
+
};
|
|
40
|
+
var padNumber = function (num, padLength, padString) {
|
|
41
|
+
if (padLength === void 0) { padLength = 2; }
|
|
42
|
+
if (padString === void 0) { padString = "0"; }
|
|
43
|
+
return (typeof targetTime === "number" && targetTime < 10 ? num : String(num).padStart(padLength, padString));
|
|
44
|
+
};
|
|
45
|
+
var render = function () {
|
|
46
|
+
var days = 0, hours = 0, minutes = 0, seconds = timer;
|
|
47
|
+
if (countType === "minutes:seconds") {
|
|
48
|
+
minutes = Math.floor(seconds / 60);
|
|
49
|
+
seconds -= minutes * 60;
|
|
50
|
+
}
|
|
51
|
+
else if (countType === "hours:minutes:seconds") {
|
|
52
|
+
hours = Math.floor(seconds / (60 * 60));
|
|
53
|
+
seconds -= hours * 60 * 60;
|
|
54
|
+
minutes = Math.floor(seconds / 60);
|
|
55
|
+
seconds -= minutes * 60;
|
|
56
|
+
}
|
|
57
|
+
else if (countType === "days:hours:minutes:seconds") {
|
|
58
|
+
days = Math.floor(seconds / (60 * 60 * 24));
|
|
59
|
+
seconds -= days * 60 * 60 * 24;
|
|
60
|
+
hours = Math.floor(seconds / (60 * 60));
|
|
61
|
+
seconds -= hours * 60 * 60;
|
|
62
|
+
minutes = Math.floor(seconds / 60);
|
|
63
|
+
seconds -= minutes * 60;
|
|
64
|
+
}
|
|
65
|
+
seconds = Math.floor(seconds);
|
|
66
|
+
if (getStatus && timer > 0)
|
|
67
|
+
getStatus({ days: days, hours: hours, minutes: minutes, seconds: seconds, timer: timer });
|
|
68
|
+
if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
|
|
69
|
+
stopCountDown();
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
if (refCountDownRender.current) {
|
|
73
|
+
var getPadValues = function (div) {
|
|
74
|
+
var length = div.dataset.padlength || 2;
|
|
75
|
+
var string = div.dataset.padstring || "0";
|
|
76
|
+
return { length: length, string: string };
|
|
77
|
+
};
|
|
78
|
+
var divGun = refCountDownRender.current.querySelector("[data-name='days']");
|
|
79
|
+
if (divGun)
|
|
80
|
+
divGun.innerHTML = padNumber(days, getPadValues(divGun).length, getPadValues(divGun).string).toString();
|
|
81
|
+
var divSaat = refCountDownRender.current.querySelector("[data-name='hours']");
|
|
82
|
+
if (divSaat)
|
|
83
|
+
divSaat.innerHTML = padNumber(hours, getPadValues(divSaat).length, getPadValues(divSaat).string).toString();
|
|
84
|
+
var divDakika = refCountDownRender.current.querySelector("[data-name='minutes']");
|
|
85
|
+
if (divDakika)
|
|
86
|
+
divDakika.innerHTML = padNumber(minutes, getPadValues(divDakika).length, getPadValues(divDakika).string).toString();
|
|
87
|
+
var divSaniye = refCountDownRender.current.querySelector("[data-name='seconds']");
|
|
88
|
+
if (divSaniye)
|
|
89
|
+
divSaniye.innerHTML = padNumber(seconds, getPadValues(divSaniye).length, getPadValues(divSaniye).string).toString();
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
return {
|
|
93
|
+
ComponentCountDown: function (children) { return (hide ? null : React.cloneElement(children, { ref: refCountDownRender })); },
|
|
94
|
+
startCountDown: function () { return setEnabled(true); },
|
|
95
|
+
stopCountDown: function () { return setEnabled(false); },
|
|
96
|
+
setTargetTime: function (targetTime) { return prepareTimer(targetTime); },
|
|
97
|
+
setTimerSpeed: function (timerSpeed) { return setTimerSpeed(timerSpeed); },
|
|
98
|
+
getChildrenRef: function () { return refCountDownRender.current || null; },
|
|
99
|
+
};
|
|
100
|
+
};
|
package/dist/esm/grid/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export type typeSpacingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
3
|
-
export type typeJustifyContent =
|
|
4
|
-
export type typeAlignItems =
|
|
5
|
-
export type typeAlignContent =
|
|
3
|
+
export type typeJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
|
|
4
|
+
export type typeAlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
|
|
5
|
+
export type typeAlignContent = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
|
|
6
6
|
export interface RowProps {
|
|
7
7
|
children: React.ReactNode;
|
|
8
8
|
className?: string;
|
|
9
9
|
style?: React.CSSProperties;
|
|
10
|
-
flexDirection?:
|
|
11
|
-
flexWrap?:
|
|
10
|
+
flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
11
|
+
flexWrap?: 'wrap' | 'wrap-reverse' | 'nowrap';
|
|
12
12
|
justifyContent?: typeJustifyContent;
|
|
13
13
|
alignContent?: typeAlignContent;
|
|
14
14
|
alignItems?: typeAlignItems;
|
|
@@ -16,7 +16,7 @@ export interface RowProps {
|
|
|
16
16
|
colSpacing?: typeSpacingValues;
|
|
17
17
|
}
|
|
18
18
|
export declare const Row: React.FC<RowProps>;
|
|
19
|
-
export type GridValues =
|
|
19
|
+
export type GridValues = 'auto' | 'full' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
20
20
|
export interface ColProps {
|
|
21
21
|
children?: React.ReactNode;
|
|
22
22
|
className?: string;
|
|
@@ -31,7 +31,8 @@ export interface ColProps {
|
|
|
31
31
|
export declare const Col: React.FC<ColProps>;
|
|
32
32
|
export interface HiddenProps {
|
|
33
33
|
children: React.ReactElement;
|
|
34
|
-
hidden?:
|
|
35
|
-
onlyHidden?: (
|
|
34
|
+
hidden?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
35
|
+
onlyHidden?: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl')[];
|
|
36
36
|
}
|
|
37
37
|
export declare const Hidden: React.FC<HiddenProps>;
|
|
38
|
+
export declare const DevelopGridComponent: React.FC;
|
package/dist/esm/grid/index.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
|
-
import { __spreadArray } from "tslib";
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import React from
|
|
4
|
-
import styles from
|
|
1
|
+
import { __assign, __rest, __spreadArray } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import styles from './index.module.css';
|
|
5
5
|
export var Row = function (_a) {
|
|
6
|
-
var children = _a.children, _b = _a.className, className = _b === void 0 ?
|
|
6
|
+
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, _c = _a.flexDirection, flexDirection = _c === void 0 ? 'row' : _c, _d = _a.flexWrap, flexWrap = _d === void 0 ? 'wrap' : _d, _e = _a.justifyContent, justifyContent = _e === void 0 ? 'flex-start' : _e, _f = _a.alignContent, alignContent = _f === void 0 ? 'center' : _f, _g = _a.alignItems, alignItems = _g === void 0 ? 'center' : _g, _h = _a.rowSpacing, rowSpacing = _h === void 0 ? 2 : _h, _j = _a.colSpacing, colSpacing = _j === void 0 ? 2 : _j, other = __rest(_a, ["children", "className", "style", "flexDirection", "flexWrap", "justifyContent", "alignContent", "alignItems", "rowSpacing", "colSpacing"]);
|
|
7
7
|
var classes = [
|
|
8
8
|
styles.row,
|
|
9
9
|
rowSpacing !== undefined && styles["row-spacing-".concat(rowSpacing)],
|
|
10
10
|
colSpacing !== undefined && styles["col-spacing-".concat(colSpacing)],
|
|
11
|
-
flexDirection !==
|
|
12
|
-
flexWrap !==
|
|
13
|
-
justifyContent !==
|
|
14
|
-
alignItems !==
|
|
15
|
-
alignContent !==
|
|
11
|
+
flexDirection !== 'row' && styles["flex-".concat(flexDirection.replace('-', '-'))],
|
|
12
|
+
flexWrap !== 'wrap' && styles["flex-".concat(flexWrap)],
|
|
13
|
+
justifyContent !== 'flex-start' && styles["justify-".concat(justifyContent.replace('flex-', '').replace('space-', ''))],
|
|
14
|
+
alignItems !== 'center' && styles["align-items-".concat(alignItems.replace('flex-', ''))],
|
|
15
|
+
alignContent !== 'center' && styles["align-content-".concat(alignContent.replace('flex-', ''))],
|
|
16
16
|
className
|
|
17
17
|
]
|
|
18
18
|
.filter(Boolean)
|
|
19
|
-
.join(
|
|
20
|
-
return (_jsx("div", { className: classes, style: style, children: children }));
|
|
19
|
+
.join(' ');
|
|
20
|
+
return (_jsx("div", __assign({ className: classes, style: style }, other, { children: children })));
|
|
21
21
|
};
|
|
22
22
|
export var Col = function (_a) {
|
|
23
23
|
// Cascading logic - aynı sizin component'inizdeki gibi
|
|
24
|
-
var children = _a.children, _b = _a.className, className = _b === void 0 ?
|
|
24
|
+
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, xs = _a.xs, sm = _a.sm, md = _a.md, lg = _a.lg, xl = _a.xl, xxl = _a.xxl, other = __rest(_a, ["children", "className", "style", "xs", "sm", "md", "lg", "xl", "xxl"]);
|
|
25
25
|
var classes = [
|
|
26
26
|
styles.col,
|
|
27
27
|
// Sadece belirtilen breakpoint'ler için class ekle
|
|
@@ -34,12 +34,12 @@ export var Col = function (_a) {
|
|
|
34
34
|
className
|
|
35
35
|
]
|
|
36
36
|
.filter(Boolean)
|
|
37
|
-
.join(
|
|
38
|
-
return (_jsx("div", { className: classes, style: style, children: children }));
|
|
37
|
+
.join(' ');
|
|
38
|
+
return (_jsx("div", __assign({ className: classes, style: style }, other, { children: children })));
|
|
39
39
|
};
|
|
40
40
|
export var Hidden = function (_a) {
|
|
41
|
-
var children = _a.children, hidden = _a.hidden, onlyHidden = _a.onlyHidden;
|
|
42
|
-
var existingClassName = children.props.className ||
|
|
41
|
+
var children = _a.children, hidden = _a.hidden, onlyHidden = _a.onlyHidden, other = __rest(_a, ["children", "hidden", "onlyHidden"]);
|
|
42
|
+
var existingClassName = children.props.className || '';
|
|
43
43
|
var hiddenClasses = [];
|
|
44
44
|
if (onlyHidden) {
|
|
45
45
|
onlyHidden.forEach(function (breakpoint) {
|
|
@@ -48,7 +48,7 @@ export var Hidden = function (_a) {
|
|
|
48
48
|
}
|
|
49
49
|
else if (hidden) {
|
|
50
50
|
// Orijinal mantık: seçilen breakpoint ve altındaki tüm breakpoint'ler gizlenir
|
|
51
|
-
var breakpoints = [
|
|
51
|
+
var breakpoints = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'];
|
|
52
52
|
var targetIndex = breakpoints.indexOf(hidden);
|
|
53
53
|
if (targetIndex !== -1) {
|
|
54
54
|
for (var i = 0; i <= targetIndex; i++) {
|
|
@@ -56,8 +56,42 @@ export var Hidden = function (_a) {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
var newClassName = __spreadArray([existingClassName], hiddenClasses, true).filter(Boolean).join(
|
|
60
|
-
return React.cloneElement(children, {
|
|
61
|
-
|
|
62
|
-
|
|
59
|
+
var newClassName = __spreadArray([existingClassName], hiddenClasses, true).filter(Boolean).join(' ');
|
|
60
|
+
return React.cloneElement(children, __assign({ className: newClassName }, other));
|
|
61
|
+
};
|
|
62
|
+
export var DevelopGridComponent = function () {
|
|
63
|
+
var _a = useState(''), currentBreakpoint = _a[0], setCurrentBreakpoint = _a[1];
|
|
64
|
+
// Breakpoint detector
|
|
65
|
+
React.useEffect(function () {
|
|
66
|
+
var updateBreakpoint = function () {
|
|
67
|
+
var width = window.innerWidth;
|
|
68
|
+
var breakpoint = '';
|
|
69
|
+
if (width <= 576)
|
|
70
|
+
breakpoint = 'XS (≤576px)';
|
|
71
|
+
else if (width <= 768)
|
|
72
|
+
breakpoint = 'SM (577-768px)';
|
|
73
|
+
else if (width <= 992)
|
|
74
|
+
breakpoint = 'MD (769-992px)';
|
|
75
|
+
else if (width <= 1200)
|
|
76
|
+
breakpoint = 'LG (993-1200px)';
|
|
77
|
+
else if (width <= 1400)
|
|
78
|
+
breakpoint = 'XL (1201-1400px)';
|
|
79
|
+
else
|
|
80
|
+
breakpoint = 'XXL (≥1401px)';
|
|
81
|
+
setCurrentBreakpoint(breakpoint);
|
|
82
|
+
};
|
|
83
|
+
updateBreakpoint();
|
|
84
|
+
window.addEventListener('resize', updateBreakpoint);
|
|
85
|
+
return function () { return window.removeEventListener('resize', updateBreakpoint); };
|
|
86
|
+
}, []);
|
|
87
|
+
return (_jsxs("div", { style: {
|
|
88
|
+
position: 'fixed',
|
|
89
|
+
bottom: '10px',
|
|
90
|
+
right: '10px',
|
|
91
|
+
background: '#333',
|
|
92
|
+
color: 'white',
|
|
93
|
+
padding: '10px',
|
|
94
|
+
borderRadius: '4px',
|
|
95
|
+
zIndex: 9999999
|
|
96
|
+
}, children: ["Current: ", currentBreakpoint] }));
|
|
63
97
|
};
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export * from './_lib/baseFunctions';
|
|
2
2
|
export * from './alert';
|
|
3
3
|
export * from './box';
|
|
4
|
-
export * from './
|
|
4
|
+
export * from './countDown';
|
|
5
|
+
export * from './dateTime';
|
|
5
6
|
export * from './form';
|
|
6
7
|
export * from './grid';
|
|
7
|
-
export * from './grid/DevelopGridComponent';
|
|
8
8
|
export * from './icon';
|
|
9
9
|
export * from './menu';
|
|
10
10
|
export * from './modal';
|
package/dist/esm/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export * from './_lib/baseFunctions';
|
|
2
2
|
export * from './alert';
|
|
3
3
|
export * from './box';
|
|
4
|
-
export * from './
|
|
4
|
+
export * from './countDown';
|
|
5
|
+
export * from './dateTime';
|
|
5
6
|
export * from './form';
|
|
6
7
|
export * from './grid';
|
|
7
|
-
export * from './grid/DevelopGridComponent';
|
|
8
8
|
export * from './icon';
|
|
9
9
|
export * from './menu';
|
|
10
10
|
export * from './modal';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sydsoft/base",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.20.0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "./dist/cjs/index.js",
|
|
7
7
|
"module": "./dist/esm/index.js",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"buildCommonJS": "rm -rf ./dist && tsc && tsc --module commonjs --outDir ./dist/csj",
|
|
16
16
|
"copyFiles": "copyfiles -u 2 \"../@base/**/*.css\" dist/esm",
|
|
17
17
|
"build": "rm -rf ./dist && tsc && npm run copyFiles",
|
|
18
|
-
"publishNPM": "npm run build && npm version patch && npm version minor && npm publish --dry-run && npm publish --access public"
|
|
18
|
+
"publishNPM": "npm run build && npm version patch && npm version minor && npm publish --dry-run && npm publish --access public && rm -rf ./dist"
|
|
19
19
|
},
|
|
20
20
|
"publishConfig": {
|
|
21
21
|
"access": "public"
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import React, { useState } from 'react';
|
|
3
|
-
var DevelopGridComponent = function () {
|
|
4
|
-
var _a = useState(''), currentBreakpoint = _a[0], setCurrentBreakpoint = _a[1];
|
|
5
|
-
// Breakpoint detector
|
|
6
|
-
React.useEffect(function () {
|
|
7
|
-
var updateBreakpoint = function () {
|
|
8
|
-
var width = window.innerWidth;
|
|
9
|
-
var breakpoint = '';
|
|
10
|
-
if (width <= 576)
|
|
11
|
-
breakpoint = 'XS (≤576px)';
|
|
12
|
-
else if (width <= 768)
|
|
13
|
-
breakpoint = 'SM (577-768px)';
|
|
14
|
-
else if (width <= 992)
|
|
15
|
-
breakpoint = 'MD (769-992px)';
|
|
16
|
-
else if (width <= 1200)
|
|
17
|
-
breakpoint = 'LG (993-1200px)';
|
|
18
|
-
else if (width <= 1400)
|
|
19
|
-
breakpoint = 'XL (1201-1400px)';
|
|
20
|
-
else
|
|
21
|
-
breakpoint = 'XXL (≥1401px)';
|
|
22
|
-
setCurrentBreakpoint(breakpoint);
|
|
23
|
-
};
|
|
24
|
-
updateBreakpoint();
|
|
25
|
-
window.addEventListener('resize', updateBreakpoint);
|
|
26
|
-
return function () { return window.removeEventListener('resize', updateBreakpoint); };
|
|
27
|
-
}, []);
|
|
28
|
-
return (_jsxs("div", { style: {
|
|
29
|
-
position: 'fixed',
|
|
30
|
-
bottom: '10px',
|
|
31
|
-
right: '10px',
|
|
32
|
-
background: '#333',
|
|
33
|
-
color: 'white',
|
|
34
|
-
padding: '10px',
|
|
35
|
-
borderRadius: '4px',
|
|
36
|
-
zIndex: 9999999
|
|
37
|
-
}, children: ["Current: ", currentBreakpoint] }));
|
|
38
|
-
};
|
|
39
|
-
export default DevelopGridComponent;
|
|
File without changes
|
|
File without changes
|