@coorpacademy/components 10.22.10 → 10.22.13
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/README.md +1 -0
- package/es/molecule/discipline-partners/index.js +1 -1
- package/es/molecule/discipline-partners/index.js.map +1 -1
- package/es/molecule/questions/mobile/draggable/index.native.js +144 -0
- package/es/molecule/questions/mobile/draggable/index.native.js.map +1 -0
- package/es/molecule/questions/mobile/slide/index.native.js +119 -0
- package/es/molecule/questions/mobile/slide/index.native.js.map +1 -0
- package/es/organism/review-slide/style.css +1 -1
- package/es/types/styles.d.js +2 -0
- package/es/types/styles.d.js.map +1 -0
- package/es/variables/shadow.js +13 -0
- package/es/variables/shadow.js.map +1 -0
- package/lib/molecule/discipline-partners/index.js +1 -1
- package/lib/molecule/discipline-partners/index.js.map +1 -1
- package/lib/molecule/questions/mobile/draggable/index.native.js +161 -0
- package/lib/molecule/questions/mobile/draggable/index.native.js.map +1 -0
- package/lib/molecule/questions/mobile/slide/index.native.js +136 -0
- package/lib/molecule/questions/mobile/slide/index.native.js.map +1 -0
- package/lib/organism/review-slide/style.css +1 -1
- package/lib/types/styles.d.js +2 -0
- package/lib/types/styles.d.js.map +1 -0
- package/lib/variables/shadow.js +18 -0
- package/lib/variables/shadow.js.map +1 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -93,7 +93,7 @@ const DisciplinePartners = (props, context) => {
|
|
|
93
93
|
type: "checkbox",
|
|
94
94
|
id: authorToggleId,
|
|
95
95
|
className: style.toggle,
|
|
96
|
-
defaultChecked:
|
|
96
|
+
defaultChecked: true
|
|
97
97
|
}), /*#__PURE__*/React.createElement("label", {
|
|
98
98
|
htmlFor: authorToggleId
|
|
99
99
|
}, logoView), authorContent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/discipline-partners/index.js"],"names":["React","PropTypes","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionNavigationArrowDown","ArrowDown","SocialLink","Provider","CatalogSection","Picture","style","DisciplinePartners","props","context","translate","skin","authorTitle","authors","authorLabel","defaultColor","authorsView","convert","cap","author","index","socialLinks","authorLogo","authorHref","moreDetails","autName","authorToggleId","linkView","authorLink","color","moreInfoView","linkicon","socialView","map","social","i","link","aNameView","authorName","logoView","logoContainer","logo","src","arrowWrapper","arrow","authorContent","links","authorWrapper","toggle","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/discipline-partners/index.js"],"names":["React","PropTypes","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionNavigationArrowDown","ArrowDown","SocialLink","Provider","CatalogSection","Picture","style","DisciplinePartners","props","context","translate","skin","authorTitle","authors","authorLabel","defaultColor","authorsView","convert","cap","author","index","socialLinks","authorLogo","authorHref","moreDetails","autName","authorToggleId","linkView","authorLink","color","moreInfoView","linkicon","socialView","map","social","i","link","aNameView","authorName","logoView","logoContainer","logo","src","arrowWrapper","arrow","authorContent","links","authorWrapper","toggle","colDetails","contextTypes","childContextTypes","propTypes","arrayOf","shape","name","string","href","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map, uniqueId} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionNavigationArrowDown as ArrowDown\n} from '@coorpacademy/nova-icons';\nimport SocialLink from '../../atom/social-link';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst DisciplinePartners = (props, context) => {\n const {translate, skin} = context;\n\n const {authorTitle, authors = []} = props;\n\n const authorLabel = authorTitle || translate('author');\n const defaultColor = get('common.primary', skin);\n const authorsView = map.convert({cap: false})((author, index) => {\n const socialLinks = getOr([], 'socialLinks', author);\n const authorLogo = get('logo', author);\n const authorHref = get('href', author);\n const moreDetails = get('more', author);\n const autName = get('name', author);\n const authorToggleId = uniqueId('author-toggle-');\n const linkView = (\n <div className={style.authorLink}>\n <a\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{\n color: defaultColor\n }}\n href={authorHref}\n >\n {authorHref}\n </a>\n </div>\n );\n const moreInfoView = (\n <div className={style.authorLink}>\n <a\n href={authorHref}\n style={{\n color: defaultColor\n }}\n >\n {moreDetails}\n <ArrowRight color={defaultColor} className={style.linkicon} />\n </a>\n </div>\n );\n\n const socialView = socialLinks.map((social, i) => (\n <div key={i} className={style.link}>\n <SocialLink {...social} />\n </div>\n ));\n\n const aNameView = autName ? (\n <div data-name=\"authorName\" className={style.authorName}>\n {autName}\n </div>\n ) : null;\n\n const logoView = authorLogo ? (\n <div className={style.logoContainer}>\n <Picture className={style.logo} src={authorLogo.src} />\n <div className={style.arrowWrapper}>\n <ArrowDown className={style.arrow} height={14} whidth={14} />\n </div>\n </div>\n ) : null;\n\n const authorContent =\n authorHref || aNameView || socialView ? (\n <div className={style.authorContent}>\n {autName ? aNameView : null}\n {moreDetails ? moreInfoView : null}\n {!moreDetails && authorHref ? linkView : null}\n <div className={style.links}>{socialView}</div>\n </div>\n ) : null;\n\n return (\n <div key={index} className={style.authorWrapper}>\n <input type=\"checkbox\" id={authorToggleId} className={style.toggle} defaultChecked />\n <label htmlFor={authorToggleId}>{logoView}</label>\n {authorContent}\n </div>\n );\n }, authors);\n\n return !isEmpty(authors) ? (\n <div data-name=\"disciplinePartner\" className={style.colDetails}>\n <CatalogSection title={authorLabel}>{authorsView}</CatalogSection>\n </div>\n ) : null;\n};\n\nDisciplinePartners.contextTypes = {\n translate: Provider.childContextTypes.translate,\n skin: Provider.childContextTypes.skin\n};\n\nDisciplinePartners.propTypes = {\n authors: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n href: PropTypes.string,\n logo: PropTypes.shape({\n src: PropTypes.string,\n href: PropTypes.string\n }),\n socialLinks: PropTypes.array\n })\n ),\n authorTitle: PropTypes.string\n};\n\nexport default DisciplinePartners;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useState } from 'react';
|
|
2
|
+
import { View, StyleSheet, Text } from 'react-native';
|
|
3
|
+
import QuestionChoice from '../../../../atom/choice/index.native';
|
|
4
|
+
import { useTemplateContext } from '../../../../template/app-review/template-context';
|
|
5
|
+
|
|
6
|
+
const createDropZoneStyle = theme => StyleSheet.create({
|
|
7
|
+
choice: {
|
|
8
|
+
margin: theme.spacing.micro
|
|
9
|
+
},
|
|
10
|
+
dropZone: {
|
|
11
|
+
flexWrap: 'wrap',
|
|
12
|
+
flexDirection: 'row',
|
|
13
|
+
borderStyle: 'dashed',
|
|
14
|
+
borderWidth: 2,
|
|
15
|
+
padding: theme.spacing.micro,
|
|
16
|
+
borderColor: theme.colors.gray.light,
|
|
17
|
+
backgroundColor: theme.colors.gray.extra,
|
|
18
|
+
borderRadius: theme.radius.common,
|
|
19
|
+
marginBottom: theme.spacing.tiny
|
|
20
|
+
},
|
|
21
|
+
emptyContent: {
|
|
22
|
+
justifyContent: 'center',
|
|
23
|
+
alignContent: 'center',
|
|
24
|
+
alignItems: 'center',
|
|
25
|
+
height: 60
|
|
26
|
+
},
|
|
27
|
+
text: {
|
|
28
|
+
color: theme.colors.gray.medium
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
const DropZone = props => {
|
|
33
|
+
const templateContext = useTemplateContext();
|
|
34
|
+
const {
|
|
35
|
+
theme,
|
|
36
|
+
translations
|
|
37
|
+
} = templateContext;
|
|
38
|
+
const {
|
|
39
|
+
onPress
|
|
40
|
+
} = props;
|
|
41
|
+
const handlePress = useCallback(item => () => onPress(item), [onPress]);
|
|
42
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
const _stylesheet = createDropZoneStyle(theme);
|
|
45
|
+
|
|
46
|
+
setStylesheet(_stylesheet);
|
|
47
|
+
}, [theme]);
|
|
48
|
+
|
|
49
|
+
if (!styleSheet) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
const {
|
|
54
|
+
choices
|
|
55
|
+
} = props;
|
|
56
|
+
const mappedSortedChoices = choices.map(item => /*#__PURE__*/React.createElement(QuestionChoice, {
|
|
57
|
+
style: styleSheet.choice,
|
|
58
|
+
key: item._id,
|
|
59
|
+
squeezed: true,
|
|
60
|
+
isSelected: true,
|
|
61
|
+
testID: `choice-${item._id}`,
|
|
62
|
+
onPress: handlePress(item),
|
|
63
|
+
questionType: "qcmDrag"
|
|
64
|
+
}, item.label));
|
|
65
|
+
const hasNoSelectedChoices = mappedSortedChoices.length === 0;
|
|
66
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
67
|
+
style: [styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]
|
|
68
|
+
}, hasNoSelectedChoices ? /*#__PURE__*/React.createElement(Text, {
|
|
69
|
+
style: styleSheet.text
|
|
70
|
+
}, translations.selectSomethingBelow) : null, !hasNoSelectedChoices && mappedSortedChoices);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
const createStyleSheet = theme => StyleSheet.create({
|
|
74
|
+
container: {},
|
|
75
|
+
pickableChoices: {
|
|
76
|
+
flexDirection: 'row',
|
|
77
|
+
flexWrap: 'wrap'
|
|
78
|
+
},
|
|
79
|
+
choice: {
|
|
80
|
+
margin: theme.spacing.micro
|
|
81
|
+
}
|
|
82
|
+
}); // this algo could be improve using a single reduce fuction
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
export const extractSelectedChoices = (availableChoices, userChoices) => {
|
|
86
|
+
const selectedChoices = userChoices.reduce((accumulator, currentValue) => {
|
|
87
|
+
const foundItem = availableChoices.find(availableChoice => availableChoice.label === currentValue);
|
|
88
|
+
|
|
89
|
+
if (foundItem) {
|
|
90
|
+
return [...accumulator, foundItem];
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
return accumulator;
|
|
94
|
+
}, []);
|
|
95
|
+
const notSelectedChoices = availableChoices.filter(availableChoice => !userChoices.includes(availableChoice.label));
|
|
96
|
+
return [selectedChoices, notSelectedChoices];
|
|
97
|
+
};
|
|
98
|
+
|
|
99
|
+
const QuestionDraggable = props => {
|
|
100
|
+
const templateContext = useTemplateContext();
|
|
101
|
+
const {
|
|
102
|
+
theme
|
|
103
|
+
} = templateContext;
|
|
104
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
105
|
+
useEffect(() => {
|
|
106
|
+
const _stylesheet = createStyleSheet(theme);
|
|
107
|
+
|
|
108
|
+
setStylesheet(_stylesheet);
|
|
109
|
+
}, [theme]);
|
|
110
|
+
|
|
111
|
+
if (!styleSheet) {
|
|
112
|
+
return null;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
const handlePress = item => () => props.onPress(item);
|
|
116
|
+
|
|
117
|
+
const {
|
|
118
|
+
choices,
|
|
119
|
+
onPress,
|
|
120
|
+
testID,
|
|
121
|
+
userChoices
|
|
122
|
+
} = props;
|
|
123
|
+
const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);
|
|
124
|
+
const mappedunselectedChoices = notSelectedChoices.map((item, index) => /*#__PURE__*/React.createElement(QuestionChoice, {
|
|
125
|
+
style: styleSheet.choice,
|
|
126
|
+
key: item._id,
|
|
127
|
+
squeezed: true,
|
|
128
|
+
testID: `choice-${item._id}-unselected`,
|
|
129
|
+
onPress: handlePress(item),
|
|
130
|
+
questionType: "qcmDrag"
|
|
131
|
+
}, item.label));
|
|
132
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
133
|
+
style: styleSheet.container,
|
|
134
|
+
testID: testID
|
|
135
|
+
}, /*#__PURE__*/React.createElement(DropZone, {
|
|
136
|
+
choices: selectedChoices,
|
|
137
|
+
onPress: onPress
|
|
138
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
139
|
+
style: styleSheet.pickableChoices
|
|
140
|
+
}, mappedunselectedChoices));
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
export default QuestionDraggable;
|
|
144
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":["React","useCallback","useEffect","useState","View","StyleSheet","Text","QuestionChoice","useTemplateContext","createDropZoneStyle","theme","create","choice","margin","spacing","micro","dropZone","flexWrap","flexDirection","borderStyle","borderWidth","padding","borderColor","colors","gray","light","backgroundColor","extra","borderRadius","radius","common","marginBottom","tiny","emptyContent","justifyContent","alignContent","alignItems","height","text","color","medium","DropZone","props","templateContext","translations","onPress","handlePress","item","styleSheet","setStylesheet","_stylesheet","choices","mappedSortedChoices","map","_id","label","hasNoSelectedChoices","length","selectSomethingBelow","createStyleSheet","container","pickableChoices","extractSelectedChoices","availableChoices","userChoices","selectedChoices","reduce","accumulator","currentValue","foundItem","find","availableChoice","notSelectedChoices","filter","includes","QuestionDraggable","testID","mappedunselectedChoices","index"],"mappings":"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","sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\n\nimport type {Choice} from '../../../../types/progression-engine';\n\nexport interface DropZoneProps {\n choices: Array<Choice>;\n onPress: (item: Choice) => void;\n}\n\nconst createDropZoneStyle = (theme: Theme) =>\n StyleSheet.create({\n choice: {\n margin: theme.spacing.micro\n },\n dropZone: {\n flexWrap: 'wrap',\n flexDirection: 'row',\n borderStyle: 'dashed',\n borderWidth: 2,\n padding: theme.spacing.micro,\n borderColor: theme.colors.gray.light,\n backgroundColor: theme.colors.gray.extra,\n borderRadius: theme.radius.common,\n marginBottom: theme.spacing.tiny\n },\n emptyContent: {\n justifyContent: 'center',\n alignContent: 'center',\n alignItems: 'center',\n height: 60\n },\n text: {\n color: theme.colors.gray.medium\n }\n });\n\nconst DropZone = (props: DropZoneProps) => {\n const templateContext = useTemplateContext();\n const {theme, translations} = templateContext;\n const {onPress} = props;\n\n const handlePress = useCallback((item: Choice) => () => onPress(item), [onPress]);\n const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n useEffect(() => {\n const _stylesheet = createDropZoneStyle(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n const {choices} = props;\n const mappedSortedChoices = choices.map(item => (\n <QuestionChoice\n style={styleSheet.choice}\n key={item._id}\n squeezed\n isSelected\n testID={`choice-${item._id}`}\n onPress={handlePress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n const hasNoSelectedChoices = mappedSortedChoices.length === 0;\n\n return (\n <View style={[styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]}>\n {hasNoSelectedChoices ? (\n <Text style={styleSheet.text}>{translations.selectSomethingBelow}</Text>\n ) : null}\n\n {!hasNoSelectedChoices && mappedSortedChoices}\n </View>\n );\n};\n\nexport interface Props {\n choices: Array<Choice>;\n userChoices: Array<string>;\n testID?: string;\n onPress: (item: Choice) => void;\n}\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {},\n pickableChoices: {\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n choice: {\n margin: theme.spacing.micro\n }\n });\n\n// this algo could be improve using a single reduce fuction\nexport const extractSelectedChoices = (\n availableChoices: Array<Choice>,\n userChoices: Array<string>\n): Array<Array<Choice>> => {\n const selectedChoices: Array<Choice> = userChoices.reduce(\n (accumulator: Array<Choice>, currentValue) => {\n const foundItem = availableChoices.find(\n availableChoice => availableChoice.label === currentValue\n );\n if (foundItem) {\n return [...accumulator, foundItem];\n }\n return accumulator;\n },\n []\n );\n\n const notSelectedChoices = availableChoices.filter(\n availableChoice => !userChoices.includes(availableChoice.label)\n );\n\n return [selectedChoices, notSelectedChoices];\n};\n\nconst QuestionDraggable = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n\n const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n const handlePress = (item: Choice) => () => props.onPress(item);\n\n const {choices, onPress, testID, userChoices} = props;\n const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);\n\n const mappedunselectedChoices = notSelectedChoices.map((item, index) => (\n <QuestionChoice\n style={styleSheet.choice}\n key={item._id}\n squeezed\n testID={`choice-${item._id}-unselected`}\n onPress={handlePress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n return (\n <View style={styleSheet.container} testID={testID}>\n <DropZone choices={selectedChoices} onPress={onPress} />\n <View style={styleSheet.pickableChoices}>{mappedunselectedChoices}</View>\n </View>\n );\n};\n\nexport default QuestionDraggable;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
import React, { useState, useEffect } from 'react';
|
|
4
|
+
import { View, StyleSheet } from 'react-native';
|
|
5
|
+
import Slider from '@coorpacademy/react-native-slider';
|
|
6
|
+
import Text from '../../../../atom/text/index.native';
|
|
7
|
+
import { useTemplateContext } from '../../../../template/app-review/template-context';
|
|
8
|
+
import { BOX_STYLE } from '../../../../variables/shadow';
|
|
9
|
+
|
|
10
|
+
const createStyleSheet = theme => StyleSheet.create({
|
|
11
|
+
container: {
|
|
12
|
+
flex: 1,
|
|
13
|
+
paddingHorizontal: 20,
|
|
14
|
+
flexDirection: 'column',
|
|
15
|
+
justifyContent: 'center'
|
|
16
|
+
},
|
|
17
|
+
header: {
|
|
18
|
+
fontSize: 25,
|
|
19
|
+
fontWeight: theme.fontWeight.bold,
|
|
20
|
+
textAlign: 'center'
|
|
21
|
+
},
|
|
22
|
+
textValue: {
|
|
23
|
+
fontSize: 15,
|
|
24
|
+
color: theme.colors.black,
|
|
25
|
+
fontWeight: theme.fontWeight.bold,
|
|
26
|
+
textAlign: 'center'
|
|
27
|
+
},
|
|
28
|
+
valuesContainer: {
|
|
29
|
+
flexDirection: 'row',
|
|
30
|
+
justifyContent: 'space-around'
|
|
31
|
+
},
|
|
32
|
+
leftValue: {
|
|
33
|
+
flex: 1,
|
|
34
|
+
alignItems: 'flex-start'
|
|
35
|
+
},
|
|
36
|
+
rightValue: {
|
|
37
|
+
flex: 1,
|
|
38
|
+
alignItems: 'flex-end'
|
|
39
|
+
},
|
|
40
|
+
track: {
|
|
41
|
+
height: 10,
|
|
42
|
+
borderRadius: theme.radius.button
|
|
43
|
+
},
|
|
44
|
+
thumb: _extends(_extends({}, BOX_STYLE), {}, {
|
|
45
|
+
width: 30,
|
|
46
|
+
height: 30,
|
|
47
|
+
borderRadius: 30 / 2,
|
|
48
|
+
backgroundColor: 'white',
|
|
49
|
+
borderWidth: 1
|
|
50
|
+
})
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
const QuestionSlider = props => {
|
|
54
|
+
const templateContext = useTemplateContext();
|
|
55
|
+
const {
|
|
56
|
+
brandTheme,
|
|
57
|
+
theme
|
|
58
|
+
} = templateContext;
|
|
59
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
const _stylesheet = createStyleSheet(theme);
|
|
62
|
+
|
|
63
|
+
setStylesheet(_stylesheet);
|
|
64
|
+
}, [theme]);
|
|
65
|
+
|
|
66
|
+
if (!styleSheet) {
|
|
67
|
+
return null;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
const {
|
|
71
|
+
step,
|
|
72
|
+
style,
|
|
73
|
+
min,
|
|
74
|
+
max,
|
|
75
|
+
unit = '',
|
|
76
|
+
value,
|
|
77
|
+
onSlidingComplete,
|
|
78
|
+
testID,
|
|
79
|
+
onChange
|
|
80
|
+
} = props;
|
|
81
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
82
|
+
style: [styleSheet.container, style],
|
|
83
|
+
testID: testID
|
|
84
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
85
|
+
style: [styleSheet.header, {
|
|
86
|
+
color: brandTheme?.colors.primary
|
|
87
|
+
}],
|
|
88
|
+
testID: "slider-value"
|
|
89
|
+
}, value), /*#__PURE__*/React.createElement(Slider, {
|
|
90
|
+
step: step || 1,
|
|
91
|
+
value: value,
|
|
92
|
+
onValueChange: onChange,
|
|
93
|
+
maximumValue: max,
|
|
94
|
+
minimumValue: min,
|
|
95
|
+
onSlidingComplete: onSlidingComplete,
|
|
96
|
+
minimumTrackTintColor: brandTheme?.colors.primary,
|
|
97
|
+
trackStyle: styleSheet.track,
|
|
98
|
+
thumbStyle: [styleSheet.thumb, {
|
|
99
|
+
borderColor: brandTheme?.colors.primary
|
|
100
|
+
}],
|
|
101
|
+
testID: "slider"
|
|
102
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
103
|
+
style: styleSheet.valuesContainer,
|
|
104
|
+
testID: "slider-values-container"
|
|
105
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
106
|
+
style: styleSheet.leftValue
|
|
107
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
108
|
+
style: styleSheet.textValue,
|
|
109
|
+
testID: "slider-min-value"
|
|
110
|
+
}, `${min} ${unit}`)), /*#__PURE__*/React.createElement(View, {
|
|
111
|
+
style: styleSheet.rightValue
|
|
112
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
113
|
+
style: styleSheet.textValue,
|
|
114
|
+
testID: "slider-max-value"
|
|
115
|
+
}, `${max} ${unit}`))));
|
|
116
|
+
};
|
|
117
|
+
|
|
118
|
+
export default QuestionSlider;
|
|
119
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/questions/mobile/slide/index.native.tsx"],"names":["React","useState","useEffect","View","StyleSheet","Slider","Text","useTemplateContext","BOX_STYLE","createStyleSheet","theme","create","container","flex","paddingHorizontal","flexDirection","justifyContent","header","fontSize","fontWeight","bold","textAlign","textValue","color","colors","black","valuesContainer","leftValue","alignItems","rightValue","track","height","borderRadius","radius","button","thumb","width","backgroundColor","borderWidth","QuestionSlider","props","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","step","style","min","max","unit","value","onSlidingComplete","testID","onChange","primary","borderColor"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, ViewStyle, FlexAlignType} from 'react-native';\nimport Slider from '@coorpacademy/react-native-slider';\n\nimport {Theme} from '../../../../variables/theme.native';\nimport Text from '../../../../atom/text/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {BOX_STYLE} from '../../../../variables/shadow';\nimport {FlexDirection, JustifyContent, TextAlign, FontWeight} from '../../../../types/styles';\n\nexport type OnChangeFunction = (value: number) => void;\n\nexport type Props = {\n min: number;\n max: number;\n unit?: string;\n value: number;\n onChange: OnChangeFunction;\n onSlidingComplete: () => void;\n style?: ViewStyle;\n step?: number;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: {\n flex: number;\n paddingHorizontal: number;\n flexDirection: FlexDirection;\n justifyContent: JustifyContent;\n };\n header: {\n fontSize: number;\n fontWeight: FontWeight;\n textAlign: TextAlign;\n };\n textValue: {\n fontSize: number;\n color: string;\n fontWeight: FontWeight;\n textAlign: string;\n };\n valuesContainer: {\n flexDirection: FlexDirection;\n justifyContent: JustifyContent;\n };\n leftValue: {\n flex: number;\n alignItems: FlexAlignType | undefined;\n };\n rightValue: {\n flex: number;\n alignItems: FlexAlignType | undefined;\n };\n track: {\n height: number;\n borderRadius: number;\n };\n thumb: {\n width: number;\n height: number;\n borderRadius: number;\n backgroundColor: string;\n borderWidth: number;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n flex: 1,\n paddingHorizontal: 20,\n flexDirection: 'column',\n justifyContent: 'center'\n },\n header: {\n fontSize: 25,\n fontWeight: theme.fontWeight.bold,\n textAlign: 'center'\n },\n textValue: {\n fontSize: 15,\n color: theme.colors.black,\n fontWeight: theme.fontWeight.bold,\n textAlign: 'center'\n },\n valuesContainer: {\n flexDirection: 'row',\n justifyContent: 'space-around'\n },\n leftValue: {\n flex: 1,\n alignItems: 'flex-start'\n },\n rightValue: {\n flex: 1,\n alignItems: 'flex-end'\n },\n track: {\n height: 10,\n borderRadius: theme.radius.button\n },\n thumb: {\n ...BOX_STYLE,\n width: 30,\n height: 30,\n borderRadius: 30 / 2,\n backgroundColor: 'white',\n borderWidth: 1\n }\n });\n\nconst QuestionSlider = (props: Props) => {\n const templateContext = useTemplateContext();\n const {brandTheme, theme} = templateContext;\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n const {step, style, min, max, unit = '', value, onSlidingComplete, testID, onChange} = props;\n\n return (\n <View style={[styleSheet.container, style]} testID={testID}>\n <Text style={[styleSheet.header, {color: brandTheme?.colors.primary}]} testID=\"slider-value\">\n {value}\n </Text>\n <Slider\n step={step || 1}\n value={value}\n onValueChange={onChange}\n maximumValue={max}\n minimumValue={min}\n onSlidingComplete={onSlidingComplete}\n minimumTrackTintColor={brandTheme?.colors.primary}\n trackStyle={styleSheet.track}\n thumbStyle={[styleSheet.thumb, {borderColor: brandTheme?.colors.primary}]}\n testID=\"slider\"\n />\n <View style={styleSheet.valuesContainer} testID=\"slider-values-container\">\n <View style={styleSheet.leftValue}>\n <Text style={styleSheet.textValue} testID=\"slider-min-value\">\n {`${min} ${unit}`}\n </Text>\n </View>\n <View style={styleSheet.rightValue}>\n <Text style={styleSheet.textValue} testID=\"slider-max-value\">\n {`${max} ${unit}`}\n </Text>\n </View>\n </View>\n </View>\n );\n};\n\nexport default QuestionSlider;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"styles.d.js"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export const BOX_STYLE = {
|
|
2
|
+
shadowColor: '#14171A',
|
|
3
|
+
shadowOpacity: 0.15,
|
|
4
|
+
shadowOffset: {
|
|
5
|
+
width: 0,
|
|
6
|
+
height: 0
|
|
7
|
+
},
|
|
8
|
+
shadowRadius: 8,
|
|
9
|
+
elevation: 4,
|
|
10
|
+
backgroundColor: 'rgba(0,0,0,0.015)' // fix shadow not visible bug on android
|
|
11
|
+
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=shadow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/variables/shadow.ts"],"names":["BOX_STYLE","shadowColor","shadowOpacity","shadowOffset","width","height","shadowRadius","elevation","backgroundColor"],"mappings":"AASA,OAAO,MAAMA,SAAmB,GAAG;AACjCC,EAAAA,WAAW,EAAE,SADoB;AAEjCC,EAAAA,aAAa,EAAE,IAFkB;AAGjCC,EAAAA,YAAY,EAAE;AAACC,IAAAA,KAAK,EAAE,CAAR;AAAWC,IAAAA,MAAM,EAAE;AAAnB,GAHmB;AAIjCC,EAAAA,YAAY,EAAE,CAJmB;AAKjCC,EAAAA,SAAS,EAAE,CALsB;AAMjCC,EAAAA,eAAe,EAAE,mBANgB,CAMI;;AANJ,CAA5B","sourcesContent":["export type BoxStyle = {\n shadowColor: string;\n shadowOpacity: number;\n shadowOffset: {width: number; height: number};\n shadowRadius: number;\n elevation: number;\n backgroundColor: string;\n};\n\nexport const BOX_STYLE: BoxStyle = {\n shadowColor: '#14171A',\n shadowOpacity: 0.15,\n shadowOffset: {width: 0, height: 0},\n shadowRadius: 8,\n elevation: 4,\n backgroundColor: 'rgba(0,0,0,0.015)' // fix shadow not visible bug on android\n};\n"],"file":"shadow.js"}
|
|
@@ -108,7 +108,7 @@ const DisciplinePartners = (props, context) => {
|
|
|
108
108
|
type: "checkbox",
|
|
109
109
|
id: authorToggleId,
|
|
110
110
|
className: _style.default.toggle,
|
|
111
|
-
defaultChecked:
|
|
111
|
+
defaultChecked: true
|
|
112
112
|
}), /*#__PURE__*/_react.default.createElement("label", {
|
|
113
113
|
htmlFor: authorToggleId
|
|
114
114
|
}, logoView), authorContent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/discipline-partners/index.js"],"names":["DisciplinePartners","props","context","translate","skin","authorTitle","authors","authorLabel","defaultColor","authorsView","convert","cap","author","index","socialLinks","authorLogo","authorHref","moreDetails","autName","authorToggleId","linkView","style","authorLink","color","moreInfoView","linkicon","socialView","map","social","i","link","aNameView","authorName","logoView","logoContainer","logo","src","arrowWrapper","arrow","authorContent","links","authorWrapper","toggle","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/discipline-partners/index.js"],"names":["DisciplinePartners","props","context","translate","skin","authorTitle","authors","authorLabel","defaultColor","authorsView","convert","cap","author","index","socialLinks","authorLogo","authorHref","moreDetails","autName","authorToggleId","linkView","style","authorLink","color","moreInfoView","linkicon","socialView","map","social","i","link","aNameView","authorName","logoView","logoContainer","logo","src","arrowWrapper","arrow","authorContent","links","authorWrapper","toggle","colDetails","contextTypes","Provider","childContextTypes","propTypes","PropTypes","arrayOf","shape","name","string","href","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map, uniqueId} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionNavigationArrowDown as ArrowDown\n} from '@coorpacademy/nova-icons';\nimport SocialLink from '../../atom/social-link';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst DisciplinePartners = (props, context) => {\n const {translate, skin} = context;\n\n const {authorTitle, authors = []} = props;\n\n const authorLabel = authorTitle || translate('author');\n const defaultColor = get('common.primary', skin);\n const authorsView = map.convert({cap: false})((author, index) => {\n const socialLinks = getOr([], 'socialLinks', author);\n const authorLogo = get('logo', author);\n const authorHref = get('href', author);\n const moreDetails = get('more', author);\n const autName = get('name', author);\n const authorToggleId = uniqueId('author-toggle-');\n const linkView = (\n <div className={style.authorLink}>\n <a\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{\n color: defaultColor\n }}\n href={authorHref}\n >\n {authorHref}\n </a>\n </div>\n );\n const moreInfoView = (\n <div className={style.authorLink}>\n <a\n href={authorHref}\n style={{\n color: defaultColor\n }}\n >\n {moreDetails}\n <ArrowRight color={defaultColor} className={style.linkicon} />\n </a>\n </div>\n );\n\n const socialView = socialLinks.map((social, i) => (\n <div key={i} className={style.link}>\n <SocialLink {...social} />\n </div>\n ));\n\n const aNameView = autName ? (\n <div data-name=\"authorName\" className={style.authorName}>\n {autName}\n </div>\n ) : null;\n\n const logoView = authorLogo ? (\n <div className={style.logoContainer}>\n <Picture className={style.logo} src={authorLogo.src} />\n <div className={style.arrowWrapper}>\n <ArrowDown className={style.arrow} height={14} whidth={14} />\n </div>\n </div>\n ) : null;\n\n const authorContent =\n authorHref || aNameView || socialView ? (\n <div className={style.authorContent}>\n {autName ? aNameView : null}\n {moreDetails ? moreInfoView : null}\n {!moreDetails && authorHref ? linkView : null}\n <div className={style.links}>{socialView}</div>\n </div>\n ) : null;\n\n return (\n <div key={index} className={style.authorWrapper}>\n <input type=\"checkbox\" id={authorToggleId} className={style.toggle} defaultChecked />\n <label htmlFor={authorToggleId}>{logoView}</label>\n {authorContent}\n </div>\n );\n }, authors);\n\n return !isEmpty(authors) ? (\n <div data-name=\"disciplinePartner\" className={style.colDetails}>\n <CatalogSection title={authorLabel}>{authorsView}</CatalogSection>\n </div>\n ) : null;\n};\n\nDisciplinePartners.contextTypes = {\n translate: Provider.childContextTypes.translate,\n skin: Provider.childContextTypes.skin\n};\n\nDisciplinePartners.propTypes = {\n authors: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n href: PropTypes.string,\n logo: PropTypes.shape({\n src: PropTypes.string,\n href: PropTypes.string\n }),\n socialLinks: PropTypes.array\n })\n ),\n authorTitle: PropTypes.string\n};\n\nexport default DisciplinePartners;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = exports.extractSelectedChoices = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
|
|
10
|
+
var _index = _interopRequireDefault(require("../../../../atom/choice/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
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
const createDropZoneStyle = theme => _reactNative.StyleSheet.create({
|
|
21
|
+
choice: {
|
|
22
|
+
margin: theme.spacing.micro
|
|
23
|
+
},
|
|
24
|
+
dropZone: {
|
|
25
|
+
flexWrap: 'wrap',
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
borderStyle: 'dashed',
|
|
28
|
+
borderWidth: 2,
|
|
29
|
+
padding: theme.spacing.micro,
|
|
30
|
+
borderColor: theme.colors.gray.light,
|
|
31
|
+
backgroundColor: theme.colors.gray.extra,
|
|
32
|
+
borderRadius: theme.radius.common,
|
|
33
|
+
marginBottom: theme.spacing.tiny
|
|
34
|
+
},
|
|
35
|
+
emptyContent: {
|
|
36
|
+
justifyContent: 'center',
|
|
37
|
+
alignContent: 'center',
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
height: 60
|
|
40
|
+
},
|
|
41
|
+
text: {
|
|
42
|
+
color: theme.colors.gray.medium
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
const DropZone = props => {
|
|
47
|
+
const templateContext = (0, _templateContext.useTemplateContext)();
|
|
48
|
+
const {
|
|
49
|
+
theme,
|
|
50
|
+
translations
|
|
51
|
+
} = templateContext;
|
|
52
|
+
const {
|
|
53
|
+
onPress
|
|
54
|
+
} = props;
|
|
55
|
+
const handlePress = (0, _react.useCallback)(item => () => onPress(item), [onPress]);
|
|
56
|
+
const [styleSheet, setStylesheet] = (0, _react.useState)(null);
|
|
57
|
+
(0, _react.useEffect)(() => {
|
|
58
|
+
const _stylesheet = createDropZoneStyle(theme);
|
|
59
|
+
|
|
60
|
+
setStylesheet(_stylesheet);
|
|
61
|
+
}, [theme]);
|
|
62
|
+
|
|
63
|
+
if (!styleSheet) {
|
|
64
|
+
return null;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const {
|
|
68
|
+
choices
|
|
69
|
+
} = props;
|
|
70
|
+
const mappedSortedChoices = choices.map(item => /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
71
|
+
style: styleSheet.choice,
|
|
72
|
+
key: item._id,
|
|
73
|
+
squeezed: true,
|
|
74
|
+
isSelected: true,
|
|
75
|
+
testID: `choice-${item._id}`,
|
|
76
|
+
onPress: handlePress(item),
|
|
77
|
+
questionType: "qcmDrag"
|
|
78
|
+
}, item.label));
|
|
79
|
+
const hasNoSelectedChoices = mappedSortedChoices.length === 0;
|
|
80
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
81
|
+
style: [styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]
|
|
82
|
+
}, hasNoSelectedChoices ? /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
|
|
83
|
+
style: styleSheet.text
|
|
84
|
+
}, translations.selectSomethingBelow) : null, !hasNoSelectedChoices && mappedSortedChoices);
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
const createStyleSheet = theme => _reactNative.StyleSheet.create({
|
|
88
|
+
container: {},
|
|
89
|
+
pickableChoices: {
|
|
90
|
+
flexDirection: 'row',
|
|
91
|
+
flexWrap: 'wrap'
|
|
92
|
+
},
|
|
93
|
+
choice: {
|
|
94
|
+
margin: theme.spacing.micro
|
|
95
|
+
}
|
|
96
|
+
}); // this algo could be improve using a single reduce fuction
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
const extractSelectedChoices = (availableChoices, userChoices) => {
|
|
100
|
+
const selectedChoices = userChoices.reduce((accumulator, currentValue) => {
|
|
101
|
+
const foundItem = availableChoices.find(availableChoice => availableChoice.label === currentValue);
|
|
102
|
+
|
|
103
|
+
if (foundItem) {
|
|
104
|
+
return [...accumulator, foundItem];
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
return accumulator;
|
|
108
|
+
}, []);
|
|
109
|
+
const notSelectedChoices = availableChoices.filter(availableChoice => !userChoices.includes(availableChoice.label));
|
|
110
|
+
return [selectedChoices, notSelectedChoices];
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
exports.extractSelectedChoices = extractSelectedChoices;
|
|
114
|
+
|
|
115
|
+
const QuestionDraggable = props => {
|
|
116
|
+
const templateContext = (0, _templateContext.useTemplateContext)();
|
|
117
|
+
const {
|
|
118
|
+
theme
|
|
119
|
+
} = templateContext;
|
|
120
|
+
const [styleSheet, setStylesheet] = (0, _react.useState)(null);
|
|
121
|
+
(0, _react.useEffect)(() => {
|
|
122
|
+
const _stylesheet = createStyleSheet(theme);
|
|
123
|
+
|
|
124
|
+
setStylesheet(_stylesheet);
|
|
125
|
+
}, [theme]);
|
|
126
|
+
|
|
127
|
+
if (!styleSheet) {
|
|
128
|
+
return null;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
const handlePress = item => () => props.onPress(item);
|
|
132
|
+
|
|
133
|
+
const {
|
|
134
|
+
choices,
|
|
135
|
+
onPress,
|
|
136
|
+
testID,
|
|
137
|
+
userChoices
|
|
138
|
+
} = props;
|
|
139
|
+
const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);
|
|
140
|
+
const mappedunselectedChoices = notSelectedChoices.map((item, index) => /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
141
|
+
style: styleSheet.choice,
|
|
142
|
+
key: item._id,
|
|
143
|
+
squeezed: true,
|
|
144
|
+
testID: `choice-${item._id}-unselected`,
|
|
145
|
+
onPress: handlePress(item),
|
|
146
|
+
questionType: "qcmDrag"
|
|
147
|
+
}, item.label));
|
|
148
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
149
|
+
style: styleSheet.container,
|
|
150
|
+
testID: testID
|
|
151
|
+
}, /*#__PURE__*/_react.default.createElement(DropZone, {
|
|
152
|
+
choices: selectedChoices,
|
|
153
|
+
onPress: onPress
|
|
154
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
155
|
+
style: styleSheet.pickableChoices
|
|
156
|
+
}, mappedunselectedChoices));
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
var _default = QuestionDraggable;
|
|
160
|
+
exports.default = _default;
|
|
161
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":["createDropZoneStyle","theme","StyleSheet","create","choice","margin","spacing","micro","dropZone","flexWrap","flexDirection","borderStyle","borderWidth","padding","borderColor","colors","gray","light","backgroundColor","extra","borderRadius","radius","common","marginBottom","tiny","emptyContent","justifyContent","alignContent","alignItems","height","text","color","medium","DropZone","props","templateContext","translations","onPress","handlePress","item","styleSheet","setStylesheet","_stylesheet","choices","mappedSortedChoices","map","_id","label","hasNoSelectedChoices","length","selectSomethingBelow","createStyleSheet","container","pickableChoices","extractSelectedChoices","availableChoices","userChoices","selectedChoices","reduce","accumulator","currentValue","foundItem","find","availableChoice","notSelectedChoices","filter","includes","QuestionDraggable","testID","mappedunselectedChoices","index"],"mappings":"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","sourcesContent":["import React, {useCallback, useEffect, useState} from 'react';\nimport {View, StyleSheet, Text} from 'react-native';\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {Theme} from '../../../../variables/theme.native';\n\nimport type {Choice} from '../../../../types/progression-engine';\n\nexport interface DropZoneProps {\n choices: Array<Choice>;\n onPress: (item: Choice) => void;\n}\n\nconst createDropZoneStyle = (theme: Theme) =>\n StyleSheet.create({\n choice: {\n margin: theme.spacing.micro\n },\n dropZone: {\n flexWrap: 'wrap',\n flexDirection: 'row',\n borderStyle: 'dashed',\n borderWidth: 2,\n padding: theme.spacing.micro,\n borderColor: theme.colors.gray.light,\n backgroundColor: theme.colors.gray.extra,\n borderRadius: theme.radius.common,\n marginBottom: theme.spacing.tiny\n },\n emptyContent: {\n justifyContent: 'center',\n alignContent: 'center',\n alignItems: 'center',\n height: 60\n },\n text: {\n color: theme.colors.gray.medium\n }\n });\n\nconst DropZone = (props: DropZoneProps) => {\n const templateContext = useTemplateContext();\n const {theme, translations} = templateContext;\n const {onPress} = props;\n\n const handlePress = useCallback((item: Choice) => () => onPress(item), [onPress]);\n const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n useEffect(() => {\n const _stylesheet = createDropZoneStyle(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n const {choices} = props;\n const mappedSortedChoices = choices.map(item => (\n <QuestionChoice\n style={styleSheet.choice}\n key={item._id}\n squeezed\n isSelected\n testID={`choice-${item._id}`}\n onPress={handlePress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n const hasNoSelectedChoices = mappedSortedChoices.length === 0;\n\n return (\n <View style={[styleSheet.dropZone, hasNoSelectedChoices && styleSheet.emptyContent]}>\n {hasNoSelectedChoices ? (\n <Text style={styleSheet.text}>{translations.selectSomethingBelow}</Text>\n ) : null}\n\n {!hasNoSelectedChoices && mappedSortedChoices}\n </View>\n );\n};\n\nexport interface Props {\n choices: Array<Choice>;\n userChoices: Array<string>;\n testID?: string;\n onPress: (item: Choice) => void;\n}\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {},\n pickableChoices: {\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n choice: {\n margin: theme.spacing.micro\n }\n });\n\n// this algo could be improve using a single reduce fuction\nexport const extractSelectedChoices = (\n availableChoices: Array<Choice>,\n userChoices: Array<string>\n): Array<Array<Choice>> => {\n const selectedChoices: Array<Choice> = userChoices.reduce(\n (accumulator: Array<Choice>, currentValue) => {\n const foundItem = availableChoices.find(\n availableChoice => availableChoice.label === currentValue\n );\n if (foundItem) {\n return [...accumulator, foundItem];\n }\n return accumulator;\n },\n []\n );\n\n const notSelectedChoices = availableChoices.filter(\n availableChoice => !userChoices.includes(availableChoice.label)\n );\n\n return [selectedChoices, notSelectedChoices];\n};\n\nconst QuestionDraggable = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n\n const [styleSheet, setStylesheet] = useState<any | null>(null);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n const handlePress = (item: Choice) => () => props.onPress(item);\n\n const {choices, onPress, testID, userChoices} = props;\n const [selectedChoices, notSelectedChoices] = extractSelectedChoices(choices, userChoices);\n\n const mappedunselectedChoices = notSelectedChoices.map((item, index) => (\n <QuestionChoice\n style={styleSheet.choice}\n key={item._id}\n squeezed\n testID={`choice-${item._id}-unselected`}\n onPress={handlePress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n return (\n <View style={styleSheet.container} testID={testID}>\n <DropZone choices={selectedChoices} onPress={onPress} />\n <View style={styleSheet.pickableChoices}>{mappedunselectedChoices}</View>\n </View>\n );\n};\n\nexport default QuestionDraggable;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.default = void 0;
|
|
5
|
+
|
|
6
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
7
|
+
|
|
8
|
+
var _reactNative = require("react-native");
|
|
9
|
+
|
|
10
|
+
var _reactNativeSlider = _interopRequireDefault(require("@coorpacademy/react-native-slider"));
|
|
11
|
+
|
|
12
|
+
var _index = _interopRequireDefault(require("../../../../atom/text/index.native"));
|
|
13
|
+
|
|
14
|
+
var _templateContext = require("../../../../template/app-review/template-context");
|
|
15
|
+
|
|
16
|
+
var _shadow = require("../../../../variables/shadow");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
|
|
21
|
+
|
|
22
|
+
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; }
|
|
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 createStyleSheet = theme => _reactNative.StyleSheet.create({
|
|
27
|
+
container: {
|
|
28
|
+
flex: 1,
|
|
29
|
+
paddingHorizontal: 20,
|
|
30
|
+
flexDirection: 'column',
|
|
31
|
+
justifyContent: 'center'
|
|
32
|
+
},
|
|
33
|
+
header: {
|
|
34
|
+
fontSize: 25,
|
|
35
|
+
fontWeight: theme.fontWeight.bold,
|
|
36
|
+
textAlign: 'center'
|
|
37
|
+
},
|
|
38
|
+
textValue: {
|
|
39
|
+
fontSize: 15,
|
|
40
|
+
color: theme.colors.black,
|
|
41
|
+
fontWeight: theme.fontWeight.bold,
|
|
42
|
+
textAlign: 'center'
|
|
43
|
+
},
|
|
44
|
+
valuesContainer: {
|
|
45
|
+
flexDirection: 'row',
|
|
46
|
+
justifyContent: 'space-around'
|
|
47
|
+
},
|
|
48
|
+
leftValue: {
|
|
49
|
+
flex: 1,
|
|
50
|
+
alignItems: 'flex-start'
|
|
51
|
+
},
|
|
52
|
+
rightValue: {
|
|
53
|
+
flex: 1,
|
|
54
|
+
alignItems: 'flex-end'
|
|
55
|
+
},
|
|
56
|
+
track: {
|
|
57
|
+
height: 10,
|
|
58
|
+
borderRadius: theme.radius.button
|
|
59
|
+
},
|
|
60
|
+
thumb: _extends(_extends({}, _shadow.BOX_STYLE), {}, {
|
|
61
|
+
width: 30,
|
|
62
|
+
height: 30,
|
|
63
|
+
borderRadius: 30 / 2,
|
|
64
|
+
backgroundColor: 'white',
|
|
65
|
+
borderWidth: 1
|
|
66
|
+
})
|
|
67
|
+
});
|
|
68
|
+
|
|
69
|
+
const QuestionSlider = props => {
|
|
70
|
+
const templateContext = (0, _templateContext.useTemplateContext)();
|
|
71
|
+
const {
|
|
72
|
+
brandTheme,
|
|
73
|
+
theme
|
|
74
|
+
} = templateContext;
|
|
75
|
+
const [styleSheet, setStylesheet] = (0, _react.useState)(null);
|
|
76
|
+
(0, _react.useEffect)(() => {
|
|
77
|
+
const _stylesheet = createStyleSheet(theme);
|
|
78
|
+
|
|
79
|
+
setStylesheet(_stylesheet);
|
|
80
|
+
}, [theme]);
|
|
81
|
+
|
|
82
|
+
if (!styleSheet) {
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
const {
|
|
87
|
+
step,
|
|
88
|
+
style,
|
|
89
|
+
min,
|
|
90
|
+
max,
|
|
91
|
+
unit = '',
|
|
92
|
+
value,
|
|
93
|
+
onSlidingComplete,
|
|
94
|
+
testID,
|
|
95
|
+
onChange
|
|
96
|
+
} = props;
|
|
97
|
+
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
98
|
+
style: [styleSheet.container, style],
|
|
99
|
+
testID: testID
|
|
100
|
+
}, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
101
|
+
style: [styleSheet.header, {
|
|
102
|
+
color: brandTheme?.colors.primary
|
|
103
|
+
}],
|
|
104
|
+
testID: "slider-value"
|
|
105
|
+
}, value), /*#__PURE__*/_react.default.createElement(_reactNativeSlider.default, {
|
|
106
|
+
step: step || 1,
|
|
107
|
+
value: value,
|
|
108
|
+
onValueChange: onChange,
|
|
109
|
+
maximumValue: max,
|
|
110
|
+
minimumValue: min,
|
|
111
|
+
onSlidingComplete: onSlidingComplete,
|
|
112
|
+
minimumTrackTintColor: brandTheme?.colors.primary,
|
|
113
|
+
trackStyle: styleSheet.track,
|
|
114
|
+
thumbStyle: [styleSheet.thumb, {
|
|
115
|
+
borderColor: brandTheme?.colors.primary
|
|
116
|
+
}],
|
|
117
|
+
testID: "slider"
|
|
118
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
119
|
+
style: styleSheet.valuesContainer,
|
|
120
|
+
testID: "slider-values-container"
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
122
|
+
style: styleSheet.leftValue
|
|
123
|
+
}, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
124
|
+
style: styleSheet.textValue,
|
|
125
|
+
testID: "slider-min-value"
|
|
126
|
+
}, `${min} ${unit}`)), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
127
|
+
style: styleSheet.rightValue
|
|
128
|
+
}, /*#__PURE__*/_react.default.createElement(_index.default, {
|
|
129
|
+
style: styleSheet.textValue,
|
|
130
|
+
testID: "slider-max-value"
|
|
131
|
+
}, `${max} ${unit}`))));
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
var _default = QuestionSlider;
|
|
135
|
+
exports.default = _default;
|
|
136
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/questions/mobile/slide/index.native.tsx"],"names":["createStyleSheet","theme","StyleSheet","create","container","flex","paddingHorizontal","flexDirection","justifyContent","header","fontSize","fontWeight","bold","textAlign","textValue","color","colors","black","valuesContainer","leftValue","alignItems","rightValue","track","height","borderRadius","radius","button","thumb","BOX_STYLE","width","backgroundColor","borderWidth","QuestionSlider","props","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","step","style","min","max","unit","value","onSlidingComplete","testID","onChange","primary","borderColor"],"mappings":"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","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet, ViewStyle, FlexAlignType} from 'react-native';\nimport Slider from '@coorpacademy/react-native-slider';\n\nimport {Theme} from '../../../../variables/theme.native';\nimport Text from '../../../../atom/text/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {BOX_STYLE} from '../../../../variables/shadow';\nimport {FlexDirection, JustifyContent, TextAlign, FontWeight} from '../../../../types/styles';\n\nexport type OnChangeFunction = (value: number) => void;\n\nexport type Props = {\n min: number;\n max: number;\n unit?: string;\n value: number;\n onChange: OnChangeFunction;\n onSlidingComplete: () => void;\n style?: ViewStyle;\n step?: number;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: {\n flex: number;\n paddingHorizontal: number;\n flexDirection: FlexDirection;\n justifyContent: JustifyContent;\n };\n header: {\n fontSize: number;\n fontWeight: FontWeight;\n textAlign: TextAlign;\n };\n textValue: {\n fontSize: number;\n color: string;\n fontWeight: FontWeight;\n textAlign: string;\n };\n valuesContainer: {\n flexDirection: FlexDirection;\n justifyContent: JustifyContent;\n };\n leftValue: {\n flex: number;\n alignItems: FlexAlignType | undefined;\n };\n rightValue: {\n flex: number;\n alignItems: FlexAlignType | undefined;\n };\n track: {\n height: number;\n borderRadius: number;\n };\n thumb: {\n width: number;\n height: number;\n borderRadius: number;\n backgroundColor: string;\n borderWidth: number;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n flex: 1,\n paddingHorizontal: 20,\n flexDirection: 'column',\n justifyContent: 'center'\n },\n header: {\n fontSize: 25,\n fontWeight: theme.fontWeight.bold,\n textAlign: 'center'\n },\n textValue: {\n fontSize: 15,\n color: theme.colors.black,\n fontWeight: theme.fontWeight.bold,\n textAlign: 'center'\n },\n valuesContainer: {\n flexDirection: 'row',\n justifyContent: 'space-around'\n },\n leftValue: {\n flex: 1,\n alignItems: 'flex-start'\n },\n rightValue: {\n flex: 1,\n alignItems: 'flex-end'\n },\n track: {\n height: 10,\n borderRadius: theme.radius.button\n },\n thumb: {\n ...BOX_STYLE,\n width: 30,\n height: 30,\n borderRadius: 30 / 2,\n backgroundColor: 'white',\n borderWidth: 1\n }\n });\n\nconst QuestionSlider = (props: Props) => {\n const templateContext = useTemplateContext();\n const {brandTheme, theme} = templateContext;\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n const {step, style, min, max, unit = '', value, onSlidingComplete, testID, onChange} = props;\n\n return (\n <View style={[styleSheet.container, style]} testID={testID}>\n <Text style={[styleSheet.header, {color: brandTheme?.colors.primary}]} testID=\"slider-value\">\n {value}\n </Text>\n <Slider\n step={step || 1}\n value={value}\n onValueChange={onChange}\n maximumValue={max}\n minimumValue={min}\n onSlidingComplete={onSlidingComplete}\n minimumTrackTintColor={brandTheme?.colors.primary}\n trackStyle={styleSheet.track}\n thumbStyle={[styleSheet.thumb, {borderColor: brandTheme?.colors.primary}]}\n testID=\"slider\"\n />\n <View style={styleSheet.valuesContainer} testID=\"slider-values-container\">\n <View style={styleSheet.leftValue}>\n <Text style={styleSheet.textValue} testID=\"slider-min-value\">\n {`${min} ${unit}`}\n </Text>\n </View>\n <View style={styleSheet.rightValue}>\n <Text style={styleSheet.textValue} testID=\"slider-max-value\">\n {`${max} ${unit}`}\n </Text>\n </View>\n </View>\n </View>\n );\n};\n\nexport default QuestionSlider;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"styles.d.js"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
exports.__esModule = true;
|
|
4
|
+
exports.BOX_STYLE = void 0;
|
|
5
|
+
const BOX_STYLE = {
|
|
6
|
+
shadowColor: '#14171A',
|
|
7
|
+
shadowOpacity: 0.15,
|
|
8
|
+
shadowOffset: {
|
|
9
|
+
width: 0,
|
|
10
|
+
height: 0
|
|
11
|
+
},
|
|
12
|
+
shadowRadius: 8,
|
|
13
|
+
elevation: 4,
|
|
14
|
+
backgroundColor: 'rgba(0,0,0,0.015)' // fix shadow not visible bug on android
|
|
15
|
+
|
|
16
|
+
};
|
|
17
|
+
exports.BOX_STYLE = BOX_STYLE;
|
|
18
|
+
//# sourceMappingURL=shadow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/variables/shadow.ts"],"names":["BOX_STYLE","shadowColor","shadowOpacity","shadowOffset","width","height","shadowRadius","elevation","backgroundColor"],"mappings":";;;;AASO,MAAMA,SAAmB,GAAG;AACjCC,EAAAA,WAAW,EAAE,SADoB;AAEjCC,EAAAA,aAAa,EAAE,IAFkB;AAGjCC,EAAAA,YAAY,EAAE;AAACC,IAAAA,KAAK,EAAE,CAAR;AAAWC,IAAAA,MAAM,EAAE;AAAnB,GAHmB;AAIjCC,EAAAA,YAAY,EAAE,CAJmB;AAKjCC,EAAAA,SAAS,EAAE,CALsB;AAMjCC,EAAAA,eAAe,EAAE,mBANgB,CAMI;;AANJ,CAA5B","sourcesContent":["export type BoxStyle = {\n shadowColor: string;\n shadowOpacity: number;\n shadowOffset: {width: number; height: number};\n shadowRadius: number;\n elevation: number;\n backgroundColor: string;\n};\n\nexport const BOX_STYLE: BoxStyle = {\n shadowColor: '#14171A',\n shadowOpacity: 0.15,\n shadowOffset: {width: 0, height: 0},\n shadowRadius: 8,\n elevation: 4,\n backgroundColor: 'rgba(0,0,0,0.015)' // fix shadow not visible bug on android\n};\n"],"file":"shadow.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "10.22.
|
|
3
|
+
"version": "10.22.13",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -97,6 +97,7 @@
|
|
|
97
97
|
"@coorpacademy/css-modules-require-hook": "2.1.5",
|
|
98
98
|
"@coorpacademy/eslint-plugin-coorpacademy": "^10.0.0",
|
|
99
99
|
"@coorpacademy/react-native-mock-render": "^0.2.4",
|
|
100
|
+
"@coorpacademy/react-native-slider": "^0.11.1",
|
|
100
101
|
"@coorpacademy/translate": "6.1.5",
|
|
101
102
|
"@coorpacademy/webpack-config": "10.0.4",
|
|
102
103
|
"@storybook/addon-knobs": "^5.3.18",
|
|
@@ -138,5 +139,5 @@
|
|
|
138
139
|
"webpack": "^4.43.0"
|
|
139
140
|
},
|
|
140
141
|
"author": "CoorpAcademy",
|
|
141
|
-
"gitHead": "
|
|
142
|
+
"gitHead": "dcf2cd9a81883f64383e88b000654945b56b3e2c"
|
|
142
143
|
}
|