server-time-timer-yolabs-ui 1.0.18 → 1.0.20
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/ui/ServerTimerUI.js +29 -5
- package/dist/ui/types/index.d.ts +1 -1
- package/package.json +10 -9
package/dist/ui/ServerTimerUI.js
CHANGED
|
@@ -8,14 +8,38 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
const TimerContainer_1 = __importDefault(require("./components/TimerContainer"));
|
|
9
9
|
const TimerUnit_1 = __importDefault(require("./components/TimerUnit"));
|
|
10
10
|
const useServerTimer_1 = require("../hooks/useServerTimer");
|
|
11
|
-
const ServerTimerUI = ({ endTime, size = 'md', layout = 'horizontal', theme = 'light', customColors = {}, showUnits = { days: true, hours: true, minutes: true, seconds: true }, onEnd, className, }) => {
|
|
11
|
+
const ServerTimerUI = ({ endTime, size = 'md', layout = 'horizontal', theme = 'light', showLabels = true, innerShape = 'rectangle', equalUnitSize = true, customColors = {}, showUnits = { days: true, hours: true, minutes: true, seconds: true }, onEnd, className, }) => {
|
|
12
12
|
const time = (0, useServerTimer_1.useServerTimer)(endTime, onEnd);
|
|
13
|
+
// SharePoint Fluent UI Color Palettes
|
|
13
14
|
const themeColors = {
|
|
14
|
-
light: {
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
light: {
|
|
16
|
+
background: '#ffffff',
|
|
17
|
+
text: '#323130',
|
|
18
|
+
unitBackground: '#f3f2f1', // NeutralLighter
|
|
19
|
+
},
|
|
20
|
+
dark: {
|
|
21
|
+
background: '#201f1e', // NeutralDark
|
|
22
|
+
text: '#ffffff',
|
|
23
|
+
unitBackground: '#323130', // NeutralPrimary
|
|
24
|
+
},
|
|
25
|
+
brand: {
|
|
26
|
+
background: '#fef9f3',
|
|
27
|
+
text: '#323130',
|
|
28
|
+
unitBackground: '#fffbdd', // Soft brand tint
|
|
29
|
+
},
|
|
17
30
|
};
|
|
18
31
|
const colors = Object.assign(Object.assign({}, themeColors[theme]), customColors);
|
|
19
|
-
|
|
32
|
+
/**
|
|
33
|
+
* Automatically maps the container size to the number size
|
|
34
|
+
* to maintain SharePoint visual hierarchy.
|
|
35
|
+
*/
|
|
36
|
+
const getNumberSize = () => {
|
|
37
|
+
if (size === 'sm')
|
|
38
|
+
return 'sm';
|
|
39
|
+
if (size === 'lg')
|
|
40
|
+
return 'lg';
|
|
41
|
+
return 'md';
|
|
42
|
+
};
|
|
43
|
+
return ((0, jsx_runtime_1.jsxs)(TimerContainer_1.default, { size: size, layout: layout, background: colors.background, color: colors.text, className: className, children: [showUnits.days && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Days", value: time.days, size: size, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize })), showUnits.hours && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Hours", value: time.hours, size: size, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize })), showUnits.minutes && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Minutes", value: time.minutes, size: size, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize })), showUnits.seconds && ((0, jsx_runtime_1.jsx)(TimerUnit_1.default, { label: "Seconds", value: time.seconds, size: size, numberSize: getNumberSize(), background: colors.unitBackground, color: colors.text, showLabel: showLabels, shape: innerShape, equalSize: equalUnitSize }))] }));
|
|
20
44
|
};
|
|
21
45
|
exports.ServerTimerUI = ServerTimerUI;
|
package/dist/ui/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "server-time-timer-yolabs-ui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.20",
|
|
4
|
+
"description": "SharePoint styled React countdown timer UI for server-time-timer-yoLabs",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"files": [
|
|
@@ -12,9 +12,8 @@
|
|
|
12
12
|
"prepublishOnly": "npm run build"
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"react": "
|
|
16
|
-
"react-dom": "
|
|
17
|
-
"server-time-timer-yoLabs": "^1.0.0"
|
|
15
|
+
"react": ">=16.8.0",
|
|
16
|
+
"react-dom": ">=16.8.0"
|
|
18
17
|
},
|
|
19
18
|
"keywords": [
|
|
20
19
|
"timer",
|
|
@@ -36,8 +35,10 @@
|
|
|
36
35
|
"server-time-timer-yolabs": "^1.0.4"
|
|
37
36
|
},
|
|
38
37
|
"devDependencies": {
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
38
|
+
"react": "^18.2.0",
|
|
39
|
+
"react-dom": "^18.2.0",
|
|
40
|
+
"@types/react": "^18.2.0",
|
|
41
|
+
"@types/react-dom": "^18.2.0",
|
|
42
|
+
"typescript": "^5.0.0"
|
|
42
43
|
}
|
|
43
|
-
}
|
|
44
|
+
}
|