@longline/aqua-ui 1.0.212 → 1.0.214
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/hooks/useInterval/index.d.ts +1 -0
- package/hooks/useInterval/index.js +1 -0
- package/hooks/useInterval/useInterval.d.ts +32 -0
- package/hooks/useInterval/useInterval.js +49 -0
- package/inputs/Editor/Editor.js +4 -4
- package/inputs/Editor/menu/MenuBar.d.ts +1 -1
- package/inputs/Editor/menu/MenuBar.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useInterval } from './useInterval';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useInterval } from './useInterval';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A custom React hook that repeatedly calls a callback at a specified interval.
|
|
3
|
+
*
|
|
4
|
+
* `useInterval` ensures that the most recent version of the callback is used,
|
|
5
|
+
* avoiding stale closures that can occur in traditional `setInterval` usage
|
|
6
|
+
* in React.
|
|
7
|
+
*
|
|
8
|
+
* This hook is useful for:
|
|
9
|
+
* - Polling data every few seconds
|
|
10
|
+
* - Running animations or countdowns
|
|
11
|
+
* - Periodic background work
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* ```tsx
|
|
15
|
+
* const [count, setCount] = useState(0);
|
|
16
|
+
*
|
|
17
|
+
* useInterval(() => {
|
|
18
|
+
* setCount(prev => prev + 1);
|
|
19
|
+
* }, 1000); // Increment every second
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* @param callback - A function to be executed at each interval tick.
|
|
23
|
+
* @param delay - The delay in milliseconds between ticks. If `null`, the
|
|
24
|
+
* interval is paused.
|
|
25
|
+
*
|
|
26
|
+
* @remarks
|
|
27
|
+
* - Uses `useRef` to persist the latest version of the callback.
|
|
28
|
+
* - Automatically clears the interval on unmount or if the delay changes.
|
|
29
|
+
* - Setting `delay` to `null` or `undefined` disables the interval.
|
|
30
|
+
*/
|
|
31
|
+
declare function useInterval(callback: () => void, delay: number | null): void;
|
|
32
|
+
export { useInterval };
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A custom React hook that repeatedly calls a callback at a specified interval.
|
|
4
|
+
*
|
|
5
|
+
* `useInterval` ensures that the most recent version of the callback is used,
|
|
6
|
+
* avoiding stale closures that can occur in traditional `setInterval` usage
|
|
7
|
+
* in React.
|
|
8
|
+
*
|
|
9
|
+
* This hook is useful for:
|
|
10
|
+
* - Polling data every few seconds
|
|
11
|
+
* - Running animations or countdowns
|
|
12
|
+
* - Periodic background work
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* const [count, setCount] = useState(0);
|
|
17
|
+
*
|
|
18
|
+
* useInterval(() => {
|
|
19
|
+
* setCount(prev => prev + 1);
|
|
20
|
+
* }, 1000); // Increment every second
|
|
21
|
+
* ```
|
|
22
|
+
*
|
|
23
|
+
* @param callback - A function to be executed at each interval tick.
|
|
24
|
+
* @param delay - The delay in milliseconds between ticks. If `null`, the
|
|
25
|
+
* interval is paused.
|
|
26
|
+
*
|
|
27
|
+
* @remarks
|
|
28
|
+
* - Uses `useRef` to persist the latest version of the callback.
|
|
29
|
+
* - Automatically clears the interval on unmount or if the delay changes.
|
|
30
|
+
* - Setting `delay` to `null` or `undefined` disables the interval.
|
|
31
|
+
*/
|
|
32
|
+
function useInterval(callback, delay) {
|
|
33
|
+
// Store the latest callback in a ref so it's always up to date
|
|
34
|
+
var savedCallback = React.useRef();
|
|
35
|
+
// Update the ref on every render if the callback changes
|
|
36
|
+
React.useEffect(function () {
|
|
37
|
+
savedCallback.current = callback;
|
|
38
|
+
}, [callback]);
|
|
39
|
+
// Set up the interval
|
|
40
|
+
React.useEffect(function () {
|
|
41
|
+
// If delay is null, don't set the interval
|
|
42
|
+
if (delay === null || delay === undefined)
|
|
43
|
+
return function () { };
|
|
44
|
+
var tick = function () { var _a; return (_a = savedCallback.current) === null || _a === void 0 ? void 0 : _a.call(savedCallback); };
|
|
45
|
+
var id = setInterval(tick, delay);
|
|
46
|
+
return function () { return clearInterval(id); }; // Cleanup on unmount or delay change
|
|
47
|
+
}, [delay]);
|
|
48
|
+
}
|
|
49
|
+
export { useInterval };
|
package/inputs/Editor/Editor.js
CHANGED
|
@@ -26,6 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled, { css, keyframes } from 'styled-components';
|
|
29
|
+
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
|
|
29
30
|
import { useEditor, EditorContent } from '@tiptap/react';
|
|
30
31
|
import StarterKit from '@tiptap/starter-kit';
|
|
31
32
|
import { MarkElement } from './extensions/MarkElement';
|
|
@@ -83,18 +84,17 @@ var EditorBase = function (props) {
|
|
|
83
84
|
}; }, []);
|
|
84
85
|
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, flex: props.flex },
|
|
85
86
|
React.createElement("div", { className: props.className, ref: wrapperRef },
|
|
86
|
-
React.createElement(
|
|
87
|
+
React.createElement(OverlayScrollbarsComponent, { className: "scroller ".concat(fullscreen ? 'fullscreen' : ''), defer: true, options: { scrollbars: { theme: 'os-theme-dark', autoHide: 'leave' } } },
|
|
87
88
|
!props.disabled && !props.ghost &&
|
|
88
89
|
React.createElement(MenuBar, { allowFullscreen: props.allowFullscreen, codeButtons: props.codeButtons, fullscreen: fullscreen, editor: editor, onToggleFullscreen: handleToggleFullscreen, openAIurl: props.openAIurl, assemblyAIurl: props.assemblyAIurl }),
|
|
89
90
|
React.createElement(EditorContent, { editor: editor, ref: setRef })))));
|
|
90
91
|
};
|
|
91
92
|
var pulse = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n from {\n opacity: .15;\n }\n to {\n opacity: 1;\n }\n"], ["\n from {\n opacity: .15;\n }\n to {\n opacity: 1;\n }\n"])));
|
|
92
|
-
var
|
|
93
|
-
var EditorStyled = styled(EditorBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n width: 100%;\n background-color: ", ";\n\n // Editor has a fixed height, unless it flexes; then it will fill its \n // container vertically.\n height: 120px;\n ", "\n"], ["\n position: relative;\n box-sizing: border-box;\n width: 100%;\n background-color: ", ";\n\n // Editor has a fixed height, unless it flexes; then it will fill its \n // container vertically.\n height: 120px;\n ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.flex && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 100%; \n "], ["\n height: 100%; \n "]))); });
|
|
93
|
+
var EditorStyled = styled(EditorBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n box-sizing: border-box;\n width: 100%;\n background-color: ", ";\n\n // Editor has a fixed height, unless it flexes; then it will fill its \n // container vertically.\n height: 120px;\n ", "\n\n .scroller {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: scroll;\n\n &.fullscreen {\n left: 32px;\n top: 32px;\n right: 32px;\n bottom: 32px;\n } \n }\n\n .tiptap {\n border: none;\n outline: none;\n // Define colors for placeholder text.\n ::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n // Define colors for selected text.\n ::selection {\n background-color: ", ";\n color: ", ";\n } \n }\n\n // Content styles:\n .tiptap {\n code {\n background-color: ", ";\n color: ", ";\n outline: solid 1px ", ";\n border-radius: 4px;\n padding: 0 4px 0px 4px;\n }\n\n pre {\n background-color: ", ";\n border-radius: 4px;\n color: ", ";\n outline: solid 1px ", ";\n padding: 8px 12px 8px 12px;\n code {\n background-color: transparent;\n outline: none;\n border-radius: none;\n padding: 0 0 0 0;\n }\n }\n\n // The 'mark' is used to show a small animated circle inside the last\n // element being rendered from AI input.\n mark {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n color: transparent;\n background-color: ", ";\n animation: ", " 1s infinite alternate ease-in-out;\n vertical-align: middle;\n margin-left: 4px;\n margin-right: 4px;\n }\n } \n"], ["\n position: relative;\n box-sizing: border-box;\n width: 100%;\n background-color: ", ";\n\n // Editor has a fixed height, unless it flexes; then it will fill its \n // container vertically.\n height: 120px;\n ", "\n\n .scroller {\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: scroll;\n\n &.fullscreen {\n left: 32px;\n top: 32px;\n right: 32px;\n bottom: 32px;\n } \n }\n\n .tiptap {\n border: none;\n outline: none;\n // Define colors for placeholder text.\n ::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n // Define colors for selected text.\n ::selection {\n background-color: ", ";\n color: ", ";\n } \n }\n\n // Content styles:\n .tiptap {\n code {\n background-color: ", ";\n color: ", ";\n outline: solid 1px ", ";\n border-radius: 4px;\n padding: 0 4px 0px 4px;\n }\n\n pre {\n background-color: ", ";\n border-radius: 4px;\n color: ", ";\n outline: solid 1px ", ";\n padding: 8px 12px 8px 12px;\n code {\n background-color: transparent;\n outline: none;\n border-radius: none;\n padding: 0 0 0 0;\n }\n }\n\n // The 'mark' is used to show a small animated circle inside the last\n // element being rendered from AI input.\n mark {\n display: inline-block;\n width: 10px;\n height: 10px;\n border-radius: 50%;\n color: transparent;\n background-color: ", ";\n animation: ", " 1s infinite alternate ease-in-out;\n vertical-align: middle;\n margin-left: 4px;\n margin-right: 4px;\n }\n } \n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.flex && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 100%; \n "], ["\n height: 100%; \n "]))); }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.colors.primary[1]; }, pulse);
|
|
94
94
|
var Editor = function (_a) {
|
|
95
95
|
var _b = _a.fluid, fluid = _b === void 0 ? false : _b, _c = _a.error, error = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.transparent, transparent = _e === void 0 ? false : _e, _f = _a.ghost, ghost = _f === void 0 ? false : _f, _g = _a.allowFullscreen, allowFullscreen = _g === void 0 ? false : _g, _h = _a.codeButtons, codeButtons = _h === void 0 ? false : _h, props = __rest(_a, ["fluid", "error", "disabled", "transparent", "ghost", "allowFullscreen", "codeButtons"]);
|
|
96
96
|
return React.createElement(EditorStyled, __assign({ fluid: fluid, error: error, disabled: disabled, transparent: transparent, ghost: ghost, allowFullscreen: allowFullscreen, codeButtons: codeButtons }, props));
|
|
97
97
|
};
|
|
98
98
|
Editor.displayName = 'Editor';
|
|
99
99
|
export { Editor };
|
|
100
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
100
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -9,7 +9,7 @@ interface IProps {
|
|
|
9
9
|
editor: Editor;
|
|
10
10
|
/** Allow fullscreen mode? This will add a toolbar button. */
|
|
11
11
|
allowFullscreen?: boolean;
|
|
12
|
-
/** Is editor currently fullscreen?
|
|
12
|
+
/** Is editor currently fullscreen? */
|
|
13
13
|
fullscreen?: boolean;
|
|
14
14
|
/**
|
|
15
15
|
* If set, adds code and code block buttons to MenuBar.
|
|
@@ -39,7 +39,7 @@ var MenuBarBase = function (props) {
|
|
|
39
39
|
props.allowFullscreen &&
|
|
40
40
|
React.createElement(FullscreenButton, { fullscreen: props.fullscreen, editor: props.editor, onClick: props.onToggleFullscreen }))));
|
|
41
41
|
};
|
|
42
|
-
var MenuBar = styled(MenuBarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Keep MenuBar at top of editor; it must not scroll when the editor\n // content scrolls.\n position: sticky;\n left:
|
|
42
|
+
var MenuBar = styled(MenuBarBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Keep MenuBar at top of editor; it must not scroll when the editor\n // content scrolls.\n position: sticky;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n border-bottom: solid 1px ", ";\n"], ["\n // Keep MenuBar at top of editor; it must not scroll when the editor\n // content scrolls.\n position: sticky;\n left: 0;\n top: 0;\n z-index: 1;\n background-color: ", ";\n border-bottom: solid 1px ", ";\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.neutral[80]; });
|
|
43
43
|
var Buttons = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border-radius: 4px;\n padding: 2px;\n\n // Flex-align buttons and separators:\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 4px;\n"], ["\n border-radius: 4px;\n padding: 2px;\n\n // Flex-align buttons and separators:\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 4px;\n"])));
|
|
44
44
|
export { MenuBar };
|
|
45
45
|
var templateObject_1, templateObject_2;
|