@coorpacademy/components 10.30.2 → 10.30.4-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/atom/text/index.native.d.ts +1 -0
- package/es/atom/text/index.native.d.ts.map +1 -1
- package/es/atom/text/index.native.js +4 -2
- package/es/atom/text/index.native.js.map +1 -1
- package/es/hoc/touchable/index.native.d.ts +1 -0
- package/es/hoc/touchable/index.native.d.ts.map +1 -1
- package/es/hoc/touchable/index.native.js.map +1 -1
- package/es/molecule/review-correction-popin/index.native.d.ts +5 -0
- package/es/molecule/review-correction-popin/index.native.d.ts.map +1 -0
- package/es/molecule/review-correction-popin/index.native.js +316 -0
- package/es/molecule/review-correction-popin/index.native.js.map +1 -0
- package/es/molecule/review-correction-popin/prop-types.d.ts +7 -5
- package/es/molecule/review-correction-popin/prop-types.d.ts.map +1 -1
- package/es/molecule/review-correction-popin/prop-types.js.map +1 -1
- package/es/organism/review-slide/index.native.d.ts.map +1 -1
- package/es/organism/review-slide/index.native.js +16 -15
- package/es/organism/review-slide/index.native.js.map +1 -1
- package/es/template/common/dashboard/index.d.ts +1 -0
- package/es/template/common/dashboard/index.d.ts.map +1 -1
- package/es/template/common/dashboard/index.js +13 -1
- package/es/template/common/dashboard/index.js.map +1 -1
- package/lib/atom/text/index.native.d.ts +1 -0
- package/lib/atom/text/index.native.d.ts.map +1 -1
- package/lib/atom/text/index.native.js +4 -2
- package/lib/atom/text/index.native.js.map +1 -1
- package/lib/hoc/touchable/index.native.d.ts +1 -0
- package/lib/hoc/touchable/index.native.d.ts.map +1 -1
- package/lib/hoc/touchable/index.native.js.map +1 -1
- package/lib/molecule/review-correction-popin/index.native.d.ts +5 -0
- package/lib/molecule/review-correction-popin/index.native.d.ts.map +1 -0
- package/lib/molecule/review-correction-popin/index.native.js +334 -0
- package/lib/molecule/review-correction-popin/index.native.js.map +1 -0
- package/lib/molecule/review-correction-popin/prop-types.d.ts +7 -5
- package/lib/molecule/review-correction-popin/prop-types.d.ts.map +1 -1
- package/lib/molecule/review-correction-popin/prop-types.js.map +1 -1
- package/lib/organism/review-slide/index.native.d.ts.map +1 -1
- package/lib/organism/review-slide/index.native.js +19 -16
- package/lib/organism/review-slide/index.native.js.map +1 -1
- package/lib/template/common/dashboard/index.d.ts +1 -0
- package/lib/template/common/dashboard/index.d.ts.map +1 -1
- package/lib/template/common/dashboard/index.js +13 -1
- package/lib/template/common/dashboard/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/text/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAyC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE/E,oBAAY,KAAK,GAAG;IAElB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/text/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAyC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE/E,oBAAY,KAAK,GAAG;IAElB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,aAAa;;CAMzB,CAAC;AAQF,QAAA,MAAM,IAAI,UAAW,KAAK,gBAqBzB,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -17,13 +17,15 @@ const Text = props => {
|
|
|
17
17
|
style,
|
|
18
18
|
testID,
|
|
19
19
|
numberOfLines,
|
|
20
|
-
allowFontScaling = true
|
|
20
|
+
allowFontScaling = true,
|
|
21
|
+
accessibilityLabel
|
|
21
22
|
} = props;
|
|
22
23
|
return /*#__PURE__*/React.createElement(TextBase, {
|
|
23
24
|
allowFontScaling: allowFontScaling,
|
|
24
25
|
style: [styles.text, style],
|
|
25
26
|
testID: testID,
|
|
26
|
-
numberOfLines: numberOfLines
|
|
27
|
+
numberOfLines: numberOfLines,
|
|
28
|
+
accessibilityLabel: accessibilityLabel
|
|
27
29
|
}, children);
|
|
28
30
|
};
|
|
29
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","names":["React","Text","TextBase","Platform","StyleSheet","DEFAULT_STYLE","select","android","fontFamily","styles","create","text","props","children","style","testID","numberOfLines","allowFontScaling"],"sources":["../../../src/atom/text/index.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport {Text as TextBase, Platform, StyleSheet, TextStyle} from 'react-native';\n\nexport type Props = {\n // copied from node_modules/react-native/Libraries/Text/TextProps.js\n children: React.ReactNode;\n style?: TextStyle | TextStyle[];\n testID?: string;\n numberOfLines?: number;\n allowFontScaling?: boolean;\n};\n\nexport const DEFAULT_STYLE = {\n ...Platform.select({\n android: {\n fontFamily: 'Roboto'\n }\n })\n};\n\nconst styles = StyleSheet.create({\n text: {\n ...DEFAULT_STYLE\n }\n});\n\nconst Text = (props: Props) => {\n const {children
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["React","Text","TextBase","Platform","StyleSheet","DEFAULT_STYLE","select","android","fontFamily","styles","create","text","props","children","style","testID","numberOfLines","allowFontScaling","accessibilityLabel"],"sources":["../../../src/atom/text/index.native.tsx"],"sourcesContent":["import * as React from 'react';\nimport {Text as TextBase, Platform, StyleSheet, TextStyle} from 'react-native';\n\nexport type Props = {\n // copied from node_modules/react-native/Libraries/Text/TextProps.js\n children: React.ReactNode;\n style?: TextStyle | TextStyle[];\n testID?: string;\n numberOfLines?: number;\n allowFontScaling?: boolean;\n accessibilityLabel?: string;\n};\n\nexport const DEFAULT_STYLE = {\n ...Platform.select({\n android: {\n fontFamily: 'Roboto'\n }\n })\n};\n\nconst styles = StyleSheet.create({\n text: {\n ...DEFAULT_STYLE\n }\n});\n\nconst Text = (props: Props) => {\n const {\n children,\n style,\n testID,\n numberOfLines,\n allowFontScaling = true,\n accessibilityLabel\n } = props;\n\n return (\n <TextBase\n allowFontScaling={allowFontScaling}\n style={[styles.text, style]}\n testID={testID}\n numberOfLines={numberOfLines}\n accessibilityLabel={accessibilityLabel}\n >\n {children}\n </TextBase>\n );\n};\n\nexport default Text;\n"],"mappings":";;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAAQC,IAAI,IAAIC,QAAhB,EAA0BC,QAA1B,EAAoCC,UAApC,QAAgE,cAAhE;AAYA,OAAO,MAAMC,aAAa,gBACrBF,QAAQ,CAACG,MAAT,CAAgB;EACjBC,OAAO,EAAE;IACPC,UAAU,EAAE;EADL;AADQ,CAAhB,CADqB,CAAnB;AAQP,MAAMC,MAAM,GAAGL,UAAU,CAACM,MAAX,CAAkB;EAC/BC,IAAI,eACCN,aADD;AAD2B,CAAlB,CAAf;;AAMA,MAAMJ,IAAI,GAAIW,KAAD,IAAkB;EAC7B,MAAM;IACJC,QADI;IAEJC,KAFI;IAGJC,MAHI;IAIJC,aAJI;IAKJC,gBAAgB,GAAG,IALf;IAMJC;EANI,IAOFN,KAPJ;EASA,oBACE,oBAAC,QAAD;IACE,gBAAgB,EAAEK,gBADpB;IAEE,KAAK,EAAE,CAACR,MAAM,CAACE,IAAR,EAAcG,KAAd,CAFT;IAGE,MAAM,EAAEC,MAHV;IAIE,aAAa,EAAEC,aAJjB;IAKE,kBAAkB,EAAEE;EALtB,GAOGL,QAPH,CADF;AAWD,CArBD;;AAuBA,eAAeZ,IAAf"}
|
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { Analytics, AnalyticsEventParams } from '../../variables/analytics';
|
|
4
4
|
import { Vibration } from '../../variables/vibration';
|
|
5
5
|
export declare type Props = {
|
|
6
|
+
accessibilityLabel?: string;
|
|
6
7
|
accessible?: boolean;
|
|
7
8
|
children?: React.ReactNode;
|
|
8
9
|
delayLongPress?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/hoc/touchable/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,aAAa,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAuB,SAAS,EAAE,oBAAoB,EAAC,MAAM,2BAA2B,CAAC;AAChG,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AASpD,oBAAY,KAAK,GAAG;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAeF,QAAA,MAAM,SAAS,UAAW,KAAK,gBAkE9B,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/hoc/touchable/index.native.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,SAAS,EACT,iBAAiB,EACjB,oBAAoB,EACpB,qBAAqB,EACrB,aAAa,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAuB,SAAS,EAAE,oBAAoB,EAAC,MAAM,2BAA2B,CAAC;AAChG,OAAO,EAAC,SAAS,EAAC,MAAM,2BAA2B,CAAC;AASpD,oBAAY,KAAK,GAAG;IAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC9C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,oBAAoB,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB,CAAC;AAeF,QAAA,MAAM,SAAS,UAAW,KAAK,gBAkE9B,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","names":["TouchableOpacity","TouchableHighlight","React","useMemo","useTemplateContext","ANALYTICS_EVENT_TYPE","hitSlop","left","right","bottom","top","logEvent","eventName","analyticsID","analytics","analyticsParams","id","Touchable","props","templateContext","theme","vibration","onPress","onLongPress","isWithoutFeedback","isHighlight","activeOpacity","disabled","handlePress","event","vibrate","PRESS","handleLongPress","LONG_PRESS","colors","gray","light"],"sources":["../../../src/hoc/touchable/index.native.tsx"],"sourcesContent":["import {\n TouchableOpacity,\n TouchableHighlight,\n ViewStyle,\n LayoutChangeEvent,\n NativeSyntheticEvent,\n GestureResponderEvent,\n TargetedEvent\n} from 'react-native';\n\nimport React, {useMemo} from 'react';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics, AnalyticsEventParams} from '../../variables/analytics';\nimport {Vibration} from '../../variables/vibration';\n\nconst hitSlop = {\n left: 12,\n right: 12,\n bottom: 12,\n top: 12\n};\n\nexport type Props = {\n accessible?: boolean;\n children?: React.ReactNode;\n delayLongPress?: number;\n delayPressIn?: number;\n delayPressOut?: number;\n disabled?: boolean;\n focusable?: boolean;\n onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;\n onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;\n onLayout?: (event: LayoutChangeEvent) => void;\n onLongPress?: (event: GestureResponderEvent) => void;\n onPress?: (event: GestureResponderEvent) => void;\n onPressIn?: (event: GestureResponderEvent) => void;\n onPressOut?: (event: GestureResponderEvent) => void;\n testID?: string;\n isHighlight?: boolean;\n isWithoutFeedback?: boolean;\n // for TouchableOpacity\n activeOpacity?: number;\n style?: ViewStyle;\n // Analytics\n analytics?: Analytics;\n analyticsID?: string;\n analyticsParams?: AnalyticsEventParams;\n vibration?: Vibration;\n};\n\nconst logEvent = (\n eventName: string,\n analyticsID: string,\n analytics: Analytics,\n analyticsParams?: AnalyticsEventParams\n) => {\n analytics &&\n analytics.logEvent(eventName, {\n ...(analyticsParams || {}),\n id: analyticsID\n });\n};\n\nconst Touchable = (props: Props) => {\n const templateContext = useTemplateContext();\n\n const {theme, vibration, analytics} = templateContext;\n\n const {\n analyticsID,\n analyticsParams,\n onPress,\n onLongPress,\n isWithoutFeedback,\n isHighlight,\n activeOpacity,\n disabled\n } = props;\n\n const handlePress = useMemo(\n () => (event: GestureResponderEvent) => {\n if (!onPress) return;\n\n vibration?.vibrate();\n\n analytics &&\n analyticsID &&\n logEvent(ANALYTICS_EVENT_TYPE.PRESS, analyticsID, analytics, analyticsParams);\n onPress(event);\n },\n [analytics, analyticsID, analyticsParams, onPress, vibration]\n );\n\n const handleLongPress = useMemo(\n () => (event: GestureResponderEvent) => {\n if (!onLongPress) return;\n\n vibration?.vibrate();\n\n analytics &&\n analyticsID &&\n logEvent(ANALYTICS_EVENT_TYPE.LONG_PRESS, analyticsID, analytics, analyticsParams);\n onLongPress(event);\n },\n [analytics, analyticsID, analyticsParams, onLongPress, vibration]\n );\n\n if (isHighlight) {\n return (\n <TouchableHighlight\n {...props}\n hitSlop={hitSlop}\n underlayColor={theme.colors.gray.light}\n onPress={handlePress}\n onLongPress={handleLongPress}\n activeOpacity={activeOpacity || (disabled ? 1 : 0.85)}\n />\n );\n }\n\n return (\n <TouchableOpacity\n {...props}\n hitSlop={hitSlop}\n onPress={handlePress}\n onLongPress={handleLongPress}\n activeOpacity={(isWithoutFeedback && 1) || activeOpacity || (disabled ? 1 : 0.2)}\n />\n );\n};\n\nexport default Touchable;\n"],"mappings":";;AAAA,SACEA,gBADF,EAEEC,kBAFF,QAQO,cARP;AAUA,OAAOC,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,SAAQC,kBAAR,QAAiC,4CAAjC;AACA,SAAQC,oBAAR,QAAoE,2BAApE;AAGA,MAAMC,OAAO,GAAG;EACdC,IAAI,EAAE,EADQ;EAEdC,KAAK,EAAE,EAFO;EAGdC,MAAM,EAAE,EAHM;EAIdC,GAAG,EAAE;AAJS,CAAhB;;
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["TouchableOpacity","TouchableHighlight","React","useMemo","useTemplateContext","ANALYTICS_EVENT_TYPE","hitSlop","left","right","bottom","top","logEvent","eventName","analyticsID","analytics","analyticsParams","id","Touchable","props","templateContext","theme","vibration","onPress","onLongPress","isWithoutFeedback","isHighlight","activeOpacity","disabled","handlePress","event","vibrate","PRESS","handleLongPress","LONG_PRESS","colors","gray","light"],"sources":["../../../src/hoc/touchable/index.native.tsx"],"sourcesContent":["import {\n TouchableOpacity,\n TouchableHighlight,\n ViewStyle,\n LayoutChangeEvent,\n NativeSyntheticEvent,\n GestureResponderEvent,\n TargetedEvent\n} from 'react-native';\n\nimport React, {useMemo} from 'react';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics, AnalyticsEventParams} from '../../variables/analytics';\nimport {Vibration} from '../../variables/vibration';\n\nconst hitSlop = {\n left: 12,\n right: 12,\n bottom: 12,\n top: 12\n};\n\nexport type Props = {\n accessibilityLabel?: string;\n accessible?: boolean;\n children?: React.ReactNode;\n delayLongPress?: number;\n delayPressIn?: number;\n delayPressOut?: number;\n disabled?: boolean;\n focusable?: boolean;\n onBlur?: (event: NativeSyntheticEvent<TargetedEvent>) => void;\n onFocus?: (event: NativeSyntheticEvent<TargetedEvent>) => void;\n onLayout?: (event: LayoutChangeEvent) => void;\n onLongPress?: (event: GestureResponderEvent) => void;\n onPress?: (event: GestureResponderEvent) => void;\n onPressIn?: (event: GestureResponderEvent) => void;\n onPressOut?: (event: GestureResponderEvent) => void;\n testID?: string;\n isHighlight?: boolean;\n isWithoutFeedback?: boolean;\n // for TouchableOpacity\n activeOpacity?: number;\n style?: ViewStyle;\n // Analytics\n analytics?: Analytics;\n analyticsID?: string;\n analyticsParams?: AnalyticsEventParams;\n vibration?: Vibration;\n};\n\nconst logEvent = (\n eventName: string,\n analyticsID: string,\n analytics: Analytics,\n analyticsParams?: AnalyticsEventParams\n) => {\n analytics &&\n analytics.logEvent(eventName, {\n ...(analyticsParams || {}),\n id: analyticsID\n });\n};\n\nconst Touchable = (props: Props) => {\n const templateContext = useTemplateContext();\n\n const {theme, vibration, analytics} = templateContext;\n\n const {\n analyticsID,\n analyticsParams,\n onPress,\n onLongPress,\n isWithoutFeedback,\n isHighlight,\n activeOpacity,\n disabled\n } = props;\n\n const handlePress = useMemo(\n () => (event: GestureResponderEvent) => {\n if (!onPress) return;\n\n vibration?.vibrate();\n\n analytics &&\n analyticsID &&\n logEvent(ANALYTICS_EVENT_TYPE.PRESS, analyticsID, analytics, analyticsParams);\n onPress(event);\n },\n [analytics, analyticsID, analyticsParams, onPress, vibration]\n );\n\n const handleLongPress = useMemo(\n () => (event: GestureResponderEvent) => {\n if (!onLongPress) return;\n\n vibration?.vibrate();\n\n analytics &&\n analyticsID &&\n logEvent(ANALYTICS_EVENT_TYPE.LONG_PRESS, analyticsID, analytics, analyticsParams);\n onLongPress(event);\n },\n [analytics, analyticsID, analyticsParams, onLongPress, vibration]\n );\n\n if (isHighlight) {\n return (\n <TouchableHighlight\n {...props}\n hitSlop={hitSlop}\n underlayColor={theme.colors.gray.light}\n onPress={handlePress}\n onLongPress={handleLongPress}\n activeOpacity={activeOpacity || (disabled ? 1 : 0.85)}\n />\n );\n }\n\n return (\n <TouchableOpacity\n {...props}\n hitSlop={hitSlop}\n onPress={handlePress}\n onLongPress={handleLongPress}\n activeOpacity={(isWithoutFeedback && 1) || activeOpacity || (disabled ? 1 : 0.2)}\n />\n );\n};\n\nexport default Touchable;\n"],"mappings":";;AAAA,SACEA,gBADF,EAEEC,kBAFF,QAQO,cARP;AAUA,OAAOC,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,SAAQC,kBAAR,QAAiC,4CAAjC;AACA,SAAQC,oBAAR,QAAoE,2BAApE;AAGA,MAAMC,OAAO,GAAG;EACdC,IAAI,EAAE,EADQ;EAEdC,KAAK,EAAE,EAFO;EAGdC,MAAM,EAAE,EAHM;EAIdC,GAAG,EAAE;AAJS,CAAhB;;AAoCA,MAAMC,QAAQ,GAAG,CACfC,SADe,EAEfC,WAFe,EAGfC,SAHe,EAIfC,eAJe,KAKZ;EACHD,SAAS,IACPA,SAAS,CAACH,QAAV,CAAmBC,SAAnB,eACMG,eAAe,IAAI,EADzB;IAEEC,EAAE,EAAEH;EAFN,GADF;AAKD,CAXD;;AAaA,MAAMI,SAAS,GAAIC,KAAD,IAAkB;EAClC,MAAMC,eAAe,GAAGf,kBAAkB,EAA1C;EAEA,MAAM;IAACgB,KAAD;IAAQC,SAAR;IAAmBP;EAAnB,IAAgCK,eAAtC;EAEA,MAAM;IACJN,WADI;IAEJE,eAFI;IAGJO,OAHI;IAIJC,WAJI;IAKJC,iBALI;IAMJC,WANI;IAOJC,aAPI;IAQJC;EARI,IASFT,KATJ;EAWA,MAAMU,WAAW,GAAGzB,OAAO,CACzB,MAAO0B,KAAD,IAAkC;IACtC,IAAI,CAACP,OAAL,EAAc;IAEdD,SAAS,EAAES,OAAX;IAEAhB,SAAS,IACPD,WADF,IAEEF,QAAQ,CAACN,oBAAoB,CAAC0B,KAAtB,EAA6BlB,WAA7B,EAA0CC,SAA1C,EAAqDC,eAArD,CAFV;IAGAO,OAAO,CAACO,KAAD,CAAP;EACD,CAVwB,EAWzB,CAACf,SAAD,EAAYD,WAAZ,EAAyBE,eAAzB,EAA0CO,OAA1C,EAAmDD,SAAnD,CAXyB,CAA3B;EAcA,MAAMW,eAAe,GAAG7B,OAAO,CAC7B,MAAO0B,KAAD,IAAkC;IACtC,IAAI,CAACN,WAAL,EAAkB;IAElBF,SAAS,EAAES,OAAX;IAEAhB,SAAS,IACPD,WADF,IAEEF,QAAQ,CAACN,oBAAoB,CAAC4B,UAAtB,EAAkCpB,WAAlC,EAA+CC,SAA/C,EAA0DC,eAA1D,CAFV;IAGAQ,WAAW,CAACM,KAAD,CAAX;EACD,CAV4B,EAW7B,CAACf,SAAD,EAAYD,WAAZ,EAAyBE,eAAzB,EAA0CQ,WAA1C,EAAuDF,SAAvD,CAX6B,CAA/B;;EAcA,IAAII,WAAJ,EAAiB;IACf,oBACE,oBAAC,kBAAD,eACMP,KADN;MAEE,OAAO,EAAEZ,OAFX;MAGE,aAAa,EAAEc,KAAK,CAACc,MAAN,CAAaC,IAAb,CAAkBC,KAHnC;MAIE,OAAO,EAAER,WAJX;MAKE,WAAW,EAAEI,eALf;MAME,aAAa,EAAEN,aAAa,KAAKC,QAAQ,GAAG,CAAH,GAAO,IAApB;IAN9B,GADF;EAUD;;EAED,oBACE,oBAAC,gBAAD,eACMT,KADN;IAEE,OAAO,EAAEZ,OAFX;IAGE,OAAO,EAAEsB,WAHX;IAIE,WAAW,EAAEI,eAJf;IAKE,aAAa,EAAGR,iBAAiB,IAAI,CAAtB,IAA4BE,aAA5B,KAA8CC,QAAQ,GAAG,CAAH,GAAO,GAA7D;EALjB,GADF;AASD,CAlED;;AAoEA,eAAeV,SAAf"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ReviewCorrectionPopinProps } from './prop-types';
|
|
3
|
+
declare const ReviewCorrectionPopin: ({ information, klf, next, type, resultLabel }: ReviewCorrectionPopinProps) => JSX.Element | null;
|
|
4
|
+
export default ReviewCorrectionPopin;
|
|
5
|
+
//# sourceMappingURL=index.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAgC,0BAA0B,EAAC,MAAM,cAAc,CAAC;AA4QvF,QAAA,MAAM,qBAAqB,kDAMxB,0BAA0B,uBAiD5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { Animated, Easing, StyleSheet, View } from 'react-native';
|
|
5
|
+
import { NovaCompositionCoorpacademyCheck as RightIcon, NovaSolidStatusClose as WrongIcon, NovaLineLoginKey1 as KlfIcon } from '@coorpacademy/nova-icons';
|
|
6
|
+
import Html from '../../atom/html/index.native';
|
|
7
|
+
import Text from '../../atom/text/index.native';
|
|
8
|
+
import Touchable from '../../hoc/touchable/index.native';
|
|
9
|
+
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
10
|
+
|
|
11
|
+
const createStyleSheet = (theme, type) => StyleSheet.create({
|
|
12
|
+
wrapper: {
|
|
13
|
+
height: 'auto',
|
|
14
|
+
color: theme.colors.white,
|
|
15
|
+
display: 'flex'
|
|
16
|
+
},
|
|
17
|
+
popin: {
|
|
18
|
+
padding: theme.spacing.medium,
|
|
19
|
+
borderRadius: 16,
|
|
20
|
+
display: 'flex',
|
|
21
|
+
flexDirection: 'column',
|
|
22
|
+
alignItems: 'flex-start',
|
|
23
|
+
backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,
|
|
24
|
+
shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,
|
|
25
|
+
shadowOpacity: 0.5,
|
|
26
|
+
shadowOffset: {
|
|
27
|
+
width: 0,
|
|
28
|
+
height: 0
|
|
29
|
+
},
|
|
30
|
+
shadowRadius: 15,
|
|
31
|
+
elevation: 4
|
|
32
|
+
},
|
|
33
|
+
correctionSection: {
|
|
34
|
+
flexDirection: 'row',
|
|
35
|
+
alignItems: 'center',
|
|
36
|
+
width: '80%'
|
|
37
|
+
},
|
|
38
|
+
iconCircle: {
|
|
39
|
+
width: 60,
|
|
40
|
+
height: 60,
|
|
41
|
+
alignItems: 'center',
|
|
42
|
+
justifyContent: 'center',
|
|
43
|
+
backgroundColor: theme.colors.white,
|
|
44
|
+
opacity: 0.7,
|
|
45
|
+
borderRadius: 50
|
|
46
|
+
},
|
|
47
|
+
icon: {
|
|
48
|
+
height: 30,
|
|
49
|
+
width: 30
|
|
50
|
+
},
|
|
51
|
+
resultLabel: {
|
|
52
|
+
color: theme.colors.white,
|
|
53
|
+
fontSize: 24,
|
|
54
|
+
fontWeight: '600',
|
|
55
|
+
lineHeight: 24,
|
|
56
|
+
marginLeft: 12,
|
|
57
|
+
textTransform: 'uppercase',
|
|
58
|
+
wordBreak: 'break-word'
|
|
59
|
+
},
|
|
60
|
+
feedbackSection: {
|
|
61
|
+
marginVertical: theme.spacing.medium
|
|
62
|
+
},
|
|
63
|
+
labelContainer: {
|
|
64
|
+
alignSelf: 'flex-start',
|
|
65
|
+
backgroundColor: 'rgba(255, 255, 255, 0.3)',
|
|
66
|
+
borderRadius: 56,
|
|
67
|
+
paddingHorizontal: theme.spacing.tiny,
|
|
68
|
+
paddingVertical: theme.spacing.micro,
|
|
69
|
+
marginBottom: 8
|
|
70
|
+
},
|
|
71
|
+
label: {
|
|
72
|
+
color: theme.colors.white,
|
|
73
|
+
fontSize: 14,
|
|
74
|
+
fontWeight: theme.fontWeight.extraBold,
|
|
75
|
+
lineHeight: 17,
|
|
76
|
+
wordBreak: 'break-word'
|
|
77
|
+
},
|
|
78
|
+
htmlInfoMessage: {
|
|
79
|
+
color: theme.colors.white,
|
|
80
|
+
fontSize: 16,
|
|
81
|
+
fontWeight: '600',
|
|
82
|
+
lineHeight: 19
|
|
83
|
+
},
|
|
84
|
+
button: {
|
|
85
|
+
alignSelf: 'stretch',
|
|
86
|
+
backgroundColor: theme.colors.white,
|
|
87
|
+
borderRadius: 7,
|
|
88
|
+
paddingHorizontal: theme.spacing.base,
|
|
89
|
+
paddingVertical: theme.spacing.small
|
|
90
|
+
},
|
|
91
|
+
buttonText: {
|
|
92
|
+
color: theme.colors.cta,
|
|
93
|
+
fontSize: 14,
|
|
94
|
+
fontWeight: theme.fontWeight.bold,
|
|
95
|
+
lineHeight: 20,
|
|
96
|
+
textAlign: 'center'
|
|
97
|
+
},
|
|
98
|
+
containerButtonKlf: {
|
|
99
|
+
width: '100%'
|
|
100
|
+
},
|
|
101
|
+
buttonKlf: {
|
|
102
|
+
flexDirection: 'row',
|
|
103
|
+
alignItems: 'center',
|
|
104
|
+
justifyContent: 'center',
|
|
105
|
+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
|
106
|
+
borderRadius: 7,
|
|
107
|
+
paddingHorizontal: theme.spacing.base,
|
|
108
|
+
paddingVertical: theme.spacing.small,
|
|
109
|
+
marginBottom: theme.spacing.tiny
|
|
110
|
+
},
|
|
111
|
+
buttonKlfActive: {
|
|
112
|
+
backgroundColor: 'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'
|
|
113
|
+
},
|
|
114
|
+
buttonKlfText: {
|
|
115
|
+
color: 'white',
|
|
116
|
+
fontSize: 14,
|
|
117
|
+
fontWeight: theme.fontWeight.bold,
|
|
118
|
+
lineHeight: 20,
|
|
119
|
+
textAlign: 'center'
|
|
120
|
+
},
|
|
121
|
+
iconKey: {
|
|
122
|
+
width: 12,
|
|
123
|
+
height: 12,
|
|
124
|
+
marginRight: theme.spacing.tiny
|
|
125
|
+
},
|
|
126
|
+
containerTooltip: {
|
|
127
|
+
zIndex: 30,
|
|
128
|
+
position: 'relative',
|
|
129
|
+
shadowColor: theme.colors.black,
|
|
130
|
+
shadowOpacity: 0.3,
|
|
131
|
+
shadowOffset: {
|
|
132
|
+
width: 0,
|
|
133
|
+
height: 0
|
|
134
|
+
},
|
|
135
|
+
shadowRadius: 8
|
|
136
|
+
},
|
|
137
|
+
buttonTooltip: {
|
|
138
|
+
flexDirection: 'column',
|
|
139
|
+
justifyContent: 'center',
|
|
140
|
+
backgroundColor: theme.colors.white,
|
|
141
|
+
borderRadius: 15,
|
|
142
|
+
padding: theme.spacing.small,
|
|
143
|
+
width: '112%',
|
|
144
|
+
position: 'absolute',
|
|
145
|
+
bottom: 4,
|
|
146
|
+
right: -15,
|
|
147
|
+
zIndex: 20
|
|
148
|
+
},
|
|
149
|
+
htmlTooltipText: {
|
|
150
|
+
color: theme.colors.text.primary,
|
|
151
|
+
fontSize: 16,
|
|
152
|
+
fontWeight: '600',
|
|
153
|
+
lineHeight: 22,
|
|
154
|
+
textAlign: 'center'
|
|
155
|
+
},
|
|
156
|
+
triangleTooltip: {
|
|
157
|
+
width: 0,
|
|
158
|
+
height: 0,
|
|
159
|
+
backgroundColor: 'transparent',
|
|
160
|
+
borderStyle: 'solid',
|
|
161
|
+
borderLeftWidth: 13,
|
|
162
|
+
borderRightWidth: 13,
|
|
163
|
+
borderBottomWidth: 13,
|
|
164
|
+
borderTopWidth: 13,
|
|
165
|
+
borderLeftColor: 'transparent',
|
|
166
|
+
borderTopColor: 'transparent',
|
|
167
|
+
borderRightColor: theme.colors.white,
|
|
168
|
+
borderBottomColor: theme.colors.white,
|
|
169
|
+
transform: [{
|
|
170
|
+
rotate: '45deg'
|
|
171
|
+
}],
|
|
172
|
+
position: 'absolute',
|
|
173
|
+
left: 110,
|
|
174
|
+
top: -20,
|
|
175
|
+
borderRadius: 4
|
|
176
|
+
}
|
|
177
|
+
});
|
|
178
|
+
|
|
179
|
+
const KlfButton = ({
|
|
180
|
+
klf,
|
|
181
|
+
styleSheet
|
|
182
|
+
}) => {
|
|
183
|
+
const [displayTooltip, setDisplayTooltip] = useState(false);
|
|
184
|
+
const fadeAnim = useRef(new Animated.Value(0)).current;
|
|
185
|
+
const fadeIn = useCallback(() => {
|
|
186
|
+
Animated.timing(fadeAnim, {
|
|
187
|
+
toValue: 1,
|
|
188
|
+
duration: 1000,
|
|
189
|
+
easing: Easing.bezier(0.25, 1, 0.5, 1),
|
|
190
|
+
useNativeDriver: true
|
|
191
|
+
}).start();
|
|
192
|
+
}, [fadeAnim]);
|
|
193
|
+
const fadeOut = useCallback(() => {
|
|
194
|
+
Animated.timing(fadeAnim, {
|
|
195
|
+
toValue: 0,
|
|
196
|
+
duration: 500,
|
|
197
|
+
easing: Easing.bezier(0.25, 1, 0.5, 1),
|
|
198
|
+
useNativeDriver: true
|
|
199
|
+
}).start();
|
|
200
|
+
}, [fadeAnim]);
|
|
201
|
+
const handlePressKey = useCallback(() => {
|
|
202
|
+
setDisplayTooltip(!displayTooltip);
|
|
203
|
+
!displayTooltip ? fadeIn() : fadeOut();
|
|
204
|
+
}, [displayTooltip, fadeIn, fadeOut]);
|
|
205
|
+
const {
|
|
206
|
+
buttonKlf,
|
|
207
|
+
buttonKlfActive,
|
|
208
|
+
buttonKlfText,
|
|
209
|
+
containerButtonKlf,
|
|
210
|
+
containerTooltip,
|
|
211
|
+
buttonTooltip,
|
|
212
|
+
htmlTooltipText,
|
|
213
|
+
iconKey,
|
|
214
|
+
triangleTooltip
|
|
215
|
+
} = styleSheet;
|
|
216
|
+
const {
|
|
217
|
+
label,
|
|
218
|
+
tooltip
|
|
219
|
+
} = klf;
|
|
220
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
221
|
+
style: containerButtonKlf
|
|
222
|
+
}, /*#__PURE__*/React.createElement(Animated.View, {
|
|
223
|
+
style: [containerTooltip, {
|
|
224
|
+
opacity: fadeAnim
|
|
225
|
+
}]
|
|
226
|
+
}, /*#__PURE__*/React.createElement(Touchable, {
|
|
227
|
+
style: buttonTooltip,
|
|
228
|
+
accessibilityLabel: `aria-label-tooltip`,
|
|
229
|
+
isHighlight: true,
|
|
230
|
+
onPress: handlePressKey,
|
|
231
|
+
testID: "button-tooltip"
|
|
232
|
+
}, /*#__PURE__*/React.createElement(Html, {
|
|
233
|
+
style: htmlTooltipText
|
|
234
|
+
}, tooltip)), /*#__PURE__*/React.createElement(View, {
|
|
235
|
+
style: triangleTooltip
|
|
236
|
+
})), /*#__PURE__*/React.createElement(Touchable, {
|
|
237
|
+
style: displayTooltip ? _extends({}, buttonKlf, buttonKlfActive) : buttonKlf,
|
|
238
|
+
accessibilityLabel: `aria-label-${label}`,
|
|
239
|
+
onPress: handlePressKey,
|
|
240
|
+
testID: "button-klf"
|
|
241
|
+
}, /*#__PURE__*/React.createElement(KlfIcon, {
|
|
242
|
+
style: iconKey,
|
|
243
|
+
color: "white"
|
|
244
|
+
}), /*#__PURE__*/React.createElement(Text, {
|
|
245
|
+
style: buttonKlfText
|
|
246
|
+
}, label)));
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
const ICONS = {
|
|
250
|
+
right: RightIcon,
|
|
251
|
+
wrong: WrongIcon
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
const ReviewCorrectionPopin = ({
|
|
255
|
+
information,
|
|
256
|
+
klf,
|
|
257
|
+
next,
|
|
258
|
+
type,
|
|
259
|
+
resultLabel
|
|
260
|
+
}) => {
|
|
261
|
+
const templateContext = useTemplateContext();
|
|
262
|
+
const [styleSheet, setStylesheet] = useState(null);
|
|
263
|
+
const {
|
|
264
|
+
theme
|
|
265
|
+
} = templateContext;
|
|
266
|
+
const handlePressNext = next.onClick;
|
|
267
|
+
const Icon = ICONS[type];
|
|
268
|
+
useEffect(() => {
|
|
269
|
+
const _stylesheet = createStyleSheet(theme, type);
|
|
270
|
+
|
|
271
|
+
setStylesheet(_stylesheet);
|
|
272
|
+
}, [theme, type]);
|
|
273
|
+
|
|
274
|
+
if (!styleSheet) {
|
|
275
|
+
return null;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
279
|
+
style: styleSheet.wrapper
|
|
280
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
281
|
+
style: styleSheet.popin
|
|
282
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
283
|
+
style: styleSheet.correctionSection
|
|
284
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
285
|
+
style: styleSheet.iconCircle
|
|
286
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
287
|
+
style: styleSheet.icon,
|
|
288
|
+
color: type === 'wrong' ? theme.colors.negative : theme.colors.positive
|
|
289
|
+
})), /*#__PURE__*/React.createElement(Text, {
|
|
290
|
+
style: styleSheet.resultLabel
|
|
291
|
+
}, resultLabel)), /*#__PURE__*/React.createElement(View, {
|
|
292
|
+
style: styleSheet.feedbackSection,
|
|
293
|
+
accessibilityLabel: "answer-information"
|
|
294
|
+
}, /*#__PURE__*/React.createElement(View, {
|
|
295
|
+
style: styleSheet.labelContainer,
|
|
296
|
+
needsOffscreenAlphaCompositing: true
|
|
297
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
298
|
+
accessibilityLabel: information.label,
|
|
299
|
+
style: styleSheet.label
|
|
300
|
+
}, information.label)), /*#__PURE__*/React.createElement(Html, {
|
|
301
|
+
style: styleSheet.htmlInfoMessage
|
|
302
|
+
}, information.message)), klf && type === 'wrong' ? /*#__PURE__*/React.createElement(KlfButton, {
|
|
303
|
+
styleSheet: styleSheet,
|
|
304
|
+
klf: klf
|
|
305
|
+
}) : null, /*#__PURE__*/React.createElement(Touchable, {
|
|
306
|
+
style: styleSheet.button,
|
|
307
|
+
onPress: handlePressNext,
|
|
308
|
+
accessibilityLabel: next['aria-label'],
|
|
309
|
+
testID: next['data-name']
|
|
310
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
311
|
+
style: styleSheet.buttonText
|
|
312
|
+
}, next.label))));
|
|
313
|
+
};
|
|
314
|
+
|
|
315
|
+
export default ReviewCorrectionPopin;
|
|
316
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.native.js","names":["React","useCallback","useEffect","useRef","useState","Animated","Easing","StyleSheet","View","NovaCompositionCoorpacademyCheck","RightIcon","NovaSolidStatusClose","WrongIcon","NovaLineLoginKey1","KlfIcon","Html","Text","Touchable","useTemplateContext","createStyleSheet","theme","type","create","wrapper","height","color","colors","white","display","popin","padding","spacing","medium","borderRadius","flexDirection","alignItems","backgroundColor","negative","positive","shadowColor","shadowOpacity","shadowOffset","width","shadowRadius","elevation","correctionSection","iconCircle","justifyContent","opacity","icon","resultLabel","fontSize","fontWeight","lineHeight","marginLeft","textTransform","wordBreak","feedbackSection","marginVertical","labelContainer","alignSelf","paddingHorizontal","tiny","paddingVertical","micro","marginBottom","label","extraBold","htmlInfoMessage","button","base","small","buttonText","cta","bold","textAlign","containerButtonKlf","buttonKlf","buttonKlfActive","buttonKlfText","iconKey","marginRight","containerTooltip","zIndex","position","black","buttonTooltip","bottom","right","htmlTooltipText","text","primary","triangleTooltip","borderStyle","borderLeftWidth","borderRightWidth","borderBottomWidth","borderTopWidth","borderLeftColor","borderTopColor","borderRightColor","borderBottomColor","transform","rotate","left","top","KlfButton","klf","styleSheet","displayTooltip","setDisplayTooltip","fadeAnim","Value","current","fadeIn","timing","toValue","duration","easing","bezier","useNativeDriver","start","fadeOut","handlePressKey","tooltip","ICONS","wrong","ReviewCorrectionPopin","information","next","templateContext","setStylesheet","handlePressNext","onClick","Icon","_stylesheet","message"],"sources":["../../../src/molecule/review-correction-popin/index.native.tsx"],"sourcesContent":["import React, {useCallback, useEffect, useRef, useState} from 'react';\nimport {Animated, Easing, TextStyle, StyleSheet, View, ViewStyle} from 'react-native';\nimport {\n NovaCompositionCoorpacademyCheck as RightIcon,\n NovaSolidStatusClose as WrongIcon,\n NovaLineLoginKey1 as KlfIcon\n} from '@coorpacademy/nova-icons';\nimport Html from '../../atom/html/index.native';\nimport {Theme} from '../../variables/theme.native';\nimport Text from '../../atom/text/index.native';\nimport Touchable from '../../hoc/touchable/index.native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {ReviewCorrectionPopinKLFProps, ReviewCorrectionPopinProps} from './prop-types';\n\ninterface StyleSheetType {\n wrapper: ViewStyle;\n popin: ViewStyle;\n correctionSection: ViewStyle;\n iconCircle: ViewStyle;\n icon: ViewStyle;\n resultLabel: TextStyle;\n feedbackSection: ViewStyle;\n labelContainer: ViewStyle;\n label: TextStyle;\n htmlInfoMessage: TextStyle;\n button: ViewStyle;\n buttonText: TextStyle;\n buttonKlf: ViewStyle;\n buttonKlfActive: TextStyle;\n buttonKlfText: TextStyle;\n iconKey: ViewStyle;\n containerTooltip: ViewStyle;\n buttonTooltip: ViewStyle;\n containerButtonKlf: ViewStyle;\n triangleTooltip: ViewStyle;\n htmlTooltipText: TextStyle;\n}\n\nconst createStyleSheet = (theme: Theme, type: string): StyleSheetType =>\n StyleSheet.create({\n wrapper: {\n height: 'auto',\n color: theme.colors.white,\n display: 'flex'\n },\n popin: {\n padding: theme.spacing.medium,\n borderRadius: 16,\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'flex-start',\n backgroundColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n shadowColor: type === 'wrong' ? theme.colors.negative : theme.colors.positive,\n shadowOpacity: 0.5,\n shadowOffset: {width: 0, height: 0},\n shadowRadius: 15,\n elevation: 4\n },\n correctionSection: {\n flexDirection: 'row',\n alignItems: 'center',\n width: '80%'\n },\n iconCircle: {\n width: 60,\n height: 60,\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: theme.colors.white,\n opacity: 0.7,\n borderRadius: 50\n },\n icon: {\n height: 30,\n width: 30\n },\n resultLabel: {\n color: theme.colors.white,\n fontSize: 24,\n fontWeight: '600',\n lineHeight: 24,\n marginLeft: 12,\n textTransform: 'uppercase',\n wordBreak: 'break-word'\n },\n feedbackSection: {\n marginVertical: theme.spacing.medium\n },\n labelContainer: {\n alignSelf: 'flex-start',\n backgroundColor: 'rgba(255, 255, 255, 0.3)',\n borderRadius: 56,\n paddingHorizontal: theme.spacing.tiny,\n paddingVertical: theme.spacing.micro,\n marginBottom: 8\n },\n label: {\n color: theme.colors.white,\n fontSize: 14,\n fontWeight: theme.fontWeight.extraBold,\n lineHeight: 17,\n wordBreak: 'break-word'\n },\n htmlInfoMessage: {\n color: theme.colors.white,\n fontSize: 16,\n fontWeight: '600',\n lineHeight: 19\n },\n button: {\n alignSelf: 'stretch',\n backgroundColor: theme.colors.white,\n borderRadius: 7,\n paddingHorizontal: theme.spacing.base,\n paddingVertical: theme.spacing.small\n },\n buttonText: {\n color: theme.colors.cta,\n fontSize: 14,\n fontWeight: theme.fontWeight.bold,\n lineHeight: 20,\n textAlign: 'center'\n },\n containerButtonKlf: {\n width: '100%'\n },\n buttonKlf: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n backgroundColor: 'rgba(255, 255, 255, 0.1)',\n borderRadius: 7,\n paddingHorizontal: theme.spacing.base,\n paddingVertical: theme.spacing.small,\n marginBottom: theme.spacing.tiny\n },\n buttonKlfActive: {\n backgroundColor:\n 'linear-gradient(0deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), rgba(255, 255, 255, 0.1)'\n },\n buttonKlfText: {\n color: 'white',\n fontSize: 14,\n fontWeight: theme.fontWeight.bold,\n lineHeight: 20,\n textAlign: 'center'\n },\n iconKey: {\n width: 12,\n height: 12,\n marginRight: theme.spacing.tiny\n },\n containerTooltip: {\n zIndex: 30,\n position: 'relative',\n shadowColor: theme.colors.black,\n shadowOpacity: 0.3,\n shadowOffset: {width: 0, height: 0},\n shadowRadius: 8\n },\n buttonTooltip: {\n flexDirection: 'column',\n justifyContent: 'center',\n backgroundColor: theme.colors.white,\n borderRadius: 15,\n padding: theme.spacing.small,\n width: '112%',\n position: 'absolute',\n bottom: 4,\n right: -15,\n zIndex: 20\n },\n htmlTooltipText: {\n color: theme.colors.text.primary,\n fontSize: 16,\n fontWeight: '600',\n lineHeight: 22,\n textAlign: 'center'\n },\n triangleTooltip: {\n width: 0,\n height: 0,\n backgroundColor: 'transparent',\n borderStyle: 'solid',\n borderLeftWidth: 13,\n borderRightWidth: 13,\n borderBottomWidth: 13,\n borderTopWidth: 13,\n borderLeftColor: 'transparent',\n borderTopColor: 'transparent',\n borderRightColor: theme.colors.white,\n borderBottomColor: theme.colors.white,\n transform: [{rotate: '45deg'}],\n position: 'absolute',\n left: 110,\n top: -20,\n borderRadius: 4\n }\n });\n\nconst KlfButton = ({\n klf,\n styleSheet\n}: {\n klf: ReviewCorrectionPopinKLFProps;\n styleSheet: StyleSheetType;\n}) => {\n const [displayTooltip, setDisplayTooltip] = useState(false);\n\n const fadeAnim = useRef(new Animated.Value(0)).current;\n\n const fadeIn = useCallback(() => {\n Animated.timing(fadeAnim, {\n toValue: 1,\n duration: 1000,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true\n }).start();\n }, [fadeAnim]);\n\n const fadeOut = useCallback(() => {\n Animated.timing(fadeAnim, {\n toValue: 0,\n duration: 500,\n easing: Easing.bezier(0.25, 1, 0.5, 1),\n useNativeDriver: true\n }).start();\n }, [fadeAnim]);\n\n const handlePressKey = useCallback(() => {\n setDisplayTooltip(!displayTooltip);\n !displayTooltip ? fadeIn() : fadeOut();\n }, [displayTooltip, fadeIn, fadeOut]);\n\n const {\n buttonKlf,\n buttonKlfActive,\n buttonKlfText,\n containerButtonKlf,\n containerTooltip,\n buttonTooltip,\n htmlTooltipText,\n iconKey,\n triangleTooltip\n } = styleSheet;\n\n const {label, tooltip} = klf;\n\n return (\n <View style={containerButtonKlf}>\n <Animated.View style={[containerTooltip, {opacity: fadeAnim}]}>\n <Touchable\n style={buttonTooltip}\n accessibilityLabel={`aria-label-tooltip`}\n isHighlight\n onPress={handlePressKey}\n testID=\"button-tooltip\"\n >\n <Html style={htmlTooltipText}>{tooltip}</Html>\n </Touchable>\n <View style={triangleTooltip} />\n </Animated.View>\n <Touchable\n style={displayTooltip ? {...buttonKlf, ...buttonKlfActive} : buttonKlf}\n accessibilityLabel={`aria-label-${label}`}\n onPress={handlePressKey}\n testID=\"button-klf\"\n >\n <KlfIcon style={iconKey} color=\"white\" />\n <Text style={buttonKlfText}>{label}</Text>\n </Touchable>\n </View>\n );\n};\n\nconst ICONS = {\n right: RightIcon,\n wrong: WrongIcon\n};\n\nconst ReviewCorrectionPopin = ({\n information,\n klf,\n next,\n type,\n resultLabel\n}: ReviewCorrectionPopinProps) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n const handlePressNext = next.onClick;\n\n const Icon = ICONS[type];\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme, type);\n setStylesheet(_stylesheet);\n }, [theme, type]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={styleSheet.wrapper}>\n <View style={styleSheet.popin}>\n <View style={styleSheet.correctionSection}>\n <View style={styleSheet.iconCircle}>\n <Icon\n style={styleSheet.icon}\n color={type === 'wrong' ? theme.colors.negative : theme.colors.positive}\n />\n </View>\n <Text style={styleSheet.resultLabel}>{resultLabel}</Text>\n </View>\n <View style={styleSheet.feedbackSection} accessibilityLabel=\"answer-information\">\n <View style={styleSheet.labelContainer} needsOffscreenAlphaCompositing>\n <Text accessibilityLabel={information.label} style={styleSheet.label}>\n {information.label}\n </Text>\n </View>\n <Html style={styleSheet.htmlInfoMessage}>{information.message}</Html>\n </View>\n {klf && type === 'wrong' ? <KlfButton styleSheet={styleSheet} klf={klf} /> : null}\n <Touchable\n style={styleSheet.button}\n onPress={handlePressNext}\n accessibilityLabel={next['aria-label']}\n testID={next['data-name']}\n >\n <Text style={styleSheet.buttonText}>{next.label}</Text>\n </Touchable>\n </View>\n </View>\n );\n};\n\nexport default ReviewCorrectionPopin;\n"],"mappings":"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"}
|
|
@@ -17,11 +17,12 @@ declare const propTypes: {
|
|
|
17
17
|
tooltip: PropTypes.Requireable<string>;
|
|
18
18
|
}>>;
|
|
19
19
|
};
|
|
20
|
+
export declare type ReviewCorrectionPopinKLFProps = {
|
|
21
|
+
label: string;
|
|
22
|
+
tooltip: string;
|
|
23
|
+
};
|
|
20
24
|
export declare type ReviewCorrectionPopinProps = {
|
|
21
|
-
klf?:
|
|
22
|
-
label: string;
|
|
23
|
-
tooltip: string;
|
|
24
|
-
};
|
|
25
|
+
klf?: ReviewCorrectionPopinKLFProps;
|
|
25
26
|
information: {
|
|
26
27
|
label: string;
|
|
27
28
|
message: string;
|
|
@@ -29,7 +30,8 @@ export declare type ReviewCorrectionPopinProps = {
|
|
|
29
30
|
next: {
|
|
30
31
|
label: string;
|
|
31
32
|
onClick: () => void;
|
|
32
|
-
'
|
|
33
|
+
'data-name'?: string;
|
|
34
|
+
'aria-label': string;
|
|
33
35
|
};
|
|
34
36
|
resultLabel: string;
|
|
35
37
|
type: 'right' | 'wrong';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAiBd,CAAC;AAEF,oBAAY,
|
|
1
|
+
{"version":3,"file":"prop-types.d.ts","sourceRoot":"","sources":["../../../src/molecule/review-correction-popin/prop-types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;CAiBd,CAAC;AAEF,oBAAY,6BAA6B,GAAG;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,0BAA0B,GAAG;IACvC,GAAG,CAAC,EAAE,6BAA6B,CAAC;IACpC,WAAW,EAAE;QACX,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;CACzB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","type","oneOf","resultLabel","string","information","shape","label","message","next","onClick","func","klf","tooltip"],"sources":["../../../src/molecule/review-correction-popin/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n type: PropTypes.oneOf(['right', 'wrong']),\n resultLabel: PropTypes.string,\n information: PropTypes.shape({\n label: PropTypes.string,\n message: PropTypes.string\n }),\n next: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string\n }),\n klf: PropTypes.shape({\n label: PropTypes.string,\n tooltip: PropTypes.string\n })\n};\n\nexport type
|
|
1
|
+
{"version":3,"file":"prop-types.js","names":["PropTypes","propTypes","type","oneOf","resultLabel","string","information","shape","label","message","next","onClick","func","klf","tooltip"],"sources":["../../../src/molecule/review-correction-popin/prop-types.ts"],"sourcesContent":["import PropTypes from 'prop-types';\n\nconst propTypes = {\n type: PropTypes.oneOf(['right', 'wrong']),\n resultLabel: PropTypes.string,\n information: PropTypes.shape({\n label: PropTypes.string,\n message: PropTypes.string\n }),\n next: PropTypes.shape({\n label: PropTypes.string,\n onClick: PropTypes.func,\n 'data-name': PropTypes.string,\n 'aria-label': PropTypes.string\n }),\n klf: PropTypes.shape({\n label: PropTypes.string,\n tooltip: PropTypes.string\n })\n};\n\nexport type ReviewCorrectionPopinKLFProps = {\n label: string;\n tooltip: string;\n};\n\nexport type ReviewCorrectionPopinProps = {\n klf?: ReviewCorrectionPopinKLFProps;\n information: {\n label: string;\n message: string;\n };\n next: {\n label: string;\n onClick: () => void;\n 'data-name'?: string;\n 'aria-label': string;\n };\n resultLabel: string;\n type: 'right' | 'wrong';\n};\n\nexport default propTypes;\n"],"mappings":"AAAA,OAAOA,SAAP,MAAsB,YAAtB;AAEA,MAAMC,SAAS,GAAG;EAChBC,IAAI,EAAEF,SAAS,CAACG,KAAV,CAAgB,CAAC,OAAD,EAAU,OAAV,CAAhB,CADU;EAEhBC,WAAW,EAAEJ,SAAS,CAACK,MAFP;EAGhBC,WAAW,EAAEN,SAAS,CAACO,KAAV,CAAgB;IAC3BC,KAAK,EAAER,SAAS,CAACK,MADU;IAE3BI,OAAO,EAAET,SAAS,CAACK;EAFQ,CAAhB,CAHG;EAOhBK,IAAI,EAAEV,SAAS,CAACO,KAAV,CAAgB;IACpBC,KAAK,EAAER,SAAS,CAACK,MADG;IAEpBM,OAAO,EAAEX,SAAS,CAACY,IAFC;IAGpB,aAAaZ,SAAS,CAACK,MAHH;IAIpB,cAAcL,SAAS,CAACK;EAJJ,CAAhB,CAPU;EAahBQ,GAAG,EAAEb,SAAS,CAACO,KAAV,CAAgB;IACnBC,KAAK,EAAER,SAAS,CAACK,MADE;IAEnBS,OAAO,EAAEd,SAAS,CAACK;EAFA,CAAhB;AAbW,CAAlB;AAwCA,eAAeJ,SAAf"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/organism/review-slide/index.native.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAC,gBAAgB,EAAa,MAAM,cAAc,CAAC;AAsL1D,QAAA,MAAM,KAAK,UAAW,gBAAgB,gBAyCrC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -3,32 +3,32 @@ import { StyleSheet, useWindowDimensions, View } from 'react-native';
|
|
|
3
3
|
import get from 'lodash/fp/get';
|
|
4
4
|
import getOr from 'lodash/fp/getOr';
|
|
5
5
|
import Text from '../../atom/text/index.native';
|
|
6
|
-
import Answer from '../../molecule/answer/index.native';
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
import Answer from '../../molecule/answer/index.native';
|
|
7
|
+
import ReviewCorrectionPopin from '../../molecule/review-correction-popin/index.native';
|
|
9
8
|
import { useTemplateContext } from '../../template/app-review/template-context';
|
|
10
9
|
import Touchable from '../../hoc/touchable/index.native';
|
|
10
|
+
const styles = StyleSheet.create({
|
|
11
|
+
correctionPopinWrapper: {
|
|
12
|
+
position: 'absolute',
|
|
13
|
+
bottom: 16,
|
|
14
|
+
width: '105%'
|
|
15
|
+
}
|
|
16
|
+
});
|
|
11
17
|
|
|
12
18
|
const CorrectionPopin = ({
|
|
13
19
|
correctionPopinProps,
|
|
14
|
-
slideIndex
|
|
15
|
-
showCorrectionPopin,
|
|
16
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
17
|
-
animateCorrectionPopin
|
|
20
|
+
slideIndex
|
|
18
21
|
}) => {
|
|
19
|
-
|
|
20
|
-
const klf = getOr({}, 'klf', correctionPopinProps);
|
|
22
|
+
const klf = getOr(undefined, 'klf', correctionPopinProps);
|
|
21
23
|
const information = getOr({
|
|
22
24
|
label: '',
|
|
23
25
|
message: ''
|
|
24
26
|
}, 'information', correctionPopinProps);
|
|
25
27
|
const next = get('next', correctionPopinProps);
|
|
28
|
+
const onClick = get(['next', 'onClick'], correctionPopinProps);
|
|
26
29
|
const _correctionPopinProps = {
|
|
27
30
|
next: {
|
|
28
|
-
onClick
|
|
29
|
-
// eslint-disable-next-line no-console
|
|
30
|
-
console.log('Next Slide');
|
|
31
|
-
},
|
|
31
|
+
onClick,
|
|
32
32
|
label: next && next.label,
|
|
33
33
|
'data-name': `next-question-button-${slideIndex}`,
|
|
34
34
|
'aria-label': next && next['aria-label']
|
|
@@ -38,8 +38,9 @@ const CorrectionPopin = ({
|
|
|
38
38
|
type: correctionPopinProps.type,
|
|
39
39
|
resultLabel: correctionPopinProps.resultLabel
|
|
40
40
|
};
|
|
41
|
-
return /*#__PURE__*/React.createElement(
|
|
42
|
-
|
|
41
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
42
|
+
style: styles.correctionPopinWrapper
|
|
43
|
+
}, /*#__PURE__*/React.createElement(ReviewCorrectionPopin, _correctionPopinProps));
|
|
43
44
|
}; // const ValidateButton = ({slideIndex, validateButton, primarySkinColor}) => {
|
|
44
45
|
// const {label, onClick, disabled} = validateButton;
|
|
45
46
|
// const validateButtonProps = {
|