@coorpacademy/components 11.7.3-alpha.7 → 11.7.4-alpha.26

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.
Files changed (211) hide show
  1. package/README.md +3 -3
  2. package/es/atom/input-search/index.d.ts.map +1 -1
  3. package/es/atom/input-search/index.js +0 -1
  4. package/es/atom/input-search/index.js.map +1 -1
  5. package/es/atom/input-switch/index.d.ts +0 -1
  6. package/es/atom/input-switch/index.d.ts.map +1 -1
  7. package/es/atom/input-switch/index.js +2 -5
  8. package/es/atom/input-switch/index.js.map +1 -1
  9. package/es/atom/loader/index.native.d.ts +10 -0
  10. package/es/atom/loader/index.native.d.ts.map +1 -0
  11. package/es/atom/loader/index.native.js +192 -0
  12. package/es/atom/loader/index.native.js.map +1 -0
  13. package/es/atom/select/index.d.ts +18 -1
  14. package/es/atom/select/index.d.ts.map +1 -1
  15. package/es/atom/select/index.js +29 -17
  16. package/es/atom/select/index.js.map +1 -1
  17. package/es/molecule/answer/index.d.ts.map +1 -1
  18. package/es/molecule/answer/index.js +19 -6
  19. package/es/molecule/answer/index.js.map +1 -1
  20. package/es/molecule/brand-form-group/index.d.ts +18 -5
  21. package/es/molecule/cm-popin/types.d.ts +0 -1
  22. package/es/molecule/cm-popin/types.d.ts.map +1 -1
  23. package/es/molecule/draggable-list/index.d.ts +0 -1
  24. package/es/molecule/filters/filters-wrapper.d.ts +1 -0
  25. package/es/molecule/filters/filters-wrapper.d.ts.map +1 -1
  26. package/es/molecule/filters/filters-wrapper.js +10 -9
  27. package/es/molecule/filters/filters-wrapper.js.map +1 -1
  28. package/es/molecule/filters/index.d.ts +10 -2
  29. package/es/molecule/filters/index.d.ts.map +1 -1
  30. package/es/molecule/filters/index.js +5 -9
  31. package/es/molecule/filters/index.js.map +1 -1
  32. package/es/molecule/questions/drop-down/index.d.ts +1 -0
  33. package/es/molecule/questions/drop-down/index.d.ts.map +1 -1
  34. package/es/molecule/questions/drop-down/index.js +9 -5
  35. package/es/molecule/questions/drop-down/index.js.map +1 -1
  36. package/es/molecule/questions/qcm/index.d.ts +1 -0
  37. package/es/molecule/questions/qcm/index.d.ts.map +1 -1
  38. package/es/molecule/questions/qcm/index.js +9 -5
  39. package/es/molecule/questions/qcm/index.js.map +1 -1
  40. package/es/molecule/questions/qcm-drag/index.d.ts +3 -1
  41. package/es/molecule/questions/qcm-drag/index.d.ts.map +1 -1
  42. package/es/molecule/questions/qcm-drag/index.js +9 -5
  43. package/es/molecule/questions/qcm-drag/index.js.map +1 -1
  44. package/es/molecule/questions/qcm-graphic/index.d.ts +1 -0
  45. package/es/molecule/questions/qcm-graphic/index.d.ts.map +1 -1
  46. package/es/molecule/questions/qcm-graphic/index.js +9 -5
  47. package/es/molecule/questions/qcm-graphic/index.js.map +1 -1
  48. package/es/molecule/questions/question-range/index.d.ts +1 -0
  49. package/es/molecule/questions/question-range/index.d.ts.map +1 -1
  50. package/es/molecule/questions/question-range/index.js +10 -6
  51. package/es/molecule/questions/question-range/index.js.map +1 -1
  52. package/es/molecule/questions/template/index.d.ts +6 -2
  53. package/es/molecule/questions/template/index.d.ts.map +1 -1
  54. package/es/molecule/questions/template/index.js +9 -5
  55. package/es/molecule/questions/template/index.js.map +1 -1
  56. package/es/molecule/setup-section/index.d.ts +0 -1
  57. package/es/molecule/setup-section/index.d.ts.map +1 -1
  58. package/es/molecule/setup-sections/index.d.ts +0 -1
  59. package/es/molecule/setup-slide/index.d.ts +9 -2
  60. package/es/molecule/setup-slider/index.d.ts +9 -2
  61. package/es/organism/brand-form/index.d.ts +18 -5
  62. package/es/organism/mooc-header/index.d.ts +5 -0
  63. package/es/organism/mooc-header/index.d.ts.map +1 -1
  64. package/es/organism/mooc-header/index.js +62 -12
  65. package/es/organism/mooc-header/index.js.map +1 -1
  66. package/es/organism/mooc-header/style.css +46 -0
  67. package/es/organism/user-preferences/index.d.ts +1 -1
  68. package/es/organism/user-preferences/index.d.ts.map +1 -1
  69. package/es/organism/user-preferences/index.js +9 -5
  70. package/es/organism/user-preferences/index.js.map +1 -1
  71. package/es/organism/wizard-contents/index.d.ts +18 -5
  72. package/es/template/activity/index.d.ts +11 -12
  73. package/es/template/activity/index.d.ts.map +1 -1
  74. package/es/template/activity/index.js +3 -6
  75. package/es/template/activity/index.js.map +1 -1
  76. package/es/template/app-player/loading/index.d.ts +0 -1
  77. package/es/template/app-player/player/index.d.ts +0 -2
  78. package/es/template/app-player/player/slides/index.d.ts +0 -1
  79. package/es/template/app-player/player/slides/index.d.ts.map +1 -1
  80. package/es/template/app-player/popin-correction/index.d.ts +0 -1
  81. package/es/template/app-player/popin-correction/index.d.ts.map +1 -1
  82. package/es/template/app-player/popin-end/index.d.ts +0 -1
  83. package/es/template/app-review/index.d.ts +0 -1
  84. package/es/template/app-review/index.d.ts.map +1 -1
  85. package/es/template/app-review/player/prop-types.d.ts +0 -1
  86. package/es/template/app-review/player/prop-types.d.ts.map +1 -1
  87. package/es/template/app-review/prop-types.d.ts +0 -1
  88. package/es/template/app-review/prop-types.d.ts.map +1 -1
  89. package/es/template/back-office/brand-update/index.d.ts +36 -11
  90. package/es/template/common/dashboard/index.d.ts +0 -1
  91. package/es/template/common/search-page/index.d.ts +11 -3
  92. package/es/template/common/search-page/index.js +3 -3
  93. package/es/template/common/search-page/index.js.map +1 -1
  94. package/es/template/teams-dashboard/index.d.ts +1 -0
  95. package/lib/atom/input-search/index.d.ts.map +1 -1
  96. package/lib/atom/input-search/index.js +0 -1
  97. package/lib/atom/input-search/index.js.map +1 -1
  98. package/lib/atom/input-switch/index.d.ts +0 -1
  99. package/lib/atom/input-switch/index.d.ts.map +1 -1
  100. package/lib/atom/input-switch/index.js +2 -5
  101. package/lib/atom/input-switch/index.js.map +1 -1
  102. package/lib/atom/loader/index.native.d.ts +10 -0
  103. package/lib/atom/loader/index.native.d.ts.map +1 -0
  104. package/lib/atom/loader/index.native.js +205 -0
  105. package/lib/atom/loader/index.native.js.map +1 -0
  106. package/lib/atom/select/index.d.ts +18 -1
  107. package/lib/atom/select/index.d.ts.map +1 -1
  108. package/lib/atom/select/index.js +34 -18
  109. package/lib/atom/select/index.js.map +1 -1
  110. package/lib/molecule/answer/index.d.ts.map +1 -1
  111. package/lib/molecule/answer/index.js +20 -6
  112. package/lib/molecule/answer/index.js.map +1 -1
  113. package/lib/molecule/brand-form-group/index.d.ts +18 -5
  114. package/lib/molecule/cm-popin/types.d.ts +0 -1
  115. package/lib/molecule/cm-popin/types.d.ts.map +1 -1
  116. package/lib/molecule/draggable-list/index.d.ts +0 -1
  117. package/lib/molecule/filters/filters-wrapper.d.ts +1 -0
  118. package/lib/molecule/filters/filters-wrapper.d.ts.map +1 -1
  119. package/lib/molecule/filters/filters-wrapper.js +10 -9
  120. package/lib/molecule/filters/filters-wrapper.js.map +1 -1
  121. package/lib/molecule/filters/index.d.ts +10 -2
  122. package/lib/molecule/filters/index.d.ts.map +1 -1
  123. package/lib/molecule/filters/index.js +5 -8
  124. package/lib/molecule/filters/index.js.map +1 -1
  125. package/lib/molecule/questions/drop-down/index.d.ts +1 -0
  126. package/lib/molecule/questions/drop-down/index.d.ts.map +1 -1
  127. package/lib/molecule/questions/drop-down/index.js +9 -5
  128. package/lib/molecule/questions/drop-down/index.js.map +1 -1
  129. package/lib/molecule/questions/qcm/index.d.ts +1 -0
  130. package/lib/molecule/questions/qcm/index.d.ts.map +1 -1
  131. package/lib/molecule/questions/qcm/index.js +9 -5
  132. package/lib/molecule/questions/qcm/index.js.map +1 -1
  133. package/lib/molecule/questions/qcm-drag/index.d.ts +3 -1
  134. package/lib/molecule/questions/qcm-drag/index.d.ts.map +1 -1
  135. package/lib/molecule/questions/qcm-drag/index.js +9 -5
  136. package/lib/molecule/questions/qcm-drag/index.js.map +1 -1
  137. package/lib/molecule/questions/qcm-graphic/index.d.ts +1 -0
  138. package/lib/molecule/questions/qcm-graphic/index.d.ts.map +1 -1
  139. package/lib/molecule/questions/qcm-graphic/index.js +9 -5
  140. package/lib/molecule/questions/qcm-graphic/index.js.map +1 -1
  141. package/lib/molecule/questions/question-range/index.d.ts +1 -0
  142. package/lib/molecule/questions/question-range/index.d.ts.map +1 -1
  143. package/lib/molecule/questions/question-range/index.js +10 -6
  144. package/lib/molecule/questions/question-range/index.js.map +1 -1
  145. package/lib/molecule/questions/template/index.d.ts +6 -2
  146. package/lib/molecule/questions/template/index.d.ts.map +1 -1
  147. package/lib/molecule/questions/template/index.js +9 -5
  148. package/lib/molecule/questions/template/index.js.map +1 -1
  149. package/lib/molecule/setup-section/index.d.ts +0 -1
  150. package/lib/molecule/setup-section/index.d.ts.map +1 -1
  151. package/lib/molecule/setup-sections/index.d.ts +0 -1
  152. package/lib/molecule/setup-slide/index.d.ts +9 -2
  153. package/lib/molecule/setup-slider/index.d.ts +9 -2
  154. package/lib/organism/brand-form/index.d.ts +18 -5
  155. package/lib/organism/mooc-header/index.d.ts +5 -0
  156. package/lib/organism/mooc-header/index.d.ts.map +1 -1
  157. package/lib/organism/mooc-header/index.js +61 -11
  158. package/lib/organism/mooc-header/index.js.map +1 -1
  159. package/lib/organism/mooc-header/style.css +46 -0
  160. package/lib/organism/user-preferences/index.d.ts +1 -1
  161. package/lib/organism/user-preferences/index.d.ts.map +1 -1
  162. package/lib/organism/user-preferences/index.js +9 -5
  163. package/lib/organism/user-preferences/index.js.map +1 -1
  164. package/lib/organism/wizard-contents/index.d.ts +18 -5
  165. package/lib/template/activity/index.d.ts +11 -12
  166. package/lib/template/activity/index.d.ts.map +1 -1
  167. package/lib/template/activity/index.js +3 -6
  168. package/lib/template/activity/index.js.map +1 -1
  169. package/lib/template/app-player/loading/index.d.ts +0 -1
  170. package/lib/template/app-player/player/index.d.ts +0 -2
  171. package/lib/template/app-player/player/slides/index.d.ts +0 -1
  172. package/lib/template/app-player/player/slides/index.d.ts.map +1 -1
  173. package/lib/template/app-player/popin-correction/index.d.ts +0 -1
  174. package/lib/template/app-player/popin-correction/index.d.ts.map +1 -1
  175. package/lib/template/app-player/popin-end/index.d.ts +0 -1
  176. package/lib/template/app-review/index.d.ts +0 -1
  177. package/lib/template/app-review/index.d.ts.map +1 -1
  178. package/lib/template/app-review/player/prop-types.d.ts +0 -1
  179. package/lib/template/app-review/player/prop-types.d.ts.map +1 -1
  180. package/lib/template/app-review/prop-types.d.ts +0 -1
  181. package/lib/template/app-review/prop-types.d.ts.map +1 -1
  182. package/lib/template/back-office/brand-update/index.d.ts +36 -11
  183. package/lib/template/common/dashboard/index.d.ts +0 -1
  184. package/lib/template/common/search-page/index.d.ts +11 -3
  185. package/lib/template/common/search-page/index.js +3 -3
  186. package/lib/template/common/search-page/index.js.map +1 -1
  187. package/lib/template/teams-dashboard/index.d.ts +1 -0
  188. package/locales/cs/global.json +1 -0
  189. package/locales/de/global.json +1 -0
  190. package/locales/en/global.json +1 -0
  191. package/locales/es/global.json +1 -0
  192. package/locales/et/global.json +1 -0
  193. package/locales/fr/global.json +1 -0
  194. package/locales/hr/global.json +1 -0
  195. package/locales/hu/global.json +1 -0
  196. package/locales/it/global.json +1 -0
  197. package/locales/ja/global.json +1 -0
  198. package/locales/ko/global.json +1 -0
  199. package/locales/nl/global.json +1 -0
  200. package/locales/pl/global.json +1 -0
  201. package/locales/pt/global.json +1 -0
  202. package/locales/ro/global.json +1 -0
  203. package/locales/ru/global.json +1 -0
  204. package/locales/sk/global.json +1 -0
  205. package/locales/tl/global.json +1 -0
  206. package/locales/tr/global.json +1 -0
  207. package/locales/uk/global.json +1 -0
  208. package/locales/vi/global.json +1 -0
  209. package/locales/zh/global.json +1 -0
  210. package/locales/zh_TW/global.json +1 -0
  211. package/package.json +4 -4
package/README.md CHANGED
@@ -28,7 +28,6 @@ npm run start:ie # for Internet Explorer
28
28
 
29
29
  Then open `http://localhost:3004`.
30
30
 
31
-
32
31
  ### Analyse your component
33
32
 
34
33
  The `props` is the contract your app should fill in order to use the component.
@@ -78,6 +77,7 @@ which is also launched automatically whenever you run `npm start`
78
77
  - Be sure to have `translate: Provider.childContextTypes.translate` in the contextTypes object of your component
79
78
 
80
79
  example:
80
+
81
81
  ```
82
82
  ....
83
83
 
@@ -143,7 +143,7 @@ const props = {
143
143
  }
144
144
  ```
145
145
 
146
- #### Additional information:
146
+ #### Additional information
147
147
 
148
148
  The props include classNames && size control to handle additional styling.
149
149
 
@@ -180,4 +180,4 @@ You may need to install these optional libs depending on which native components
180
180
 
181
181
  Error when trying to launch the storybook:
182
182
 
183
- Try to delete your ```node_modules```, go to the project's root and launch: ```yarn && yarn bootstrap```
183
+ Try to delete your ```node_modules```, go to the project's root and launch: ```yarn```
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAYA,iDAgDC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-search/index.js"],"names":[],"mappings":";AAYA,iDA+CC"}
@@ -39,7 +39,6 @@ const Search = props => {
39
39
  name: "search",
40
40
  id: "search",
41
41
  placeholder: placeholder,
42
- title: placeholder,
43
42
  value: value,
44
43
  onInput: handleChange,
45
44
  onFocus: onFocus,
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","onClear","onFocus","onBlur","theme","handleChange","e","target","cmStyle","coorpmanager","isDefaultTheme","wrapperSearch","searchIcon","title","noValue","search","clearIcon","contextTypes","skin","childContextTypes","propTypes","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n NovaCompositionCoorpacademySearch as SearchIcon,\n NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n const {\n value,\n placeholder,\n onChange = noop,\n onClear = noop,\n onFocus,\n onBlur,\n theme = 'default'\n } = props;\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n const cmStyle = classnames(style.coorpmanager);\n const isDefaultTheme = theme === 'default';\n\n return (\n <div className={isDefaultTheme ? style.wrapperSearch : cmStyle}>\n <label htmlFor=\"search\" title={placeholder}>\n {!isDefaultTheme ? (\n <CMSearchIcon className={style.searchIcon} />\n ) : (\n <SearchIcon className={style.searchIcon} />\n )}\n {!isDefaultTheme ? (\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n {placeholder}\n </span>\n ) : null}\n </label>\n <input\n data-name=\"search-input\"\n className={style.search}\n aria-label={placeholder}\n type=\"text\"\n name=\"search\"\n id=\"search\"\n placeholder={placeholder}\n title={placeholder}\n value={value}\n onInput={handleChange}\n onFocus={onFocus}\n onChange={noop}\n onBlur={onBlur}\n />\n {value && !isDefaultTheme ? (\n <CloseIcon onClick={onClear} className={style.clearIcon} />\n ) : null}\n </div>\n );\n};\n\nSearch.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n value: PropTypes.string,\n placeholder: PropTypes.string.isRequired,\n onChange: PropTypes.func,\n onClear: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\n\nexport default Search;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,qCAAqC,IAAIC,YAD3C,EAEEC,iCAAiC,IAAIC,UAFvC,EAGEC,oBAAoB,IAAIC,SAH1B,QAIO,0BAJP;AAMA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,QAAQ,QAHJ;IAIJC,OAAO,QAJH;IAKJC,OALI;IAMJC,MANI;IAOJC,KAAK,GAAG;EAPJ,IAQFP,KARJ;EASA,MAAMQ,YAAY,GAAGpB,OAAO,CAAC,MAAMqB,CAAC,IAAIN,QAAQ,CAACM,CAAC,CAACC,MAAF,CAAST,KAAV,CAApB,EAAsC,CAACE,QAAD,CAAtC,CAA5B;EACA,MAAMQ,OAAO,GAAGrB,UAAU,CAACQ,KAAK,CAACc,YAAP,CAA1B;EACA,MAAMC,cAAc,GAAGN,KAAK,KAAK,SAAjC;EAEA,oBACE;IAAK,SAAS,EAAEM,cAAc,GAAGf,KAAK,CAACgB,aAAT,GAAyBH;EAAvD,gBACE;IAAO,OAAO,EAAC,QAAf;IAAwB,KAAK,EAAET;EAA/B,GACG,CAACW,cAAD,gBACC,oBAAC,YAAD;IAAc,SAAS,EAAEf,KAAK,CAACiB;EAA/B,EADD,gBAGC,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACiB;EAA7B,EAJJ,EAMG,CAACF,cAAD,gBACC;IAAM,SAAS,EAAEvB,UAAU,CAACQ,KAAK,CAACkB,KAAP,EAAc,SAAQf,KAAR,KAAkBH,KAAK,CAACmB,OAAtC;EAA3B,GACGf,WADH,CADD,GAIG,IAVN,CADF,eAaE;IACE,aAAU,cADZ;IAEE,SAAS,EAAEJ,KAAK,CAACoB,MAFnB;IAGE,cAAYhB,WAHd;IAIE,IAAI,EAAC,MAJP;IAKE,IAAI,EAAC,QALP;IAME,EAAE,EAAC,QANL;IAOE,WAAW,EAAEA,WAPf;IAQE,KAAK,EAAEA,WART;IASE,KAAK,EAAED,KATT;IAUE,OAAO,EAAEO,YAVX;IAWE,OAAO,EAAEH,OAXX;IAYE,QAAQ,OAZV;IAaE,MAAM,EAAEC;EAbV,EAbF,EA4BGL,KAAK,IAAI,CAACY,cAAV,gBACC,oBAAC,SAAD;IAAW,OAAO,EAAET,OAApB;IAA6B,SAAS,EAAEN,KAAK,CAACqB;EAA9C,EADD,GAEG,IA9BN,CADF;AAkCD,CAhDD;;AAkDApB,MAAM,CAACqB,YAAP,GAAsB;EACpBC,IAAI,EAAExB,QAAQ,CAACyB,iBAAT,CAA2BD;AADb,CAAtB;AAIAtB,MAAM,CAACwB,SAAP,2CAAmB;EACjBtB,KAAK,EAAEZ,SAAS,CAACmC,MADA;EAEjBtB,WAAW,EAAEb,SAAS,CAACmC,MAAV,CAAiBC,UAFb;EAGjBtB,QAAQ,EAAEd,SAAS,CAACqC,IAHH;EAIjBtB,OAAO,EAAEf,SAAS,CAACqC,IAJF;EAKjBrB,OAAO,EAAEhB,SAAS,CAACqC,IALF;EAMjBpB,MAAM,EAAEjB,SAAS,CAACqC,IAND;EAOjBnB,KAAK,EAAElB,SAAS,CAACsC,KAAV,CAAgB,CAAC,SAAD,EAAY,cAAZ,CAAhB;AAPU,CAAnB;AAUA,eAAe5B,MAAf"}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","classnames","NovaCompositionCoorpacademySearchThin","CMSearchIcon","NovaCompositionCoorpacademySearch","SearchIcon","NovaSolidStatusClose","CloseIcon","Provider","style","Search","props","value","placeholder","onChange","onClear","onFocus","onBlur","theme","handleChange","e","target","cmStyle","coorpmanager","isDefaultTheme","wrapperSearch","searchIcon","title","noValue","search","clearIcon","contextTypes","skin","childContextTypes","propTypes","string","isRequired","func","oneOf"],"sources":["../../../src/atom/input-search/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {\n NovaCompositionCoorpacademySearchThin as CMSearchIcon,\n NovaCompositionCoorpacademySearch as SearchIcon,\n NovaSolidStatusClose as CloseIcon\n} from '@coorpacademy/nova-icons';\nimport {noop, isEmpty} from 'lodash/fp';\nimport Provider from '../provider';\nimport style from './style.css';\n\nconst Search = props => {\n const {\n value,\n placeholder,\n onChange = noop,\n onClear = noop,\n onFocus,\n onBlur,\n theme = 'default'\n } = props;\n const handleChange = useMemo(() => e => onChange(e.target.value), [onChange]);\n const cmStyle = classnames(style.coorpmanager);\n const isDefaultTheme = theme === 'default';\n\n return (\n <div className={isDefaultTheme ? style.wrapperSearch : cmStyle}>\n <label htmlFor=\"search\" title={placeholder}>\n {!isDefaultTheme ? (\n <CMSearchIcon className={style.searchIcon} />\n ) : (\n <SearchIcon className={style.searchIcon} />\n )}\n {!isDefaultTheme ? (\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>\n {placeholder}\n </span>\n ) : null}\n </label>\n <input\n data-name=\"search-input\"\n className={style.search}\n aria-label={placeholder}\n type=\"text\"\n name=\"search\"\n id=\"search\"\n placeholder={placeholder}\n value={value}\n onInput={handleChange}\n onFocus={onFocus}\n onChange={noop}\n onBlur={onBlur}\n />\n {value && !isDefaultTheme ? (\n <CloseIcon onClick={onClear} className={style.clearIcon} />\n ) : null}\n </div>\n );\n};\n\nSearch.contextTypes = {\n skin: Provider.childContextTypes.skin\n};\n\nSearch.propTypes = {\n value: PropTypes.string,\n placeholder: PropTypes.string.isRequired,\n onChange: PropTypes.func,\n onClear: PropTypes.func,\n onFocus: PropTypes.func,\n onBlur: PropTypes.func,\n theme: PropTypes.oneOf(['default', 'coorpmanager'])\n};\n\nexport default Search;\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAeC,OAAf,QAA6B,OAA7B;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SACEC,qCAAqC,IAAIC,YAD3C,EAEEC,iCAAiC,IAAIC,UAFvC,EAGEC,oBAAoB,IAAIC,SAH1B,QAIO,0BAJP;AAMA,OAAOC,QAAP,MAAqB,aAArB;AACA,OAAOC,KAAP,MAAkB,aAAlB;;AAEA,MAAMC,MAAM,GAAGC,KAAK,IAAI;EACtB,MAAM;IACJC,KADI;IAEJC,WAFI;IAGJC,QAAQ,QAHJ;IAIJC,OAAO,QAJH;IAKJC,OALI;IAMJC,MANI;IAOJC,KAAK,GAAG;EAPJ,IAQFP,KARJ;EASA,MAAMQ,YAAY,GAAGpB,OAAO,CAAC,MAAMqB,CAAC,IAAIN,QAAQ,CAACM,CAAC,CAACC,MAAF,CAAST,KAAV,CAApB,EAAsC,CAACE,QAAD,CAAtC,CAA5B;EACA,MAAMQ,OAAO,GAAGrB,UAAU,CAACQ,KAAK,CAACc,YAAP,CAA1B;EACA,MAAMC,cAAc,GAAGN,KAAK,KAAK,SAAjC;EAEA,oBACE;IAAK,SAAS,EAAEM,cAAc,GAAGf,KAAK,CAACgB,aAAT,GAAyBH;EAAvD,gBACE;IAAO,OAAO,EAAC,QAAf;IAAwB,KAAK,EAAET;EAA/B,GACG,CAACW,cAAD,gBACC,oBAAC,YAAD;IAAc,SAAS,EAAEf,KAAK,CAACiB;EAA/B,EADD,gBAGC,oBAAC,UAAD;IAAY,SAAS,EAAEjB,KAAK,CAACiB;EAA7B,EAJJ,EAMG,CAACF,cAAD,gBACC;IAAM,SAAS,EAAEvB,UAAU,CAACQ,KAAK,CAACkB,KAAP,EAAc,SAAQf,KAAR,KAAkBH,KAAK,CAACmB,OAAtC;EAA3B,GACGf,WADH,CADD,GAIG,IAVN,CADF,eAaE;IACE,aAAU,cADZ;IAEE,SAAS,EAAEJ,KAAK,CAACoB,MAFnB;IAGE,cAAYhB,WAHd;IAIE,IAAI,EAAC,MAJP;IAKE,IAAI,EAAC,QALP;IAME,EAAE,EAAC,QANL;IAOE,WAAW,EAAEA,WAPf;IAQE,KAAK,EAAED,KART;IASE,OAAO,EAAEO,YATX;IAUE,OAAO,EAAEH,OAVX;IAWE,QAAQ,OAXV;IAYE,MAAM,EAAEC;EAZV,EAbF,EA2BGL,KAAK,IAAI,CAACY,cAAV,gBACC,oBAAC,SAAD;IAAW,OAAO,EAAET,OAApB;IAA6B,SAAS,EAAEN,KAAK,CAACqB;EAA9C,EADD,GAEG,IA7BN,CADF;AAiCD,CA/CD;;AAiDApB,MAAM,CAACqB,YAAP,GAAsB;EACpBC,IAAI,EAAExB,QAAQ,CAACyB,iBAAT,CAA2BD;AADb,CAAtB;AAIAtB,MAAM,CAACwB,SAAP,2CAAmB;EACjBtB,KAAK,EAAEZ,SAAS,CAACmC,MADA;EAEjBtB,WAAW,EAAEb,SAAS,CAACmC,MAAV,CAAiBC,UAFb;EAGjBtB,QAAQ,EAAEd,SAAS,CAACqC,IAHH;EAIjBtB,OAAO,EAAEf,SAAS,CAACqC,IAJF;EAKjBrB,OAAO,EAAEhB,SAAS,CAACqC,IALF;EAMjBpB,MAAM,EAAEjB,SAAS,CAACqC,IAND;EAOjBnB,KAAK,EAAElB,SAAS,CAACsC,KAAV,CAAgB,CAAC,SAAD,EAAY,cAAZ,CAAhB;AAPU,CAAnB;AAUA,eAAe5B,MAAf"}
@@ -9,7 +9,6 @@ declare namespace InputSwitch {
9
9
  disabled: PropTypes.Requireable<boolean>;
10
10
  onChange: PropTypes.Requireable<(...args: any[]) => any>;
11
11
  description: PropTypes.Requireable<string>;
12
- 'aria-labelledby': PropTypes.Requireable<string>;
13
12
  modified: PropTypes.Requireable<boolean>;
14
13
  titlePosition: PropTypes.Requireable<string>;
15
14
  theme: PropTypes.Requireable<string>;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAwEC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAsEC"}
@@ -19,8 +19,7 @@ const InputSwitch = props => {
19
19
  titlePosition = 'left',
20
20
  details = '',
21
21
  requiredSelection = false,
22
- 'data-name': dataName,
23
- 'aria-labelledby': ariaLabelledBy
22
+ 'data-name': dataName
24
23
  } = props;
25
24
 
26
25
  const idSwitch = id || _uniqueId('input-switch-');
@@ -75,8 +74,7 @@ const InputSwitch = props => {
75
74
  onChange: handleChange,
76
75
  checked: value,
77
76
  disabled: isDisabled,
78
- className: style.checkbox,
79
- "aria-labelledby": ariaLabelledBy
77
+ className: style.checkbox
80
78
  }), /*#__PURE__*/React.createElement("label", {
81
79
  htmlFor: idSwitch,
82
80
  "data-name": "input-switch-label"
@@ -95,7 +93,6 @@ InputSwitch.propTypes = process.env.NODE_ENV !== "production" ? {
95
93
  disabled: PropTypes.bool,
96
94
  onChange: PropTypes.func,
97
95
  description: PropTypes.string,
98
- 'aria-labelledby': PropTypes.string,
99
96
  modified: PropTypes.bool,
100
97
  titlePosition: PropTypes.oneOf(['right', 'left']),
101
98
  theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName,\n 'aria-labelledby': ariaLabelledBy\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={ariaLabelledBy}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? <span className={style.title}>{`${title} `}</span> : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
@@ -0,0 +1,10 @@
1
+ /// <reference types="react" />
2
+ import { ColorValue } from 'react-native';
3
+ export declare type Props = {
4
+ color?: ColorValue;
5
+ height?: number;
6
+ readyToHide: boolean;
7
+ };
8
+ declare const Loader: (props: Props) => JSX.Element | null;
9
+ export default Loader;
10
+ //# sourceMappingURL=index.native.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.native.d.ts","sourceRoot":"","sources":["../../../src/atom/loader/index.native.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA0C,UAAU,EAAC,MAAM,cAAc,CAAC;AAoCjF,oBAAY,KAAK,GAAG;IAClB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAKF,QAAA,MAAM,MAAM,UAAW,KAAK,uBAqK3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1,192 @@
1
+ import { useAnimateProp } from '@coorpacademy/react-native-animation';
2
+ import React, { useEffect, useRef, useState } from 'react';
3
+ import { Animated, StyleSheet, Easing } from 'react-native';
4
+ import { useTemplateContext } from '../../template/app-review/template-context';
5
+
6
+ const createStyleSheet = theme => StyleSheet.create({
7
+ container: {
8
+ alignItems: 'center',
9
+ justifyContent: 'center'
10
+ },
11
+ dot: {
12
+ position: 'absolute'
13
+ },
14
+ blue: {
15
+ backgroundColor: theme.colors.cta
16
+ },
17
+ red: {
18
+ backgroundColor: theme.colors.negative
19
+ },
20
+ green: {
21
+ backgroundColor: theme.colors.positive
22
+ },
23
+ yellow: {
24
+ backgroundColor: theme.colors.battle
25
+ }
26
+ });
27
+
28
+ const CYCLE_DURATION = 3000;
29
+ const MIN_TIME = 1000;
30
+
31
+ const Loader = props => {
32
+ const templateContext = useTemplateContext();
33
+ const {
34
+ theme
35
+ } = templateContext;
36
+ const [styleSheet, setStylesheet] = useState(null);
37
+ const [visible, setVisible] = useState(true);
38
+ const [minTimeIsSpent, setMinTimeSpent] = useState(false);
39
+ const rotation = useRef(new Animated.Value(0)).current;
40
+ const scale = useRef(new Animated.Value(0)).current;
41
+ const hideAnimation = useAnimateProp({
42
+ property: 'opacity',
43
+ fromValue: 1,
44
+ toValue: 0
45
+ });
46
+ const {
47
+ height = 60,
48
+ color,
49
+ readyToHide
50
+ } = props;
51
+ useEffect(() => {
52
+ const _stylesheet = createStyleSheet(theme);
53
+
54
+ setStylesheet(_stylesheet);
55
+ }, [theme]);
56
+ useEffect(() => {
57
+ if (readyToHide && minTimeIsSpent) {
58
+ setVisible(false);
59
+ }
60
+ }, [readyToHide, minTimeIsSpent]);
61
+ useEffect(() => {
62
+ if (!visible) {
63
+ hideAnimation.start();
64
+ }
65
+ }, [visible, hideAnimation]);
66
+ useEffect(() => {
67
+ setTimeout(() => {
68
+ setMinTimeSpent(true);
69
+ }, MIN_TIME);
70
+
71
+ const _animation = Animated.parallel([Animated.loop(Animated.sequence([Animated.timing(scale, {
72
+ toValue: 0,
73
+ duration: 0,
74
+ useNativeDriver: false
75
+ }), Animated.timing(scale, {
76
+ toValue: 1,
77
+ duration: CYCLE_DURATION,
78
+ useNativeDriver: false,
79
+ easing: Easing.inOut(Easing.sin)
80
+ }), Animated.timing(scale, {
81
+ toValue: 2,
82
+ duration: CYCLE_DURATION,
83
+ useNativeDriver: false,
84
+ easing: Easing.inOut(Easing.sin)
85
+ }), Animated.timing(scale, {
86
+ toValue: 3,
87
+ duration: CYCLE_DURATION,
88
+ useNativeDriver: false,
89
+ easing: Easing.inOut(Easing.sin)
90
+ })])), Animated.loop(Animated.sequence([Animated.timing(rotation, {
91
+ toValue: 0,
92
+ duration: 0,
93
+ useNativeDriver: false
94
+ }), Animated.timing(rotation, {
95
+ toValue: 1,
96
+ duration: CYCLE_DURATION,
97
+ useNativeDriver: false,
98
+ easing: Easing.inOut(Easing.sin)
99
+ })]))]);
100
+
101
+ _animation.start();
102
+
103
+ return () => {
104
+ _animation.stop();
105
+ }; // eslint bad warning --> effect only onmount
106
+ // eslint-disable-next-line react-hooks/exhaustive-deps
107
+ }, []);
108
+
109
+ if (!styleSheet) {
110
+ return null;
111
+ }
112
+
113
+ const interpolatedScale = scale.interpolate({
114
+ inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],
115
+ outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]
116
+ });
117
+ const interpolatedRotation = rotation.interpolate({
118
+ inputRange: [0, 1],
119
+ outputRange: ['0deg', '360deg']
120
+ });
121
+ const dotWidth = rotation.interpolate({
122
+ inputRange: [0, 0.5, 1],
123
+ outputRange: [height / 2, height / 6, height / 2]
124
+ });
125
+ const dotTranslate = rotation.interpolate({
126
+ inputRange: [0, 0.5, 1],
127
+ outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]
128
+ });
129
+ const dotStyle = {
130
+ width: dotWidth,
131
+ height: height / 6,
132
+ borderRadius: height / 12
133
+ };
134
+ return /*#__PURE__*/React.createElement(Animated.View, {
135
+ style: hideAnimation.animatedStyle
136
+ }, /*#__PURE__*/React.createElement(Animated.View, {
137
+ style: [styleSheet.container, {
138
+ height,
139
+ width: height,
140
+ transform: [{
141
+ scaleX: interpolatedScale
142
+ }, {
143
+ scaleY: interpolatedScale
144
+ }, {
145
+ rotateZ: interpolatedRotation
146
+ }]
147
+ }]
148
+ }, /*#__PURE__*/React.createElement(Animated.View, {
149
+ style: [styleSheet.dot, color ? {
150
+ backgroundColor: color
151
+ } : styleSheet.red, dotStyle, {
152
+ transform: [{
153
+ rotateZ: '45deg'
154
+ }, {
155
+ translateX: dotTranslate
156
+ }]
157
+ }]
158
+ }), /*#__PURE__*/React.createElement(Animated.View, {
159
+ style: [styleSheet.dot, color ? {
160
+ backgroundColor: color
161
+ } : styleSheet.green, dotStyle, {
162
+ transform: [{
163
+ rotateZ: '135deg'
164
+ }, {
165
+ translateX: dotTranslate
166
+ }]
167
+ }]
168
+ }), /*#__PURE__*/React.createElement(Animated.View, {
169
+ style: [styleSheet.dot, color ? {
170
+ backgroundColor: color
171
+ } : styleSheet.yellow, dotStyle, {
172
+ transform: [{
173
+ rotateZ: '225deg'
174
+ }, {
175
+ translateX: dotTranslate
176
+ }]
177
+ }]
178
+ }), /*#__PURE__*/React.createElement(Animated.View, {
179
+ style: [styleSheet.dot, color ? {
180
+ backgroundColor: color
181
+ } : styleSheet.blue, dotStyle, {
182
+ transform: [{
183
+ rotateZ: '315deg'
184
+ }, {
185
+ translateX: dotTranslate
186
+ }]
187
+ }]
188
+ })));
189
+ };
190
+
191
+ export default Loader;
192
+ //# sourceMappingURL=index.native.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.native.js","names":["useAnimateProp","React","useEffect","useRef","useState","Animated","StyleSheet","Easing","useTemplateContext","createStyleSheet","theme","create","container","alignItems","justifyContent","dot","position","blue","backgroundColor","colors","cta","red","negative","green","positive","yellow","battle","CYCLE_DURATION","MIN_TIME","Loader","props","templateContext","styleSheet","setStylesheet","visible","setVisible","minTimeIsSpent","setMinTimeSpent","rotation","Value","current","scale","hideAnimation","property","fromValue","toValue","height","color","readyToHide","_stylesheet","start","setTimeout","_animation","parallel","loop","sequence","timing","duration","useNativeDriver","easing","inOut","sin","stop","interpolatedScale","interpolate","inputRange","outputRange","interpolatedRotation","dotWidth","dotTranslate","dotStyle","width","borderRadius","animatedStyle","transform","scaleX","scaleY","rotateZ","translateX"],"sources":["../../../src/atom/loader/index.native.tsx"],"sourcesContent":["import {useAnimateProp} from '@coorpacademy/react-native-animation';\nimport React, {useEffect, useRef, useState} from 'react';\nimport {Animated, StyleSheet, Easing, ViewStyle, ColorValue} from 'react-native';\nimport {useTemplateContext} from '../../template/app-review/template-context';\nimport {Theme} from '../../variables/theme.native';\n\ntype StyleSheetType = {\n container: ViewStyle;\n dot: ViewStyle;\n blue: ViewStyle;\n red: ViewStyle;\n green: ViewStyle;\n yellow: ViewStyle;\n};\n\nconst createStyleSheet = (theme: Theme): StyleSheetType =>\n StyleSheet.create({\n container: {\n alignItems: 'center',\n justifyContent: 'center'\n },\n dot: {\n position: 'absolute'\n },\n blue: {\n backgroundColor: theme.colors.cta\n },\n red: {\n backgroundColor: theme.colors.negative\n },\n green: {\n backgroundColor: theme.colors.positive\n },\n yellow: {\n backgroundColor: theme.colors.battle\n }\n });\n\nexport type Props = {\n color?: ColorValue;\n height?: number;\n readyToHide: boolean;\n};\n\nconst CYCLE_DURATION = 3000;\nconst MIN_TIME = 1000;\n\nconst Loader = (props: Props) => {\n const templateContext = useTemplateContext();\n const {theme} = templateContext;\n\n const [styleSheet, setStylesheet] = useState<StyleSheetType | null>(null);\n const [visible, setVisible] = useState<boolean>(true);\n const [minTimeIsSpent, setMinTimeSpent] = useState<boolean>(false);\n\n const rotation = useRef<Animated.Value>(new Animated.Value(0)).current;\n const scale = useRef<Animated.Value>(new Animated.Value(0)).current;\n\n const hideAnimation = useAnimateProp({\n property: 'opacity',\n fromValue: 1,\n toValue: 0\n });\n\n const {height = 60, color, readyToHide} = props;\n\n useEffect(() => {\n const _stylesheet = createStyleSheet(theme);\n setStylesheet(_stylesheet);\n }, [theme]);\n\n useEffect(() => {\n if (readyToHide && minTimeIsSpent) {\n setVisible(false);\n }\n }, [readyToHide, minTimeIsSpent]);\n\n useEffect(() => {\n if (!visible) {\n hideAnimation.start();\n }\n }, [visible, hideAnimation]);\n\n useEffect(() => {\n setTimeout(() => {\n setMinTimeSpent(true);\n }, MIN_TIME);\n\n const _animation = Animated.parallel([\n Animated.loop(\n Animated.sequence([\n Animated.timing(scale, {toValue: 0, duration: 0, useNativeDriver: false}),\n Animated.timing(scale, {\n toValue: 1,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n }),\n Animated.timing(scale, {\n toValue: 2,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n }),\n Animated.timing(scale, {\n toValue: 3,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n })\n ])\n ),\n Animated.loop(\n Animated.sequence([\n Animated.timing(rotation, {toValue: 0, duration: 0, useNativeDriver: false}),\n Animated.timing(rotation, {\n toValue: 1,\n duration: CYCLE_DURATION,\n useNativeDriver: false,\n easing: Easing.inOut(Easing.sin)\n })\n ])\n )\n ]);\n\n _animation.start();\n\n return () => {\n _animation.stop();\n };\n // eslint bad warning --> effect only onmount\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n if (!styleSheet) {\n return null;\n }\n\n const interpolatedScale = scale.interpolate({\n inputRange: [0, 0.45, 1, 1.32, 1.5, 2, 2.3, 2.64, 3],\n outputRange: [0.5, 0.2, 0.5, 0.5, 0.8, 0.5, 0.5, 0.3, 0.5]\n });\n\n const interpolatedRotation = rotation.interpolate({\n inputRange: [0, 1],\n outputRange: ['0deg', '360deg']\n });\n const dotWidth = rotation.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [height / 2, height / 6, height / 2]\n });\n const dotTranslate = rotation.interpolate({\n inputRange: [0, 0.5, 1],\n outputRange: [-25 * (height / 60), -35 * (height / 60), -25 * (height / 60)]\n });\n const dotStyle = {\n width: dotWidth,\n height: height / 6,\n borderRadius: height / 12\n };\n\n return (\n <Animated.View style={hideAnimation.animatedStyle}>\n <Animated.View\n style={[\n styleSheet.container,\n {\n height,\n width: height,\n transform: [\n {scaleX: interpolatedScale},\n {scaleY: interpolatedScale},\n {rotateZ: interpolatedRotation}\n ]\n }\n ]}\n >\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.red,\n dotStyle,\n {transform: [{rotateZ: '45deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.green,\n dotStyle,\n {transform: [{rotateZ: '135deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.yellow,\n dotStyle,\n {transform: [{rotateZ: '225deg'}, {translateX: dotTranslate}]}\n ]}\n />\n <Animated.View\n style={[\n styleSheet.dot,\n color ? {backgroundColor: color} : styleSheet.blue,\n dotStyle,\n {transform: [{rotateZ: '315deg'}, {translateX: dotTranslate}]}\n ]}\n />\n </Animated.View>\n </Animated.View>\n );\n};\n\nexport default Loader;\n"],"mappings":"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"}
@@ -4,6 +4,15 @@ export namespace SelectOptionPropTypes {
4
4
  const selected: PropTypes.Requireable<boolean>;
5
5
  const validOption: PropTypes.Requireable<boolean>;
6
6
  }
7
+ export namespace SelectOptionGroupPropTypes {
8
+ const label: PropTypes.Validator<string>;
9
+ const options: PropTypes.Requireable<(PropTypes.InferProps<{
10
+ name: PropTypes.Validator<string>;
11
+ value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
12
+ selected: PropTypes.Requireable<boolean>;
13
+ validOption: PropTypes.Requireable<boolean>;
14
+ }> | null | undefined)[]>;
15
+ }
7
16
  export default Select;
8
17
  import PropTypes from "prop-types";
9
18
  declare function Select(props: any, legacyContext: any): JSX.Element;
@@ -48,10 +57,18 @@ declare namespace Select {
48
57
  selected: PropTypes.Requireable<boolean>;
49
58
  validOption: PropTypes.Requireable<boolean>;
50
59
  }> | null | undefined)[]>;
60
+ optgroups: PropTypes.Requireable<(PropTypes.InferProps<{
61
+ label: PropTypes.Validator<string>;
62
+ options: PropTypes.Requireable<(PropTypes.InferProps<{
63
+ name: PropTypes.Validator<string>;
64
+ value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
65
+ selected: PropTypes.Requireable<boolean>;
66
+ validOption: PropTypes.Requireable<boolean>;
67
+ }> | null | undefined)[]>;
68
+ }> | null | undefined)[]>;
51
69
  modified: PropTypes.Requireable<boolean>;
52
70
  error: PropTypes.Requireable<boolean>;
53
71
  'aria-label': PropTypes.Requireable<string>;
54
- 'aria-labelledby': PropTypes.Requireable<string>;
55
72
  };
56
73
  }
57
74
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;AAoDA,qEA+KC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/select/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA2DA,qEAqLC"}
@@ -3,11 +3,14 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
3
3
  import React, { useCallback, useMemo, useState } from 'react';
4
4
  import PropTypes from 'prop-types';
5
5
  import classnames from 'classnames';
6
+ import concat from 'lodash/fp/concat';
6
7
  import filter from 'lodash/fp/filter';
7
8
  import find from 'lodash/fp/find';
9
+ import flatMapDeep from 'lodash/fp/flatMapDeep';
8
10
  import get from 'lodash/fp/get';
9
11
  import getOr from 'lodash/fp/getOr';
10
12
  import includes from 'lodash/fp/includes';
13
+ import isEmpty from 'lodash/fp/isEmpty';
11
14
  import keys from 'lodash/fp/keys';
12
15
  import map from 'lodash/fp/map';
13
16
  import size from 'lodash/fp/size';
@@ -35,7 +38,9 @@ const ArrowView = ({
35
38
  arrowClass,
36
39
  arrowColor
37
40
  }) => {
38
- const props = useMemo(() => _extends({}, arrowColor & {
41
+ const props = useMemo(() => _extends({}, ariaLabel & {
42
+ 'aria-label': ariaLabel
43
+ }, arrowColor & {
39
44
  color: arrowColor
40
45
  }, {
41
46
  className: arrowClass
@@ -54,6 +59,7 @@ const Select = (props, legacyContext) => {
54
59
  const {
55
60
  name,
56
61
  options = [],
62
+ optgroups = [],
57
63
  className,
58
64
  borderClassName,
59
65
  onChange,
@@ -65,20 +71,27 @@ const Select = (props, legacyContext) => {
65
71
  modified = false,
66
72
  error = false,
67
73
  title: propTitle,
68
- 'aria-label': ariaLabel,
69
- 'aria-labelledby': ariaLabelledBy
74
+ 'aria-label': ariaLabel
70
75
  } = props;
71
76
  const skin = GetSkinFromContext(legacyContext);
72
77
  const title = useMemo(() => propTitle ? `${propTitle}${required ? '*' : ''}` : null, [propTitle, required]);
73
78
  const [isArrowUp, setIsArrowUp] = useState(false);
74
79
  const handleSelectOnFocus = useCallback(() => setIsArrowUp(true), []);
75
80
  const handleSelectOnBlur = useCallback(() => setIsArrowUp(false), []);
76
- const optionList = options && options.map((option, index) => {
81
+
82
+ const selectOption = (option, index) => {
77
83
  return /*#__PURE__*/React.createElement("option", {
78
84
  key: index,
79
85
  value: option.value,
80
86
  className: style.selectOption
81
87
  }, option.name);
88
+ };
89
+
90
+ const optionList = !isEmpty(options) ? options.map((option, index) => selectOption(option, index)) : optgroups.map((optgroup, index) => {
91
+ return /*#__PURE__*/React.createElement("optgroup", {
92
+ key: index,
93
+ label: optgroup.label
94
+ }, optgroup.options && optgroup.options.map((option, i) => selectOption(option, i)));
82
95
  });
83
96
  const titleView = title ? /*#__PURE__*/React.createElement("span", {
84
97
  className: style.title
@@ -87,12 +100,12 @@ const Select = (props, legacyContext) => {
87
100
  selected: true
88
101
  }, options)) : get('value', find({
89
102
  selected: true
90
- }, options)), [multiple, options]);
103
+ }, concat(options, flatMapDeep('options', optgroups)))), [multiple, options, optgroups]);
91
104
  const selectedLabel = useMemo(() => multiple ? map(get('name'), filter({
92
105
  selected: true
93
- }, options)) : get('name', find({
106
+ }, options)) : get('value', find({
94
107
  selected: true
95
- }, options)), [multiple, options]);
108
+ }, concat(options, flatMapDeep('options', optgroups)))), [multiple, options, optgroups]);
96
109
  const isSelectedInValidOption = useMemo(() => theme === 'player' && getOr(false, 'name', find({
97
110
  validOption: false,
98
111
  selected: true
@@ -133,15 +146,10 @@ const Select = (props, legacyContext) => {
133
146
  ariaLabel: ariaLabel,
134
147
  arrowClass: shouldUseSkinFontColor ? style.selectedArrow : style.arrow,
135
148
  arrowColor: isThemeOneOfQuestionTemplateOrPlayer ? arrowColor : black
136
- }), /*#__PURE__*/React.createElement("select", _extends({}, ariaLabelledBy ? {
137
- 'aria-labelledby': ariaLabelledBy
138
- } : {}, ariaLabel && !ariaLabelledBy ? {
139
- 'aria-label': ariaLabel
140
- } : {}, ariaLabel ? {
141
- title: ariaLabel
142
- } : {}, {
149
+ }), /*#__PURE__*/React.createElement("select", {
143
150
  "data-name": "native-select",
144
151
  className: style.selectBox,
152
+ title: selectedLabel,
145
153
  name: name,
146
154
  onChange: handleChange,
147
155
  value: selected,
@@ -154,7 +162,7 @@ const Select = (props, legacyContext) => {
154
162
  ,
155
163
  onMouseLeave: handleSelectOnBlur,
156
164
  "data-testid": "native-select"
157
- }), optionList)), /*#__PURE__*/React.createElement("div", {
165
+ }, optionList)), /*#__PURE__*/React.createElement("div", {
158
166
  className: style.description
159
167
  }, description));
160
168
  };
@@ -165,6 +173,10 @@ export const SelectOptionPropTypes = {
165
173
  selected: PropTypes.bool,
166
174
  validOption: PropTypes.bool
167
175
  };
176
+ export const SelectOptionGroupPropTypes = {
177
+ label: PropTypes.string.isRequired,
178
+ options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes))
179
+ };
168
180
  Select.contextTypes = {
169
181
  skin: Provider.childContextTypes.skin
170
182
  };
@@ -180,10 +192,10 @@ Select.propTypes = process.env.NODE_ENV !== "production" ? {
180
192
  onChange: PropTypes.func,
181
193
  theme: PropTypes.oneOf(keys(themeStyle)),
182
194
  options: PropTypes.arrayOf(PropTypes.shape(SelectOptionPropTypes)),
195
+ optgroups: PropTypes.arrayOf(PropTypes.shape(SelectOptionGroupPropTypes)),
183
196
  modified: PropTypes.bool,
184
197
  error: PropTypes.bool,
185
- 'aria-label': PropTypes.string,
186
- 'aria-labelledby': PropTypes.string
198
+ 'aria-label': PropTypes.string
187
199
  } : {};
188
200
  export default Select;
189
201
  //# sourceMappingURL=index.js.map