@vuu-ui/vuu-table-extras 2.1.9 → 2.1.10
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 +3 -2
- package/cjs/freeze-control/FreezeControl.js.map +1 -1
- package/esm/freeze-control/FreezeControl.css.js +1 -1
- package/esm/freeze-control/FreezeControl.js +3 -2
- package/esm/freeze-control/FreezeControl.js.map +1 -1
- package/package.json +11 -11
- package/types/freeze-control/FreezeControl.d.ts +6 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var freezeControlCss = ".vuuFreezeControl {\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 height: fit-content;\n\n .vuuFreezeControl-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 overflow: hidden;\n white-space: nowrap;\n }\n\n .vuuFreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .vuuFreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .saltToggleButtonGroup {\n padding: var(--vuuFreezeControl-padding, 0px);\n }\n\n .vuuFreezeControl-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 .vuuFreezeControl-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 .vuuFreezeControl-
|
|
3
|
+
var freezeControlCss = ".vuuFreezeControl {\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 height: fit-content;\n\n .vuuFreezeControl-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 overflow: hidden;\n white-space: nowrap;\n }\n\n .vuuFreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .vuuFreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .saltToggleButtonGroup {\n padding: var(--vuuFreezeControl-padding, 0px);\n }\n\n .vuuFreezeControl-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 .vuuFreezeControl-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 .vuuFreezeControl-newItems {\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.vuuFreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n.vuuFreezeControl-customBadge[data-overflow=\"true\"] {\n padding-right: 0.2em;\n}\n\n.vuuFreezeControl-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
|
|
@@ -15,6 +15,7 @@ const classBase = "vuuFreezeControl";
|
|
|
15
15
|
const FreezeControl = ({
|
|
16
16
|
dataSource,
|
|
17
17
|
className,
|
|
18
|
+
newItemsLabel = "New Orders",
|
|
18
19
|
flashDuration = 0.25,
|
|
19
20
|
...htmlAttributes
|
|
20
21
|
}) => {
|
|
@@ -79,8 +80,8 @@ const FreezeControl = ({
|
|
|
79
80
|
]
|
|
80
81
|
}
|
|
81
82
|
),
|
|
82
|
-
isFrozen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-
|
|
83
|
-
|
|
83
|
+
isFrozen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-newItems`, children: [
|
|
84
|
+
newItemsLabel,
|
|
84
85
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
85
86
|
"div",
|
|
86
87
|
{
|
|
@@ -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\";\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\nconst classBase = \"vuuFreezeControl\";\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(classBase, className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`${classBase}-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`${classBase}-
|
|
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\nconst classBase = \"vuuFreezeControl\";\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Label shown when the table is frozen next to the new record badge.\n * @default \"New Orders\"\n */\n newItemsLabel?: string;\n\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 newItemsLabel = \"New Orders\",\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(classBase, className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`${classBase}-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`${classBase}-newItems`}>\n {newItemsLabel}\n <div\n className={cx(`${classBase}-customBadge`, {\n [`${classBase}-customBadge-flashing`]: isFlashing,\n [`${classBase}-customBadge-overflow`]: isOverflow,\n })}\n data-overflow={isOverflow ? \"true\" : undefined}\n >\n {badgeValue}\n {isOverflow && <span className={`${classBase}-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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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var freezeControlCss = ".vuuFreezeControl {\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 height: fit-content;\n\n .vuuFreezeControl-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 overflow: hidden;\n white-space: nowrap;\n }\n\n .vuuFreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .vuuFreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .saltToggleButtonGroup {\n padding: var(--vuuFreezeControl-padding, 0px);\n }\n\n .vuuFreezeControl-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 .vuuFreezeControl-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 .vuuFreezeControl-
|
|
1
|
+
var freezeControlCss = ".vuuFreezeControl {\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 height: fit-content;\n\n .vuuFreezeControl-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 overflow: hidden;\n white-space: nowrap;\n }\n\n .vuuFreezeControl-buttonWrapper {\n border-radius: 50px;\n padding: 0 var(--salt-spacing-150);\n background-color: var(--salt-container-secondary-background);\n }\n\n .vuuFreezeControl-buttonWrapper-active {\n background-color: var(--freeze-control-active-button-color);\n }\n\n .saltToggleButtonGroup {\n padding: var(--vuuFreezeControl-padding, 0px);\n }\n\n .vuuFreezeControl-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 .vuuFreezeControl-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 .vuuFreezeControl-newItems {\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.vuuFreezeControl-customBadge-flashing {\n animation: flashGreenRed var(--freeze-control-flash-duration, 0.25s)\n steps(1, end) infinite;\n}\n\n.vuuFreezeControl-customBadge[data-overflow=\"true\"] {\n padding-right: 0.2em;\n}\n\n.vuuFreezeControl-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
|
|
@@ -13,6 +13,7 @@ const classBase = "vuuFreezeControl";
|
|
|
13
13
|
const FreezeControl = ({
|
|
14
14
|
dataSource,
|
|
15
15
|
className,
|
|
16
|
+
newItemsLabel = "New Orders",
|
|
16
17
|
flashDuration = 0.25,
|
|
17
18
|
...htmlAttributes
|
|
18
19
|
}) => {
|
|
@@ -77,8 +78,8 @@ const FreezeControl = ({
|
|
|
77
78
|
]
|
|
78
79
|
}
|
|
79
80
|
),
|
|
80
|
-
isFrozen && /* @__PURE__ */ jsxs("div", { className: `${classBase}-
|
|
81
|
-
|
|
81
|
+
isFrozen && /* @__PURE__ */ jsxs("div", { className: `${classBase}-newItems`, children: [
|
|
82
|
+
newItemsLabel,
|
|
82
83
|
/* @__PURE__ */ jsxs(
|
|
83
84
|
"div",
|
|
84
85
|
{
|
|
@@ -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\";\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\nconst classBase = \"vuuFreezeControl\";\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(classBase, className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`${classBase}-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`${classBase}-
|
|
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\nconst classBase = \"vuuFreezeControl\";\n\nexport interface FreezeControlProps\n extends HTMLAttributes<HTMLDivElement>,\n FreezeProps {\n /**\n * Label shown when the table is frozen next to the new record badge.\n * @default \"New Orders\"\n */\n newItemsLabel?: string;\n\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 newItemsLabel = \"New Orders\",\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(classBase, className)}\n style={\n {\n ...htmlAttributes.style,\n \"--freeze-control-flash-duration\": `${flashDuration}s`,\n } as React.CSSProperties\n }\n >\n <div className={`${classBase}-buttonRow`}>\n <ToggleButtonGroup\n className=\"vuuStateButtonGroup\"\n onChange={onToggleChange}\n value={isFrozen ? \"frozen\" : \"live\"}\n >\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: isFrozen,\n })}\n >\n <ToggleButton value=\"frozen\">\n {isFrozen ? \"Frozen\" : \"Freeze\"}\n </ToggleButton>\n </div>\n <div\n className={cx(`${classBase}-buttonWrapper`, {\n [`${classBase}-buttonWrapper-active`]: !isFrozen,\n })}\n >\n <ToggleButton value=\"live\">Active</ToggleButton>\n </div>\n </ToggleButtonGroup>\n {isFrozen && (\n <div className={`${classBase}-newItems`}>\n {newItemsLabel}\n <div\n className={cx(`${classBase}-customBadge`, {\n [`${classBase}-customBadge-flashing`]: isFlashing,\n [`${classBase}-customBadge-overflow`]: isOverflow,\n })}\n data-overflow={isOverflow ? \"true\" : undefined}\n >\n {badgeValue}\n {isOverflow && <span className={`${classBase}-plus`}>+</span>}\n </div>\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAWA,MAAM,iBAAoB,GAAA,GAAA;AAE1B,MAAM,SAAY,GAAA,kBAAA;AAkBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,UAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAgB,GAAA,YAAA;AAAA,EAChB,aAAgB,GAAA,IAAA;AAAA,EAChB,GAAG;AACL,CAA0B,KAAA;AACxB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAA,gBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,cAAgB,EAAA,cAAA,KAAmB,gBAAiB,CAAA;AAAA,IACpE;AAAA,GACD,CAAA;AAED,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAM,MAAA,eAAA,GAAkB,OAA6C,IAAI,CAAA;AAGzE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,QAAA,IAAY,iBAAiB,CAAG,EAAA;AAClC,MAAA,aAAA,CAAc,IAAI,CAAA;AAElB,MAAA,IAAI,gBAAgB,OAAS,EAAA;AAC3B,QAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA;AAAA;AAGtC,MAAgB,eAAA,CAAA,OAAA,GAAU,WAAW,MAAM;AACzC,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA,SAClB,iBAAiB,CAAA;AAAA;AACtB,GACC,EAAA,CAAC,cAAgB,EAAA,QAAQ,CAAC,CAAA;AAE7B,EAAA,MAAM,EAAE,UAAA,EAAY,UAAW,EAAA,GAAI,oBAAoB,cAAc,CAAA;AAErE,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,KACE,EAAA;AAAA,QACE,GAAG,cAAe,CAAA,KAAA;AAAA,QAClB,iCAAA,EAAmC,GAAG,aAAa,CAAA,CAAA;AAAA,OACrD;AAAA,MAGF,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAC1B,UAAA,CAAA,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,qBAAA;AAAA,YACV,QAAU,EAAA,cAAA;AAAA,YACV,KAAA,EAAO,WAAW,QAAW,GAAA,MAAA;AAAA,YAE7B,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAkB,cAAA,CAAA,EAAA;AAAA,oBAC1C,CAAC,CAAA,EAAG,SAAS,CAAA,qBAAA,CAAuB,GAAG;AAAA,mBACxC,CAAA;AAAA,kBAED,8BAAC,YAAa,EAAA,EAAA,KAAA,EAAM,QACjB,EAAA,QAAA,EAAA,QAAA,GAAW,WAAW,QACzB,EAAA;AAAA;AAAA,eACF;AAAA,8BACA,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAkB,cAAA,CAAA,EAAA;AAAA,oBAC1C,CAAC,CAAA,EAAG,SAAS,CAAA,qBAAA,CAAuB,GAAG,CAAC;AAAA,mBACzC,CAAA;AAAA,kBAED,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA,EAAa,KAAM,EAAA,MAAA,EAAO,QAAM,EAAA,QAAA,EAAA;AAAA;AAAA;AACnC;AAAA;AAAA,SACF;AAAA,QACC,4BACE,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,SAAA,CAAA,EAAA,QAAA,EAAA;AAAA,UAAA,aAAA;AAAA,0BACD,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,CAAgB,YAAA,CAAA,EAAA;AAAA,gBACxC,CAAC,CAAA,EAAG,SAAS,CAAA,qBAAA,CAAuB,GAAG,UAAA;AAAA,gBACvC,CAAC,CAAA,EAAG,SAAS,CAAA,qBAAA,CAAuB,GAAG;AAAA,eACxC,CAAA;AAAA,cACD,eAAA,EAAe,aAAa,MAAS,GAAA,KAAA,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,UAAA;AAAA,gBACA,8BAAe,GAAA,CAAA,MAAA,EAAA,EAAK,WAAW,CAAG,EAAA,SAAS,SAAS,QAAC,EAAA,GAAA,EAAA;AAAA;AAAA;AAAA;AACxD,SACF,EAAA;AAAA,OAEJ,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "2.1.
|
|
2
|
+
"version": "2.1.10",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-filter-types": "2.1.
|
|
7
|
-
"@vuu-ui/vuu-protocol-types": "2.1.
|
|
6
|
+
"@vuu-ui/vuu-filter-types": "2.1.10",
|
|
7
|
+
"@vuu-ui/vuu-protocol-types": "2.1.10"
|
|
8
8
|
},
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@vuu-ui/vuu-codemirror": "2.1.
|
|
11
|
-
"@vuu-ui/vuu-data-react": "2.1.
|
|
12
|
-
"@vuu-ui/vuu-data-types": "2.1.
|
|
13
|
-
"@vuu-ui/vuu-table-types": "2.1.
|
|
14
|
-
"@vuu-ui/vuu-popups": "2.1.
|
|
15
|
-
"@vuu-ui/vuu-table": "2.1.
|
|
16
|
-
"@vuu-ui/vuu-utils": "2.1.
|
|
17
|
-
"@vuu-ui/vuu-ui-controls": "2.1.
|
|
10
|
+
"@vuu-ui/vuu-codemirror": "2.1.10",
|
|
11
|
+
"@vuu-ui/vuu-data-react": "2.1.10",
|
|
12
|
+
"@vuu-ui/vuu-data-types": "2.1.10",
|
|
13
|
+
"@vuu-ui/vuu-table-types": "2.1.10",
|
|
14
|
+
"@vuu-ui/vuu-popups": "2.1.10",
|
|
15
|
+
"@vuu-ui/vuu-table": "2.1.10",
|
|
16
|
+
"@vuu-ui/vuu-utils": "2.1.10",
|
|
17
|
+
"@vuu-ui/vuu-ui-controls": "2.1.10",
|
|
18
18
|
"@lezer/lr": "1.4.2",
|
|
19
19
|
"@salt-ds/core": "1.54.1",
|
|
20
20
|
"@salt-ds/lab": "1.0.0-alpha.83",
|
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
import { type FreezeProps } from "./useFreezeControl";
|
|
2
2
|
import { HTMLAttributes } from "react";
|
|
3
3
|
export interface FreezeControlProps extends HTMLAttributes<HTMLDivElement>, FreezeProps {
|
|
4
|
+
/**
|
|
5
|
+
* Label shown when the table is frozen next to the new record badge.
|
|
6
|
+
* @default "New Orders"
|
|
7
|
+
*/
|
|
8
|
+
newItemsLabel?: string;
|
|
4
9
|
/**
|
|
5
10
|
* Duration of the flash animation for the badge (in seconds).
|
|
6
11
|
* @default 0.25
|
|
7
12
|
*/
|
|
8
13
|
flashDuration?: number;
|
|
9
14
|
}
|
|
10
|
-
export declare const FreezeControl: ({ dataSource, className, flashDuration, ...htmlAttributes }: FreezeControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const FreezeControl: ({ dataSource, className, newItemsLabel, flashDuration, ...htmlAttributes }: FreezeControlProps) => import("react/jsx-runtime").JSX.Element;
|