@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.
- package/es/atom/battle-opponent/index.d.ts +19 -0
- package/es/atom/battle-opponent/index.d.ts.map +1 -0
- package/es/atom/battle-opponent/index.js +52 -0
- package/es/atom/battle-opponent/index.js.map +1 -0
- package/es/atom/battle-opponent/prop-types.d.ts +19 -0
- package/es/atom/battle-opponent/prop-types.d.ts.map +1 -0
- package/es/atom/battle-opponent/prop-types.js +11 -0
- package/es/atom/battle-opponent/prop-types.js.map +1 -0
- package/es/atom/battle-opponent/style.css +126 -0
- package/es/atom/tooltip/index.d.ts +3 -1
- package/es/atom/tooltip/index.d.ts.map +1 -1
- package/es/atom/tooltip/index.js +17 -7
- package/es/atom/tooltip/index.js.map +1 -1
- package/es/atom/tooltip/style.css +10 -2
- package/es/globals.d.js.map +1 -1
- package/es/molecule/battle-opponent-list/index.d.ts +18 -0
- package/es/molecule/battle-opponent-list/index.d.ts.map +1 -0
- package/es/molecule/battle-opponent-list/index.js +21 -0
- package/es/molecule/battle-opponent-list/index.js.map +1 -0
- package/es/molecule/battle-opponent-list/prop-types.d.ts +26 -0
- package/es/molecule/battle-opponent-list/prop-types.d.ts.map +1 -0
- package/es/molecule/battle-opponent-list/prop-types.js +14 -0
- package/es/molecule/battle-opponent-list/prop-types.js.map +1 -0
- package/es/molecule/video-player-mobile/index.native.d.ts +1 -1
- package/es/molecule/video-player-mobile/index.native.d.ts.map +1 -1
- package/es/molecule/video-player-mobile/index.native.js +26 -9
- package/es/molecule/video-player-mobile/index.native.js.map +1 -1
- package/es/organism/review-slide/index.native.d.ts.map +1 -1
- package/es/organism/review-slide/index.native.js +32 -15
- package/es/organism/review-slide/index.native.js.map +1 -1
- package/es/organism/user-preferences/index.d.ts.map +1 -1
- package/es/organism/user-preferences/index.js +6 -3
- package/es/organism/user-preferences/index.js.map +1 -1
- package/lib/atom/battle-opponent/index.d.ts +19 -0
- package/lib/atom/battle-opponent/index.d.ts.map +1 -0
- package/lib/atom/battle-opponent/index.js +70 -0
- package/lib/atom/battle-opponent/index.js.map +1 -0
- package/lib/atom/battle-opponent/prop-types.d.ts +19 -0
- package/lib/atom/battle-opponent/prop-types.d.ts.map +1 -0
- package/lib/atom/battle-opponent/prop-types.js +20 -0
- package/lib/atom/battle-opponent/prop-types.js.map +1 -0
- package/lib/atom/battle-opponent/style.css +126 -0
- package/lib/atom/tooltip/index.d.ts +3 -1
- package/lib/atom/tooltip/index.d.ts.map +1 -1
- package/lib/atom/tooltip/index.js +18 -7
- package/lib/atom/tooltip/index.js.map +1 -1
- package/lib/atom/tooltip/style.css +10 -2
- package/lib/globals.d.js.map +1 -1
- package/lib/molecule/battle-opponent-list/index.d.ts +18 -0
- package/lib/molecule/battle-opponent-list/index.d.ts.map +1 -0
- package/lib/molecule/battle-opponent-list/index.js +37 -0
- package/lib/molecule/battle-opponent-list/index.js.map +1 -0
- package/lib/molecule/battle-opponent-list/prop-types.d.ts +26 -0
- package/lib/molecule/battle-opponent-list/prop-types.d.ts.map +1 -0
- package/lib/molecule/battle-opponent-list/prop-types.js +23 -0
- package/lib/molecule/battle-opponent-list/prop-types.js.map +1 -0
- package/lib/molecule/video-player-mobile/index.native.d.ts +1 -1
- package/lib/molecule/video-player-mobile/index.native.d.ts.map +1 -1
- package/lib/molecule/video-player-mobile/index.native.js +29 -9
- package/lib/molecule/video-player-mobile/index.native.js.map +1 -1
- package/lib/organism/review-slide/index.native.d.ts.map +1 -1
- package/lib/organism/review-slide/index.native.js +31 -13
- package/lib/organism/review-slide/index.native.js.map +1 -1
- package/lib/organism/user-preferences/index.d.ts.map +1 -1
- package/lib/organism/user-preferences/index.js +10 -3
- package/lib/organism/user-preferences/index.js.map +1 -1
- 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":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/tooltip/index.js"],"names":[],"mappings":"AAmEO,iGASN;;AAED;;;;;;;;;;;gBA0FC"}
|
package/es/atom/tooltip/index.js
CHANGED
|
@@ -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:
|
|
114
|
-
height:
|
|
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;
|
package/es/globals.d.js.map
CHANGED
|
@@ -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":";
|
|
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.
|
|
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(
|
|
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;
|