@coorpacademy/components 10.22.3 → 10.22.6
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 +11 -5
- package/es/atom/choice/index.native.js +132 -0
- package/es/atom/choice/index.native.js.map +1 -0
- package/es/atom/drag-and-drop/index.js +2 -1
- package/es/atom/drag-and-drop/index.js.map +1 -1
- package/es/atom/gradient/index.native.js +46 -0
- package/es/atom/gradient/index.native.js.map +1 -0
- package/es/atom/header-back-button/index.native.js +3 -4
- package/es/atom/header-back-button/index.native.js.map +1 -1
- package/es/atom/html/index.native.js +146 -0
- package/es/atom/html/index.native.js.map +1 -0
- package/es/atom/image-backgound/index.native.js +90 -0
- package/es/atom/image-backgound/index.native.js.map +1 -0
- package/es/atom/input-checkbox/index.js +3 -2
- package/es/atom/input-checkbox/index.js.map +1 -1
- package/es/atom/input-switch/index.js +45 -7
- package/es/atom/input-switch/index.js.map +1 -1
- package/es/atom/input-switch/style.css +56 -6
- package/es/atom/select-modal/index.native.js +113 -0
- package/es/atom/select-modal/index.native.js.map +1 -0
- package/es/atom/space/index.native.js +21 -0
- package/es/atom/space/index.native.js.map +1 -0
- package/es/atom/text/index.native.js +31 -0
- package/es/atom/text/index.native.js.map +1 -0
- package/es/hoc/modal/index.native.js +97 -0
- package/es/hoc/modal/index.native.js.map +1 -0
- package/es/hoc/modal/select/index.native.js +86 -0
- package/es/hoc/modal/select/index.native.js.map +1 -0
- package/es/hoc/modal/select-item/index.native.js +54 -0
- package/es/hoc/modal/select-item/index.native.js.map +1 -0
- package/es/hoc/touchable/index.native.js.map +1 -1
- package/es/index.js +2 -1
- package/es/index.js.map +1 -1
- package/es/molecule/answer/index.js +39 -32
- package/es/molecule/answer/index.js.map +1 -1
- package/es/molecule/cm-popin/index.js +125 -19
- package/es/molecule/cm-popin/index.js.map +1 -1
- package/es/molecule/cm-popin/style.css +176 -9
- package/es/molecule/feedback/index.js +7 -3
- package/es/molecule/feedback/index.js.map +1 -1
- package/es/molecule/feedback/style.css +24 -0
- package/es/molecule/questions/free-text/index.native.js +8 -8
- package/es/molecule/questions/free-text/index.native.js.map +1 -1
- package/es/molecule/questions/mobile/template/index.native.js +222 -0
- package/es/molecule/questions/mobile/template/index.native.js.map +1 -0
- package/es/template/app-player/player/index.js +6 -3
- package/es/template/app-player/player/index.js.map +1 -1
- package/es/template/app-player/popin-end/index.js +21 -6
- package/es/template/app-player/popin-end/index.js.map +1 -1
- package/es/template/app-player/popin-end/style.css +1 -1
- package/es/template/app-player/popin-end/summary.css +65 -0
- package/es/template/app-player/popin-end/summary.js +57 -7
- package/es/template/app-player/popin-end/summary.js.map +1 -1
- package/es/template/app-player/popin-header/index.js +33 -12
- package/es/template/app-player/popin-header/index.js.map +1 -1
- package/es/template/app-player/popin-header/style.css +93 -0
- package/es/template/app-player/popin-no-access/index.js +27 -0
- package/es/template/app-player/popin-no-access/index.js.map +1 -0
- package/es/template/app-review/prop-types.js +2 -1
- package/es/template/app-review/prop-types.js.map +1 -1
- package/es/template/app-review/slides/index.js +2 -2
- package/es/template/app-review/slides/index.js.map +1 -1
- package/es/template/app-review/template-context.js +1 -0
- package/es/template/app-review/template-context.js.map +1 -1
- package/es/template/common/dashboard/index.js +6 -3
- package/es/template/common/dashboard/index.js.map +1 -1
- package/es/types/app-review.d.js +2 -0
- package/es/types/app-review.d.js.map +1 -0
- package/es/types/progression-engine.d.js +2 -0
- package/es/types/progression-engine.d.js.map +1 -0
- package/es/types/translations.js +2 -0
- package/es/types/translations.js.map +1 -0
- package/es/util/build-query-string.js +9 -0
- package/es/util/build-query-string.js.map +1 -0
- package/es/util/get-clean-uri.js +4 -0
- package/es/util/get-clean-uri.js.map +1 -0
- package/es/util/get-resized-image.js +39 -0
- package/es/util/get-resized-image.js.map +1 -0
- package/es/util/parse-template-string.js +4 -2
- package/es/util/parse-template-string.js.map +1 -1
- package/es/variables/colors.css +1 -0
- package/es/variables/theme.native.js +1 -0
- package/es/variables/theme.native.js.map +1 -1
- package/lib/atom/choice/index.native.js +150 -0
- package/lib/atom/choice/index.native.js.map +1 -0
- package/lib/atom/drag-and-drop/index.js +2 -1
- package/lib/atom/drag-and-drop/index.js.map +1 -1
- package/lib/atom/gradient/index.native.js +56 -0
- package/lib/atom/gradient/index.native.js.map +1 -0
- package/lib/atom/header-back-button/index.native.js +3 -4
- package/lib/atom/header-back-button/index.native.js.map +1 -1
- package/lib/atom/html/index.native.js +163 -0
- package/lib/atom/html/index.native.js.map +1 -0
- package/lib/atom/image-backgound/index.native.js +105 -0
- package/lib/atom/image-backgound/index.native.js.map +1 -0
- package/lib/atom/input-checkbox/index.js +2 -1
- package/lib/atom/input-checkbox/index.js.map +1 -1
- package/lib/atom/input-switch/index.js +45 -7
- package/lib/atom/input-switch/index.js.map +1 -1
- package/lib/atom/input-switch/style.css +56 -6
- package/lib/atom/select-modal/index.native.js +135 -0
- package/lib/atom/select-modal/index.native.js.map +1 -0
- package/lib/atom/space/index.native.js +33 -0
- package/lib/atom/space/index.native.js.map +1 -0
- package/lib/atom/text/index.native.js +46 -0
- package/lib/atom/text/index.native.js.map +1 -0
- package/lib/hoc/modal/index.native.js +114 -0
- package/lib/hoc/modal/index.native.js.map +1 -0
- package/lib/hoc/modal/select/index.native.js +103 -0
- package/lib/hoc/modal/select/index.native.js.map +1 -0
- package/lib/hoc/modal/select-item/index.native.js +70 -0
- package/lib/hoc/modal/select-item/index.native.js.map +1 -0
- package/lib/hoc/touchable/index.native.js.map +1 -1
- package/lib/index.js +4 -0
- package/lib/index.js.map +1 -1
- package/lib/molecule/answer/index.js +39 -32
- package/lib/molecule/answer/index.js.map +1 -1
- package/lib/molecule/cm-popin/index.js +126 -18
- package/lib/molecule/cm-popin/index.js.map +1 -1
- package/lib/molecule/cm-popin/style.css +176 -9
- package/lib/molecule/feedback/index.js +7 -3
- package/lib/molecule/feedback/index.js.map +1 -1
- package/lib/molecule/feedback/style.css +24 -0
- package/lib/molecule/questions/free-text/index.native.js +7 -7
- package/lib/molecule/questions/free-text/index.native.js.map +1 -1
- package/lib/molecule/questions/mobile/template/index.native.js +243 -0
- package/lib/molecule/questions/mobile/template/index.native.js.map +1 -0
- package/lib/template/app-player/player/index.js +7 -3
- package/lib/template/app-player/player/index.js.map +1 -1
- package/lib/template/app-player/popin-end/index.js +21 -6
- package/lib/template/app-player/popin-end/index.js.map +1 -1
- package/lib/template/app-player/popin-end/style.css +1 -1
- package/lib/template/app-player/popin-end/summary.css +65 -0
- package/lib/template/app-player/popin-end/summary.js +58 -7
- package/lib/template/app-player/popin-end/summary.js.map +1 -1
- package/lib/template/app-player/popin-header/index.js +32 -11
- package/lib/template/app-player/popin-header/index.js.map +1 -1
- package/lib/template/app-player/popin-header/style.css +93 -0
- package/lib/template/app-player/popin-no-access/index.js +37 -0
- package/lib/template/app-player/popin-no-access/index.js.map +1 -0
- package/lib/template/app-review/prop-types.js +2 -1
- package/lib/template/app-review/prop-types.js.map +1 -1
- package/lib/template/app-review/slides/index.js +2 -2
- package/lib/template/app-review/slides/index.js.map +1 -1
- package/lib/template/app-review/template-context.js +1 -0
- package/lib/template/app-review/template-context.js.map +1 -1
- package/lib/template/common/dashboard/index.js +7 -3
- package/lib/template/common/dashboard/index.js.map +1 -1
- package/lib/types/app-review.d.js +2 -0
- package/lib/types/app-review.d.js.map +1 -0
- package/lib/types/progression-engine.d.js +2 -0
- package/lib/types/progression-engine.d.js.map +1 -0
- package/lib/types/translations.js +2 -0
- package/lib/types/translations.js.map +1 -0
- package/lib/util/build-query-string.js +17 -0
- package/lib/util/build-query-string.js.map +1 -0
- package/lib/util/get-clean-uri.js +10 -0
- package/lib/util/get-clean-uri.js.map +1 -0
- package/lib/util/get-resized-image.js +49 -0
- package/lib/util/get-resized-image.js.map +1 -0
- package/lib/util/parse-template-string.js +4 -2
- package/lib/util/parse-template-string.js.map +1 -1
- package/lib/variables/colors.css +1 -0
- package/lib/variables/theme.native.js +3 -1
- package/lib/variables/theme.native.js.map +1 -1
- package/package.json +8 -4
package/README.md
CHANGED
|
@@ -99,7 +99,7 @@ Among the Lottie Atom's props, there are two *important* props: animationSrc & i
|
|
|
99
99
|
that need an additional step, the ie11ImageBackup is needed as it's name implies because ie11 doesn't
|
|
100
100
|
support Lottie (more specifically Web Components due to the Shadow DOM).
|
|
101
101
|
|
|
102
|
-
First, you must upload to AWS S3 any new animation, in one of the static buckets (depending on the desired env), ex:
|
|
102
|
+
First, you must upload to AWS S3 any new animation, in one of the static buckets (depending on the desired env), ex:
|
|
103
103
|
`https://static-staging.coorpacademy.com/animations/review/`.
|
|
104
104
|
|
|
105
105
|
This animation must be paired with a backup image (svg) that'll be used for the ie11 scenario.
|
|
@@ -144,7 +144,6 @@ const props = {
|
|
|
144
144
|
|
|
145
145
|
The props include classNames && size control to handle additional styling.
|
|
146
146
|
|
|
147
|
-
|
|
148
147
|
## Locally use in an external project
|
|
149
148
|
|
|
150
149
|
Link your dependencies:
|
|
@@ -160,13 +159,20 @@ Build modifications:
|
|
|
160
159
|
[@coorpacademy-components] > npm run build:es
|
|
161
160
|
```
|
|
162
161
|
|
|
163
|
-
|
|
164
162
|
## Use in mobile app
|
|
163
|
+
|
|
165
164
|
Run `npm run build:watch`
|
|
166
|
-
For more info see the mobile
|
|
165
|
+
For more info see the [mobile documentation](https://github.com/CoorpAcademy/mobile/blob/master/docs/local-sync.md)
|
|
166
|
+
|
|
167
|
+
You may need to install these optional libs depending on which native components you use:
|
|
168
|
+
|
|
169
|
+
- `color`
|
|
170
|
+
- `react-native-modal`
|
|
171
|
+
- `react-native-render-html`
|
|
172
|
+
- `react-native-linear-gradient`
|
|
167
173
|
|
|
168
174
|
## Troubleshooting
|
|
169
175
|
|
|
170
176
|
Error when trying to launch the storybook:
|
|
171
177
|
|
|
172
|
-
Try to delete your ```node_modules```, go to the project's root and launch: ```yarn && yarn bootstrap```
|
|
178
|
+
Try to delete your ```node_modules```, go to the project's root and launch: ```yarn && yarn bootstrap```
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import { View, StyleSheet } from 'react-native';
|
|
3
|
+
import Html from '../html/index.native';
|
|
4
|
+
import ImageBackground from '../image-backgound/index.native';
|
|
5
|
+
import getCleanUri from '../../util/get-clean-uri';
|
|
6
|
+
import Touchable from '../../hoc/touchable/index.native';
|
|
7
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
8
|
+
|
|
9
|
+
const createStyleSheet = theme => StyleSheet.create({
|
|
10
|
+
boxShadow: {
|
|
11
|
+
shadowColor: '#000',
|
|
12
|
+
shadowOffset: {
|
|
13
|
+
width: 0,
|
|
14
|
+
height: 4
|
|
15
|
+
},
|
|
16
|
+
shadowOpacity: 0.12,
|
|
17
|
+
shadowRadius: 16,
|
|
18
|
+
elevation: 8,
|
|
19
|
+
backgroundColor: '#0000'
|
|
20
|
+
},
|
|
21
|
+
container: {
|
|
22
|
+
minHeight: 80,
|
|
23
|
+
backgroundColor: theme.colors.white,
|
|
24
|
+
borderRadius: theme.radius.regular,
|
|
25
|
+
overflow: 'hidden',
|
|
26
|
+
flexDirection: 'row',
|
|
27
|
+
alignItems: 'stretch'
|
|
28
|
+
},
|
|
29
|
+
textContainer: {
|
|
30
|
+
paddingHorizontal: 24,
|
|
31
|
+
paddingVertical: 12,
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
flex: 1
|
|
35
|
+
},
|
|
36
|
+
squeezedTextContainer: {
|
|
37
|
+
padding: theme.spacing.small,
|
|
38
|
+
paddingLeft: undefined,
|
|
39
|
+
paddingVertical: undefined,
|
|
40
|
+
paddingRight: undefined,
|
|
41
|
+
flex: 0
|
|
42
|
+
},
|
|
43
|
+
text: {
|
|
44
|
+
fontWeight: theme.fontWeight.bold,
|
|
45
|
+
color: theme.colors.black
|
|
46
|
+
},
|
|
47
|
+
textSelected: {
|
|
48
|
+
color: theme.colors.white
|
|
49
|
+
},
|
|
50
|
+
unselectedImageContainer: {
|
|
51
|
+
borderRightColor: theme.colors.border
|
|
52
|
+
},
|
|
53
|
+
imageContainer: {
|
|
54
|
+
height: '100%',
|
|
55
|
+
width: '25%'
|
|
56
|
+
},
|
|
57
|
+
image: {
|
|
58
|
+
flex: 1
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
|
|
62
|
+
const Choice = ({
|
|
63
|
+
children,
|
|
64
|
+
isSelected = false,
|
|
65
|
+
squeezed = false,
|
|
66
|
+
isDisabled,
|
|
67
|
+
onPress,
|
|
68
|
+
media,
|
|
69
|
+
testID: prefixTestID,
|
|
70
|
+
style,
|
|
71
|
+
questionType
|
|
72
|
+
}) => {
|
|
73
|
+
const templateContext = useTemplateContext();
|
|
74
|
+
const {
|
|
75
|
+
theme,
|
|
76
|
+
brandTheme
|
|
77
|
+
} = templateContext;
|
|
78
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
79
|
+
useEffect(() => {
|
|
80
|
+
const _stylesheet = createStyleSheet(theme);
|
|
81
|
+
|
|
82
|
+
setStylesheet(_stylesheet);
|
|
83
|
+
}, [theme]);
|
|
84
|
+
|
|
85
|
+
if (!styleSheet) {
|
|
86
|
+
return null;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
const selectedStyle = brandTheme && {
|
|
90
|
+
backgroundColor: brandTheme.colors.primary,
|
|
91
|
+
borderColor: brandTheme.colors.primary,
|
|
92
|
+
borderRadius: theme.radius.common
|
|
93
|
+
};
|
|
94
|
+
const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';
|
|
95
|
+
const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();
|
|
96
|
+
const url = media && media.type === 'img' && media.src && media.src.length > 0 && getCleanUri(media.src[0].url);
|
|
97
|
+
const source = {
|
|
98
|
+
uri: url ? getCleanUri(url) : undefined
|
|
99
|
+
};
|
|
100
|
+
const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';
|
|
101
|
+
const htmlStyle = [styleSheet.text];
|
|
102
|
+
|
|
103
|
+
if (isSelected) {
|
|
104
|
+
htmlStyle.push(styleSheet.textSelected);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
return /*#__PURE__*/React.createElement(Touchable, {
|
|
108
|
+
onPress: !isDisabled ? onPress : undefined,
|
|
109
|
+
style: style,
|
|
110
|
+
analyticsID: "question-choice",
|
|
111
|
+
analyticsParams: {
|
|
112
|
+
questionType
|
|
113
|
+
}
|
|
114
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
115
|
+
style: [styleSheet.boxShadow, styleSheet.container],
|
|
116
|
+
testID: prefixTestID && `${prefixTestID}${selectedSuffix}`
|
|
117
|
+
}, url ? /*#__PURE__*/React.createElement(View, {
|
|
118
|
+
style: styleSheet.imageContainer
|
|
119
|
+
}, /*#__PURE__*/React.createElement(ImageBackground, {
|
|
120
|
+
testID: prefixTestID && `${prefixTestID}${mediaSuffix}`,
|
|
121
|
+
source: source,
|
|
122
|
+
style: styleSheet.image
|
|
123
|
+
})) : null, /*#__PURE__*/React.createElement(View, {
|
|
124
|
+
style: [styleSheet.textContainer, squeezed && styleSheet.squeezedTextContainer, isSelected && selectedStyle]
|
|
125
|
+
}, /*#__PURE__*/React.createElement(Html, {
|
|
126
|
+
fontSize: squeezed ? theme.fontSize.medium : theme.fontSize.regular,
|
|
127
|
+
style: htmlStyle
|
|
128
|
+
}, children))));
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
export default Choice;
|
|
132
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/choice/index.native.tsx"],"names":["React","useEffect","useState","View","StyleSheet","Html","ImageBackground","getCleanUri","Touchable","useTemplateContext","createStyleSheet","theme","create","boxShadow","shadowColor","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","backgroundColor","container","minHeight","colors","white","borderRadius","radius","regular","overflow","flexDirection","alignItems","textContainer","paddingHorizontal","paddingVertical","justifyContent","flex","squeezedTextContainer","padding","spacing","small","paddingLeft","undefined","paddingRight","text","fontWeight","bold","color","black","textSelected","unselectedImageContainer","borderRightColor","border","imageContainer","image","Choice","children","isSelected","squeezed","isDisabled","onPress","media","testID","prefixTestID","style","questionType","templateContext","brandTheme","styleSheet","setStylesheet","_stylesheet","selectedStyle","primary","borderColor","common","selectedSuffix","mediaType","type","toLowerCase","url","src","length","source","uri","mediaSuffix","htmlStyle","push","fontSize","medium"],"mappings":"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","sourcesContent":["import React, {useEffect, useState} from 'react';\nimport {View, StyleSheet, ViewStyle} from 'react-native';\nimport type {Media, QuestionType} from '../../types/progression-engine';\n\nimport Html from '../html/index.native';\nimport ImageBackground from '../image-backgound/index.native';\nimport getCleanUri from '../../util/get-clean-uri';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\nexport type Props = {\n isSelected?: boolean;\n onPress: () => void;\n children: string;\n isDisabled?: boolean;\n testID?: string;\n media?: Media;\n squeezed?: boolean;\n style?: ViewStyle;\n questionType: QuestionType;\n};\n\ntype StyleSheetType = {\n boxShadow: any;\n container: any;\n text: any;\n textSelected: any;\n textContainer: any;\n squeezedTextContainer: any;\n unselectedImageContainer: any;\n imageContainer: any;\n image: any;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n boxShadow: {\n shadowColor: '#000',\n shadowOffset: {width: 0, height: 4},\n shadowOpacity: 0.12,\n shadowRadius: 16,\n elevation: 8,\n backgroundColor: '#0000'\n },\n container: {\n minHeight: 80,\n backgroundColor: theme.colors.white,\n borderRadius: theme.radius.regular,\n overflow: 'hidden',\n flexDirection: 'row',\n alignItems: 'stretch'\n },\n textContainer: {\n paddingHorizontal: 24,\n paddingVertical: 12,\n justifyContent: 'center',\n alignItems: 'center',\n flex: 1\n },\n squeezedTextContainer: {\n padding: theme.spacing.small,\n paddingLeft: undefined,\n paddingVertical: undefined,\n paddingRight: undefined,\n flex: 0\n },\n text: {\n fontWeight: theme.fontWeight.bold,\n color: theme.colors.black\n },\n textSelected: {\n color: theme.colors.white\n },\n unselectedImageContainer: {\n borderRightColor: theme.colors.border\n },\n imageContainer: {\n height: '100%',\n width: '25%'\n },\n image: {\n flex: 1\n }\n });\n\nconst Choice = ({\n children,\n isSelected = false,\n squeezed = false,\n isDisabled,\n onPress,\n media,\n testID: prefixTestID,\n style,\n questionType\n}: Props) => {\n const templateContext = useTemplateContext();\n const {theme, brandTheme} = templateContext;\n\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 selectedStyle = brandTheme && {\n backgroundColor: brandTheme.colors.primary,\n borderColor: brandTheme.colors.primary,\n borderRadius: theme.radius.common\n };\n\n const selectedSuffix = prefixTestID && isSelected ? '-selected' : '';\n const mediaType = media && media.type && media.type === 'img' && media.type.toLowerCase();\n const url =\n media &&\n media.type === 'img' &&\n media.src &&\n media.src.length > 0 &&\n getCleanUri(media.src[0].url);\n\n const source = {uri: url ? getCleanUri(url) : undefined};\n const mediaSuffix = prefixTestID && mediaType ? `-${mediaType}` : '';\n\n const htmlStyle: ViewStyle[] = [styleSheet.text];\n\n if (isSelected) {\n htmlStyle.push(styleSheet.textSelected);\n }\n\n return (\n <Touchable\n onPress={!isDisabled ? onPress : undefined}\n style={style}\n analyticsID=\"question-choice\"\n analyticsParams={{questionType}}\n >\n <View\n style={[styleSheet.boxShadow, styleSheet.container]}\n testID={prefixTestID && `${prefixTestID}${selectedSuffix}`}\n >\n {url ? (\n <View style={styleSheet.imageContainer}>\n <ImageBackground\n testID={prefixTestID && `${prefixTestID}${mediaSuffix}`}\n source={source}\n style={styleSheet.image}\n />\n </View>\n ) : null}\n <View\n style={[\n styleSheet.textContainer,\n squeezed && styleSheet.squeezedTextContainer,\n isSelected && selectedStyle\n ]}\n >\n <Html\n fontSize={squeezed ? theme.fontSize.medium : theme.fontSize.regular}\n style={htmlStyle}\n >\n {children}\n </Html>\n </View>\n </View>\n </Touchable>\n );\n};\n\nexport default Choice;\n"],"file":"index.native.js"}
|
|
@@ -143,7 +143,8 @@ class DragAndDrop extends React.Component {
|
|
|
143
143
|
className: classnames(previewContainer, disabled && style.disabled)
|
|
144
144
|
}, previewView) : /*#__PURE__*/React.createElement("div", {
|
|
145
145
|
className: classnames(dragging ? style.dragging : inputWrapper, disabled && style.disabled),
|
|
146
|
-
id: idBox
|
|
146
|
+
id: idBox,
|
|
147
|
+
"data-name": "drag-and-drop-box"
|
|
147
148
|
}, /*#__PURE__*/React.createElement("div", {
|
|
148
149
|
className: style.infosContainer
|
|
149
150
|
}, error ? /*#__PURE__*/React.createElement(FileUploadBlockedIcon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","classnames","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","disabled","previewView","type","preview","src","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","position","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","wrapper","infosContainer","iconError","dragAndDropLabel","errorMessage","propTypes","string","shape","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, constant, isEmpty} from 'lodash/fp';\nimport {\n NovaSolidStatusClose as Close,\n NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n uploadLabel: PropTypes.string,\n previewLabel: PropTypes.string,\n previewContent: PropTypes.shape({\n type: PropTypes.string,\n src: PropTypes.string,\n label: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func,\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragging: false\n };\n\n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragStop = this.handleDragStop.bind(this);\n }\n\n handleDragStart() {\n this.setState({\n dragging: true\n });\n }\n\n handleDragStop() {\n this.setState({\n dragging: false\n });\n }\n\n render() {\n const idBox = uniqueId('drop-box-');\n const {\n children = constantNull,\n title,\n description,\n uploadLabel,\n previewLabel = '',\n previewContent,\n loading = false,\n modified = false,\n onReset = null,\n error = '',\n buttonAriaLabel = '',\n errorButtonLabel = '',\n disabled = false\n } = this.props;\n const {dragging} = this.state;\n\n let previewView = null;\n\n if (previewContent && previewContent.type === 'image') {\n previewView = (\n <div className={style.preview}>\n <img src={previewContent.src} />\n </div>\n );\n } else if (previewContent && previewContent.type === 'video') {\n previewView = (\n <div className={style.preview}>\n <video controls src={previewContent.src} type=\"video/*\" />\n </div>\n );\n } else if (loading) {\n previewView = (\n <div className={style.loaderWrapper}>\n <div className={style.loadingCancel}>\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n </div>\n <div className={style.loader}>\n <Loader theme=\"coorpmanager\" />\n </div>\n <span className={style.loaderText}>Uploading</span>\n </div>\n );\n } else {\n previewView = <span>{previewLabel}</span>;\n }\n\n const resetContent =\n previewContent && previewContent.src ? (\n <div className={classnames(style.resetUploadWrapper, disabled && style.disabled)}>\n <div className={style.resetSrcLabel}>\n {previewContent.label ? previewContent.label : previewContent.src}\n </div>\n {onReset ? (\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n ) : null}\n </div>\n ) : null;\n\n const buildButton = () => {\n const defaultButtonProps = {\n label: uploadLabel,\n 'aria-label': buttonAriaLabel,\n 'data-name': 'default-button',\n icon: {\n position: 'left',\n type: 'folders'\n }\n };\n if (dragging) {\n return null;\n } else if (error) {\n return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n } else {\n return <Button {...defaultButtonProps} />;\n }\n };\n\n const button = buildButton(dragging, error);\n\n const previewContainer = getClassState(\n style.previewContainer,\n style.modifiedPreviewContainer,\n null,\n modified,\n error\n );\n const inputWrapper = getClassState(\n style.inputWrapper,\n style.modifiedInputWrapper,\n style.errorInputWrapper,\n modified,\n error\n );\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n <div className={style.title}>{title}</div>\n {!isEmpty(previewContent) || loading ? (\n <div className={classnames(previewContainer, disabled && style.disabled)}>\n {previewView}\n </div>\n ) : (\n <div\n className={classnames(\n dragging ? style.dragging : inputWrapper,\n disabled && style.disabled\n )}\n id={idBox}\n >\n <div className={style.infosContainer}>\n {error ? (\n <FileUploadBlockedIcon className={style.iconError} />\n ) : (\n <FileUploadIcon className={style.icon} />\n )}\n {description ? <div className={style.description}>{description}</div> : null}\n {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n </div>\n {button}\n <div>{children(this.handleDragStart, this.handleDragStop)}</div>\n </div>\n )}\n {error ? (\n <span className={classnames(style.errorMessage, disabled && style.disabled)}>\n {error}\n </span>\n ) : (\n resetContent\n )}\n </div>\n );\n }\n}\n\nexport default DragAndDrop;\n"],"file":"index.js"}
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/drag-and-drop/index.js"],"names":["React","PropTypes","NovaSolidStatusClose","Close","NovaSolidFilesBasicFileUpload2","FileUploadIcon","NovaSolidFilesBasicFileBlock2","FileUploadBlockedIcon","classnames","Loader","Button","getClassState","style","constantNull","DragAndDrop","Component","constructor","props","state","dragging","handleDragStart","bind","handleDragStop","setState","render","idBox","children","title","description","uploadLabel","previewLabel","previewContent","loading","modified","onReset","error","buttonAriaLabel","errorButtonLabel","disabled","previewView","type","preview","src","loaderWrapper","loadingCancel","closeIcon","loader","loaderText","resetContent","resetUploadWrapper","resetSrcLabel","label","buildButton","defaultButtonProps","icon","position","button","previewContainer","modifiedPreviewContainer","inputWrapper","modifiedInputWrapper","errorInputWrapper","wrapper","infosContainer","iconError","dragAndDropLabel","errorMessage","propTypes","string","shape","bool","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {uniqueId, constant, isEmpty} from 'lodash/fp';\nimport {\n NovaSolidStatusClose as Close,\n NovaSolidFilesBasicFileUpload2 as FileUploadIcon,\n NovaSolidFilesBasicFileBlock2 as FileUploadBlockedIcon\n} from '@coorpacademy/nova-icons';\nimport classnames from 'classnames';\nimport Loader from '../loader';\nimport Button from '../button-link';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst constantNull = constant(null);\n\nclass DragAndDrop extends React.Component {\n static propTypes = {\n title: PropTypes.string,\n description: PropTypes.string,\n uploadLabel: PropTypes.string,\n previewLabel: PropTypes.string,\n previewContent: PropTypes.shape({\n type: PropTypes.string,\n src: PropTypes.string,\n label: PropTypes.string\n }),\n loading: PropTypes.bool,\n modified: PropTypes.bool,\n disabled: PropTypes.bool,\n children: PropTypes.func,\n onReset: PropTypes.func,\n error: PropTypes.string,\n buttonAriaLabel: PropTypes.string,\n errorButtonLabel: PropTypes.string\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n dragging: false\n };\n\n this.handleDragStart = this.handleDragStart.bind(this);\n this.handleDragStop = this.handleDragStop.bind(this);\n }\n\n handleDragStart() {\n this.setState({\n dragging: true\n });\n }\n\n handleDragStop() {\n this.setState({\n dragging: false\n });\n }\n\n render() {\n const idBox = uniqueId('drop-box-');\n const {\n children = constantNull,\n title,\n description,\n uploadLabel,\n previewLabel = '',\n previewContent,\n loading = false,\n modified = false,\n onReset = null,\n error = '',\n buttonAriaLabel = '',\n errorButtonLabel = '',\n disabled = false\n } = this.props;\n const {dragging} = this.state;\n\n let previewView = null;\n\n if (previewContent && previewContent.type === 'image') {\n previewView = (\n <div className={style.preview}>\n <img src={previewContent.src} />\n </div>\n );\n } else if (previewContent && previewContent.type === 'video') {\n previewView = (\n <div className={style.preview}>\n <video controls src={previewContent.src} type=\"video/*\" />\n </div>\n );\n } else if (loading) {\n previewView = (\n <div className={style.loaderWrapper}>\n <div className={style.loadingCancel}>\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n </div>\n <div className={style.loader}>\n <Loader theme=\"coorpmanager\" />\n </div>\n <span className={style.loaderText}>Uploading</span>\n </div>\n );\n } else {\n previewView = <span>{previewLabel}</span>;\n }\n\n const resetContent =\n previewContent && previewContent.src ? (\n <div className={classnames(style.resetUploadWrapper, disabled && style.disabled)}>\n <div className={style.resetSrcLabel}>\n {previewContent.label ? previewContent.label : previewContent.src}\n </div>\n {onReset ? (\n <Close\n data-name=\"reset-content-icon\"\n height={12}\n width={12}\n className={style.closeIcon}\n onClick={onReset}\n />\n ) : null}\n </div>\n ) : null;\n\n const buildButton = () => {\n const defaultButtonProps = {\n label: uploadLabel,\n 'aria-label': buttonAriaLabel,\n 'data-name': 'default-button',\n icon: {\n position: 'left',\n type: 'folders'\n }\n };\n if (dragging) {\n return null;\n } else if (error) {\n return <Button {...defaultButtonProps} label={errorButtonLabel} icon={{}} />;\n } else {\n return <Button {...defaultButtonProps} />;\n }\n };\n\n const button = buildButton(dragging, error);\n\n const previewContainer = getClassState(\n style.previewContainer,\n style.modifiedPreviewContainer,\n null,\n modified,\n error\n );\n const inputWrapper = getClassState(\n style.inputWrapper,\n style.modifiedInputWrapper,\n style.errorInputWrapper,\n modified,\n error\n );\n\n return (\n <div className={style.wrapper} data-name=\"drag-and-drop-wrapper\">\n <div className={style.title}>{title}</div>\n {!isEmpty(previewContent) || loading ? (\n <div className={classnames(previewContainer, disabled && style.disabled)}>\n {previewView}\n </div>\n ) : (\n <div\n className={classnames(\n dragging ? style.dragging : inputWrapper,\n disabled && style.disabled\n )}\n id={idBox}\n data-name=\"drag-and-drop-box\"\n >\n <div className={style.infosContainer}>\n {error ? (\n <FileUploadBlockedIcon className={style.iconError} />\n ) : (\n <FileUploadIcon className={style.icon} />\n )}\n {description ? <div className={style.description}>{description}</div> : null}\n {error ? null : <div className={style.dragAndDropLabel}>{'Drag & Drop here'}</div>}\n </div>\n {button}\n <div>{children(this.handleDragStart, this.handleDragStop)}</div>\n </div>\n )}\n {error ? (\n <span className={classnames(style.errorMessage, disabled && style.disabled)}>\n {error}\n </span>\n ) : (\n resetContent\n )}\n </div>\n );\n }\n}\n\nexport default DragAndDrop;\n"],"file":"index.js"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import LinearGradient from 'react-native-linear-gradient';
|
|
3
|
+
import Color from 'color';
|
|
4
|
+
|
|
5
|
+
const Gradient = ({
|
|
6
|
+
children,
|
|
7
|
+
colors,
|
|
8
|
+
transparencyPosition = 'top',
|
|
9
|
+
height,
|
|
10
|
+
style,
|
|
11
|
+
testID,
|
|
12
|
+
pointerEvents
|
|
13
|
+
}) => {
|
|
14
|
+
let calculatedColors = colors;
|
|
15
|
+
|
|
16
|
+
if (colors.length === 1) {
|
|
17
|
+
const {
|
|
18
|
+
r,
|
|
19
|
+
g,
|
|
20
|
+
b
|
|
21
|
+
} = Color(colors[0]).object();
|
|
22
|
+
calculatedColors = transparencyPosition === 'top' ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]] : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const _style = [];
|
|
26
|
+
|
|
27
|
+
if (style) {
|
|
28
|
+
_style.push(style);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
if (height) {
|
|
32
|
+
_style.push({
|
|
33
|
+
height
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
return /*#__PURE__*/React.createElement(LinearGradient, {
|
|
38
|
+
colors: calculatedColors,
|
|
39
|
+
style: _style,
|
|
40
|
+
pointerEvents: pointerEvents,
|
|
41
|
+
testID: testID
|
|
42
|
+
}, children);
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export default Gradient;
|
|
46
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/gradient/index.native.tsx"],"names":["React","LinearGradient","Color","Gradient","children","colors","transparencyPosition","height","style","testID","pointerEvents","calculatedColors","length","r","g","b","object","_style","push"],"mappings":"AAAA,OAAOA,KAAP,MAA+B,OAA/B;AAEA,OAAOC,cAAP,MAA2B,8BAA3B;AACA,OAAOC,KAAP,MAAkB,OAAlB;;AAYA,MAAMC,QAAQ,GAAG,CAAC;AAChBC,EAAAA,QADgB;AAEhBC,EAAAA,MAFgB;AAGhBC,EAAAA,oBAAoB,GAAG,KAHP;AAIhBC,EAAAA,MAJgB;AAKhBC,EAAAA,KALgB;AAMhBC,EAAAA,MANgB;AAOhBC,EAAAA;AAPgB,CAAD,KAQJ;AACX,MAAIC,gBAAgB,GAAGN,MAAvB;;AACA,MAAIA,MAAM,CAACO,MAAP,KAAkB,CAAtB,EAAyB;AACvB,UAAM;AAACC,MAAAA,CAAD;AAAIC,MAAAA,CAAJ;AAAOC,MAAAA;AAAP,QAAYb,KAAK,CAACG,MAAM,CAAC,CAAD,CAAP,CAAL,CAAiBW,MAAjB,EAAlB;AACAL,IAAAA,gBAAgB,GACdL,oBAAoB,KAAK,KAAzB,GACI,CAAE,QAAOO,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAAvB,EAA8BV,MAAM,CAAC,CAAD,CAApC,EAAyCA,MAAM,CAAC,CAAD,CAA/C,CADJ,GAEI,CAACA,MAAM,CAAC,CAAD,CAAP,EAAYA,MAAM,CAAC,CAAD,CAAlB,EAAwB,QAAOQ,CAAE,KAAIC,CAAE,KAAIC,CAAE,MAA7C,CAHN;AAID;;AAED,QAAME,MAAM,GAAG,EAAf;;AAEA,MAAIT,KAAJ,EAAW;AACTS,IAAAA,MAAM,CAACC,IAAP,CAAYV,KAAZ;AACD;;AACD,MAAID,MAAJ,EAAY;AACVU,IAAAA,MAAM,CAACC,IAAP,CAAY;AAACX,MAAAA;AAAD,KAAZ;AACD;;AAED,sBACE,oBAAC,cAAD;AACE,IAAA,MAAM,EAAEI,gBADV;AAEE,IAAA,KAAK,EAAEM,MAFT;AAGE,IAAA,aAAa,EAAEP,aAHjB;AAIE,IAAA,MAAM,EAAED;AAJV,KAMGL,QANH,CADF;AAUD,CArCD;;AAuCA,eAAeD,QAAf","sourcesContent":["import React, {ReactNode} from 'react';\nimport {ViewStyle} from 'react-native';\nimport LinearGradient from 'react-native-linear-gradient';\nimport Color from 'color';\n\nexport type Props = {\n children?: ReactNode;\n colors: Array<string>;\n transparencyPosition?: 'top' | 'bottom';\n height?: number;\n style?: ViewStyle | ViewStyle[] | undefined;\n testID?: string;\n pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only' | undefined;\n};\n\nconst Gradient = ({\n children,\n colors,\n transparencyPosition = 'top',\n height,\n style,\n testID,\n pointerEvents\n}: Props) => {\n let calculatedColors = colors;\n if (colors.length === 1) {\n const {r, g, b} = Color(colors[0]).object();\n calculatedColors =\n transparencyPosition === 'top'\n ? [`rgba(${r}, ${g}, ${b}, 0)`, colors[0], colors[0]]\n : [colors[0], colors[0], `rgba(${r}, ${g}, ${b}, 0)`];\n }\n\n const _style = [];\n\n if (style) {\n _style.push(style);\n }\n if (height) {\n _style.push({height});\n }\n\n return (\n <LinearGradient\n colors={calculatedColors}\n style={_style}\n pointerEvents={pointerEvents}\n testID={testID}\n >\n {children}\n </LinearGradient>\n );\n};\n\nexport default Gradient;\n"],"file":"index.native.js"}
|
|
@@ -8,7 +8,7 @@ export const HOME_ICON_HEIGHT = 20;
|
|
|
8
8
|
export const CLOSE_ICON_HEIGHT = 16;
|
|
9
9
|
export const BACK_ICON_HEIGHT = 20;
|
|
10
10
|
|
|
11
|
-
const createStyleSheet = (
|
|
11
|
+
const createStyleSheet = (theme, statusBarHeight) => StyleSheet.create({
|
|
12
12
|
container: {
|
|
13
13
|
paddingLeft: theme.spacing.base
|
|
14
14
|
},
|
|
@@ -26,7 +26,6 @@ const HeaderBackButton = props => {
|
|
|
26
26
|
const templateContext = useTemplateContext();
|
|
27
27
|
const [styleSheet, setStylesheet] = useState(null);
|
|
28
28
|
const {
|
|
29
|
-
brandTheme,
|
|
30
29
|
theme,
|
|
31
30
|
display: {
|
|
32
31
|
statusBarHeight
|
|
@@ -41,10 +40,10 @@ const HeaderBackButton = props => {
|
|
|
41
40
|
testID = 'default-header-back-button-test-id'
|
|
42
41
|
} = props;
|
|
43
42
|
useEffect(() => {
|
|
44
|
-
const _stylesheet = createStyleSheet(
|
|
43
|
+
const _stylesheet = createStyleSheet(theme, statusBarHeight);
|
|
45
44
|
|
|
46
45
|
setStylesheet(_stylesheet);
|
|
47
|
-
}, [
|
|
46
|
+
}, [theme, statusBarHeight]);
|
|
48
47
|
|
|
49
48
|
if (!styleSheet) {
|
|
50
49
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/atom/header-back-button/index.native.tsx"],"names":["React","useState","useEffect","View","StyleSheet","NovaSolidPlacesPlacesHome2","HomeIcon","NovaSolidStatusClose","CloseIcon","useTemplateContext","Touchable","HeaderBackIcon","HOME_ICON_HEIGHT","CLOSE_ICON_HEIGHT","BACK_ICON_HEIGHT","createStyleSheet","
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/header-back-button/index.native.tsx"],"names":["React","useState","useEffect","View","StyleSheet","NovaSolidPlacesPlacesHome2","HomeIcon","NovaSolidStatusClose","CloseIcon","useTemplateContext","Touchable","HeaderBackIcon","HOME_ICON_HEIGHT","CLOSE_ICON_HEIGHT","BACK_ICON_HEIGHT","createStyleSheet","theme","statusBarHeight","create","container","paddingLeft","spacing","base","floating","paddingTop","position","top","noSafeArea","HeaderBackButton","props","templateContext","styleSheet","setStylesheet","display","type","color","colors","white","onPress","isFloating","testID","_stylesheet"],"mappings":"AAAA,OAAOA,KAAP,IAAeC,QAAf,EAAyBC,SAAzB,QAAyC,OAAzC;AACA,SAAQC,IAAR,EAAcC,UAAd,QAA+B,cAA/B;AAGA,SACEC,0BAA0B,IAAIC,QADhC,EAEEC,oBAAoB,IAAIC,SAF1B,QAGO,0BAHP;AAIA,SAAQC,kBAAR,QAAiC,4CAAjC;AACA,OAAOC,SAAP,MAAsB,kCAAtB;AACA,OAAOC,cAAP,MAA2B,kCAA3B;AAGA,OAAO,MAAMC,gBAAgB,GAAG,EAAzB;AACP,OAAO,MAAMC,iBAAiB,GAAG,EAA1B;AACP,OAAO,MAAMC,gBAAgB,GAAG,EAAzB;;AAyBP,MAAMC,gBAAgB,GAAG,CAACC,KAAD,EAAeC,eAAf,KACvBb,UAAU,CAACc,MAAX,CAAkB;AAChBC,EAAAA,SAAS,EAAE;AACTC,IAAAA,WAAW,EAAEJ,KAAK,CAACK,OAAN,CAAcC;AADlB,GADK;AAIhBC,EAAAA,QAAQ,EAAE;AACRC,IAAAA,UAAU,EAAER,KAAK,CAACK,OAAN,CAAcC,IADlB;AAERG,IAAAA,QAAQ,EAAE,UAFF;AAGRC,IAAAA,GAAG,EAAET;AAHG,GAJM;AAShBU,EAAAA,UAAU,EAAE;AACVD,IAAAA,GAAG,EAAE;AADK;AATI,CAAlB,CADF;;AAeA,MAAME,gBAAgB,GAAIC,KAAD,IAAkB;AACzC,QAAMC,eAAe,GAAGrB,kBAAkB,EAA1C;AACA,QAAM,CAACsB,UAAD,EAAaC,aAAb,IAA8B/B,QAAQ,CAAwB,IAAxB,CAA5C;AACA,QAAM;AACJe,IAAAA,KADI;AAEJiB,IAAAA,OAAO,EAAE;AAAChB,MAAAA;AAAD;AAFL,MAGFa,eAHJ;AAKA,QAAM;AACJI,IAAAA,IADI;AAEJC,IAAAA,KAAK,GAAGnB,KAAK,CAACoB,MAAN,CAAaC,KAFjB;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,UAAU,GAAG,IAJT;AAKJZ,IAAAA,UAAU,GAAG,KALT;AAMJa,IAAAA,MAAM,GAAG;AANL,MAOFX,KAPJ;AASA3B,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMuC,WAAW,GAAG1B,gBAAgB,CAACC,KAAD,EAAQC,eAAR,CAApC;;AACAe,IAAAA,aAAa,CAACS,WAAD,CAAb;AACD,GAHQ,EAGN,CAACzB,KAAD,EAAQC,eAAR,CAHM,CAAT;;AAKA,MAAI,CAACc,UAAL,EAAiB;AACf,WAAO,IAAP;AACD;;AAED,sBACE,oBAAC,IAAD;AACE,IAAA,KAAK,EAAE,CACLA,UAAU,CAACZ,SADN,EAELoB,UAAU,IAAIR,UAAU,CAACR,QAFpB,EAGLgB,UAAU,IAAIZ,UAAd,IAA4BI,UAAU,CAACJ,UAHlC;AADT,kBAOE,oBAAC,SAAD;AAAW,IAAA,MAAM,EAAEa,MAAnB;AAA2B,IAAA,OAAO,EAAEF,OAApC;AAA6C,IAAA,WAAW,EAAC;AAAzD,KACGJ,IAAI,KAAK,MAAT,gBACC,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEtB,gBAAlB;AAAoC,IAAA,KAAK,EAAEA,gBAA3C;AAA6D,IAAA,KAAK,EAAEuB;AAApE,IADD,GAEG,IAHN,EAIGD,IAAI,KAAK,OAAT,gBACC,oBAAC,SAAD;AAAW,IAAA,MAAM,EAAErB,iBAAnB;AAAsC,IAAA,KAAK,EAAEA,iBAA7C;AAAgE,IAAA,KAAK,EAAEsB;AAAvE,IADD,GAEG,IANN,EAOGD,IAAI,KAAK,MAAT,gBACC,oBAAC,cAAD;AAAgB,IAAA,MAAM,EAAEpB,gBAAxB;AAA0C,IAAA,KAAK,EAAEA,gBAAjD;AAAmE,IAAA,KAAK,EAAEqB;AAA1E,IADD,GAEG,IATN,CAPF,CADF;AAqBD,CA/CD;;AAiDA,eAAeP,gBAAf","sourcesContent":["import React, {useState, useEffect} from 'react';\nimport {View, StyleSheet} from 'react-native';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport {\n NovaSolidPlacesPlacesHome2 as HomeIcon,\n NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Touchable from '../../hoc/touchable/index.native';\nimport HeaderBackIcon from '../header-back-icon/index.native';\nimport {Theme} from '../../variables/theme.native';\n\nexport const HOME_ICON_HEIGHT = 20;\nexport const CLOSE_ICON_HEIGHT = 16;\nexport const BACK_ICON_HEIGHT = 20;\n\nexport type Props = {\n type: 'close' | 'back' | 'home';\n color?: string;\n onPress?: (event: PressEvent) => any;\n isFloating?: boolean;\n noSafeArea?: boolean;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: {\n paddingLeft: number;\n };\n floating: {\n paddingTop: number;\n position: string;\n top: number;\n };\n noSafeArea: {\n top: 0;\n };\n};\n\nconst createStyleSheet = (theme: Theme, statusBarHeight: number) =>\n StyleSheet.create({\n container: {\n paddingLeft: theme.spacing.base\n },\n floating: {\n paddingTop: theme.spacing.base,\n position: 'absolute',\n top: statusBarHeight\n },\n noSafeArea: {\n top: 0\n }\n });\n\nconst HeaderBackButton = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {\n theme,\n display: {statusBarHeight}\n } = templateContext;\n\n const {\n type,\n color = theme.colors.white,\n onPress,\n isFloating = true,\n noSafeArea = false,\n testID = 'default-header-back-button-test-id'\n } = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme, statusBarHeight);\n setStylesheet(_stylesheet);\n }, [theme, statusBarHeight]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View\n style={[\n styleSheet.container,\n isFloating && styleSheet.floating,\n isFloating && noSafeArea && styleSheet.noSafeArea\n ]}\n >\n <Touchable testID={testID} onPress={onPress} analyticsID=\"button-close\">\n {type === 'home' ? (\n <HomeIcon height={HOME_ICON_HEIGHT} width={HOME_ICON_HEIGHT} color={color} />\n ) : null}\n {type === 'close' ? (\n <CloseIcon height={CLOSE_ICON_HEIGHT} width={CLOSE_ICON_HEIGHT} color={color} />\n ) : null}\n {type === 'back' ? (\n <HeaderBackIcon height={BACK_ICON_HEIGHT} width={BACK_ICON_HEIGHT} color={color} />\n ) : null}\n </Touchable>\n </View>\n );\n};\n\nexport default HeaderBackButton;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1,146 @@
|
|
|
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, { useMemo, useState } from 'react';
|
|
4
|
+
import { View } from 'react-native';
|
|
5
|
+
import HtmlBase from 'react-native-render-html';
|
|
6
|
+
import { HTML_ANCHOR_TEXT_COLOR } from '../../variables/theme.native';
|
|
7
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
8
|
+
import Text, { DEFAULT_STYLE as DEFAULT_TEXT_STYLE } from '../text/index.native';
|
|
9
|
+
|
|
10
|
+
const Html = props => {
|
|
11
|
+
const [disableBaseFontStyleColor, setDisableBaseFontStyleColor] = useState(false);
|
|
12
|
+
const templateContext = useTemplateContext();
|
|
13
|
+
const {
|
|
14
|
+
theme,
|
|
15
|
+
vibration
|
|
16
|
+
} = templateContext;
|
|
17
|
+
const {
|
|
18
|
+
children,
|
|
19
|
+
fontSize,
|
|
20
|
+
containerStyle,
|
|
21
|
+
imageStyle,
|
|
22
|
+
style,
|
|
23
|
+
testID,
|
|
24
|
+
anchorTextColor = HTML_ANCHOR_TEXT_COLOR,
|
|
25
|
+
isTextCentered,
|
|
26
|
+
numberOfLines,
|
|
27
|
+
onLinkPress
|
|
28
|
+
} = props;
|
|
29
|
+
const handleLinkPress = useMemo(() => url => {
|
|
30
|
+
vibration?.vibrate();
|
|
31
|
+
onLinkPress && onLinkPress(url);
|
|
32
|
+
}, [onLinkPress, vibration]); // Don't use StyleSheet there, it's not a react style
|
|
33
|
+
|
|
34
|
+
const styles = {
|
|
35
|
+
p: {
|
|
36
|
+
marginVertical: 0,
|
|
37
|
+
textAlign: 'center'
|
|
38
|
+
},
|
|
39
|
+
u: {
|
|
40
|
+
textDecorationLine: 'underline'
|
|
41
|
+
},
|
|
42
|
+
i: {
|
|
43
|
+
fontStyle: 'italic'
|
|
44
|
+
},
|
|
45
|
+
b: {
|
|
46
|
+
fontWeight: theme.fontWeight.bold
|
|
47
|
+
},
|
|
48
|
+
s: {
|
|
49
|
+
textDecorationLine: 'line-through'
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
const tagsStyles = _extends(_extends({}, styles), {}, {
|
|
54
|
+
h1: {
|
|
55
|
+
fontSize
|
|
56
|
+
},
|
|
57
|
+
h2: {
|
|
58
|
+
fontSize
|
|
59
|
+
},
|
|
60
|
+
h3: {
|
|
61
|
+
fontSize
|
|
62
|
+
},
|
|
63
|
+
h4: {
|
|
64
|
+
fontSize
|
|
65
|
+
},
|
|
66
|
+
h5: {
|
|
67
|
+
fontSize
|
|
68
|
+
},
|
|
69
|
+
h6: {
|
|
70
|
+
fontSize
|
|
71
|
+
},
|
|
72
|
+
a: {
|
|
73
|
+
color: anchorTextColor
|
|
74
|
+
},
|
|
75
|
+
img: imageStyle
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
let baseFontStyle = _extends(_extends({}, DEFAULT_TEXT_STYLE), {}, {
|
|
79
|
+
fontSize,
|
|
80
|
+
color: theme.colors.black
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
if (style) {
|
|
84
|
+
if (Array.isArray(style)) {
|
|
85
|
+
const styleObject = style.reduce((result, child) => _extends(_extends({}, result), child));
|
|
86
|
+
baseFontStyle = _extends(_extends({}, baseFontStyle), styleObject);
|
|
87
|
+
} else {
|
|
88
|
+
baseFontStyle = _extends(_extends({}, baseFontStyle), style);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
const renderers = {
|
|
93
|
+
// eslint-disable-next-line react/display-name
|
|
94
|
+
font: (htmlAttribs, _children) => {
|
|
95
|
+
if (htmlAttribs.color) {
|
|
96
|
+
setDisableBaseFontStyleColor(true);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
return /*#__PURE__*/React.createElement(Text, {
|
|
100
|
+
key: 1,
|
|
101
|
+
style: _extends(_extends({}, baseFontStyle), {}, {
|
|
102
|
+
color: htmlAttribs.color
|
|
103
|
+
})
|
|
104
|
+
}, _children);
|
|
105
|
+
},
|
|
106
|
+
span: function Span(_, _children, convertedCSSStyles, {
|
|
107
|
+
allowFontScaling,
|
|
108
|
+
key
|
|
109
|
+
}) {
|
|
110
|
+
return /*#__PURE__*/React.createElement(Text, {
|
|
111
|
+
numberOfLines: numberOfLines,
|
|
112
|
+
allowFontScaling: allowFontScaling,
|
|
113
|
+
key: key,
|
|
114
|
+
style: convertedCSSStyles
|
|
115
|
+
}, _children);
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
119
|
+
testID: testID,
|
|
120
|
+
style: containerStyle
|
|
121
|
+
}, /*#__PURE__*/React.createElement(HtmlBase // to text-align center on android
|
|
122
|
+
// we have to encapsulate between <p> tag
|
|
123
|
+
// and use custom style define on <p>
|
|
124
|
+
// definition in component style doesn't work
|
|
125
|
+
, {
|
|
126
|
+
source: {
|
|
127
|
+
// eslint-disable-next-line no-nested-ternary
|
|
128
|
+
html: isTextCentered ? `<p>${children}</p>` : numberOfLines ? `<span>${children}</span>` : `${children}`
|
|
129
|
+
},
|
|
130
|
+
tagsStyles: tagsStyles,
|
|
131
|
+
baseFontStyle: _extends(_extends({}, baseFontStyle), {}, {
|
|
132
|
+
color: disableBaseFontStyleColor ? null : baseFontStyle.color
|
|
133
|
+
}),
|
|
134
|
+
onLinkPress: handleLinkPress,
|
|
135
|
+
renderers: renderers // this is exceptionally for the onboarding course
|
|
136
|
+
// is the only course that has a gif in the context but the img tag
|
|
137
|
+
// comes with width & height attr and these makes this lib do not render the gif
|
|
138
|
+
// so to avoid it, we decided to ignore these attr
|
|
139
|
+
,
|
|
140
|
+
ignoredStyles: ['width', 'height'],
|
|
141
|
+
testID: "html-base"
|
|
142
|
+
}));
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
export default Html;
|
|
146
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/atom/html/index.native.tsx"],"names":["React","useMemo","useState","View","HtmlBase","HTML_ANCHOR_TEXT_COLOR","useTemplateContext","Text","DEFAULT_STYLE","DEFAULT_TEXT_STYLE","Html","props","disableBaseFontStyleColor","setDisableBaseFontStyleColor","templateContext","theme","vibration","children","fontSize","containerStyle","imageStyle","style","testID","anchorTextColor","isTextCentered","numberOfLines","onLinkPress","handleLinkPress","url","vibrate","styles","p","marginVertical","textAlign","u","textDecorationLine","i","fontStyle","b","fontWeight","bold","s","tagsStyles","h1","h2","h3","h4","h5","h6","a","color","img","baseFontStyle","colors","black","Array","isArray","styleObject","reduce","result","child","renderers","font","htmlAttribs","_children","span","Span","_","convertedCSSStyles","allowFontScaling","key","html"],"mappings":"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","sourcesContent":["import React, {useMemo, useState} from 'react';\nimport {View, ViewStyle, ImageStyle, TextStyle} from 'react-native';\nimport HtmlBase from 'react-native-render-html';\n\nimport {HTML_ANCHOR_TEXT_COLOR} from '../../variables/theme.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport Text, {DEFAULT_STYLE as DEFAULT_TEXT_STYLE} from '../text/index.native';\n\nexport type Props = {\n children: string;\n fontSize: TextStyle['fontSize'];\n numberOfLines?: number;\n onLinkPress?: (url: string) => void;\n containerStyle?: ViewStyle;\n anchorTextColor?: string;\n imageStyle?: ImageStyle;\n style?: ViewStyle | ViewStyle[];\n testID?: string;\n isTextCentered?: boolean;\n};\n\nconst Html = (props: Props) => {\n const [disableBaseFontStyleColor, setDisableBaseFontStyleColor] = useState<boolean>(false);\n const templateContext = useTemplateContext();\n const {theme, vibration} = templateContext;\n const {\n children,\n fontSize,\n containerStyle,\n imageStyle,\n style,\n testID,\n anchorTextColor = HTML_ANCHOR_TEXT_COLOR,\n isTextCentered,\n numberOfLines,\n onLinkPress\n } = props;\n\n const handleLinkPress = useMemo(\n () => (url: string) => {\n vibration?.vibrate();\n\n onLinkPress && onLinkPress(url);\n },\n [onLinkPress, vibration]\n );\n\n // Don't use StyleSheet there, it's not a react style\n const styles = {\n p: {\n marginVertical: 0,\n textAlign: 'center'\n },\n u: {\n textDecorationLine: 'underline'\n },\n i: {\n fontStyle: 'italic'\n },\n b: {\n fontWeight: theme.fontWeight.bold\n },\n s: {\n textDecorationLine: 'line-through'\n }\n };\n\n const tagsStyles = {\n ...styles,\n h1: {fontSize},\n h2: {fontSize},\n h3: {fontSize},\n h4: {fontSize},\n h5: {fontSize},\n h6: {fontSize},\n a: {color: anchorTextColor},\n img: imageStyle\n };\n\n let baseFontStyle = {...DEFAULT_TEXT_STYLE, fontSize, color: theme.colors.black};\n if (style) {\n if (Array.isArray(style)) {\n const styleObject = style.reduce((result, child) => ({\n ...result,\n ...child\n }));\n baseFontStyle = {\n ...baseFontStyle,\n ...styleObject\n };\n } else {\n baseFontStyle = {\n ...baseFontStyle,\n ...style\n };\n }\n }\n\n const renderers = {\n // eslint-disable-next-line react/display-name\n font: (htmlAttribs, _children) => {\n if (htmlAttribs.color) {\n setDisableBaseFontStyleColor(true);\n }\n return (\n <Text\n key={1}\n style={{\n ...baseFontStyle,\n color: htmlAttribs.color\n }}\n >\n {_children}\n </Text>\n );\n },\n span: function Span(\n _: any,\n _children: any,\n convertedCSSStyles: any,\n {allowFontScaling, key}: any\n ) {\n return (\n <Text\n numberOfLines={numberOfLines}\n allowFontScaling={allowFontScaling}\n key={key}\n style={convertedCSSStyles}\n >\n {_children}\n </Text>\n );\n }\n };\n\n return (\n <View testID={testID} style={containerStyle}>\n <HtmlBase\n // to text-align center on android\n // we have to encapsulate between <p> tag\n // and use custom style define on <p>\n // definition in component style doesn't work\n source={{\n // eslint-disable-next-line no-nested-ternary\n html: isTextCentered\n ? `<p>${children}</p>`\n : numberOfLines\n ? `<span>${children}</span>`\n : `${children}`\n }}\n tagsStyles={tagsStyles}\n baseFontStyle={{\n ...baseFontStyle,\n color: disableBaseFontStyleColor ? null : baseFontStyle.color\n }}\n onLinkPress={handleLinkPress}\n renderers={renderers}\n // this is exceptionally for the onboarding course\n // is the only course that has a gif in the context but the img tag\n // comes with width & height attr and these makes this lib do not render the gif\n // so to avoid it, we decided to ignore these attr\n ignoredStyles={['width', 'height']}\n testID=\"html-base\"\n />\n </View>\n );\n};\n\nexport default Html;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1,90 @@
|
|
|
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
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
4
|
+
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { ImageBackground as ImageBackgroundBase, StyleSheet } from 'react-native';
|
|
7
|
+
import getCleanUri from '../../util/get-clean-uri';
|
|
8
|
+
import getResizedImage from '../../util/get-resized-image';
|
|
9
|
+
import Gradient from '../gradient/index.native';
|
|
10
|
+
const styles = StyleSheet.create({
|
|
11
|
+
image: {
|
|
12
|
+
width: '100%',
|
|
13
|
+
height: '100%'
|
|
14
|
+
},
|
|
15
|
+
gradient: {
|
|
16
|
+
flex: 1
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
const ImageBackground = (_ref) => {
|
|
21
|
+
let {
|
|
22
|
+
source,
|
|
23
|
+
gradient,
|
|
24
|
+
gradientStyle,
|
|
25
|
+
style,
|
|
26
|
+
testID = 'image-background'
|
|
27
|
+
} = _ref,
|
|
28
|
+
props = _objectWithoutPropertiesLoose(_ref, ["source", "gradient", "gradientStyle", "style", "testID"]);
|
|
29
|
+
|
|
30
|
+
// @ts-ignore this statement is enough but type is too weak
|
|
31
|
+
let uri = source && source.uri;
|
|
32
|
+
|
|
33
|
+
if (uri) {
|
|
34
|
+
const {
|
|
35
|
+
width: _width,
|
|
36
|
+
height: _height,
|
|
37
|
+
resizeMode
|
|
38
|
+
} = props;
|
|
39
|
+
const {
|
|
40
|
+
width,
|
|
41
|
+
height
|
|
42
|
+
} = StyleSheet.flatten([{
|
|
43
|
+
width: _width,
|
|
44
|
+
height: _height
|
|
45
|
+
}, style]);
|
|
46
|
+
const maxHeight = typeof height === 'number' ? height : undefined;
|
|
47
|
+
const maxWidth = typeof width === 'number' ? width : undefined;
|
|
48
|
+
uri = getResizedImage(getCleanUri(uri), {
|
|
49
|
+
maxHeight,
|
|
50
|
+
maxWidth,
|
|
51
|
+
resizeMode
|
|
52
|
+
});
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
const resizedSource = uri && {
|
|
56
|
+
uri
|
|
57
|
+
} || source;
|
|
58
|
+
|
|
59
|
+
if (gradient) {
|
|
60
|
+
const {
|
|
61
|
+
children
|
|
62
|
+
} = props,
|
|
63
|
+
remainingProps = _objectWithoutPropertiesLoose(props, ["children"]);
|
|
64
|
+
|
|
65
|
+
const _style = [styles.gradient];
|
|
66
|
+
|
|
67
|
+
if (gradientStyle) {
|
|
68
|
+
_style.push(gradientStyle);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
return /*#__PURE__*/React.createElement(ImageBackgroundBase, _extends({}, remainingProps, {
|
|
72
|
+
source: resizedSource,
|
|
73
|
+
style: [styles.image, style],
|
|
74
|
+
testID: testID
|
|
75
|
+
}), /*#__PURE__*/React.createElement(Gradient, {
|
|
76
|
+
testID: `${testID}-gradient`,
|
|
77
|
+
colors: gradient,
|
|
78
|
+
style: _style
|
|
79
|
+
}, children));
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return /*#__PURE__*/React.createElement(ImageBackgroundBase, _extends({}, props, {
|
|
83
|
+
source: resizedSource,
|
|
84
|
+
style: [styles.image, style],
|
|
85
|
+
testID: testID
|
|
86
|
+
}));
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
export default ImageBackground;
|
|
90
|
+
//# sourceMappingURL=index.native.js.map
|