@vuu-ui/vuu-table-extras 0.13.71 → 0.13.72
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/cjs/freeze-control/FreezeControl.css.js +1 -1
- package/cjs/freeze-control/FreezeControl.js +10 -3
- package/cjs/freeze-control/FreezeControl.js.map +1 -1
- package/cjs/freeze-control/freezeControlBadge.js +10 -0
- package/cjs/freeze-control/freezeControlBadge.js.map +1 -0
- package/esm/freeze-control/FreezeControl.css.js +1 -1
- package/esm/freeze-control/FreezeControl.js +10 -3
- package/esm/freeze-control/FreezeControl.js.map +1 -1
- package/esm/freeze-control/freezeControlBadge.js +8 -0
- package/esm/freeze-control/freezeControlBadge.js.map +1 -0
- package/package.json +11 -11
- package/types/freeze-control/freezeControlBadge.d.ts +11 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
3
|
+
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n position: relative;\n line-height: 1;\n overflow: visible;\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n.FreezeControl-customBadge[data-overflow=\"true\"] {\n padding-right: 0.2em;\n}\n\n.FreezeControl-plus {\n font-size: 0.8em;\n line-height: 1;\n position: absolute;\n top: 0.1em;\n right: -0.05em;\n font-weight: bold;\n color: inherit;\n pointer-events: none;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = freezeControlCss;
|
|
6
6
|
//# sourceMappingURL=FreezeControl.css.js.map
|
|
@@ -7,6 +7,7 @@ var core = require('@salt-ds/core');
|
|
|
7
7
|
var useFreezeControl = require('./useFreezeControl.js');
|
|
8
8
|
var react = require('react');
|
|
9
9
|
var cx = require('clsx');
|
|
10
|
+
var freezeControlBadge = require('./freezeControlBadge.js');
|
|
10
11
|
var FreezeControl$1 = require('./FreezeControl.css.js');
|
|
11
12
|
|
|
12
13
|
const FLASH_DURATION_MS = 3e3;
|
|
@@ -38,6 +39,7 @@ const FreezeControl = ({
|
|
|
38
39
|
}, FLASH_DURATION_MS);
|
|
39
40
|
}
|
|
40
41
|
}, [newRecordCount, isFrozen]);
|
|
42
|
+
const { badgeValue, isOverflow } = freezeControlBadge.calculateBadgeState(newRecordCount);
|
|
41
43
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
42
44
|
"div",
|
|
43
45
|
{
|
|
@@ -78,13 +80,18 @@ const FreezeControl = ({
|
|
|
78
80
|
),
|
|
79
81
|
isFrozen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `FreezeControl-newOrders`, children: [
|
|
80
82
|
"New Orders",
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.
|
|
83
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
82
84
|
"div",
|
|
83
85
|
{
|
|
84
86
|
className: cx(`FreezeControl-customBadge`, {
|
|
85
|
-
[`FreezeControl-customBadge-flashing`]: isFlashing
|
|
87
|
+
[`FreezeControl-customBadge-flashing`]: isFlashing,
|
|
88
|
+
[`FreezeControl-customBadge-overflow`]: isOverflow
|
|
86
89
|
}),
|
|
87
|
-
|
|
90
|
+
"data-overflow": isOverflow ? "true" : void 0,
|
|
91
|
+
children: [
|
|
92
|
+
badgeValue,
|
|
93
|
+
isOverflow && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "FreezeControl-plus", children: "+" })
|
|
94
|
+
]
|
|
88
95
|
}
|
|
89
96
|
)
|
|
90
97
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n })}\n >\n {
|
|
1
|
+
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\nimport { calculateBadgeState } from \"./freezeControlBadge\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n const { badgeValue, isOverflow } = calculateBadgeState(newRecordCount);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n [`FreezeControl-customBadge-overflow`]: isOverflow,\n })}\n data-overflow={isOverflow ? \"true\" : undefined}\n >\n {badgeValue}\n {isOverflow && <span className=\"FreezeControl-plus\">+</span>}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","freezeControlCss","useFreezeControl","useState","useRef","useEffect","calculateBadgeState","jsx","jsxs","ToggleButtonGroup","ToggleButton"],"mappings":"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"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const calculateBadgeState = (newRecordCount) => {
|
|
4
|
+
const badgeValue = Math.min(newRecordCount, 99);
|
|
5
|
+
const isOverflow = newRecordCount > 99;
|
|
6
|
+
return { badgeValue, isOverflow };
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
exports.calculateBadgeState = calculateBadgeState;
|
|
10
|
+
//# sourceMappingURL=freezeControlBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"freezeControlBadge.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/freezeControlBadge.ts"],"sourcesContent":["/**\n * Calculates the badge value and overflow state for FreezeControl\n * It should max at 99, and when this is exceeded show 99+\n *\n * @param newRecordCount - int of new records\n * @returns An object with `badgeValue` (the displayed number, max 99) and `isOverflow` (whether count exceeds 99)\n */\nexport const calculateBadgeState = (newRecordCount: number) => {\n const badgeValue = Math.min(newRecordCount, 99);\n const isOverflow = newRecordCount > 99;\n return { badgeValue, isOverflow };\n};\n"],"names":[],"mappings":";;AAOa,MAAA,mBAAA,GAAsB,CAAC,cAA2B,KAAA;AAC7D,EAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,cAAA,EAAgB,EAAE,CAAA;AAC9C,EAAA,MAAM,aAAa,cAAiB,GAAA,EAAA;AACpC,EAAO,OAAA,EAAE,YAAY,UAAW,EAAA;AAClC;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
1
|
+
var freezeControlCss = ".FreezeControl {\n display: inline-flex;\n --freeze-control-flash-duration: 0.25s;\n --freeze-control-active-button-color: var(--salt-palette-error-background);\n --freeze-control-badge-color: var(--salt-palette-success-background);\n\n .FreezeControl-buttonRow {\n background-color: var(--salt-container-secondary-background);\n border: 1px solid var(--salt-container-secondary-borderColor);\n border-radius: 50px;\n display: flex;\n height: var(--salt-size-base);\n overflow: hidden;\n }\n\n .FreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .FreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .FreezeControl-buttonWrapper-active .saltToggleButton {\n background-color: var(--freeze-control-active-button-color);\n color: var(--salt-actionable-secondary-foreground-active);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup {\n background-color: var(--salt-container-secondary-background);\n }\n\n .saltToggleButtonGroup.vuuStateButtonGroup .saltToggleButton {\n background-color: transparent;\n }\n\n .FreezeControl-customBadge {\n background-color: transparent;\n border-radius: 50%;\n color: var(--salt-text-primary-foreground);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--salt-text-fontSize);\n font-weight: bold;\n height: var(--salt-size-base);\n width: var(--salt-size-base);\n min-width: var(--salt-size-base);\n margin-left: var(--salt-spacing-100);\n position: relative;\n line-height: 1;\n overflow: visible;\n }\n\n .FreezeControl-newOrders {\n align-items: center;\n background-color: var(--salt-container-secondary-background);\n display: flex;\n font-size: var(--salt-text-fontSize);\n padding: 0 var(--salt-spacing-200);\n }\n}\n\n.FreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n.FreezeControl-customBadge[data-overflow=\"true\"] {\n padding-right: 0.2em;\n}\n\n.FreezeControl-plus {\n font-size: 0.8em;\n line-height: 1;\n position: absolute;\n top: 0.1em;\n right: -0.05em;\n font-weight: bold;\n color: inherit;\n pointer-events: none;\n}\n\n@keyframes flashGreenRed {\n 0% {\n background-color: var(--freeze-control-badge-color);\n }\n 50% {\n background-color: transparent;\n }\n 100% {\n background-color: var(--freeze-control-badge-color);\n }\n}\n";
|
|
2
2
|
|
|
3
3
|
export { freezeControlCss as default };
|
|
4
4
|
//# sourceMappingURL=FreezeControl.css.js.map
|
|
@@ -5,6 +5,7 @@ import { ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
|
|
|
5
5
|
import { useFreezeControl } from './useFreezeControl.js';
|
|
6
6
|
import { useState, useRef, useEffect } from 'react';
|
|
7
7
|
import cx from 'clsx';
|
|
8
|
+
import { calculateBadgeState } from './freezeControlBadge.js';
|
|
8
9
|
import freezeControlCss from './FreezeControl.css.js';
|
|
9
10
|
|
|
10
11
|
const FLASH_DURATION_MS = 3e3;
|
|
@@ -36,6 +37,7 @@ const FreezeControl = ({
|
|
|
36
37
|
}, FLASH_DURATION_MS);
|
|
37
38
|
}
|
|
38
39
|
}, [newRecordCount, isFrozen]);
|
|
40
|
+
const { badgeValue, isOverflow } = calculateBadgeState(newRecordCount);
|
|
39
41
|
return /* @__PURE__ */ jsx(
|
|
40
42
|
"div",
|
|
41
43
|
{
|
|
@@ -76,13 +78,18 @@ const FreezeControl = ({
|
|
|
76
78
|
),
|
|
77
79
|
isFrozen && /* @__PURE__ */ jsxs("div", { className: `FreezeControl-newOrders`, children: [
|
|
78
80
|
"New Orders",
|
|
79
|
-
/* @__PURE__ */
|
|
81
|
+
/* @__PURE__ */ jsxs(
|
|
80
82
|
"div",
|
|
81
83
|
{
|
|
82
84
|
className: cx(`FreezeControl-customBadge`, {
|
|
83
|
-
[`FreezeControl-customBadge-flashing`]: isFlashing
|
|
85
|
+
[`FreezeControl-customBadge-flashing`]: isFlashing,
|
|
86
|
+
[`FreezeControl-customBadge-overflow`]: isOverflow
|
|
84
87
|
}),
|
|
85
|
-
|
|
88
|
+
"data-overflow": isOverflow ? "true" : void 0,
|
|
89
|
+
children: [
|
|
90
|
+
badgeValue,
|
|
91
|
+
isOverflow && /* @__PURE__ */ jsx("span", { className: "FreezeControl-plus", children: "+" })
|
|
92
|
+
]
|
|
86
93
|
}
|
|
87
94
|
)
|
|
88
95
|
] })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n })}\n >\n {
|
|
1
|
+
{"version":3,"file":"FreezeControl.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/FreezeControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useFreezeControl, type FreezeProps } from \"./useFreezeControl\";\nimport { HTMLAttributes, useEffect, useRef, useState } from \"react\";\nimport cx from \"clsx\";\nimport { calculateBadgeState } from \"./freezeControlBadge\";\n\nimport freezeControlCss from \"./FreezeControl.css\";\n\n// Duration to keep flashing after last new record (in milliseconds)\nconst FLASH_DURATION_MS = 3000;\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Duration of the flash animation for the badge (in seconds).\n * @default 0.25\n */\n flashDuration?: number;\n}\n\nexport const FreezeControl = ({\n dataSource,\n className,\n flashDuration = 0.25,\n ...htmlAttributes\n}: FreezeControlProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-freeze-control\",\n css: freezeControlCss,\n window: targetWindow,\n });\n\n const { isFrozen, newRecordCount, onToggleChange } = useFreezeControl({\n dataSource,\n });\n\n const [isFlashing, setIsFlashing] = useState(false);\n const flashTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n // Check if we're frozen and have new records and set the flash with a 3 second timeout\n useEffect(() => {\n if (isFrozen && newRecordCount > 0) {\n setIsFlashing(true);\n\n if (flashTimeoutRef.current) {\n clearTimeout(flashTimeoutRef.current);\n }\n\n flashTimeoutRef.current = setTimeout(() => {\n setIsFlashing(false);\n }, FLASH_DURATION_MS);\n }\n }, [newRecordCount, isFrozen]);\n\n const { badgeValue, isOverflow } = calculateBadgeState(newRecordCount);\n\n return (\n <div\n {...htmlAttributes}\n className={cx(\"FreezeControl\", className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`FreezeControl-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`FreezeControl-buttonWrapper`, {\n [`FreezeControl-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`FreezeControl-newOrders`}>\n New Orders\n <div\n className={cx(`FreezeControl-customBadge`, {\n [`FreezeControl-customBadge-flashing`]: isFlashing,\n [`FreezeControl-customBadge-overflow`]: isOverflow,\n })}\n data-overflow={isOverflow ? \"true\" : undefined}\n >\n {badgeValue}\n {isOverflow && <span className=\"FreezeControl-plus\">+</span>}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
const calculateBadgeState = (newRecordCount) => {
|
|
2
|
+
const badgeValue = Math.min(newRecordCount, 99);
|
|
3
|
+
const isOverflow = newRecordCount > 99;
|
|
4
|
+
return { badgeValue, isOverflow };
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
export { calculateBadgeState };
|
|
8
|
+
//# sourceMappingURL=freezeControlBadge.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"freezeControlBadge.js","sources":["../../../../packages/vuu-table-extras/src/freeze-control/freezeControlBadge.ts"],"sourcesContent":["/**\n * Calculates the badge value and overflow state for FreezeControl\n * It should max at 99, and when this is exceeded show 99+\n *\n * @param newRecordCount - int of new records\n * @returns An object with `badgeValue` (the displayed number, max 99) and `isOverflow` (whether count exceeds 99)\n */\nexport const calculateBadgeState = (newRecordCount: number) => {\n const badgeValue = Math.min(newRecordCount, 99);\n const isOverflow = newRecordCount > 99;\n return { badgeValue, isOverflow };\n};\n"],"names":[],"mappings":"AAOa,MAAA,mBAAA,GAAsB,CAAC,cAA2B,KAAA;AAC7D,EAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,cAAA,EAAgB,EAAE,CAAA;AAC9C,EAAA,MAAM,aAAa,cAAiB,GAAA,EAAA;AACpC,EAAO,OAAA,EAAE,YAAY,UAAW,EAAA;AAClC;;;;"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.
|
|
2
|
+
"version": "0.13.72",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-filter-types": "0.13.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "0.13.
|
|
6
|
+
"@vuu-ui/vuu-filter-types": "0.13.72",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "0.13.72"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@vuu-ui/vuu-codemirror": "0.13.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "0.13.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "0.13.
|
|
13
|
-
"@vuu-ui/vuu-table-types": "0.13.
|
|
14
|
-
"@vuu-ui/vuu-popups": "0.13.
|
|
15
|
-
"@vuu-ui/vuu-table": "0.13.
|
|
16
|
-
"@vuu-ui/vuu-utils": "0.13.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "0.13.
|
|
10
|
+
"@vuu-ui/vuu-codemirror": "0.13.72",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "0.13.72",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "0.13.72",
|
|
13
|
+
"@vuu-ui/vuu-table-types": "0.13.72",
|
|
14
|
+
"@vuu-ui/vuu-popups": "0.13.72",
|
|
15
|
+
"@vuu-ui/vuu-table": "0.13.72",
|
|
16
|
+
"@vuu-ui/vuu-utils": "0.13.72",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "0.13.72",
|
|
18
18
|
"@lezer/lr": "1.4.2",
|
|
19
19
|
"@salt-ds/core": "1.48.0",
|
|
20
20
|
"@salt-ds/styles": "0.2.1",
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Calculates the badge value and overflow state for FreezeControl
|
|
3
|
+
* It should max at 99, and when this is exceeded show 99+
|
|
4
|
+
*
|
|
5
|
+
* @param newRecordCount - int of new records
|
|
6
|
+
* @returns An object with `badgeValue` (the displayed number, max 99) and `isOverflow` (whether count exceeds 99)
|
|
7
|
+
*/
|
|
8
|
+
export declare const calculateBadgeState: (newRecordCount: number) => {
|
|
9
|
+
badgeValue: number;
|
|
10
|
+
isOverflow: boolean;
|
|
11
|
+
};
|