@chayns-components/code-highlighter 5.5.10 → 5.5.14
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/AGENTS.md +10 -0
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js +4 -7
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map +1 -1
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js +5 -14
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js.map +1 -1
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionState.js +66 -0
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionState.js.map +1 -0
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js +4 -7
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.js.map +1 -1
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js +5 -14
- package/lib/esm/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.js.map +1 -1
- package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionState.js +59 -0
- package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionState.js.map +1 -0
- package/lib/types/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.d.ts +2 -8
- package/lib/types/components/code-highlighter/copy-to-clipboard/useStickyActionState.d.ts +2 -0
- package/package.json +4 -4
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js +0 -84
- package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js.map +0 -1
- package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js +0 -77
- package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js.map +0 -1
- package/lib/types/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.d.ts +0 -9
package/AGENTS.md
CHANGED
|
@@ -302,6 +302,16 @@ import { CodeHighlighter } from '@chayns-components/code-highlighter';
|
|
|
302
302
|
/>
|
|
303
303
|
```
|
|
304
304
|
|
|
305
|
+
#### Virtualized Chat Message
|
|
306
|
+
|
|
307
|
+
```tsx
|
|
308
|
+
<CodeHighlighter
|
|
309
|
+
copyButtonText={'Code kopieren'}
|
|
310
|
+
shouldShowLineNumbers
|
|
311
|
+
language={'tsx'}
|
|
312
|
+
/>
|
|
313
|
+
```
|
|
314
|
+
|
|
305
315
|
### Props
|
|
306
316
|
|
|
307
317
|
No prop documentation available.
|
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
var _codeHighlighter = require("../../../types/codeHighlighter");
|
|
12
12
|
var _CopyToClipboard = require("./CopyToClipboard.styles");
|
|
13
13
|
var _textStrings = _interopRequireDefault(require("../../../constants/textStrings"));
|
|
14
|
-
var
|
|
14
|
+
var _useStickyActionState = require("./useStickyActionState");
|
|
15
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
16
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
17
|
const CopyToClipboard = ({
|
|
@@ -21,7 +21,7 @@ const CopyToClipboard = ({
|
|
|
21
21
|
theme
|
|
22
22
|
}) => {
|
|
23
23
|
const actionGroupRef = (0, _react.useRef)(null);
|
|
24
|
-
const
|
|
24
|
+
const isActionGroupSticky = (0, _useStickyActionState.useStickyActionState)(rootRef, actionGroupRef);
|
|
25
25
|
const defaultCopyText = (0, _textstring.useTextstringValue)({
|
|
26
26
|
textstring: (0, _textstring.ttsToITextString)(_textStrings.default.components.codeHighlighter.copyToClipboard.copy)
|
|
27
27
|
});
|
|
@@ -56,13 +56,10 @@ const CopyToClipboard = ({
|
|
|
56
56
|
}, [copiedText, copyFailedText, text]);
|
|
57
57
|
return /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboard, {
|
|
58
58
|
$codeTheme: theme,
|
|
59
|
-
$fixedRight: stickyActionPosition.fixedRight,
|
|
60
|
-
$fixedTop: stickyActionPosition.fixedTop,
|
|
61
|
-
$isFixed: stickyActionPosition.isFixed,
|
|
62
59
|
ref: actionGroupRef
|
|
63
60
|
}, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardActionGroup, null, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardButton, {
|
|
64
61
|
$codeTheme: theme,
|
|
65
|
-
$isSticky:
|
|
62
|
+
$isSticky: isActionGroupSticky,
|
|
66
63
|
"aria-label": copyText,
|
|
67
64
|
onClick: () => {
|
|
68
65
|
void handleCopy();
|
|
@@ -76,7 +73,7 @@ const CopyToClipboard = ({
|
|
|
76
73
|
shouldUseDefaultTriggerStyles: false
|
|
77
74
|
}, /*#__PURE__*/_react.default.createElement(_CopyToClipboard.StyledCopyToClipboardButton, {
|
|
78
75
|
$codeTheme: theme,
|
|
79
|
-
$isSticky:
|
|
76
|
+
$isSticky: isActionGroupSticky,
|
|
80
77
|
"aria-label": shareText,
|
|
81
78
|
type: "button"
|
|
82
79
|
}, /*#__PURE__*/_react.default.createElement(_core.Icon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.js","names":["_core","require","_textstring","_chaynsApi","_react","_interopRequireWildcard","_codeHighlighter","_CopyToClipboard","_textStrings","_interopRequireDefault","_useStickyActionState","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","useRef","isActionGroupSticky","useStickyActionState","defaultCopyText","useTextstringValue","textstring","ttsToITextString","textStrings","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","CodeHighlighterTheme","Dark","handleCopy","useCallback","navigator","clipboard","writeText","createDialog","showCloseIcon","toastType","ToastType","SUCCESS","type","DialogType","TOAST","open","ERROR","createElement","StyledCopyToClipboard","$codeTheme","ref","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","$isSticky","onClick","Icon","color","icons","SharingContextMenu","link","shouldUseDefaultTriggerStyles","displayName","_default","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useRef } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n StyledCopyToClipboard,\n StyledCopyToClipboardActionGroup,\n StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n copyButtonText?: string;\n rootRef: RefObject<HTMLDivElement>;\n text: string;\n theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n\n const defaultCopyText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n });\n const copiedText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),\n });\n const copyFailedText = useTextstringValue({\n textstring: ttsToITextString(\n textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n ),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n });\n\n const copyText = copyButtonText ?? defaultCopyText;\n const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n const handleCopy = useCallback(async () => {\n try {\n await navigator.clipboard.writeText(text);\n void createDialog({\n showCloseIcon: true,\n text: copiedText,\n toastType: ToastType.SUCCESS,\n type: DialogType.TOAST,\n }).open();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedText,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [copiedText, copyFailedText, text]);\n\n return (\n <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n <StyledCopyToClipboardActionGroup>\n <StyledCopyToClipboardButton\n $codeTheme={theme}\n $isSticky={isActionGroupSticky}\n aria-label={copyText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon color={iconColor} icons={['fa-light fa-copy']} />\n </StyledCopyToClipboardButton>\n <SharingContextMenu link={text} shouldUseDefaultTriggerStyles={false}>\n <StyledCopyToClipboardButton\n $codeTheme={theme}\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n </StyledCopyToClipboardButton>\n </SharingContextMenu>\n </StyledCopyToClipboardActionGroup>\n </StyledCopyToClipboard>\n );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,24 +8,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
8
8
|
var _codeHighlighter = require("../../../types/codeHighlighter");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
const StyledCopyToClipboard = exports.StyledCopyToClipboard = _styledComponents.default.div`
|
|
11
|
-
position:
|
|
12
|
-
|
|
13
|
-
}) => $isFixed ? 'fixed' : 'sticky'};
|
|
14
|
-
top: ${({
|
|
15
|
-
$fixedTop,
|
|
16
|
-
$isFixed
|
|
17
|
-
}) => $isFixed ? `${$fixedTop}px` : 'var(--code-highlighter-action-inset)'};
|
|
18
|
-
right: ${({
|
|
19
|
-
$fixedRight,
|
|
20
|
-
$isFixed
|
|
21
|
-
}) => $isFixed ? `${$fixedRight}px` : 'auto'};
|
|
11
|
+
position: sticky;
|
|
12
|
+
top: var(--code-highlighter-action-inset);
|
|
22
13
|
z-index: 1;
|
|
23
14
|
display: flex;
|
|
24
15
|
justify-content: flex-end;
|
|
25
16
|
height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));
|
|
26
|
-
margin-top:
|
|
27
|
-
|
|
28
|
-
|
|
17
|
+
margin-top: calc(
|
|
18
|
+
(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1
|
|
19
|
+
);
|
|
29
20
|
padding-right: var(--code-highlighter-action-inset);
|
|
30
21
|
`;
|
|
31
22
|
const getActionGroupBorder = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCopyToClipboard","exports","styled","div","
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.styles.js","names":["_styledComponents","_interopRequireDefault","require","_codeHighlighter","e","__esModule","default","StyledCopyToClipboard","exports","styled","div","getActionGroupBorder","$codeTheme","$isSticky","CodeHighlighterTheme","Dark","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonShadow","getButtonHoverShadow","insetShadow","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","button","StyledCopyToClipboardText","span"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\ntype StyledCopyToClipboardProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCopyToClipboard = styled.div<StyledCopyToClipboardProps>`\n position: sticky;\n top: var(--code-highlighter-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));\n margin-top: calc(\n (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1\n );\n padding-right: var(--code-highlighter-action-inset);\n`;\n\ntype StyledCopyToClipboardButtonProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) =>\n $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';\n\nconst getButtonHoverShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) => {\n const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';\n\n return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;\n};\n\nexport const StyledCopyToClipboardActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--code-highlighter-action-size);\n`;\n\nexport const StyledCopyToClipboardButton = styled.button<StyledCopyToClipboardButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--code-highlighter-action-size);\n height: var(--code-highlighter-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};\n box-shadow: ${getButtonShadow};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: ${getButtonHoverShadow};\n }\n\n &:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\ntype StyledCopyToClipboardTextProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n font-size: small;\n margin-left: 4px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AAAsE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAM/D,MAAMG,qBAAqB,GAAAC,OAAA,CAAAD,qBAAA,GAAGE,yBAAM,CAACC,GAA+B;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC1F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAMC,wBAAwB,GAAGA,CAAC;EAAEJ,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAME,wBAAwB,GAAGA,CAAC;EAAEL;AAA6C,CAAC,KAC9EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMG,yBAAyB,GAAGA,CAAC;EAAEN;AAA6C,CAAC,KAC/EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMI,oBAAoB,GAAGA,CAAC;EAAEP;AAA6C,CAAC,KAC1EA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AAEpE,MAAMK,eAAe,GAAGA,CAAC;EAAEP;AAA4C,CAAC,KACpEA,SAAS,GAAG,+BAA+B,GAAG,MAAM;AAExD,MAAMQ,oBAAoB,GAAGA,CAAC;EAAER;AAA4C,CAAC,KAAK;EAC9E,MAAMS,WAAW,GAAG,2CAA2C;EAE/D,OAAOT,SAAS,GAAG,kCAAkCS,WAAW,EAAE,GAAGA,WAAW;AACpF,CAAC;AAEM,MAAMC,gCAAgC,GAAAf,OAAA,CAAAe,gCAAA,GAAGd,yBAAM,CAACC,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAEM,MAAMc,2BAA2B,GAAAhB,OAAA,CAAAgB,2BAAA,GAAGf,yBAAM,CAACgB,MAAwC;AAC1F;AACA,wBAAwBd,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBK,wBAAwB;AAChD,aAAa,CAAC;EAAEJ;AAAW,CAAC,KACpBA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,kBAAkBK,eAAe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,oBAAoB;AAC5C,4BAA4BF,wBAAwB;AACpD,sBAAsBI,oBAAoB;AAC1C;AACA;AACA;AACA,4BAA4BH,yBAAyB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAKM,MAAMQ,yBAAyB,GAAAlB,OAAA,CAAAkB,yBAAA,GAAGjB,yBAAM,CAACkB,IAAoC;AACpF,aAAa,CAAC;EAAEf;AAAW,CAAC,KACpBA,UAAU,KAAKE,qCAAoB,CAACC,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.useStickyActionState = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
const isScrollable = element => {
|
|
9
|
+
const {
|
|
10
|
+
overflow,
|
|
11
|
+
overflowY
|
|
12
|
+
} = window.getComputedStyle(element);
|
|
13
|
+
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
14
|
+
};
|
|
15
|
+
const getScrollableAncestor = element => {
|
|
16
|
+
let parent = element.parentElement;
|
|
17
|
+
while (parent) {
|
|
18
|
+
if (parent === document.body || parent === document.documentElement) {
|
|
19
|
+
return undefined;
|
|
20
|
+
}
|
|
21
|
+
if (isScrollable(parent)) {
|
|
22
|
+
return parent;
|
|
23
|
+
}
|
|
24
|
+
parent = parent.parentElement;
|
|
25
|
+
}
|
|
26
|
+
return undefined;
|
|
27
|
+
};
|
|
28
|
+
const useStickyActionState = (rootRef, actionRef) => {
|
|
29
|
+
const [isSticky, setIsSticky] = (0, _react.useState)(false);
|
|
30
|
+
(0, _react.useEffect)(() => {
|
|
31
|
+
const root = rootRef.current;
|
|
32
|
+
if (!root || !actionRef.current) {
|
|
33
|
+
return undefined;
|
|
34
|
+
}
|
|
35
|
+
const scrollContainer = getScrollableAncestor(root);
|
|
36
|
+
const updateStickyState = () => {
|
|
37
|
+
const containerTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect().top) ?? 0;
|
|
38
|
+
const stickyBoundary = containerTop + 1;
|
|
39
|
+
setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
|
|
40
|
+
};
|
|
41
|
+
updateStickyState();
|
|
42
|
+
scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', updateStickyState, {
|
|
43
|
+
passive: true
|
|
44
|
+
});
|
|
45
|
+
document.addEventListener('scroll', updateStickyState, true);
|
|
46
|
+
window.addEventListener('scroll', updateStickyState, {
|
|
47
|
+
passive: true
|
|
48
|
+
});
|
|
49
|
+
window.addEventListener('resize', updateStickyState);
|
|
50
|
+
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
|
|
51
|
+
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(root);
|
|
52
|
+
if (scrollContainer) {
|
|
53
|
+
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollContainer);
|
|
54
|
+
}
|
|
55
|
+
return () => {
|
|
56
|
+
scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', updateStickyState);
|
|
57
|
+
document.removeEventListener('scroll', updateStickyState, true);
|
|
58
|
+
window.removeEventListener('scroll', updateStickyState);
|
|
59
|
+
window.removeEventListener('resize', updateStickyState);
|
|
60
|
+
resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
|
|
61
|
+
};
|
|
62
|
+
}, [actionRef, rootRef]);
|
|
63
|
+
return isSticky;
|
|
64
|
+
};
|
|
65
|
+
exports.useStickyActionState = useStickyActionState;
|
|
66
|
+
//# sourceMappingURL=useStickyActionState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStickyActionState.js","names":["_react","require","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","document","body","documentElement","undefined","useStickyActionState","rootRef","actionRef","isSticky","setIsSticky","useState","useEffect","root","current","scrollContainer","updateStickyState","containerTop","getBoundingClientRect","top","stickyBoundary","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionState.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (parent === document.body || parent === document.documentElement) {\n return undefined;\n }\n\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\nexport const useStickyActionState = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n) => {\n const [isSticky, setIsSticky] = useState(false);\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root || !actionRef.current) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updateStickyState = () => {\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const stickyBoundary = containerTop + 1;\n\n setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);\n };\n\n updateStickyState();\n scrollContainer?.addEventListener('scroll', updateStickyState, { passive: true });\n document.addEventListener('scroll', updateStickyState, true);\n window.addEventListener('scroll', updateStickyState, { passive: true });\n window.addEventListener('resize', updateStickyState);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined'\n ? undefined\n : new ResizeObserver(updateStickyState);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updateStickyState);\n document.removeEventListener('scroll', updateStickyState, true);\n window.removeEventListener('scroll', updateStickyState);\n window.removeEventListener('resize', updateStickyState);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return isSticky;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -5,7 +5,7 @@ import React, { useCallback, useRef } from 'react';
|
|
|
5
5
|
import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
|
|
6
6
|
import { StyledCopyToClipboard, StyledCopyToClipboardActionGroup, StyledCopyToClipboardButton } from './CopyToClipboard.styles';
|
|
7
7
|
import textStrings from '../../../constants/textStrings';
|
|
8
|
-
import {
|
|
8
|
+
import { useStickyActionState } from './useStickyActionState';
|
|
9
9
|
const CopyToClipboard = ({
|
|
10
10
|
copyButtonText,
|
|
11
11
|
rootRef,
|
|
@@ -13,7 +13,7 @@ const CopyToClipboard = ({
|
|
|
13
13
|
theme
|
|
14
14
|
}) => {
|
|
15
15
|
const actionGroupRef = useRef(null);
|
|
16
|
-
const
|
|
16
|
+
const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);
|
|
17
17
|
const defaultCopyText = useTextstringValue({
|
|
18
18
|
textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy)
|
|
19
19
|
});
|
|
@@ -48,13 +48,10 @@ const CopyToClipboard = ({
|
|
|
48
48
|
}, [copiedText, copyFailedText, text]);
|
|
49
49
|
return /*#__PURE__*/React.createElement(StyledCopyToClipboard, {
|
|
50
50
|
$codeTheme: theme,
|
|
51
|
-
$fixedRight: stickyActionPosition.fixedRight,
|
|
52
|
-
$fixedTop: stickyActionPosition.fixedTop,
|
|
53
|
-
$isFixed: stickyActionPosition.isFixed,
|
|
54
51
|
ref: actionGroupRef
|
|
55
52
|
}, /*#__PURE__*/React.createElement(StyledCopyToClipboardActionGroup, null, /*#__PURE__*/React.createElement(StyledCopyToClipboardButton, {
|
|
56
53
|
$codeTheme: theme,
|
|
57
|
-
$isSticky:
|
|
54
|
+
$isSticky: isActionGroupSticky,
|
|
58
55
|
"aria-label": copyText,
|
|
59
56
|
onClick: () => {
|
|
60
57
|
void handleCopy();
|
|
@@ -68,7 +65,7 @@ const CopyToClipboard = ({
|
|
|
68
65
|
shouldUseDefaultTriggerStyles: false
|
|
69
66
|
}, /*#__PURE__*/React.createElement(StyledCopyToClipboardButton, {
|
|
70
67
|
$codeTheme: theme,
|
|
71
|
-
$isSticky:
|
|
68
|
+
$isSticky: isActionGroupSticky,
|
|
72
69
|
"aria-label": shareText,
|
|
73
70
|
type: "button"
|
|
74
71
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useRef","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.js","names":["Icon","SharingContextMenu","ttsToITextString","useTextstringValue","createDialog","DialogType","ToastType","React","useCallback","useRef","CodeHighlighterTheme","StyledCopyToClipboard","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","textStrings","useStickyActionState","CopyToClipboard","copyButtonText","rootRef","text","theme","actionGroupRef","isActionGroupSticky","defaultCopyText","textstring","components","codeHighlighter","copyToClipboard","copy","copiedText","copied","copyFailedText","copyFailed","shareText","share","copyText","iconColor","Dark","handleCopy","navigator","clipboard","writeText","showCloseIcon","toastType","SUCCESS","type","TOAST","open","ERROR","createElement","$codeTheme","ref","$isSticky","onClick","color","icons","link","shouldUseDefaultTriggerStyles","displayName"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.tsx"],"sourcesContent":["import { Icon, SharingContextMenu } from '@chayns-components/core';\nimport { ttsToITextString, useTextstringValue } from '@chayns-components/textstring';\nimport { createDialog, DialogType, ToastType } from 'chayns-api';\nimport React, { FC, RefObject, useCallback, useRef } from 'react';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\nimport {\n StyledCopyToClipboard,\n StyledCopyToClipboardActionGroup,\n StyledCopyToClipboardButton,\n} from './CopyToClipboard.styles';\nimport textStrings from '../../../constants/textStrings';\nimport { useStickyActionState } from './useStickyActionState';\n\nexport type CopyToClipboardProps = {\n copyButtonText?: string;\n rootRef: RefObject<HTMLDivElement>;\n text: string;\n theme: CodeHighlighterTheme;\n};\n\nconst CopyToClipboard: FC<CopyToClipboardProps> = ({ copyButtonText, rootRef, text, theme }) => {\n const actionGroupRef = useRef<HTMLDivElement>(null);\n const isActionGroupSticky = useStickyActionState(rootRef, actionGroupRef);\n\n const defaultCopyText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copy),\n });\n const copiedText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.copied),\n });\n const copyFailedText = useTextstringValue({\n textstring: ttsToITextString(\n textStrings.components.codeHighlighter.copyToClipboard.copyFailed,\n ),\n });\n const shareText = useTextstringValue({\n textstring: ttsToITextString(textStrings.components.codeHighlighter.copyToClipboard.share),\n });\n\n const copyText = copyButtonText ?? defaultCopyText;\n const iconColor = theme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#5f6368';\n\n const handleCopy = useCallback(async () => {\n try {\n await navigator.clipboard.writeText(text);\n void createDialog({\n showCloseIcon: true,\n text: copiedText,\n toastType: ToastType.SUCCESS,\n type: DialogType.TOAST,\n }).open();\n } catch {\n void createDialog({\n showCloseIcon: true,\n text: copyFailedText,\n toastType: ToastType.ERROR,\n type: DialogType.TOAST,\n }).open();\n }\n }, [copiedText, copyFailedText, text]);\n\n return (\n <StyledCopyToClipboard $codeTheme={theme} ref={actionGroupRef}>\n <StyledCopyToClipboardActionGroup>\n <StyledCopyToClipboardButton\n $codeTheme={theme}\n $isSticky={isActionGroupSticky}\n aria-label={copyText}\n onClick={() => {\n void handleCopy();\n }}\n type=\"button\"\n >\n <Icon color={iconColor} icons={['fa-light fa-copy']} />\n </StyledCopyToClipboardButton>\n <SharingContextMenu link={text} shouldUseDefaultTriggerStyles={false}>\n <StyledCopyToClipboardButton\n $codeTheme={theme}\n $isSticky={isActionGroupSticky}\n aria-label={shareText}\n type=\"button\"\n >\n <Icon color={iconColor} icons={['fa fa-share-nodes']} />\n </StyledCopyToClipboardButton>\n </SharingContextMenu>\n </StyledCopyToClipboardActionGroup>\n </StyledCopyToClipboard>\n );\n};\n\nCopyToClipboard.displayName = 'CopyToClipboard';\n\nexport default CopyToClipboard;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,24 +1,15 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
2
|
import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
|
|
3
3
|
export const StyledCopyToClipboard = styled.div`
|
|
4
|
-
position:
|
|
5
|
-
|
|
6
|
-
}) => $isFixed ? 'fixed' : 'sticky'};
|
|
7
|
-
top: ${({
|
|
8
|
-
$fixedTop,
|
|
9
|
-
$isFixed
|
|
10
|
-
}) => $isFixed ? `${$fixedTop}px` : 'var(--code-highlighter-action-inset)'};
|
|
11
|
-
right: ${({
|
|
12
|
-
$fixedRight,
|
|
13
|
-
$isFixed
|
|
14
|
-
}) => $isFixed ? `${$fixedRight}px` : 'auto'};
|
|
4
|
+
position: sticky;
|
|
5
|
+
top: var(--code-highlighter-action-inset);
|
|
15
6
|
z-index: 1;
|
|
16
7
|
display: flex;
|
|
17
8
|
justify-content: flex-end;
|
|
18
9
|
height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));
|
|
19
|
-
margin-top:
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
margin-top: calc(
|
|
11
|
+
(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1
|
|
12
|
+
);
|
|
22
13
|
padding-right: var(--code-highlighter-action-inset);
|
|
23
14
|
`;
|
|
24
15
|
const getActionGroupBorder = ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.styles.js","names":["styled","CodeHighlighterTheme","StyledCopyToClipboard","div","getActionGroupBorder","$codeTheme","$isSticky","Dark","getActionGroupBackground","getButtonHoverBackground","getButtonActiveBackground","getButtonHoverBorder","getButtonShadow","getButtonHoverShadow","insetShadow","StyledCopyToClipboardActionGroup","StyledCopyToClipboardButton","button","StyledCopyToClipboardText","span"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/CopyToClipboard.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled from 'styled-components';\nimport { CodeHighlighterTheme } from '../../../types/codeHighlighter';\n\ntype StyledCopyToClipboardProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\n\nexport const StyledCopyToClipboard = styled.div<StyledCopyToClipboardProps>`\n position: sticky;\n top: var(--code-highlighter-action-inset);\n z-index: 1;\n display: flex;\n justify-content: flex-end;\n height: calc(var(--code-highlighter-action-size) + var(--code-highlighter-action-inset));\n margin-top: calc(\n (var(--code-highlighter-action-size) + var(--code-highlighter-action-inset)) * -1\n );\n padding-right: var(--code-highlighter-action-inset);\n`;\n\ntype StyledCopyToClipboardButtonProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n $isSticky: boolean;\n}>;\n\nconst getActionGroupBorder = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $codeTheme === CodeHighlighterTheme.Dark ? '#5a6474' : '#d4d4d4';\n};\n\nconst getActionGroupBackground = ({ $codeTheme, $isSticky }: StyledCopyToClipboardButtonProps) => {\n if (!$isSticky) {\n return 'transparent';\n }\n\n return $codeTheme === CodeHighlighterTheme.Dark ? '#343a46' : '#fafafa';\n};\n\nconst getButtonHoverBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#454c59' : 'rgba(128, 128, 128, 0.2)';\n\nconst getButtonActiveBackground = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#545d6d' : 'rgba(128, 128, 128, 0.3)';\n\nconst getButtonHoverBorder = ({ $codeTheme }: StyledCopyToClipboardButtonProps) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#6a7485' : '#c2c2c2';\n\nconst getButtonShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) =>\n $isSticky ? '0 2px 8px rgba(0, 0, 0, 0.28)' : 'none';\n\nconst getButtonHoverShadow = ({ $isSticky }: StyledCopyToClipboardButtonProps) => {\n const insetShadow = 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)';\n\n return $isSticky ? `0 2px 8px rgba(0, 0, 0, 0.32), ${insetShadow}` : insetShadow;\n};\n\nexport const StyledCopyToClipboardActionGroup = styled.div`\n display: flex;\n gap: 4px;\n height: var(--code-highlighter-action-size);\n`;\n\nexport const StyledCopyToClipboardButton = styled.button<StyledCopyToClipboardButtonProps>`\n box-sizing: border-box;\n border: 1px solid ${getActionGroupBorder};\n border-radius: 4px;\n width: var(--code-highlighter-action-size);\n height: var(--code-highlighter-action-size);\n padding: 0;\n cursor: pointer;\n background-color: ${getActionGroupBackground};\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#f4f6f8' : '#999999'};\n box-shadow: ${getButtonShadow};\n transition:\n background-color 0.15s ease,\n border-color 0.15s ease,\n box-shadow 0.15s ease,\n transform 0.15s ease;\n\n &:hover {\n border-color: ${getButtonHoverBorder};\n background-color: ${getButtonHoverBackground};\n box-shadow: ${getButtonHoverShadow};\n }\n\n &:active {\n background-color: ${getButtonActiveBackground};\n transform: scale(0.94);\n }\n\n &:focus-visible {\n outline: 2px solid currentColor;\n outline-offset: 2px;\n }\n`;\n\ntype StyledCopyToClipboardTextProps = WithTheme<{\n $codeTheme: CodeHighlighterTheme;\n}>;\nexport const StyledCopyToClipboardText = styled.span<StyledCopyToClipboardTextProps>`\n color: ${({ $codeTheme }) =>\n $codeTheme === CodeHighlighterTheme.Dark ? '#e5e5e5' : '#999999'};\n font-size: small;\n margin-left: 4px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,oBAAoB,QAAQ,gCAAgC;AAMrE,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACG,GAA+B;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,MAAMC,oBAAoB,GAAGA,CAAC;EAAEC,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC1F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAMC,wBAAwB,GAAGA,CAAC;EAAEH,UAAU;EAAEC;AAA4C,CAAC,KAAK;EAC9F,IAAI,CAACA,SAAS,EAAE;IACZ,OAAO,aAAa;EACxB;EAEA,OAAOD,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAC3E,CAAC;AAED,MAAME,wBAAwB,GAAGA,CAAC;EAAEJ;AAA6C,CAAC,KAC9EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMG,yBAAyB,GAAGA,CAAC;EAAEL;AAA6C,CAAC,KAC/EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,0BAA0B;AAErF,MAAMI,oBAAoB,GAAGA,CAAC;EAAEN;AAA6C,CAAC,KAC1EA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AAEpE,MAAMK,eAAe,GAAGA,CAAC;EAAEN;AAA4C,CAAC,KACpEA,SAAS,GAAG,+BAA+B,GAAG,MAAM;AAExD,MAAMO,oBAAoB,GAAGA,CAAC;EAAEP;AAA4C,CAAC,KAAK;EAC9E,MAAMQ,WAAW,GAAG,2CAA2C;EAE/D,OAAOR,SAAS,GAAG,kCAAkCQ,WAAW,EAAE,GAAGA,WAAW;AACpF,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGf,MAAM,CAACG,GAAG;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,2BAA2B,GAAGhB,MAAM,CAACiB,MAAwC;AAC1F;AACA,wBAAwBb,oBAAoB;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBI,wBAAwB;AAChD,aAAa,CAAC;EAAEH;AAAW,CAAC,KACpBA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE,kBAAkBK,eAAe;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBD,oBAAoB;AAC5C,4BAA4BF,wBAAwB;AACpD,sBAAsBI,oBAAoB;AAC1C;AACA;AACA;AACA,4BAA4BH,yBAAyB;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAKD,OAAO,MAAMQ,yBAAyB,GAAGlB,MAAM,CAACmB,IAAoC;AACpF,aAAa,CAAC;EAAEd;AAAW,CAAC,KACpBA,UAAU,KAAKJ,oBAAoB,CAACM,IAAI,GAAG,SAAS,GAAG,SAAS;AACxE;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
const isScrollable = element => {
|
|
3
|
+
const {
|
|
4
|
+
overflow,
|
|
5
|
+
overflowY
|
|
6
|
+
} = window.getComputedStyle(element);
|
|
7
|
+
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
8
|
+
};
|
|
9
|
+
const getScrollableAncestor = element => {
|
|
10
|
+
let parent = element.parentElement;
|
|
11
|
+
while (parent) {
|
|
12
|
+
if (parent === document.body || parent === document.documentElement) {
|
|
13
|
+
return undefined;
|
|
14
|
+
}
|
|
15
|
+
if (isScrollable(parent)) {
|
|
16
|
+
return parent;
|
|
17
|
+
}
|
|
18
|
+
parent = parent.parentElement;
|
|
19
|
+
}
|
|
20
|
+
return undefined;
|
|
21
|
+
};
|
|
22
|
+
export const useStickyActionState = (rootRef, actionRef) => {
|
|
23
|
+
const [isSticky, setIsSticky] = useState(false);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
const root = rootRef.current;
|
|
26
|
+
if (!root || !actionRef.current) {
|
|
27
|
+
return undefined;
|
|
28
|
+
}
|
|
29
|
+
const scrollContainer = getScrollableAncestor(root);
|
|
30
|
+
const updateStickyState = () => {
|
|
31
|
+
const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
|
|
32
|
+
const stickyBoundary = containerTop + 1;
|
|
33
|
+
setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);
|
|
34
|
+
};
|
|
35
|
+
updateStickyState();
|
|
36
|
+
scrollContainer?.addEventListener('scroll', updateStickyState, {
|
|
37
|
+
passive: true
|
|
38
|
+
});
|
|
39
|
+
document.addEventListener('scroll', updateStickyState, true);
|
|
40
|
+
window.addEventListener('scroll', updateStickyState, {
|
|
41
|
+
passive: true
|
|
42
|
+
});
|
|
43
|
+
window.addEventListener('resize', updateStickyState);
|
|
44
|
+
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updateStickyState);
|
|
45
|
+
resizeObserver?.observe(root);
|
|
46
|
+
if (scrollContainer) {
|
|
47
|
+
resizeObserver?.observe(scrollContainer);
|
|
48
|
+
}
|
|
49
|
+
return () => {
|
|
50
|
+
scrollContainer?.removeEventListener('scroll', updateStickyState);
|
|
51
|
+
document.removeEventListener('scroll', updateStickyState, true);
|
|
52
|
+
window.removeEventListener('scroll', updateStickyState);
|
|
53
|
+
window.removeEventListener('resize', updateStickyState);
|
|
54
|
+
resizeObserver?.disconnect();
|
|
55
|
+
};
|
|
56
|
+
}, [actionRef, rootRef]);
|
|
57
|
+
return isSticky;
|
|
58
|
+
};
|
|
59
|
+
//# sourceMappingURL=useStickyActionState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useStickyActionState.js","names":["useEffect","useState","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","document","body","documentElement","undefined","useStickyActionState","rootRef","actionRef","isSticky","setIsSticky","root","current","scrollContainer","updateStickyState","containerTop","getBoundingClientRect","top","stickyBoundary","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionState.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (parent === document.body || parent === document.documentElement) {\n return undefined;\n }\n\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\nexport const useStickyActionState = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n) => {\n const [isSticky, setIsSticky] = useState(false);\n\n useEffect(() => {\n const root = rootRef.current;\n if (!root || !actionRef.current) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updateStickyState = () => {\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const stickyBoundary = containerTop + 1;\n\n setIsSticky(root.getBoundingClientRect().top <= stickyBoundary);\n };\n\n updateStickyState();\n scrollContainer?.addEventListener('scroll', updateStickyState, { passive: true });\n document.addEventListener('scroll', updateStickyState, true);\n window.addEventListener('scroll', updateStickyState, { passive: true });\n window.addEventListener('resize', updateStickyState);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined'\n ? undefined\n : new ResizeObserver(updateStickyState);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updateStickyState);\n document.removeEventListener('scroll', updateStickyState, true);\n window.removeEventListener('scroll', updateStickyState);\n window.removeEventListener('resize', updateStickyState);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return isSticky;\n};\n"],"mappings":"AAAA,SAAoBA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAEtD,MAAMC,YAAY,GAAIC,OAAoB,IAAK;EAC3C,MAAM;IAAEC,QAAQ;IAAEC;EAAU,CAAC,GAAGC,MAAM,CAACC,gBAAgB,CAACJ,OAAO,CAAC;EAEhE,OAAO,qBAAqB,CAACK,IAAI,CAAC,GAAGJ,QAAQ,IAAIC,SAAS,EAAE,CAAC;AACjE,CAAC;AAED,MAAMI,qBAAqB,GAAIN,OAAoB,IAAK;EACpD,IAAIO,MAAM,GAAGP,OAAO,CAACQ,aAAa;EAElC,OAAOD,MAAM,EAAE;IACX,IAAIA,MAAM,KAAKE,QAAQ,CAACC,IAAI,IAAIH,MAAM,KAAKE,QAAQ,CAACE,eAAe,EAAE;MACjE,OAAOC,SAAS;IACpB;IAEA,IAAIb,YAAY,CAACQ,MAAM,CAAC,EAAE;MACtB,OAAOA,MAAM;IACjB;IAEAA,MAAM,GAAGA,MAAM,CAACC,aAAa;EACjC;EAEA,OAAOI,SAAS;AACpB,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAGA,CAChCC,OAA+B,EAC/BC,SAAiC,KAChC;EACD,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGnB,QAAQ,CAAC,KAAK,CAAC;EAE/CD,SAAS,CAAC,MAAM;IACZ,MAAMqB,IAAI,GAAGJ,OAAO,CAACK,OAAO;IAC5B,IAAI,CAACD,IAAI,IAAI,CAACH,SAAS,CAACI,OAAO,EAAE;MAC7B,OAAOP,SAAS;IACpB;IAEA,MAAMQ,eAAe,GAAGd,qBAAqB,CAACY,IAAI,CAAC;IAEnD,MAAMG,iBAAiB,GAAGA,CAAA,KAAM;MAC5B,MAAMC,YAAY,GAAGF,eAAe,EAAEG,qBAAqB,CAAC,CAAC,CAACC,GAAG,IAAI,CAAC;MACtE,MAAMC,cAAc,GAAGH,YAAY,GAAG,CAAC;MAEvCL,WAAW,CAACC,IAAI,CAACK,qBAAqB,CAAC,CAAC,CAACC,GAAG,IAAIC,cAAc,CAAC;IACnE,CAAC;IAEDJ,iBAAiB,CAAC,CAAC;IACnBD,eAAe,EAAEM,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE;MAAEM,OAAO,EAAE;IAAK,CAAC,CAAC;IACjFlB,QAAQ,CAACiB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE,IAAI,CAAC;IAC5DlB,MAAM,CAACuB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,EAAE;MAAEM,OAAO,EAAE;IAAK,CAAC,CAAC;IACvExB,MAAM,CAACuB,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;IAEpD,MAAMO,cAAc,GAChB,OAAOC,cAAc,KAAK,WAAW,GAC/BjB,SAAS,GACT,IAAIiB,cAAc,CAACR,iBAAiB,CAAC;IAC/CO,cAAc,EAAEE,OAAO,CAACZ,IAAI,CAAC;IAE7B,IAAIE,eAAe,EAAE;MACjBQ,cAAc,EAAEE,OAAO,CAACV,eAAe,CAAC;IAC5C;IAEA,OAAO,MAAM;MACTA,eAAe,EAAEW,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACjEZ,QAAQ,CAACsB,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,EAAE,IAAI,CAAC;MAC/DlB,MAAM,CAAC4B,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACvDlB,MAAM,CAAC4B,mBAAmB,CAAC,QAAQ,EAAEV,iBAAiB,CAAC;MACvDO,cAAc,EAAEI,UAAU,CAAC,CAAC;IAChC,CAAC;EACL,CAAC,EAAE,CAACjB,SAAS,EAAED,OAAO,CAAC,CAAC;EAExB,OAAOE,QAAQ;AACnB,CAAC","ignoreList":[]}
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
import { CodeHighlighterTheme } from '../../../types/codeHighlighter';
|
|
2
|
-
export declare const StyledCopyToClipboard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"
|
|
2
|
+
export declare const StyledCopyToClipboard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"> & {
|
|
3
3
|
$codeTheme: CodeHighlighterTheme;
|
|
4
|
-
$fixedRight: number;
|
|
5
|
-
$fixedTop: number;
|
|
6
|
-
$isFixed: boolean;
|
|
7
4
|
} & {
|
|
8
5
|
theme: import("@chayns-components/core").Theme;
|
|
9
|
-
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"
|
|
6
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$codeTheme" | "theme"> & {
|
|
10
7
|
$codeTheme: CodeHighlighterTheme;
|
|
11
|
-
$fixedRight: number;
|
|
12
|
-
$fixedTop: number;
|
|
13
|
-
$isFixed: boolean;
|
|
14
8
|
} & {
|
|
15
9
|
theme: import("@chayns-components/core").Theme;
|
|
16
10
|
}, never>>> & string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/code-highlighter",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.14",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
"vitest": "^1.6.1"
|
|
75
75
|
},
|
|
76
76
|
"dependencies": {
|
|
77
|
-
"@chayns-components/core": "^5.5.
|
|
78
|
-
"@chayns-components/textstring": "^5.5.
|
|
77
|
+
"@chayns-components/core": "^5.5.14",
|
|
78
|
+
"@chayns-components/textstring": "^5.5.12",
|
|
79
79
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
80
80
|
"babel-prettier-parser": "^0.10.8",
|
|
81
81
|
"prettier": "^2.8.8",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"publishConfig": {
|
|
93
93
|
"access": "public"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "5933dcba58846a7507088aefcd35559b2635bd48"
|
|
96
96
|
}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.useStickyActionPosition = void 0;
|
|
7
|
-
var _react = require("react");
|
|
8
|
-
const STICKY_ACTION_INSET = 8;
|
|
9
|
-
const STICKY_ACTION_SIZE = 32;
|
|
10
|
-
const initialPosition = {
|
|
11
|
-
fixedRight: 0,
|
|
12
|
-
fixedTop: STICKY_ACTION_INSET,
|
|
13
|
-
isFixed: false,
|
|
14
|
-
isSticky: false
|
|
15
|
-
};
|
|
16
|
-
const isScrollable = element => {
|
|
17
|
-
const {
|
|
18
|
-
overflow,
|
|
19
|
-
overflowY
|
|
20
|
-
} = window.getComputedStyle(element);
|
|
21
|
-
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
22
|
-
};
|
|
23
|
-
const getScrollableAncestor = element => {
|
|
24
|
-
let parent = element.parentElement;
|
|
25
|
-
while (parent) {
|
|
26
|
-
if (isScrollable(parent)) {
|
|
27
|
-
return parent;
|
|
28
|
-
}
|
|
29
|
-
parent = parent.parentElement;
|
|
30
|
-
}
|
|
31
|
-
return undefined;
|
|
32
|
-
};
|
|
33
|
-
const useStickyActionPosition = (rootRef, actionRef) => {
|
|
34
|
-
const [position, setPosition] = (0, _react.useState)(initialPosition);
|
|
35
|
-
(0, _react.useEffect)(() => {
|
|
36
|
-
const root = rootRef.current;
|
|
37
|
-
const action = actionRef.current;
|
|
38
|
-
if (!root || !action) {
|
|
39
|
-
return undefined;
|
|
40
|
-
}
|
|
41
|
-
const scrollContainer = getScrollableAncestor(root);
|
|
42
|
-
const updatePosition = () => {
|
|
43
|
-
const rootRect = root.getBoundingClientRect();
|
|
44
|
-
const containerTop = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.getBoundingClientRect().top) ?? 0;
|
|
45
|
-
const fixedTop = containerTop + STICKY_ACTION_INSET;
|
|
46
|
-
const isSticky = rootRect.top <= fixedTop;
|
|
47
|
-
const isFixed = Boolean(scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE);
|
|
48
|
-
const fixedRight = Math.max(0, window.innerWidth - rootRect.right);
|
|
49
|
-
setPosition(currentPosition => {
|
|
50
|
-
if (currentPosition.fixedRight === fixedRight && currentPosition.fixedTop === fixedTop && currentPosition.isFixed === isFixed && currentPosition.isSticky === isSticky) {
|
|
51
|
-
return currentPosition;
|
|
52
|
-
}
|
|
53
|
-
return {
|
|
54
|
-
fixedRight,
|
|
55
|
-
fixedTop,
|
|
56
|
-
isFixed,
|
|
57
|
-
isSticky
|
|
58
|
-
};
|
|
59
|
-
});
|
|
60
|
-
};
|
|
61
|
-
updatePosition();
|
|
62
|
-
scrollContainer === null || scrollContainer === void 0 || scrollContainer.addEventListener('scroll', updatePosition, {
|
|
63
|
-
passive: true
|
|
64
|
-
});
|
|
65
|
-
window.addEventListener('scroll', updatePosition, {
|
|
66
|
-
passive: true
|
|
67
|
-
});
|
|
68
|
-
window.addEventListener('resize', updatePosition);
|
|
69
|
-
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);
|
|
70
|
-
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(root);
|
|
71
|
-
if (scrollContainer) {
|
|
72
|
-
resizeObserver === null || resizeObserver === void 0 || resizeObserver.observe(scrollContainer);
|
|
73
|
-
}
|
|
74
|
-
return () => {
|
|
75
|
-
scrollContainer === null || scrollContainer === void 0 || scrollContainer.removeEventListener('scroll', updatePosition);
|
|
76
|
-
window.removeEventListener('scroll', updatePosition);
|
|
77
|
-
window.removeEventListener('resize', updatePosition);
|
|
78
|
-
resizeObserver === null || resizeObserver === void 0 || resizeObserver.disconnect();
|
|
79
|
-
};
|
|
80
|
-
}, [actionRef, rootRef]);
|
|
81
|
-
return position;
|
|
82
|
-
};
|
|
83
|
-
exports.useStickyActionPosition = useStickyActionPosition;
|
|
84
|
-
//# sourceMappingURL=useStickyActionPosition.js.map
|
package/lib/cjs/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useStickyActionPosition.js","names":["_react","require","STICKY_ACTION_INSET","STICKY_ACTION_SIZE","initialPosition","fixedRight","fixedTop","isFixed","isSticky","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","undefined","useStickyActionPosition","rootRef","actionRef","position","setPosition","useState","useEffect","root","current","action","scrollContainer","updatePosition","rootRect","getBoundingClientRect","containerTop","top","Boolean","bottom","Math","max","innerWidth","right","currentPosition","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect","exports"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst STICKY_ACTION_INSET = 8;\nconst STICKY_ACTION_SIZE = 32;\n\ntype StickyActionPosition = {\n fixedRight: number;\n fixedTop: number;\n isFixed: boolean;\n isSticky: boolean;\n};\n\nconst initialPosition: StickyActionPosition = {\n fixedRight: 0,\n fixedTop: STICKY_ACTION_INSET,\n isFixed: false,\n isSticky: false,\n};\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\nexport const useStickyActionPosition = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n): StickyActionPosition => {\n const [position, setPosition] = useState<StickyActionPosition>(initialPosition);\n\n useEffect(() => {\n const root = rootRef.current;\n const action = actionRef.current;\n\n if (!root || !action) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updatePosition = () => {\n const rootRect = root.getBoundingClientRect();\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const fixedTop = containerTop + STICKY_ACTION_INSET;\n const isSticky = rootRect.top <= fixedTop;\n const isFixed = Boolean(\n scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE,\n );\n const fixedRight = Math.max(0, window.innerWidth - rootRect.right);\n\n setPosition((currentPosition) => {\n if (\n currentPosition.fixedRight === fixedRight &&\n currentPosition.fixedTop === fixedTop &&\n currentPosition.isFixed === isFixed &&\n currentPosition.isSticky === isSticky\n ) {\n return currentPosition;\n }\n\n return { fixedRight, fixedTop, isFixed, isSticky };\n });\n };\n\n updatePosition();\n scrollContainer?.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('resize', updatePosition);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updatePosition);\n window.removeEventListener('scroll', updatePosition);\n window.removeEventListener('resize', updatePosition);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return position;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
const STICKY_ACTION_INSET = 8;
|
|
3
|
-
const STICKY_ACTION_SIZE = 32;
|
|
4
|
-
const initialPosition = {
|
|
5
|
-
fixedRight: 0,
|
|
6
|
-
fixedTop: STICKY_ACTION_INSET,
|
|
7
|
-
isFixed: false,
|
|
8
|
-
isSticky: false
|
|
9
|
-
};
|
|
10
|
-
const isScrollable = element => {
|
|
11
|
-
const {
|
|
12
|
-
overflow,
|
|
13
|
-
overflowY
|
|
14
|
-
} = window.getComputedStyle(element);
|
|
15
|
-
return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);
|
|
16
|
-
};
|
|
17
|
-
const getScrollableAncestor = element => {
|
|
18
|
-
let parent = element.parentElement;
|
|
19
|
-
while (parent) {
|
|
20
|
-
if (isScrollable(parent)) {
|
|
21
|
-
return parent;
|
|
22
|
-
}
|
|
23
|
-
parent = parent.parentElement;
|
|
24
|
-
}
|
|
25
|
-
return undefined;
|
|
26
|
-
};
|
|
27
|
-
export const useStickyActionPosition = (rootRef, actionRef) => {
|
|
28
|
-
const [position, setPosition] = useState(initialPosition);
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
const root = rootRef.current;
|
|
31
|
-
const action = actionRef.current;
|
|
32
|
-
if (!root || !action) {
|
|
33
|
-
return undefined;
|
|
34
|
-
}
|
|
35
|
-
const scrollContainer = getScrollableAncestor(root);
|
|
36
|
-
const updatePosition = () => {
|
|
37
|
-
const rootRect = root.getBoundingClientRect();
|
|
38
|
-
const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;
|
|
39
|
-
const fixedTop = containerTop + STICKY_ACTION_INSET;
|
|
40
|
-
const isSticky = rootRect.top <= fixedTop;
|
|
41
|
-
const isFixed = Boolean(scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE);
|
|
42
|
-
const fixedRight = Math.max(0, window.innerWidth - rootRect.right);
|
|
43
|
-
setPosition(currentPosition => {
|
|
44
|
-
if (currentPosition.fixedRight === fixedRight && currentPosition.fixedTop === fixedTop && currentPosition.isFixed === isFixed && currentPosition.isSticky === isSticky) {
|
|
45
|
-
return currentPosition;
|
|
46
|
-
}
|
|
47
|
-
return {
|
|
48
|
-
fixedRight,
|
|
49
|
-
fixedTop,
|
|
50
|
-
isFixed,
|
|
51
|
-
isSticky
|
|
52
|
-
};
|
|
53
|
-
});
|
|
54
|
-
};
|
|
55
|
-
updatePosition();
|
|
56
|
-
scrollContainer?.addEventListener('scroll', updatePosition, {
|
|
57
|
-
passive: true
|
|
58
|
-
});
|
|
59
|
-
window.addEventListener('scroll', updatePosition, {
|
|
60
|
-
passive: true
|
|
61
|
-
});
|
|
62
|
-
window.addEventListener('resize', updatePosition);
|
|
63
|
-
const resizeObserver = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);
|
|
64
|
-
resizeObserver?.observe(root);
|
|
65
|
-
if (scrollContainer) {
|
|
66
|
-
resizeObserver?.observe(scrollContainer);
|
|
67
|
-
}
|
|
68
|
-
return () => {
|
|
69
|
-
scrollContainer?.removeEventListener('scroll', updatePosition);
|
|
70
|
-
window.removeEventListener('scroll', updatePosition);
|
|
71
|
-
window.removeEventListener('resize', updatePosition);
|
|
72
|
-
resizeObserver?.disconnect();
|
|
73
|
-
};
|
|
74
|
-
}, [actionRef, rootRef]);
|
|
75
|
-
return position;
|
|
76
|
-
};
|
|
77
|
-
//# sourceMappingURL=useStickyActionPosition.js.map
|
package/lib/esm/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useStickyActionPosition.js","names":["useEffect","useState","STICKY_ACTION_INSET","STICKY_ACTION_SIZE","initialPosition","fixedRight","fixedTop","isFixed","isSticky","isScrollable","element","overflow","overflowY","window","getComputedStyle","test","getScrollableAncestor","parent","parentElement","undefined","useStickyActionPosition","rootRef","actionRef","position","setPosition","root","current","action","scrollContainer","updatePosition","rootRect","getBoundingClientRect","containerTop","top","Boolean","bottom","Math","max","innerWidth","right","currentPosition","addEventListener","passive","resizeObserver","ResizeObserver","observe","removeEventListener","disconnect"],"sources":["../../../../../src/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.ts"],"sourcesContent":["import { RefObject, useEffect, useState } from 'react';\n\nconst STICKY_ACTION_INSET = 8;\nconst STICKY_ACTION_SIZE = 32;\n\ntype StickyActionPosition = {\n fixedRight: number;\n fixedTop: number;\n isFixed: boolean;\n isSticky: boolean;\n};\n\nconst initialPosition: StickyActionPosition = {\n fixedRight: 0,\n fixedTop: STICKY_ACTION_INSET,\n isFixed: false,\n isSticky: false,\n};\n\nconst isScrollable = (element: HTMLElement) => {\n const { overflow, overflowY } = window.getComputedStyle(element);\n\n return /auto|scroll|overlay/.test(`${overflow} ${overflowY}`);\n};\n\nconst getScrollableAncestor = (element: HTMLElement) => {\n let parent = element.parentElement;\n\n while (parent) {\n if (isScrollable(parent)) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return undefined;\n};\n\nexport const useStickyActionPosition = (\n rootRef: RefObject<HTMLElement>,\n actionRef: RefObject<HTMLElement>,\n): StickyActionPosition => {\n const [position, setPosition] = useState<StickyActionPosition>(initialPosition);\n\n useEffect(() => {\n const root = rootRef.current;\n const action = actionRef.current;\n\n if (!root || !action) {\n return undefined;\n }\n\n const scrollContainer = getScrollableAncestor(root);\n\n const updatePosition = () => {\n const rootRect = root.getBoundingClientRect();\n const containerTop = scrollContainer?.getBoundingClientRect().top ?? 0;\n const fixedTop = containerTop + STICKY_ACTION_INSET;\n const isSticky = rootRect.top <= fixedTop;\n const isFixed = Boolean(\n scrollContainer && isSticky && rootRect.bottom > fixedTop + STICKY_ACTION_SIZE,\n );\n const fixedRight = Math.max(0, window.innerWidth - rootRect.right);\n\n setPosition((currentPosition) => {\n if (\n currentPosition.fixedRight === fixedRight &&\n currentPosition.fixedTop === fixedTop &&\n currentPosition.isFixed === isFixed &&\n currentPosition.isSticky === isSticky\n ) {\n return currentPosition;\n }\n\n return { fixedRight, fixedTop, isFixed, isSticky };\n });\n };\n\n updatePosition();\n scrollContainer?.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('scroll', updatePosition, { passive: true });\n window.addEventListener('resize', updatePosition);\n\n const resizeObserver =\n typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(updatePosition);\n resizeObserver?.observe(root);\n\n if (scrollContainer) {\n resizeObserver?.observe(scrollContainer);\n }\n\n return () => {\n scrollContainer?.removeEventListener('scroll', updatePosition);\n window.removeEventListener('scroll', updatePosition);\n window.removeEventListener('resize', updatePosition);\n resizeObserver?.disconnect();\n };\n }, [actionRef, rootRef]);\n\n return position;\n};\n"],"mappings":"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","ignoreList":[]}
|
package/lib/types/components/code-highlighter/copy-to-clipboard/useStickyActionPosition.d.ts
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { RefObject } from 'react';
|
|
2
|
-
type StickyActionPosition = {
|
|
3
|
-
fixedRight: number;
|
|
4
|
-
fixedTop: number;
|
|
5
|
-
isFixed: boolean;
|
|
6
|
-
isSticky: boolean;
|
|
7
|
-
};
|
|
8
|
-
export declare const useStickyActionPosition: (rootRef: RefObject<HTMLElement>, actionRef: RefObject<HTMLElement>) => StickyActionPosition;
|
|
9
|
-
export {};
|