@coorpacademy/components 10.22.12 → 10.22.15-alpha.12
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/provider/index.js +15 -0
- package/es/atom/provider/index.js.map +1 -1
- package/es/atom/provider/web-context.js +27 -0
- package/es/atom/provider/web-context.js.map +1 -0
- package/es/atom/range/handle.js +59 -59
- package/es/atom/range/handle.js.map +1 -1
- package/es/atom/range/index.js +55 -43
- package/es/atom/range/index.js.map +1 -1
- package/es/atom/select/index.js +3 -5
- package/es/atom/select/index.js.map +1 -1
- package/es/atom/text/index.native.js.map +1 -1
- package/es/hoc/modal/select/index.native.js.map +1 -1
- package/es/molecule/discipline-partners/index.js +1 -1
- package/es/molecule/discipline-partners/index.js.map +1 -1
- package/es/molecule/questions/free-text/index.js +4 -3
- package/es/molecule/questions/free-text/index.js.map +1 -1
- package/es/molecule/questions/free-text/index.native.js +3 -3
- package/es/molecule/questions/free-text/index.native.js.map +1 -1
- package/es/molecule/questions/mobile/{slide → slider}/index.native.js +17 -14
- package/es/molecule/questions/mobile/slider/index.native.js.map +1 -0
- package/es/molecule/questions/mobile/switch/index.native.js +171 -0
- package/es/molecule/questions/mobile/switch/index.native.js.map +1 -0
- package/es/molecule/questions/qcm/index.js +3 -5
- package/es/molecule/questions/qcm/index.js.map +1 -1
- package/es/molecule/questions/qcm-drag/index.js +3 -8
- package/es/molecule/questions/qcm-drag/index.js.map +1 -1
- package/es/molecule/questions/qcm-graphic/index.js +3 -5
- package/es/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/es/molecule/questions/question-range/index.js +3 -5
- package/es/molecule/questions/question-range/index.js.map +1 -1
- package/es/organism/review-slide/index.js +5 -10
- package/es/organism/review-slide/index.js.map +1 -1
- package/es/template/app-review/template-context.js +3 -7
- package/es/template/app-review/template-context.js.map +1 -1
- package/es/variables/theme.native.js.map +1 -1
- package/lib/atom/provider/index.js +23 -1
- package/lib/atom/provider/index.js.map +1 -1
- package/lib/atom/provider/web-context.js +40 -0
- package/lib/atom/provider/web-context.js.map +1 -0
- package/lib/atom/range/handle.js +61 -57
- package/lib/atom/range/handle.js.map +1 -1
- package/lib/atom/range/index.js +55 -43
- package/lib/atom/range/index.js.map +1 -1
- package/lib/atom/select/index.js +3 -5
- package/lib/atom/select/index.js.map +1 -1
- package/lib/atom/text/index.native.js.map +1 -1
- package/lib/hoc/modal/select/index.native.js.map +1 -1
- package/lib/molecule/discipline-partners/index.js +1 -1
- package/lib/molecule/discipline-partners/index.js.map +1 -1
- package/lib/molecule/questions/free-text/index.js +4 -3
- package/lib/molecule/questions/free-text/index.js.map +1 -1
- package/lib/molecule/questions/free-text/index.native.js +3 -3
- package/lib/molecule/questions/free-text/index.native.js.map +1 -1
- package/lib/molecule/questions/mobile/{slide → slider}/index.native.js +16 -13
- package/lib/molecule/questions/mobile/slider/index.native.js.map +1 -0
- package/lib/molecule/questions/mobile/switch/index.native.js +193 -0
- package/lib/molecule/questions/mobile/switch/index.native.js.map +1 -0
- package/lib/molecule/questions/qcm/index.js +3 -5
- package/lib/molecule/questions/qcm/index.js.map +1 -1
- package/lib/molecule/questions/qcm-drag/index.js +7 -8
- package/lib/molecule/questions/qcm-drag/index.js.map +1 -1
- package/lib/molecule/questions/qcm-graphic/index.js +7 -5
- package/lib/molecule/questions/qcm-graphic/index.js.map +1 -1
- package/lib/molecule/questions/question-range/index.js +7 -5
- package/lib/molecule/questions/question-range/index.js.map +1 -1
- package/lib/organism/review-slide/index.js +6 -11
- package/lib/organism/review-slide/index.js.map +1 -1
- package/lib/template/app-review/template-context.js +3 -6
- package/lib/template/app-review/template-context.js.map +1 -1
- package/lib/variables/theme.native.js.map +1 -1
- package/package.json +2 -2
- package/es/molecule/questions/mobile/slide/index.native.js.map +0 -1
- package/lib/molecule/questions/mobile/slide/index.native.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/hoc/modal/select/index.native.tsx"],"names":["React","useState","useEffect","useMemo","View","FlatList","StyleSheet","useTemplateContext","Modal","ModalSelectItem","createStyleSheet","theme","create","content","paddingHorizontal","separator","borderTopWidth","borderColor","colors","border","list","width","keyExtractor","item","index","createRenderItem","value","testID","onChange","handleChange","_value","text","createSeparator","styleSheet","ModalSelect","props","templateContext","setStylesheet","values","onClose","_stylesheet","renderItem","renderSeparator"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, FlatList, StyleSheet} from 'react-native';\nimport {noop} from 'lodash/fp';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport type {ChoiceItem} from '../../../types/progression-engine.d';\nimport {Theme} from '../../../variables/theme.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\n\nimport Modal from '../index.native';\nimport ModalSelectItem from '../select-item/index.native';\n\nexport type OnChangeFunction = (value: string) => void;\n\nexport type Props = {\n value?: string;\n values: Array<ChoiceItem
|
|
1
|
+
{"version":3,"sources":["../../../../src/hoc/modal/select/index.native.tsx"],"names":["React","useState","useEffect","useMemo","View","FlatList","StyleSheet","useTemplateContext","Modal","ModalSelectItem","createStyleSheet","theme","create","content","paddingHorizontal","separator","borderTopWidth","borderColor","colors","border","list","width","keyExtractor","item","index","createRenderItem","value","testID","onChange","handleChange","_value","text","createSeparator","styleSheet","ModalSelect","props","templateContext","setStylesheet","values","onClose","_stylesheet","renderItem","renderSeparator"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useMemo} from 'react';\nimport {View, FlatList, StyleSheet} from 'react-native';\nimport {noop} from 'lodash/fp';\nimport type {PressEvent} from 'react-native/Libraries/Types/CoreEventTypes';\n\nimport type {ChoiceItem} from '../../../types/progression-engine.d';\nimport {Theme} from '../../../variables/theme.native';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\n\nimport Modal from '../index.native';\nimport ModalSelectItem from '../select-item/index.native';\n\nexport type OnChangeFunction = (value: string) => void;\n\nexport type Props = {\n value?: string;\n values: Array<ChoiceItem> | undefined;\n onChange: OnChangeFunction;\n onClose?: (event: PressEvent) => void;\n testID?: string;\n};\n\ntype StyleSheetType = {\n content: {\n paddingHorizontal: number;\n };\n separator: {\n borderTopWidth: number;\n borderColor: string;\n };\n list: {\n width: string;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n content: {\n paddingHorizontal: 0\n },\n separator: {\n borderTopWidth: 1,\n borderColor: theme.colors.border\n },\n list: {\n width: '100%'\n }\n });\n\nconst keyExtractor = (item: ChoiceItem, index: number): string => {\n return `modal-select-item-${index + 1}`;\n};\n\nconst createRenderItem = (value: string, testID: String, onChange: OnChangeFunction) => ({\n item,\n index\n}: {\n item: ChoiceItem;\n index: number;\n}) => {\n // eslint-disable-next-line unicorn/consistent-function-scoping\n const handleChange = (_value: string) => () => onChange(_value);\n\n return (\n <ModalSelectItem\n onPress={handleChange(item.text)}\n isSelected={value === item.text}\n testID={`${testID}-item-${index + 1}`}\n >\n {item.text}\n </ModalSelectItem>\n );\n};\n\nconst createSeparator = (styleSheet: StyleSheetType) => () => {\n return <View style={styleSheet?.separator} />;\n};\n\nconst ModalSelect = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {theme} = templateContext;\n const {value = '', values, onChange, onClose = noop, testID = 'modal-select'} = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n const renderItem = useMemo(() => createRenderItem(value, testID, onChange), [\n value,\n testID,\n onChange\n ]);\n\n const renderSeparator = useMemo(() => (styleSheet ? createSeparator(styleSheet) : null), [\n styleSheet\n ]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <Modal onClose={onClose} contentStyle={styleSheet?.content} testID={testID}>\n <FlatList\n data={values}\n renderItem={renderItem}\n keyExtractor={keyExtractor}\n showsVerticalScrollIndicator={false}\n ItemSeparatorComponent={renderSeparator}\n style={styleSheet?.list}\n testID={`${testID}-items`}\n />\n </Modal>\n );\n};\n\nexport default ModalSelect;\n"],"file":"index.native.js"}
|
|
@@ -93,7 +93,7 @@ const DisciplinePartners = (props, context) => {
|
|
|
93
93
|
type: "checkbox",
|
|
94
94
|
id: authorToggleId,
|
|
95
95
|
className: style.toggle,
|
|
96
|
-
defaultChecked:
|
|
96
|
+
defaultChecked: true
|
|
97
97
|
}), /*#__PURE__*/React.createElement("label", {
|
|
98
98
|
htmlFor: authorToggleId
|
|
99
99
|
}, logoView), authorContent);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/molecule/discipline-partners/index.js"],"names":["React","PropTypes","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionNavigationArrowDown","ArrowDown","SocialLink","Provider","CatalogSection","Picture","style","DisciplinePartners","props","context","translate","skin","authorTitle","authors","authorLabel","defaultColor","authorsView","convert","cap","author","index","socialLinks","authorLogo","authorHref","moreDetails","autName","authorToggleId","linkView","authorLink","color","moreInfoView","linkicon","socialView","map","social","i","link","aNameView","authorName","logoView","logoContainer","logo","src","arrowWrapper","arrow","authorContent","links","authorWrapper","toggle","
|
|
1
|
+
{"version":3,"sources":["../../../src/molecule/discipline-partners/index.js"],"names":["React","PropTypes","NovaCompositionNavigationArrowRight","ArrowRight","NovaCompositionNavigationArrowDown","ArrowDown","SocialLink","Provider","CatalogSection","Picture","style","DisciplinePartners","props","context","translate","skin","authorTitle","authors","authorLabel","defaultColor","authorsView","convert","cap","author","index","socialLinks","authorLogo","authorHref","moreDetails","autName","authorToggleId","linkView","authorLink","color","moreInfoView","linkicon","socialView","map","social","i","link","aNameView","authorName","logoView","logoContainer","logo","src","arrowWrapper","arrow","authorContent","links","authorWrapper","toggle","colDetails","contextTypes","childContextTypes","propTypes","arrayOf","shape","name","string","href","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get, getOr, isEmpty, map, uniqueId} from 'lodash/fp';\nimport {\n NovaCompositionNavigationArrowRight as ArrowRight,\n NovaCompositionNavigationArrowDown as ArrowDown\n} from '@coorpacademy/nova-icons';\nimport SocialLink from '../../atom/social-link';\nimport Provider from '../../atom/provider';\nimport CatalogSection from '../../atom/catalog-section';\nimport Picture from '../../atom/picture';\nimport style from './style.css';\n\nconst DisciplinePartners = (props, context) => {\n const {translate, skin} = context;\n\n const {authorTitle, authors = []} = props;\n\n const authorLabel = authorTitle || translate('author');\n const defaultColor = get('common.primary', skin);\n const authorsView = map.convert({cap: false})((author, index) => {\n const socialLinks = getOr([], 'socialLinks', author);\n const authorLogo = get('logo', author);\n const authorHref = get('href', author);\n const moreDetails = get('more', author);\n const autName = get('name', author);\n const authorToggleId = uniqueId('author-toggle-');\n const linkView = (\n <div className={style.authorLink}>\n <a\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n style={{\n color: defaultColor\n }}\n href={authorHref}\n >\n {authorHref}\n </a>\n </div>\n );\n const moreInfoView = (\n <div className={style.authorLink}>\n <a\n href={authorHref}\n style={{\n color: defaultColor\n }}\n >\n {moreDetails}\n <ArrowRight color={defaultColor} className={style.linkicon} />\n </a>\n </div>\n );\n\n const socialView = socialLinks.map((social, i) => (\n <div key={i} className={style.link}>\n <SocialLink {...social} />\n </div>\n ));\n\n const aNameView = autName ? (\n <div data-name=\"authorName\" className={style.authorName}>\n {autName}\n </div>\n ) : null;\n\n const logoView = authorLogo ? (\n <div className={style.logoContainer}>\n <Picture className={style.logo} src={authorLogo.src} />\n <div className={style.arrowWrapper}>\n <ArrowDown className={style.arrow} height={14} whidth={14} />\n </div>\n </div>\n ) : null;\n\n const authorContent =\n authorHref || aNameView || socialView ? (\n <div className={style.authorContent}>\n {autName ? aNameView : null}\n {moreDetails ? moreInfoView : null}\n {!moreDetails && authorHref ? linkView : null}\n <div className={style.links}>{socialView}</div>\n </div>\n ) : null;\n\n return (\n <div key={index} className={style.authorWrapper}>\n <input type=\"checkbox\" id={authorToggleId} className={style.toggle} defaultChecked />\n <label htmlFor={authorToggleId}>{logoView}</label>\n {authorContent}\n </div>\n );\n }, authors);\n\n return !isEmpty(authors) ? (\n <div data-name=\"disciplinePartner\" className={style.colDetails}>\n <CatalogSection title={authorLabel}>{authorsView}</CatalogSection>\n </div>\n ) : null;\n};\n\nDisciplinePartners.contextTypes = {\n translate: Provider.childContextTypes.translate,\n skin: Provider.childContextTypes.skin\n};\n\nDisciplinePartners.propTypes = {\n authors: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n href: PropTypes.string,\n logo: PropTypes.shape({\n src: PropTypes.string,\n href: PropTypes.string\n }),\n socialLinks: PropTypes.array\n })\n ),\n authorTitle: PropTypes.string\n};\n\nexport default DisciplinePartners;\n"],"file":"index.js"}
|
|
@@ -6,10 +6,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
6
6
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import { convert } from 'css-color-function';
|
|
9
|
-
import Provider from '../../../atom/provider';
|
|
9
|
+
import Provider, { GetSkinFromContext } from '../../../atom/provider';
|
|
10
10
|
import style from './style.css';
|
|
11
11
|
|
|
12
|
-
const FreeText = (props,
|
|
12
|
+
const FreeText = (props, legacyContext) => {
|
|
13
|
+
const skin = GetSkinFromContext(legacyContext);
|
|
13
14
|
const {
|
|
14
15
|
placeholder = '',
|
|
15
16
|
value = '',
|
|
@@ -19,7 +20,7 @@ const FreeText = (props, context) => {
|
|
|
19
20
|
const [hovered, setHovered] = useState(false);
|
|
20
21
|
const handleChange = useCallback(e => onChange(e.target.value), [onChange]);
|
|
21
22
|
|
|
22
|
-
const primarySkinColor = _getOr('#00B0FF', '
|
|
23
|
+
const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
23
24
|
|
|
24
25
|
const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);
|
|
25
26
|
const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.js"],"names":["React","useCallback","useMemo","useState","PropTypes","convert","Provider","style","FreeText","props","
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.js"],"names":["React","useCallback","useMemo","useState","PropTypes","convert","Provider","GetSkinFromContext","style","FreeText","props","legacyContext","skin","placeholder","value","onChange","ariaLabel","hovered","setHovered","handleChange","e","target","primarySkinColor","handleMouseOver","handleMouseLeave","shadowBoxPrimaryColor","wrapper","boxShadow","freeText","color","contextTypes","childContextTypes","propTypes","string","func"],"mappings":";;;;;AAAA,OAAOA,KAAP,IAAeC,WAAf,EAA4BC,OAA5B,EAAqCC,QAArC,QAAoD,OAApD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AAEA,SAAQC,OAAR,QAAsB,oBAAtB;AACA,OAAOC,QAAP,IAAkBC,kBAAlB,QAA2C,wBAA3C;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,QAAQ,GAAG,CAACC,KAAD,EAAQC,aAAR,KAA0B;AACzC,QAAMC,IAAI,GAAGL,kBAAkB,CAACI,aAAD,CAA/B;AACA,QAAM;AAACE,IAAAA,WAAW,GAAG,EAAf;AAAmBC,IAAAA,KAAK,GAAG,EAA3B;AAA+BC,IAAAA,QAAQ,QAAvC;AAAgD,kBAAcC;AAA9D,MAA2EN,KAAjF;AACA,QAAM,CAACO,OAAD,EAAUC,UAAV,IAAwBf,QAAQ,CAAC,KAAD,CAAtC;AAEA,QAAMgB,YAAY,GAAGlB,WAAW,CAACmB,CAAC,IAAIL,QAAQ,CAACK,CAAC,CAACC,MAAF,CAASP,KAAV,CAAd,EAAgC,CAACC,QAAD,CAAhC,CAAhC;;AACA,QAAMO,gBAAgB,GAAG,OAAM,SAAN,EAAiB,gBAAjB,EAAmCV,IAAnC,CAAzB;;AAEA,QAAMW,eAAe,GAAGtB,WAAW,CAAC,MAAMiB,UAAU,CAAC,IAAD,CAAjB,EAAyB,CAACA,UAAD,CAAzB,CAAnC;AAEA,QAAMM,gBAAgB,GAAGvB,WAAW,CAAC,MAAMiB,UAAU,CAAC,KAAD,CAAjB,EAA0B,CAACA,UAAD,CAA1B,CAApC;AAEA,QAAMO,qBAAqB,GAAGvB,OAAO,CAAC,MAAMG,OAAO,CAAE,SAAQiB,gBAAiB,UAA3B,CAAd,EAAqD,CACxFA,gBADwF,CAArD,CAArC;AAIA,sBACE;AACE,iBAAU,UADZ;AAEE,IAAA,SAAS,EAAEd,KAAK,CAACkB,OAFnB;AAGE,IAAA,WAAW,EAAEH,eAHf;AAIE,IAAA,YAAY,EAAEC,gBAJhB;AAKE,IAAA,KAAK,eACCV,KAAK,IAAI;AACXa,MAAAA,SAAS,EAAEV,OAAO,GAAG,MAAH,GAAa,cAAaQ,qBAAsB;AADvD,KADV;AALP,kBAWE;AACE,iBAAU,iBADZ;AAEE,IAAA,IAAI,EAAC,MAFP;AAGE,kBAAYT,SAAS,IAAIF,KAAb,IAAsBD,WAHpC;AAIE,IAAA,SAAS,EAAEL,KAAK,CAACoB,QAJnB;AAKE,IAAA,WAAW,EAAEf,WALf;AAME,IAAA,KAAK,EAAEC,KANT;AAOE,IAAA,OAAO,EAAEK,YAPX;AAQE,IAAA,QAAQ,OARV;AASE,IAAA,KAAK;AACHQ,MAAAA,SAAS,EAAG,cAAaF,qBAAsB;AAD5C,OAECX,KAAK,IAAI;AACXa,MAAAA,SAAS,EAAG,cACVV,OAAO,GAAGZ,OAAO,CAAE,SAAQiB,gBAAiB,UAA3B,CAAV,GAAkDG,qBAC1D;AAHU,KAFV;AAOHI,MAAAA,KAAK,EAAEP;AAPJ;AATP,IAXF,CADF;AAiCD,CAjDD;;AAmDAb,QAAQ,CAACqB,YAAT,GAAwB;AACtBlB,EAAAA,IAAI,EAAEN,QAAQ,CAACyB,iBAAT,CAA2BnB;AADX,CAAxB;AAIAH,QAAQ,CAACuB,SAAT,2CAAqB;AACnBnB,EAAAA,WAAW,EAAET,SAAS,CAAC6B,MADJ;AAEnBnB,EAAAA,KAAK,EAAEV,SAAS,CAAC6B,MAFE;AAGnBlB,EAAAA,QAAQ,EAAEX,SAAS,CAAC8B,IAHD;AAInB,gBAAc9B,SAAS,CAAC6B;AAJL,CAArB;AAOA,eAAexB,QAAf","sourcesContent":["import React, {useCallback, useMemo, useState} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, getOr} from 'lodash/fp';\nimport {convert} from 'css-color-function';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport style from './style.css';\n\nconst FreeText = (props, legacyContext) => {\n const skin = GetSkinFromContext(legacyContext);\n const {placeholder = '', value = '', onChange = noop, 'aria-label': ariaLabel} = props;\n const [hovered, setHovered] = useState(false);\n\n const handleChange = useCallback(e => onChange(e.target.value), [onChange]);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const handleMouseOver = useCallback(() => setHovered(true), [setHovered]);\n\n const handleMouseLeave = useCallback(() => setHovered(false), [setHovered]);\n\n const shadowBoxPrimaryColor = useMemo(() => convert(`color(${primarySkinColor} a(12%))`), [\n primarySkinColor\n ]);\n\n return (\n <div\n data-name=\"freeText\"\n className={style.wrapper}\n onMouseOver={handleMouseOver}\n onMouseLeave={handleMouseLeave}\n style={{\n ...(value && {\n boxShadow: hovered ? 'none' : `0 4px 16px ${shadowBoxPrimaryColor}`\n })\n }}\n >\n <input\n data-name=\"free-text-input\"\n type=\"text\"\n aria-label={ariaLabel || value || placeholder}\n className={style.freeText}\n placeholder={placeholder}\n value={value}\n onInput={handleChange}\n onChange={noop}\n style={{\n boxShadow: `0 4px 16px ${shadowBoxPrimaryColor}`,\n ...(value && {\n boxShadow: `0 4px 16px ${\n hovered ? convert(`color(${primarySkinColor} a(20%))`) : shadowBoxPrimaryColor\n }`\n }),\n color: primarySkinColor\n }}\n />\n </div>\n );\n};\n\nFreeText.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nFreeText.propTypes = {\n placeholder: PropTypes.string,\n value: PropTypes.string,\n onChange: PropTypes.func,\n 'aria-label': PropTypes.string\n};\n\nexport default FreeText;\n"],"file":"index.js"}
|
|
@@ -47,10 +47,10 @@ const FreeText = props => {
|
|
|
47
47
|
const {
|
|
48
48
|
analytics,
|
|
49
49
|
questionType,
|
|
50
|
-
|
|
50
|
+
fullWidth = false,
|
|
51
51
|
testID,
|
|
52
52
|
onChange,
|
|
53
|
-
isDisabled,
|
|
53
|
+
isDisabled = false,
|
|
54
54
|
value
|
|
55
55
|
} = props; // ------------------------------------
|
|
56
56
|
|
|
@@ -68,7 +68,7 @@ const FreeText = props => {
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
return /*#__PURE__*/React.createElement(View, {
|
|
71
|
-
style: [styleSheet.spaced,
|
|
71
|
+
style: [styleSheet.spaced, fullWidth && styleSheet.fullWitdh]
|
|
72
72
|
}, /*#__PURE__*/React.createElement(TextInput, {
|
|
73
73
|
style: [styleSheet.input, styleSheet.text],
|
|
74
74
|
onFocus: handleFocus,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":["View","StyleSheet","TextInput","React","useState","useEffect","useCallback","useTemplateContext","ANALYTICS_EVENT_TYPE","createStyleSheet","brandTheme","theme","create","input","padding","spacing","tiny","borderWidth","borderColor","colors","gray","lightMedium","borderRadius","radius","common","backgroundColor","white","minWidth","text","primary","color","medium","fontWeight","bold","fontSize","regular","textAlign","spaced","paddingVertical","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","translations","PLACEHOLDER_COLOR","testID","onChange","isDisabled","value","handleFocus","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet","typeHere"],"mappings":"AAAA,SAAQA,IAAR,EAAcC,UAAd,EAA0BC,SAA1B,QAA0C,cAA1C;AACA,OAAOC,KAAP,IAAeC,QAAf,EAAyBC,SAAzB,EAAoCC,WAApC,QAAsD,OAAtD;AACA,SAAQC,kBAAR,QAAiC,+CAAjC;AACA,SAAQC,oBAAR,QAA8C,8BAA9C;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/questions/free-text/index.native.tsx"],"names":["View","StyleSheet","TextInput","React","useState","useEffect","useCallback","useTemplateContext","ANALYTICS_EVENT_TYPE","createStyleSheet","brandTheme","theme","create","input","padding","spacing","tiny","borderWidth","borderColor","colors","gray","lightMedium","borderRadius","radius","common","backgroundColor","white","minWidth","text","primary","color","medium","fontWeight","bold","fontSize","regular","textAlign","spaced","paddingVertical","fullWitdh","width","logEvent","eventName","analytics","questionType","id","FreeText","props","templateContext","styleSheet","setStylesheet","translations","PLACEHOLDER_COLOR","fullWidth","testID","onChange","isDisabled","value","handleFocus","INPUT_FOCUS","handleBlur","INPUT_BLUR","_stylesheet","typeHere"],"mappings":"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","sourcesContent":["import {View, StyleSheet, TextInput} from 'react-native';\nimport React, {useState, useEffect, useCallback} from 'react';\nimport {useTemplateContext} from '../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE, Analytics} from '../../../variables/analytics';\nimport {Theme} from '../../../variables/theme.native';\nimport {FontSize, TextAlign} from '../../../types/styles';\n\ntype QuestionType = 'basic' | 'template';\n\ninterface Props {\n fullWidth?: boolean;\n testID: string;\n questionType: QuestionType;\n analytics?: Analytics;\n onChange: (text: string) => void;\n isDisabled?: boolean;\n value: string;\n}\n\ntype StyleSheetType = {\n input: {\n padding: number;\n borderWidth: number;\n borderColor: string;\n borderRadius: number;\n backgroundColor: string;\n minWidth: number;\n };\n text: {\n color: string;\n fontWeight:\n | 'normal'\n | 'bold'\n | '100'\n | '200'\n | '300'\n | '400'\n | '500'\n | '600'\n | '700'\n | '800'\n | '900'\n | undefined;\n fontSize: FontSize;\n textAlign: TextAlign;\n };\n spaced: {\n paddingVertical: number;\n };\n fullWitdh: {\n width: string;\n };\n};\n\nconst createStyleSheet = (brandTheme: any, theme: Theme) =>\n StyleSheet.create({\n input: {\n padding: theme.spacing.tiny,\n borderWidth: 1,\n borderColor: theme.colors.gray.lightMedium,\n borderRadius: theme.radius.common,\n backgroundColor: theme.colors.white,\n minWidth: 175\n },\n text: {\n borderColor: brandTheme?.colors.primary,\n color: brandTheme?.colors.primary || theme.colors.gray.medium,\n fontWeight: theme.fontWeight.bold,\n fontSize: theme.fontSize.regular,\n textAlign: 'center'\n },\n spaced: {\n paddingVertical: theme.spacing.tiny\n },\n fullWitdh: {\n width: '100%'\n }\n });\n\nconst logEvent = (eventName: string, analytics: Analytics, questionType: QuestionType) => {\n analytics &&\n analytics.logEvent(eventName, {\n id: `question-input-text`,\n questionType\n });\n};\n\nconst FreeText = (props: Props) => {\n const templateContext = useTemplateContext();\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const {brandTheme, theme, translations} = templateContext;\n const PLACEHOLDER_COLOR = theme.colors.gray.medium;\n\n // ------------------------------------\n\n const {\n analytics,\n questionType,\n fullWidth = false,\n testID,\n onChange,\n isDisabled = false,\n value\n } = props;\n\n // ------------------------------------\n\n const handleFocus = useCallback(\n () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_FOCUS, analytics, questionType),\n [analytics, questionType]\n );\n\n const handleBlur = useCallback(\n () => analytics && logEvent(ANALYTICS_EVENT_TYPE.INPUT_BLUR, analytics, questionType),\n [analytics, questionType]\n );\n\n // ------------------------------------\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(brandTheme, theme);\n setStylesheet(_stylesheet);\n }, [brandTheme, theme]);\n\n // ------------------------------------\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={[styleSheet.spaced, fullWidth && styleSheet.fullWitdh]}>\n <TextInput\n style={[styleSheet.input, styleSheet.text]}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChangeText={onChange}\n placeholder={translations.typeHere}\n placeholderTextColor={PLACEHOLDER_COLOR}\n value={value}\n testID={testID}\n editable={!isDisabled}\n selectTextOnFocus={!isDisabled}\n />\n </View>\n );\n};\n\nexport default FreeText;\n"],"file":"index.native.js"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
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
2
|
|
|
3
|
-
import React, { useState, useEffect } from 'react';
|
|
3
|
+
import React, { useState, useEffect, useCallback } from 'react';
|
|
4
4
|
import { View, StyleSheet } from 'react-native';
|
|
5
5
|
import Slider from '@coorpacademy/react-native-slider';
|
|
6
6
|
import Text from '../../../../atom/text/index.native';
|
|
@@ -51,12 +51,26 @@ const createStyleSheet = theme => StyleSheet.create({
|
|
|
51
51
|
});
|
|
52
52
|
|
|
53
53
|
const QuestionSlider = props => {
|
|
54
|
+
const {
|
|
55
|
+
step,
|
|
56
|
+
style,
|
|
57
|
+
min,
|
|
58
|
+
max,
|
|
59
|
+
unit = '',
|
|
60
|
+
value: storeValue = 0,
|
|
61
|
+
onSlidingComplete,
|
|
62
|
+
testID
|
|
63
|
+
} = props;
|
|
54
64
|
const templateContext = useTemplateContext();
|
|
55
65
|
const {
|
|
56
66
|
brandTheme,
|
|
57
67
|
theme
|
|
58
68
|
} = templateContext;
|
|
59
69
|
const [styleSheet, setStylesheet] = useState(null);
|
|
70
|
+
const [value, setValue] = useState(storeValue);
|
|
71
|
+
const handleSlidingComplete = useCallback(() => {
|
|
72
|
+
onSlidingComplete(value);
|
|
73
|
+
}, [onSlidingComplete, value]);
|
|
60
74
|
useEffect(() => {
|
|
61
75
|
const _stylesheet = createStyleSheet(theme);
|
|
62
76
|
|
|
@@ -67,17 +81,6 @@ const QuestionSlider = props => {
|
|
|
67
81
|
return null;
|
|
68
82
|
}
|
|
69
83
|
|
|
70
|
-
const {
|
|
71
|
-
step,
|
|
72
|
-
style,
|
|
73
|
-
min,
|
|
74
|
-
max,
|
|
75
|
-
unit = '',
|
|
76
|
-
value,
|
|
77
|
-
onSlidingComplete,
|
|
78
|
-
testID,
|
|
79
|
-
onChange
|
|
80
|
-
} = props;
|
|
81
84
|
return /*#__PURE__*/React.createElement(View, {
|
|
82
85
|
style: [styleSheet.container, style],
|
|
83
86
|
testID: testID
|
|
@@ -89,10 +92,10 @@ const QuestionSlider = props => {
|
|
|
89
92
|
}, value), /*#__PURE__*/React.createElement(Slider, {
|
|
90
93
|
step: step || 1,
|
|
91
94
|
value: value,
|
|
92
|
-
onValueChange:
|
|
95
|
+
onValueChange: setValue,
|
|
93
96
|
maximumValue: max,
|
|
94
97
|
minimumValue: min,
|
|
95
|
-
onSlidingComplete:
|
|
98
|
+
onSlidingComplete: handleSlidingComplete,
|
|
96
99
|
minimumTrackTintColor: brandTheme?.colors.primary,
|
|
97
100
|
trackStyle: styleSheet.track,
|
|
98
101
|
thumbStyle: [styleSheet.thumb, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/questions/mobile/slider/index.native.tsx"],"names":["React","useState","useEffect","useCallback","View","StyleSheet","Slider","Text","useTemplateContext","BOX_STYLE","createStyleSheet","theme","create","container","flex","paddingHorizontal","flexDirection","justifyContent","header","fontSize","fontWeight","bold","textAlign","textValue","color","colors","black","valuesContainer","leftValue","alignItems","rightValue","track","height","borderRadius","radius","button","thumb","width","backgroundColor","borderWidth","QuestionSlider","props","step","style","min","max","unit","value","storeValue","onSlidingComplete","testID","templateContext","brandTheme","styleSheet","setStylesheet","setValue","handleSlidingComplete","_stylesheet","primary","borderColor"],"mappings":"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","sourcesContent":["import React, {useState, useEffect, useCallback} from 'react';\nimport {View, StyleSheet, ViewStyle, FlexAlignType} from 'react-native';\nimport Slider from '@coorpacademy/react-native-slider';\n\nimport {Theme} from '../../../../variables/theme.native';\nimport Text from '../../../../atom/text/index.native';\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {BOX_STYLE} from '../../../../variables/shadow';\nimport {FlexDirection, JustifyContent, TextAlign, FontWeight} from '../../../../types/styles';\n\nexport type OnSlidingCompleteFunction = (value: number) => void;\n\nexport type Props = {\n min: number;\n max: number;\n value?: number;\n unit?: string;\n onSlidingComplete: OnSlidingCompleteFunction;\n style?: ViewStyle;\n step?: number;\n testID?: string;\n};\n\ntype StyleSheetType = {\n container: {\n flex: number;\n paddingHorizontal: number;\n flexDirection: FlexDirection;\n justifyContent: JustifyContent;\n };\n header: {\n fontSize: number;\n fontWeight: FontWeight;\n textAlign: TextAlign;\n };\n textValue: {\n fontSize: number;\n color: string;\n fontWeight: FontWeight;\n textAlign: TextAlign;\n };\n valuesContainer: {\n flexDirection: FlexDirection;\n justifyContent: JustifyContent;\n };\n leftValue: {\n flex: number;\n alignItems: FlexAlignType | undefined;\n };\n rightValue: {\n flex: number;\n alignItems: FlexAlignType | undefined;\n };\n track: {\n height: number;\n borderRadius: number;\n };\n thumb: {\n width: number;\n height: number;\n borderRadius: number;\n backgroundColor: string;\n borderWidth: number;\n };\n};\n\nconst createStyleSheet = (theme: Theme) =>\n StyleSheet.create({\n container: {\n flex: 1,\n paddingHorizontal: 20,\n flexDirection: 'column',\n justifyContent: 'center'\n },\n header: {\n fontSize: 25,\n fontWeight: theme.fontWeight.bold,\n textAlign: 'center'\n },\n textValue: {\n fontSize: 15,\n color: theme.colors.black,\n fontWeight: theme.fontWeight.bold,\n textAlign: 'center'\n },\n valuesContainer: {\n flexDirection: 'row',\n justifyContent: 'space-around'\n },\n leftValue: {\n flex: 1,\n alignItems: 'flex-start'\n },\n rightValue: {\n flex: 1,\n alignItems: 'flex-end'\n },\n track: {\n height: 10,\n borderRadius: theme.radius.button\n },\n thumb: {\n ...BOX_STYLE,\n width: 30,\n height: 30,\n borderRadius: 30 / 2,\n backgroundColor: 'white',\n borderWidth: 1\n }\n });\n\nconst QuestionSlider = (props: Props) => {\n const {\n step,\n style,\n min,\n max,\n unit = '',\n value: storeValue = 0,\n onSlidingComplete,\n testID\n } = props;\n const templateContext = useTemplateContext();\n const {brandTheme, theme} = templateContext;\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const [value, setValue] = useState<number>(storeValue);\n\n const handleSlidingComplete = useCallback(() => {\n onSlidingComplete(value);\n }, [onSlidingComplete, value]);\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n if (!styleSheet) {\n return null;\n }\n\n return (\n <View style={[styleSheet.container, style]} testID={testID}>\n <Text style={[styleSheet.header, {color: brandTheme?.colors.primary}]} testID=\"slider-value\">\n {value}\n </Text>\n <Slider\n step={step || 1}\n value={value}\n onValueChange={setValue}\n maximumValue={max}\n minimumValue={min}\n onSlidingComplete={handleSlidingComplete}\n minimumTrackTintColor={brandTheme?.colors.primary}\n trackStyle={styleSheet.track}\n thumbStyle={[styleSheet.thumb, {borderColor: brandTheme?.colors.primary}]}\n testID=\"slider\"\n />\n <View style={styleSheet.valuesContainer} testID=\"slider-values-container\">\n <View style={styleSheet.leftValue}>\n <Text style={styleSheet.textValue} testID=\"slider-min-value\">\n {`${min} ${unit}`}\n </Text>\n </View>\n <View style={styleSheet.rightValue}>\n <Text style={styleSheet.textValue} testID=\"slider-max-value\">\n {`${max} ${unit}`}\n </Text>\n </View>\n </View>\n </View>\n );\n};\n\nexport default QuestionSlider;\n"],"file":"index.native.js"}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { View, StyleSheet } from 'react-native';
|
|
3
|
+
import QuestionChoice from '../../../../atom/choice/index.native';
|
|
4
|
+
import Space from '../../../../atom/space/index.native';
|
|
5
|
+
import QuestionDraggable from '../draggable/index.native';
|
|
6
|
+
import QuestionTemplate from '../template/index.native';
|
|
7
|
+
import QuestionSlider from '../slider/index.native';
|
|
8
|
+
import FreeText from '../../free-text/index.native';
|
|
9
|
+
import { useTemplateContext } from '../../../../template/app-review/template-context';
|
|
10
|
+
import { ANALYTICS_EVENT_TYPE } from '../../../../variables/analytics';
|
|
11
|
+
const styleSheet = StyleSheet.create({
|
|
12
|
+
cards: {
|
|
13
|
+
flexDirection: 'row',
|
|
14
|
+
alignItems: 'stretch'
|
|
15
|
+
},
|
|
16
|
+
card: {
|
|
17
|
+
flex: 1
|
|
18
|
+
}
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
const Switch = props => {
|
|
22
|
+
const templateContext = useTemplateContext();
|
|
23
|
+
const {
|
|
24
|
+
analytics
|
|
25
|
+
} = templateContext;
|
|
26
|
+
const {
|
|
27
|
+
type,
|
|
28
|
+
template,
|
|
29
|
+
isDisabled,
|
|
30
|
+
items,
|
|
31
|
+
userChoices,
|
|
32
|
+
min,
|
|
33
|
+
max,
|
|
34
|
+
unit,
|
|
35
|
+
value,
|
|
36
|
+
step,
|
|
37
|
+
onSliderChange,
|
|
38
|
+
onItemPress,
|
|
39
|
+
onItemInputChange,
|
|
40
|
+
onInputValueChange,
|
|
41
|
+
focusedSelectId,
|
|
42
|
+
handleFocus,
|
|
43
|
+
handleBlur
|
|
44
|
+
} = props;
|
|
45
|
+
|
|
46
|
+
const isSelected = choice => userChoices && userChoices.includes(choice.label);
|
|
47
|
+
|
|
48
|
+
const handleItemPress = item => () => {
|
|
49
|
+
if (onItemPress) {
|
|
50
|
+
onItemPress(item);
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
const handleItemInputChange = useCallback((item, _value) => {
|
|
55
|
+
if (onItemInputChange) {
|
|
56
|
+
onItemInputChange(item, _value);
|
|
57
|
+
}
|
|
58
|
+
}, [onItemInputChange]);
|
|
59
|
+
const handleSlidingComplete = useCallback(_value => {
|
|
60
|
+
analytics && analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {
|
|
61
|
+
id: 'slider',
|
|
62
|
+
questionType: 'slider'
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
if (onSliderChange) {
|
|
66
|
+
onSliderChange(_value);
|
|
67
|
+
}
|
|
68
|
+
}, [analytics, onSliderChange]);
|
|
69
|
+
|
|
70
|
+
switch (type) {
|
|
71
|
+
case 'qcm':
|
|
72
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
73
|
+
testID: "question-choices"
|
|
74
|
+
}, items.map((item, index) => /*#__PURE__*/React.createElement(View, {
|
|
75
|
+
key: `question-choice-${item._id}`
|
|
76
|
+
}, index > 0 ? /*#__PURE__*/React.createElement(Space, null) : null, /*#__PURE__*/React.createElement(QuestionChoice, {
|
|
77
|
+
onPress: handleItemPress(item),
|
|
78
|
+
isDisabled: isDisabled,
|
|
79
|
+
isSelected: isSelected(item),
|
|
80
|
+
testID: `question-choice-${item._id}`,
|
|
81
|
+
questionType: type
|
|
82
|
+
}, item.label))));
|
|
83
|
+
|
|
84
|
+
case 'qcmGraphic':
|
|
85
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
86
|
+
testID: "question-choices"
|
|
87
|
+
}, items.map((item, index) => {
|
|
88
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
89
|
+
key: `question-choice-row-${item._id}`
|
|
90
|
+
}, index > 0 ? /*#__PURE__*/React.createElement(Space, null) : null, /*#__PURE__*/React.createElement(View, {
|
|
91
|
+
style: styleSheet.cards
|
|
92
|
+
}, /*#__PURE__*/React.createElement(QuestionChoice, {
|
|
93
|
+
onPress: handleItemPress(item),
|
|
94
|
+
media: item.media,
|
|
95
|
+
isDisabled: isDisabled,
|
|
96
|
+
isSelected: isSelected(item),
|
|
97
|
+
testID: `question-choice-${item._id}`,
|
|
98
|
+
style: styleSheet.card,
|
|
99
|
+
questionType: type
|
|
100
|
+
}, item.label), /*#__PURE__*/React.createElement(Space, null)));
|
|
101
|
+
}));
|
|
102
|
+
|
|
103
|
+
case 'slider':
|
|
104
|
+
{
|
|
105
|
+
if (min === undefined || max === undefined) {
|
|
106
|
+
return /*#__PURE__*/React.createElement(View, null);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
return /*#__PURE__*/React.createElement(QuestionSlider, {
|
|
110
|
+
min: min,
|
|
111
|
+
max: max,
|
|
112
|
+
unit: unit,
|
|
113
|
+
value: value,
|
|
114
|
+
step: step,
|
|
115
|
+
onSlidingComplete: handleSlidingComplete,
|
|
116
|
+
testID: "question-slider"
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
case 'template':
|
|
121
|
+
if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {
|
|
122
|
+
return /*#__PURE__*/React.createElement(View, null);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
126
|
+
testID: "question-choices"
|
|
127
|
+
}, /*#__PURE__*/React.createElement(QuestionTemplate, {
|
|
128
|
+
isDisabled: isDisabled,
|
|
129
|
+
template: template || '',
|
|
130
|
+
items: items,
|
|
131
|
+
userChoices: userChoices,
|
|
132
|
+
onInputChange: handleItemInputChange,
|
|
133
|
+
handleBlur: handleBlur,
|
|
134
|
+
handleFocus: handleFocus,
|
|
135
|
+
focusedSelectId: focusedSelectId
|
|
136
|
+
}));
|
|
137
|
+
|
|
138
|
+
case 'qcmDrag':
|
|
139
|
+
if (!onItemPress) {
|
|
140
|
+
return /*#__PURE__*/React.createElement(View, null);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
144
|
+
testID: "question-draggable"
|
|
145
|
+
}, /*#__PURE__*/React.createElement(QuestionDraggable, {
|
|
146
|
+
choices: items,
|
|
147
|
+
userChoices: userChoices,
|
|
148
|
+
onPress: onItemPress
|
|
149
|
+
}));
|
|
150
|
+
|
|
151
|
+
case 'basic':
|
|
152
|
+
if (!onInputValueChange) {
|
|
153
|
+
return /*#__PURE__*/React.createElement(View, null);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
return /*#__PURE__*/React.createElement(FreeText, {
|
|
157
|
+
fullWidth: true,
|
|
158
|
+
onChange: onInputValueChange,
|
|
159
|
+
testID: "question-input-text",
|
|
160
|
+
questionType: "basic",
|
|
161
|
+
isDisabled: isDisabled,
|
|
162
|
+
value: ""
|
|
163
|
+
});
|
|
164
|
+
|
|
165
|
+
default:
|
|
166
|
+
return /*#__PURE__*/React.createElement(View, null);
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
|
|
170
|
+
export default Switch;
|
|
171
|
+
//# sourceMappingURL=index.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../src/molecule/questions/mobile/switch/index.native.tsx"],"names":["React","useCallback","View","StyleSheet","QuestionChoice","Space","QuestionDraggable","QuestionTemplate","QuestionSlider","FreeText","useTemplateContext","ANALYTICS_EVENT_TYPE","styleSheet","create","cards","flexDirection","alignItems","card","flex","Switch","props","templateContext","analytics","type","template","isDisabled","items","userChoices","min","max","unit","value","step","onSliderChange","onItemPress","onItemInputChange","onInputValueChange","focusedSelectId","handleFocus","handleBlur","isSelected","choice","includes","label","handleItemPress","item","handleItemInputChange","_value","handleSlidingComplete","logEvent","SLIDE","id","questionType","map","index","_id","media","undefined"],"mappings":"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","sourcesContent":["import React, {useCallback} from 'react';\nimport {View, StyleSheet} from 'react-native';\n\nimport QuestionChoice from '../../../../atom/choice/index.native';\nimport Space from '../../../../atom/space/index.native';\nimport QuestionDraggable from '../draggable/index.native';\nimport QuestionTemplate from '../template/index.native';\nimport QuestionSlider from '../slider/index.native';\nimport FreeText from '../../free-text/index.native';\n\nimport {useTemplateContext} from '../../../../template/app-review/template-context';\nimport {ANALYTICS_EVENT_TYPE} from '../../../../variables/analytics';\n\nimport {FocusedSelectId, HandleBlur, HandleFocus} from '../../../../types/app-review';\nimport type {QuestionType, Choice} from '../../../../types/progression-engine';\n\nexport interface Props {\n type: QuestionType;\n isDisabled?: boolean;\n template?: string;\n items: Array<Choice>;\n userChoices: Array<string>;\n onItemPress?: (item: Choice) => void;\n onSliderChange?: (value: number) => void;\n min?: number;\n max?: number;\n unit?: string;\n step?: number;\n value?: number;\n onItemInputChange?: (item: Choice, value: string) => void;\n onInputValueChange?: (value: string) => void;\n focusedSelectId?: FocusedSelectId;\n handleFocus?: HandleFocus;\n handleBlur?: HandleBlur;\n}\n\nconst styleSheet = StyleSheet.create({\n cards: {\n flexDirection: 'row',\n alignItems: 'stretch'\n },\n card: {\n flex: 1\n }\n});\n\nconst Switch = (props: Props) => {\n const templateContext = useTemplateContext();\n const {analytics} = templateContext;\n\n const {\n type,\n template,\n isDisabled,\n items,\n userChoices,\n min,\n max,\n unit,\n value,\n step,\n onSliderChange,\n onItemPress,\n onItemInputChange,\n onInputValueChange,\n focusedSelectId,\n handleFocus,\n handleBlur\n } = props;\n\n const isSelected = (choice: Choice): boolean => userChoices && userChoices.includes(choice.label);\n\n const handleItemPress = (item: Choice) => () => {\n if (onItemPress) {\n onItemPress(item);\n }\n };\n\n const handleItemInputChange = useCallback(\n (item: Choice, _value: string) => {\n if (onItemInputChange) {\n onItemInputChange(item, _value);\n }\n },\n [onItemInputChange]\n );\n\n const handleSlidingComplete = useCallback(\n _value => {\n analytics &&\n analytics.logEvent(ANALYTICS_EVENT_TYPE.SLIDE, {\n id: 'slider',\n questionType: 'slider'\n });\n\n if (onSliderChange) {\n onSliderChange(_value);\n }\n },\n [analytics, onSliderChange]\n );\n\n switch (type) {\n case 'qcm':\n return (\n <View testID=\"question-choices\">\n {items.map((item, index) => (\n <View key={`question-choice-${item._id}`}>\n {index > 0 ? <Space /> : null}\n <QuestionChoice\n onPress={handleItemPress(item)}\n isDisabled={isDisabled}\n isSelected={isSelected(item)}\n testID={`question-choice-${item._id}`}\n questionType={type}\n >\n {item.label}\n </QuestionChoice>\n </View>\n ))}\n </View>\n );\n case 'qcmGraphic':\n return (\n <View testID=\"question-choices\">\n {items.map((item, index) => {\n return (\n <View key={`question-choice-row-${item._id}`}>\n {index > 0 ? <Space /> : null}\n <View style={styleSheet.cards}>\n <QuestionChoice\n onPress={handleItemPress(item)}\n media={item.media}\n isDisabled={isDisabled}\n isSelected={isSelected(item)}\n testID={`question-choice-${item._id}`}\n style={styleSheet.card}\n questionType={type}\n >\n {item.label}\n </QuestionChoice>\n <Space />\n </View>\n </View>\n );\n })}\n </View>\n );\n case 'slider': {\n if (min === undefined || max === undefined) {\n return <View />;\n }\n\n return (\n <QuestionSlider\n min={min}\n max={max}\n unit={unit}\n value={value}\n step={step}\n onSlidingComplete={handleSlidingComplete}\n testID=\"question-slider\"\n />\n );\n }\n case 'template':\n if (handleBlur === undefined || handleFocus === undefined || focusedSelectId === undefined) {\n return <View />;\n }\n\n return (\n <View testID=\"question-choices\">\n <QuestionTemplate\n isDisabled={isDisabled}\n template={template || ''}\n items={items}\n userChoices={userChoices}\n onInputChange={handleItemInputChange}\n handleBlur={handleBlur}\n handleFocus={handleFocus}\n focusedSelectId={focusedSelectId}\n />\n </View>\n );\n case 'qcmDrag':\n if (!onItemPress) {\n return <View />;\n }\n\n return (\n <View testID=\"question-draggable\">\n <QuestionDraggable choices={items} userChoices={userChoices} onPress={onItemPress} />\n </View>\n );\n case 'basic':\n if (!onInputValueChange) {\n return <View />;\n }\n\n return (\n <FreeText\n fullWidth\n onChange={onInputValueChange}\n testID=\"question-input-text\"\n questionType=\"basic\"\n isDisabled={isDisabled}\n value=\"\"\n />\n );\n default:\n return <View />;\n }\n};\n\nexport default Switch;\n"],"file":"index.native.js"}
|
|
@@ -5,20 +5,18 @@ import classnames from 'classnames';
|
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import getOr from 'lodash/fp/getOr';
|
|
7
7
|
import maxBy from 'lodash/fp/maxBy';
|
|
8
|
-
import Provider from '../../../atom/provider';
|
|
8
|
+
import Provider, { GetSkinFromContext } from '../../../atom/provider';
|
|
9
9
|
import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
|
|
10
10
|
import style from './style.css';
|
|
11
11
|
|
|
12
|
-
const QCM = (props,
|
|
12
|
+
const QCM = (props, legacyContext) => {
|
|
13
13
|
const {
|
|
14
14
|
answers
|
|
15
15
|
} = props;
|
|
16
16
|
const longestAnswer = maxBy(({
|
|
17
17
|
title
|
|
18
18
|
}) => title.length, answers);
|
|
19
|
-
const
|
|
20
|
-
skin
|
|
21
|
-
} = context;
|
|
19
|
+
const skin = GetSkinFromContext(legacyContext);
|
|
22
20
|
const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);
|
|
23
21
|
const answersViews = useMemo(() => answers.map((answer, key) => {
|
|
24
22
|
const {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","getShadowBoxColorFromPrimary","style","QCM","props","
|
|
1
|
+
{"version":3,"sources":["../../../../src/molecule/questions/qcm/index.js"],"names":["React","useMemo","classnames","PropTypes","getOr","maxBy","Provider","GetSkinFromContext","getShadowBoxColorFromPrimary","style","QCM","props","legacyContext","answers","longestAnswer","title","length","skin","primarySkinColor","answersViews","map","answer","key","onClick","selected","ariaLabel","longAnswerClass","selectedAnswerClass","selectedAnswer","unselectedAnswer","innerHTML","boxShadow","backgroundColor","background","answerText","__html","wrapper","contextTypes","childContextTypes","propTypes","arrayOf","shape","string","bool","func"],"mappings":"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","sourcesContent":["import React, {useMemo} from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport getOr from 'lodash/fp/getOr';\nimport maxBy from 'lodash/fp/maxBy';\nimport Provider, {GetSkinFromContext} from '../../../atom/provider';\nimport {getShadowBoxColorFromPrimary} from '../../../util/get-shadow-box-color-from-primary';\nimport style from './style.css';\n\nconst QCM = (props, legacyContext) => {\n const {answers} = props;\n const longestAnswer = maxBy(({title}) => title.length, answers);\n const skin = GetSkinFromContext(legacyContext);\n const primarySkinColor = getOr('#00B0FF', 'common.primary', skin);\n\n const answersViews = useMemo(\n () =>\n answers.map((answer, key) => {\n const {onClick, title, selected, 'aria-label': ariaLabel} = answer;\n const longAnswerClass = longestAnswer.title === title ? style.longestAnswer : style.answer;\n const selectedAnswerClass = selected ? style.selectedAnswer : style.unselectedAnswer;\n\n return (\n <div\n data-name=\"answer\"\n aria-label={ariaLabel || title}\n className={classnames(longAnswerClass, style.innerHTML, selectedAnswerClass)}\n onClick={onClick}\n style={{\n ...(selected && {\n boxShadow: `0 4px 16px ${getShadowBoxColorFromPrimary(primarySkinColor)}`\n })\n }}\n data-selected={selected}\n key={key}\n >\n <div\n data-name=\"answer-background\"\n style={{backgroundColor: selected ? primarySkinColor : '#F4F4F5' /* cm_grey_75 */}}\n className={style.background}\n />\n <span\n data-name=\"answer-label\"\n className={style.answerText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: title}}\n />\n </div>\n );\n }),\n [answers, longestAnswer, primarySkinColor]\n );\n\n return (\n <div data-name=\"qcm\" className={style.wrapper}>\n {answersViews}\n </div>\n );\n};\n\nQCM.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nQCM.propTypes = {\n answers: PropTypes.arrayOf(\n PropTypes.shape({\n title: PropTypes.string,\n selected: PropTypes.bool,\n onClick: PropTypes.func,\n 'aria-label': PropTypes.string\n })\n )\n};\n\nexport default QCM;\n"],"file":"index.js"}
|
|
@@ -5,7 +5,7 @@ import _pipe from "lodash/fp/pipe";
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import classnames from 'classnames';
|
|
8
|
-
import Provider from '../../../atom/provider';
|
|
8
|
+
import Provider, { GetSkinFromContext } from '../../../atom/provider';
|
|
9
9
|
import { getShadowBoxColorFromPrimary } from '../../../util/get-shadow-box-color-from-primary';
|
|
10
10
|
import style from './style.css';
|
|
11
11
|
const AnswersPropTypes = process.env.NODE_ENV !== "production" ? PropTypes.arrayOf(PropTypes.shape({
|
|
@@ -22,9 +22,6 @@ const EmptyView = ({
|
|
|
22
22
|
className: style.emptySpan
|
|
23
23
|
}, help);
|
|
24
24
|
|
|
25
|
-
EmptyView.contextTypes = {
|
|
26
|
-
translate: Provider.childContextTypes.translate
|
|
27
|
-
};
|
|
28
25
|
EmptyView.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
29
26
|
help: PropTypes.string
|
|
30
27
|
} : {};
|
|
@@ -120,10 +117,8 @@ SelectedAnswerSections.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
120
117
|
const QcmDrag = ({
|
|
121
118
|
answers,
|
|
122
119
|
help
|
|
123
|
-
},
|
|
124
|
-
const
|
|
125
|
-
skin
|
|
126
|
-
} = context;
|
|
120
|
+
}, legacyContext) => {
|
|
121
|
+
const skin = GetSkinFromContext(legacyContext);
|
|
127
122
|
|
|
128
123
|
const primarySkinColor = _getOr('#00B0FF', 'common.primary', skin);
|
|
129
124
|
|