@coorpacademy/components 11.2.8 → 11.2.9
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/questions/mobile/draggable/index.native.d.ts.map +1 -1
- package/es/molecule/questions/mobile/draggable/index.native.js +26 -28
- package/es/molecule/questions/mobile/draggable/index.native.js.map +1 -1
- package/es/molecule/questions/mobile/slider/index.native.d.ts.map +1 -1
- package/es/molecule/questions/mobile/slider/index.native.js +6 -7
- package/es/molecule/questions/mobile/slider/index.native.js.map +1 -1
- package/lib/molecule/questions/mobile/draggable/index.native.d.ts.map +1 -1
- package/lib/molecule/questions/mobile/draggable/index.native.js +25 -27
- package/lib/molecule/questions/mobile/draggable/index.native.js.map +1 -1
- package/lib/molecule/questions/mobile/slider/index.native.d.ts.map +1 -1
- package/lib/molecule/questions/mobile/slider/index.native.js +6 -7
- package/lib/molecule/questions/mobile/slider/index.native.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAwDD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAgCD,QAAA,MAAM,iBAAiB,UAAW,KAAK,uBAwCtC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,46 +1,32 @@
|
|
|
1
1
|
import React, { useEffect, useState } from 'react';
|
|
2
|
-
import { View, StyleSheet
|
|
2
|
+
import { View, StyleSheet } from 'react-native';
|
|
3
3
|
import QuestionChoice from '../../../../atom/choice/index.native';
|
|
4
4
|
import { useTemplateContext } from '../../../../template/app-review/template-context';
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const createSelectionStyle = theme => StyleSheet.create({
|
|
7
7
|
choice: {
|
|
8
8
|
margin: theme.spacing.micro
|
|
9
9
|
},
|
|
10
|
-
|
|
10
|
+
selectionArea: {
|
|
11
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
|
|
12
|
+
flexDirection: 'row'
|
|
26
13
|
},
|
|
27
14
|
text: {
|
|
28
15
|
color: theme.colors.gray.medium
|
|
29
16
|
}
|
|
30
17
|
});
|
|
31
18
|
|
|
32
|
-
const
|
|
19
|
+
const Selection = props => {
|
|
33
20
|
const templateContext = useTemplateContext();
|
|
34
21
|
const {
|
|
35
|
-
theme
|
|
36
|
-
translations
|
|
22
|
+
theme
|
|
37
23
|
} = templateContext;
|
|
38
24
|
const {
|
|
39
25
|
onPress
|
|
40
26
|
} = props;
|
|
41
27
|
const [styleSheet, setStylesheet] = useState(null);
|
|
42
28
|
useEffect(() => {
|
|
43
|
-
const _stylesheet =
|
|
29
|
+
const _stylesheet = createSelectionStyle(theme);
|
|
44
30
|
|
|
45
31
|
setStylesheet(_stylesheet);
|
|
46
32
|
}, [theme]);
|
|
@@ -61,21 +47,30 @@ const DropZone = props => {
|
|
|
61
47
|
onPress: onPress(item),
|
|
62
48
|
questionType: "qcmDrag"
|
|
63
49
|
}, item.label));
|
|
64
|
-
const hasNoSelectedChoices = mappedSortedChoices.length === 0;
|
|
65
50
|
return /*#__PURE__*/React.createElement(View, {
|
|
66
|
-
style:
|
|
67
|
-
},
|
|
68
|
-
style: styleSheet.text
|
|
69
|
-
}, translations.selectSomethingBelow) : null, !hasNoSelectedChoices && mappedSortedChoices);
|
|
51
|
+
style: styleSheet.selectionArea
|
|
52
|
+
}, mappedSortedChoices);
|
|
70
53
|
};
|
|
71
54
|
|
|
72
55
|
const createStyleSheet = theme => StyleSheet.create({
|
|
56
|
+
container: {
|
|
57
|
+
flex: 1
|
|
58
|
+
},
|
|
73
59
|
pickableChoices: {
|
|
74
60
|
flexDirection: 'row',
|
|
75
61
|
flexWrap: 'wrap'
|
|
76
62
|
},
|
|
77
63
|
choice: {
|
|
78
64
|
margin: theme.spacing.micro
|
|
65
|
+
},
|
|
66
|
+
line: {
|
|
67
|
+
borderWidth: 1,
|
|
68
|
+
borderColor: '#E1E1E3',
|
|
69
|
+
borderRadius: 17,
|
|
70
|
+
marginHorizontal: 4,
|
|
71
|
+
marginBottom: 24,
|
|
72
|
+
marginTop: 16,
|
|
73
|
+
height: 2
|
|
79
74
|
}
|
|
80
75
|
});
|
|
81
76
|
|
|
@@ -110,10 +105,13 @@ const QuestionDraggable = props => {
|
|
|
110
105
|
questionType: "qcmDrag"
|
|
111
106
|
}, item.label));
|
|
112
107
|
return /*#__PURE__*/React.createElement(View, {
|
|
113
|
-
testID: testID
|
|
114
|
-
|
|
108
|
+
testID: testID,
|
|
109
|
+
style: styleSheet.container
|
|
110
|
+
}, /*#__PURE__*/React.createElement(Selection, {
|
|
115
111
|
choices: selectedChoices,
|
|
116
112
|
onPress: onPress
|
|
113
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
114
|
+
style: styleSheet.line
|
|
117
115
|
}), /*#__PURE__*/React.createElement(View, {
|
|
118
116
|
style: styleSheet.pickableChoices
|
|
119
117
|
}, pickableChoices));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","names":["React","useEffect","useState","View","StyleSheet","
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["React","useEffect","useState","View","StyleSheet","QuestionChoice","useTemplateContext","createSelectionStyle","theme","create","choice","margin","spacing","micro","selectionArea","flexWrap","flexDirection","text","color","colors","gray","medium","Selection","props","templateContext","onPress","styleSheet","setStylesheet","_stylesheet","choices","mappedSortedChoices","map","item","_id","label","createStyleSheet","container","flex","pickableChoices","line","borderWidth","borderColor","borderRadius","marginHorizontal","marginBottom","marginTop","height","QuestionDraggable","testID","selectedChoices","filter","selected"],"sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle} 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 {SelectableChoice} from '../../types';\n\nexport interface DropZoneProps {\n choices: Array<SelectableChoice>;\n onPress: (item: SelectableChoice) => () => void;\n}\n\ntype DropZoneStyleSheet = {\n choice: ViewStyle;\n selectionArea: ViewStyle;\n text: TextStyle;\n};\n\nconst createSelectionStyle = (theme: Theme): DropZoneStyleSheet =>\n StyleSheet.create({\n choice: {\n margin: theme.spacing.micro\n },\n selectionArea: {\n flexWrap: 'wrap',\n flexDirection: 'row'\n },\n text: {\n color: theme.colors.gray.medium\n }\n });\n\nconst Selection = (props: DropZoneProps) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n const {onPress} = props;\n\n const [styleSheet, setStylesheet] = useState<DropZoneStyleSheet | null>(null);\n\n useEffect(() => {\n const _stylesheet = createSelectionStyle(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={onPress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n return <View style={styleSheet.selectionArea}>{mappedSortedChoices}</View>;\n};\n\nexport interface Props {\n choices: Array<SelectableChoice>;\n testID?: string;\n onPress: (item: SelectableChoice) => () => void;\n}\n\ntype QuestionDraggableStyleSheet = {\n container: ViewStyle;\n pickableChoices: ViewStyle;\n choice: ViewStyle;\n line: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): QuestionDraggableStyleSheet =>\n StyleSheet.create({\n container: {\n flex: 1\n },\n pickableChoices: {\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n choice: {\n margin: theme.spacing.micro\n },\n line: {\n borderWidth: 1,\n borderColor: '#E1E1E3',\n borderRadius: 17,\n marginHorizontal: 4,\n marginBottom: 24,\n marginTop: 16,\n height: 2\n }\n });\n\nconst QuestionDraggable = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n\n const [styleSheet, setStylesheet] = useState<QuestionDraggableStyleSheet | 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 {choices, onPress, testID} = props;\n const selectedChoices = choices.filter(item => item.selected);\n\n const pickableChoices = choices\n .filter(item => !item.selected)\n .map((item: SelectableChoice) => (\n <QuestionChoice\n style={styleSheet.choice}\n key={item._id}\n squeezed\n testID={`choice-${item._id}-unselected`}\n onPress={onPress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n return (\n <View testID={testID} style={styleSheet.container}>\n <Selection choices={selectedChoices} onPress={onPress} />\n <View style={styleSheet.line} />\n <View style={styleSheet.pickableChoices}>{pickableChoices}</View>\n </View>\n );\n};\n\nexport default QuestionDraggable;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/slider/index.native.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,SAAS,EAAY,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/slider/index.native.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,SAAS,EAAY,MAAM,cAAc,CAAC;AASpE,oBAAY,yBAAyB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAEhE,oBAAY,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,yBAAyB,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AA2DF,QAAA,MAAM,cAAc,UAAW,KAAK,uBA4DnC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -7,7 +7,7 @@ import Text from '../../../../atom/text/index.native';
|
|
|
7
7
|
import { useTemplateContext } from '../../../../template/app-review/template-context';
|
|
8
8
|
import { BOX_STYLE } from '../../../../variables/shadow';
|
|
9
9
|
|
|
10
|
-
const createStyleSheet = theme => StyleSheet.create({
|
|
10
|
+
const createStyleSheet = (brandTheme, theme) => StyleSheet.create({
|
|
11
11
|
container: {
|
|
12
12
|
flex: 1,
|
|
13
13
|
paddingHorizontal: 20,
|
|
@@ -45,8 +45,9 @@ const createStyleSheet = theme => StyleSheet.create({
|
|
|
45
45
|
width: 30,
|
|
46
46
|
height: 30,
|
|
47
47
|
borderRadius: 30 / 2,
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
borderWidth: 5,
|
|
49
|
+
backgroundColor: brandTheme?.colors?.primary,
|
|
50
|
+
borderColor: 'white'
|
|
50
51
|
})
|
|
51
52
|
});
|
|
52
53
|
|
|
@@ -72,7 +73,7 @@ const QuestionSlider = props => {
|
|
|
72
73
|
onSlidingComplete(value);
|
|
73
74
|
}, [onSlidingComplete, value]);
|
|
74
75
|
useEffect(() => {
|
|
75
|
-
const _stylesheet = createStyleSheet(theme);
|
|
76
|
+
const _stylesheet = createStyleSheet(brandTheme, theme);
|
|
76
77
|
|
|
77
78
|
setStylesheet(_stylesheet);
|
|
78
79
|
}, [theme]);
|
|
@@ -98,9 +99,7 @@ const QuestionSlider = props => {
|
|
|
98
99
|
onSlidingComplete: handleSlidingComplete,
|
|
99
100
|
minimumTrackTintColor: brandTheme?.colors?.primary,
|
|
100
101
|
trackStyle: styleSheet.track,
|
|
101
|
-
thumbStyle: [styleSheet.thumb,
|
|
102
|
-
borderColor: brandTheme?.colors?.primary
|
|
103
|
-
}],
|
|
102
|
+
thumbStyle: [styleSheet.thumb],
|
|
104
103
|
testID: "slider"
|
|
105
104
|
}), /*#__PURE__*/React.createElement(View, {
|
|
106
105
|
style: styleSheet.valuesContainer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","names":["React","useState","useEffect","useCallback","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","
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["React","useState","useEffect","useCallback","View","StyleSheet","Slider","Text","useTemplateContext","BOX_STYLE","createStyleSheet","brandTheme","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","borderWidth","backgroundColor","primary","borderColor","QuestionSlider","props","step","style","min","max","unit","value","storeValue","onSlidingComplete","testID","templateContext","styleSheet","setStylesheet","setValue","handleSlidingComplete","_stylesheet"],"sources":["../../../../../src/molecule/questions/mobile/slider/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle} 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 {Brand} from '../../../../variables/brand.native';\n\nexport type OnSlidingCompleteFunction = (value: number) => void;\n\nexport type Props = {\n min: number;\n max: number;\n value?: number;\n unit?: string;\n onSlidingComplete: OnSlidingCompleteFunction;\n style?: ViewStyle;\n step?: number;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: ViewStyle;\n header: TextStyle;\n textValue: TextStyle;\n valuesContainer: ViewStyle;\n leftValue: ViewStyle;\n rightValue: ViewStyle;\n track: ViewStyle;\n thumb: ViewStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\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 borderWidth: 5,\n backgroundColor: brandTheme?.colors?.primary,\n borderColor: 'white'\n }\n });\n\nconst QuestionSlider = (props: Props) => {\n const {\n step,\n style,\n min,\n max,\n unit = '',\n value: storeValue = 0,\n onSlidingComplete,\n testID\n } = props;\n const templateContext = useTemplateContext();\n const {brandTheme, theme} = templateContext;\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const [value, setValue] = useState<number>(storeValue);\n\n const handleSlidingComplete = useCallback(() => {\n onSlidingComplete(value);\n }, [onSlidingComplete, value]);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(brandTheme, theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\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={setValue}\n maximumValue={max}\n minimumValue={min}\n onSlidingComplete={handleSlidingComplete}\n minimumTrackTintColor={brandTheme?.colors?.primary}\n trackStyle={styleSheet.track}\n thumbStyle={[styleSheet.thumb]}\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"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,aAAa,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAwDD,MAAM,WAAW,KAAK;IACpB,OAAO,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;CACjD;AAgCD,QAAA,MAAM,iBAAiB,UAAW,KAAK,uBAwCtC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -17,44 +17,30 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
19
|
|
|
20
|
-
const
|
|
20
|
+
const createSelectionStyle = theme => _reactNative.StyleSheet.create({
|
|
21
21
|
choice: {
|
|
22
22
|
margin: theme.spacing.micro
|
|
23
23
|
},
|
|
24
|
-
|
|
24
|
+
selectionArea: {
|
|
25
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
|
|
26
|
+
flexDirection: 'row'
|
|
40
27
|
},
|
|
41
28
|
text: {
|
|
42
29
|
color: theme.colors.gray.medium
|
|
43
30
|
}
|
|
44
31
|
});
|
|
45
32
|
|
|
46
|
-
const
|
|
33
|
+
const Selection = props => {
|
|
47
34
|
const templateContext = (0, _templateContext.useTemplateContext)();
|
|
48
35
|
const {
|
|
49
|
-
theme
|
|
50
|
-
translations
|
|
36
|
+
theme
|
|
51
37
|
} = templateContext;
|
|
52
38
|
const {
|
|
53
39
|
onPress
|
|
54
40
|
} = props;
|
|
55
41
|
const [styleSheet, setStylesheet] = (0, _react.useState)(null);
|
|
56
42
|
(0, _react.useEffect)(() => {
|
|
57
|
-
const _stylesheet =
|
|
43
|
+
const _stylesheet = createSelectionStyle(theme);
|
|
58
44
|
|
|
59
45
|
setStylesheet(_stylesheet);
|
|
60
46
|
}, [theme]);
|
|
@@ -75,21 +61,30 @@ const DropZone = props => {
|
|
|
75
61
|
onPress: onPress(item),
|
|
76
62
|
questionType: "qcmDrag"
|
|
77
63
|
}, item.label));
|
|
78
|
-
const hasNoSelectedChoices = mappedSortedChoices.length === 0;
|
|
79
64
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
80
|
-
style:
|
|
81
|
-
},
|
|
82
|
-
style: styleSheet.text
|
|
83
|
-
}, translations.selectSomethingBelow) : null, !hasNoSelectedChoices && mappedSortedChoices);
|
|
65
|
+
style: styleSheet.selectionArea
|
|
66
|
+
}, mappedSortedChoices);
|
|
84
67
|
};
|
|
85
68
|
|
|
86
69
|
const createStyleSheet = theme => _reactNative.StyleSheet.create({
|
|
70
|
+
container: {
|
|
71
|
+
flex: 1
|
|
72
|
+
},
|
|
87
73
|
pickableChoices: {
|
|
88
74
|
flexDirection: 'row',
|
|
89
75
|
flexWrap: 'wrap'
|
|
90
76
|
},
|
|
91
77
|
choice: {
|
|
92
78
|
margin: theme.spacing.micro
|
|
79
|
+
},
|
|
80
|
+
line: {
|
|
81
|
+
borderWidth: 1,
|
|
82
|
+
borderColor: '#E1E1E3',
|
|
83
|
+
borderRadius: 17,
|
|
84
|
+
marginHorizontal: 4,
|
|
85
|
+
marginBottom: 24,
|
|
86
|
+
marginTop: 16,
|
|
87
|
+
height: 2
|
|
93
88
|
}
|
|
94
89
|
});
|
|
95
90
|
|
|
@@ -124,10 +119,13 @@ const QuestionDraggable = props => {
|
|
|
124
119
|
questionType: "qcmDrag"
|
|
125
120
|
}, item.label));
|
|
126
121
|
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
127
|
-
testID: testID
|
|
128
|
-
|
|
122
|
+
testID: testID,
|
|
123
|
+
style: styleSheet.container
|
|
124
|
+
}, /*#__PURE__*/_react.default.createElement(Selection, {
|
|
129
125
|
choices: selectedChoices,
|
|
130
126
|
onPress: onPress
|
|
127
|
+
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
128
|
+
style: styleSheet.line
|
|
131
129
|
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
132
130
|
style: styleSheet.pickableChoices
|
|
133
131
|
}, pickableChoices));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","names":["
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["createSelectionStyle","theme","StyleSheet","create","choice","margin","spacing","micro","selectionArea","flexWrap","flexDirection","text","color","colors","gray","medium","Selection","props","templateContext","useTemplateContext","onPress","styleSheet","setStylesheet","useState","useEffect","_stylesheet","choices","mappedSortedChoices","map","item","_id","label","createStyleSheet","container","flex","pickableChoices","line","borderWidth","borderColor","borderRadius","marginHorizontal","marginBottom","marginTop","height","QuestionDraggable","testID","selectedChoices","filter","selected"],"sources":["../../../../../src/molecule/questions/mobile/draggable/index.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle} 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 {SelectableChoice} from '../../types';\n\nexport interface DropZoneProps {\n choices: Array<SelectableChoice>;\n onPress: (item: SelectableChoice) => () => void;\n}\n\ntype DropZoneStyleSheet = {\n choice: ViewStyle;\n selectionArea: ViewStyle;\n text: TextStyle;\n};\n\nconst createSelectionStyle = (theme: Theme): DropZoneStyleSheet =>\n StyleSheet.create({\n choice: {\n margin: theme.spacing.micro\n },\n selectionArea: {\n flexWrap: 'wrap',\n flexDirection: 'row'\n },\n text: {\n color: theme.colors.gray.medium\n }\n });\n\nconst Selection = (props: DropZoneProps) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n const {onPress} = props;\n\n const [styleSheet, setStylesheet] = useState<DropZoneStyleSheet | null>(null);\n\n useEffect(() => {\n const _stylesheet = createSelectionStyle(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={onPress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n return <View style={styleSheet.selectionArea}>{mappedSortedChoices}</View>;\n};\n\nexport interface Props {\n choices: Array<SelectableChoice>;\n testID?: string;\n onPress: (item: SelectableChoice) => () => void;\n}\n\ntype QuestionDraggableStyleSheet = {\n container: ViewStyle;\n pickableChoices: ViewStyle;\n choice: ViewStyle;\n line: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): QuestionDraggableStyleSheet =>\n StyleSheet.create({\n container: {\n flex: 1\n },\n pickableChoices: {\n flexDirection: 'row',\n flexWrap: 'wrap'\n },\n choice: {\n margin: theme.spacing.micro\n },\n line: {\n borderWidth: 1,\n borderColor: '#E1E1E3',\n borderRadius: 17,\n marginHorizontal: 4,\n marginBottom: 24,\n marginTop: 16,\n height: 2\n }\n });\n\nconst QuestionDraggable = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n\n const [styleSheet, setStylesheet] = useState<QuestionDraggableStyleSheet | 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 {choices, onPress, testID} = props;\n const selectedChoices = choices.filter(item => item.selected);\n\n const pickableChoices = choices\n .filter(item => !item.selected)\n .map((item: SelectableChoice) => (\n <QuestionChoice\n style={styleSheet.choice}\n key={item._id}\n squeezed\n testID={`choice-${item._id}-unselected`}\n onPress={onPress(item)}\n questionType=\"qcmDrag\"\n >\n {item.label}\n </QuestionChoice>\n ));\n\n return (\n <View testID={testID} style={styleSheet.container}>\n <Selection choices={selectedChoices} onPress={onPress} />\n <View style={styleSheet.line} />\n <View style={styleSheet.pickableChoices}>{pickableChoices}</View>\n </View>\n );\n};\n\nexport default QuestionDraggable;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/slider/index.native.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,SAAS,EAAY,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../../../src/molecule/questions/mobile/slider/index.native.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,SAAS,EAAY,MAAM,cAAc,CAAC;AASpE,oBAAY,yBAAyB,GAAG,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;AAEhE,oBAAY,KAAK,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,yBAAyB,CAAC;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AA2DF,QAAA,MAAM,cAAc,UAAW,KAAK,uBA4DnC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -23,7 +23,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
23
23
|
|
|
24
24
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
25
25
|
|
|
26
|
-
const createStyleSheet = theme => _reactNative.StyleSheet.create({
|
|
26
|
+
const createStyleSheet = (brandTheme, theme) => _reactNative.StyleSheet.create({
|
|
27
27
|
container: {
|
|
28
28
|
flex: 1,
|
|
29
29
|
paddingHorizontal: 20,
|
|
@@ -61,8 +61,9 @@ const createStyleSheet = theme => _reactNative.StyleSheet.create({
|
|
|
61
61
|
width: 30,
|
|
62
62
|
height: 30,
|
|
63
63
|
borderRadius: 30 / 2,
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
borderWidth: 5,
|
|
65
|
+
backgroundColor: brandTheme?.colors?.primary,
|
|
66
|
+
borderColor: 'white'
|
|
66
67
|
})
|
|
67
68
|
});
|
|
68
69
|
|
|
@@ -88,7 +89,7 @@ const QuestionSlider = props => {
|
|
|
88
89
|
onSlidingComplete(value);
|
|
89
90
|
}, [onSlidingComplete, value]);
|
|
90
91
|
(0, _react.useEffect)(() => {
|
|
91
|
-
const _stylesheet = createStyleSheet(theme);
|
|
92
|
+
const _stylesheet = createStyleSheet(brandTheme, theme);
|
|
92
93
|
|
|
93
94
|
setStylesheet(_stylesheet);
|
|
94
95
|
}, [theme]);
|
|
@@ -114,9 +115,7 @@ const QuestionSlider = props => {
|
|
|
114
115
|
onSlidingComplete: handleSlidingComplete,
|
|
115
116
|
minimumTrackTintColor: brandTheme?.colors?.primary,
|
|
116
117
|
trackStyle: styleSheet.track,
|
|
117
|
-
thumbStyle: [styleSheet.thumb,
|
|
118
|
-
borderColor: brandTheme?.colors?.primary
|
|
119
|
-
}],
|
|
118
|
+
thumbStyle: [styleSheet.thumb],
|
|
120
119
|
testID: "slider"
|
|
121
120
|
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
|
|
122
121
|
style: styleSheet.valuesContainer,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","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","
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["createStyleSheet","brandTheme","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","borderWidth","backgroundColor","primary","borderColor","QuestionSlider","props","step","style","min","max","unit","value","storeValue","onSlidingComplete","testID","templateContext","useTemplateContext","styleSheet","setStylesheet","useState","setValue","handleSlidingComplete","useCallback","useEffect","_stylesheet"],"sources":["../../../../../src/molecule/questions/mobile/slider/index.native.tsx"],"sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, TextStyle} 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 {Brand} from '../../../../variables/brand.native';\n\nexport type OnSlidingCompleteFunction = (value: number) => void;\n\nexport type Props = {\n min: number;\n max: number;\n value?: number;\n unit?: string;\n onSlidingComplete: OnSlidingCompleteFunction;\n style?: ViewStyle;\n step?: number;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: ViewStyle;\n header: TextStyle;\n textValue: TextStyle;\n valuesContainer: ViewStyle;\n leftValue: ViewStyle;\n rightValue: ViewStyle;\n track: ViewStyle;\n thumb: ViewStyle;\n};\n\nconst createStyleSheet = (brandTheme: Brand, theme: Theme): StyleSheetType =>\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 borderWidth: 5,\n backgroundColor: brandTheme?.colors?.primary,\n borderColor: 'white'\n }\n });\n\nconst QuestionSlider = (props: Props) => {\n const {\n step,\n style,\n min,\n max,\n unit = '',\n value: storeValue = 0,\n onSlidingComplete,\n testID\n } = props;\n const templateContext = useTemplateContext();\n const {brandTheme, theme} = templateContext;\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const [value, setValue] = useState<number>(storeValue);\n\n const handleSlidingComplete = useCallback(() => {\n onSlidingComplete(value);\n }, [onSlidingComplete, value]);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(brandTheme, theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\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={setValue}\n maximumValue={max}\n minimumValue={min}\n onSlidingComplete={handleSlidingComplete}\n minimumTrackTintColor={brandTheme?.colors?.primary}\n trackStyle={styleSheet.track}\n thumbStyle={[styleSheet.thumb]}\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"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.2.
|
|
3
|
+
"version": "11.2.9",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -159,5 +159,5 @@
|
|
|
159
159
|
"last 2 versions",
|
|
160
160
|
"IE 11"
|
|
161
161
|
],
|
|
162
|
-
"gitHead": "
|
|
162
|
+
"gitHead": "f2709ae6ade2a4a7eba185c70e0657eb1bd719cd"
|
|
163
163
|
}
|