@atlaskit/reactions 22.2.3 → 22.2.5
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/CHANGELOG.md +13 -0
- package/dist/cjs/MockReactionsClient.js +2 -1
- package/dist/cjs/components/Counter/Counter.js +13 -11
- package/dist/cjs/components/Counter/styles.js +10 -7
- package/dist/cjs/components/Reaction/styles.js +2 -1
- package/dist/cjs/components/ReactionPicker/ReactionPicker.js +11 -4
- package/dist/cjs/components/ShowMore/ShowMore.js +1 -1
- package/dist/cjs/hooks/index.js +3 -3
- package/dist/cjs/hooks/useCloseManager.js +47 -0
- package/dist/cjs/i18n/cs.js +14 -13
- package/dist/cjs/i18n/da.js +14 -13
- package/dist/cjs/i18n/de.js +14 -13
- package/dist/cjs/i18n/en.js +15 -14
- package/dist/cjs/i18n/en_GB.js +15 -14
- package/dist/cjs/i18n/en_ZZ.js +15 -14
- package/dist/cjs/i18n/es.js +14 -13
- package/dist/cjs/i18n/fi.js +14 -13
- package/dist/cjs/i18n/fr.js +14 -13
- package/dist/cjs/i18n/hu.js +14 -13
- package/dist/cjs/i18n/it.js +14 -13
- package/dist/cjs/i18n/ja.js +14 -13
- package/dist/cjs/i18n/ko.js +14 -13
- package/dist/cjs/i18n/nb.js +14 -13
- package/dist/cjs/i18n/nl.js +14 -13
- package/dist/cjs/i18n/pl.js +14 -13
- package/dist/cjs/i18n/pt_BR.js +14 -13
- package/dist/cjs/i18n/ru.js +14 -13
- package/dist/cjs/i18n/sv.js +14 -13
- package/dist/cjs/i18n/th.js +14 -13
- package/dist/cjs/i18n/tr.js +14 -13
- package/dist/cjs/i18n/uk.js +14 -13
- package/dist/cjs/i18n/vi.js +14 -13
- package/dist/cjs/i18n/zh.js +14 -13
- package/dist/cjs/i18n/zh_TW.js +14 -13
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/MockReactionsClient.js +3 -1
- package/dist/es2019/components/Counter/Counter.js +14 -10
- package/dist/es2019/components/Counter/styles.js +6 -4
- package/dist/es2019/components/Reaction/styles.js +2 -1
- package/dist/es2019/components/ReactionPicker/ReactionPicker.js +9 -3
- package/dist/es2019/components/ShowMore/ShowMore.js +1 -1
- package/dist/es2019/hooks/index.js +1 -1
- package/dist/es2019/hooks/useCloseManager.js +42 -0
- package/dist/es2019/i18n/cs.js +14 -13
- package/dist/es2019/i18n/da.js +14 -13
- package/dist/es2019/i18n/de.js +14 -13
- package/dist/es2019/i18n/en.js +15 -14
- package/dist/es2019/i18n/en_GB.js +15 -14
- package/dist/es2019/i18n/en_ZZ.js +15 -14
- package/dist/es2019/i18n/es.js +14 -13
- package/dist/es2019/i18n/fi.js +14 -13
- package/dist/es2019/i18n/fr.js +14 -13
- package/dist/es2019/i18n/hu.js +14 -13
- package/dist/es2019/i18n/it.js +14 -13
- package/dist/es2019/i18n/ja.js +14 -13
- package/dist/es2019/i18n/ko.js +14 -13
- package/dist/es2019/i18n/nb.js +14 -13
- package/dist/es2019/i18n/nl.js +14 -13
- package/dist/es2019/i18n/pl.js +14 -13
- package/dist/es2019/i18n/pt_BR.js +14 -13
- package/dist/es2019/i18n/ru.js +14 -13
- package/dist/es2019/i18n/sv.js +14 -13
- package/dist/es2019/i18n/th.js +14 -13
- package/dist/es2019/i18n/tr.js +14 -13
- package/dist/es2019/i18n/uk.js +14 -13
- package/dist/es2019/i18n/vi.js +14 -13
- package/dist/es2019/i18n/zh.js +14 -13
- package/dist/es2019/i18n/zh_TW.js +14 -13
- package/dist/es2019/version.json +1 -1
- package/dist/esm/MockReactionsClient.js +3 -1
- package/dist/esm/components/Counter/Counter.js +14 -10
- package/dist/esm/components/Counter/styles.js +6 -4
- package/dist/esm/components/Reaction/styles.js +2 -1
- package/dist/esm/components/ReactionPicker/ReactionPicker.js +9 -3
- package/dist/esm/components/ShowMore/ShowMore.js +1 -1
- package/dist/esm/hooks/index.js +1 -1
- package/dist/esm/hooks/useCloseManager.js +42 -0
- package/dist/esm/i18n/cs.js +14 -13
- package/dist/esm/i18n/da.js +14 -13
- package/dist/esm/i18n/de.js +14 -13
- package/dist/esm/i18n/en.js +15 -14
- package/dist/esm/i18n/en_GB.js +15 -14
- package/dist/esm/i18n/en_ZZ.js +15 -14
- package/dist/esm/i18n/es.js +14 -13
- package/dist/esm/i18n/fi.js +14 -13
- package/dist/esm/i18n/fr.js +14 -13
- package/dist/esm/i18n/hu.js +14 -13
- package/dist/esm/i18n/it.js +14 -13
- package/dist/esm/i18n/ja.js +14 -13
- package/dist/esm/i18n/ko.js +14 -13
- package/dist/esm/i18n/nb.js +14 -13
- package/dist/esm/i18n/nl.js +14 -13
- package/dist/esm/i18n/pl.js +14 -13
- package/dist/esm/i18n/pt_BR.js +14 -13
- package/dist/esm/i18n/ru.js +14 -13
- package/dist/esm/i18n/sv.js +14 -13
- package/dist/esm/i18n/th.js +14 -13
- package/dist/esm/i18n/tr.js +14 -13
- package/dist/esm/i18n/uk.js +14 -13
- package/dist/esm/i18n/vi.js +14 -13
- package/dist/esm/i18n/zh.js +14 -13
- package/dist/esm/i18n/zh_TW.js +14 -13
- package/dist/esm/version.json +1 -1
- package/dist/types/components/Counter/styles.d.ts +2 -1
- package/dist/types/components/ReactionPicker/ReactionPicker.d.ts +4 -0
- package/dist/types/hooks/index.d.ts +1 -1
- package/dist/types/hooks/useCloseManager.d.ts +9 -0
- package/dist/types/i18n/cs.d.ts +13 -13
- package/dist/types/i18n/da.d.ts +13 -13
- package/dist/types/i18n/de.d.ts +13 -13
- package/dist/types/i18n/en.d.ts +14 -14
- package/dist/types/i18n/en_GB.d.ts +14 -14
- package/dist/types/i18n/en_ZZ.d.ts +14 -14
- package/dist/types/i18n/es.d.ts +13 -13
- package/dist/types/i18n/fi.d.ts +13 -13
- package/dist/types/i18n/fr.d.ts +13 -13
- package/dist/types/i18n/hu.d.ts +13 -13
- package/dist/types/i18n/it.d.ts +13 -13
- package/dist/types/i18n/ja.d.ts +13 -13
- package/dist/types/i18n/ko.d.ts +13 -13
- package/dist/types/i18n/nb.d.ts +13 -13
- package/dist/types/i18n/nl.d.ts +13 -13
- package/dist/types/i18n/pl.d.ts +13 -13
- package/dist/types/i18n/pt_BR.d.ts +13 -13
- package/dist/types/i18n/ru.d.ts +13 -13
- package/dist/types/i18n/sv.d.ts +13 -13
- package/dist/types/i18n/th.d.ts +13 -13
- package/dist/types/i18n/tr.d.ts +13 -13
- package/dist/types/i18n/uk.d.ts +13 -13
- package/dist/types/i18n/vi.d.ts +13 -13
- package/dist/types/i18n/zh.d.ts +13 -13
- package/dist/types/i18n/zh_TW.d.ts +13 -13
- package/package.json +6 -7
- package/dist/cjs/hooks/useClickAway.js +0 -36
- package/dist/es2019/hooks/useClickAway.js +0 -28
- package/dist/esm/hooks/useClickAway.js +0 -31
- package/dist/types/hooks/useClickAway.d.ts +0 -10
package/dist/cjs/i18n/vi.js
CHANGED
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
/* prettier-ignore */
|
|
7
8
|
/**
|
|
8
9
|
* NOTE:
|
|
9
10
|
*
|
|
@@ -12,18 +13,18 @@ exports.default = void 0;
|
|
|
12
13
|
*/
|
|
13
14
|
//Vietnamese (Vietnam)
|
|
14
15
|
var _default = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
"fabric.reactions.add": "Thêm tương tác",
|
|
17
|
+
"fabric.reactions.error.unexpected": "Tính năng tương tác tạm thời không hỗ trợ",
|
|
18
|
+
"fabric.reactions.loading": "Đang tải...",
|
|
19
|
+
"fabric.reactions.more.emojis": "Biểu tượng cảm xúc khác",
|
|
20
|
+
"fabric.reactions.more.info": "Xem thêm thông tin",
|
|
21
|
+
"fabric.reactions.other.reacted.users": "{count, plural, other {và {count} người khác}}",
|
|
22
|
+
"fabric.reactions.reactwithemoji": "Bày tỏ biểu tượng cảm xúc {emoji}",
|
|
23
|
+
"reactions.dialog.close": "Đóng",
|
|
24
|
+
"reactions.dialog.left.navigate": "Sang trái",
|
|
25
|
+
"reactions.dialog.reactions.count": "{count, plural, other {{count,number} tương tác}}",
|
|
26
|
+
"reactions.dialog.right.navigate": "Sang phải",
|
|
27
|
+
"reactions.dialog.viewall": "Xem ai đã bày tỏ cảm xúc",
|
|
28
|
+
"reactions.dialog.viewall.tooltip": "Xem tất cả tương tác của người dùng"
|
|
28
29
|
};
|
|
29
30
|
exports.default = _default;
|
package/dist/cjs/i18n/zh.js
CHANGED
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
/* prettier-ignore */
|
|
7
8
|
/**
|
|
8
9
|
* NOTE:
|
|
9
10
|
*
|
|
@@ -12,18 +13,18 @@ exports.default = void 0;
|
|
|
12
13
|
*/
|
|
13
14
|
//Chinese (Simplified)
|
|
14
15
|
var _default = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
"fabric.reactions.add": "添加反应",
|
|
17
|
+
"fabric.reactions.error.unexpected": "反应暂时不可用",
|
|
18
|
+
"fabric.reactions.loading": "正在加载...",
|
|
19
|
+
"fabric.reactions.more.emojis": "更多表情",
|
|
20
|
+
"fabric.reactions.more.info": "更多信息",
|
|
21
|
+
"fabric.reactions.other.reacted.users": "{count, plural, other {以及其他 {count} 个人}}",
|
|
22
|
+
"fabric.reactions.reactwithemoji": "使用 {emoji} 表情回应",
|
|
23
|
+
"reactions.dialog.close": "关闭",
|
|
24
|
+
"reactions.dialog.left.navigate": "向左导航",
|
|
25
|
+
"reactions.dialog.reactions.count": "{count, plural, other {{count,number} 条反应}}",
|
|
26
|
+
"reactions.dialog.right.navigate": "向右导航",
|
|
27
|
+
"reactions.dialog.viewall": "查看哪些人已反应",
|
|
28
|
+
"reactions.dialog.viewall.tooltip": "查看所有用户反应"
|
|
28
29
|
};
|
|
29
30
|
exports.default = _default;
|
package/dist/cjs/i18n/zh_TW.js
CHANGED
|
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
+
/* prettier-ignore */
|
|
7
8
|
/**
|
|
8
9
|
* NOTE:
|
|
9
10
|
*
|
|
@@ -12,18 +13,18 @@ exports.default = void 0;
|
|
|
12
13
|
*/
|
|
13
14
|
//Chinese (Traditional)
|
|
14
15
|
var _default = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
16
|
+
"fabric.reactions.add": "新增反應",
|
|
17
|
+
"fabric.reactions.error.unexpected": "暫時無法使用回覆功能",
|
|
18
|
+
"fabric.reactions.loading": "正在載入...",
|
|
19
|
+
"fabric.reactions.more.emojis": "更多表情符號",
|
|
20
|
+
"fabric.reactions.more.info": "更多資訊",
|
|
21
|
+
"fabric.reactions.other.reacted.users": "{count, plural, other {還有其他 {count} 個}}",
|
|
22
|
+
"fabric.reactions.reactwithemoji": "使用 {emoji} 表情符號回應",
|
|
23
|
+
"reactions.dialog.close": "關閉",
|
|
24
|
+
"reactions.dialog.left.navigate": "左側導覽",
|
|
25
|
+
"reactions.dialog.reactions.count": "{count, plural, other {{count,number} 個回應}}",
|
|
26
|
+
"reactions.dialog.right.navigate": "右側導覽",
|
|
27
|
+
"reactions.dialog.viewall": "查看誰新增了回應",
|
|
28
|
+
"reactions.dialog.viewall.tooltip": "檢視所有使用者的回應"
|
|
28
29
|
};
|
|
29
30
|
exports.default = _default;
|
package/dist/cjs/version.json
CHANGED
|
@@ -24,8 +24,10 @@ const getReactionKey = (containerAri, ari) => {
|
|
|
24
24
|
};
|
|
25
25
|
const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon'), getUser('bsmith', 'Bob Smith'), getUser('jdoe', 'Jane Doe'), getUser('mhomes', 'Mary Homes'), getUser('ckent', 'Clark Kent')];
|
|
26
26
|
export const simpleMockData = {
|
|
27
|
-
[getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:',
|
|
27
|
+
[getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 33, false), getReactionSummary(':astonished:', 99, false), getReactionSummary(':heart:', 44, false) // Widest character
|
|
28
|
+
]
|
|
28
29
|
};
|
|
30
|
+
|
|
29
31
|
const extendedMockData = {
|
|
30
32
|
[getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true, true), getReactionSummary(':thumbsup:', 999, false, true), getReactionSummary(':astonished:', 9, false, true), getReactionSummary(':heart:', 99, false, true), getReactionSummary(':thinking:', 10, false, true), getReactionSummary(':clap:', 99, false, true), getReactionSummary(':thumbsdown:', 2, false, true), getReactionSummary(':bulb:', 16, false, true), getReactionSummary(':star:', 9999, false, true), getReactionSummary(':green_heart:', 9, false, true), getReactionSummary(':blue_heart:', 8392, false, true), getReactionSummary(':broken_heart:', 1, false, true), getReactionSummary(':grinning:', 10601, false, true), getReactionSummary(':slight_smile:', 99, false, true)]
|
|
31
33
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { useEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import { jsx, css } from '@emotion/react';
|
|
4
4
|
import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
|
|
5
5
|
// eslint-disable-next-line @atlaskit/design-system/no-banned-imports
|
|
6
|
-
|
|
6
|
+
|
|
7
7
|
import { utils } from '../../shared';
|
|
8
8
|
import * as styles from './styles';
|
|
9
9
|
|
|
@@ -42,17 +42,21 @@ export const Counter = ({
|
|
|
42
42
|
return utils.formatLargeNumber(value);
|
|
43
43
|
}
|
|
44
44
|
};
|
|
45
|
-
const
|
|
45
|
+
const lastValue = useRef();
|
|
46
46
|
const label = getLabel(value);
|
|
47
|
-
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
lastValue.current = value;
|
|
49
|
+
}, [value]);
|
|
50
|
+
const isIncreasing = useMemo(() => {
|
|
51
|
+
return lastValue.current ? lastValue.current < value : false;
|
|
52
|
+
}, [value]);
|
|
48
53
|
return jsx("div", {
|
|
49
54
|
className: className,
|
|
50
55
|
"data-testid": RENDER_COMPONENT_WRAPPER,
|
|
51
|
-
css:
|
|
52
|
-
width: label.length * 7
|
|
53
|
-
}]
|
|
56
|
+
css: styles.countStyle
|
|
54
57
|
}, jsx(ExitingPersistence, null, jsx(SlideIn, {
|
|
55
|
-
enterFrom:
|
|
58
|
+
enterFrom: isIncreasing ? 'top' : 'bottom',
|
|
59
|
+
exitTo: isIncreasing ? 'top' : 'bottom',
|
|
56
60
|
key: value,
|
|
57
61
|
duration: animationDuration
|
|
58
62
|
}, (motion, direction) => {
|
|
@@ -63,9 +67,9 @@ export const Counter = ({
|
|
|
63
67
|
})],
|
|
64
68
|
className: motion.className,
|
|
65
69
|
"data-testid": RENDER_COUNTER_TESTID
|
|
66
|
-
}, jsx("
|
|
70
|
+
}, jsx("span", {
|
|
67
71
|
"data-testid": RENDER_LABEL_TESTID,
|
|
68
|
-
css: highlight
|
|
72
|
+
css: highlight ? [styles.counterLabelStyle, styles.highlightStyle] : styles.counterLabelStyle,
|
|
69
73
|
key: value
|
|
70
74
|
}, label));
|
|
71
75
|
})));
|
|
@@ -9,11 +9,13 @@ export const countStyle = css({
|
|
|
9
9
|
padding: '4px 8px 4px 0',
|
|
10
10
|
lineHeight: '14px'
|
|
11
11
|
});
|
|
12
|
-
export const highlightStyle = css({
|
|
13
|
-
color: `var(--ds-text-selected, ${B400})`,
|
|
14
|
-
fontWeight: 600
|
|
15
|
-
});
|
|
16
12
|
export const containerStyle = css({
|
|
17
13
|
display: 'flex',
|
|
18
14
|
flexDirection: 'column'
|
|
15
|
+
});
|
|
16
|
+
export const highlightStyle = css({
|
|
17
|
+
color: `var(--ds-text-selected, ${B400})`
|
|
18
|
+
});
|
|
19
|
+
export const counterLabelStyle = css({
|
|
20
|
+
fontVariantNumeric: 'tabular-nums'
|
|
19
21
|
});
|
|
@@ -41,7 +41,8 @@ export const reactionStyle = css({
|
|
|
41
41
|
transitionDuration: '0s, 0.2s',
|
|
42
42
|
// disabling browser focus outline
|
|
43
43
|
outline: 'none'
|
|
44
|
-
}
|
|
44
|
+
},
|
|
45
|
+
overflow: 'hidden'
|
|
45
46
|
});
|
|
46
47
|
export const reactedStyle = css({
|
|
47
48
|
backgroundColor: `var(--ds-background-selected, ${B50})`,
|
|
@@ -9,7 +9,7 @@ import { Selector } from '../Selector';
|
|
|
9
9
|
import { Trigger } from '../Trigger';
|
|
10
10
|
import { UFO } from '../../analytics';
|
|
11
11
|
import { i18n } from '../../shared';
|
|
12
|
-
import {
|
|
12
|
+
import { useCloseManager } from '../../hooks';
|
|
13
13
|
import * as styles from './styles';
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -17,6 +17,11 @@ import * as styles from './styles';
|
|
|
17
17
|
*/
|
|
18
18
|
export const RENDER_REACTIONPICKER_TESTID = 'reactionPicker-testid';
|
|
19
19
|
|
|
20
|
+
/**
|
|
21
|
+
* Test id for ReactionPicker panel div
|
|
22
|
+
*/
|
|
23
|
+
export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
|
|
24
|
+
|
|
20
25
|
/**
|
|
21
26
|
* Emoji Picker Controller Id for Accessibility Labels
|
|
22
27
|
*/
|
|
@@ -88,10 +93,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
|
|
|
88
93
|
/**
|
|
89
94
|
* Custom hook triggers when user clicks outside the reactions picker
|
|
90
95
|
*/
|
|
91
|
-
|
|
96
|
+
useCloseManager(wrapperRef, () => {
|
|
92
97
|
onCancel();
|
|
93
98
|
close();
|
|
94
|
-
},
|
|
99
|
+
}, true, settings.isOpen);
|
|
95
100
|
|
|
96
101
|
/**
|
|
97
102
|
* Event callback when the picker is closed
|
|
@@ -194,6 +199,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
|
|
|
194
199
|
updatePopper.current = update;
|
|
195
200
|
return jsx(Fragment, null, settings.isOpen && jsx("div", {
|
|
196
201
|
id: PICKER_CONTROL_ID,
|
|
202
|
+
"data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
|
|
197
203
|
style: {
|
|
198
204
|
zIndex: layers.layer(),
|
|
199
205
|
...style
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { useCloseManager } from './useCloseManager';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Custom hook to detect when user action is outside given container ref or press escape key
|
|
5
|
+
* @param ref ref object to an html element
|
|
6
|
+
* @param callback event callback when detected a click outside the ref object or escape key is pressed
|
|
7
|
+
* @param useCapture (Optional) use capture phase of event. @default false
|
|
8
|
+
* @param enabled (Optional) enable/disable the outside click or escape key press handler. @default true
|
|
9
|
+
*/
|
|
10
|
+
export function useCloseManager(ref, callback, useCapture = false, enabled = true) {
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!enabled) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Alert if clicked on outside of element
|
|
18
|
+
*/
|
|
19
|
+
function handleClickOutside(event) {
|
|
20
|
+
if (ref.current && event.target instanceof Node && !ref.current.contains(event.target)) {
|
|
21
|
+
callback();
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
function handleKeydown(event) {
|
|
25
|
+
const {
|
|
26
|
+
key
|
|
27
|
+
} = event;
|
|
28
|
+
if (key === 'Escape' || key === 'Esc') {
|
|
29
|
+
callback();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Bind the event listener
|
|
34
|
+
document.addEventListener('click', handleClickOutside, useCapture);
|
|
35
|
+
document.addEventListener('keydown', handleKeydown);
|
|
36
|
+
return () => {
|
|
37
|
+
// Unbind the event listener on clean up
|
|
38
|
+
document.removeEventListener('click', handleClickOutside, useCapture);
|
|
39
|
+
document.removeEventListener('keydown', handleKeydown);
|
|
40
|
+
};
|
|
41
|
+
}, [ref, callback, useCapture, enabled]);
|
|
42
|
+
}
|
package/dist/es2019/i18n/cs.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
1
2
|
/**
|
|
2
3
|
* NOTE:
|
|
3
4
|
*
|
|
@@ -6,17 +7,17 @@
|
|
|
6
7
|
*/
|
|
7
8
|
//Czech
|
|
8
9
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
"fabric.reactions.add": "Přidat reakci",
|
|
11
|
+
"fabric.reactions.error.unexpected": "Reakce jsou dočasně nedostupné.",
|
|
12
|
+
"fabric.reactions.loading": "Načítání...",
|
|
13
|
+
"fabric.reactions.more.emojis": "Více smajlíků",
|
|
14
|
+
"fabric.reactions.more.info": "Další informace",
|
|
15
|
+
"fabric.reactions.other.reacted.users": "{count, plural, one {a jeden další} few {a {count} další} many {a {count} dalšího} other {a {count} dalších}}",
|
|
16
|
+
"fabric.reactions.reactwithemoji": "Reagovat pomocí smajlíku {emoji}",
|
|
17
|
+
"reactions.dialog.close": "Zavřít",
|
|
18
|
+
"reactions.dialog.left.navigate": "Navigace doleva",
|
|
19
|
+
"reactions.dialog.reactions.count": "{count, plural, one {{count,number} reakce} few {{count,number} reakce} many {{count,number} reakce} other {{count,number} reakcí}}",
|
|
20
|
+
"reactions.dialog.right.navigate": "Navigace doprava",
|
|
21
|
+
"reactions.dialog.viewall": "Podívejte se, kdo reagoval",
|
|
22
|
+
"reactions.dialog.viewall.tooltip": "Zobrazit všechny reakce uživatelů"
|
|
22
23
|
};
|
package/dist/es2019/i18n/da.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
1
2
|
/**
|
|
2
3
|
* NOTE:
|
|
3
4
|
*
|
|
@@ -6,17 +7,17 @@
|
|
|
6
7
|
*/
|
|
7
8
|
//Danish (Denmark)
|
|
8
9
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
"fabric.reactions.add": "Tilføj reaktion",
|
|
11
|
+
"fabric.reactions.error.unexpected": "Reaktioner er midlertidigt utilgængelige",
|
|
12
|
+
"fabric.reactions.loading": "Indlæser ...",
|
|
13
|
+
"fabric.reactions.more.emojis": "Flere emojis",
|
|
14
|
+
"fabric.reactions.more.info": "Flere oplysninger",
|
|
15
|
+
"fabric.reactions.other.reacted.users": "{count, plural, one {og én anden} other {og {count} andre}}",
|
|
16
|
+
"fabric.reactions.reactwithemoji": "Reager med emojien {emoji}",
|
|
17
|
+
"reactions.dialog.close": "Luk",
|
|
18
|
+
"reactions.dialog.left.navigate": "Navigation til venstre",
|
|
19
|
+
"reactions.dialog.reactions.count": "{count, plural, one {{count,number} reaktion} other {{count,number} reaktioner}}",
|
|
20
|
+
"reactions.dialog.right.navigate": "Navigation til højre",
|
|
21
|
+
"reactions.dialog.viewall": "Se, hvem der har reageret",
|
|
22
|
+
"reactions.dialog.viewall.tooltip": "Se alle brugerreaktioner"
|
|
22
23
|
};
|
package/dist/es2019/i18n/de.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
1
2
|
/**
|
|
2
3
|
* NOTE:
|
|
3
4
|
*
|
|
@@ -6,17 +7,17 @@
|
|
|
6
7
|
*/
|
|
7
8
|
//German (Germany)
|
|
8
9
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
"fabric.reactions.add": "Reaktion hinzufügen",
|
|
11
|
+
"fabric.reactions.error.unexpected": "Reaktionen sind vorübergehend nicht verfügbar.",
|
|
12
|
+
"fabric.reactions.loading": "Wird geladen...",
|
|
13
|
+
"fabric.reactions.more.emojis": "Mehr Emojis",
|
|
14
|
+
"fabric.reactions.more.info": "Weitere Informationen",
|
|
15
|
+
"fabric.reactions.other.reacted.users": "{count, plural, one {und ein weiterer} other {und {count} weitere}}",
|
|
16
|
+
"fabric.reactions.reactwithemoji": "Mit {emoji}-Emoji reagieren",
|
|
17
|
+
"reactions.dialog.close": "Schließen",
|
|
18
|
+
"reactions.dialog.left.navigate": "Nach links navigieren",
|
|
19
|
+
"reactions.dialog.reactions.count": "{count, plural, one {{count,number} Reaktion} other {{count,number} Reaktionen}}",
|
|
20
|
+
"reactions.dialog.right.navigate": "Nach rechts navigieren",
|
|
21
|
+
"reactions.dialog.viewall": "Reaktionen ansehen",
|
|
22
|
+
"reactions.dialog.viewall.tooltip": "Alle Benutzerreaktionen anzeigen"
|
|
22
23
|
};
|
package/dist/es2019/i18n/en.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
1
2
|
/**
|
|
2
3
|
* NOTE:
|
|
3
4
|
*
|
|
@@ -6,18 +7,18 @@
|
|
|
6
7
|
*/
|
|
7
8
|
//
|
|
8
9
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
10
|
+
"fabric.reactions.add": "Add reaction",
|
|
11
|
+
"fabric.reactions.error.unexpected": "Reactions are temporarily unavailable",
|
|
12
|
+
"fabric.reactions.loading": "Loading...",
|
|
13
|
+
"fabric.reactions.more.emojis": "More emojis",
|
|
14
|
+
"fabric.reactions.more.info": "More info",
|
|
15
|
+
"fabric.reactions.other.reacted.users": "{count, plural, one {and one other} other {and {count} others}}",
|
|
16
|
+
"fabric.reactions.reactwithemoji": "React with {emoji} emoji",
|
|
17
|
+
"reactions.dialog.close": "Close",
|
|
18
|
+
"reactions.dialog.emoji.name": "{emojiName}",
|
|
19
|
+
"reactions.dialog.left.navigate": "Left Navigate",
|
|
20
|
+
"reactions.dialog.reactions.count": "{count, plural, one {# reaction} other {# reactions} }",
|
|
21
|
+
"reactions.dialog.right.navigate": "Right Navigate",
|
|
22
|
+
"reactions.dialog.viewall": "See who reacted",
|
|
23
|
+
"reactions.dialog.viewall.tooltip": "View all user reactions"
|
|
23
24
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
1
2
|
/**
|
|
2
3
|
* NOTE:
|
|
3
4
|
*
|
|
@@ -6,18 +7,18 @@
|
|
|
6
7
|
*/
|
|
7
8
|
//English (United Kingdom)
|
|
8
9
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
10
|
+
"fabric.reactions.add": "Add reaction",
|
|
11
|
+
"fabric.reactions.error.unexpected": "Reactions are temporarily unavailable",
|
|
12
|
+
"fabric.reactions.loading": "Loading...",
|
|
13
|
+
"fabric.reactions.more.emojis": "More emojis",
|
|
14
|
+
"fabric.reactions.more.info": "More info",
|
|
15
|
+
"fabric.reactions.other.reacted.users": "{count, plural, one {and one other} other {and {count} others}}",
|
|
16
|
+
"fabric.reactions.reactwithemoji": "React with {emoji} emoji",
|
|
17
|
+
"reactions.dialog.close": "Close",
|
|
18
|
+
"reactions.dialog.emoji.name": "{emojiName}",
|
|
19
|
+
"reactions.dialog.left.navigate": "Left Navigate",
|
|
20
|
+
"reactions.dialog.reactions.count": "{count, plural, one {# reaction} other {# reactions} }",
|
|
21
|
+
"reactions.dialog.right.navigate": "Right Navigate",
|
|
22
|
+
"reactions.dialog.viewall": "See who reacted",
|
|
23
|
+
"reactions.dialog.viewall.tooltip": "View all user reactions"
|
|
23
24
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
1
2
|
/**
|
|
2
3
|
* NOTE:
|
|
3
4
|
*
|
|
@@ -6,18 +7,18 @@
|
|
|
6
7
|
*/
|
|
7
8
|
//
|
|
8
9
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
10
|
+
"fabric.reactions.add": "Add reaction",
|
|
11
|
+
"fabric.reactions.error.unexpected": "Reactions are temporarily unavailable",
|
|
12
|
+
"fabric.reactions.loading": "Loading...",
|
|
13
|
+
"fabric.reactions.more.emojis": "More emojis",
|
|
14
|
+
"fabric.reactions.more.info": "More info",
|
|
15
|
+
"fabric.reactions.other.reacted.users": "{count, plural, one {and one other} other {and {count} others}}",
|
|
16
|
+
"fabric.reactions.reactwithemoji": "React with {emoji} emoji",
|
|
17
|
+
"reactions.dialog.close": "Close",
|
|
18
|
+
"reactions.dialog.emoji.name": "{emojiName}",
|
|
19
|
+
"reactions.dialog.left.navigate": "Left Navigate",
|
|
20
|
+
"reactions.dialog.reactions.count": "{count, plural, one {{count,number} reaction} other {{count,number} reactions}}",
|
|
21
|
+
"reactions.dialog.right.navigate": "Right Navigate",
|
|
22
|
+
"reactions.dialog.viewall": "See who reacted",
|
|
23
|
+
"reactions.dialog.viewall.tooltip": "View all user reactions"
|
|
23
24
|
};
|
package/dist/es2019/i18n/es.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* prettier-ignore */
|
|
1
2
|
/**
|
|
2
3
|
* NOTE:
|
|
3
4
|
*
|
|
@@ -6,17 +7,17 @@
|
|
|
6
7
|
*/
|
|
7
8
|
//Spanish (International)
|
|
8
9
|
export default {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
10
|
+
"fabric.reactions.add": "Añadir reacción",
|
|
11
|
+
"fabric.reactions.error.unexpected": "Las reacciones no están disponibles temporalmente",
|
|
12
|
+
"fabric.reactions.loading": "Cargando...",
|
|
13
|
+
"fabric.reactions.more.emojis": "Más emojis",
|
|
14
|
+
"fabric.reactions.more.info": "Más información",
|
|
15
|
+
"fabric.reactions.other.reacted.users": "{count, plural, one {y 1 más} other {y {count} más}}",
|
|
16
|
+
"fabric.reactions.reactwithemoji": "Reaccionar con el emoticono {emoji}",
|
|
17
|
+
"reactions.dialog.close": "Cerrar",
|
|
18
|
+
"reactions.dialog.left.navigate": "Desplazarse hacia la izquierda",
|
|
19
|
+
"reactions.dialog.reactions.count": "{count, plural, one {{count,number} reacción} other {{count,number} reacciones}}",
|
|
20
|
+
"reactions.dialog.right.navigate": "Desplazarse hacia la derecha",
|
|
21
|
+
"reactions.dialog.viewall": "Ver quién ha reaccionado",
|
|
22
|
+
"reactions.dialog.viewall.tooltip": "Ver todas las reacciones de los usuarios"
|
|
22
23
|
};
|