@coorpacademy/components 11.11.1 → 11.11.3-alpha.2

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.
Files changed (67) hide show
  1. package/es/atom/battle-opponent/index.d.ts +19 -0
  2. package/es/atom/battle-opponent/index.d.ts.map +1 -0
  3. package/es/atom/battle-opponent/index.js +52 -0
  4. package/es/atom/battle-opponent/index.js.map +1 -0
  5. package/es/atom/battle-opponent/prop-types.d.ts +19 -0
  6. package/es/atom/battle-opponent/prop-types.d.ts.map +1 -0
  7. package/es/atom/battle-opponent/prop-types.js +11 -0
  8. package/es/atom/battle-opponent/prop-types.js.map +1 -0
  9. package/es/atom/battle-opponent/style.css +126 -0
  10. package/es/atom/tooltip/index.d.ts +3 -1
  11. package/es/atom/tooltip/index.d.ts.map +1 -1
  12. package/es/atom/tooltip/index.js +17 -7
  13. package/es/atom/tooltip/index.js.map +1 -1
  14. package/es/atom/tooltip/style.css +10 -2
  15. package/es/globals.d.js.map +1 -1
  16. package/es/molecule/battle-opponent-list/index.d.ts +18 -0
  17. package/es/molecule/battle-opponent-list/index.d.ts.map +1 -0
  18. package/es/molecule/battle-opponent-list/index.js +21 -0
  19. package/es/molecule/battle-opponent-list/index.js.map +1 -0
  20. package/es/molecule/battle-opponent-list/prop-types.d.ts +26 -0
  21. package/es/molecule/battle-opponent-list/prop-types.d.ts.map +1 -0
  22. package/es/molecule/battle-opponent-list/prop-types.js +14 -0
  23. package/es/molecule/battle-opponent-list/prop-types.js.map +1 -0
  24. package/es/molecule/video-player-mobile/index.native.d.ts +1 -1
  25. package/es/molecule/video-player-mobile/index.native.d.ts.map +1 -1
  26. package/es/molecule/video-player-mobile/index.native.js +26 -9
  27. package/es/molecule/video-player-mobile/index.native.js.map +1 -1
  28. package/es/organism/review-slide/index.native.d.ts.map +1 -1
  29. package/es/organism/review-slide/index.native.js +32 -15
  30. package/es/organism/review-slide/index.native.js.map +1 -1
  31. package/es/organism/user-preferences/index.d.ts.map +1 -1
  32. package/es/organism/user-preferences/index.js +6 -3
  33. package/es/organism/user-preferences/index.js.map +1 -1
  34. package/lib/atom/battle-opponent/index.d.ts +19 -0
  35. package/lib/atom/battle-opponent/index.d.ts.map +1 -0
  36. package/lib/atom/battle-opponent/index.js +70 -0
  37. package/lib/atom/battle-opponent/index.js.map +1 -0
  38. package/lib/atom/battle-opponent/prop-types.d.ts +19 -0
  39. package/lib/atom/battle-opponent/prop-types.d.ts.map +1 -0
  40. package/lib/atom/battle-opponent/prop-types.js +20 -0
  41. package/lib/atom/battle-opponent/prop-types.js.map +1 -0
  42. package/lib/atom/battle-opponent/style.css +126 -0
  43. package/lib/atom/tooltip/index.d.ts +3 -1
  44. package/lib/atom/tooltip/index.d.ts.map +1 -1
  45. package/lib/atom/tooltip/index.js +18 -7
  46. package/lib/atom/tooltip/index.js.map +1 -1
  47. package/lib/atom/tooltip/style.css +10 -2
  48. package/lib/globals.d.js.map +1 -1
  49. package/lib/molecule/battle-opponent-list/index.d.ts +18 -0
  50. package/lib/molecule/battle-opponent-list/index.d.ts.map +1 -0
  51. package/lib/molecule/battle-opponent-list/index.js +37 -0
  52. package/lib/molecule/battle-opponent-list/index.js.map +1 -0
  53. package/lib/molecule/battle-opponent-list/prop-types.d.ts +26 -0
  54. package/lib/molecule/battle-opponent-list/prop-types.d.ts.map +1 -0
  55. package/lib/molecule/battle-opponent-list/prop-types.js +23 -0
  56. package/lib/molecule/battle-opponent-list/prop-types.js.map +1 -0
  57. package/lib/molecule/video-player-mobile/index.native.d.ts +1 -1
  58. package/lib/molecule/video-player-mobile/index.native.d.ts.map +1 -1
  59. package/lib/molecule/video-player-mobile/index.native.js +29 -9
  60. package/lib/molecule/video-player-mobile/index.native.js.map +1 -1
  61. package/lib/organism/review-slide/index.native.d.ts.map +1 -1
  62. package/lib/organism/review-slide/index.native.js +31 -13
  63. package/lib/organism/review-slide/index.native.js.map +1 -1
  64. package/lib/organism/user-preferences/index.d.ts.map +1 -1
  65. package/lib/organism/user-preferences/index.js +10 -3
  66. package/lib/organism/user-preferences/index.js.map +1 -1
  67. package/package.json +4 -2
@@ -0,0 +1,19 @@
1
+ /// <reference types="react" />
2
+ import { WebContextValues } from '../provider/web-context';
3
+ import { BattleOpponentProps } from './prop-types';
4
+ declare const BattleOpponent: {
5
+ ({ isAlreadyEngaged, isRandom, userAvatarSrc, onClick, displayName, tooltipText }: BattleOpponentProps, legacyContext: WebContextValues): JSX.Element;
6
+ propTypes: {
7
+ isAlreadyEngaged: import("prop-types").Requireable<boolean>;
8
+ isRandom: import("prop-types").Requireable<boolean>;
9
+ userAvatarSrc: import("prop-types").Requireable<string>;
10
+ onClick: import("prop-types").Requireable<(...args: any[]) => any>;
11
+ displayName: import("prop-types").Requireable<string>;
12
+ tooltipText: import("prop-types").Requireable<string>;
13
+ };
14
+ contextTypes: {
15
+ translate: import("prop-types").Requireable<(...args: any[]) => any>;
16
+ };
17
+ };
18
+ export default BattleOpponent;
19
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,gBAAgB,EAAC,MAAM,yBAAyB,CAAC;AACzD,OAAkB,EAAC,mBAAmB,EAAC,MAAM,cAAc,CAAC;AAG5D,QAAA,MAAM,cAAc;uFAQf,mBAAmB,iBACP,gBAAgB;;;;;;;;;;;;CAsChC,CAAC;AAQF,eAAe,cAAc,CAAC"}
@@ -0,0 +1,52 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+ import React, { useMemo } from 'react';
4
+ import classnames from 'classnames';
5
+ import { NovaCompositionNavigationArrowRight as ArrowRight } from '@coorpacademy/nova-icons';
6
+ import ToolTip from '../tooltip';
7
+ import Provider, { GetTranslateFromContext } from '../provider';
8
+ import propTypes from './prop-types';
9
+ import style from './style.css';
10
+
11
+ const BattleOpponent = ({
12
+ isAlreadyEngaged,
13
+ isRandom,
14
+ userAvatarSrc,
15
+ onClick,
16
+ displayName,
17
+ tooltipText
18
+ }, legacyContext) => {
19
+ const translate = GetTranslateFromContext(legacyContext);
20
+ const wrapperClassnames = useMemo(() => classnames(style.card, style['opponent-card'], isRandom ? style.random : null), [isRandom]);
21
+ const displayNameClassnames = useMemo(() => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null), [isAlreadyEngaged]);
22
+ return /*#__PURE__*/React.createElement("div", _extends({}, !isAlreadyEngaged && {
23
+ onClick
24
+ }, {
25
+ className: wrapperClassnames,
26
+ "data-testid": "battle-opponent-wrapper"
27
+ }), /*#__PURE__*/React.createElement("div", {
28
+ className: style.avatar
29
+ }, isRandom ? null : /*#__PURE__*/React.createElement("img", {
30
+ src: userAvatarSrc,
31
+ "aria-hidden": "true"
32
+ })), /*#__PURE__*/React.createElement("p", {
33
+ className: displayNameClassnames
34
+ }, " ", displayName), isAlreadyEngaged ? /*#__PURE__*/React.createElement(ToolTip, {
35
+ fontSize: 12,
36
+ iconSize: "big",
37
+ TooltipContent: tooltipText,
38
+ closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
39
+ iconContainerClassName: style.infoIconTooltip
40
+ }) : /*#__PURE__*/React.createElement(ArrowRight, {
41
+ className: style.rightArrow,
42
+ width: 16,
43
+ height: 16
44
+ }));
45
+ };
46
+
47
+ BattleOpponent.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
48
+ BattleOpponent.contextTypes = {
49
+ translate: Provider.childContextTypes.translate
50
+ };
51
+ export default BattleOpponent;
52
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useMemo","classnames","NovaCompositionNavigationArrowRight","ArrowRight","ToolTip","Provider","GetTranslateFromContext","propTypes","style","BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","legacyContext","translate","wrapperClassnames","card","random","displayNameClassnames","name","alreadyEngaged","avatar","infoIconTooltip","rightArrow","contextTypes","childContextTypes"],"sources":["../../../src/atom/battle-opponent/index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowRight as ArrowRight} from '@coorpacademy/nova-icons';\nimport ToolTip from '../tooltip';\nimport Provider, {GetTranslateFromContext} from '../provider';\nimport {WebContextValues} from '../provider/web-context';\nimport propTypes, {BattleOpponentProps} from './prop-types';\nimport style from './style.css';\n\nconst BattleOpponent = (\n {\n isAlreadyEngaged,\n isRandom,\n userAvatarSrc,\n onClick,\n displayName,\n tooltipText\n }: BattleOpponentProps,\n legacyContext: WebContextValues\n) => {\n const translate: Required<WebContextValues>['translate'] = GetTranslateFromContext(legacyContext);\n const wrapperClassnames = useMemo(\n () => classnames(style.card, style['opponent-card'], isRandom ? style.random : null),\n [isRandom]\n );\n\n const displayNameClassnames = useMemo(\n () => classnames(style.name, isAlreadyEngaged ? style.alreadyEngaged : null),\n [isAlreadyEngaged]\n );\n\n return (\n <div\n {...(!isAlreadyEngaged && {onClick})}\n className={wrapperClassnames}\n data-testid=\"battle-opponent-wrapper\"\n >\n <div className={style.avatar}>\n {isRandom ? null : <img src={userAvatarSrc} aria-hidden=\"true\" />}\n </div>\n <p className={displayNameClassnames}> {displayName}</p>\n {isAlreadyEngaged ? (\n <ToolTip\n fontSize={12}\n iconSize=\"big\"\n TooltipContent={tooltipText}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n iconContainerClassName={style.infoIconTooltip}\n />\n ) : (\n <ArrowRight className={style.rightArrow} width={16} height={16} />\n )}\n </div>\n );\n};\n\nBattleOpponent.propTypes = propTypes;\n\nBattleOpponent.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nexport default BattleOpponent;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAAQC,mCAAmC,IAAIC,UAA/C,QAAgE,0BAAhE;AACA,OAAOC,OAAP,MAAoB,YAApB;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,aAAhD;AAEA,OAAOC,SAAP,MAA6C,cAA7C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC;AANF,CADqB,EASrBC,aATqB,KAUlB;EACH,MAAMC,SAAkD,GAAGX,uBAAuB,CAACU,aAAD,CAAlF;EACA,MAAME,iBAAiB,GAAGlB,OAAO,CAC/B,MAAMC,UAAU,CAACO,KAAK,CAACW,IAAP,EAAaX,KAAK,CAAC,eAAD,CAAlB,EAAqCG,QAAQ,GAAGH,KAAK,CAACY,MAAT,GAAkB,IAA/D,CADe,EAE/B,CAACT,QAAD,CAF+B,CAAjC;EAKA,MAAMU,qBAAqB,GAAGrB,OAAO,CACnC,MAAMC,UAAU,CAACO,KAAK,CAACc,IAAP,EAAaZ,gBAAgB,GAAGF,KAAK,CAACe,cAAT,GAA0B,IAAvD,CADmB,EAEnC,CAACb,gBAAD,CAFmC,CAArC;EAKA,oBACE,wCACO,CAACA,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEK,iBAFb;IAGE,eAAY;EAHd,iBAKE;IAAK,SAAS,EAAEV,KAAK,CAACgB;EAAtB,GACGb,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,eAAY;EAArC,EADrB,CALF,eAQE;IAAG,SAAS,EAAES;EAAd,QAAuCP,WAAvC,CARF,EASGJ,gBAAgB,gBACf,oBAAC,OAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,KAFX;IAGE,cAAc,EAAEK,WAHlB;IAIE,oCAAoC,EAAEE,SAAS,CAC7C,oDAD6C,CAJjD;IAOE,sBAAsB,EAAET,KAAK,CAACiB;EAPhC,EADe,gBAWf,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACkB,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EApBJ,CADF;AAyBD,CA/CD;;AAiDAjB,cAAc,CAACF,SAAf,2CAA2BA,SAA3B;AAEAE,cAAc,CAACkB,YAAf,GAA8B;EAC5BV,SAAS,EAAEZ,QAAQ,CAACuB,iBAAT,CAA2BX;AADV,CAA9B;AAIA,eAAeR,cAAf"}
@@ -0,0 +1,19 @@
1
+ import PropTypes from 'prop-types';
2
+ declare const propTypes: {
3
+ isAlreadyEngaged: PropTypes.Requireable<boolean>;
4
+ isRandom: PropTypes.Requireable<boolean>;
5
+ userAvatarSrc: PropTypes.Requireable<string>;
6
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
7
+ displayName: PropTypes.Requireable<string>;
8
+ tooltipText: PropTypes.Requireable<string>;
9
+ };
10
+ export declare type BattleOpponentProps = {
11
+ isAlreadyEngaged?: boolean;
12
+ isRandom?: boolean;
13
+ userAvatarSrc?: string;
14
+ onClick?: () => void;
15
+ displayName: string;
16
+ tooltipText?: string;
17
+ };
18
+ export default propTypes;
19
+ //# sourceMappingURL=prop-types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/atom/battle-opponent/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;CAOd,CAAC;AAEF,oBAAY,mBAAmB,GAAG;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,11 @@
1
+ import PropTypes from 'prop-types';
2
+ const propTypes = {
3
+ isAlreadyEngaged: PropTypes.bool,
4
+ isRandom: PropTypes.bool,
5
+ userAvatarSrc: PropTypes.string,
6
+ onClick: PropTypes.func,
7
+ displayName: PropTypes.string,
8
+ tooltipText: PropTypes.string
9
+ };
10
+ export default propTypes;
11
+ //# sourceMappingURL=prop-types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","isAlreadyEngaged","bool","isRandom","userAvatarSrc","string","onClick","func","displayName","tooltipText"],"sources":["../../../src/atom/battle-opponent/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n isAlreadyEngaged: PropTypes.bool,\n isRandom: PropTypes.bool,\n userAvatarSrc: PropTypes.string,\n onClick: PropTypes.func,\n displayName: PropTypes.string,\n tooltipText: PropTypes.string\n};\n\nexport type BattleOpponentProps = {\n isAlreadyEngaged?: boolean;\n isRandom?: boolean;\n userAvatarSrc?: string;\n onClick?: () => void;\n displayName: string;\n tooltipText?: string;\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,gBAAgB,EAAEF,SAAS,CAACG,IADZ;EAEhBC,QAAQ,EAAEJ,SAAS,CAACG,IAFJ;EAGhBE,aAAa,EAAEL,SAAS,CAACM,MAHT;EAIhBC,OAAO,EAAEP,SAAS,CAACQ,IAJH;EAKhBC,WAAW,EAAET,SAAS,CAACM,MALP;EAMhBI,WAAW,EAAEV,SAAS,CAACM;AANP,CAAlB;AAkBA,eAAeL,SAAf"}
@@ -0,0 +1,126 @@
1
+ @value breakpoints: "../../variables/breakpoints.css";
2
+ @value mobile from breakpoints;
3
+ @value colors: "../../variables/colors.css";
4
+ @value white from colors;
5
+ @value dark from colors;
6
+ @value black from colors;
7
+ @value cm_grey_75 from colors;
8
+ @value medium from colors;
9
+ @value light from colors;
10
+ @value brand from colors;
11
+
12
+ .rightArrow {
13
+ position: flex;
14
+ padding: 9px;
15
+ cursor: pointer;
16
+ opacity: 1;
17
+ user-select: none;
18
+ text-align: right;
19
+ color: dark;
20
+ }
21
+
22
+ .card {
23
+ margin: 5px;
24
+ }
25
+
26
+ .opponent-card {
27
+ flex: 1 1 350px;
28
+ height: 80px;
29
+ background-color: white;
30
+ box-shadow: 0 0 4px 1px rgba(0,0,0,0.10);
31
+ border-radius: 3px;
32
+ padding: 20px;
33
+ box-sizing: border-box;
34
+ display: flex;
35
+ align-items: center;
36
+ justify-content: space-between;
37
+ cursor: pointer;
38
+ }
39
+
40
+ .opponent-card .name {
41
+ font-family: 'Gilroy';
42
+ font-size: 15px;
43
+ font-weight: 700;
44
+ color: black;
45
+ flex-grow: 1;
46
+ }
47
+
48
+
49
+ .opponent-card .rightArrow {
50
+ margin-left: 20px;
51
+ }
52
+
53
+ /* div:not(.random) */
54
+ .avatar {
55
+ width: 50px;
56
+ height: 50px;
57
+ border-radius: 50%;
58
+ overflow: hidden;
59
+ background-color: light;
60
+ margin-right: 20px;
61
+ flex-shrink: 0;
62
+ }
63
+
64
+ .avatar img {
65
+ width: 100%;
66
+ height: auto;
67
+ }
68
+
69
+
70
+ .random {
71
+ color: medium;
72
+ }
73
+
74
+ .alreadyEngaged.name,
75
+ .random .name {
76
+ color: medium;
77
+ }
78
+
79
+ .random .avatar {
80
+ background-color: brand;
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ }
85
+
86
+ .random .avatar:before {
87
+ content: '?';
88
+ font-family: 'Gilroy';
89
+ font-size: 32px;
90
+ font-weight: 600;
91
+ color: white;
92
+ text-align: center;
93
+ }
94
+
95
+ .random .avatar img {
96
+ display: none;
97
+ }
98
+
99
+ .opponent-card:hover {
100
+ background-color: cm_grey_75;
101
+ }
102
+
103
+ .card .infoIconTooltip {
104
+ background: transparent;
105
+ /* height: 100%; */
106
+ }
107
+
108
+ @media mobile {
109
+ .opponent-card {
110
+ width: 100%;
111
+ padding: 10px;
112
+ }
113
+
114
+ .opponent-card .avatar {
115
+ margin-right: 10px;
116
+ }
117
+
118
+ .opponent-card .rightArrow {
119
+ margin-left: 10px;
120
+ }
121
+
122
+ .card {
123
+ margin: 0 0 10px;
124
+ }
125
+ }
126
+
@@ -1,6 +1,6 @@
1
1
  export function toggleStateOnKeyPress(state: any, setState: any, ref: any): (event: any) => void;
2
2
  export default ToolTip;
3
- declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize }: {
3
+ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "data-testid": dataTestId, closeToolTipInformationTextAriaLabel, toolTipIsVisible: _toolTipIsVisible, iconContainerClassName, delayHide, fontSize, iconSize }: {
4
4
  anchorId: any;
5
5
  TooltipContent: any;
6
6
  "aria-label": any;
@@ -10,6 +10,7 @@ declare function ToolTip({ anchorId, TooltipContent, "aria-label": ariaLabel, "d
10
10
  iconContainerClassName: any;
11
11
  delayHide?: number | undefined;
12
12
  fontSize?: number | undefined;
13
+ iconSize?: string | undefined;
13
14
  }): JSX.Element;
14
15
  declare namespace ToolTip {
15
16
  const propTypes: {
@@ -20,6 +21,7 @@ declare namespace ToolTip {
20
21
  iconContainerClassName: PropTypes.Requireable<string>;
21
22
  delayHide: PropTypes.Requireable<number>;
22
23
  fontSize: PropTypes.Requireable<number>;
24
+ iconSize: PropTypes.Requireable<string>;
23
25
  anchorId: PropTypes.Requireable<string>;
24
26
  toolTipIsVisible: PropTypes.Requireable<boolean>;
25
27
  };
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAwDO,iGASN;;AAED;;;;;;;;;;gBAwFC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAmEO,iGASN;;AAED;;;;;;;;;;;gBA0FC"}
@@ -3,19 +3,25 @@ import classnames from 'classnames';
3
3
  import PropTypes from 'prop-types';
4
4
  import ReactTooltip from 'react-tooltip';
5
5
  import isString from 'lodash/fp/isString';
6
+ import keys from 'lodash/fp/keys';
6
7
  import { NovaCompositionCoorpacademyInformationIcon as InformationIcon } from '@coorpacademy/nova-icons';
7
8
  import style from './style.css';
8
9
  const FontSizes = {
9
10
  12: style.tooltipContentFontSize12,
10
11
  14: style.tooltipContentFontSize14
11
12
  };
13
+ const IconSizes = {
14
+ small: 12,
15
+ big: 20
16
+ };
12
17
 
13
18
  const ToolTipWrapper = ({
14
19
  toolTipIsVisible,
15
20
  anchorId,
16
21
  closeToolTipInformationTextAriaLabel,
17
22
  content,
18
- handleContentMouseOver
23
+ handleContentMouseOver,
24
+ iconSize
19
25
  }) => {
20
26
  if (!toolTipIsVisible) return null;
21
27
 
@@ -30,7 +36,7 @@ const ToolTipWrapper = ({
30
36
  }, content);
31
37
  } else {
32
38
  return /*#__PURE__*/React.createElement("div", {
33
- className: style.toolTip,
39
+ className: classnames(style.toolTip, iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip),
34
40
  "data-testid": "tooltip",
35
41
  "aria-label": closeToolTipInformationTextAriaLabel,
36
42
  onMouseOver: handleContentMouseOver
@@ -43,7 +49,8 @@ ToolTipWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
43
49
  anchorId: PropTypes.string,
44
50
  closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,
45
51
  content: PropTypes.node,
46
- handleContentMouseOver: PropTypes.func
52
+ handleContentMouseOver: PropTypes.func,
53
+ iconSize: PropTypes.oneOf(keys(IconSizes))
47
54
  } : {};
48
55
  export const toggleStateOnKeyPress = (state, setState, ref) => event => {
49
56
  if (event.key === 'Enter') {
@@ -65,7 +72,8 @@ const ToolTip = ({
65
72
  toolTipIsVisible: _toolTipIsVisible,
66
73
  iconContainerClassName,
67
74
  delayHide = 250,
68
- fontSize = 14
75
+ fontSize = 14,
76
+ iconSize = 'small'
69
77
  }) => {
70
78
  const isComponent = useMemo(() => !isString(TooltipContent) && /*#__PURE__*/isValidElement(TooltipContent()), [TooltipContent]);
71
79
  const [toolTipIsVisible, setToolTipIsVisible] = useState(false);
@@ -110,8 +118,8 @@ const ToolTip = ({
110
118
  tabIndex: 0
111
119
  }, /*#__PURE__*/React.createElement(InformationIcon, {
112
120
  className: style.informationIcon,
113
- width: 12,
114
- height: 12,
121
+ width: IconSizes[iconSize],
122
+ height: IconSizes[iconSize],
115
123
  "aria-label": ariaLabel
116
124
  })), /*#__PURE__*/React.createElement(ToolTipWrapper, {
117
125
  toolTipIsVisible: toolTipIsVisible,
@@ -119,7 +127,8 @@ const ToolTip = ({
119
127
  closeToolTipInformationTextAriaLabel: closeToolTipInformationTextAriaLabel,
120
128
  content: content,
121
129
  handleContentMouseOver: handleContentMouseOver,
122
- fontSize: fontSize
130
+ fontSize: fontSize,
131
+ iconSize: iconSize
123
132
  }));
124
133
  };
125
134
 
@@ -132,6 +141,7 @@ ToolTip.propTypes = process.env.NODE_ENV !== "production" ? {
132
141
  iconContainerClassName: PropTypes.string,
133
142
  delayHide: PropTypes.number,
134
143
  fontSize: PropTypes.oneOf([12, 14]),
144
+ iconSize: PropTypes.oneOf(keys(IconSizes)),
135
145
  // ---------- React Tooltip exclusive --------------
136
146
  // externalHandling: if passed down, React Tooltip is used instead, due to limitations on
137
147
  // parents overflow hidden controls
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","toolTipReact","toolTip","propTypes","bool","string","isRequired","node","func","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number","oneOf"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n 12: style.tooltipContentFontSize12,\n 14: style.tooltipContentFontSize14\n};\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content,\n handleContentMouseOver\n}) => {\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={style.toolTip}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n onMouseOver={handleContentMouseOver}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node,\n handleContentMouseOver: PropTypes.func\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible,\n iconContainerClassName,\n delayHide = 250,\n fontSize = 14\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleContentMouseOver = useCallback(() => {\n mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n }, [mouseLeaveTimer]);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n }, [delayHide]);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n );\n }, [TooltipContent, fontSize, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n fontSize={fontSize}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={12}\n height={12}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n handleContentMouseOver={handleContentMouseOver}\n fontSize={fontSize}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- Regular Tooltip exclusive --------------\n iconContainerClassName: PropTypes.string,\n delayHide: PropTypes.number,\n fontSize: PropTypes.oneOf([12, 14]),\n // ---------- React Tooltip exclusive --------------\n // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","isValidElement","useState","useCallback","useMemo","classnames","PropTypes","ReactTooltip","isString","keys","NovaCompositionCoorpacademyInformationIcon","InformationIcon","style","FontSizes","tooltipContentFontSize12","tooltipContentFontSize14","IconSizes","small","big","ToolTipWrapper","toolTipIsVisible","anchorId","closeToolTipInformationTextAriaLabel","content","handleContentMouseOver","iconSize","toolTipReact","toolTip","bigIconToolTip","smallIconToolTip","propTypes","bool","string","isRequired","node","func","oneOf","toggleStateOnKeyPress","state","setState","ref","event","key","current","focus","stopPropagation","preventDefault","ToolTip","TooltipContent","ariaLabel","dataTestId","_toolTipIsVisible","iconContainerClassName","delayHide","fontSize","isComponent","setToolTipIsVisible","mouseLeaveTimer","setMouseLeaveTimer","undefined","handleKeyPress","clearTimeout","handleMouseOver","handleMouseLeave","setTimeout","tooltipContent","tooltipContainer","tooltipIconContainer","informationIcon","oneOfType","number"],"sources":["../../../src/atom/tooltip/index.js"],"sourcesContent":["import React, {isValidElement, useState, useCallback, useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport ReactTooltip from 'react-tooltip';\nimport isString from 'lodash/fp/isString';\nimport keys from 'lodash/fp/keys';\nimport {NovaCompositionCoorpacademyInformationIcon as InformationIcon} from '@coorpacademy/nova-icons';\nimport style from './style.css';\n\nconst FontSizes = {\n 12: style.tooltipContentFontSize12,\n 14: style.tooltipContentFontSize14\n};\n\nconst IconSizes = {\n small: 12,\n big: 20\n};\n\nconst ToolTipWrapper = ({\n toolTipIsVisible,\n anchorId,\n closeToolTipInformationTextAriaLabel,\n content,\n handleContentMouseOver,\n iconSize\n}) => {\n if (!toolTipIsVisible) return null;\n if (anchorId) {\n return (\n <ReactTooltip\n id={anchorId}\n className={style.toolTipReact}\n data-event-off=\"click\"\n place=\"left\"\n effect=\"solid\"\n aria-label={closeToolTipInformationTextAriaLabel}\n >\n {content}\n </ReactTooltip>\n );\n } else {\n return (\n <div\n className={classnames(\n style.toolTip,\n iconSize === 'big' ? style.bigIconToolTip : style.smallIconToolTip\n )}\n data-testid=\"tooltip\"\n aria-label={closeToolTipInformationTextAriaLabel}\n onMouseOver={handleContentMouseOver}\n >\n {content}\n </div>\n );\n }\n};\n\nToolTipWrapper.propTypes = {\n toolTipIsVisible: PropTypes.bool,\n anchorId: PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n content: PropTypes.node,\n handleContentMouseOver: PropTypes.func,\n iconSize: PropTypes.oneOf(keys(IconSizes))\n};\n\nexport const toggleStateOnKeyPress = (state, setState, ref) => event => {\n if (event.key === 'Enter') {\n if (ref) ref.current.focus();\n event.stopPropagation();\n event.preventDefault();\n setState(!state);\n } else if (event.key === 'Tab' || event.key === 'Escape') {\n setState(false);\n }\n};\n\nconst ToolTip = ({\n anchorId,\n TooltipContent,\n 'aria-label': ariaLabel,\n 'data-testid': dataTestId,\n closeToolTipInformationTextAriaLabel,\n toolTipIsVisible: _toolTipIsVisible,\n iconContainerClassName,\n delayHide = 250,\n fontSize = 14,\n iconSize = 'small'\n}) => {\n const isComponent = useMemo(\n () => !isString(TooltipContent) && isValidElement(TooltipContent()),\n [TooltipContent]\n );\n\n const [toolTipIsVisible, setToolTipIsVisible] = useState(false);\n\n const [mouseLeaveTimer, setMouseLeaveTimer] = useState(undefined);\n\n const handleKeyPress = useCallback(\n event => {\n toggleStateOnKeyPress(toolTipIsVisible, setToolTipIsVisible)(event);\n },\n [toolTipIsVisible]\n );\n\n const handleContentMouseOver = useCallback(() => {\n mouseLeaveTimer && /* istanbul ignore next */ clearTimeout(mouseLeaveTimer);\n }, [mouseLeaveTimer]);\n\n const handleMouseOver = useCallback(() => {\n mouseLeaveTimer && clearTimeout(mouseLeaveTimer);\n setToolTipIsVisible(true);\n }, [mouseLeaveTimer]);\n\n const handleMouseLeave = useCallback(() => {\n setMouseLeaveTimer(setTimeout(() => setToolTipIsVisible(false), delayHide));\n }, [delayHide]);\n\n const content = useMemo(() => {\n return isComponent ? (\n <TooltipContent />\n ) : (\n <p className={classnames([style.tooltipContent, FontSizes[fontSize]])}>{TooltipContent}</p>\n );\n }, [TooltipContent, fontSize, isComponent]);\n\n return anchorId ? (\n <ToolTipWrapper\n toolTipIsVisible={_toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n fontSize={fontSize}\n />\n ) : (\n <div\n className={style.tooltipContainer}\n onMouseLeave={handleMouseLeave}\n onMouseOver={handleMouseOver}\n >\n <button\n type=\"button\"\n className={classnames([style.tooltipIconContainer, iconContainerClassName])}\n data-testid={dataTestId}\n onKeyDown={handleKeyPress}\n tabIndex={0}\n >\n <InformationIcon\n className={style.informationIcon}\n width={IconSizes[iconSize]}\n height={IconSizes[iconSize]}\n aria-label={ariaLabel}\n />\n </button>\n <ToolTipWrapper\n toolTipIsVisible={toolTipIsVisible}\n anchorId={anchorId}\n closeToolTipInformationTextAriaLabel={closeToolTipInformationTextAriaLabel}\n content={content}\n handleContentMouseOver={handleContentMouseOver}\n fontSize={fontSize}\n iconSize={iconSize}\n />\n </div>\n );\n};\n\nToolTip.propTypes = {\n TooltipContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node, PropTypes.string]),\n 'data-testid': PropTypes.string,\n 'aria-label': PropTypes.string,\n closeToolTipInformationTextAriaLabel: PropTypes.string.isRequired,\n // ---------- Regular Tooltip exclusive --------------\n iconContainerClassName: PropTypes.string,\n delayHide: PropTypes.number,\n fontSize: PropTypes.oneOf([12, 14]),\n iconSize: PropTypes.oneOf(keys(IconSizes)),\n // ---------- React Tooltip exclusive --------------\n // externalHandling: if passed down, React Tooltip is used instead, due to limitations on\n // parents overflow hidden controls\n anchorId: PropTypes.string,\n toolTipIsVisible: PropTypes.bool\n};\n\nexport default ToolTip;\n"],"mappings":"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"}
@@ -34,12 +34,20 @@
34
34
  position: absolute;
35
35
  border-radius: 7px;
36
36
  background-color: cm_grey_700;
37
- right: -75px;
38
- bottom: 32px;
39
37
  height: auto;
40
38
  width: 200px;
41
39
  }
42
40
 
41
+ .bigIconToolTip {
42
+ right: -71px;
43
+ bottom: 31px;
44
+ }
45
+
46
+ .smallIconToolTip {
47
+ right: -75px;
48
+ bottom: 32px;
49
+ }
50
+
43
51
  .toolTip::before {
44
52
  content: '';
45
53
  display: inline-block;
@@ -1 +1 @@
1
- {"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
1
+ {"version":3,"file":"globals.d.js","names":[],"sources":["../src/globals.d.ts"],"sourcesContent":["declare module '@coorpacademy/nova-icons';\ndeclare module '@coorpacademy/react-native-slider';\ndeclare module '@react-native-community/blur';\ndeclare module '@coorpacademy/translate';\ndeclare module 'browser-env';\ndeclare module 'react-native/*';\ndeclare module 'color';\ndeclare module 'classnames';\ndeclare module '*.css';\n"],"mappings":""}
@@ -0,0 +1,18 @@
1
+ /// <reference types="react" />
2
+ import { BattleOpponentListProps } from './prop-types';
3
+ declare const BattleOpponentList: {
4
+ ({ opponents }: BattleOpponentListProps): JSX.Element[];
5
+ propTypes: {
6
+ opponents: import("prop-types").Requireable<(import("prop-types").InferProps<{
7
+ isAlreadyEngaged: import("prop-types").Requireable<boolean>;
8
+ isRandom: import("prop-types").Requireable<boolean>;
9
+ photo: import("prop-types").Requireable<string>;
10
+ onClick: import("prop-types").Requireable<(...args: any[]) => any>;
11
+ displayName: import("prop-types").Requireable<string>;
12
+ tooltipText: import("prop-types").Requireable<string>;
13
+ user_id: import("prop-types").Requireable<string>;
14
+ }> | null | undefined)[]>;
15
+ };
16
+ };
17
+ export default BattleOpponentList;
18
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/battle-opponent-list/index.tsx"],"names":[],"mappings":";AAIA,OAAkB,EAAC,uBAAuB,EAAC,MAAM,cAAc,CAAC;AAEhE,QAAA,MAAM,kBAAkB;oBAAiB,uBAAuB;;;;;;;;;;;;CAiB/D,CAAC;AAIF,eAAe,kBAAkB,CAAC"}
@@ -0,0 +1,21 @@
1
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
3
+ import React, { useMemo } from 'react';
4
+ import get from 'lodash/fp/get';
5
+ import map from 'lodash/fp/map';
6
+ import BattleOpponent from '../../atom/battle-opponent';
7
+ import propTypes from './prop-types';
8
+
9
+ const BattleOpponentList = ({
10
+ opponents
11
+ }) => {
12
+ const opponentList = useMemo(() => map(opponent => /*#__PURE__*/React.createElement(BattleOpponent, _extends({}, opponent, {
13
+ key: opponent.user_id,
14
+ userAvatarSrc: get('photo', opponent)
15
+ })), opponents), [opponents]);
16
+ return opponentList;
17
+ };
18
+
19
+ BattleOpponentList.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
20
+ export default BattleOpponentList;
21
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","names":["React","useMemo","get","map","BattleOpponent","propTypes","BattleOpponentList","opponents","opponentList","opponent","user_id"],"sources":["../../../src/molecule/battle-opponent-list/index.tsx"],"sourcesContent":["import React, {useMemo} from 'react';\nimport get from 'lodash/fp/get';\nimport map from 'lodash/fp/map';\nimport BattleOpponent from '../../atom/battle-opponent';\nimport propTypes, {BattleOpponentListProps} from './prop-types';\n\nconst BattleOpponentList = ({opponents}: BattleOpponentListProps) => {\n const opponentList = useMemo(\n () =>\n map(\n opponent => (\n <BattleOpponent\n {...opponent}\n key={opponent.user_id}\n userAvatarSrc={get('photo', opponent)}\n />\n ),\n opponents\n ),\n [opponents]\n );\n\n return opponentList;\n};\n\nBattleOpponentList.propTypes = propTypes;\n\nexport default BattleOpponentList;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,cAAP,MAA2B,4BAA3B;AACA,OAAOC,SAAP,MAAiD,cAAjD;;AAEA,MAAMC,kBAAkB,GAAG,CAAC;EAACC;AAAD,CAAD,KAA0C;EACnE,MAAMC,YAAY,GAAGP,OAAO,CAC1B,MACEE,GAAG,CACDM,QAAQ,iBACN,oBAAC,cAAD,eACMA,QADN;IAEE,GAAG,EAAEA,QAAQ,CAACC,OAFhB;IAGE,aAAa,EAAER,GAAG,CAAC,OAAD,EAAUO,QAAV;EAHpB,GAFD,EAQDF,SARC,CAFqB,EAY1B,CAACA,SAAD,CAZ0B,CAA5B;EAeA,OAAOC,YAAP;AACD,CAjBD;;AAmBAF,kBAAkB,CAACD,SAAnB,2CAA+BA,SAA/B;AAEA,eAAeC,kBAAf"}
@@ -0,0 +1,26 @@
1
+ import PropTypes from 'prop-types';
2
+ declare const propTypes: {
3
+ opponents: PropTypes.Requireable<(PropTypes.InferProps<{
4
+ isAlreadyEngaged: PropTypes.Requireable<boolean>;
5
+ isRandom: PropTypes.Requireable<boolean>;
6
+ photo: PropTypes.Requireable<string>;
7
+ onClick: PropTypes.Requireable<(...args: any[]) => any>;
8
+ displayName: PropTypes.Requireable<string>;
9
+ tooltipText: PropTypes.Requireable<string>;
10
+ user_id: PropTypes.Requireable<string>;
11
+ }> | null | undefined)[]>;
12
+ };
13
+ declare type MoocBattleOpponent = {
14
+ isAlreadyEngaged?: boolean;
15
+ isRandom?: boolean;
16
+ photo?: string;
17
+ onClick?: () => void;
18
+ displayName: string;
19
+ tooltipText: string;
20
+ user_id: string;
21
+ };
22
+ export declare type BattleOpponentListProps = {
23
+ opponents: MoocBattleOpponent[];
24
+ };
25
+ export default propTypes;
26
+ //# sourceMappingURL=prop-types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/battle-opponent-list/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;;;;CAYd,CAAC;AAEF,aAAK,kBAAkB,GAAG;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,uBAAuB,GAAG;IAAC,SAAS,EAAE,kBAAkB,EAAE,CAAA;CAAC,CAAC;AAExE,eAAe,SAAS,CAAC"}
@@ -0,0 +1,14 @@
1
+ import PropTypes from 'prop-types';
2
+ const propTypes = {
3
+ opponents: PropTypes.arrayOf(PropTypes.shape({
4
+ isAlreadyEngaged: PropTypes.bool,
5
+ isRandom: PropTypes.bool,
6
+ photo: PropTypes.string,
7
+ onClick: PropTypes.func,
8
+ displayName: PropTypes.string,
9
+ tooltipText: PropTypes.string,
10
+ user_id: PropTypes.string
11
+ }))
12
+ };
13
+ export default propTypes;
14
+ //# sourceMappingURL=prop-types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","opponents","arrayOf","shape","isAlreadyEngaged","bool","isRandom","photo","string","onClick","func","displayName","tooltipText","user_id"],"sources":["../../../src/molecule/battle-opponent-list/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n opponents: PropTypes.arrayOf(\n PropTypes.shape({\n isAlreadyEngaged: PropTypes.bool,\n isRandom: PropTypes.bool,\n photo: PropTypes.string,\n onClick: PropTypes.func,\n displayName: PropTypes.string,\n tooltipText: PropTypes.string,\n user_id: PropTypes.string\n })\n )\n};\n\ntype MoocBattleOpponent = {\n isAlreadyEngaged?: boolean;\n isRandom?: boolean;\n photo?: string;\n onClick?: () => void;\n displayName: string;\n tooltipText: string;\n user_id: string;\n};\n\nexport type BattleOpponentListProps = {opponents: MoocBattleOpponent[]};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,SAAS,EAAEF,SAAS,CAACG,OAAV,CACTH,SAAS,CAACI,KAAV,CAAgB;IACdC,gBAAgB,EAAEL,SAAS,CAACM,IADd;IAEdC,QAAQ,EAAEP,SAAS,CAACM,IAFN;IAGdE,KAAK,EAAER,SAAS,CAACS,MAHH;IAIdC,OAAO,EAAEV,SAAS,CAACW,IAJL;IAKdC,WAAW,EAAEZ,SAAS,CAACS,MALT;IAMdI,WAAW,EAAEb,SAAS,CAACS,MANT;IAOdK,OAAO,EAAEd,SAAS,CAACS;EAPL,CAAhB,CADS;AADK,CAAlB;AA0BA,eAAeR,SAAf"}
@@ -3,6 +3,6 @@ import { Media } from '../questions/types';
3
3
  export declare type Props = {
4
4
  media: Media;
5
5
  };
6
- declare const Video: ({ media }: Props) => JSX.Element;
6
+ declare const Video: ({ media }: Props) => JSX.Element | null;
7
7
  export default Video;
8
8
  //# sourceMappingURL=index.native.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/video-player-mobile/index.native.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAEzC,oBAAY,KAAK,GAAG;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAAC;AA0BnC,QAAA,MAAM,KAAK,cAAa,KAAK,gBAE5B,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/video-player-mobile/index.native.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAEzC,oBAAY,KAAK,GAAG;IAAC,KAAK,EAAE,KAAK,CAAA;CAAC,CAAC;AAwCnC,QAAA,MAAM,KAAK,cAAa,KAAK,uBAE5B,CAAC;AAEF,eAAe,KAAK,CAAC"}
@@ -1,31 +1,50 @@
1
1
  import React from 'react';
2
2
  import { StyleSheet, Text, View } from 'react-native';
3
3
  import JWPlayer from 'react-native-jw-media-player';
4
+ import Youtube from 'react-native-youtube';
5
+ import { Vimeo } from 'react-native-vimeo-iframe';
6
+ import { useTemplateContext } from '../../template/app-review/template-context';
4
7
  const styleSheet = StyleSheet.create({
5
8
  container: {
6
9
  flex: 1,
7
10
  width: '100%'
8
- },
9
- video: {
10
- flex: 1,
11
- width: '100%'
12
11
  }
13
12
  });
14
13
 
15
14
  const VideoSwitch = ({
16
15
  media
17
16
  }) => {
17
+ const {
18
+ brandTheme
19
+ } = useTemplateContext();
20
+
18
21
  switch (media.mimeType) {
22
+ case 'application/kontiki':
19
23
  case 'application/jwplayer':
24
+ case 'video/mp4':
20
25
  if (!media.jwpOptions?.config) {
21
26
  return null;
22
27
  }
23
28
 
24
29
  return /*#__PURE__*/React.createElement(JWPlayer, {
25
- style: styleSheet.video,
30
+ style: styleSheet.container,
26
31
  config: media.jwpOptions.config
27
32
  });
28
33
 
34
+ case 'application/vimeo':
35
+ return media.videoId ? /*#__PURE__*/React.createElement(View, {
36
+ style: styleSheet.container
37
+ }, /*#__PURE__*/React.createElement(Vimeo, {
38
+ videoId: media.videoId
39
+ })) : null;
40
+
41
+ case 'application/youtube':
42
+ return /*#__PURE__*/React.createElement(Youtube, {
43
+ apiKey: brandTheme.youtube?.apiKey || '',
44
+ style: styleSheet.container,
45
+ videoId: media.videoId
46
+ });
47
+
29
48
  default:
30
49
  return /*#__PURE__*/React.createElement(Text, null, `video mimeType ${media.mimeType} is not handled`);
31
50
  }
@@ -34,11 +53,9 @@ const VideoSwitch = ({
34
53
  const Video = ({
35
54
  media
36
55
  }) => {
37
- return /*#__PURE__*/React.createElement(View, {
38
- style: styleSheet.container
39
- }, media ? /*#__PURE__*/React.createElement(VideoSwitch, {
56
+ return media ? /*#__PURE__*/React.createElement(VideoSwitch, {
40
57
  media: media
41
- }) : null);
58
+ }) : null;
42
59
  };
43
60
 
44
61
  export default Video;