@coorpacademy/components 10.23.3 → 10.23.4
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/molecule/brand-logo/index.native.js +31 -0
- package/es/molecule/brand-logo/index.native.js.map +1 -0
- package/es/organism/header-v2/index.native.js +104 -0
- package/es/organism/header-v2/index.native.js.map +1 -0
- package/es/template/app-player/player/slides/header/index.js +6 -3
- package/es/template/app-player/player/slides/header/index.js.map +1 -1
- package/es/template/app-player/player/slides/header/learner.css +10 -0
- package/es/template/app-player/player/slides/header/learner.js +44 -12
- package/es/template/app-player/player/slides/header/learner.js.map +1 -1
- package/es/variables/brand.native.js +2 -0
- package/es/variables/brand.native.js.map +1 -0
- package/lib/molecule/brand-logo/index.native.js +43 -0
- package/lib/molecule/brand-logo/index.native.js.map +1 -0
- package/lib/organism/header-v2/index.native.js +124 -0
- package/lib/organism/header-v2/index.native.js.map +1 -0
- package/lib/template/app-player/player/slides/header/index.js +6 -3
- package/lib/template/app-player/player/slides/header/index.js.map +1 -1
- package/lib/template/app-player/player/slides/header/learner.css +10 -0
- package/lib/template/app-player/player/slides/header/learner.js +43 -12
- package/lib/template/app-player/player/slides/header/learner.js.map +1 -1
- package/lib/variables/brand.native.js +2 -0
- package/lib/variables/brand.native.js.map +1 -0
- package/package.json +2 -2
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet } from 'react-native';
|
|
3
|
+
import ImageBackground from '../../atom/image-background/index.native';
|
|
4
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
5
|
+
const styles = StyleSheet.create({
|
|
6
|
+
logo: {
|
|
7
|
+
width: '100%'
|
|
8
|
+
}
|
|
9
|
+
});
|
|
10
|
+
|
|
11
|
+
const BrandLogo = ({
|
|
12
|
+
height
|
|
13
|
+
}) => {
|
|
14
|
+
const templateContext = useTemplateContext();
|
|
15
|
+
const {
|
|
16
|
+
brandTheme
|
|
17
|
+
} = templateContext;
|
|
18
|
+
return /*#__PURE__*/React.createElement(ImageBackground, {
|
|
19
|
+
style: [styles.logo, {
|
|
20
|
+
height
|
|
21
|
+
}],
|
|
22
|
+
testID: "brand-logo",
|
|
23
|
+
source: {
|
|
24
|
+
uri: brandTheme.images['logo-mobile']
|
|
25
|
+
},
|
|
26
|
+
resizeMode: "contain"
|
|
27
|
+
});
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export default BrandLogo;
|
|
31
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/brand-logo/index.native.tsx"],"names":["React","StyleSheet","ImageBackground","useTemplateContext","styles","create","logo","width","BrandLogo","height","templateContext","brandTheme","uri","images"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,UAAR,QAAyB,cAAzB;AACA,OAAOC,eAAP,MAA4B,0CAA5B;AACA,SAAQC,kBAAR,QAAiC,4CAAjC;AAYA,MAAMC,MAAsB,GAAGH,UAAU,CAACI,MAAX,CAAkB;AAC/CC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE;AADH;AADyC,CAAlB,CAA/B;;AAMA,MAAMC,SAAS,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAqB;AACrC,QAAMC,eAAe,GAAGP,kBAAkB,EAA1C;AACA,QAAM;AAACQ,IAAAA;AAAD,MAAeD,eAArB;AAEA,sBACE,oBAAC,eAAD;AACE,IAAA,KAAK,EAAE,CAACN,MAAM,CAACE,IAAR,EAAc;AAACG,MAAAA;AAAD,KAAd,CADT;AAEE,IAAA,MAAM,EAAC,YAFT;AAGE,IAAA,MAAM,EAAE;AACNG,MAAAA,GAAG,EAAED,UAAU,CAACE,MAAX,CAAkB,aAAlB;AADC,KAHV;AAME,IAAA,UAAU,EAAC;AANb,IADF;AAUD,CAdD;;AAgBA,eAAeL,SAAf","sourcesContent":["import React from 'react';\nimport {StyleSheet} from 'react-native';\nimport ImageBackground from '../../atom/image-background/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport interface Props {\n height: number;\n}\n\ntype StyleSheetType = {\n logo: {\n width: string;\n };\n};\n\nconst styles: StyleSheetType = StyleSheet.create({\n logo: {\n width: '100%'\n }\n});\n\nconst BrandLogo = ({height}: Props) => {\n const templateContext = useTemplateContext();\n const {brandTheme} = templateContext;\n\n return (\n <ImageBackground\n style={[styles.logo, {height}]}\n testID=\"brand-logo\"\n source={{\n uri: brandTheme.images['logo-mobile']\n }}\n resizeMode=\"contain\"\n />\n );\n};\n\nexport default BrandLogo;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import { View, StyleSheet } from 'react-native';
|
|
3
|
+
import { NovaCompositionCoorpacademySearch as SearchIcon, NovaCompositionCoorpacademyCog as SettingsIcon } from '@coorpacademy/nova-icons';
|
|
4
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
5
|
+
import BrandLogo from '../../molecule/brand-logo/index.native';
|
|
6
|
+
import Gradient from '../../atom/gradient/index.native';
|
|
7
|
+
import Touchable from '../../hoc/touchable/index.native';
|
|
8
|
+
export const HEADER_HEIGHT = 67;
|
|
9
|
+
const ICON_WIDTH = 20;
|
|
10
|
+
|
|
11
|
+
const createStyleSheet = theme => StyleSheet.create({
|
|
12
|
+
container: {
|
|
13
|
+
position: 'absolute',
|
|
14
|
+
backgroundColor: theme.colors.white,
|
|
15
|
+
flexDirection: 'row',
|
|
16
|
+
alignItems: 'center',
|
|
17
|
+
justifyContent: 'space-between',
|
|
18
|
+
height: HEADER_HEIGHT,
|
|
19
|
+
top: 0,
|
|
20
|
+
width: '100%'
|
|
21
|
+
},
|
|
22
|
+
icons: {
|
|
23
|
+
flexDirection: 'row'
|
|
24
|
+
},
|
|
25
|
+
icon: {
|
|
26
|
+
marginRight: 16
|
|
27
|
+
},
|
|
28
|
+
logo: {
|
|
29
|
+
width: 80,
|
|
30
|
+
marginLeft: 16
|
|
31
|
+
},
|
|
32
|
+
gradient: {
|
|
33
|
+
position: 'absolute',
|
|
34
|
+
left: 0,
|
|
35
|
+
top: HEADER_HEIGHT,
|
|
36
|
+
right: 0,
|
|
37
|
+
opacity: 0.3
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
const Header = props => {
|
|
42
|
+
const templateContext = useTemplateContext();
|
|
43
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
44
|
+
const {
|
|
45
|
+
theme
|
|
46
|
+
} = templateContext;
|
|
47
|
+
const {
|
|
48
|
+
onSearchPress,
|
|
49
|
+
onSettingsPress,
|
|
50
|
+
onLogoLongPress
|
|
51
|
+
} = props;
|
|
52
|
+
const logoHeight = HEADER_HEIGHT - theme.spacing.small * 2;
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
const _stylesheet = createStyleSheet(theme);
|
|
55
|
+
|
|
56
|
+
setStylesheet(_stylesheet);
|
|
57
|
+
}, [theme]); // ------------------------------------
|
|
58
|
+
|
|
59
|
+
if (!styleSheet) {
|
|
60
|
+
return null;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
64
|
+
style: [styleSheet.container],
|
|
65
|
+
testID: "header"
|
|
66
|
+
}, /*#__PURE__*/React.createElement(Gradient, {
|
|
67
|
+
height: theme.spacing.tiny,
|
|
68
|
+
colors: [theme.colors.gray.medium, theme.colors.gray.light],
|
|
69
|
+
transparencyPosition: "bottom",
|
|
70
|
+
style: styleSheet.gradient
|
|
71
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
72
|
+
style: styleSheet.logo
|
|
73
|
+
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
74
|
+
testID: "header-logo",
|
|
75
|
+
onLongPress: onLogoLongPress,
|
|
76
|
+
analyticsID: "sign-out",
|
|
77
|
+
isWithoutFeedback: true
|
|
78
|
+
}, /*#__PURE__*/React.createElement(BrandLogo, {
|
|
79
|
+
height: logoHeight
|
|
80
|
+
}))), /*#__PURE__*/React.createElement(View, {
|
|
81
|
+
style: [styleSheet.icons]
|
|
82
|
+
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
83
|
+
testID: "search-icon",
|
|
84
|
+
onPress: onSearchPress,
|
|
85
|
+
analyticsID: "search-icon"
|
|
86
|
+
}, /*#__PURE__*/React.createElement(SearchIcon, {
|
|
87
|
+
height: ICON_WIDTH,
|
|
88
|
+
width: ICON_WIDTH,
|
|
89
|
+
color: theme.colors.gray.dark,
|
|
90
|
+
style: styleSheet.icon
|
|
91
|
+
})), /*#__PURE__*/React.createElement(Touchable, {
|
|
92
|
+
testID: "settings-icon",
|
|
93
|
+
onPress: onSettingsPress,
|
|
94
|
+
analyticsID: "settings-icon"
|
|
95
|
+
}, /*#__PURE__*/React.createElement(SettingsIcon, {
|
|
96
|
+
height: ICON_WIDTH,
|
|
97
|
+
width: ICON_WIDTH,
|
|
98
|
+
color: theme.colors.gray.dark,
|
|
99
|
+
style: styleSheet.icon
|
|
100
|
+
}))));
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export default Header;
|
|
104
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/header-v2/index.native.tsx"],"names":["React","useState","useEffect","View","StyleSheet","NovaCompositionCoorpacademySearch","SearchIcon","NovaCompositionCoorpacademyCog","SettingsIcon","useTemplateContext","BrandLogo","Gradient","Touchable","HEADER_HEIGHT","ICON_WIDTH","createStyleSheet","theme","create","container","position","backgroundColor","colors","white","flexDirection","alignItems","justifyContent","height","top","width","icons","icon","marginRight","logo","marginLeft","gradient","left","right","opacity","Header","props","templateContext","styleSheet","setStylesheet","onSearchPress","onSettingsPress","onLogoLongPress","logoHeight","spacing","small","_stylesheet","tiny","gray","medium","light","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport {View, StyleSheet} from 'react-native';\nimport {\n NovaCompositionCoorpacademySearch as SearchIcon,\n NovaCompositionCoorpacademyCog as SettingsIcon\n} from '@coorpacademy/nova-icons';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport BrandLogo from '../../molecule/brand-logo/index.native';\nimport Gradient from '../../atom/gradient/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {FlexAlignType, FlexDirection, JustifyContent, Position} from '../../types/styles';\nimport {Theme} from '../../variables/theme.native';\n\nexport interface Props {\n onSearchPress: (event: PressEvent) => any;\n onSettingsPress: (event: PressEvent) => any;\n onLogoLongPress: (event: PressEvent) => any;\n}\n\nexport const HEADER_HEIGHT = 67;\nconst ICON_WIDTH = 20;\n\ntype StyleSheetType = {\n container: {\n position: Position;\n backgroundColor: string;\n flexDirection: FlexDirection;\n alignItems: FlexAlignType;\n justifyContent: JustifyContent;\n height: string | number;\n top: number;\n width: string | number;\n };\n icons: {\n flexDirection: FlexDirection;\n };\n icon: {\n marginRight: number;\n };\n logo: {\n width: number;\n marginLeft: number;\n };\n gradient: {\n position: Position;\n left: number;\n top: number;\n right: number;\n opacity: number;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n position: 'absolute',\n backgroundColor: theme.colors.white,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n height: HEADER_HEIGHT,\n top: 0,\n width: '100%'\n },\n icons: {\n flexDirection: 'row'\n },\n icon: {\n marginRight: 16\n },\n logo: {\n width: 80,\n marginLeft: 16\n },\n gradient: {\n position: 'absolute',\n left: 0,\n top: HEADER_HEIGHT,\n right: 0,\n opacity: 0.3\n }\n });\n\nconst Header = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n\n const {onSearchPress, onSettingsPress, onLogoLongPress} = props;\n const logoHeight = HEADER_HEIGHT - theme.spacing.small * 2;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n // ------------------------------------\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={[styleSheet.container]} testID=\"header\">\n <Gradient\n height={theme.spacing.tiny}\n colors={[theme.colors.gray.medium, theme.colors.gray.light]}\n transparencyPosition=\"bottom\"\n style={styleSheet.gradient}\n />\n <View style={styleSheet.logo}>\n <Touchable\n testID=\"header-logo\"\n onLongPress={onLogoLongPress}\n analyticsID=\"sign-out\"\n isWithoutFeedback\n >\n <BrandLogo height={logoHeight} />\n </Touchable>\n </View>\n <View style={[styleSheet.icons]}>\n <Touchable testID=\"search-icon\" onPress={onSearchPress} analyticsID=\"search-icon\">\n <SearchIcon\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n color={theme.colors.gray.dark}\n style={styleSheet.icon}\n />\n </Touchable>\n <Touchable testID=\"settings-icon\" onPress={onSettingsPress} analyticsID=\"settings-icon\">\n <SettingsIcon\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n color={theme.colors.gray.dark}\n style={styleSheet.icon}\n />\n </Touchable>\n </View>\n </View>\n );\n};\n\nexport default Header;\n"],"file":"index.native.js"}
|
|
@@ -16,14 +16,16 @@ const SlidesHeader = (props = {}, context = undefined) => {
|
|
|
16
16
|
type,
|
|
17
17
|
content,
|
|
18
18
|
subcontent,
|
|
19
|
-
lives
|
|
19
|
+
lives,
|
|
20
|
+
mode
|
|
20
21
|
} = props;
|
|
21
22
|
return /*#__PURE__*/React.createElement("div", {
|
|
22
23
|
"data-name": "slidesHeader",
|
|
23
24
|
className: style.wrapper
|
|
24
25
|
}, type === HEADER_TYPE.LEARNER ? /*#__PURE__*/React.createElement(Learner, {
|
|
25
26
|
content: content,
|
|
26
|
-
subcontent: subcontent
|
|
27
|
+
subcontent: subcontent,
|
|
28
|
+
mode: mode
|
|
27
29
|
}) : null, type === HEADER_TYPE.MICROLEARNING ? /*#__PURE__*/React.createElement(Microlearning, {
|
|
28
30
|
content: content
|
|
29
31
|
}) : null, lives ? /*#__PURE__*/React.createElement(Lives, {
|
|
@@ -42,7 +44,8 @@ SlidesHeader.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
42
44
|
title: PropTypes.string,
|
|
43
45
|
details: PropTypes.string
|
|
44
46
|
}),
|
|
45
|
-
lives: PropTypes.shape(Lives.propTypes)
|
|
47
|
+
lives: PropTypes.shape(Lives.propTypes),
|
|
48
|
+
mode: PropTypes.string
|
|
46
49
|
} : {};
|
|
47
50
|
export default SlidesHeader;
|
|
48
51
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":["React","PropTypes","Link","Learner","Microlearning","Lives","style","HEADER_TYPE","LEARNER","MICROLEARNING","SlidesHeader","props","context","undefined","type","content","subcontent","lives","wrapper","count","propTypes","oneOf","shape","href","title","string","isRequired","details"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,0BAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB,C,CAAiC;;AAEjC,MAAMC,WAAW,GAAG;AAClBC,EAAAA,OAAO,EAAE,SADS;AAElBC,EAAAA,aAAa,EAAE;AAFG,CAApB;;AAKA,MAAMC,YAAY,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,OAAO,GAAGC,SAAvB,KAAqC;AACxD,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,UAAhB;AAA4BC,IAAAA;
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":["React","PropTypes","Link","Learner","Microlearning","Lives","style","HEADER_TYPE","LEARNER","MICROLEARNING","SlidesHeader","props","context","undefined","type","content","subcontent","lives","mode","wrapper","count","propTypes","oneOf","shape","href","title","string","isRequired","details"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,IAAP,MAAiB,0BAAjB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,aAAP,MAA0B,iBAA1B;AACA,OAAOC,KAAP,MAAkB,SAAlB;AACA,OAAOC,KAAP,MAAkB,aAAlB,C,CAAiC;;AAEjC,MAAMC,WAAW,GAAG;AAClBC,EAAAA,OAAO,EAAE,SADS;AAElBC,EAAAA,aAAa,EAAE;AAFG,CAApB;;AAKA,MAAMC,YAAY,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,OAAO,GAAGC,SAAvB,KAAqC;AACxD,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,UAAhB;AAA4BC,IAAAA,KAA5B;AAAmCC,IAAAA;AAAnC,MAA2CP,KAAjD;AAEA,sBACE;AAAK,iBAAU,cAAf;AAA8B,IAAA,SAAS,EAAEL,KAAK,CAACa;AAA/C,KACGL,IAAI,KAAKP,WAAW,CAACC,OAArB,gBACC,oBAAC,OAAD;AAAS,IAAA,OAAO,EAAEO,OAAlB;AAA2B,IAAA,UAAU,EAAEC,UAAvC;AAAmD,IAAA,IAAI,EAAEE;AAAzD,IADD,GAEG,IAHN,EAIGJ,IAAI,KAAKP,WAAW,CAACE,aAArB,gBAAqC,oBAAC,aAAD;AAAe,IAAA,OAAO,EAAEM;AAAxB,IAArC,GAA2E,IAJ9E,EAKGE,KAAK,gBAAG,oBAAC,KAAD;AAAO,IAAA,KAAK,EAAEA,KAAK,CAACG;AAApB,IAAH,GAAmC,IAL3C,CADF;AASD,CAZD;;AAcAV,YAAY,CAACW,SAAb,2CAAyB;AACvBP,EAAAA,IAAI,EAAEb,SAAS,CAACqB,KAAV,CAAgB,CAACf,WAAW,CAACC,OAAb,EAAsBD,WAAW,CAACE,aAAlC,CAAhB,CADiB;AAEvBM,EAAAA,OAAO,EAAEd,SAAS,CAACsB,KAAV,CAAgB;AACvBC,IAAAA,IAAI,EAAEtB,IAAI,CAACmB,SAAL,CAAeG,IADE;AAEvBC,IAAAA,KAAK,EAAExB,SAAS,CAACyB,MAAV,CAAiBC,UAFD;AAGvBC,IAAAA,OAAO,EAAE3B,SAAS,CAACyB;AAHI,GAAhB,CAFc;AAOvBV,EAAAA,UAAU,EAAEf,SAAS,CAACsB,KAAV,CAAgB;AAC1BE,IAAAA,KAAK,EAAExB,SAAS,CAACyB,MADS;AAE1BE,IAAAA,OAAO,EAAE3B,SAAS,CAACyB;AAFO,GAAhB,CAPW;AAWvBT,EAAAA,KAAK,EAAEhB,SAAS,CAACsB,KAAV,CAAgBlB,KAAK,CAACgB,SAAtB,CAXgB;AAYvBH,EAAAA,IAAI,EAAEjB,SAAS,CAACyB;AAZO,CAAzB;AAeA,eAAehB,YAAf","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Link from '../../../../../atom/link';\nimport Learner from './learner';\nimport Microlearning from './microlearning';\nimport Lives from './lives';\nimport style from './style.css'; // eslint-disable-line css-modules/no-unused-class\n\nconst HEADER_TYPE = {\n LEARNER: 'learner',\n MICROLEARNING: 'microlearning'\n};\n\nconst SlidesHeader = (props = {}, context = undefined) => {\n const {type, content, subcontent, lives, mode} = props;\n\n return (\n <div data-name=\"slidesHeader\" className={style.wrapper}>\n {type === HEADER_TYPE.LEARNER ? (\n <Learner content={content} subcontent={subcontent} mode={mode} />\n ) : null}\n {type === HEADER_TYPE.MICROLEARNING ? <Microlearning content={content} /> : null}\n {lives ? <Lives count={lives.count} /> : null}\n </div>\n );\n};\n\nSlidesHeader.propTypes = {\n type: PropTypes.oneOf([HEADER_TYPE.LEARNER, HEADER_TYPE.MICROLEARNING]),\n content: PropTypes.shape({\n href: Link.propTypes.href,\n title: PropTypes.string.isRequired,\n details: PropTypes.string\n }),\n subcontent: PropTypes.shape({\n title: PropTypes.string,\n details: PropTypes.string\n }),\n lives: PropTypes.shape(Lives.propTypes),\n mode: PropTypes.string\n};\n\nexport default SlidesHeader;\n"],"file":"index.js"}
|
|
@@ -92,6 +92,16 @@
|
|
|
92
92
|
composes: innerHTML from '../../../../../atom/label/style.css';
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
.contentWrapperScorm {
|
|
96
|
+
composes: contentWrapper;
|
|
97
|
+
cursor: default;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.contentWrapperScorm:hover {
|
|
101
|
+
color: dark;
|
|
102
|
+
stroke: dark;
|
|
103
|
+
}
|
|
104
|
+
|
|
95
105
|
@media mobile {
|
|
96
106
|
.contentWrapper {
|
|
97
107
|
max-width: 90%;
|
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
import _get from "lodash/fp/get";
|
|
2
|
+
|
|
3
|
+
function _extends() { _extends = Object.assign || 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); }
|
|
4
|
+
|
|
2
5
|
import React from 'react';
|
|
3
6
|
import PropTypes from 'prop-types';
|
|
4
7
|
import classnames from 'classnames';
|
|
@@ -7,10 +10,37 @@ import Link from '../../../../../atom/link';
|
|
|
7
10
|
import Provider from '../../../../../atom/provider';
|
|
8
11
|
import style from './learner.css';
|
|
9
12
|
|
|
13
|
+
const LearnerHeaderWrapper = props => {
|
|
14
|
+
const {
|
|
15
|
+
children,
|
|
16
|
+
mode,
|
|
17
|
+
onClick
|
|
18
|
+
} = props;
|
|
19
|
+
if (mode === 'scorm') return /*#__PURE__*/React.createElement("div", {
|
|
20
|
+
className: style.contentWrapperScorm
|
|
21
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
22
|
+
className: style.backIcon
|
|
23
|
+
}), children);
|
|
24
|
+
return /*#__PURE__*/React.createElement(Link, {
|
|
25
|
+
onClick: onClick,
|
|
26
|
+
className: style.contentWrapper
|
|
27
|
+
}, /*#__PURE__*/React.createElement(BackIcon, {
|
|
28
|
+
className: style.backIcon,
|
|
29
|
+
color: "inherit"
|
|
30
|
+
}), children);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
LearnerHeaderWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
34
|
+
onClick: Link.propTypes.onClick,
|
|
35
|
+
mode: PropTypes.string,
|
|
36
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
|
|
37
|
+
} : {};
|
|
38
|
+
|
|
10
39
|
const Content = ({
|
|
11
40
|
onClick,
|
|
12
41
|
title,
|
|
13
|
-
details
|
|
42
|
+
details,
|
|
43
|
+
mode
|
|
14
44
|
}, context) => {
|
|
15
45
|
const {
|
|
16
46
|
skin
|
|
@@ -18,13 +48,10 @@ const Content = ({
|
|
|
18
48
|
|
|
19
49
|
const primarySkinColor = _get('common.primary', skin);
|
|
20
50
|
|
|
21
|
-
return /*#__PURE__*/React.createElement(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}, /*#__PURE__*/React.createElement(
|
|
25
|
-
className: style.backIcon,
|
|
26
|
-
color: "inherit"
|
|
27
|
-
}), /*#__PURE__*/React.createElement("div", {
|
|
51
|
+
return /*#__PURE__*/React.createElement(LearnerHeaderWrapper, {
|
|
52
|
+
mode: mode,
|
|
53
|
+
onClick: onClick
|
|
54
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
28
55
|
className: style.content
|
|
29
56
|
}, /*#__PURE__*/React.createElement("div", {
|
|
30
57
|
className: style.contentDetails,
|
|
@@ -47,7 +74,8 @@ Content.contextTypes = {
|
|
|
47
74
|
Content.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
48
75
|
onClick: Link.propTypes.onClick,
|
|
49
76
|
title: PropTypes.string.isRequired,
|
|
50
|
-
details: PropTypes.string
|
|
77
|
+
details: PropTypes.string,
|
|
78
|
+
mode: PropTypes.string
|
|
51
79
|
} : {};
|
|
52
80
|
|
|
53
81
|
const Subcontent = ({
|
|
@@ -73,16 +101,20 @@ Subcontent.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
73
101
|
const LearnerHeader = (props, context) => {
|
|
74
102
|
const {
|
|
75
103
|
content,
|
|
76
|
-
subcontent
|
|
104
|
+
subcontent,
|
|
105
|
+
mode
|
|
77
106
|
} = props;
|
|
78
107
|
return /*#__PURE__*/React.createElement("div", {
|
|
79
108
|
className: style.wrapper
|
|
80
|
-
}, /*#__PURE__*/React.createElement(Content,
|
|
109
|
+
}, /*#__PURE__*/React.createElement(Content, _extends({}, content, {
|
|
110
|
+
mode: mode
|
|
111
|
+
})), /*#__PURE__*/React.createElement(Subcontent, subcontent));
|
|
81
112
|
};
|
|
82
113
|
|
|
83
114
|
LearnerHeader.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
84
115
|
content: PropTypes.shape(Content.propTypes).isRequired,
|
|
85
|
-
subcontent: PropTypes.shape(Subcontent.propTypes).isRequired
|
|
116
|
+
subcontent: PropTypes.shape(Subcontent.propTypes).isRequired,
|
|
117
|
+
mode: PropTypes.string
|
|
86
118
|
} : {};
|
|
87
119
|
export default LearnerHeader;
|
|
88
120
|
//# sourceMappingURL=learner.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","Provider","style","
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["React","PropTypes","classnames","NovaCompositionNavigationArrowLeft","BackIcon","Link","Provider","style","LearnerHeaderWrapper","props","children","mode","onClick","contentWrapperScorm","backIcon","contentWrapper","propTypes","string","oneOfType","arrayOf","node","isRequired","Content","title","details","context","skin","primarySkinColor","content","contentDetails","color","contentTitle","innerHTML","__html","contextTypes","childContextTypes","Subcontent","subcontent","subcontentDetails","subcontentTitle","LearnerHeader","wrapper","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport Provider from '../../../../../atom/provider';\nimport style from './learner.css';\n\nconst LearnerHeaderWrapper = props => {\n const {children, mode, onClick} = props;\n if (mode === 'scorm')\n return (\n <div className={style.contentWrapperScorm}>\n <div className={style.backIcon} />\n {children}\n </div>\n );\n return (\n <Link onClick={onClick} className={style.contentWrapper}>\n <BackIcon className={style.backIcon} color=\"inherit\" />\n {children}\n </Link>\n );\n};\n\nLearnerHeaderWrapper.propTypes = {\n onClick: Link.propTypes.onClick,\n mode: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired\n};\n\nconst Content = ({onClick, title, details, mode}, context) => {\n const {skin} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <LearnerHeaderWrapper mode={mode} onClick={onClick}>\n <div className={style.content}>\n <div\n className={style.contentDetails}\n style={{\n color: primarySkinColor\n }}\n >\n {details}\n </div>\n\n <span\n data-name=\"contentTitle\"\n className={classnames(style.contentTitle, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </LearnerHeaderWrapper>\n );\n};\n\nContent.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nContent.propTypes = {\n onClick: Link.propTypes.onClick,\n title: PropTypes.string.isRequired,\n details: PropTypes.string,\n mode: PropTypes.string\n};\n\nconst Subcontent = ({title, details}, context) => (\n <div className={style.subcontent}>\n <div className={style.subcontentDetails}>{details}</div>\n <div\n className={classnames(style.subcontentTitle, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n);\n\nSubcontent.propTypes = {\n title: PropTypes.string.isRequired,\n details: PropTypes.string\n};\n\nconst LearnerHeader = (props, context) => {\n const {content, subcontent, mode} = props;\n\n return (\n <div className={style.wrapper}>\n <Content {...content} mode={mode} />\n <Subcontent {...subcontent} />\n </div>\n );\n};\n\nLearnerHeader.propTypes = {\n content: PropTypes.shape(Content.propTypes).isRequired,\n subcontent: PropTypes.shape(Subcontent.propTypes).isRequired,\n mode: PropTypes.string\n};\n\nexport default LearnerHeader;\n"],"file":"learner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"brand.native.js"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireDefault(require("react"));
|
|
7
|
+
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
|
|
10
|
+
var _index = _interopRequireDefault(require("../../atom/image-background/index.native"));
|
|
11
|
+
|
|
12
|
+
var _templateContext = require("../../template/app-review/template-context");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
const styles = _reactNative.StyleSheet.create({
|
|
17
|
+
logo: {
|
|
18
|
+
width: '100%'
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
|
|
22
|
+
const BrandLogo = ({
|
|
23
|
+
height
|
|
24
|
+
}) => {
|
|
25
|
+
const templateContext = (0, _templateContext.useTemplateContext)();
|
|
26
|
+
const {
|
|
27
|
+
brandTheme
|
|
28
|
+
} = templateContext;
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
30
|
+
style: [styles.logo, {
|
|
31
|
+
height
|
|
32
|
+
}],
|
|
33
|
+
testID: "brand-logo",
|
|
34
|
+
source: {
|
|
35
|
+
uri: brandTheme.images['logo-mobile']
|
|
36
|
+
},
|
|
37
|
+
resizeMode: "contain"
|
|
38
|
+
});
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
var _default = BrandLogo;
|
|
42
|
+
exports.default = _default;
|
|
43
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/brand-logo/index.native.tsx"],"names":["styles","StyleSheet","create","logo","width","BrandLogo","height","templateContext","brandTheme","uri","images"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;;;AAYA,MAAMA,MAAsB,GAAGC,wBAAWC,MAAX,CAAkB;AAC/CC,EAAAA,IAAI,EAAE;AACJC,IAAAA,KAAK,EAAE;AADH;AADyC,CAAlB,CAA/B;;AAMA,MAAMC,SAAS,GAAG,CAAC;AAACC,EAAAA;AAAD,CAAD,KAAqB;AACrC,QAAMC,eAAe,GAAG,0CAAxB;AACA,QAAM;AAACC,IAAAA;AAAD,MAAeD,eAArB;AAEA,sBACE,6BAAC,cAAD;AACE,IAAA,KAAK,EAAE,CAACP,MAAM,CAACG,IAAR,EAAc;AAACG,MAAAA;AAAD,KAAd,CADT;AAEE,IAAA,MAAM,EAAC,YAFT;AAGE,IAAA,MAAM,EAAE;AACNG,MAAAA,GAAG,EAAED,UAAU,CAACE,MAAX,CAAkB,aAAlB;AADC,KAHV;AAME,IAAA,UAAU,EAAC;AANb,IADF;AAUD,CAdD;;eAgBeL,S","sourcesContent":["import React from 'react';\nimport {StyleSheet} from 'react-native';\nimport ImageBackground from '../../atom/image-background/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\n\nexport interface Props {\n height: number;\n}\n\ntype StyleSheetType = {\n logo: {\n width: string;\n };\n};\n\nconst styles: StyleSheetType = StyleSheet.create({\n logo: {\n width: '100%'\n }\n});\n\nconst BrandLogo = ({height}: Props) => {\n const templateContext = useTemplateContext();\n const {brandTheme} = templateContext;\n\n return (\n <ImageBackground\n style={[styles.logo, {height}]}\n testID=\"brand-logo\"\n source={{\n uri: brandTheme.images['logo-mobile']\n }}\n resizeMode=\"contain\"\n />\n );\n};\n\nexport default BrandLogo;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1,124 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = exports.HEADER_HEIGHT = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
|
|
10
|
+
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
11
|
+
|
|
12
|
+
var _templateContext = require("../../template/app-review/template-context");
|
|
13
|
+
|
|
14
|
+
var _index = _interopRequireDefault(require("../../molecule/brand-logo/index.native"));
|
|
15
|
+
|
|
16
|
+
var _index2 = _interopRequireDefault(require("../../atom/gradient/index.native"));
|
|
17
|
+
|
|
18
|
+
var _index3 = _interopRequireDefault(require("../../hoc/touchable/index.native"));
|
|
19
|
+
|
|
20
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
|
+
|
|
22
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
23
|
+
|
|
24
|
+
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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
|
+
const HEADER_HEIGHT = 67;
|
|
27
|
+
exports.HEADER_HEIGHT = HEADER_HEIGHT;
|
|
28
|
+
const ICON_WIDTH = 20;
|
|
29
|
+
|
|
30
|
+
const createStyleSheet = theme => _reactNative.StyleSheet.create({
|
|
31
|
+
container: {
|
|
32
|
+
position: 'absolute',
|
|
33
|
+
backgroundColor: theme.colors.white,
|
|
34
|
+
flexDirection: 'row',
|
|
35
|
+
alignItems: 'center',
|
|
36
|
+
justifyContent: 'space-between',
|
|
37
|
+
height: HEADER_HEIGHT,
|
|
38
|
+
top: 0,
|
|
39
|
+
width: '100%'
|
|
40
|
+
},
|
|
41
|
+
icons: {
|
|
42
|
+
flexDirection: 'row'
|
|
43
|
+
},
|
|
44
|
+
icon: {
|
|
45
|
+
marginRight: 16
|
|
46
|
+
},
|
|
47
|
+
logo: {
|
|
48
|
+
width: 80,
|
|
49
|
+
marginLeft: 16
|
|
50
|
+
},
|
|
51
|
+
gradient: {
|
|
52
|
+
position: 'absolute',
|
|
53
|
+
left: 0,
|
|
54
|
+
top: HEADER_HEIGHT,
|
|
55
|
+
right: 0,
|
|
56
|
+
opacity: 0.3
|
|
57
|
+
}
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
const Header = props => {
|
|
61
|
+
const templateContext = (0, _templateContext.useTemplateContext)();
|
|
62
|
+
const [styleSheet, setStylesheet] = (0, _react.useState)(null);
|
|
63
|
+
const {
|
|
64
|
+
theme
|
|
65
|
+
} = templateContext;
|
|
66
|
+
const {
|
|
67
|
+
onSearchPress,
|
|
68
|
+
onSettingsPress,
|
|
69
|
+
onLogoLongPress
|
|
70
|
+
} = props;
|
|
71
|
+
const logoHeight = HEADER_HEIGHT - theme.spacing.small * 2;
|
|
72
|
+
(0, _react.useEffect)(() => {
|
|
73
|
+
const _stylesheet = createStyleSheet(theme);
|
|
74
|
+
|
|
75
|
+
setStylesheet(_stylesheet);
|
|
76
|
+
}, [theme]); // ------------------------------------
|
|
77
|
+
|
|
78
|
+
if (!styleSheet) {
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
83
|
+
style: [styleSheet.container],
|
|
84
|
+
testID: "header"
|
|
85
|
+
}, /*#__PURE__*/_react.default.createElement(_index2.default, {
|
|
86
|
+
height: theme.spacing.tiny,
|
|
87
|
+
colors: [theme.colors.gray.medium, theme.colors.gray.light],
|
|
88
|
+
transparencyPosition: "bottom",
|
|
89
|
+
style: styleSheet.gradient
|
|
90
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
91
|
+
style: styleSheet.logo
|
|
92
|
+
}, /*#__PURE__*/_react.default.createElement(_index3.default, {
|
|
93
|
+
testID: "header-logo",
|
|
94
|
+
onLongPress: onLogoLongPress,
|
|
95
|
+
analyticsID: "sign-out",
|
|
96
|
+
isWithoutFeedback: true
|
|
97
|
+
}, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
98
|
+
height: logoHeight
|
|
99
|
+
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
100
|
+
style: [styleSheet.icons]
|
|
101
|
+
}, /*#__PURE__*/_react.default.createElement(_index3.default, {
|
|
102
|
+
testID: "search-icon",
|
|
103
|
+
onPress: onSearchPress,
|
|
104
|
+
analyticsID: "search-icon"
|
|
105
|
+
}, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademySearch, {
|
|
106
|
+
height: ICON_WIDTH,
|
|
107
|
+
width: ICON_WIDTH,
|
|
108
|
+
color: theme.colors.gray.dark,
|
|
109
|
+
style: styleSheet.icon
|
|
110
|
+
})), /*#__PURE__*/_react.default.createElement(_index3.default, {
|
|
111
|
+
testID: "settings-icon",
|
|
112
|
+
onPress: onSettingsPress,
|
|
113
|
+
analyticsID: "settings-icon"
|
|
114
|
+
}, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionCoorpacademyCog, {
|
|
115
|
+
height: ICON_WIDTH,
|
|
116
|
+
width: ICON_WIDTH,
|
|
117
|
+
color: theme.colors.gray.dark,
|
|
118
|
+
style: styleSheet.icon
|
|
119
|
+
}))));
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
var _default = Header;
|
|
123
|
+
exports.default = _default;
|
|
124
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/organism/header-v2/index.native.tsx"],"names":["HEADER_HEIGHT","ICON_WIDTH","createStyleSheet","theme","StyleSheet","create","container","position","backgroundColor","colors","white","flexDirection","alignItems","justifyContent","height","top","width","icons","icon","marginRight","logo","marginLeft","gradient","left","right","opacity","Header","props","templateContext","styleSheet","setStylesheet","onSearchPress","onSettingsPress","onLogoLongPress","logoHeight","spacing","small","_stylesheet","tiny","gray","medium","light","dark"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport {View, StyleSheet} from 'react-native';\nimport {\n NovaCompositionCoorpacademySearch as SearchIcon,\n NovaCompositionCoorpacademyCog as SettingsIcon\n} from '@coorpacademy/nova-icons';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport BrandLogo from '../../molecule/brand-logo/index.native';\nimport Gradient from '../../atom/gradient/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {FlexAlignType, FlexDirection, JustifyContent, Position} from '../../types/styles';\nimport {Theme} from '../../variables/theme.native';\n\nexport interface Props {\n onSearchPress: (event: PressEvent) => any;\n onSettingsPress: (event: PressEvent) => any;\n onLogoLongPress: (event: PressEvent) => any;\n}\n\nexport const HEADER_HEIGHT = 67;\nconst ICON_WIDTH = 20;\n\ntype StyleSheetType = {\n container: {\n position: Position;\n backgroundColor: string;\n flexDirection: FlexDirection;\n alignItems: FlexAlignType;\n justifyContent: JustifyContent;\n height: string | number;\n top: number;\n width: string | number;\n };\n icons: {\n flexDirection: FlexDirection;\n };\n icon: {\n marginRight: number;\n };\n logo: {\n width: number;\n marginLeft: number;\n };\n gradient: {\n position: Position;\n left: number;\n top: number;\n right: number;\n opacity: number;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n position: 'absolute',\n backgroundColor: theme.colors.white,\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n height: HEADER_HEIGHT,\n top: 0,\n width: '100%'\n },\n icons: {\n flexDirection: 'row'\n },\n icon: {\n marginRight: 16\n },\n logo: {\n width: 80,\n marginLeft: 16\n },\n gradient: {\n position: 'absolute',\n left: 0,\n top: HEADER_HEIGHT,\n right: 0,\n opacity: 0.3\n }\n });\n\nconst Header = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n\n const {onSearchPress, onSettingsPress, onLogoLongPress} = props;\n const logoHeight = HEADER_HEIGHT - theme.spacing.small * 2;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n // ------------------------------------\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={[styleSheet.container]} testID=\"header\">\n <Gradient\n height={theme.spacing.tiny}\n colors={[theme.colors.gray.medium, theme.colors.gray.light]}\n transparencyPosition=\"bottom\"\n style={styleSheet.gradient}\n />\n <View style={styleSheet.logo}>\n <Touchable\n testID=\"header-logo\"\n onLongPress={onLogoLongPress}\n analyticsID=\"sign-out\"\n isWithoutFeedback\n >\n <BrandLogo height={logoHeight} />\n </Touchable>\n </View>\n <View style={[styleSheet.icons]}>\n <Touchable testID=\"search-icon\" onPress={onSearchPress} analyticsID=\"search-icon\">\n <SearchIcon\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n color={theme.colors.gray.dark}\n style={styleSheet.icon}\n />\n </Touchable>\n <Touchable testID=\"settings-icon\" onPress={onSettingsPress} analyticsID=\"settings-icon\">\n <SettingsIcon\n height={ICON_WIDTH}\n width={ICON_WIDTH}\n color={theme.colors.gray.dark}\n style={styleSheet.icon}\n />\n </Touchable>\n </View>\n </View>\n );\n};\n\nexport default Header;\n"],"file":"index.native.js"}
|
|
@@ -30,14 +30,16 @@ const SlidesHeader = (props = {}, context = undefined) => {
|
|
|
30
30
|
type,
|
|
31
31
|
content,
|
|
32
32
|
subcontent,
|
|
33
|
-
lives
|
|
33
|
+
lives,
|
|
34
|
+
mode
|
|
34
35
|
} = props;
|
|
35
36
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
36
37
|
"data-name": "slidesHeader",
|
|
37
38
|
className: _style.default.wrapper
|
|
38
39
|
}, type === HEADER_TYPE.LEARNER ? /*#__PURE__*/_react.default.createElement(_learner.default, {
|
|
39
40
|
content: content,
|
|
40
|
-
subcontent: subcontent
|
|
41
|
+
subcontent: subcontent,
|
|
42
|
+
mode: mode
|
|
41
43
|
}) : null, type === HEADER_TYPE.MICROLEARNING ? /*#__PURE__*/_react.default.createElement(_microlearning.default, {
|
|
42
44
|
content: content
|
|
43
45
|
}) : null, lives ? /*#__PURE__*/_react.default.createElement(_lives.default, {
|
|
@@ -56,7 +58,8 @@ SlidesHeader.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
56
58
|
title: _propTypes.default.string,
|
|
57
59
|
details: _propTypes.default.string
|
|
58
60
|
}),
|
|
59
|
-
lives: _propTypes.default.shape(_lives.default.propTypes)
|
|
61
|
+
lives: _propTypes.default.shape(_lives.default.propTypes),
|
|
62
|
+
mode: _propTypes.default.string
|
|
60
63
|
} : {};
|
|
61
64
|
var _default = SlidesHeader;
|
|
62
65
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":["HEADER_TYPE","LEARNER","MICROLEARNING","SlidesHeader","props","context","undefined","type","content","subcontent","lives","style","wrapper","count","propTypes","PropTypes","oneOf","shape","href","Link","title","string","isRequired","details","Lives"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAAiC;AAEjC,MAAMA,WAAW,GAAG;AAClBC,EAAAA,OAAO,EAAE,SADS;AAElBC,EAAAA,aAAa,EAAE;AAFG,CAApB;;AAKA,MAAMC,YAAY,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,OAAO,GAAGC,SAAvB,KAAqC;AACxD,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,UAAhB;AAA4BC,IAAAA;
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/index.js"],"names":["HEADER_TYPE","LEARNER","MICROLEARNING","SlidesHeader","props","context","undefined","type","content","subcontent","lives","mode","style","wrapper","count","propTypes","PropTypes","oneOf","shape","href","Link","title","string","isRequired","details","Lives"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAAiC;AAEjC,MAAMA,WAAW,GAAG;AAClBC,EAAAA,OAAO,EAAE,SADS;AAElBC,EAAAA,aAAa,EAAE;AAFG,CAApB;;AAKA,MAAMC,YAAY,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,OAAO,GAAGC,SAAvB,KAAqC;AACxD,QAAM;AAACC,IAAAA,IAAD;AAAOC,IAAAA,OAAP;AAAgBC,IAAAA,UAAhB;AAA4BC,IAAAA,KAA5B;AAAmCC,IAAAA;AAAnC,MAA2CP,KAAjD;AAEA,sBACE;AAAK,iBAAU,cAAf;AAA8B,IAAA,SAAS,EAAEQ,eAAMC;AAA/C,KACGN,IAAI,KAAKP,WAAW,CAACC,OAArB,gBACC,6BAAC,gBAAD;AAAS,IAAA,OAAO,EAAEO,OAAlB;AAA2B,IAAA,UAAU,EAAEC,UAAvC;AAAmD,IAAA,IAAI,EAAEE;AAAzD,IADD,GAEG,IAHN,EAIGJ,IAAI,KAAKP,WAAW,CAACE,aAArB,gBAAqC,6BAAC,sBAAD;AAAe,IAAA,OAAO,EAAEM;AAAxB,IAArC,GAA2E,IAJ9E,EAKGE,KAAK,gBAAG,6BAAC,cAAD;AAAO,IAAA,KAAK,EAAEA,KAAK,CAACI;AAApB,IAAH,GAAmC,IAL3C,CADF;AASD,CAZD;;AAcAX,YAAY,CAACY,SAAb,2CAAyB;AACvBR,EAAAA,IAAI,EAAES,mBAAUC,KAAV,CAAgB,CAACjB,WAAW,CAACC,OAAb,EAAsBD,WAAW,CAACE,aAAlC,CAAhB,CADiB;AAEvBM,EAAAA,OAAO,EAAEQ,mBAAUE,KAAV,CAAgB;AACvBC,IAAAA,IAAI,EAAEC,cAAKL,SAAL,CAAeI,IADE;AAEvBE,IAAAA,KAAK,EAAEL,mBAAUM,MAAV,CAAiBC,UAFD;AAGvBC,IAAAA,OAAO,EAAER,mBAAUM;AAHI,GAAhB,CAFc;AAOvBb,EAAAA,UAAU,EAAEO,mBAAUE,KAAV,CAAgB;AAC1BG,IAAAA,KAAK,EAAEL,mBAAUM,MADS;AAE1BE,IAAAA,OAAO,EAAER,mBAAUM;AAFO,GAAhB,CAPW;AAWvBZ,EAAAA,KAAK,EAAEM,mBAAUE,KAAV,CAAgBO,eAAMV,SAAtB,CAXgB;AAYvBJ,EAAAA,IAAI,EAAEK,mBAAUM;AAZO,CAAzB;eAeenB,Y","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Link from '../../../../../atom/link';\nimport Learner from './learner';\nimport Microlearning from './microlearning';\nimport Lives from './lives';\nimport style from './style.css'; // eslint-disable-line css-modules/no-unused-class\n\nconst HEADER_TYPE = {\n LEARNER: 'learner',\n MICROLEARNING: 'microlearning'\n};\n\nconst SlidesHeader = (props = {}, context = undefined) => {\n const {type, content, subcontent, lives, mode} = props;\n\n return (\n <div data-name=\"slidesHeader\" className={style.wrapper}>\n {type === HEADER_TYPE.LEARNER ? (\n <Learner content={content} subcontent={subcontent} mode={mode} />\n ) : null}\n {type === HEADER_TYPE.MICROLEARNING ? <Microlearning content={content} /> : null}\n {lives ? <Lives count={lives.count} /> : null}\n </div>\n );\n};\n\nSlidesHeader.propTypes = {\n type: PropTypes.oneOf([HEADER_TYPE.LEARNER, HEADER_TYPE.MICROLEARNING]),\n content: PropTypes.shape({\n href: Link.propTypes.href,\n title: PropTypes.string.isRequired,\n details: PropTypes.string\n }),\n subcontent: PropTypes.shape({\n title: PropTypes.string,\n details: PropTypes.string\n }),\n lives: PropTypes.shape(Lives.propTypes),\n mode: PropTypes.string\n};\n\nexport default SlidesHeader;\n"],"file":"index.js"}
|
|
@@ -92,6 +92,16 @@
|
|
|
92
92
|
composes: innerHTML from '../../../../../atom/label/style.css';
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
+
.contentWrapperScorm {
|
|
96
|
+
composes: contentWrapper;
|
|
97
|
+
cursor: default;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.contentWrapperScorm:hover {
|
|
101
|
+
color: dark;
|
|
102
|
+
stroke: dark;
|
|
103
|
+
}
|
|
104
|
+
|
|
95
105
|
@media mobile {
|
|
96
106
|
.contentWrapper {
|
|
97
107
|
max-width: 90%;
|
|
@@ -21,22 +21,48 @@ var _learner = _interopRequireDefault(require("./learner.css"));
|
|
|
21
21
|
|
|
22
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
23
|
|
|
24
|
+
function _extends() { _extends = Object.assign || 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); }
|
|
25
|
+
|
|
26
|
+
const LearnerHeaderWrapper = props => {
|
|
27
|
+
const {
|
|
28
|
+
children,
|
|
29
|
+
mode,
|
|
30
|
+
onClick
|
|
31
|
+
} = props;
|
|
32
|
+
if (mode === 'scorm') return /*#__PURE__*/_react.default.createElement("div", {
|
|
33
|
+
className: _learner.default.contentWrapperScorm
|
|
34
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
35
|
+
className: _learner.default.backIcon
|
|
36
|
+
}), children);
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement(_link.default, {
|
|
38
|
+
onClick: onClick,
|
|
39
|
+
className: _learner.default.contentWrapper
|
|
40
|
+
}, /*#__PURE__*/_react.default.createElement(_novaIcons.NovaCompositionNavigationArrowLeft, {
|
|
41
|
+
className: _learner.default.backIcon,
|
|
42
|
+
color: "inherit"
|
|
43
|
+
}), children);
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
LearnerHeaderWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
47
|
+
onClick: _link.default.propTypes.onClick,
|
|
48
|
+
mode: _propTypes.default.string,
|
|
49
|
+
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
|
|
50
|
+
} : {};
|
|
51
|
+
|
|
24
52
|
const Content = ({
|
|
25
53
|
onClick,
|
|
26
54
|
title,
|
|
27
|
-
details
|
|
55
|
+
details,
|
|
56
|
+
mode
|
|
28
57
|
}, context) => {
|
|
29
58
|
const {
|
|
30
59
|
skin
|
|
31
60
|
} = context;
|
|
32
61
|
const primarySkinColor = (0, _get2.default)('common.primary', skin);
|
|
33
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
37
|
-
className: _learner.default.backIcon,
|
|
38
|
-
color: "inherit"
|
|
39
|
-
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
62
|
+
return /*#__PURE__*/_react.default.createElement(LearnerHeaderWrapper, {
|
|
63
|
+
mode: mode,
|
|
64
|
+
onClick: onClick
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
40
66
|
className: _learner.default.content
|
|
41
67
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
42
68
|
className: _learner.default.contentDetails,
|
|
@@ -59,7 +85,8 @@ Content.contextTypes = {
|
|
|
59
85
|
Content.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
60
86
|
onClick: _link.default.propTypes.onClick,
|
|
61
87
|
title: _propTypes.default.string.isRequired,
|
|
62
|
-
details: _propTypes.default.string
|
|
88
|
+
details: _propTypes.default.string,
|
|
89
|
+
mode: _propTypes.default.string
|
|
63
90
|
} : {};
|
|
64
91
|
|
|
65
92
|
const Subcontent = ({
|
|
@@ -85,16 +112,20 @@ Subcontent.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
85
112
|
const LearnerHeader = (props, context) => {
|
|
86
113
|
const {
|
|
87
114
|
content,
|
|
88
|
-
subcontent
|
|
115
|
+
subcontent,
|
|
116
|
+
mode
|
|
89
117
|
} = props;
|
|
90
118
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
91
119
|
className: _learner.default.wrapper
|
|
92
|
-
}, /*#__PURE__*/_react.default.createElement(Content,
|
|
120
|
+
}, /*#__PURE__*/_react.default.createElement(Content, _extends({}, content, {
|
|
121
|
+
mode: mode
|
|
122
|
+
})), /*#__PURE__*/_react.default.createElement(Subcontent, subcontent));
|
|
93
123
|
};
|
|
94
124
|
|
|
95
125
|
LearnerHeader.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
96
126
|
content: _propTypes.default.shape(Content.propTypes).isRequired,
|
|
97
|
-
subcontent: _propTypes.default.shape(Subcontent.propTypes).isRequired
|
|
127
|
+
subcontent: _propTypes.default.shape(Subcontent.propTypes).isRequired,
|
|
128
|
+
mode: _propTypes.default.string
|
|
98
129
|
} : {};
|
|
99
130
|
var _default = LearnerHeader;
|
|
100
131
|
exports.default = _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["LearnerHeaderWrapper","props","children","mode","onClick","style","contentWrapperScorm","backIcon","contentWrapper","propTypes","Link","PropTypes","string","oneOfType","arrayOf","node","isRequired","Content","title","details","context","skin","primarySkinColor","content","contentDetails","color","contentTitle","innerHTML","__html","contextTypes","Provider","childContextTypes","Subcontent","subcontent","subcontentDetails","subcontentTitle","LearnerHeader","wrapper","shape"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport Provider from '../../../../../atom/provider';\nimport style from './learner.css';\n\nconst LearnerHeaderWrapper = props => {\n const {children, mode, onClick} = props;\n if (mode === 'scorm')\n return (\n <div className={style.contentWrapperScorm}>\n <div className={style.backIcon} />\n {children}\n </div>\n );\n return (\n <Link onClick={onClick} className={style.contentWrapper}>\n <BackIcon className={style.backIcon} color=\"inherit\" />\n {children}\n </Link>\n );\n};\n\nLearnerHeaderWrapper.propTypes = {\n onClick: Link.propTypes.onClick,\n mode: PropTypes.string,\n children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired\n};\n\nconst Content = ({onClick, title, details, mode}, context) => {\n const {skin} = context;\n const primarySkinColor = get('common.primary', skin);\n\n return (\n <LearnerHeaderWrapper mode={mode} onClick={onClick}>\n <div className={style.content}>\n <div\n className={style.contentDetails}\n style={{\n color: primarySkinColor\n }}\n >\n {details}\n </div>\n\n <span\n data-name=\"contentTitle\"\n className={classnames(style.contentTitle, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n </LearnerHeaderWrapper>\n );\n};\n\nContent.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nContent.propTypes = {\n onClick: Link.propTypes.onClick,\n title: PropTypes.string.isRequired,\n details: PropTypes.string,\n mode: PropTypes.string\n};\n\nconst Subcontent = ({title, details}, context) => (\n <div className={style.subcontent}>\n <div className={style.subcontentDetails}>{details}</div>\n <div\n className={classnames(style.subcontentTitle, style.innerHTML)}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n);\n\nSubcontent.propTypes = {\n title: PropTypes.string.isRequired,\n details: PropTypes.string\n};\n\nconst LearnerHeader = (props, context) => {\n const {content, subcontent, mode} = props;\n\n return (\n <div className={style.wrapper}>\n <Content {...content} mode={mode} />\n <Subcontent {...subcontent} />\n </div>\n );\n};\n\nLearnerHeader.propTypes = {\n content: PropTypes.shape(Content.propTypes).isRequired,\n subcontent: PropTypes.shape(Subcontent.propTypes).isRequired,\n mode: PropTypes.string\n};\n\nexport default LearnerHeader;\n"],"file":"learner.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"brand.native.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "10.23.
|
|
3
|
+
"version": "10.23.4",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -140,5 +140,5 @@
|
|
|
140
140
|
"webpack": "^4.43.0"
|
|
141
141
|
},
|
|
142
142
|
"author": "CoorpAcademy",
|
|
143
|
-
"gitHead": "
|
|
143
|
+
"gitHead": "700c771b8e6b4fe3016654d938e0e28527fabc9e"
|
|
144
144
|
}
|