@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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","names":["React","StyleSheet","Text","View","JWPlayer","styleSheet","create","container","flex","width","
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["React","StyleSheet","Text","View","JWPlayer","Youtube","Vimeo","useTemplateContext","styleSheet","create","container","flex","width","VideoSwitch","media","brandTheme","mimeType","jwpOptions","config","videoId","youtube","apiKey","Video"],"sources":["../../../src/molecule/video-player-mobile/index.native.tsx"],"sourcesContent":["import React from 'react';\nimport {StyleSheet, Text, View} from 'react-native';\nimport JWPlayer from 'react-native-jw-media-player';\nimport Youtube from 'react-native-youtube';\nimport {Vimeo} from 'react-native-vimeo-iframe';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nimport {Media} from '../questions/types';\n\nexport type Props = {media: Media};\n\nconst styleSheet = StyleSheet.create({\n container: {\n flex: 1,\n width: '100%'\n }\n});\n\nconst VideoSwitch = ({media}: Props) => {\n const {brandTheme} = useTemplateContext();\n\n switch (media.mimeType) {\n case 'application/kontiki':\n case 'application/jwplayer':\n case 'video/mp4':\n if (!media.jwpOptions?.config) {\n return null;\n }\n\n return <JWPlayer style={styleSheet.container} config={media.jwpOptions.config} />;\n case 'application/vimeo':\n return media.videoId ? (\n <View style={styleSheet.container}>\n <Vimeo videoId={media.videoId} />\n </View>\n ) : null;\n case 'application/youtube':\n return (\n <Youtube\n apiKey={brandTheme.youtube?.apiKey || ''}\n style={styleSheet.container}\n videoId={media.videoId}\n />\n );\n default:\n return <Text>{`video mimeType ${media.mimeType} is not handled`}</Text>;\n }\n};\n\nconst Video = ({media}: Props) => {\n return media ? <VideoSwitch media={media} /> : null;\n};\n\nexport default Video;\n"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,UAAR,EAAoBC,IAApB,EAA0BC,IAA1B,QAAqC,cAArC;AACA,OAAOC,QAAP,MAAqB,8BAArB;AACA,OAAOC,OAAP,MAAoB,sBAApB;AACA,SAAQC,KAAR,QAAoB,2BAApB;AACA,SAAQC,kBAAR,QAAiC,4CAAjC;AAMA,MAAMC,UAAU,GAAGP,UAAU,CAACQ,MAAX,CAAkB;EACnCC,SAAS,EAAE;IACTC,IAAI,EAAE,CADG;IAETC,KAAK,EAAE;EAFE;AADwB,CAAlB,CAAnB;;AAOA,MAAMC,WAAW,GAAG,CAAC;EAACC;AAAD,CAAD,KAAoB;EACtC,MAAM;IAACC;EAAD,IAAeR,kBAAkB,EAAvC;;EAEA,QAAQO,KAAK,CAACE,QAAd;IACE,KAAK,qBAAL;IACA,KAAK,sBAAL;IACA,KAAK,WAAL;MACE,IAAI,CAACF,KAAK,CAACG,UAAN,EAAkBC,MAAvB,EAA+B;QAC7B,OAAO,IAAP;MACD;;MAED,oBAAO,oBAAC,QAAD;QAAU,KAAK,EAAEV,UAAU,CAACE,SAA5B;QAAuC,MAAM,EAAEI,KAAK,CAACG,UAAN,CAAiBC;MAAhE,EAAP;;IACF,KAAK,mBAAL;MACE,OAAOJ,KAAK,CAACK,OAAN,gBACL,oBAAC,IAAD;QAAM,KAAK,EAAEX,UAAU,CAACE;MAAxB,gBACE,oBAAC,KAAD;QAAO,OAAO,EAAEI,KAAK,CAACK;MAAtB,EADF,CADK,GAIH,IAJJ;;IAKF,KAAK,qBAAL;MACE,oBACE,oBAAC,OAAD;QACE,MAAM,EAAEJ,UAAU,CAACK,OAAX,EAAoBC,MAApB,IAA8B,EADxC;QAEE,KAAK,EAAEb,UAAU,CAACE,SAFpB;QAGE,OAAO,EAAEI,KAAK,CAACK;MAHjB,EADF;;IAOF;MACE,oBAAO,oBAAC,IAAD,QAAQ,kBAAiBL,KAAK,CAACE,QAAS,iBAAxC,CAAP;EAxBJ;AA0BD,CA7BD;;AA+BA,MAAMM,KAAK,GAAG,CAAC;EAACR;AAAD,CAAD,KAAoB;EAChC,OAAOA,KAAK,gBAAG,oBAAC,WAAD;IAAa,KAAK,EAAEA;EAApB,EAAH,GAAmC,IAA/C;AACD,CAFD;;AAIA,eAAeQ,KAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";AA0BA,OAAO,EAAa,gBAAgB,EAAa,MAAM,cAAc,CAAC;AAoNtE,QAAA,MAAM,KAAK,UAAW,gBAAgB,gBA2DrC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, { useEffect, useState } from 'react';
|
|
2
|
-
import { Animated, Easing, Image, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
1
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
2
|
+
import { Animated, Easing, Image, Keyboard, ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
3
3
|
import get from 'lodash/fp/get';
|
|
4
4
|
import getOr from 'lodash/fp/getOr';
|
|
5
5
|
import { useTranslateY } from '@coorpacademy/react-native-animation';
|
|
@@ -37,15 +37,17 @@ const MediaView = ({
|
|
|
37
37
|
}) => {
|
|
38
38
|
switch (media.type) {
|
|
39
39
|
case TYPE_VIDEO:
|
|
40
|
-
return /*#__PURE__*/React.createElement(
|
|
40
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
41
|
+
style: styles.mediaContainer
|
|
42
|
+
}, /*#__PURE__*/React.createElement(Video, {
|
|
41
43
|
media: media
|
|
42
|
-
});
|
|
44
|
+
}));
|
|
43
45
|
|
|
44
46
|
case TYPE_IMAGE:
|
|
45
47
|
{
|
|
46
48
|
const uri = `https://${media.url?.split('//')[1]}`;
|
|
47
49
|
return /*#__PURE__*/React.createElement(Image, {
|
|
48
|
-
style: styles.image,
|
|
50
|
+
style: [styles.mediaContainer, styles.image],
|
|
49
51
|
source: {
|
|
50
52
|
uri
|
|
51
53
|
}
|
|
@@ -54,7 +56,7 @@ const MediaView = ({
|
|
|
54
56
|
|
|
55
57
|
case TYPE_AUDIO:
|
|
56
58
|
default:
|
|
57
|
-
return
|
|
59
|
+
return null;
|
|
58
60
|
}
|
|
59
61
|
};
|
|
60
62
|
|
|
@@ -158,11 +160,9 @@ const Question = props => {
|
|
|
158
160
|
style: style.questionText
|
|
159
161
|
}, questionText), /*#__PURE__*/React.createElement(Text, {
|
|
160
162
|
style: style.questionHelp
|
|
161
|
-
}, get('help', answerUI))), answerUI.media ? /*#__PURE__*/React.createElement(
|
|
162
|
-
style: styles.mediaContainer
|
|
163
|
-
}, /*#__PURE__*/React.createElement(MediaView, {
|
|
163
|
+
}, get('help', answerUI))), answerUI.media ? /*#__PURE__*/React.createElement(MediaView, {
|
|
164
164
|
media: answerUI.media
|
|
165
|
-
})
|
|
165
|
+
}) : null, /*#__PURE__*/React.createElement(ScrollView, {
|
|
166
166
|
style: style.choicesScrollView,
|
|
167
167
|
contentContainerStyle: style.choicesScrollContent,
|
|
168
168
|
centerContent: true,
|
|
@@ -174,6 +174,14 @@ const Question = props => {
|
|
|
174
174
|
const createSlideStyle = (num, screenWidth) => {
|
|
175
175
|
const slideWidth = screenWidth - 40 - num * 8;
|
|
176
176
|
return StyleSheet.create({
|
|
177
|
+
hiddenBackgroundToLockActions: {
|
|
178
|
+
position: 'absolute',
|
|
179
|
+
left: 0,
|
|
180
|
+
right: 0,
|
|
181
|
+
top: 0,
|
|
182
|
+
bottom: 0,
|
|
183
|
+
backgroundColor: '#00000000'
|
|
184
|
+
},
|
|
177
185
|
slide: {
|
|
178
186
|
position: 'absolute',
|
|
179
187
|
left: 20 + num * 4,
|
|
@@ -207,6 +215,16 @@ const Slide = props => {
|
|
|
207
215
|
num,
|
|
208
216
|
slideIndex = '0'
|
|
209
217
|
} = props;
|
|
218
|
+
const [isValidated, setValidated] = useState(false);
|
|
219
|
+
const handleValidatePress = useCallback(() => {
|
|
220
|
+
Keyboard.dismiss();
|
|
221
|
+
setValidated(true); // calling the onclick later, after react has rerendered, to display the locking BG as soon as possible
|
|
222
|
+
|
|
223
|
+
setTimeout(() => {
|
|
224
|
+
validateButton.onClick();
|
|
225
|
+
}, 20); // only to create on mount
|
|
226
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
227
|
+
}, []);
|
|
210
228
|
const {
|
|
211
229
|
width
|
|
212
230
|
} = useWindowDimensions();
|
|
@@ -226,9 +244,6 @@ const Slide = props => {
|
|
|
226
244
|
});
|
|
227
245
|
}
|
|
228
246
|
|
|
229
|
-
const {
|
|
230
|
-
onClick: handleValidatePress
|
|
231
|
-
} = validateButton;
|
|
232
247
|
return /*#__PURE__*/React.createElement(Animated.View, {
|
|
233
248
|
style: [slideStyle.slide, animatedStyle]
|
|
234
249
|
}, /*#__PURE__*/React.createElement(Question, {
|
|
@@ -237,11 +252,13 @@ const Slide = props => {
|
|
|
237
252
|
answerUI: answerUI,
|
|
238
253
|
key: "question-container"
|
|
239
254
|
}), /*#__PURE__*/React.createElement(Button, {
|
|
240
|
-
disabled: validateButton.disabled,
|
|
255
|
+
disabled: isValidated || validateButton.disabled,
|
|
241
256
|
submitValue: validateButton.label,
|
|
242
257
|
onPress: handleValidatePress,
|
|
243
258
|
testID: `slide-validate-button-${slideIndex}`
|
|
244
|
-
}),
|
|
259
|
+
}), isValidated ? /*#__PURE__*/React.createElement(View, {
|
|
260
|
+
style: slideStyle.hiddenBackgroundToLockActions
|
|
261
|
+
}) : null, correctionPopinProps ? /*#__PURE__*/React.createElement(CorrectionPopin, {
|
|
245
262
|
correctionPopinProps: correctionPopinProps,
|
|
246
263
|
slideIndex: slideIndex,
|
|
247
264
|
showCorrectionPopin: showCorrectionPopin,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","names":["React","useEffect","useState","Animated","Easing","Image","ScrollView","StyleSheet","useWindowDimensions","View","get","getOr","useTranslateY","Text","Answer","ReviewCorrectionPopin","useTemplateContext","Button","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","Video","styles","create","mediaContainer","flex","alignItems","justifyContent","marginTop","width","minHeight","borderRadius","overflow","image","correctionPopinWrapper","position","bottom","MediaView","media","type","uri","url","split","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","translateUp","fromValue","toValue","duration","easing","bezier","start","klf","undefined","information","label","message","next","onClick","_correctionPopinProps","resultLabel","style","animatedStyle","createQuestionStyle","theme","questionHeading","questionOrigin","fontSize","lineHeight","color","colors","text","primary","marginBottom","spacing","tiny","small","textAlign","questionText","fontWeight","questionHelp","gray","medium","choicesScrollView","marginVertical","choicesScrollContent","padding","Question","props","answerUI","setStyle","questionStyle","createSlideStyle","num","screenWidth","slideWidth","slide","left","backgroundColor","height","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","Slide","validateButton","slideStyle","loading","parentContentTitle","handleValidatePress","disabled"],"sources":["../../../src/organism/review-slide/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\n\nimport {\n Animated,\n Easing,\n Image,\n ScrollView,\n StyleSheet,\n TextStyle,\n useWindowDimensions,\n View,\n ViewStyle\n} from 'react-native';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Text from '../../atom/text/index.native';\nimport Answer from '../../molecule/answer/index.native';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from '../../molecule/answer/prop-types';\nimport Video from '../../molecule/video-player-mobile/index.native';\nimport {Media} from '../../molecule/questions/types';\nimport {PopinProps, ReviewSlideProps, SlideProps} from './prop-types';\n\nconst styles = StyleSheet.create({\n mediaContainer: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n marginTop: 20,\n width: '100%',\n minHeight: 150,\n borderRadius: 10,\n overflow: 'hidden'\n },\n image: {\n flex: 1,\n width: '100%'\n },\n correctionPopinWrapper: {\n position: 'absolute',\n bottom: 16,\n width: '105%'\n }\n});\n\nconst MediaView = ({media}: {media: Media}) => {\n switch (media.type) {\n case TYPE_VIDEO:\n return <Video media={media} />;\n case TYPE_IMAGE: {\n const uri = `https://${media.url?.split('//')[1]}`;\n return <Image style={styles.image} source={{uri}} />;\n }\n case TYPE_AUDIO:\n default:\n return <Text>{`media type ${media.type} is not handled`}</Text>;\n }\n};\n\nconst CorrectionPopin = ({\n correctionPopinProps,\n slideIndex,\n showCorrectionPopin,\n animateCorrectionPopin\n}: PopinProps) => {\n const translateUp = useTranslateY({\n fromValue: 500,\n toValue: 0,\n duration: 500,\n easing: Easing.bezier(0.34, 1.36, 0.64, 1)\n });\n\n // the translation is required only once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => translateUp.start(), []);\n\n if (!showCorrectionPopin) return null;\n\n const klf = getOr(undefined, 'klf', correctionPopinProps);\n const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n const next = get('next', correctionPopinProps);\n const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n const _correctionPopinProps = {\n next: {\n onClick,\n label: next && next.label,\n 'data-name': `next-question-button-${slideIndex}`,\n 'aria-label': next && next['aria-label']\n },\n klf,\n information,\n type: correctionPopinProps.type,\n resultLabel: correctionPopinProps.resultLabel\n };\n\n const style = animateCorrectionPopin\n ? [styles.correctionPopinWrapper, translateUp.animatedStyle]\n : styles.correctionPopinWrapper;\n\n return (\n <Animated.View style={style}>\n <ReviewCorrectionPopin {..._correctionPopinProps} />\n </Animated.View>\n );\n};\n\ntype StyleSheetType = {\n questionHeading: ViewStyle;\n questionOrigin: ViewStyle;\n questionText: TextStyle;\n questionHelp: ViewStyle;\n choicesScrollView: ViewStyle;\n choicesScrollContent: ViewStyle;\n};\n\nconst createQuestionStyle = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n questionHeading: {\n justifyContent: 'space-between'\n },\n questionOrigin: {\n fontSize: 12,\n lineHeight: 16,\n color: theme.colors.text.primary,\n marginBottom: theme.spacing.tiny,\n marginTop: theme.spacing.small,\n textAlign: 'center'\n },\n questionText: {\n fontSize: 16,\n lineHeight: 22,\n fontWeight: '700',\n color: theme.colors.text.primary,\n textAlign: 'center'\n },\n questionHelp: {\n fontSize: 12,\n lineHeight: 16,\n color: theme.colors.gray.medium,\n marginBottom: 0,\n marginTop: theme.spacing.small,\n textAlign: 'center'\n },\n choicesScrollView: {\n marginVertical: 20,\n width: '100%'\n },\n choicesScrollContent: {\n padding: 10\n }\n });\n\ntype QuestionProps = {\n answerUI: SlideProps['answerUI'];\n questionText: SlideProps['questionText'];\n questionOrigin: SlideProps['parentContentTitle'];\n};\n\nconst Question = (props: QuestionProps) => {\n const {answerUI, questionText, questionOrigin} = props;\n const {theme} = useTemplateContext();\n const [style, setStyle] = useState<StyleSheetType>();\n\n useEffect(() => {\n const questionStyle = createQuestionStyle(theme);\n setStyle(questionStyle);\n }, [theme]);\n\n if (!answerUI || !questionText || !style) return null;\n\n return (\n <>\n <View style={style.questionHeading}>\n <Text style={style.questionOrigin}>{questionOrigin}</Text>\n <Text style={style.questionText}>{questionText}</Text>\n <Text style={style.questionHelp}>{get('help', answerUI)}</Text>\n </View>\n {answerUI.media ? (\n <View style={styles.mediaContainer}>\n <MediaView media={answerUI.media} />\n </View>\n ) : null}\n <ScrollView\n style={style.choicesScrollView}\n contentContainerStyle={style.choicesScrollContent}\n centerContent\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n >\n <Answer {...answerUI} />\n </ScrollView>\n </>\n );\n};\n\ntype SlideStyle = {\n slide: ViewStyle;\n};\n\nconst createSlideStyle = (num: number, screenWidth: number): SlideStyle => {\n const slideWidth = screenWidth - 40 - num * 8;\n\n return StyleSheet.create({\n slide: {\n position: 'absolute',\n left: 20 + num * 4,\n bottom: 34 + num * 5,\n backgroundColor: '#fff', // theme.colors.white\n height: '90%',\n width: slideWidth,\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: 25,\n shadowColor: '#000',\n shadowOffset: {width: 0, height: -1},\n shadowOpacity: 0.05,\n shadowRadius: 16,\n elevation: 10 - num * 1,\n borderRadius: 16\n }\n });\n};\n\nconst Slide = (props: ReviewSlideProps) => {\n const {animatedStyle, slide, correctionPopinProps, validateButton, num, slideIndex = '0'} = props;\n\n const {width} = useWindowDimensions();\n const slideStyle = createSlideStyle(num, width);\n\n const {\n loading,\n parentContentTitle,\n questionText,\n answerUI,\n showCorrectionPopin,\n animateCorrectionPopin\n } = slide;\n\n if (loading) {\n return <View style={slideStyle.slide} />;\n }\n\n const {onClick: handleValidatePress} = validateButton;\n\n return (\n <Animated.View style={[slideStyle.slide, animatedStyle]}>\n <Question\n questionOrigin={parentContentTitle}\n questionText={questionText}\n answerUI={answerUI}\n key=\"question-container\"\n />\n <Button\n disabled={validateButton.disabled}\n submitValue={validateButton.label}\n onPress={handleValidatePress}\n testID={`slide-validate-button-${slideIndex}`}\n />\n {correctionPopinProps ? (\n <CorrectionPopin\n correctionPopinProps={correctionPopinProps}\n slideIndex={slideIndex}\n showCorrectionPopin={showCorrectionPopin}\n animateCorrectionPopin={animateCorrectionPopin}\n key=\"correction-popin\"\n />\n ) : null}\n </Animated.View>\n );\n};\n\nexport default Slide;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["React","useCallback","useEffect","useState","Animated","Easing","Image","Keyboard","ScrollView","StyleSheet","useWindowDimensions","View","get","getOr","useTranslateY","Text","Answer","ReviewCorrectionPopin","useTemplateContext","Button","TYPE_AUDIO","TYPE_IMAGE","TYPE_VIDEO","Video","styles","create","mediaContainer","flex","alignItems","justifyContent","marginTop","width","minHeight","borderRadius","overflow","image","correctionPopinWrapper","position","bottom","MediaView","media","type","uri","url","split","CorrectionPopin","correctionPopinProps","slideIndex","showCorrectionPopin","animateCorrectionPopin","translateUp","fromValue","toValue","duration","easing","bezier","start","klf","undefined","information","label","message","next","onClick","_correctionPopinProps","resultLabel","style","animatedStyle","createQuestionStyle","theme","questionHeading","questionOrigin","fontSize","lineHeight","color","colors","text","primary","marginBottom","spacing","tiny","small","textAlign","questionText","fontWeight","questionHelp","gray","medium","choicesScrollView","marginVertical","choicesScrollContent","padding","Question","props","answerUI","setStyle","questionStyle","createSlideStyle","num","screenWidth","slideWidth","hiddenBackgroundToLockActions","left","right","top","backgroundColor","slide","height","shadowColor","shadowOffset","shadowOpacity","shadowRadius","elevation","Slide","validateButton","isValidated","setValidated","handleValidatePress","dismiss","setTimeout","slideStyle","loading","parentContentTitle","disabled"],"sources":["../../../src/organism/review-slide/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\n\nimport {\n Animated,\n Easing,\n Image,\n Keyboard,\n ScrollView,\n StyleSheet,\n TextStyle,\n useWindowDimensions,\n View,\n ViewStyle\n} from 'react-native';\nimport get from 'lodash/fp/get';\nimport getOr from 'lodash/fp/getOr';\nimport {useTranslateY} from '@coorpacademy/react-native-animation';\nimport Text from '../../atom/text/index.native';\nimport Answer from '../../molecule/answer/index.native';\nimport ReviewCorrectionPopin from '../../molecule/review-correction-popin/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\nimport Button from '../../atom/button/index.native';\nimport {TYPE_AUDIO, TYPE_IMAGE, TYPE_VIDEO} from '../../molecule/answer/prop-types';\nimport Video from '../../molecule/video-player-mobile/index.native';\nimport {Media} from '../../molecule/questions/types';\nimport {PopinProps, ReviewSlideProps, SlideProps} from './prop-types';\n\nconst styles = StyleSheet.create({\n mediaContainer: {\n flex: 1,\n alignItems: 'center',\n justifyContent: 'center',\n marginTop: 20,\n width: '100%',\n minHeight: 150,\n borderRadius: 10,\n overflow: 'hidden'\n },\n image: {\n flex: 1,\n width: '100%'\n },\n correctionPopinWrapper: {\n position: 'absolute',\n bottom: 16,\n width: '105%'\n }\n});\n\nconst MediaView = ({media}: {media: Media}) => {\n switch (media.type) {\n case TYPE_VIDEO:\n return (\n <View style={styles.mediaContainer}>\n <Video media={media} />\n </View>\n );\n case TYPE_IMAGE: {\n const uri = `https://${media.url?.split('//')[1]}`;\n return <Image style={[styles.mediaContainer, styles.image]} source={{uri}} />;\n }\n case TYPE_AUDIO:\n default:\n return null;\n }\n};\n\nconst CorrectionPopin = ({\n correctionPopinProps,\n slideIndex,\n showCorrectionPopin,\n animateCorrectionPopin\n}: PopinProps) => {\n const translateUp = useTranslateY({\n fromValue: 500,\n toValue: 0,\n duration: 500,\n easing: Easing.bezier(0.34, 1.36, 0.64, 1)\n });\n\n // the translation is required only once on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => translateUp.start(), []);\n\n if (!showCorrectionPopin) return null;\n\n const klf = getOr(undefined, 'klf', correctionPopinProps);\n const information = getOr({label: '', message: ''}, 'information', correctionPopinProps);\n const next = get('next', correctionPopinProps);\n const onClick = get(['next', 'onClick'], correctionPopinProps);\n\n const _correctionPopinProps = {\n next: {\n onClick,\n label: next && next.label,\n 'data-name': `next-question-button-${slideIndex}`,\n 'aria-label': next && next['aria-label']\n },\n klf,\n information,\n type: correctionPopinProps.type,\n resultLabel: correctionPopinProps.resultLabel\n };\n\n const style = animateCorrectionPopin\n ? [styles.correctionPopinWrapper, translateUp.animatedStyle]\n : styles.correctionPopinWrapper;\n\n return (\n <Animated.View style={style}>\n <ReviewCorrectionPopin {..._correctionPopinProps} />\n </Animated.View>\n );\n};\n\ntype StyleSheetType = {\n questionHeading: ViewStyle;\n questionOrigin: ViewStyle;\n questionText: TextStyle;\n questionHelp: ViewStyle;\n choicesScrollView: ViewStyle;\n choicesScrollContent: ViewStyle;\n};\n\nconst createQuestionStyle = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n questionHeading: {\n justifyContent: 'space-between'\n },\n questionOrigin: {\n fontSize: 12,\n lineHeight: 16,\n color: theme.colors.text.primary,\n marginBottom: theme.spacing.tiny,\n marginTop: theme.spacing.small,\n textAlign: 'center'\n },\n questionText: {\n fontSize: 16,\n lineHeight: 22,\n fontWeight: '700',\n color: theme.colors.text.primary,\n textAlign: 'center'\n },\n questionHelp: {\n fontSize: 12,\n lineHeight: 16,\n color: theme.colors.gray.medium,\n marginBottom: 0,\n marginTop: theme.spacing.small,\n textAlign: 'center'\n },\n choicesScrollView: {\n marginVertical: 20,\n width: '100%'\n },\n choicesScrollContent: {\n padding: 10\n }\n });\n\ntype QuestionProps = {\n answerUI: SlideProps['answerUI'];\n questionText: SlideProps['questionText'];\n questionOrigin: SlideProps['parentContentTitle'];\n};\n\nconst Question = (props: QuestionProps) => {\n const {answerUI, questionText, questionOrigin} = props;\n const {theme} = useTemplateContext();\n const [style, setStyle] = useState<StyleSheetType>();\n\n useEffect(() => {\n const questionStyle = createQuestionStyle(theme);\n setStyle(questionStyle);\n }, [theme]);\n\n if (!answerUI || !questionText || !style) return null;\n\n return (\n <>\n <View style={style.questionHeading}>\n <Text style={style.questionOrigin}>{questionOrigin}</Text>\n <Text style={style.questionText}>{questionText}</Text>\n <Text style={style.questionHelp}>{get('help', answerUI)}</Text>\n </View>\n {answerUI.media ? <MediaView media={answerUI.media} /> : null}\n <ScrollView\n style={style.choicesScrollView}\n contentContainerStyle={style.choicesScrollContent}\n centerContent\n showsHorizontalScrollIndicator={false}\n showsVerticalScrollIndicator={false}\n >\n <Answer {...answerUI} />\n </ScrollView>\n </>\n );\n};\n\ntype SlideStyle = {\n slide: ViewStyle;\n hiddenBackgroundToLockActions: ViewStyle;\n};\n\nconst createSlideStyle = (num: number, screenWidth: number): SlideStyle => {\n const slideWidth = screenWidth - 40 - num * 8;\n\n return StyleSheet.create({\n hiddenBackgroundToLockActions: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n backgroundColor: '#00000000'\n },\n slide: {\n position: 'absolute',\n left: 20 + num * 4,\n bottom: 34 + num * 5,\n backgroundColor: '#fff', // theme.colors.white\n height: '90%',\n width: slideWidth,\n justifyContent: 'space-between',\n alignItems: 'center',\n padding: 25,\n shadowColor: '#000',\n shadowOffset: {width: 0, height: -1},\n shadowOpacity: 0.05,\n shadowRadius: 16,\n elevation: 10 - num * 1,\n borderRadius: 16\n }\n });\n};\n\nconst Slide = (props: ReviewSlideProps) => {\n const {animatedStyle, slide, correctionPopinProps, validateButton, num, slideIndex = '0'} = props;\n const [isValidated, setValidated] = useState<boolean>(false);\n\n const handleValidatePress = useCallback(() => {\n Keyboard.dismiss();\n setValidated(true);\n\n // calling the onclick later, after react has rerendered, to display the locking BG as soon as possible\n setTimeout(() => {\n validateButton.onClick();\n }, 20);\n\n // only to create on mount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const {width} = useWindowDimensions();\n const slideStyle = createSlideStyle(num, width);\n\n const {\n loading,\n parentContentTitle,\n questionText,\n answerUI,\n showCorrectionPopin,\n animateCorrectionPopin\n } = slide;\n\n if (loading) {\n return <View style={slideStyle.slide} />;\n }\n\n return (\n <Animated.View style={[slideStyle.slide, animatedStyle]}>\n <Question\n questionOrigin={parentContentTitle}\n questionText={questionText}\n answerUI={answerUI}\n key=\"question-container\"\n />\n <Button\n disabled={isValidated || validateButton.disabled}\n submitValue={validateButton.label}\n onPress={handleValidatePress}\n testID={`slide-validate-button-${slideIndex}`}\n />\n {isValidated ? <View style={slideStyle.hiddenBackgroundToLockActions} /> : null}\n {correctionPopinProps ? (\n <CorrectionPopin\n correctionPopinProps={correctionPopinProps}\n slideIndex={slideIndex}\n showCorrectionPopin={showCorrectionPopin}\n animateCorrectionPopin={animateCorrectionPopin}\n key=\"correction-popin\"\n />\n ) : null}\n </Animated.View>\n );\n};\n\nexport default Slide;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/user-preferences/index.js"],"names":[],"mappings":";AA4CA,0DAeC"}
|
|
@@ -8,13 +8,13 @@ import React from 'react';
|
|
|
8
8
|
import PropTypes from 'prop-types';
|
|
9
9
|
import isEmpty from 'lodash/fp/isEmpty';
|
|
10
10
|
import map from 'lodash/fp/map';
|
|
11
|
-
import { GetTranslateFromContext } from '../../atom/provider';
|
|
11
|
+
import Provider, { GetTranslateFromContext } from '../../atom/provider';
|
|
12
12
|
import ToolTip from '../../atom/tooltip';
|
|
13
13
|
import InputSwitch from '../../atom/input-switch';
|
|
14
14
|
import style from './style.css';
|
|
15
15
|
|
|
16
|
-
const Settings = props => {
|
|
17
|
-
const translate = GetTranslateFromContext();
|
|
16
|
+
const Settings = (props, legacyContext) => {
|
|
17
|
+
const translate = GetTranslateFromContext(legacyContext);
|
|
18
18
|
|
|
19
19
|
const {
|
|
20
20
|
label,
|
|
@@ -42,6 +42,9 @@ Settings.propTypes = process.env.NODE_ENV !== "production" ? _extends({}, InputS
|
|
|
42
42
|
label: PropTypes.string.isRequired,
|
|
43
43
|
description: PropTypes.string
|
|
44
44
|
}) : {};
|
|
45
|
+
Settings.contextTypes = {
|
|
46
|
+
translate: Provider.childContextTypes.translate
|
|
47
|
+
};
|
|
45
48
|
|
|
46
49
|
const UserPreferences = props => {
|
|
47
50
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","PropTypes","isEmpty","map","GetTranslateFromContext","ToolTip","InputSwitch","style","Settings","props","translate","label","description","moreInfoAriaLabel","settings","infoIconTooltip","propTypes","string","isRequired","UserPreferences","preferences","groupAriaLabel","arrayOf","shape"],"sources":["../../../src/organism/user-preferences/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport {GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip from '../../atom/tooltip';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst Settings = props => {\n const translate = GetTranslateFromContext();\n const {label, description, moreInfoAriaLabel, ...settings} = props;\n return (\n <div className={style.settings}>\n <InputSwitch {...settings} />\n <span className={style.label} tabIndex={0}>\n {label}\n </span>\n {isEmpty(description) ? null : (\n <ToolTip\n TooltipContent={description}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n data-testid=\"user-preferences-tooltip\"\n aria-label={moreInfoAriaLabel}\n iconContainerClassName={style.infoIconTooltip}\n fontSize={12}\n />\n )}\n </div>\n );\n};\n\nSettings.propTypes = {\n ...InputSwitch.propTypes,\n label: PropTypes.string.isRequired,\n description: PropTypes.string\n};\n\nconst UserPreferences = props => {\n const {preferences, moreInfoAriaLabel, groupAriaLabel} = props;\n\n return (\n <form>\n <div className={style.preferences} role=\"group\" aria-label={groupAriaLabel} tabIndex={0}>\n {map(\n settings => (\n <Settings {...settings} key={settings.label} moreInfoAriaLabel={moreInfoAriaLabel} />\n ),\n preferences\n )}\n </div>\n </form>\n );\n};\n\nUserPreferences.propTypes = {\n preferences: PropTypes.arrayOf(PropTypes.shape(Settings.propTypes)),\n moreInfoAriaLabel: PropTypes.string,\n groupAriaLabel: PropTypes.string\n};\n\nexport default UserPreferences;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","PropTypes","isEmpty","map","Provider","GetTranslateFromContext","ToolTip","InputSwitch","style","Settings","props","legacyContext","translate","label","description","moreInfoAriaLabel","settings","infoIconTooltip","propTypes","string","isRequired","contextTypes","childContextTypes","UserPreferences","preferences","groupAriaLabel","arrayOf","shape"],"sources":["../../../src/organism/user-preferences/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport isEmpty from 'lodash/fp/isEmpty';\nimport map from 'lodash/fp/map';\nimport Provider, {GetTranslateFromContext} from '../../atom/provider';\nimport ToolTip from '../../atom/tooltip';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst Settings = (props, legacyContext) => {\n const translate = GetTranslateFromContext(legacyContext);\n const {label, description, moreInfoAriaLabel, ...settings} = props;\n return (\n <div className={style.settings}>\n <InputSwitch {...settings} />\n <span className={style.label} tabIndex={0}>\n {label}\n </span>\n {isEmpty(description) ? null : (\n <ToolTip\n TooltipContent={description}\n closeToolTipInformationTextAriaLabel={translate(\n 'Press the escape key to close the information text'\n )}\n data-testid=\"user-preferences-tooltip\"\n aria-label={moreInfoAriaLabel}\n iconContainerClassName={style.infoIconTooltip}\n fontSize={12}\n />\n )}\n </div>\n );\n};\n\nSettings.propTypes = {\n ...InputSwitch.propTypes,\n label: PropTypes.string.isRequired,\n description: PropTypes.string\n};\n\nSettings.contextTypes = {\n translate: Provider.childContextTypes.translate\n};\n\nconst UserPreferences = props => {\n const {preferences, moreInfoAriaLabel, groupAriaLabel} = props;\n\n return (\n <form>\n <div className={style.preferences} role=\"group\" aria-label={groupAriaLabel} tabIndex={0}>\n {map(\n settings => (\n <Settings {...settings} key={settings.label} moreInfoAriaLabel={moreInfoAriaLabel} />\n ),\n preferences\n )}\n </div>\n </form>\n );\n};\n\nUserPreferences.propTypes = {\n preferences: PropTypes.arrayOf(PropTypes.shape(Settings.propTypes)),\n moreInfoAriaLabel: PropTypes.string,\n groupAriaLabel: PropTypes.string\n};\n\nexport default UserPreferences;\n"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,mBAApB;AACA,OAAOC,GAAP,MAAgB,eAAhB;AACA,OAAOC,QAAP,IAAkBC,uBAAlB,QAAgD,qBAAhD;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,WAAP,MAAwB,yBAAxB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;EACzC,MAAMC,SAAS,GAAGP,uBAAuB,CAACM,aAAD,CAAzC;;EACA,MAAM;IAACE,KAAD;IAAQC,WAAR;IAAqBC;EAArB,IAAuDL,KAA7D;EAAA,MAAiDM,QAAjD,iCAA6DN,KAA7D;;EACA,oBACE;IAAK,SAAS,EAAEF,KAAK,CAACQ;EAAtB,gBACE,oBAAC,WAAD,EAAiBA,QAAjB,CADF,eAEE;IAAM,SAAS,EAAER,KAAK,CAACK,KAAvB;IAA8B,QAAQ,EAAE;EAAxC,GACGA,KADH,CAFF,EAKGX,OAAO,CAACY,WAAD,CAAP,GAAuB,IAAvB,gBACC,oBAAC,OAAD;IACE,cAAc,EAAEA,WADlB;IAEE,oCAAoC,EAAEF,SAAS,CAC7C,oDAD6C,CAFjD;IAKE,eAAY,0BALd;IAME,cAAYG,iBANd;IAOE,sBAAsB,EAAEP,KAAK,CAACS,eAPhC;IAQE,QAAQ,EAAE;EARZ,EANJ,CADF;AAoBD,CAvBD;;AAyBAR,QAAQ,CAACS,SAAT,wDACKX,WAAW,CAACW,SADjB;EAEEL,KAAK,EAAEZ,SAAS,CAACkB,MAAV,CAAiBC,UAF1B;EAGEN,WAAW,EAAEb,SAAS,CAACkB;AAHzB;AAMAV,QAAQ,CAACY,YAAT,GAAwB;EACtBT,SAAS,EAAER,QAAQ,CAACkB,iBAAT,CAA2BV;AADhB,CAAxB;;AAIA,MAAMW,eAAe,GAAGb,KAAK,IAAI;EAC/B,MAAM;IAACc,WAAD;IAAcT,iBAAd;IAAiCU;EAAjC,IAAmDf,KAAzD;EAEA,oBACE,+CACE;IAAK,SAAS,EAAEF,KAAK,CAACgB,WAAtB;IAAmC,IAAI,EAAC,OAAxC;IAAgD,cAAYC,cAA5D;IAA4E,QAAQ,EAAE;EAAtF,GACGtB,GAAG,CACFa,QAAQ,iBACN,oBAAC,QAAD,eAAcA,QAAd;IAAwB,GAAG,EAAEA,QAAQ,CAACH,KAAtC;IAA6C,iBAAiB,EAAEE;EAAhE,GAFA,EAIFS,WAJE,CADN,CADF,CADF;AAYD,CAfD;;AAiBAD,eAAe,CAACL,SAAhB,2CAA4B;EAC1BM,WAAW,EAAEvB,SAAS,CAACyB,OAAV,CAAkBzB,SAAS,CAAC0B,KAAV,CAAgBlB,QAAQ,CAACS,SAAzB,CAAlB,CADa;EAE1BH,iBAAiB,EAAEd,SAAS,CAACkB,MAFH;EAG1BM,cAAc,EAAExB,SAAS,CAACkB;AAHA,CAA5B;AAMA,eAAeI,eAAf"}
|
|
@@ -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,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
|
|
8
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
9
|
+
|
|
10
|
+
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
11
|
+
|
|
12
|
+
var _tooltip = _interopRequireDefault(require("../tooltip"));
|
|
13
|
+
|
|
14
|
+
var _provider = _interopRequireWildcard(require("../provider"));
|
|
15
|
+
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("./prop-types"));
|
|
17
|
+
|
|
18
|
+
var _style = _interopRequireDefault(require("./style.css"));
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
|
+
|
|
26
|
+
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); }
|
|
27
|
+
|
|
28
|
+
const BattleOpponent = ({
|
|
29
|
+
isAlreadyEngaged,
|
|
30
|
+
isRandom,
|
|
31
|
+
userAvatarSrc,
|
|
32
|
+
onClick,
|
|
33
|
+
displayName,
|
|
34
|
+
tooltipText
|
|
35
|
+
}, legacyContext) => {
|
|
36
|
+
const translate = (0, _provider.GetTranslateFromContext)(legacyContext);
|
|
37
|
+
const wrapperClassnames = (0, _react.useMemo)(() => (0, _classnames.default)(_style.default.card, _style.default['opponent-card'], isRandom ? _style.default.random : null), [isRandom]);
|
|
38
|
+
const displayNameClassnames = (0, _react.useMemo)(() => (0, _classnames.default)(_style.default.name, isAlreadyEngaged ? _style.default.alreadyEngaged : null), [isAlreadyEngaged]);
|
|
39
|
+
return /*#__PURE__*/_react.default.createElement("div", _extends({}, !isAlreadyEngaged && {
|
|
40
|
+
onClick
|
|
41
|
+
}, {
|
|
42
|
+
className: wrapperClassnames,
|
|
43
|
+
"data-testid": "battle-opponent-wrapper"
|
|
44
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
45
|
+
className: _style.default.avatar
|
|
46
|
+
}, isRandom ? null : /*#__PURE__*/_react.default.createElement("img", {
|
|
47
|
+
src: userAvatarSrc,
|
|
48
|
+
"aria-hidden": "true"
|
|
49
|
+
})), /*#__PURE__*/_react.default.createElement("p", {
|
|
50
|
+
className: displayNameClassnames
|
|
51
|
+
}, " ", displayName), isAlreadyEngaged ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
52
|
+
fontSize: 12,
|
|
53
|
+
iconSize: "big",
|
|
54
|
+
TooltipContent: tooltipText,
|
|
55
|
+
closeToolTipInformationTextAriaLabel: translate('Press the escape key to close the information text'),
|
|
56
|
+
iconContainerClassName: _style.default.infoIconTooltip
|
|
57
|
+
}) : /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowRight, {
|
|
58
|
+
className: _style.default.rightArrow,
|
|
59
|
+
width: 16,
|
|
60
|
+
height: 16
|
|
61
|
+
}));
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
BattleOpponent.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
|
|
65
|
+
BattleOpponent.contextTypes = {
|
|
66
|
+
translate: _provider.default.childContextTypes.translate
|
|
67
|
+
};
|
|
68
|
+
var _default = BattleOpponent;
|
|
69
|
+
exports.default = _default;
|
|
70
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":["BattleOpponent","isAlreadyEngaged","isRandom","userAvatarSrc","onClick","displayName","tooltipText","legacyContext","translate","GetTranslateFromContext","wrapperClassnames","useMemo","classnames","style","card","random","displayNameClassnames","name","alreadyEngaged","avatar","infoIconTooltip","rightArrow","propTypes","contextTypes","Provider","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;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,MAAMA,cAAc,GAAG,CACrB;EACEC,gBADF;EAEEC,QAFF;EAGEC,aAHF;EAIEC,OAJF;EAKEC,WALF;EAMEC;AANF,CADqB,EASrBC,aATqB,KAUlB;EACH,MAAMC,SAAkD,GAAG,IAAAC,iCAAA,EAAwBF,aAAxB,CAA3D;EACA,MAAMG,iBAAiB,GAAG,IAAAC,cAAA,EACxB,MAAM,IAAAC,mBAAA,EAAWC,cAAA,CAAMC,IAAjB,EAAuBD,cAAA,CAAM,eAAN,CAAvB,EAA+CX,QAAQ,GAAGW,cAAA,CAAME,MAAT,GAAkB,IAAzE,CADkB,EAExB,CAACb,QAAD,CAFwB,CAA1B;EAKA,MAAMc,qBAAqB,GAAG,IAAAL,cAAA,EAC5B,MAAM,IAAAC,mBAAA,EAAWC,cAAA,CAAMI,IAAjB,EAAuBhB,gBAAgB,GAAGY,cAAA,CAAMK,cAAT,GAA0B,IAAjE,CADsB,EAE5B,CAACjB,gBAAD,CAF4B,CAA9B;EAKA,oBACE,iDACO,CAACA,gBAAD,IAAqB;IAACG;EAAD,CAD5B;IAEE,SAAS,EAAEM,iBAFb;IAGE,eAAY;EAHd,iBAKE;IAAK,SAAS,EAAEG,cAAA,CAAMM;EAAtB,GACGjB,QAAQ,GAAG,IAAH,gBAAU;IAAK,GAAG,EAAEC,aAAV;IAAyB,eAAY;EAArC,EADrB,CALF,eAQE;IAAG,SAAS,EAAEa;EAAd,QAAuCX,WAAvC,CARF,EASGJ,gBAAgB,gBACf,6BAAC,gBAAD;IACE,QAAQ,EAAE,EADZ;IAEE,QAAQ,EAAC,KAFX;IAGE,cAAc,EAAEK,WAHlB;IAIE,oCAAoC,EAAEE,SAAS,CAC7C,oDAD6C,CAJjD;IAOE,sBAAsB,EAAEK,cAAA,CAAMO;EAPhC,EADe,gBAWf,6BAAC,8CAAD;IAAY,SAAS,EAAEP,cAAA,CAAMQ,UAA7B;IAAyC,KAAK,EAAE,EAAhD;IAAoD,MAAM,EAAE;EAA5D,EApBJ,CADF;AAyBD,CA/CD;;AAiDArB,cAAc,CAACsB,SAAf,2CAA2BA,kBAA3B;AAEAtB,cAAc,CAACuB,YAAf,GAA8B;EAC5Bf,SAAS,EAAEgB,iBAAA,CAASC,iBAAT,CAA2BjB;AADV,CAA9B;eAIeR,c"}
|
|
@@ -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,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
7
|
+
|
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
9
|
+
|
|
10
|
+
const propTypes = {
|
|
11
|
+
isAlreadyEngaged: _propTypes.default.bool,
|
|
12
|
+
isRandom: _propTypes.default.bool,
|
|
13
|
+
userAvatarSrc: _propTypes.default.string,
|
|
14
|
+
onClick: _propTypes.default.func,
|
|
15
|
+
displayName: _propTypes.default.string,
|
|
16
|
+
tooltipText: _propTypes.default.string
|
|
17
|
+
};
|
|
18
|
+
var _default = propTypes;
|
|
19
|
+
exports.default = _default;
|
|
20
|
+
//# sourceMappingURL=prop-types.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"prop-types.js","names":["propTypes","isAlreadyEngaged","PropTypes","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;;;;AAEA,MAAMA,SAAS,GAAG;EAChBC,gBAAgB,EAAEC,kBAAA,CAAUC,IADZ;EAEhBC,QAAQ,EAAEF,kBAAA,CAAUC,IAFJ;EAGhBE,aAAa,EAAEH,kBAAA,CAAUI,MAHT;EAIhBC,OAAO,EAAEL,kBAAA,CAAUM,IAJH;EAKhBC,WAAW,EAAEP,kBAAA,CAAUI,MALP;EAMhBI,WAAW,EAAER,kBAAA,CAAUI;AANP,CAAlB;eAkBeN,S"}
|
|
@@ -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"}
|