@azure/communication-react 1.11.1-alpha-202401180013 → 1.12.1-alpha-202401190013
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/dist/communication-react.d.ts +11 -1
- package/dist/dist-cjs/communication-react/index.js +45 -16
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/ReactionButton.d.ts +11 -1
- package/dist/dist-esm/react-components/src/components/ReactionButton.js +30 -14
- package/dist/dist-esm/react-components/src/components/ReactionButton.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.d.ts +6 -0
- package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js +16 -1
- package/dist/dist-esm/react-components/src/components/styles/ReactionButton.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +6 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Reaction.d.ts +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Reaction.js +1 -1
- package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Reaction.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.
|
|
1
|
+
{"version":3,"file":"telemetryVersion.js","sourceRoot":"","sources":["../../../../../acs-ui-common/src/telemetryVersion.js"],"names":[],"mappings":";AAAA,uCAAuC;AACvC,kCAAkC;AAElC,wCAAwC;AAExC,MAAM,CAAC,OAAO,GAAG,2BAA2B,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n// GENERATED FILE. DO NOT EDIT MANUALLY.\n\nmodule.exports = '1.12.1-alpha-202401190013';\n"]}
|
|
@@ -23,10 +23,20 @@ export interface ReactionButtonProps extends ControlBarButtonProps {
|
|
|
23
23
|
export interface ReactionButtonStrings {
|
|
24
24
|
/** Label of the button. */
|
|
25
25
|
label: string;
|
|
26
|
-
/**
|
|
26
|
+
/** Tooltip content when the button is disabled. */
|
|
27
27
|
tooltipDisabledContent?: string;
|
|
28
28
|
/** Tooltip content when the button is enabled. */
|
|
29
29
|
tooltipContent?: string;
|
|
30
|
+
/** Tooltip content of like reaction button. */
|
|
31
|
+
likeReactionTooltipContent?: string;
|
|
32
|
+
/** Tooltip content of heart reaction button. */
|
|
33
|
+
heartReactionTooltipContent?: string;
|
|
34
|
+
/** Tooltip content of laugh reaction button. */
|
|
35
|
+
laughReactionTooltipContent?: string;
|
|
36
|
+
/** Tooltip content of clap reaction button. */
|
|
37
|
+
applauseReactionTooltipContent?: string;
|
|
38
|
+
/** Tooltip content of surprised reaction button. */
|
|
39
|
+
surprisedReactionTooltipContent?: string;
|
|
30
40
|
}
|
|
31
41
|
/**
|
|
32
42
|
* A button to send reactions.
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// Copyright (c) Microsoft Corporation.
|
|
2
2
|
// Licensed under the MIT License.
|
|
3
3
|
/* @conditional-compile-remove(reaction) */
|
|
4
|
-
import { ContextualMenuItemType, DefaultPalette, mergeStyles, useTheme } from '@fluentui/react';
|
|
4
|
+
import { ContextualMenuItemType, DefaultPalette, IconButton, mergeStyles, TooltipHost, useTheme } from '@fluentui/react';
|
|
5
5
|
/* @conditional-compile-remove(reaction) */
|
|
6
6
|
import React, { useState } from 'react';
|
|
7
7
|
/* @conditional-compile-remove(reaction) */
|
|
@@ -13,7 +13,9 @@ import { useLocale } from '../localization';
|
|
|
13
13
|
/* @conditional-compile-remove(reaction) */
|
|
14
14
|
import { reactionEmoji } from './utils/videoTileStylesUtils';
|
|
15
15
|
/* @conditional-compile-remove(reaction) */
|
|
16
|
-
import { emojiStyles, reactionEmojiMenuStyles } from './styles/ReactionButton.styles';
|
|
16
|
+
import { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';
|
|
17
|
+
/* @conditional-compile-remove(reaction) */
|
|
18
|
+
import { isDarkThemed } from '../theming/themeUtils';
|
|
17
19
|
/* @conditional-compile-remove(reaction) */
|
|
18
20
|
/**
|
|
19
21
|
* A button to send reactions.
|
|
@@ -28,27 +30,41 @@ export const ReactionButton = (props) => {
|
|
|
28
30
|
const strings = Object.assign(Object.assign({}, localeStrings), props.strings);
|
|
29
31
|
const theme = useTheme();
|
|
30
32
|
const styles = reactionButtonStyles(theme);
|
|
31
|
-
const onRenderIcon = () => React.createElement(_HighContrastAwareIcon, { iconName: "ReactionButtonIcon" });
|
|
33
|
+
const onRenderIcon = () => (React.createElement(_HighContrastAwareIcon, { disabled: props.disabled, iconName: "ReactionButtonIcon" }));
|
|
32
34
|
const [isHoveredMap, setIsHoveredMap] = useState(new Map());
|
|
33
35
|
const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
const emojiButtonTooltip = new Map([
|
|
37
|
+
['like', strings.likeReactionTooltipContent],
|
|
38
|
+
['heart', strings.heartReactionTooltipContent],
|
|
39
|
+
['laugh', strings.laughReactionTooltipContent],
|
|
40
|
+
['applause', strings.applauseReactionTooltipContent],
|
|
41
|
+
['surprised', strings.surprisedReactionTooltipContent]
|
|
42
|
+
]);
|
|
43
|
+
const calloutStyle = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };
|
|
44
|
+
const calloutProps = {
|
|
45
|
+
gapSpace: 4,
|
|
46
|
+
styles: calloutStyle,
|
|
47
|
+
backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''
|
|
48
|
+
};
|
|
49
|
+
const renderEmoji = (item, dismissMenu) => (React.createElement("div", { style: reactionEmojiMenuStyles() }, emojis.map((emoji, index) => (React.createElement(TooltipHost, { key: index, "data-ui-id": index, hidden: props.disableTooltip, content: emojiButtonTooltip.get(emoji), styles: reactionToolTipHostStyle(), calloutProps: Object.assign({}, calloutProps) },
|
|
50
|
+
React.createElement(IconButton, { key: index, onClick: () => {
|
|
51
|
+
props.onReactionClicked(emoji);
|
|
52
|
+
setIsHoveredMap((prevMap) => {
|
|
53
|
+
return new Map(prevMap).set(emoji, false);
|
|
54
|
+
});
|
|
55
|
+
dismissMenu();
|
|
56
|
+
}, style: emojiStyles(reactionEmoji.get(emoji), isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
|
|
57
|
+
return new Map(prevMap).set(emoji, true);
|
|
58
|
+
}), onMouseLeave: () => setIsHoveredMap((prevMap) => {
|
|
37
59
|
return new Map(prevMap).set(emoji, false);
|
|
38
|
-
});
|
|
39
|
-
dismissMenu();
|
|
40
|
-
}, style: emojiStyles(reactionEmoji.get(emoji), isHoveredMap.get(emoji) ? 'running' : 'paused'), onMouseEnter: () => setIsHoveredMap((prevMap) => {
|
|
41
|
-
return new Map(prevMap).set(emoji, true);
|
|
42
|
-
}), onMouseLeave: () => setIsHoveredMap((prevMap) => {
|
|
43
|
-
return new Map(prevMap).set(emoji, false);
|
|
44
|
-
}) })))));
|
|
60
|
+
}) }))))));
|
|
45
61
|
const emojiList = [
|
|
46
62
|
{ key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }
|
|
47
63
|
];
|
|
48
64
|
return (React.createElement(ControlBarButton, Object.assign({}, props, { className: mergeStyles(styles, props.styles), menuProps: {
|
|
49
65
|
shouldFocusOnMount: true,
|
|
50
66
|
items: emojiList
|
|
51
|
-
}, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null) })));
|
|
67
|
+
}, onRenderIcon: (_a = props.onRenderIcon) !== null && _a !== void 0 ? _a : onRenderIcon, strings: strings, labelKey: (_b = props.labelKey) !== null && _b !== void 0 ? _b : 'reactionButtonLabel', onRenderMenuIcon: () => React.createElement("div", null), disabled: props.disabled })));
|
|
52
68
|
};
|
|
53
69
|
/* @conditional-compile-remove(reaction) */
|
|
54
70
|
const reactionButtonStyles = (theme) => ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,EACL,sBAAsB,EACtB,cAAc,EAGd,WAAW,EAEX,QAAQ,EACT,MAAM,iBAAiB,CAAC;AACzB,2CAA2C;AAC3C,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,2CAA2C;AAC3C,OAAO,EAAE,gBAAgB,EAAyB,MAAM,oBAAoB,CAAC;AAC7E,2CAA2C;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,2CAA2C;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,2CAA2C;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,2CAA2C;AAC3C,OAAO,EAAE,WAAW,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;
|
|
1
|
+
{"version":3,"file":"ReactionButton.js","sourceRoot":"","sources":["../../../../../../react-components/src/components/ReactionButton.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport {\n ContextualMenuItemType,\n DefaultPalette,\n IButtonStyles,\n ICalloutContentStyles,\n IconButton,\n IContextualMenuItem,\n mergeStyles,\n Theme,\n TooltipHost,\n useTheme\n} from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React, { useState } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { ControlBarButton, ControlBarButtonProps } from './ControlBarButton';\n/* @conditional-compile-remove(reaction) */\nimport { _HighContrastAwareIcon } from './HighContrastAwareIcon';\n/* @conditional-compile-remove(reaction) */\nimport { useLocale } from '../localization';\n/* @conditional-compile-remove(reaction) */\nimport { reactionEmoji } from './utils/videoTileStylesUtils';\n/* @conditional-compile-remove(reaction) */\nimport { emojiStyles, reactionEmojiMenuStyles, reactionToolTipHostStyle } from './styles/ReactionButton.styles';\n/* @conditional-compile-remove(reaction) */\nimport { isDarkThemed } from '../theming/themeUtils';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Props for {@link ReactionButton}.\n *\n * @beta\n */\nexport interface ReactionButtonProps extends ControlBarButtonProps {\n /**\n * Optional strings to override in component\n */\n strings?: Partial<ReactionButtonStrings>;\n /**\n * Click event to send reaction to meeting\n */\n onReactionClicked: (reaction: string) => Promise<void>;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * Strings of {@link ReactionButton} that can be overridden.\n *\n * @beta\n */\nexport interface ReactionButtonStrings {\n /** Label of the button. */\n label: string;\n /** Tooltip content when the button is disabled. */\n tooltipDisabledContent?: string;\n /** Tooltip content when the button is enabled. */\n tooltipContent?: string;\n /** Tooltip content of like reaction button. */\n likeReactionTooltipContent?: string;\n /** Tooltip content of heart reaction button. */\n heartReactionTooltipContent?: string;\n /** Tooltip content of laugh reaction button. */\n laughReactionTooltipContent?: string;\n /** Tooltip content of clap reaction button. */\n applauseReactionTooltipContent?: string;\n /** Tooltip content of surprised reaction button. */\n surprisedReactionTooltipContent?: string;\n}\n\n/* @conditional-compile-remove(reaction) */\n/**\n * A button to send reactions.\n *\n * Can be used with {@link ControlBar}.\n *\n * @beta\n */\nexport const ReactionButton = (props: ReactionButtonProps): JSX.Element => {\n const localeStrings = useLocale().strings.reactionButton;\n const strings = { ...localeStrings, ...props.strings };\n const theme = useTheme();\n const styles = reactionButtonStyles(theme);\n const onRenderIcon = (): JSX.Element => (\n <_HighContrastAwareIcon disabled={props.disabled} iconName=\"ReactionButtonIcon\" />\n );\n\n const [isHoveredMap, setIsHoveredMap] = useState(new Map());\n const emojis = ['like', 'heart', 'laugh', 'applause', 'surprised'];\n const emojiButtonTooltip: Map<string, string | undefined> = new Map([\n ['like', strings.likeReactionTooltipContent],\n ['heart', strings.heartReactionTooltipContent],\n ['laugh', strings.laughReactionTooltipContent],\n ['applause', strings.applauseReactionTooltipContent],\n ['surprised', strings.surprisedReactionTooltipContent]\n ]);\n\n const calloutStyle: Partial<ICalloutContentStyles> = { root: { padding: 0 }, calloutMain: { padding: '0.5rem' } };\n\n const calloutProps = {\n gapSpace: 4,\n styles: calloutStyle,\n backgroundColor: isDarkThemed(theme) ? theme.palette.neutralLighter : ''\n };\n\n const renderEmoji = (item: IContextualMenuItem, dismissMenu: () => void): React.JSX.Element => (\n <div style={reactionEmojiMenuStyles()}>\n {emojis.map((emoji, index) => (\n <TooltipHost\n key={index}\n data-ui-id={index}\n hidden={props.disableTooltip}\n content={emojiButtonTooltip.get(emoji)}\n styles={reactionToolTipHostStyle()}\n calloutProps={{ ...calloutProps }}\n >\n <IconButton\n key={index}\n onClick={() => {\n props.onReactionClicked(emoji);\n setIsHoveredMap((prevMap) => {\n return new Map(prevMap).set(emoji, false);\n });\n dismissMenu();\n }}\n style={emojiStyles(reactionEmoji.get(emoji), isHoveredMap.get(emoji) ? 'running' : 'paused')}\n onMouseEnter={() =>\n setIsHoveredMap((prevMap) => {\n return new Map(prevMap).set(emoji, true);\n })\n }\n onMouseLeave={() =>\n setIsHoveredMap((prevMap) => {\n return new Map(prevMap).set(emoji, false);\n })\n }\n />\n </TooltipHost>\n ))}\n </div>\n );\n\n const emojiList: IContextualMenuItem[] = [\n { key: 'reactions', itemType: ContextualMenuItemType.Normal, onRender: renderEmoji }\n ];\n\n return (\n <ControlBarButton\n {...props}\n className={mergeStyles(styles, props.styles)}\n menuProps={{\n shouldFocusOnMount: true,\n items: emojiList\n }}\n onRenderIcon={props.onRenderIcon ?? onRenderIcon}\n strings={strings}\n labelKey={props.labelKey ?? 'reactionButtonLabel'}\n onRenderMenuIcon={() => <div />}\n disabled={props.disabled}\n />\n );\n};\n\n/* @conditional-compile-remove(reaction) */\nconst reactionButtonStyles = (theme: Theme): IButtonStyles => ({\n rootChecked: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n rootCheckedHovered: {\n background: theme.palette.themePrimary,\n color: DefaultPalette.white\n },\n labelChecked: { color: DefaultPalette.white }\n});\n"]}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ITooltipHostStyles } from '@fluentui/react';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
/**
|
|
3
4
|
* @private
|
|
@@ -15,4 +16,9 @@ export declare const emojiStyles: (backgroundImage?: string, animationPlayState?
|
|
|
15
16
|
* @private
|
|
16
17
|
*/
|
|
17
18
|
export declare const reactionEmojiMenuStyles: () => React.CSSProperties;
|
|
19
|
+
/**
|
|
20
|
+
*
|
|
21
|
+
* @private
|
|
22
|
+
*/
|
|
23
|
+
export declare const reactionToolTipHostStyle: () => ITooltipHostStyles;
|
|
18
24
|
//# sourceMappingURL=ReactionButton.styles.d.ts.map
|
|
@@ -39,7 +39,7 @@ export const emojiStyles = (backgroundImage, animationPlayState) => {
|
|
|
39
39
|
backgroundSize: `44px 2142px`,
|
|
40
40
|
transition: 'opacity 2s',
|
|
41
41
|
backgroundColor: 'transparent',
|
|
42
|
-
transform:
|
|
42
|
+
transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
|
|
43
43
|
};
|
|
44
44
|
};
|
|
45
45
|
/* @conditional-compile-remove(reaction) */
|
|
@@ -57,4 +57,19 @@ export const reactionEmojiMenuStyles = () => {
|
|
|
57
57
|
height: '42px'
|
|
58
58
|
};
|
|
59
59
|
};
|
|
60
|
+
/* @conditional-compile-remove(reaction) */
|
|
61
|
+
/**
|
|
62
|
+
*
|
|
63
|
+
* @private
|
|
64
|
+
*/
|
|
65
|
+
export const reactionToolTipHostStyle = () => {
|
|
66
|
+
return {
|
|
67
|
+
root: {
|
|
68
|
+
display: 'flex',
|
|
69
|
+
flexDirection: 'column',
|
|
70
|
+
height: '100%',
|
|
71
|
+
width: '100%'
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
};
|
|
60
75
|
//# sourceMappingURL=ReactionButton.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,
|
|
1
|
+
{"version":3,"file":"ReactionButton.styles.js","sourceRoot":"","sources":["../../../../../../../react-components/src/components/styles/ReactionButton.styles.ts"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,EAAsB,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAIjF,2CAA2C;AAC3C;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,eAAe,CAAC,GAAG,EAAE,CAC7C,SAAS,CAAC;IACR,IAAI,EAAE;QACJ,kBAAkB,EAAE,YAAY;KACjC;IACD,EAAE,EAAE;QACF,kBAAkB,EAAE,SAAS;KAC9B;CACF,CAAC,CACH,CAAC;AAEF,2CAA2C;AAC3C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,eAAwB,EAAE,kBAA2B,EAAuB,EAAE;IACxG,OAAO;QACL,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,eAAe;QAChC,aAAa,EAAE,UAAU,EAAE;QAC3B,iBAAiB,EAAE,OAAO;QAC1B,uBAAuB,EAAE,YAAY;QACrC,kBAAkB,EAAE,kBAAkB;QACtC,uBAAuB,EAAE,UAAU;QACnC,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,kBAAkB,EAAE,QAAQ;QAC5B,cAAc,EAAE,aAAa;QAC7B,UAAU,EAAE,YAAY;QACxB,eAAe,EAAE,aAAa;QAC9B,SAAS,EAAE,GAAG,kBAAkB,KAAK,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,EAAE;KAC/E,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAwB,EAAE;IAC/D,OAAO;QACL,OAAO,EAAE,MAAM;QACf,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,MAAM;KACf,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAuB,EAAE;IAC/D,OAAO;QACL,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { ITooltipHostStyles, keyframes, memoizeFunction } from '@fluentui/react';\n/* @conditional-compile-remove(reaction) */\nimport React from 'react';\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @private\n */\nexport const playFrames = memoizeFunction(() =>\n keyframes({\n from: {\n backgroundPosition: '0px 8568px'\n },\n to: {\n backgroundPosition: '0px 0px'\n }\n })\n);\n\n/* @conditional-compile-remove(reaction) */\n/**\n * @param backgroundImage - the uri for the reaction emoji resource\n * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event\n *\n * @private\n */\nexport const emojiStyles = (backgroundImage?: string, animationPlayState?: string): React.CSSProperties => {\n return {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '100%',\n backgroundImage: backgroundImage,\n animationName: playFrames(),\n animationDuration: '8.12s',\n animationTimingFunction: `steps(102)`,\n animationPlayState: animationPlayState,\n animationIterationCount: 'infinite',\n justifyContent: 'center',\n alignItems: 'center',\n backgroundPosition: 'center',\n backgroundSize: `44px 2142px`,\n transition: 'opacity 2s',\n backgroundColor: 'transparent',\n transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`\n };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionEmojiMenuStyles = (): React.CSSProperties => {\n return {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'row',\n width: '220px',\n height: '42px'\n };\n};\n\n/* @conditional-compile-remove(reaction) */\n/**\n *\n * @private\n */\nexport const reactionToolTipHostStyle = (): ITooltipHostStyles => {\n return {\n root: {\n display: 'flex',\n flexDirection: 'column',\n height: '100%',\n width: '100%'\n }\n };\n};\n"]}
|
|
@@ -126,7 +126,12 @@
|
|
|
126
126
|
"reactionButton": {
|
|
127
127
|
"label": "React",
|
|
128
128
|
"tooltipDisabledContent": "Reaction action is disabled",
|
|
129
|
-
"tooltipContent": "Send a reaction"
|
|
129
|
+
"tooltipContent": "Send a reaction",
|
|
130
|
+
"likeReactionTooltipContent": "Like",
|
|
131
|
+
"heartReactionTooltipContent": "Love",
|
|
132
|
+
"laughReactionTooltipContent": "Laugh",
|
|
133
|
+
"applauseReactionTooltipContent": "Applause",
|
|
134
|
+
"surprisedReactionTooltipContent": "Surprised"
|
|
130
135
|
},
|
|
131
136
|
"messageThread": {
|
|
132
137
|
"yesterday": "Yesterday",
|
package/dist/dist-esm/react-composites/src/composites/CallComposite/components/buttons/Reaction.js
CHANGED
|
@@ -14,7 +14,7 @@ export const Reaction = (props) => {
|
|
|
14
14
|
const reactionButtonProps = usePropsFor(ReactionButton);
|
|
15
15
|
const styles = useMemo(() => { var _a; return concatButtonBaseStyles((_a = props.styles) !== null && _a !== void 0 ? _a : {}); }, [props.styles]);
|
|
16
16
|
const reactionButtonDisabled = isDisabled(props.option) || reactionButtonProps.disabled;
|
|
17
|
-
return (React.createElement(ReactionButton, Object.assign({ "data-ui-id": "call-composite-reaction-button" }, reactionButtonProps, { showLabel: props.displayType !== 'compact', disabled: reactionButtonDisabled || props.disabled, styles: styles })));
|
|
17
|
+
return (React.createElement(ReactionButton, Object.assign({ "data-ui-id": "call-composite-reaction-button" }, reactionButtonProps, { showLabel: props.displayType !== 'compact', disabled: reactionButtonDisabled || props.disabled, styles: styles, disableTooltip: props.disableTooltip })));
|
|
18
18
|
};
|
|
19
19
|
/* @conditional-compile-remove(reaction) */
|
|
20
20
|
const isDisabled = (option) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Reaction.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Reaction.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,EAA0B,cAAc,EAAuB,+CAAmC;AACzG,2CAA2C;AAC3C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvC,2CAA2C;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,2CAA2C;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,
|
|
1
|
+
{"version":3,"file":"Reaction.js","sourceRoot":"","sources":["../../../../../../../../../react-composites/src/composites/CallComposite/components/buttons/Reaction.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,2CAA2C;AAC3C,OAAO,EAA0B,cAAc,EAAuB,+CAAmC;AACzG,2CAA2C;AAC3C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGvC,2CAA2C;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,2CAA2C;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AAErE,2CAA2C;AAC3C,eAAe;AACf,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAOxB,EAAe,EAAE;IAChB,MAAM,mBAAmB,GAAG,WAAW,CAAC,cAAc,CAAmC,CAAC;IAC1F,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,WAAC,OAAA,sBAAsB,CAAC,MAAA,KAAK,CAAC,MAAM,mCAAI,EAAE,CAAC,CAAA,EAAA,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEzF,MAAM,sBAAsB,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,mBAAmB,CAAC,QAAQ,CAAC;IAExF,OAAO,CACL,oBAAC,cAAc,gCACF,gCAAgC,IACvC,mBAAmB,IACvB,SAAS,EAAE,KAAK,CAAC,WAAW,KAAK,SAAS,EAC1C,QAAQ,EAAE,sBAAsB,IAAI,KAAK,CAAC,QAAQ,EAClD,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,2CAA2C;AAC3C,MAAM,UAAU,GAAG,CAAC,MAAwC,EAAW,EAAE;IACvE,IAAI,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI,IAAI,MAAM,KAAK,KAAK,EAAE,CAAC;QAChE,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,MAAM,CAAC,QAAQ,CAAC;AACzB,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(reaction) */\nimport { ControlBarButtonStyles, ReactionButton, ReactionButtonProps } from '@internal/react-components';\n/* @conditional-compile-remove(reaction) */\nimport React, { useMemo } from 'react';\n/* @conditional-compile-remove(reaction) */\nimport { CallControlDisplayType } from '../../../common/types/CommonCallControlOptions';\n/* @conditional-compile-remove(reaction) */\nimport { usePropsFor } from '../../hooks/usePropsFor';\n/* @conditional-compile-remove(reaction) */\nimport { concatButtonBaseStyles } from '../../styles/Buttons.styles';\n\n/* @conditional-compile-remove(reaction) */\n/** @private */\nexport const Reaction = (props: {\n // The value of `CallControlOptions.reactionButton`.\n option?: boolean | { disabled: boolean };\n displayType?: CallControlDisplayType;\n styles?: ControlBarButtonStyles;\n disabled?: boolean;\n disableTooltip?: boolean;\n}): JSX.Element => {\n const reactionButtonProps = usePropsFor(ReactionButton) as unknown as ReactionButtonProps;\n const styles = useMemo(() => concatButtonBaseStyles(props.styles ?? {}), [props.styles]);\n\n const reactionButtonDisabled = isDisabled(props.option) || reactionButtonProps.disabled;\n\n return (\n <ReactionButton\n data-ui-id=\"call-composite-reaction-button\"\n {...reactionButtonProps}\n showLabel={props.displayType !== 'compact'}\n disabled={reactionButtonDisabled || props.disabled}\n styles={styles}\n disableTooltip={props.disableTooltip}\n />\n );\n};\n\n/* @conditional-compile-remove(reaction) */\nconst isDisabled = (option?: boolean | { disabled: boolean }): boolean => {\n if (option === undefined || option === true || option === false) {\n return false;\n }\n return option.disabled;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@azure/communication-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.1-alpha-202401190013",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React library for building modern communication user experiences utilizing Azure Communication Services",
|
|
6
6
|
"keywords": [
|